*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0e0e0e;--near-black:#141414;--dark:#1c1c1c;
  --gray-dark:#555;--gray-mid:#888;--gray-light:#bbb;
  --border:#e0ddd8;--bg-page:#ffffff;--bg-light:#f7f6f3;
  --bg-card:#ebebea;--accent:#c8a96e;
  --font:'Montserrat',sans-serif;
}
html{font-size:14px}
body{font-family:var(--font);background:var(--bg-page);color:var(--black);font-weight:300;overflow-x:hidden}

/* ── HEADER ── */
.sel-header{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:52px;background:var(--black)}
.sel-logo{font-size:13px;font-weight:200;letter-spacing:.28em;color:#fff;text-transform:uppercase;text-decoration:none}
.sel-logo span{color:var(--accent)}
.sel-back{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:lowercase;color:rgba(255,255,255,0.4);text-decoration:none;transition:color .2s}
.sel-back:hover{color:rgba(255,255,255,0.8)}
.sel-back svg{width:12px;height:12px;stroke:currentColor;fill:none}

/* ── TOP + BREADCRUMB ── */
.sel-top{padding:28px 32px 0}
.sel-title{font-size:22px;font-weight:600;letter-spacing:.02em;color:var(--black);margin-bottom:18px}
.sel-title span{font-weight:200;color:var(--gray-mid);margin-left:6px}
.sel-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding-bottom:12px}
.sel-search svg{width:15px;height:15px;stroke:var(--gray-mid);fill:none;flex-shrink:0}
.sel-search input{flex:1;border:none;outline:none;font-family:var(--font);font-size:12px;font-weight:300;letter-spacing:.06em;color:var(--black);background:transparent}
.sel-search input::placeholder{color:var(--gray-light)}

.breadcrumb{padding:10px 32px;font-size:10px;font-weight:300;letter-spacing:.1em;color:var(--gray-mid);border-bottom:0.5px solid var(--border)}
.breadcrumb a{color:var(--gray-mid);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--black)}
.breadcrumb span{color:var(--black);font-weight:400}

/* ── VARIANT HERO ── */
.variant-hero{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border)}

/* left: image carousel */
.hero-gallery-side{background:var(--bg-card);position:relative;min-height:420px;display:flex;flex-direction:column}
.main-image-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background:linear-gradient(145deg,#f2f1ee,#e8e6e2)}
.main-image-wrap img{max-width:280px;max-height:280px;object-fit:contain;display:block}
.thumb-row{display:flex;gap:2px;padding:2px;background:#d4d1cc}
.thumb{width:60px;height:60px;overflow:hidden;cursor:pointer;opacity:.6;transition:opacity .2s}
.thumb.active,.thumb:hover{opacity:1}
.thumb img{width:100%;height:100%;object-fit:cover}

/* right: detail */
.hero-detail-side{padding:36px 40px;border-left:0.5px solid var(--border)}

.detail-line1{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:400;margin-bottom:6px}
.detail-name{font-size:24px;font-weight:600;letter-spacing:.02em;color:var(--black);line-height:1;margin-bottom:3px}
.detail-sub{font-size:18px;font-weight:200;letter-spacing:.05em;color:var(--black);margin-bottom:6px}
.detail-code-badge{display:inline-block;font-size:9px;letter-spacing:.14em;background:var(--bg-light);border:0.5px solid var(--border);padding:3px 10px;color:var(--gray-mid);margin-bottom:20px;font-weight:400}

.detail-desc{font-size:11px;font-weight:300;color:var(--gray-dark);line-height:1.8;margin-bottom:24px;padding-bottom:24px;border-bottom:0.5px solid var(--border)}

/* key specs strip */
.key-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:0.5px solid var(--border);margin-bottom:24px}
.ks-item{padding:12px 14px;border-right:0.5px solid var(--border);text-align:center}
.ks-item:last-child{border-right:none}
.ks-val{font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--black);display:block;margin-bottom:2px}
.ks-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid);font-weight:400}

