/* shop pages: watches, product, accessories */

/* shared bits */
.price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font: 800 28px/1 var(--font-display); letter-spacing: -.03em; }
.price s { font: 600 16px/1 var(--font-body); letter-spacing: 0; color: var(--dim); text-decoration-thickness: 1.5px; }
.price__save { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.price--free { color: var(--orange-2); }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch--sm { width: 24px; height: 24px; border-width: 2px; }
.opt-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font: 600 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.opt-label b { font: 700 14px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.opt-chip {
  min-width: 38px; height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
  font: 600 12px/1 var(--font-mono); color: var(--muted);
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .3s, transform .3s var(--ease);
}
.opt-chip:hover { color: var(--text); border-color: #555; transform: translateY(-1px); }
.opt-chip[aria-checked="true"] { color: #0a0a0a; background: var(--orange); border-color: var(--orange); box-shadow: 0 6px 20px -8px var(--glow); }
.state-box {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: clamp(40px, 6vw, 80px) 24px; border-radius: var(--radius-lg);
  border: 1px dashed var(--line-2); background: rgba(255,255,255,.015);
}
.state-box .h3 { max-width: 26ch; }
.state-box p { max-width: 46ch; color: var(--muted); }
.shop-cta { position: relative; overflow: clip; isolation: isolate; text-align: center; border-top: 1px solid var(--line); }
.shop-cta .glow-orb { left: 50%; top: 20%; margin-left: calc(var(--size) / -2); --size: min(820px, 140vw); --o: .38; }
.shop-cta .lead { margin: 22px auto 0; }
.shop-cta .row { justify-content: center; margin-top: 36px; }
.shop-cta__fine { margin-top: 22px; font: 500 12px/1.4 var(--font-mono); color: var(--dim); letter-spacing: .04em; }

/* 2d watch frames for canvas faces */
.wf { --wf-w: 150px; --metal: #dcdce1; position: relative; isolation: isolate; display: grid; place-items: center; }
.wf__strap {
  position: absolute; z-index: -1; left: 50%; top: -34%; bottom: -34%; width: calc(var(--wf-w) * .44);
  transform: translateX(-50%); border-radius: 16px;
  background: linear-gradient(90deg, #1a1a1c, var(--strap, #3a3a40) 50%, #1a1a1c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.wf__case {
  width: var(--wf-w); aspect-ratio: 38.6 / 45.2; padding: 7%;
  border-radius: 21% / 18%;
  background: linear-gradient(135deg, rgba(255,255,255,.45), transparent 32%), linear-gradient(160deg, var(--metal), color-mix(in srgb, var(--metal), #000 38%) 55%, var(--metal) 82%);
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.7), -10px 0 40px -6px rgba(255,90,0,.35), inset 0 0 0 1px rgba(255,255,255,.2);
}
.wf__screen { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 15% / 13%; background: #050506; box-shadow: inset 0 2px 6px rgba(255,255,255,.07); }
.wf__screen canvas { width: 78%; aspect-ratio: 200 / 228; image-rendering: auto; }
.wf--round .wf__case { aspect-ratio: 1; padding: 4.5%; border-radius: 50%; }
.wf--round .wf__screen { border-radius: 50%; }
.wf--round .wf__screen canvas { width: 97%; aspect-ratio: 1; border-radius: 50%; }
.wf--round .wf__strap { width: calc(var(--wf-w) * var(--band, .34)); }

/* css ring visual */
.ringv {
  --metal: #d8dbdf;
  position: relative; width: var(--rs, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--metal), #000 50%) 56%, var(--metal) 62%, color-mix(in srgb, var(--metal), #000 22%) 71%, var(--metal) 76%, color-mix(in srgb, var(--metal), #000 40%) 78.5%, transparent 79.5%);
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(-10px 0 26px rgba(255,90,0,.32));
  transition: transform .8s var(--ease);
}
.ringv::after {
  content: ""; position: absolute; left: 50%; top: 9%; width: 12%; height: 5%; margin-left: -6%;
  border-radius: 4px; background: var(--orange); box-shadow: 0 0 14px var(--orange);
}

/* accessory visuals */
.av { --sw: #333; position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; }
.av::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,90,0,.3), color-mix(in srgb, var(--sw), transparent 70%) 40%, transparent 70%);
  filter: blur(16px);
}
.av svg { width: min(74%, 250px); height: auto; overflow: visible; filter: drop-shadow(0 22px 26px rgba(0,0,0,.65)); transition: transform .8s var(--ease); }
.av--big svg { width: auto; height: 66%; max-width: 76%; margin-top: -2%; }
.av text { font-family: var(--font-display); font-weight: 800; }
.av .t-mono { font-family: var(--font-mono); font-weight: 600; }
.av-fill { fill: var(--sw); transition: fill .45s var(--ease); }
.av-stroke { stroke: var(--sw); transition: stroke .45s var(--ease); }
.av-ghost { fill: none; stroke: rgba(255,122,31,.55); stroke-width: 1.2; stroke-dasharray: 4 4; }
.av-metal { fill: none; stroke: #d6d8dc; }
.av-pulse { transform-box: fill-box; transform-origin: center; animation: av-pulse 2.4s ease-in-out infinite; }
@keyframes av-pulse { 50% { opacity: .25; transform: scale(1.25); } }
.av-kit g { transform-box: fill-box; transform-origin: center; animation: av-bob 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
@keyframes av-bob { 50% { transform: translateY(-5px); } }
.av-sticker { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }

/* accessory cards (grid, teaser, cross sell) */
.acc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.acc-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.acc-grid.is-anim > * { animation: acc-in .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes acc-in { from { opacity: 0; transform: translate3d(0,26px,0) scale(.97); } }
.acc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.acc-card__vis {
  position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 110%, rgba(255,90,0,.14), transparent 60%), linear-gradient(180deg, #161616, #0b0b0b);
  border-bottom: 1px solid var(--line);
}
.acc-card__vis::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 60%, #000, transparent 75%);
}
.acc-card:hover .av svg { transform: translateY(-8px) rotate(-4deg) scale(1.05); }
.acc-card:hover .av-sticker { transform: rotate(var(--r, 6deg)) scale(1.06); }
.acc-card__badges { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; gap: 6px; }
.acc-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 20px 22px; }
.acc-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acc-card__name { font: 700 17px/1.25 var(--font-body); transition: color .2s; }
.acc-card__name:hover { color: var(--orange-2); }
.acc-card__price { flex: none; font: 800 18px/1 var(--font-display); letter-spacing: -.02em; }
.acc-card__price.is-free { color: var(--orange-2); }
.acc-card__tag { font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acc-card__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; }
.acc-card__opts .opt-chip { height: 30px; min-width: 34px; padding: 0 9px; }
.acc-card__single { font: 500 12px/1.3 var(--font-mono); color: var(--dim); }
.acc-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.acc-card__fit { font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.acc-skel { padding: 0; overflow: hidden; }
.acc-skel .skeleton:first-child { aspect-ratio: 5 / 4; border-radius: 0; }
.acc-skel__b { padding: 20px; }
@media (max-width: 1024px) { .acc-grid, .acc-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .acc-grid, .acc-grid--3 { grid-template-columns: minmax(0,1fr); gap: 16px; } }

/* ===== watches page ===== */
.shop-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.shop-hero .display-xl { max-width: 11ch; }
.shop-hero .row { margin-top: 36px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.hero-stats .stat__num { font-size: clamp(34px, 5vw, 64px); }
.hero-stats > div { min-width: 0; }
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .hero-stats > div { display: flex; align-items: baseline; gap: 14px; }
  .hero-stats .stat__label { margin-top: 0; }
}
.shop-marquee { padding-block: 26px; border-bottom: 1px solid var(--line); --marquee-gap: 56px; }
.shop-marquee .marquee__track > * { display: inline-flex; align-items: center; gap: 56px; font: 800 clamp(22px, 3vw, 36px)/1 var(--font-display); letter-spacing: -.03em; color: var(--muted); }
.shop-marquee .marquee__track > *::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }

.lu-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.lu-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lu-stage {
  position: relative; height: 380px; overflow: hidden;
  background:
    radial-gradient(55% 48% at 50% 48%, rgba(255,90,0,.22), transparent 70%),
    linear-gradient(180deg, #151515, #090909);
  border-bottom: 1px solid var(--line);
}
.lu-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%);
}
.lu-stage__3d { position: absolute; inset: 0; }
.lu-stage .badge { position: absolute; z-index: 2; top: 16px; left: 16px; }
.lu-stage__num { position: absolute; z-index: 2; top: 16px; right: 18px; font: 600 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--dim); }
.lu-stage__hint { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); font: 600 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); pointer-events: none; white-space: nowrap; }
.lu-body { display: flex; flex-direction: column; gap: 18px; flex: 1; padding: 26px 26px 28px; }
.lu-name { font: 800 clamp(26px, 2.5vw, 34px)/1 var(--font-display); letter-spacing: -.035em; }
.lu-name a { transition: color .2s; }
.lu-name a:hover { color: var(--orange-2); }
.lu-tag { font-size: 15px; line-height: 1.55; color: var(--muted); }
.lu-opts { display: flex; flex-direction: column; gap: 10px; }
.lu-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-block: 1px solid var(--line); }
.lu-stat { padding: 16px 10px 14px 0; min-width: 0; }
.lu-stat + .lu-stat { padding-left: 14px; border-left: 1px solid var(--line); }
.lu-stat b { display: block; font: 800 clamp(18px, 1.8vw, 24px)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; }
.lu-stat span { display: block; margin-top: 7px; font: 600 10px/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lu-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.lu-actions .btn { flex: 1 1 140px; }
.lu-skel .skeleton:first-child { height: 380px; border-radius: 0; }
@media (max-width: 1024px) {
  .lu-grid { grid-template-columns: minmax(0,1fr); }
  .lu-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .lu-stage { height: auto; min-height: 420px; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .lu-card { display: flex; }
  .lu-stage { min-height: 0; height: 340px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lu-body { padding: 22px 20px 24px; }
}

/* compare */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cmp-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; }
.switch input {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 50px; height: 28px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: background-color .25s, border-color .25s, box-shadow .3s;
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform .45s var(--ease), background-color .25s, box-shadow .3s;
}
.switch input:checked { background: rgba(255,90,0,.18); border-color: var(--orange); }
.switch input:checked::after { transform: translateX(22px); background: var(--orange); box-shadow: 0 0 14px var(--glow); }
.switch__note { font: 500 12px/1 var(--font-mono); color: var(--dim); }
.cmp-wrap { position: relative; }
.cmp-table { min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 16px 18px; }
.cmp-table tbody th[scope="row"], .cmp-table thead th:first-child {
  position: sticky; left: 0; z-index: 1; min-width: 132px; background: #0b0b0b;
}
.cmp-table thead th { vertical-align: bottom; }
.cmp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 150px; font: 700 15px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.cmp-head__gl { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: radial-gradient(circle at 30% 15%, rgba(255,90,0,.25), transparent 60%), var(--surface); border: 1px solid var(--line); }
.cmp-head a:hover { color: var(--orange-2); }
.cmp-head .price { font-size: 18px; }
.cmp-head .price s { font-size: 13px; }
.cmp-table td { color: var(--text); }
.cmp-table tr.is-same td { color: var(--muted); }
.cmp-table tr.is-diff th[scope="row"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--glow); vertical-align: middle; }
.cmp-none { display: inline-flex; color: var(--dim); }
.cmp-none .ico { width: 16px; height: 16px; }
.cmp-table tbody.is-anim tr { animation: cmp-in .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes cmp-in { from { opacity: 0; transform: translate3d(-12px,0,0); } }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font: 500 12px/1.4 var(--font-mono); color: var(--dim); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cmp-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--glow); }

/* quiz */
.quiz { overflow: clip; }
.quiz .glow-orb { left: -10%; top: 10%; --size: 620px; --o: .3; }
.quiz__grid { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.quiz__intro .lead { margin-top: 22px; }
.quiz__steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: qs; }
.quiz__steps li { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--dim); transition: color .3s; }
.quiz__steps li::before {
  counter-increment: qs; content: "0" counter(qs);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none;
  font: 600 12px/1 var(--font-mono); border: 1px solid var(--line-2); transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.quiz__steps li.is-current { color: var(--text); }
.quiz__steps li.is-current::before { border-color: var(--orange); color: var(--orange-2); box-shadow: 0 0 20px -6px var(--glow); }
.quiz__steps li.is-done { color: var(--muted); }
.quiz__steps li.is-done::before { background: var(--orange); border-color: var(--orange); color: #050505; }
.quiz__card { position: relative; min-height: 500px; padding: clamp(22px, 3vw, 36px); overflow: hidden; display: flex; flex-direction: column; }
.quiz__bar { display: flex; gap: 6px; margin-bottom: 26px; }
.quiz__bar span { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.quiz__bar span::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--ember), var(--orange), var(--amber)); transition: transform .6s var(--ease); }
.quiz__bar span.is-done::after { transform: scaleX(1); }
.quiz__form { display: flex; flex-direction: column; flex: 1; }
.quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__q.is-enter { animation: quiz-in .55s var(--ease-out); }
.quiz__q.is-back { animation: quiz-back .55s var(--ease-out); }
@keyframes quiz-in { from { opacity: 0; transform: translate3d(36px,0,0); } }
@keyframes quiz-back { from { opacity: 0; transform: translate3d(-36px,0,0); } }
.quiz__count { display: block; margin-bottom: 12px; font: 600 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.quiz__q legend { padding: 0; margin-bottom: 22px; font: 800 clamp(22px, 2.6vw, 32px)/1.1 var(--font-display); letter-spacing: -.025em; }
.quiz__opts { display: grid; gap: 10px; }
.quiz__opt {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.015);
  transition: border-color .25s, background-color .25s, box-shadow .35s, transform .45s var(--ease);
}
.quiz__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.quiz__opt:hover { border-color: #4d4d4d; transform: translateX(4px); }
.quiz__opt.is-checked { border-color: var(--orange); background: rgba(255,90,0,.08); box-shadow: 0 0 0 3px rgba(255,90,0,.12), 0 18px 40px -24px var(--glow); }
.quiz__opt:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.quiz__key { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); font: 600 12px/1 var(--font-mono); color: var(--muted); transition: background-color .25s, color .25s, border-color .25s; }
.quiz__opt.is-checked .quiz__key { background: var(--orange); border-color: var(--orange); color: #050505; }
.quiz__opt strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.quiz__opt small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; }
.quiz__result { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.quiz__result.is-in { animation: quiz-pop .9s var(--ease-out); }
@keyframes quiz-pop { from { opacity: 0; transform: scale(.92); filter: blur(12px); } }
.qr-top { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 24px; align-items: center; }
.qr-vis { position: relative; height: 210px; display: grid; place-items: center; }
.qr-vis::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,0,.4), transparent 70%); filter: blur(14px); z-index: -1; }
.qr-burst { position: absolute; left: 50%; top: 50%; width: 170px; aspect-ratio: 1; margin: -85px 0 0 -85px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; pointer-events: none; }
.quiz__result.is-in .qr-burst { animation: qr-burst 1.3s var(--ease-out) .15s; }
.quiz__result.is-in .qr-burst + .qr-burst { animation-delay: .4s; }
@keyframes qr-burst { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.qr-vis .wf { --wf-w: 118px; }
.qr-vis .ringv { --rs: 140px; }
.qr-name { margin-top: 8px; font: 900 clamp(30px, 3.4vw, 46px)/.95 var(--font-display); letter-spacing: -.04em; }
.qr-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qr-why li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.qr-why .ico { width: 18px; height: 18px; color: var(--orange); flex: none; }
.qr-alt { font-size: 14px; color: var(--muted); }
.qr-alt a { color: var(--orange-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.qr-actions .btn:not(.btn--sm) { flex: 1 1 160px; }
@media (max-width: 900px) {
  .quiz__grid { grid-template-columns: minmax(0,1fr); }
  .quiz__steps { display: none; }
}
@media (max-width: 520px) {
  .quiz__card { min-height: 0; }
  .qr-top { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .qr-vis { height: 190px; }
}

/* accessories teaser */
.teaser-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.teaser-head .section-head { margin-bottom: 0; }

/* ===== product page ===== */
.pdp-top { position: relative; isolation: isolate; overflow-x: clip; padding-block: 28px clamp(64px, 8vw, 110px); }
.pdp-top .glow-orb { right: -18%; top: -10%; --size: 760px; --o: .32; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font: 500 12px/1.4 var(--font-mono); color: var(--dim); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: var(--orange-2); }
.crumbs [aria-current] { color: var(--text); }
.pdp-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pdp-media { position: sticky; top: calc(var(--bar-h) + 12px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pdp-stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: min(72vh, 680px); min-height: 440px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(58% 50% at 50% 46%, rgba(255,90,0,.24), transparent 70%),
    radial-gradient(90% 60% at 50% 120%, rgba(255,176,0,.08), transparent 60%),
    linear-gradient(180deg, #121212, #070707);
}
.pdp-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 72%);
}
.pdp-stage__3d { position: absolute; inset: 0; }
.pdp-stage__tag { position: absolute; z-index: 2; top: 18px; left: 20px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.pdp-stage__tag span { font: 600 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pdp-stage__tag strong { font: 700 14px/1.2 var(--font-body); color: var(--text); }
.pdp-stage__hint { position: absolute; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); pointer-events: none; white-space: nowrap; }
.pdp-stage__hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: pb-blink 1.6s steps(2) infinite; }
.pdp-stage .av { position: absolute; inset: 0; }
.faces-wrap { display: flex; flex-direction: column; gap: 10px; }
.faces { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: #2b2b2b transparent; }
.face-btn {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 78px; padding: 9px 8px 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color .25s, box-shadow .3s, transform .4s var(--ease), background-color .25s;
}
.face-btn:hover { border-color: #4a4a4a; transform: translateY(-3px); }
.face-btn canvas { width: 52px; aspect-ratio: 200 / 228; border-radius: 7px; background: #111; }
.face-btn.is-round canvas { width: 56px; aspect-ratio: 1; border-radius: 50%; }
.face-btn span { font: 600 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.face-btn[aria-checked="true"] { border-color: var(--orange); background: rgba(255,90,0,.07); box-shadow: 0 0 0 3px rgba(255,90,0,.14), 0 12px 30px -16px var(--glow); }
.face-btn[aria-checked="true"] span { color: var(--orange-2); }
.pdp-pairs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdp-info { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-name { font: 900 clamp(40px, 5.4vw, 80px)/.92 var(--font-display); letter-spacing: -.045em; overflow-wrap: break-word; }
.pdp-tagline { font-size: 18px; line-height: 1.55; color: var(--muted); }
.pdp-price .price { font-size: clamp(30px, 3vw, 40px); }
.pdp-price__note { margin-top: 8px; font: 500 12px/1.4 var(--font-mono); color: var(--dim); }
.opt-group { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.opt-group .swatch { width: 38px; height: 38px; }
.sizes { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 6px; }
.size-btn {
  height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
  font: 600 14px/1 var(--font-mono); color: var(--muted);
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .3s, transform .3s var(--ease);
}
.size-btn:hover { color: var(--text); border-color: #555; transform: translateY(-2px); }
.size-btn[aria-checked="true"] { color: #0a0a0a; background: var(--orange); border-color: var(--orange); box-shadow: 0 8px 22px -8px var(--glow); }
.size-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); }
.size-note__ok { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-2); font-weight: 700; }
.size-note__ok .ico { width: 16px; height: 16px; }
.size-note__ok.is-bump { animation: size-bump .5s var(--ease); }
.size-note .is-warn { color: #ffb3b3; font-weight: 700; }
@keyframes size-bump { 40% { transform: scale(1.06); } }
.buy-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.qty--lg { height: 60px; }
.qty--lg .qty__btn { width: 46px; }
.qty--lg .qty__val { min-width: 32px; font-size: 15px; }
.buy-row .btn { flex: 1 1 170px; }
.ship-note { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: 14px; line-height: 1.45; color: var(--muted); }
.ship-note strong { color: var(--text); }
.ship-note > .ico { width: 22px; height: 22px; color: var(--orange); flex: none; }
.ship-note .ship-bar { display: block; margin-top: 10px; }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.hl-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  font-size: 14px; line-height: 1.45; font-weight: 600;
  transition: border-color .3s, transform .45s var(--ease), background-color .3s;
}
.hl-list li:hover { border-color: rgba(255,90,0,.38); background: rgba(255,90,0,.04); transform: translateY(-2px); }
.hl-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--orange); background: rgba(255,90,0,.1); border: 1px solid rgba(255,90,0,.22); transition: transform .5s var(--ease), background-color .3s, color .3s; }
.hl-ico .ico { width: 18px; height: 18px; }
.hl-list li:hover .hl-ico { transform: rotate(-8deg) scale(1.06); background: var(--orange); color: #050505; }
.pdp-skel { display: grid; gap: 16px; }
@media (max-width: 960px) {
  .pdp-grid { grid-template-columns: minmax(0,1fr); }
  .pdp-media { position: relative; top: 0; }
  .pdp-stage { height: min(64vh, 520px); min-height: 360px; }
}
@media (max-width: 640px) {
  .sizes { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hl-list { grid-template-columns: minmax(0,1fr); }
  .pdp-stage { height: 380px; min-height: 0; border-radius: var(--radius); }
  .qty--lg { height: 56px; }
}

/* feature sections */
.feat { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); }
.feat:nth-child(even) .feat__vis { order: 2; }
.feat__copy .display-m { margin-top: 18px; }
.feat__copy .lead { margin-top: 20px; font-size: 18px; }
.feat__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.feat__points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; }
.feat__points li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--orange); box-shadow: 0 0 10px var(--glow); }
.feat__vis {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 400px; display: grid; place-items: center; padding: 32px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(70% 60% at 50% 50%, rgba(255,90,0,.16), transparent 70%), linear-gradient(180deg, #121212, #080808);
}
.feat__vis::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 72%);
}
.feat__cap { position: absolute; left: 20px; bottom: 16px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 860px) {
  .feat { grid-template-columns: minmax(0,1fr); }
  .feat:nth-child(even) .feat__vis { order: 0; }
  .feat__vis { min-height: 320px; padding: 24px 16px; }
}

/* visual: e-paper touch */
.v-touch { position: relative; }
.v-touch .wf { --wf-w: 190px; }
.v-touch__tap { position: absolute; left: 58%; top: 46%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; pointer-events: none; }
.is-in .v-touch__tap { animation: v-tap 2.8s var(--ease-out) 1s infinite; }
@keyframes v-tap { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; } 45%, 100% { opacity: 0; transform: scale(1.8); } }
.v-sun { position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,176,0,.55), rgba(255,122,31,.18) 40%, transparent 70%); filter: blur(4px); pointer-events: none; }
.v-sun::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(255,176,0,.5); animation: pb-spin 30s linear infinite; }
.v-spec { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.v-spec b { font: 800 16px/1 var(--font-display); letter-spacing: -.02em; text-transform: none; color: var(--text); }
.v-spec--tl { top: 20px; left: 20px; }
.v-spec--br { right: 20px; bottom: 44px; }

/* visual: battery segments */
.v-batt { width: min(100%, 440px); display: flex; flex-direction: column; gap: 22px; }
.v-batt__num { display: flex; align-items: baseline; gap: 14px; }
.v-batt__num .stat__num { font-size: clamp(64px, 9vw, 120px); }
.v-batt__num span:last-child { font: 700 13px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v-batt__cells { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; padding: 10px; border-radius: 16px; border: 1.5px solid var(--line-2); position: relative; }
.v-batt__cells::after { content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 34%; transform: translateY(-50%); border-radius: 0 4px 4px 0; background: var(--line-2); }
.v-batt__cells i { aspect-ratio: 1 / 1.25; border-radius: 5px; background: var(--surface-2); }
.is-in .v-batt__cells i { animation: v-cell .45s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 45ms + .3s); }
@keyframes v-cell { to { background: linear-gradient(180deg, var(--amber), var(--orange)); box-shadow: 0 0 12px -2px var(--glow); } }
.v-batt__scale { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-mono); color: var(--dim); }

