/* ============================================================
   VOLTFIX SHOP — standalone product page
   Inherits tokens from styles.css; adds shop-scoped semantics.
   Signature element: 3D flip of the device mockup on hover.
   ============================================================ */
:root {
  --surface: #141417;
  --surface-2: #0e0e11;
  --hairline: rgba(255, 255, 255, 0.09);
  --ok: #6ee787;
  --space-1: 6px;  --space-2: 10px; --space-3: 16px;
  --space-4: 22px; --space-5: 32px; --space-6: 48px; --space-7: 72px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
}

/* ---------- cosmic backdrop ---------- */
.shop-page { background: #07060c; }
/* keep the dashed grid — the cosmic gradient layers on top of it */
.shop-page .grid-bg { --grid: rgba(210, 195, 255, 0.10); z-index: 0; }
.cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cosmos .neb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.75;
  animation: drift 26s ease-in-out infinite alternate;
}
.neb-a { top: -18%; left: -12%; width: 62vw; height: 62vw; background: radial-gradient(circle, #8b52f0 0%, rgba(110,60,200,.45) 38%, transparent 70%); }
.neb-b { top: -14%; right: -14%; width: 58vw; height: 58vw; background: radial-gradient(circle, #ff8a2b 0%, rgba(220,90,40,.45) 38%, transparent 70%); animation-delay: -9s; }
/* galaxy core — the bright centre of the reference image */
.neb-c {
  top: 14%; left: 26%; width: 56vw; height: 40vw;
  background: radial-gradient(ellipse, rgba(255,244,214,.75) 0%, rgba(255,196,110,.42) 18%, rgba(150,100,220,.30) 46%, transparent 72%);
  filter: blur(60px); opacity: .6; animation-delay: -16s;
}
@keyframes drift { to { transform: translate3d(4%, 3%, 0) scale(1.12); } }

.cosmos .stars {
  position: absolute; inset: 0; opacity: 0.85;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 12%, #ffe9c0, transparent),
    radial-gradient(1.2px 1.2px at 32% 42%, #fff, transparent), radial-gradient(1.6px 1.6px at 62% 32%, #dfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 88% 52%, #fff, transparent), radial-gradient(1.4px 1.4px at 8% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 8%, #ffd9a0, transparent), radial-gradient(1.5px 1.5px at 92% 28%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 22% 76%, #fff, transparent), radial-gradient(1.3px 1.3px at 68% 68%, #cfe0ff, transparent);
  background-size: 100% 100%;
  animation: twinkle 5.5s ease-in-out infinite;
}
.stars-2 { transform: scale(1.6) rotate(12deg); opacity: 0.5; animation-delay: -2.6s; }
@keyframes twinkle { 50% { opacity: 0.42; } }

/* perspective floor grid, like a horizon */
.cosmos .floor {
  position: absolute; left: -25%; right: -25%; bottom: -12%; height: 62vh;
  background-image:
    repeating-linear-gradient(to right, rgba(205,185,255,.62) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(to bottom, rgba(205,185,255,.62) 0 1px, transparent 1px 46px);
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, rgba(0,0,0,.35));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, rgba(0,0,0,.35));
}
/* keep content legible over the nebulae */
.shop-page main::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 95% 65% at 50% 38%, rgba(7,6,12,.12), rgba(7,6,12,.55) 82%);
}
.shop-page main > * { position: relative; z-index: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shop-page main { position: relative; z-index: 1; }
.nav-links a.is-active { color: var(--yellow); }

/* cart button */
.cart-btn {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 15px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hairline);
  color: var(--text); transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.cart-btn:hover { border-color: rgba(255, 230, 0, 0.45); color: var(--yellow); background: rgba(255, 230, 0, 0.07); }
.cart-btn svg { width: 25px; height: 25px; }
.cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0 6px;
  border-radius: 100px; background: var(--grad); color: #0c0c00;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  transform: scale(0); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.cart-count.has { transform: scale(1); }
.cart-count.bump { animation: countBump 0.4s ease; }
@keyframes countBump { 40% { transform: scale(1.45); } }

/* ---------- hero ---------- */
.shop-hero {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(120px, 15vh, 170px) 5vw var(--space-6);
  text-align: center;
}
.shop-kicker { margin-bottom: var(--space-3); }
.shop-title {
  font-size: clamp(2.3rem, 1.2rem + 5.4vw, 5.4rem); font-weight: 800;
  line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase;
}
.shop-title .tw { display: block; }
/* orchestrated entrance — the page's one staged moment */
.shop-kicker, .shop-title .tw, .shop-sub, .trust-row {
  opacity: 0; transform: translateY(26px); filter: blur(8px);
  animation: heroIn 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.shop-title .tw:nth-child(1) { animation-delay: 0.08s; }
.shop-title .tw:nth-child(2) { animation-delay: 0.16s; }
.shop-sub { animation-delay: 0.26s; }
.trust-row { animation-delay: 0.34s; }
@keyframes heroIn { to { opacity: 1; transform: none; filter: blur(0); } }

.shop-sub {
  margin: var(--space-4) auto 0; max-width: 58ch;
  color: var(--muted); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.6;
}
.trust-row {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5); margin-top: var(--space-5);
}
.trust-row li { display: flex; align-items: baseline; gap: var(--space-1); color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.trust-row b {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- layout ---------- */
.shop-layout {
  max-width: 1320px; margin: 0 auto; padding: 0 5vw var(--space-7);
  display: grid; grid-template-columns: 262px 1fr; gap: var(--space-5);
  align-items: start;
}

/* ---------- filters ---------- */
.filters {
  position: sticky; top: 96px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.filters-head h2 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yellow); }
.filter-close { display: none; background: none; border: none; color: var(--muted); font-size: 17px; cursor: pointer; padding: 6px; }

.fgroup { margin-bottom: var(--space-4); border: none; padding: 0; }
.flabel, .fgroup legend {
  display: block; margin-bottom: var(--space-2); padding: 0;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
  padding: 8px 13px; border-radius: 100px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline);
  color: var(--muted); font-family: var(--font-body); font-size: 12.3px; font-weight: 500;
  transition: color 0.22s, border-color 0.22s, background 0.22s, transform 0.22s;
}
.fchip:hover { color: var(--yellow); border-color: rgba(255, 230, 0, 0.4); transform: translateY(-1px); }
.fchip.is-on { background: var(--grad); border-color: transparent; color: #0c0c00; font-weight: 700; }

/* free-text search — the fields it looks at are set in the admin panel */
.f-search {
  width: 100%; height: 46px; padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(8, 8, 9, 0.7); border: 1px solid var(--hairline); color: var(--text);
  font-family: var(--font-body); font-size: 14px; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.f-search::placeholder { color: var(--dim); }
.f-search:hover { border-color: rgba(255, 230, 0, 0.32); }
.f-search:focus { border-color: rgba(255, 230, 0, 0.6); box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.12); }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select-wrap select {
  width: 100%; height: 46px; padding: 0 34px 0 14px;
  border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(8, 8, 9, 0.7); border: 1px solid var(--hairline); color: var(--text);
  font-family: var(--font-body); font-size: 14px; appearance: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.select-wrap select:hover { border-color: rgba(255, 230, 0, 0.32); }
.select-wrap select:focus-visible { outline: none; border-color: rgba(255, 230, 0, 0.6); box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.12); }

/* dual range slider */
.range { position: relative; height: 62px; padding-top: 26px; }
.range-track { position: absolute; left: 0; right: 0; top: 40px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.range-fill { position: absolute; height: 100%; border-radius: 4px; background: var(--grad); box-shadow: 0 0 14px rgba(255, 220, 0, 0.45); }
.range input[type="range"] {
  position: absolute; left: 0; top: 30px; width: 100%; height: 24px;
  background: none; appearance: none; pointer-events: none; margin: 0;
}
.range input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--yellow);
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.7);
  transition: transform 0.2s ease;
}
.range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--yellow); box-shadow: 0 0 12px rgba(255, 230, 0, 0.7);
}
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 230, 0, 0.25); }
.bubble {
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 230, 0, 0.28);
  color: var(--yellow); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease;
}
.bubble.tight-l { transform: translateX(-100%) translateX(-6px); }
.bubble.tight-r { transform: translateX(6px); }

