/* product.css — frozen product-page template styles (from _mock-product-d.html).
   Pairs with header-footer.css (glass header/footer) + js/product-gallery.js.
   Body content scoped under .ap; bands are full-bleed, article is a centered column. */
:root{--gold:#e39d00;--gold-dark:#d08400;--navy:#132238;--navy-d:#0d1727;--ink:#1d1d1f;--muted:#6e6e73;--line:#d9dde3;--gray:#f5f5f7;--maxw:1280px}
html,body{overflow-x:hidden;max-width:100%;margin:0}
/* related reading (product -> blog interlinking) */
.prelated{max-width:880px;margin:0 auto;padding:10px 28px 28px}
.prelated .rel-card{background:var(--gray);border:1px solid var(--line);border-radius:16px;padding:24px 28px}
.prelated h2{margin:0 0 6px;font-size:1.25rem;color:var(--navy);border:0;padding:0}
.prelated p.rel-sub{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.prelated ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.prelated li{margin:0}
.prelated a{color:var(--navy);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid transparent;transition:.18s}
.prelated a:hover{color:var(--gold-dark);border-color:var(--gold)}
.prelated a::before{content:"\2192";color:var(--gold);margin-right:10px;font-weight:700}
.ap{font-family:'Poppins',-apple-system,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.ap *{box-sizing:border-box}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* anchor offset so sticky bars don't cover headings */
[id]{scroll-margin-top:140px}

/* sticky product sub-nav (opaque so it never shows hero through it) */
.subnav{position:sticky;top:76px;z-index:900;background:#fff;border-bottom:1px solid var(--line)}
.subnav .in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 28px}
/* breadcrumb */
.crumb{background:#fff;border-bottom:1px solid var(--line)}
.crumb .container{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;padding-bottom:14px;font-size:13px;color:var(--muted)}
.crumb a{color:var(--navy);text-decoration:none;font-weight:500}
.crumb a:hover{color:var(--gold-dark);text-decoration:underline}
.crumb .sep{color:#aab0b8}
.crumb .cur{color:var(--muted)}
@media(max-width:560px){.crumb .container{padding-left:18px;padding-right:18px}}
.subnav .pname{font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subnav .right{display:flex;align-items:center;gap:24px;flex:0 0 auto}
.subnav .right a.link{font-size:13px;color:var(--muted);text-decoration:none}
.subnav .right a.link:hover{color:var(--ink)}
.subnav .buy{background:var(--gold);color:#15233a;font-weight:600;font-size:13px;padding:8px 18px;border-radius:980px;text-decoration:none;transition:.2s}
.subnav .buy:hover{background:var(--gold-dark)}
@media(max-width:720px){.subnav .right a.link{display:none}}

/* hero */
.hero{text-align:center;background:#fff;padding:54px 0 18px}
.hero .eyebrow{color:var(--gold-dark);font-weight:600;font-size:15px;margin:0 0 10px}
.hero h1{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.07;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin:0 0 14px;overflow-wrap:break-word}
.hero .tag{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink);font-weight:500;max-width:760px;margin:0 auto 22px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:980px;font-weight:600;font-size:15px;text-decoration:none;transition:.2s;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--gold);color:#15233a !important;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-dark);color:#15233a !important;border-color:var(--gold-dark)}
.btn-outline{background:#fff;color:var(--navy) !important;border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff !important;border-color:var(--navy)}
.hero-img{max-width:480px;margin:26px auto 0;padding:0 22px}
.hero-img img{width:100%;height:auto;max-height:380px;object-fit:contain;display:block;margin:0 auto;cursor:zoom-in}
/* thumbnails */
.thumbs{display:flex;gap:14px;justify-content:center;padding:22px 22px 18px;background:#fff;flex-wrap:wrap}
.gal-thumb{width:86px;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;padding:0;transition:.2s}
.gal-thumb img{width:100%;height:60px;object-fit:contain;display:block;padding:6px}
.gal-thumb.is-active{border-color:var(--navy)}
.gal-thumb:hover{border-color:var(--gold-dark)}

/* big stat band (full-bleed) */
.stats{background:var(--navy);color:#fff;padding:54px 0;text-align:center}
.stats .in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stats .v{font-size:clamp(1.7rem,4vw,2.8rem);font-weight:700;color:#ffce6b;line-height:1;overflow-wrap:break-word}
.stats .l{color:#aebbce;font-size:14px;margin-top:10px}
@media(max-width:680px){.stats .in{grid-template-columns:1fr 1fr;gap:32px 18px}}

/* article (readable column) */
.article{max-width:880px;margin:0 auto;padding:24px 28px 64px}
.article .highlight{font-size:19px;line-height:1.55;font-weight:600;color:var(--navy);background:var(--gray);border-left:4px solid var(--gold);padding:16px 18px;border-radius:0 10px 10px 0;margin:0 0 24px}
.article h2{font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.25;color:var(--navy);font-weight:700;border-left:4px solid var(--gold);padding-left:14px;margin:42px 0 14px}
.article p{font-size:17px;line-height:1.75;margin:0 0 16px;color:#37414e}
.article ul,.article ol{font-size:17px;line-height:1.8;margin:0 0 18px;padding-left:24px}
.article li{margin:.4em 0}
.article strong{color:var(--navy)}
.article a{color:var(--gold-dark);font-weight:500}
.inline-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
table.spec{width:100%;border-collapse:collapse;margin:10px 0 26px;font-size:15.5px}
table.spec th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-weight:600}
table.spec th strong{color:#fff}
table.spec td{padding:11px 14px;border:1px solid var(--line);vertical-align:top}
table.spec td:first-child:not(:last-child){font-weight:600;color:var(--navy);background:#f7f9fc;width:42%}
/* LED status-indicator table: narrower LED + Meaning columns, wider Pattern column */
table.spec.ledtbl td:first-child:not(:last-child){width:34%}
table.spec.ledtbl td:nth-child(2){width:24%}
.leddot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;vertical-align:middle;flex:none}
.tnote{font-size:14px;color:var(--muted);font-style:italic;margin-top:18px}
hr.sep{border:none;border-top:2px solid var(--line);margin:40px 0 26px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:18px 30px 18px 0;font-weight:600;font-size:16.5px;color:var(--navy);list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:4px;top:15px;color:var(--gold-dark);font-size:24px;font-weight:400}
details.faq[open] summary::after{content:"\2212"}
details.faq p{padding:0 0 18px;margin:0;color:#37414e;line-height:1.7;font-size:16px}

/* manual download (full-bleed gray) */
.manualband{background:var(--gray);padding:52px 0}
.manualcard{max-width:600px;margin:0 auto;background:#fff;border-radius:18px;padding:24px 26px;display:flex;align-items:center;gap:20px;box-shadow:0 20px 50px -30px rgba(19,34,56,.45)}
.manualcard .pdf{flex:0 0 auto;width:54px;height:54px;border-radius:13px;background:var(--gold);color:#15233a;display:grid;place-items:center;font-weight:700;font-size:14px}
.manualcard b{display:block;font-size:17px;color:var(--navy)}
.manualcard small{color:var(--muted);font-size:13.5px}
.manualcard a.dl{margin-left:auto;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:11px 22px;border-radius:980px;white-space:nowrap}
.manualcard a.dl:hover{background:var(--navy-d)}

/* final CTA (full-bleed) with breathing room above footer */
.final{text-align:center;padding:76px 28px 92px;background:#fff}
.article + .final{padding-top:20px;margin-top:-32px}
.final h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em}
.final p{color:var(--muted);font-size:16px;margin:0 0 26px}
.final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* lightbox (appended to <body>, so global, not scoped) */
.lightbox{position:fixed;inset:0;background:rgba(9,12,18,.92);display:none;align-items:center;justify-content:center;z-index:99999;padding:30px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:96%;max-height:92%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform-origin:center center;transition:transform .08s ease-out;will-change:transform;touch-action:none}
.lightbox.zoomed img{cursor:grab}
.lightbox.dragging img{cursor:grabbing;transition:none}.lightbox.zooming img{transition:none}
.lightbox-close{position:absolute;top:16px;right:26px;color:#fff;font-size:42px;line-height:1;cursor:pointer;font-weight:300;z-index:2}

@media(max-width:760px){.article{padding:48px 22px}}
@media(max-width:480px){
  .container{padding:0 18px}
  .hero{padding:38px 0 14px}
  .hero .eyebrow{font-size:13px}
  .hero h1{font-size:1.95rem}
  .hero .tag{font-size:1.15rem}
  .hero-img{max-width:300px;margin-top:20px}
  .stats{padding:42px 0}
  .stats .v{font-size:1.6rem}
  .subnav .pname{font-size:13px}
  .subnav .in{padding:0 18px}
  .article{padding:42px 18px}
  .article p,.article ul,.article ol{font-size:16px}
  .manualcard{flex-wrap:wrap}.manualcard a.dl{margin-left:0;width:100%;text-align:center}
  table.spec{font-size:14px}table.spec td{padding:9px 10px}
}

/* ===== product hero banner (homepage-style, self-contained) ===== */
.phero{position:relative;color:#fff;padding:84px 0 84px;background-position:center;background-size:cover;background-repeat:no-repeat;font-family:'Poppins',-apple-system,system-ui,sans-serif}
@media(max-width:760px){.phero{padding:56px 0 56px}}
.phero .pwrap{max-width:1180px;margin:0 auto;padding:0 22px}
.phero .pcrumbs{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:.85rem;color:rgba(255,255,255,.82);margin:0 0 16px}
.phero .pcrumbs a{color:#ffd789;text-decoration:none}
.phero .pcrumbs a:hover{text-decoration:underline}
.phero .pcrumbs .sep{opacity:.5;margin:0 6px}
.phero .peyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#EF9F27}
.phero h1{font-family:'Sora',sans-serif;color:#fff;font-weight:600;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.16;letter-spacing:-.01em;margin:16px 0 18px;max-width:840px}
.phero .phook{font-family:'Sora',sans-serif;margin:0 0 14px;color:#ffd789;font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.3;max-width:680px}
.phero .pnote{font-family:'Inter',system-ui,-apple-system,sans-serif;margin:0;color:rgba(255,255,255,.88);font-size:1.14rem;line-height:1.65;max-width:640px}
.phero .pnote a{color:#ffd789;font-weight:600}
.phero .plead{font-family:'Inter',system-ui,-apple-system,sans-serif;margin:0;color:rgba(255,255,255,.88);font-size:1.14rem;line-height:1.65;max-width:640px}
.phero .psub{margin:14px 0 0;color:rgba(255,255,255,.78);font-size:.92rem}
.phero .pbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.phero .pbadges span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.8rem;font-weight:500;padding:5px 13px;border-radius:20px}
.phero .pbadges span::before{content:"\2713";color:#EF9F27;font-weight:700}
.phero .pcta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.phero .pbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.96rem;padding:13px 24px;border-radius:100px;transition:.18s;border:1px solid transparent}
.phero .pbtn-amber{background:linear-gradient(135deg,#e39d00,#f4c24d);color:#16263c}
.phero .pbtn-amber:hover{filter:brightness(1.05)}
.phero .pbtn-light{background:#fff;color:#16263c}
.phero .pbtn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.phero .pbtn-outline:hover{background:rgba(255,255,255,.08)}