/* visual: sensors */
.v-sense { width: min(100%, 460px); display: flex; flex-direction: column; gap: 18px; }
.v-pulse { width: 100%; height: 90px; }
.v-pulse path { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; filter: drop-shadow(0 0 6px var(--glow)); }
.is-in .v-pulse path { animation: v-draw 2.6s var(--ease) .2s forwards; }
@keyframes v-draw { to { stroke-dashoffset: 0; } }
.v-chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.v-chip { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 13px; font-weight: 700; transition: border-color .3s, transform .4s var(--ease); }
.v-chip:hover { border-color: rgba(255,90,0,.45); transform: translateY(-3px); }
.v-chip .ico { width: 20px; height: 20px; color: var(--orange); }

/* visual: thinness */
.v-thin { width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v-thin svg { width: 100%; height: auto; overflow: visible; }
.v-thin .case { fill: url(#thinMetal); }
.v-thin .dim { stroke: var(--orange); stroke-width: 1.5; fill: none; }
.v-thin .dim-t { fill: var(--orange-2); font: 600 12px var(--font-mono); letter-spacing: .1em; }
.v-thin .stat__num { font-size: clamp(56px, 8vw, 104px); }

/* visual: bezel free */
.v-bezel { position: relative; display: grid; place-items: center; }
.v-bezel .wf { --wf-w: 220px; }
.v-bezel__ring { position: absolute; left: 50%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; border-radius: 50%; border: 1px dashed rgba(255,122,31,.5); animation: pb-spin 40s linear infinite; pointer-events: none; }
.v-bezel__lbl { position: absolute; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-2); white-space: nowrap; }
.v-bezel__lbl--t { top: -34px; left: 50%; transform: translateX(-50%); }
.v-bezel__lbl--b { bottom: -34px; left: 50%; transform: translateX(-50%); color: var(--muted); }

/* visual: band widths */
.v-bands { display: flex; align-items: flex-start; justify-content: center; gap: clamp(28px, 6vw, 64px); width: 100%; }
.v-band { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.v-band__bar {
  width: calc(var(--w) * 5.2px); height: 220px; border-radius: 14px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c), #000 35%), var(--c) 45%, color-mix(in srgb, var(--c), #000 25%));
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12);
  transform-origin: bottom; transform: scaleY(.2); opacity: .3;
  transition: transform 1.1s var(--ease-out), opacity .6s;
}
.is-in .v-band__bar { transform: none; opacity: 1; }
.v-band:nth-child(2) .v-band__bar { transition-delay: .15s; }
.v-band__bar::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 2px; background: var(--orange); box-shadow: 0 0 10px var(--glow); }
.v-band b { font: 900 clamp(34px, 4vw, 52px)/1 var(--font-display); letter-spacing: -.04em; }
.v-band span { font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; max-width: 18ch; }