/* single-thumb variant (battery minimum) — no track fill to position */
.range-one { height: 46px; }
.range-one input[type="range"] { pointer-events: auto; top: 20px; }
.bubble-single { right: 0; left: auto; transform: none; }

.reset-btn {
  width: 100%; margin-top: var(--space-2); padding: 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  background: none; border: 1px solid var(--hairline); color: var(--muted);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.25s, border-color 0.25s;
}
.reset-btn:hover { color: var(--yellow); border-color: rgba(255, 230, 0, 0.45); }

/* mobile filter trigger */
.filter-fab {
  display: none; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 100px; cursor: pointer;
  background: var(--grad); color: #0c0c00; border: none;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--glow);
}
.filter-fab svg { width: 16px; height: 16px; }

/* ---------- results ---------- */
.results-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); flex-wrap: wrap;
}
.results-count { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.results-count b { color: var(--text); font-weight: 700; }
.sort-wrap { min-width: 210px; }

.grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
}

/* ---------- product card ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(165deg, rgba(24, 22, 32, 0.86), rgba(12, 11, 17, 0.92));
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
  /* entrance */
  opacity: 0; transform: translateY(20px) scale(0.98);
  animation: cardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn { to { opacity: 1; transform: none; } }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px 240px at var(--mx, 50%) var(--my, 0%), rgba(255, 230, 0, 0.10), transparent 62%);
  opacity: 0; transition: opacity 0.35s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255, 230, 0, 0.34); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 210, 0, 0.07); }