/* download buttons */
.download-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.dl-btn{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;padding:9px 16px;border:0.5px solid var(--border);color:var(--black);background:transparent;cursor:pointer;font-family:var(--font);transition:background .2s,border-color .2s;text-decoration:none}
.dl-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.dl-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;flex-shrink:0}
.dl-btn.primary{background:var(--black);color:#fff;border-color:var(--black)}
.dl-btn.primary:hover{background:var(--accent);border-color:var(--accent)}

/* add to project */
.add-project{width:100%;padding:13px;background:var(--black);color:#fff;font-family:var(--font);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;border:none;cursor:pointer;transition:background .2s;margin-top:4px}
.add-project:hover{background:var(--accent)}

/* ── SPEC TABS ── */
.spec-tabs-nav{display:flex;border-bottom:1px solid var(--border);padding:0 32px;background:var(--bg-page)}
.spec-tab{padding:14px 18px 12px;font-size:11px;font-weight:300;letter-spacing:.1em;text-transform:lowercase;color:var(--gray-mid);border:none;background:transparent;cursor:pointer;font-family:var(--font);position:relative;transition:color .2s}
.spec-tab:hover{color:var(--black)}
.spec-tab.active{color:var(--black);font-weight:500}
.spec-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--black)}

.spec-panels{padding:32px}

.spec-panel{display:none}
.spec-panel.active{display:block}

/* ── TECHNICAL SPECS TABLE ── */
.spec-section-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);font-weight:500;margin-bottom:14px;margin-top:28px}
.spec-section-title:first-child{margin-top:0}

.spec-table{width:100%;border-collapse:collapse;margin-bottom:4px}
.spec-table tr{border-bottom:0.5px solid var(--border)}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:9px 0;font-size:11px;font-weight:300;letter-spacing:.04em;line-height:1.5;vertical-align:top}
.spec-table td:first-child{width:220px;color:var(--gray-mid);padding-right:20px}
.spec-table td:last-child{color:var(--black);font-weight:400}

/* ── SKU CODE TABLE ── */
.sku-intro{font-size:11px;font-weight:300;color:var(--gray-dark);line-height:1.7;margin-bottom:24px;max-width:600px}
.sku-filters{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sku-filter-group{display:flex;flex-direction:column;gap:4px}
.sku-filter-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);font-weight:500}
.sku-filter-select{font-family:var(--font);font-size:11px;font-weight:300;padding:6px 28px 6px 10px;border:0.5px solid var(--border);background:transparent;color:var(--black);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}

.sku-table{width:100%;border-collapse:collapse;font-size:11px}
.sku-table thead tr{border-bottom:1px solid var(--black)}
.sku-table thead th{padding:8px 12px;font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);text-align:left}
.sku-table tbody tr{border-bottom:0.5px solid var(--border);transition:background .15s;cursor:pointer}
.sku-table tbody tr:hover{background:var(--bg-light)}
.sku-table tbody td{padding:10px 12px;font-weight:300;letter-spacing:.04em;color:var(--black)}
.sku-table tbody td:first-child{font-family:monospace;font-size:10px;color:var(--accent);font-weight:500;letter-spacing:.08em}
.sku-badge{display:inline-block;font-size:9px;padding:2px 8px;background:var(--bg-light);border:0.5px solid var(--border);color:var(--gray-dark);font-weight:400;letter-spacing:.06em}

/* ── PHOTOMETRY ── */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.photo-diagram{background:var(--bg-light);border:0.5px solid var(--border);padding:32px;display:flex;align-items:center;justify-content:center;min-height:300px}
.photo-table-wrap{}
.lum-data-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:8px}
.lum-data-table tr{border-bottom:0.5px solid var(--border)}
.lum-data-table td{padding:8px 0}
.lum-data-table td:first-child{color:var(--gray-mid);font-weight:300;width:180px}
.lum-data-table td:last-child{font-weight:400;color:var(--black)}

/* ── INSTALLATION DRAWING ── */
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.drawing-box{background:var(--bg-light);border:0.5px solid var(--border);padding:24px;min-height:280px;display:flex;align-items:center;justify-content:center}
.drawing-notes{font-size:11px;font-weight:300;color:var(--gray-dark);line-height:1.9}
.drawing-notes .dn-row{display:flex;gap:12px;border-bottom:0.5px solid var(--border);padding:8px 0}
.drawing-notes .dn-row:last-child{border-bottom:none}
.drawing-notes .dn-label{width:140px;color:var(--gray-mid);flex-shrink:0}
.drawing-notes .dn-val{color:var(--black);font-weight:400}

/* ── FOOTER ── */