/* ==========================================================================
   Product detail, wave 2: touch and feedback layer (pairs with js/parts/20-product.js).
   Scoped to body.route-product. Motion is transform/opacity only.
   ========================================================================== */

html:has(body.route-product) { scroll-padding-top: calc(var(--head-h) + 64px); }

/* ---------- gallery ---------- */
.route-product .pdp-hero .gallery-main { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.route-product .pdp-hero .gallery-main img.view { -webkit-user-drag: none; }
.route-product .pdp-hero .gallery-main.is-drag img.view { transition: none; will-change: transform, opacity; }
.route-product .pdp-hero .gallery-main[data-dir="next"] img.view.is-on { animation: pdp-in-next .5s var(--ease) both; }
.route-product .pdp-hero .gallery-main[data-dir="prev"] img.view.is-on { animation: pdp-in-prev .5s var(--ease) both; }
@keyframes pdp-in-next { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes pdp-in-prev { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }

/* Hover zoom (desktop mouse only, set by JS). */
.route-product .pdp-hero .gallery-main.is-zoom { cursor: zoom-in; }
.route-product .pdp-hero .gallery-main.is-zoom img.view.is-on { transform: scale(1.8); transition: transform .35s var(--ease), opacity .45s; animation: none; }

.pdp-gal-count { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; font: 500 .66rem/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: pre; pointer-events: none; }
.pdp-zoom-hint { position: absolute; left: 12px; bottom: 12px; z-index: 3; font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: .8; pointer-events: none; transition: opacity .25s; }
.gallery-main.is-zoom .pdp-zoom-hint { opacity: 0; }

.pdp-gal-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), opacity .2s, background-color .2s, border-color .2s; }
.pdp-gal-nav.prev { left: 10px; }
.pdp-gal-nav.next { right: 10px; }
.pdp-gal-nav:active { transform: scale(.92); }
.pdp-gal-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pdp-gal-nav { opacity: 0; }
  .gallery-main:hover .pdp-gal-nav, .pdp-gal-nav:focus-visible { opacity: 1; }
  .pdp-gal-nav:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
}

/* Thumbs: tactile press and a sliding accent under the active label. */
.route-product .pdp-hero .thumbs button { min-height: 44px; transition: border-color .2s, transform .14s var(--ease); }
.route-product .pdp-hero .thumbs button:active { transform: scale(.96); }
.route-product .pdp-hero .thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .route-product .pdp-hero .thumbs button img { transition: transform .35s var(--ease); }
  .route-product .pdp-hero .thumbs button:hover img { transform: scale(1.06); }
}