.card:hover::before { opacity: 1; }
.card:focus-within { border-color: rgba(255, 230, 0, 0.5); }

.card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 5px 10px; border-radius: 100px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
  background: var(--grad); color: #0c0c00;
}
.card-badge.is-low { background: rgba(255, 255, 255, 0.1); color: var(--muted); }

/* --- the signature: 3D flipping device --- */
.stage {
  position: relative; perspective: 1000px;
  padding: var(--space-4) 0 var(--space-3); display: grid; place-items: center;
  border-radius: var(--radius-md); overflow: hidden;
}
/* soft gradient wash behind the phone — never a flat black box */
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 42%, rgba(255, 230, 0, 0.10), transparent 68%),
    linear-gradient(168deg, rgba(150, 110, 255, 0.10), transparent 45%, rgba(255, 138, 43, 0.09));
  opacity: 0.9; transition: opacity 0.4s ease;
}
.card:hover .stage::before { opacity: 1; }
/* faint floor reflection under the device */
.stage::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 62%; height: 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 220, 150, 0.16), transparent 70%);
  filter: blur(3px);
}
.stage .device { z-index: 1; }
.card .stage { cursor: pointer; }

/* --- real photos of the actual unit --- */
/* A listing with images swaps the drawn device for them inside the same
   .stage box, so every rule that already targets a stage keeps applying. */
.stage.is-photo { padding: 0; display: block; }
.stage.is-photo::after { display: none; }        /* photos bring their own floor */
.photo { display: block; width: 100%; height: 100%; z-index: 1; position: relative; }
.is-cover .photo { aspect-ratio: 4 / 3; object-fit: cover; }
.is-contain .photo { object-fit: contain; }

