/* ============================================================
   INNFACT — Industrial Precision
   Shared stylesheet
   ============================================================ */

:root{
  --ink:#000000;
  --paper:#ffffff;
  --line:rgba(255,255,255,.55);     /* structural hairline grid */
  --line-soft:rgba(255,255,255,.16); /* quieter internal divisions */
  --line-strong:#ffffff;
  --orange:#FF4400;
  --muted:#8e9192;
  --muted-dim:#5a5d5e;
  --nav-h:48px;
}

*{ box-sizing:border-box; }

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
  font-size:20px; line-height:1; user-select:none;
  display:inline-flex; align-items:center; justify-content:center;
}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background-color:#000000;
  color:#ffffff;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; }
button{ font-family:inherit; }

::selection{ background:#ffffff; color:#000000; }

/* Industrial scrollbar */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:#000000; }
::-webkit-scrollbar-thumb{ background:#ffffff; }

/* ---------- Type tokens ---------- */
.t-display{ font-size:clamp(40px,7vw,84px); font-weight:700; line-height:1.02; letter-spacing:-0.045em; }
.t-display-sm{ font-size:clamp(28px,4vw,48px); font-weight:700; line-height:1.06; letter-spacing:-0.04em; }
.t-headline{ font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-0.02em; }
.t-body{ font-size:14px; font-weight:400; line-height:1.6; letter-spacing:-0.01em; }
.t-sm{ font-size:12px; font-weight:400; line-height:1.45; }
.t-caps{ font-size:10px; font-weight:700; line-height:1; letter-spacing:0.14em; text-transform:uppercase; }
.t-caps-md{ font-size:12px; font-weight:700; line-height:1; letter-spacing:0.18em; text-transform:uppercase; }
.t-data{ font-size:13px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.dim{ color:var(--muted-dim); }
.orange{ color:var(--orange); }

/* ---------- Layout helpers ---------- */
.page{ padding-top:var(--nav-h); }
.shell{ width:100%; max-width:1600px; margin:0 auto; }
.gx{ padding-left:var(--margin-desktop,32px); padding-right:var(--margin-desktop,32px); }
@media (max-width:768px){ .gx{ padding-left:16px; padding-right:16px; } }

.hairline{ border:1px solid var(--line); }
.hair-t{ border-top:1px solid var(--line); }
.hair-b{ border-bottom:1px solid var(--line); }
.hair-l{ border-left:1px solid var(--line); }
.hair-r{ border-right:1px solid var(--line); }
.hair-soft{ border-color:var(--line-soft); }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; z-index:60;
  width:100%; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  background:#000000;
  border-bottom:1px solid var(--line);
}
@media (max-width:768px){ .site-nav{ padding:0 16px; } }

.nav-left{ display:flex; align-items:center; gap:28px; height:100%; }
.wordmark{
  font-weight:700; font-size:18px; letter-spacing:-0.06em;
  display:flex; align-items:center; gap:6px;
}
.wordmark .gan{ color:var(--orange); }

.nav-links{ display:flex; align-items:center; height:100%; }
@media (max-width:768px){ .nav-links{ display:none; } }
.nav-link{
  display:flex; align-items:center; gap:7px; height:100%;
  padding:0 14px;
  font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted);
  border-left:1px solid var(--line-soft);
  transition:background .07s linear, color .07s linear;
}
.nav-link .material-symbols-outlined{ font-size:16px; }
.nav-link:hover{ background:#ffffff; color:#000000; }
.nav-link.active{ color:#ffffff; }
.nav-link.active::before{ content:""; width:6px; height:6px; background:var(--orange); margin-right:1px; }

.nav-right{ display:flex; align-items:center; height:100%; }
.nav-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:100%;
  background:none; border:none; cursor:pointer; color:#ffffff;
  border-left:1px solid var(--line-soft);
  transition:background .07s linear, color .07s linear;
}
.nav-btn:hover{ background:#ffffff; color:#000000; }
.nav-btn:active{ transform:translateY(1px); }
.nav-btn .material-symbols-outlined{ font-size:20px; }
.cart-badge{
  position:absolute; top:8px; right:6px;
  min-width:14px; height:14px; padding:0 3px;
  display:none; align-items:center; justify-content:center;
  background:var(--orange); color:#000;
  font-size:9px; font-weight:700; line-height:1;
}
.cart-badge.on{ display:flex; }
.cart-badge.bump{ animation:badgeBump .28s ease; }
@keyframes badgeBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

/* mobile menu toggle */
.nav-burger{ display:none; }
.nav-mobile{
  position:fixed; top:var(--nav-h); left:0; width:100%; z-index:59;
  background:#000; border-bottom:1px solid var(--line);
  transform:translateY(-110%); transition:transform .2s ease;
}
.nav-mobile.open{ transform:translateY(0); }
.nav-mobile a{ display:flex; align-items:center; gap:10px; padding:16px; border-top:1px solid var(--line-soft); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:768px){
  .nav-burger{ display:flex; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{
  border-top:1px solid var(--line);
  background:#000;
}
.foot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
}
@media (max-width:880px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.foot-col{ padding:32px; border-left:1px solid var(--line-soft); }
.foot-col:first-child{ border-left:none; }
.foot-col h4{ margin:0 0 16px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.foot-col a{ display:block; padding:5px 0; font-size:12px; color:#cdd0d0; transition:color .1s; }
.foot-col a:hover{ color:var(--orange); }
.foot-social{ display:flex; gap:6px; margin-top:18px; }
.foot-social a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-soft); padding:0; }
.foot-social a:hover{ background:#fff; color:#000; }
.foot-social .material-symbols-outlined{ font-size:18px; }
.foot-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 32px; border-top:1px solid var(--line-soft);
}
.foot-mark{ font-weight:700; font-size:20px; letter-spacing:-0.06em; color:var(--orange); }

/* ============================================================
   BUTTONS / CONTROLS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 22px;
  background:#000; color:#fff;
  border:1px solid #fff;
  font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer; transition:background .08s linear, color .08s linear;
  text-align:center;
}
.btn:hover{ background:#fff; color:#000; }
.btn:active{ transform:translateY(1px); }
.btn-block{ display:flex; width:100%; }
.btn-orange{ border-color:var(--orange); color:#fff; }
.btn-orange:hover{ background:var(--orange); color:#000; border-color:var(--orange); }
.btn-solid{ background:#fff; color:#000; }
.btn-solid:hover{ background:#000; color:#fff; }
.btn-ghost{ border-color:var(--line-soft); color:var(--muted); }
.btn-ghost:hover{ background:#fff; color:#000; border-color:#fff; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; background:#000; color:var(--muted);
  border:1px solid var(--line-soft);
  font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; transition:all .08s linear;
}
.chip:hover{ color:#fff; border-color:#fff; }
.chip.active{ background:#fff; color:#000; border-color:#fff; }

/* terminal input */
.field{ display:block; }
.field label{ display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; background:#000; color:#fff;
  border:1px solid var(--line-soft); border-radius:0;
  padding:13px 14px; font-family:inherit; font-size:13px;
  caret-color:var(--orange); caret-shape:block;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:#fff;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-dim); }

/* qty stepper */
.stepper{ display:inline-flex; border:1px solid var(--line-soft); }
.stepper button{
  width:40px; height:40px; background:#000; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:background .07s, color .07s;
}
.stepper button:hover{ background:#fff; color:#000; }
.stepper .qty{ width:48px; height:40px; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); font-variant-numeric:tabular-nums; font-weight:600; }

/* LED + color swatch */
.led{ width:8px; height:8px; background:var(--muted-dim); display:inline-block; }
.led.on{ background:var(--orange); box-shadow:0 0 6px 1px rgba(255,68,0,.8); }
.swatch{ width:26px; height:26px; border:1px solid var(--line-soft); cursor:pointer; position:relative; transition:border-color .08s; }
.swatch:hover{ border-color:#fff; }
.swatch.sel{ border-color:#fff; }
.swatch.sel::after{ content:""; position:absolute; inset:-4px; border:1px solid var(--orange); }

/* ---------- striped image placeholder ---------- */
.ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg,#0b0b0b,#0b0b0b 9px,#131313 9px,#131313 18px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:14px;
  border:1px solid var(--line-soft);
}
.ph span{
  position:relative; z-index:1;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  background:#000; border:1px solid var(--line-soft); padding:4px 9px;
  text-align:center; max-width:80%;
}
.ph.light{ background:repeating-linear-gradient(45deg,#e9e9e9,#e9e9e9 9px,#f4f4f4 9px,#f4f4f4 18px); }
.ph.light::before{ border-color:rgba(0,0,0,.1); }
.ph.light span{ color:#555; background:#fff; border-color:rgba(0,0,0,.12); }

/* corner ticks for technical frames */
.ticked{ position:relative; }
.ticked::before,.ticked::after{ content:""; position:absolute; width:9px; height:9px; border:1px solid var(--orange); }
.ticked::before{ top:6px; left:6px; border-right:none; border-bottom:none; }
.ticked::after{ bottom:6px; right:6px; border-left:none; border-top:none; }

/* bordered grid (technical dashboard look) */
.grid-bordered{ border-top:1px solid var(--line); border-left:1px solid var(--line); }
.grid-bordered > *{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }

/* page head band */
.page-head{ border-bottom:1px solid var(--line); }
.page-head-inner{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; padding:40px 32px 32px; }
@media (max-width:768px){ .page-head-inner{ padding:28px 16px 22px; } }
.page-head .meta-grid{ display:flex; gap:0; border:1px solid var(--line-soft); }
.page-head .meta-grid .cell{ padding:10px 16px; border-left:1px solid var(--line-soft); }
.page-head .meta-grid .cell:first-child{ border-left:none; }

/* product card */
.pcard{ display:flex; flex-direction:column; background:#000; transition:background .1s; }
.pcard:hover{ background:#070707; }
.pcard .pcard-media{ aspect-ratio:1/1; position:relative; border-bottom:1px solid var(--line-soft); }
.pcard .pcard-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard .pcard-cta{ margin-top:auto; }

/* spec rows */
.spec-row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.spec-row:last-child{ border-bottom:none; }
.spec-row dt{ color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.spec-row dd{ margin:0; font-variant-numeric:tabular-nums; text-align:right; }

/* toast */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#fff; color:#000; padding:12px 20px;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  z-index:200; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  display:flex; align-items:center; gap:10px;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast::before{ content:""; width:8px; height:8px; background:var(--orange); box-shadow:0 0 6px 1px rgba(255,68,0,.8); }

/* faq accordion */
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; background:none; border:none; color:#fff; cursor:pointer; text-align:left; font-family:inherit; }
.faq-q:hover{ color:var(--orange); }
.faq-q .material-symbols-outlined{ transition:transform .2s; }
.faq-item.open .faq-q .material-symbols-outlined{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a .faq-a-inner{ padding:0 4px 24px; color:var(--muted); max-width:70ch; }

/* product detail — real photo gallery */
.hero-photo{ background:#fff; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }

/* option configurator (73W extension) */
.opt-row{ display:flex; gap:10px; flex-wrap:wrap; }
.opt-btn{ padding:11px 16px; background:#000; border:1px solid var(--line-soft); color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.04em; cursor:pointer;
  transition:border-color .1s, color .1s, background .1s; }
.opt-btn:hover{ color:#fff; border-color:var(--line-strong); }
.opt-btn.active{ border-color:var(--orange); color:#fff; }
.opt-btn.disabled{ opacity:.3; pointer-events:none; }
.swatch.disabled{ opacity:.28; pointer-events:none; }
.swatch.soldout{ opacity:.5; }
.swatch.soldout::before{ content:""; position:absolute; top:50%; left:-3px; right:-3px; height:1px; background:#d14b4b; transform:rotate(-45deg); transform-origin:center; z-index:2; }
.gthumb{ aspect-ratio:1/1; padding:0; overflow:hidden; background:#fff; cursor:pointer;
  border:1px solid var(--line-soft); position:relative; }
.gthumb img{ width:100%; height:100%; object-fit:cover; transition:opacity .12s; opacity:.62; }
.gthumb:hover img{ opacity:.85; }
.gthumb.sel img{ opacity:1; }
.gthumb.sel{ border-color:var(--orange); z-index:1; }

/* thumb carousel — shows 3 at a time, hover arrows page through */
.thumb-carousel{ position:relative; }
.thumb-viewport{ overflow:hidden; }
.thumb-track{ display:flex; transition:transform .28s cubic-bezier(.4,.1,.2,1); }
.thumb-carousel .gthumb{ flex:0 0 33.3333%; }
.thumb-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff; border:1px solid var(--line); cursor:pointer;
  opacity:0; transition:opacity .15s linear, background .1s, color .1s; }
.thumb-arrow .material-symbols-outlined{ font-size:22px; }
.thumb-arrow.left{ left:8px; }
.thumb-arrow.right{ right:8px; }
.thumb-carousel:hover .thumb-arrow{ opacity:1; }
.thumb-arrow:hover{ background:#fff; color:#000; }
.thumb-arrow:active{ transform:translateY(-50%) translateY(1px); }
.thumb-arrow.disabled{ opacity:0 !important; pointer-events:none; }

/* modular product media (ext-04) */
.mod-hero{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center; }
.mod-hero-label{ position:relative; z-index:1; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.9; }
.mod-hero.is-cta{ background:#050505; }
.mod-hero.has-photo{ background:#fff; }
.mod-hero-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
#mod-carousel .gthumb{ flex:0 0 33.3333%; }
.mod-cta-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px; }
.mod-cta-title{ margin:0; font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-0.03em; line-height:1.12; }
.thumb-carousel .mthumb{ flex:0 0 33.3333%; aspect-ratio:1/1; border:1px solid var(--line-soft); cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; color:var(--muted); background:#000; }
.thumb-carousel .mthumb.sel{ border-color:var(--orange); z-index:1; }
.mthumb-cta{ flex-direction:column; gap:6px; }
.mthumb-cta .material-symbols-outlined{ font-size:22px; color:var(--orange); }
.mthumb-cta .t-caps{ color:var(--orange); }
.cfg-launch{ gap:10px; }

/* spec tabs */
.spec-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:24px; }
.spec-tab{ background:none; border:none; cursor:pointer; font-family:inherit;
  padding:12px 18px; color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .1s, border-color .1s; }
.spec-tab:hover{ color:#fff; }
.spec-tab.active{ color:#fff; border-bottom-color:var(--orange); }
.spec-panel{ display:none; }
.spec-panel.active{ display:block; }
.port-img{ width:100%; height:auto; display:block; border:1px solid var(--line-soft); margin-bottom:22px; background:#000; }

/* modular module-spec block (ext-04) */
.mod-spec-head{ display:flex; align-items:flex-start; gap:24px; margin-bottom:22px; }
.mod-spec-head .sec-head{ flex:1 1 0; min-width:0; }
.mod-spec-head .sec-head h2{ overflow-wrap:anywhere; }
.mod-spec-img{ flex:0 0 auto; background:#000; line-height:0; align-self:flex-start; max-width:100%; }
.mod-spec-img img{ display:block; height:120px; width:auto; max-width:100%; }
.mod-spec-img .ph-caption{ display:block; line-height:1.4; padding:24px; font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.mod-spec-tabs{ flex-wrap:wrap; }
.mod-spec-below{ display:block; width:100%; height:auto; margin-top:26px; background:#000; border:1px solid var(--line-soft); }
@media (max-width:520px){ .mod-spec-img img{ height:78px; } }

/* related product photo */
.rel-media{ background:#fff; overflow:hidden; }
.rel-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .45s ease, transform .6s ease; }
.pcard:hover .rel-media img{ filter:grayscale(0); transform:scale(1.04); }
/* related cards mirror the accessories cards: name overlaid in-image, no body */
.rel-card .pcard-media{ border-bottom:none; }

/* breadcrumb */
.crumb{ display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.crumb a:hover{ color:#fff; }
.crumb .sep{ color:var(--muted-dim); }

/* ---------- document / legal text pages ---------- */
.doc{ max-width:880px; margin:0 auto; padding:8px 32px 76px; }
@media(max-width:768px){ .doc{ padding:8px 16px 56px; } }
.doc-lead{ padding:40px 0 4px; }
.doc-lead p{ color:#d7d9d9; font-size:15px; line-height:1.95; margin:0; max-width:66ch; }
.doc-sec{ display:grid; grid-template-columns:60px 1fr; gap:30px; padding:40px 0; border-top:1px solid var(--line-soft); }
.doc-sec:first-of-type{ border-top:none; }
@media(max-width:640px){ .doc-sec{ grid-template-columns:1fr; gap:16px; padding:32px 0; } }
.doc-num{ font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--orange); padding-top:6px; font-variant-numeric:tabular-nums; }
.doc-kicker{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 9px; }
.doc-h{ font-size:18px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.45; margin:0 0 16px; }
.doc-sec p{ color:#cdd0d0; font-size:14px; line-height:1.95; margin:0 0 13px; }
.doc-sec p:last-child{ margin-bottom:0; }
.doc-list{ list-style:none; margin:4px 0 0; padding:0; }
.doc-list li{ position:relative; color:#cdd0d0; font-size:14px; line-height:1.7; padding:12px 0 12px 22px; border-bottom:1px solid var(--line-soft); }
.doc-list li:first-child{ border-top:1px solid var(--line-soft); }
.doc-list li::before{ content:""; position:absolute; left:0; top:18px; width:6px; height:6px; background:var(--orange); }
.doc-foot{ margin-top:4px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; padding:30px 0 0; border-top:1px solid var(--line); }

/* section label header */
.sec-head{ display:flex; align-items:baseline; gap:14px; }
.sec-head .idx{ color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.1em; }

/* reveal attribute is a no-op: content is always visible (fails safe,
   on-brand for a flat brutalist system — motion lives in hover/press). */
[data-reveal]{ opacity:1; transform:none; }

/* ============================================================
   PRODUCTS PAGE — three-tier layout
   ============================================================ */
.sec-band{
  border-bottom:1px solid var(--line);
  padding:14px 32px; text-align:center; position:relative;
}
.sec-band .label{ font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; }
.sec-band .hint{ position:absolute; right:32px; top:50%; transform:translateY(-50%); }
@media (max-width:768px){ .sec-band .hint{ display:none; } }

/* tier 1 — featured */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
@media (max-width:768px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-cell{
  position:relative; aspect-ratio:1/1; overflow:hidden; display:block;
  border-right:1px solid var(--line);
}
.tier-cell:last-child{ border-right:none; }
@media (max-width:768px){
  .tier-cell{ border-right:none; border-bottom:1px solid var(--line); }
}
.tier-cell .media{ position:absolute; inset:0; }
.tier-cell .media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s ease, transform .6s ease; }
.tier-cell:hover .media img{ filter:grayscale(0); transform:scale(1.04); }
.tier-logo{ position:absolute; right:20px; bottom:20px; width:25%; max-width:108px; height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.tier-logo.on-light{ filter:drop-shadow(0 1px 4px rgba(255,255,255,.8)) drop-shadow(0 0 2px rgba(255,255,255,.7)); }
@media (max-width:768px){ .tier-logo{ max-width:88px; } }
.tier-overlay{
  position:absolute; left:20px; bottom:20px; right:20px; z-index:3;
  display:flex; flex-direction:column; gap:7px; pointer-events:none;
}
.tier-overlay .name{ font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.tier-view{
  position:absolute; top:18px; right:18px; z-index:3;
  display:flex; align-items:center; gap:6px;
  padding:7px 11px; background:#000; border:1px solid var(--line-soft);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(-4px); transition:opacity .15s, transform .15s;
}
.tier-cell:hover .tier-view{ opacity:1; transform:none; }

/* tier 2 — special offers */
.offer-cell{
  position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:space-between;
  padding:30px; overflow:hidden; background:#000;
  border-right:1px solid var(--line); transition:background .12s;
}
.offer-cell:last-child{ border-right:none; }
@media (max-width:768px){ .offer-cell{ border-right:none; border-bottom:1px solid var(--line); aspect-ratio:16/10; } }
.offer-cell:hover{ background:#070707; }
.offer-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease; }
.offer-cell:hover .offer-img{ transform:scale(1.04); }
.offer-cell .offer-frame{ position:absolute; inset:12px; border:1px solid transparent; transition:border-color .15s; pointer-events:none; z-index:2; }
.offer-cell:hover .offer-frame{ border-color:var(--orange); }
.offer-num{ font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--muted); }
.offer-big{ font-size:clamp(30px,3.4vw,48px); font-weight:700; line-height:1.02; letter-spacing:-0.04em; }
.offer-rule{ font-size:clamp(15px,1.5vw,20px); line-height:1.35; }
.offer-pct{ color:var(--orange); font-size:1.5em; font-weight:700; }
.offer-cta{ display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .12s; }
.offer-cell:hover .offer-cta{ color:#fff; }

/* tier 3 — accessories horizontal scroller */
.acc-wrap{ position:relative; }
.acc-scroller{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.acc-scroller.dragging{ cursor:grabbing; }
.acc-scroller::-webkit-scrollbar{ height:6px; }
.acc-scroller::-webkit-scrollbar-track{ background:#0a0a0a; border-top:1px solid var(--line-soft); }
.acc-scroller::-webkit-scrollbar-thumb{ background:var(--orange); }
.acc-track{ display:flex; align-items:stretch; width:max-content; }
.acc-card{ flex:0 0 320px; max-width:80vw; border-right:1px solid var(--line); }
a.acc-card{ text-decoration:none; color:inherit; display:block; }
@media (max-width:520px){ .acc-card{ flex-basis:270px; } }
.acc-card .acc-media{ aspect-ratio:1/1; position:relative; background:#fff; overflow:hidden; }
.acc-card .acc-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .45s ease, transform .6s ease; }
.acc-card:hover .acc-media img{ filter:grayscale(0); transform:scale(1.04); }
.acc-name{ position:absolute; left:16px; bottom:14px; z-index:2; max-width:82%;
  font-size:13px; font-weight:300; letter-spacing:.02em; line-height:1.3; color:#111;
  text-shadow:0 1px 2px rgba(255,255,255,.92), 0 0 7px rgba(255,255,255,.85); pointer-events:none; }
.acc-edge{ position:absolute; top:0; bottom:6px; width:64px; pointer-events:none; z-index:4; transition:opacity .2s; }
.acc-edge.left{ left:0; background:linear-gradient(90deg,#000,transparent); }
.acc-edge.right{ right:0; background:linear-gradient(270deg,#000,transparent); }
.acc-edge.hide{ opacity:0; }