/* visual: press to remember */
.v-press { width: min(100%, 460px); display: flex; flex-direction: column; gap: 22px; align-items: center; }
.v-press .ringv { --rs: 150px; }
.v-press__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; counter-reset: vp; }
.v-press__steps li { position: relative; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 13px; font-weight: 700; }
.v-press__steps li::before { counter-increment: vp; content: "0" counter(vp); display: block; margin-bottom: 6px; font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--orange); }
.is-in .v-press__steps li { animation: v-step 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
@keyframes v-step { 0%, 30% { border-color: var(--orange); background: rgba(255,90,0,.08); } 36%, 100% { border-color: var(--line); background: rgba(255,255,255,.02); } }
.v-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.v-wave i { width: 5px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--amber), var(--orange)); transform: scaleY(.15); }
.is-in .v-wave i { animation: v-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -130ms); }
@keyframes v-wave { from { transform: scaleY(.12); } to { transform: scaleY(var(--h, .8)); } }

/* visual: years */
.v-years { width: min(100%, 440px); display: flex; flex-direction: column; gap: 20px; }
.v-years__num { display: flex; align-items: baseline; gap: 14px; }
.v-years__num .stat__num { font-size: clamp(80px, 11vw, 150px); }
.v-years__num span:last-child { font: 700 13px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v-months { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 6px; }
.v-months i { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line-2); }
.is-in .v-months i { animation: v-month .4s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + .3s); }
@keyframes v-month { to { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 10px -2px var(--glow); } }
.v-years__scale { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-mono); color: var(--dim); }
.v-plug { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,90,0,.35); background: rgba(255,90,0,.08); font: 600 12px/1 var(--font-mono); color: var(--orange-2); }
.v-plug svg { width: 18px; height: 18px; }