/* the second photo standing in for the drawn device's hover flip */
.card .stage.is-photo { aspect-ratio: 4 / 3; }
.card .photo-alt {
  position: absolute; inset: 0; aspect-ratio: auto; z-index: 2;
  opacity: 0; transition: opacity 0.5s ease;
}
.card:hover .photo-alt, .card:focus-within .photo-alt { opacity: 1; }
.device {
  position: relative; width: 108px; aspect-ratio: 108 / 216;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.25, 1);
}
.card:hover .device, .card:focus-within .device { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; border-radius: 15px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(150deg, #3a3a40, #17171b 55%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* front = screen */
.screen {
  position: absolute; inset: 4px; border-radius: 11px;
  background: var(--screen, linear-gradient(160deg, #2b2b33, #101014));
}
.screen::after { /* glass sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 22%, transparent 42%);
}
.island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 9px; border-radius: 100px; background: #000; z-index: 2;
}
/* back = camera module */
.face.back { transform: rotateY(180deg); background: var(--back, linear-gradient(150deg, #33333a, #141418 60%)); }
.cam {
  position: absolute; top: 12px; left: 12px;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.13);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px;
}
.cam i {
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6f6f7d, #0b0b0e 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.cam i:nth-child(3) { grid-column: 1 / -1; width: 14px; margin: 0 auto; aspect-ratio: 1; }
.logo-dot {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
}
.flip-hint {
  position: absolute; right: 14px; top: 16px; z-index: 3;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  transition: color 0.3s, opacity 0.3s; opacity: 0.75;
}
.card:hover .flip-hint { color: var(--yellow); opacity: 1; }

/* --- card copy --- */
.card-brand { color: var(--yellow); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.card-name { margin-top: 5px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.card-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 4px 9px; border-radius: 6px; font-size: 11px; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hairline);
}
.tag.cond-excellent { color: var(--ok); border-color: rgba(110, 231, 135, 0.3); background: rgba(110, 231, 135, 0.08); }
.card-foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
/* old price: bright red, bold, struck through — the promo anchor */
.price-was {
  display: block; margin-top: 5px; font-family: var(--font-display);
  color: #ff5b4a; font-size: 0.92rem; font-weight: 700; text-decoration: line-through;
  text-decoration-color: rgba(255, 91, 74, 0.85); text-decoration-thickness: 2px;
  text-shadow: 0 0 14px rgba(255, 91, 74, 0.35);
}

.add-btn {
  width: 100%; margin-top: var(--space-3); height: 44px; border-radius: 11px;
  position: relative; overflow: hidden; cursor: pointer; border: none;
  background: var(--grad); color: #0c0c00;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  transition: transform 0.22s ease, box-shadow 0.28s ease, filter 0.28s;
}
.add-btn:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255, 230, 0, 0.45); }
.add-btn:active { transform: translateY(0); }
.add-btn:focus-visible { outline: 3px solid rgba(255, 230, 0, 0.55); outline-offset: 2px; }
.add-btn.added { filter: saturate(0.6) brightness(1.1); }
.add-btn .lbl { transition: opacity 0.2s, transform 0.25s; display: inline-block; }
.add-btn.added .lbl { opacity: 0; transform: translateY(-8px); }
.add-btn .done {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s 0.05s, transform 0.25s 0.05s;
}
.add-btn.added .done { opacity: 1; transform: none; }

/* ---------- finish chip (admin-set, display only) ---------- */
.finish-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2);
  /* a one-word finish ("Ultramarine") has nowhere to wrap and pushed the chip
     out past the card edge on a phone; wrapping drops the name onto its own
     full-width line instead of hyphen-less breaking it mid-word */
  max-width: 100%; flex-wrap: wrap;
  padding: 7px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--hairline);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.card:hover .finish-chip { border-color: rgba(255, 230, 0, 0.28); background: rgba(255, 230, 0, 0.05); }
.finish-dot {
  width: 26px; height: 16px; border-radius: 6px; flex: none;
  background: var(--c); border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.finish-label {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.finish-name { font-size: 12px; font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: break-word; }
.pd .finish-chip { margin-top: var(--space-3); padding: 9px 15px; }
.pd .finish-dot { width: 34px; height: 21px; border-radius: 7px; }
.pd .finish-name { font-size: 13.5px; }

/* ---------- battery health ---------- */
.health { margin-top: var(--space-2); }
.health-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.health-top span { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.health-top b { font-family: var(--font-display); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); }
.health-track { height: 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.health-fill {
  display: block; height: 100%; width: 0; border-radius: 100px;
  animation: fillUp 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.25s;
  position: relative; overflow: hidden;
}
@keyframes fillUp { to { width: var(--v); } }
/* One continuous red→green scale driven by --hue (0 = red, 120 = green),
   set inline by conditionBar() in shop.js. The gradient runs from a slightly
   darker, deeper shade to a brighter one so the bar keeps the lit look the
   three fixed tones had, at any hue. Saturation is held below 100% because a
   fully saturated red on this dark ground vibrates. */
.health-fill {
  background: linear-gradient(90deg,
    hsl(var(--hue) 62% 38%),
    hsl(var(--hue) 78% 58%));
  box-shadow: 0 0 12px hsl(var(--hue) 80% 55% / 0.5);
}
.health-fill::after { /* travelling sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 46%, transparent 72%);
  animation: sheen 2.4s 1.3s infinite;
}
@keyframes sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ---------- promo ---------- */
.card-badge.promo { background: linear-gradient(100deg, #ff5a3c, var(--orange)); color: #fff; }
.save-chip {
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  background: rgba(110, 231, 135, 0.1); border: 1px solid rgba(110, 231, 135, 0.32);
  color: var(--ok); font-size: 10.5px; font-weight: 700;
}

/* skeleton */
.skel { border-radius: var(--radius-lg); height: 372px; background: var(--surface-2); border: 1px solid var(--hairline); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.05) 42%, transparent 64%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* states */
.state-panel { padding: var(--space-7) var(--space-4); text-align: center; }
.state-icon { font-size: 2.2rem; margin-bottom: var(--space-2); }
.state-panel h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.state-panel p { color: var(--muted); margin: var(--space-2) auto var(--space-4); max-width: 42ch; }

/* ---------- cta strip ---------- */
.shop-cta {
  position: relative; z-index: 1; text-align: center;
  padding: var(--space-7) 5vw; border-top: 1px solid var(--line);
}
.shop-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 60%, rgba(255, 210, 0, 0.1), transparent 70%);
}
.shop-cta h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.shop-cta p { color: var(--muted); margin: var(--space-3) 0 var(--space-4); }

/* ---------- product detail dialog ---------- */
.pd {
  /* dialogs are centred by auto margins — pin them explicitly */
  margin: auto; inset: 0; position: fixed;
  width: min(1060px, 94vw); max-height: 90vh; padding: clamp(20px, 3vw, 38px);
  border: 1px solid rgba(255, 230, 0, 0.2); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #16161a, #0d0d10);
  color: var(--text); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
}
body.dialog-open { overflow: hidden; }
.pd::backdrop { background: rgba(6, 6, 8, 0.78); backdrop-filter: blur(4px); }
.pd[open] { animation: pdIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pdIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.pd-close {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hairline);
  color: var(--muted); font-size: 15px; transition: color 0.25s, border-color 0.25s;
}
.pd-close:hover { color: var(--yellow); border-color: rgba(255, 230, 0, 0.45); }

.pd-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
/* the drawn device is portrait and fits 300px; real photos are landscape and
   are the point of the listing, so they get a wider column */
.pd-grid.has-photo { grid-template-columns: minmax(300px, 440px) 1fr; }
.pd-visual {
  position: relative; padding: var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-md); text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 230, 0, 0.07), transparent 70%), rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
}
.pd-visual .device { width: 132px; }
.pd-visual .swatches { justify-content: center; margin-top: var(--space-3); }
.cert-seal {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-3);
  padding: 7px 14px; border-radius: 100px;
  background: rgba(110, 231, 135, 0.09); border: 1px solid rgba(110, 231, 135, 0.35);
  color: var(--ok); font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
}
.cert-seal b { font-size: 12px; }
/* attribution label, not an endorsement — no green, no tick */
.seller-seal {
  background: rgba(255, 255, 255, 0.05); border-color: var(--hairline);
  color: var(--dim); letter-spacing: 0.14em;
}

/* ---------- gallery ---------- */
.gal { position: relative; }
.gal-main {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  min-height: 340px; display: grid; place-items: center; cursor: zoom-in;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255, 230, 0, 0.12), transparent 70%),
    linear-gradient(165deg, rgba(150, 110, 255, 0.14), rgba(12, 12, 16, 0.6) 48%, rgba(255, 138, 43, 0.12));
  border: 1px solid var(--hairline);
}
.gal-main .device { width: 176px; transition: transform 0.6s cubic-bezier(0.3, 0.8, 0.25, 1); }
.gal-main .stage::before, .gal-main .stage::after { display: none; }
/* min-height above is sized for the portrait device; a landscape photo would
   otherwise sit in a tall empty box */
.gal-main.has-photo { min-height: 0; padding: var(--space-2); }
.gal-main.has-photo .stage { width: 100%; }
.gal-main.has-photo .photo { max-height: min(52vh, 420px); border-radius: var(--radius-sm); }
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(10, 10, 12, 0.72); border: 1px solid rgba(255, 230, 0, 0.28);
  color: var(--yellow); font-size: 16px; transition: background 0.25s, transform 0.25s, border-color 0.25s;
}
.gal-nav:hover { background: rgba(255, 230, 0, 0.16); border-color: var(--yellow); transform: translateY(-50%) scale(1.1); }
.gal-prev { left: 10px; } .gal-next { right: 10px; }
.gal-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  padding: 6px 11px; border-radius: 100px; cursor: pointer;
  background: rgba(10, 10, 12, 0.72); border: 1px solid var(--hairline);
  color: var(--muted); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.25s, border-color 0.25s;
}
.gal-zoom:hover { color: var(--yellow); border-color: rgba(255, 230, 0, 0.45); }
.gal-view { position: absolute; left: 12px; top: 12px; z-index: 4; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

.thumbs { display: flex; gap: 8px; margin-top: 10px; }
.thumb {
  flex: 1; height: 62px; border-radius: 10px; cursor: pointer; padding: 0;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border: 1px solid var(--hairline);
  transition: border-color 0.25s, transform 0.25s;
}
.thumb:hover { transform: translateY(-2px); border-color: rgba(255, 230, 0, 0.45); }
.thumb.on { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255, 230, 0, 0.28); }
.thumb .device { width: 26px; pointer-events: none; }
.thumb .face { border-radius: 5px; box-shadow: none; }
.thumb .island { width: 9px; height: 3px; top: 3px; }
.thumb .cam { width: 12px; height: 12px; border-radius: 4px; top: 4px; left: 4px; padding: 2px; gap: 1px; }
.thumb .logo-dot { width: 6px; height: 6px; }
/* a photo thumb fills its tile - the aspect-ratio from .is-cover would
   otherwise fight the fixed 62px height and letterbox it */