/* ---------- hero price tiers: each tier is a button once JS runs ---------- */
.pdp-tiers.is-live li { display: block; padding: 0; }
.pdp-tier-btn { display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 12px 12px 14px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; transition: background-color .2s; }
.pdp-tier-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.pdp-tiers li.is-on .pdp-tier-btn::after { transform: scaleX(1); }
.pdp-tiers li.is-on b { color: var(--accent-ink); }
.pdp-tier-btn:active { background: var(--accent-soft); }
.pdp-tier-btn:active b { transform: scale(.96); }
.pdp-tier-btn b { display: inline-block; transform-origin: left center; transition: transform .14s var(--ease); }
.pdp-tier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .pdp-tier-btn:hover { background: var(--accent-soft); }
}
@media (max-width: 1100px) and (min-width: 901px), (max-width: 560px) {
  .pdp-tier-btn { grid-template-columns: 1fr auto; align-items: center; padding: 9px 14px; }
  .pdp-tier-btn::after { right: auto; bottom: 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .pdp-tiers li.is-on .pdp-tier-btn::after { transform: scaleY(1); }
  .pdp-tier-btn b { transform-origin: right center; }
}
.pdp-tier-read { margin: 0; padding: 10px 14px; border-top: 1px solid var(--rule); font: 500 .8rem/1.45 var(--f-mono); color: var(--ink); background: var(--surface); }
.pdp-tier-read a { font-weight: 600; white-space: nowrap; }

/* ---------- facts grid: hover/press reads like a highlighted spec cell ---------- */
.route-product .pdp-facts > div { position: relative; transition: background-color .2s; }
@media (hover: hover) and (pointer: fine) {
  .route-product .pdp-facts > div:hover { background: var(--accent-soft); }
}

/* ---------- spec sheet index (sticky under the header) ---------- */
.pdp-index { position: sticky; top: var(--head-h); z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: box-shadow .25s; }
.pdp-index.is-stuck { box-shadow: 0 6px 18px rgba(14, 27, 44, .07); }
.pdp-index-sentinel { height: 0; }
.pdp-index-inner { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.pdp-index-code { flex: none; padding: 4px 8px; background: var(--navy); color: #fff; font: 600 .68rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.pdp-index-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pdp-index-list::-webkit-scrollbar { display: none; }
.pdp-index-list li { flex: none; scroll-snap-align: start; }
.pdp-index-list a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: 500 .74rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .2s, transform .14s var(--ease); }
.pdp-index-list a .n { color: var(--rule-strong); transition: color .2s; }
.pdp-index-list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.pdp-index-list a[aria-current="true"] { color: var(--ink); }
.pdp-index-list a[aria-current="true"] .n { color: var(--accent-ink); }
.pdp-index-list a[aria-current="true"]::after { transform: scaleX(1); }
.pdp-index-list a:active { transform: scale(.96); }
.pdp-index-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .pdp-index-list a:hover { color: var(--accent-ink); }
}
@media (max-width: 600px) {
  .pdp-index-inner { gap: 8px; padding-right: 0; }
  .pdp-index-code { display: none; }
  .pdp-index-list { margin-left: -12px; mask-image: linear-gradient(to right, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); }
  .pdp-index-list.is-end { mask-image: none; -webkit-mask-image: none; }
}

/* ---------- decoration form: checkboxes as chip tiles (works without JS via :has) ---------- */
.route-product .deco-group { gap: 8px; }
.route-product .deco-price .deco-opt { position: relative; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); transition: border-color .2s, background-color .2s, transform .14s var(--ease); }
.route-product .deco-opt:active { transform: scale(.98); }
.route-product .deco-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.route-product .deco-opt:has(input:checked) span { color: var(--ink); font-weight: 600; }
.route-product .deco-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .route-product .deco-opt:hover { border-color: var(--ink-2); }
}
.pdp-deco-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); }
.pdp-deco-status { margin: 0; flex: 1 1 260px; font: 500 .8rem/1.5 var(--f-mono); color: var(--ink-2); }
.pdp-deco-clear { min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); font: 600 .8rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: transform .14s var(--ease), border-color .2s; }
.pdp-deco-clear:active { transform: scale(.96); }
.pdp-deco-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pdp-deco-clear:hover { border-color: var(--ink); }
}
.pdp-deco-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--accent-ink); font: 600 .75rem/1 var(--f-mono); }
.pdp-deco-n.is-pop { animation: pdp-pop .28s var(--ease); }
@keyframes pdp-pop { from { transform: scale(.6); } to { transform: none; } }

/* ---------- sticky buy bar ---------- */
.route-product .sticky-buy-inner .pdp-sticky-actions { display: flex; gap: 8px; flex: none; overflow: visible; white-space: normal; font-size: inherit; }
.route-product .sticky-buy.is-on.pdp-sticky-off { transform: translateY(100%); }
/* Off screen means out of the tab order too: visibility flips after the slide-out, before the slide-in. */
.route-product .sticky-buy { visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
.route-product .sticky-buy.is-on:not(.pdp-sticky-off) { visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
@media (max-width: 520px) {
  .route-product .pdp-sticky-deco { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .route-product .pdp-hero .gallery-main img.view.is-on,
  .pdp-deco-n { animation: none !important; }
  .route-product .sticky-buy,
  .pdp-gal-nav, .pdp-tier-btn, .pdp-tier-btn::after, .pdp-tier-btn b, .pdp-index-list a, .pdp-index-list a::after, .route-product .deco-opt, .pdp-deco-clear, .route-product .pdp-hero .thumbs button, .route-product .pdp-hero .thumbs button img { transition: none !important; }
  .pdp-gal-nav:active, .pdp-tier-btn:active b, .pdp-index-list a:active, .route-product .deco-opt:active, .pdp-deco-clear:active, .route-product .pdp-hero .thumbs button:active { transform: none; }
}