/* visual: no health */
.v-nohealth { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.v-nohealth__icon { position: relative; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: radial-gradient(circle, rgba(255,255,255,.03), transparent 70%); }
.v-nohealth__icon svg { width: 76px; height: 76px; color: var(--dim); }
.v-nohealth__icon::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 3px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 14px var(--orange); transform: rotate(-38deg) scaleX(0); transition: transform .9s var(--ease-out) .4s; }
.is-in .v-nohealth__icon::after { transform: rotate(-38deg) scaleX(1); }
.v-nolist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v-nolist .chip { text-decoration: line-through; text-decoration-color: rgba(255,90,0,.7); }

/* visual: accessory color wall + width */
.v-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; width: 100%; }
.v-wall__i { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); transition: border-color .3s, transform .5s var(--ease); }
.v-wall__i:hover { border-color: rgba(255,90,0,.4); transform: translateY(-4px); }
.v-wall__i .av { height: 190px; }
.v-wall__i .av svg { width: 80%; }
.v-wall__i span { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.v-width { width: 100%; height: 260px; border-bottom: 0; gap: 18px; }
.v-width .compat-bar, .v-width .compat-ghost { height: 220px; width: calc(var(--w) * 5px); }

/* specs + box */
.pdp-specs { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; align-items: start; }
.box-card { display: flex; flex-direction: column; gap: 18px; }
.box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.box-list li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-weight: 600; font-size: 14.5px; }
.box-list .ico { width: 18px; height: 18px; color: var(--orange); }
.help-links { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .pdp-specs { grid-template-columns: minmax(0,1fr); } }