.thumb .stage.is-photo, .thumb .photo { width: 100%; height: 100%; aspect-ratio: auto; }
.thumbs { flex-wrap: wrap; }
.thumbs .thumb { flex: 1 1 52px; }

/* lightbox */
.lb {
  /* the global margin reset kills a dialog's auto-centring — pin it the same
     way .pd does, or it sits in the top-left corner */
  margin: auto; inset: 0; position: fixed;
  width: min(760px, 94vw); padding: 0; border: none; background: none; overflow: visible;
}
.lb::backdrop { background: rgba(4, 4, 8, 0.9); backdrop-filter: blur(6px); }
.lb-inner {
  position: relative; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4);
  display: grid; place-items: center; min-height: min(74vh, 560px);
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgba(255, 230, 0, 0.14), transparent 70%),
    linear-gradient(165deg, rgba(150, 110, 255, 0.18), rgba(10, 10, 14, 0.94) 50%, rgba(255, 138, 43, 0.16));
  border: 1px solid rgba(255, 230, 0, 0.22);
}
.lb .device { width: min(300px, 46vw); }
.lb-inner.has-photo { padding: var(--space-4) var(--space-3); }
.lb-inner.has-photo .stage { width: 100%; }
.lb-inner.has-photo .photo { max-height: 74vh; border-radius: var(--radius-md); }
.lb[open] { animation: pdIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

.pd-main h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.pd-main .card-meta { margin-top: var(--space-2); }
.pd-main .health { margin-top: var(--space-3); max-width: 320px; }
.pd-price { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.pd-price .price { font-size: 2.1rem; }
.pd-price .price-was { display: inline; margin: 0; font-size: 1rem; }

.pd-block { margin-bottom: var(--space-4); }
/* admin-written blurb for this specific unit */
.pd-desc p {
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hairline);
  color: #d5d5cf; font-size: 13.6px; line-height: 1.7;
}
.pd-block h3, .pd-table h3 {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow);
}
.seal-dot {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(110, 231, 135, 0.14); border: 1px solid rgba(110, 231, 135, 0.45);
  color: var(--ok); font-size: 10px;
}
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 9px; }
.addon input { position: absolute; opacity: 0; pointer-events: none; }
.addon-box {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer;
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline); transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.addon-box:hover { border-color: rgba(255, 230, 0, 0.4); transform: translateY(-2px); }
.addon input:focus-visible + .addon-box { outline: 2px solid rgba(255, 230, 0, 0.6); outline-offset: 2px; }
.addon input:checked + .addon-box { border-color: rgba(255, 230, 0, 0.6); background: rgba(255, 230, 0, 0.08); }
.addon-ico { font-size: 15px; }
.addon-name { flex: 1; font-size: 12.6px; }
.addon-price { color: var(--yellow); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* total sits above the button */
.pd-buy { margin-top: var(--space-4); display: grid; gap: 10px; }
.pd-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: 13px 16px; border-radius: var(--radius-sm);
  background: rgba(255, 230, 0, 0.05); border: 1px solid rgba(255, 230, 0, 0.2);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.pd-total b {
  font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
/* A negotiable listing prints a phrase where a number would go. At the price's
   size it overflowed the row and collided with the call button on phones, so
   it is sized as the label it actually is. */
.pd-total.is-nego { justify-content: flex-start; }
.pd-total.is-nego b {
  font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.3; white-space: normal;
}
.pd-add { width: 100%; padding: 16px 30px; }

/* the seller's number replaces the old add-to-cart button */
.pd-call {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 24px; text-decoration: none;
}
.pd-call svg { width: 22px; height: 22px; flex: none; }
.pd-call-txt { display: grid; gap: 1px; text-align: left; }
.pd-call-txt b {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 800;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.pd-call-txt small {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75;
}

/* recommendations */
.recs { margin-top: var(--space-5); }
.recs h3 {
  margin-bottom: var(--space-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow);
}
.rec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.rec {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; text-align: left;
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline); color: var(--text);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.rec:hover { border-color: rgba(255, 230, 0, 0.45); transform: translateY(-3px); background: rgba(255, 230, 0, 0.06); }
.rec .device { width: 30px; pointer-events: none; }
.rec .stage.is-photo {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px; pointer-events: none;
}
.rec .stage.is-photo .photo { aspect-ratio: auto; height: 100%; }
.rec .face { border-radius: 6px; box-shadow: none; }
.rec .island { width: 10px; height: 3px; top: 3px; }
.rec-info { min-width: 0; }
.rec-name { font-family: var(--font-display); font-size: 12.4px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-price { margin-top: 2px; font-size: 12px; color: var(--yellow); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-note { margin-top: var(--space-3); font-size: 11.5px; color: var(--dim); line-height: 1.55; }

/* the two tables */
.pd-tables { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.pd-table {
  padding: var(--space-4); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--hairline);
}
.pd-sub { margin: -4px 0 var(--space-3); font-size: 11.5px; color: var(--muted); line-height: 1.55; max-width: 52ch; }
.pd-table table { width: 100%; border-collapse: collapse; }
.pd-table th, .pd-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; }
.pd-table tr:last-child th, .pd-table tr:last-child td { border-bottom: none; }
.pd-table th { font-weight: 600; font-size: 13.5px; color: var(--text); }
.pd-table th small { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--dim); }
.pd-table td { text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); letter-spacing: 0.02em; }
.fin { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.fin i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.3); }
.grade { padding: 4px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.g-pristine { background: rgba(110, 231, 135, 0.12); border: 1px solid rgba(110, 231, 135, 0.36); color: var(--ok); }
.g-minor    { background: rgba(212, 225, 87, 0.1);  border: 1px solid rgba(212, 225, 87, 0.34);  color: #d4e157; }
.g-light    { background: rgba(255, 215, 0, 0.1);   border: 1px solid rgba(255, 215, 0, 0.34);   color: var(--amber); }
.g-visible  { background: rgba(255, 149, 0, 0.1);   border: 1px solid rgba(255, 149, 0, 0.34);   color: var(--orange); }

@media (max-width: 860px) {
  /* must re-declare: .pd-grid.has-photo out-specifies the single-column rule
     and would keep the two-column layout on a phone */
  .pd-grid, .pd-grid.has-photo { grid-template-columns: 1fr; }
  .pd-tables { grid-template-columns: 1fr; }
  .pd-visual .device { width: 108px; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200;
  transform: translate(-50%, 120%); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 100px;
  background: rgba(18, 18, 20, 0.96); border: 1px solid rgba(255, 230, 0, 0.35);
  color: var(--text); font-size: 13.5px; font-weight: 500;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.35s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast::before { content: "✓"; color: var(--yellow); font-weight: 800; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* the compact nav row: BG/EN · logo · cart · ☰ */
  .cart-btn { width: 42px; height: 42px; border-radius: 12px; }
  .cart-btn svg { width: 21px; height: 21px; }
  .cart-count { top: -6px; right: -6px; min-width: 20px; height: 20px; font-size: 11px; }
}

@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-fab { display: inline-flex; }
  .filters {
    position: fixed; inset: 0 0 0 auto; z-index: 150; width: min(340px, 88vw);
    border-radius: 0; overflow-y: auto;
    /* clear the fixed nav so the heading and close button stay reachable */
    padding: 104px var(--space-4) var(--space-5);
    transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .filters.open { transform: none; }
  .filter-close { display: block; }
  .filters-head h2 { font-size: 1rem; }
}
@media (max-width: 640px) {
  .shop-hero { padding-top: 104px; }
  .trust-row { gap: var(--space-3) var(--space-4); }
  .trust-row li { font-size: 0.72rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: var(--space-2); }
  .card { padding: var(--space-2) var(--space-2) var(--space-3); }
  .device { width: 84px; }
  .card-name { font-size: 0.88rem; }
  /* stack price above the save chip so neither squeezes the other */
  .card-foot { flex-direction: column; align-items: flex-start; gap: 7px; }
  .price { font-size: 1.2rem; white-space: nowrap; }
  .price-was { display: inline-block; margin-top: 2px; }
  .save-chip { font-size: 10px; padding: 3px 8px; }
  .swatches { padding: 6px 8px; gap: 6px; }
  .sw { width: 26px; height: 17px; }
  .sw-name { font-size: 9.5px; }
  /* gallery on phones */
  .gal-main { min-height: 260px; }
  .gal-main .device { width: 132px; }
  .gal-nav { width: 44px; height: 44px; }   /* 44px touch target */
  .thumb { height: 54px; }
  .lb .device { width: min(240px, 56vw); }
  .lb-inner { min-height: 60vh; padding: var(--space-5) var(--space-3); }
  .rec-row { grid-template-columns: 1fr; }
  .add-btn { height: 42px; font-size: 11px; }
  .results-bar { gap: var(--space-2); }
  .sort-wrap { flex: 1; min-width: 0; }
  .select-wrap select { font-size: 16px; }   /* 16px stops iOS zooming on focus */
  .filter-fab { width: 100%; justify-content: center; padding: 14px 18px; }

  /* ---- the listing becomes a full-screen sheet you actually scroll ---- */
  .pd {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    margin: 0; border: none; border-radius: 0;
    padding: 56px 14px calc(112px + env(safe-area-inset-bottom));
  }
  .pd[open] { animation: pdFade 0.28s ease; }   /* no transform — the pinned bar depends on it */
  @keyframes pdFade { from { opacity: 0; } }
  .pd-close {
    position: fixed; top: 10px; right: 12px; z-index: 8;
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(18, 18, 22, 0.92); border-color: rgba(255, 230, 0, 0.28); color: var(--yellow);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .pd-grid { gap: var(--space-4); }
  .pd-visual { padding: var(--space-3) var(--space-2); }
  .pd-main .health { max-width: none; }
  .pd-tables, .recs { margin-top: var(--space-4); }
  .pd-table { padding: var(--space-3); }
  .pd-table th { font-size: 12.8px; }
  .pd-table td { font-size: 12.5px; }

  /* Price + contact stay pinned while you read the report and specs.
     Two rows on purpose: price and the messaging icons share the top, the
     phone number gets the full width underneath. Squeezing all four onto one
     line is what made them overlap once Viber and WhatsApp were added. */
  .pd-buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 8px; margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(9, 9, 11, 0.99), rgba(16, 16, 20, 0.96));
    border-top: 1px solid rgba(255, 230, 0, 0.18);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .pd-total {
    grid-column: 1; grid-row: 1;
    min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px;
    margin: 0; padding: 6px 10px; font-size: 9px; letter-spacing: 0.14em;
  }
  .pd-total b { font-size: 1.25rem; }
  .pd-total.is-nego b { font-size: 0.8rem; letter-spacing: 0.04em; }

  /* icon-only here: the colour already says which app it is, and the words
     cost the width that caused the collision */
  .pd-chans { grid-column: 2; grid-row: 1; gap: 8px; }
  .pd-chan { flex: none; width: 46px; height: 46px; padding: 0; }
  .pd-chan-txt { display: none; }

  .pd-call { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 11px 14px; }
  .pd-call svg { width: 19px; height: 19px; }
  .pd-call-txt b { font-size: 1.02rem; }
  .pd-call-txt small { font-size: 8.5px; letter-spacing: 0.08em; }
  .pd-note { margin-bottom: 4px; }

  /* The bar is fixed, so without this the last rows of the spec table sat
     underneath it and could not be scrolled into view. */
  .pd { padding-bottom: 150px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .card:hover .device, .card:focus-within .device { transform: none; }
  .shop-kicker, .shop-title .tw, .shop-sub, .trust-row, .card { opacity: 1; transform: none; filter: none; }
}

/* ---------- price by arrangement ---------- */
/* Sits where a number would, so a card with no price keeps the same rhythm as
   one that has it — but lighter, since it is a label and not a figure. */
.price.is-nego {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.01em;
  color: var(--amber); white-space: nowrap;
}
.pd-price .price.is-nego { font-size: 22px; }
.rec-price { white-space: nowrap; }

/* ---------- messaging channels ---------- */
.pd-chans { display: flex; gap: 10px; }
.pd-chan {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border: 0; text-decoration: none;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.pd-chan svg { width: 20px; height: 20px; flex: none; }
.pd-viber { background: #7360f2; color: #fff; }
.pd-viber:hover { background: #5d4bd4; }
.pd-wa { background: #25d366; color: #08301a; }
.pd-wa:hover { background: #1fb855; }

/* ---------- pinch-to-zoom in the fullscreen photo ---------- */
/* Hands the pinch gesture to the browser while leaving one-finger drags to
   the swipe handler. Without this the photo is inside a modal dialog whose
   scroll is locked, and a two-finger gesture has nowhere to go. */
.lb-inner img, .lb-inner .device { touch-action: pinch-zoom; }