/* faq */
.faq { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #121212, #0c0c0c); transition: border-color .3s, box-shadow .4s; }
.faq details:hover { border-color: var(--line-2); }
.faq details[open] { border-color: rgba(255,90,0,.38); box-shadow: 0 24px 60px -36px var(--glow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; font: 700 17px/1.35 var(--font-body); border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 20px; height: 20px; flex: none; color: var(--orange); transition: transform .45s var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq__a { padding: 0 22px 22px; color: var(--muted); font-size: 15.5px; line-height: 1.65; max-width: 70ch; }
.faq details[open] .faq__a { animation: rv-up .5s var(--ease-out); }
.faq__a a { color: var(--orange-2); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,122,31,.4); text-underline-offset: 3px; transition: color .2s; }
.faq__a a:hover { color: var(--amber); }

/* sticky buy bar */
.buybar {
  position: fixed; z-index: 90; left: 50%; bottom: 16px;
  width: min(calc(100% - 24px), 780px);
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; border-radius: 22px;
  transform: translate3d(-50%, 150%, 0); visibility: hidden;
  transition: transform .6s var(--ease), visibility 0s linear .6s;
}
.buybar.is-shown { transform: translate3d(-50%, 0, 0); visibility: visible; transition: transform .6s var(--ease); }
.buybar__thumb { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: radial-gradient(circle at 30% 15%, rgba(255,90,0,.25), transparent 60%), var(--surface); border: 1px solid var(--line); overflow: hidden; }
.buybar__info { flex: 1; min-width: 0; }
.buybar__name { display: block; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__meta { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { flex: none; }
html.cart-open .buybar { opacity: 0; pointer-events: none; }
@media (max-width: 560px) {
  .buybar { bottom: 10px; gap: 10px; padding: 8px 8px 8px 12px; }
  .buybar__thumb, .buybar .btn--ghost { display: none; }
}

/* not found */
.pdp-missing { padding-block: clamp(56px, 8vw, 120px); }
.pdp-missing .display-l { margin-top: 18px; }

/* ===== accessories page ===== */
.acc-hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.acc-hero .display-xl { max-width: 9ch; }
.acc-collage { position: relative; height: clamp(300px, 34vw, 440px); }
.acc-collage__tile {
  position: absolute; display: grid; place-items: center; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(80% 70% at 50% 100%, rgba(255,90,0,.16), transparent 60%), linear-gradient(160deg, #181818, #0b0b0b);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.acc-collage__tile .av { animation: pb-float 6s ease-in-out infinite; }
.acc-collage__tile .av svg { width: auto; height: 76%; max-width: 82%; }
.acc-collage__tile:nth-child(1) { left: 0; top: 8%; width: 46%; height: 70%; transform: rotate(-5deg); }
.acc-collage__tile:nth-child(2) { right: 0; top: 0; width: 52%; height: 56%; transform: rotate(4deg); }
.acc-collage__tile:nth-child(2) .av { animation-delay: -2s; }
.acc-collage__tile:nth-child(3) { right: 8%; bottom: 0; width: 44%; height: 40%; transform: rotate(-2deg); }
.acc-collage__tile:nth-child(3) .av { animation-delay: -4s; }
.acc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.acc-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-filters .chip { height: 40px; padding: 0 16px; font-size: 12.5px; }
.acc-filters .chip small { font: inherit; opacity: .6; }
.acc-count { font: 500 12px/1 var(--font-mono); color: var(--dim); }
.compat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.compat-card { display: flex; flex-direction: column; gap: 18px; }
.compat-card__vis { height: 170px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.compat-bar {
  width: calc(var(--w) * 3.4px); height: 140px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(90deg, var(--ember), var(--orange) 45%, var(--orange-2));
  box-shadow: 0 0 30px -8px var(--glow), inset 0 0 0 1px rgba(255,255,255,.18);
  transform-origin: bottom; transform: scaleY(.1); transition: transform 1s var(--ease-out);
}
.is-in .compat-bar { transform: none; }
.compat-ghost { width: calc(var(--w) * 3.4px); height: 140px; border-radius: 10px 10px 4px 4px; border: 1px dashed var(--line-2); }
.compat-card__w { font: 900 clamp(40px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.04em; }
.compat-card__w small { font-size: .4em; color: var(--muted); letter-spacing: 0; }
.compat-card p { color: var(--muted); font-size: 15px; }
.compat-card .link-arrow { margin-top: auto; }
.acc-promise { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.acc-promise .card { display: flex; gap: 16px; align-items: flex-start; }
.acc-promise .hl-ico { width: 44px; height: 44px; border-radius: 14px; }
.acc-promise h3 { font: 700 17px/1.3 var(--font-body); margin-bottom: 6px; letter-spacing: 0; }
.acc-promise p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 960px) {
  .acc-hero__grid { grid-template-columns: minmax(0,1fr); }
  .acc-collage { height: 300px; max-width: 520px; width: 100%; }
  .compat-grid, .acc-promise { grid-template-columns: minmax(0,1fr); }
  .compat-card__vis { height: 150px; }
}
@media (max-width: 480px) {
  .acc-collage { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-band__bar, .compat-bar { transform: none; opacity: 1; }
  .v-pulse path { stroke-dashoffset: 0; }
  .v-nohealth__icon::after { transform: rotate(-38deg) scaleX(1); }
  .v-batt__cells i { background: linear-gradient(180deg, var(--amber), var(--orange)); }
  .v-months i { background: var(--orange); border-color: var(--orange); }
  .v-wave i { transform: scaleY(var(--h, .8)); }
}