/* ============================================================================
   Product page (order-magnote.html) — 3D viewer, media tabs, swatches,
   Colors/Themes slider, order panel. Tokens only; matches app.css components.
   ============================================================================ */
.pdp{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:clamp(24px,4vw,52px); align-items:start; padding-block:var(--sp-6); }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }

/* ---- media tabs (segmented) ---- */
.gallery{ position:sticky; top:20px; }
@media (max-width:900px){ .gallery{ position:static; } }
.media-tabs{ display:inline-flex; gap:4px; padding:5px; margin-bottom:var(--sp-4);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); }
.media-tab{ padding:8px 18px; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; color:var(--muted);
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.media-tab.active{ color:var(--ink); background:var(--surface); box-shadow:var(--sh-1); }
.media-panel{ display:none; }
.media-panel.active{ display:block; animation:qcIn .3s var(--ease-out) both; }

/* ---- photos ---- */
.gallery .main{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line);
  box-shadow:var(--glass-sheen), var(--sh-2); display:grid; place-items:center; }
.gallery .main>img{ width:100%; height:100%; object-fit:contain; padding:6%; }
.photo-cap{ position:absolute; left:0; right:0; z-index:2; padding:14px 18px; font-size:.9rem; color:var(--ink-2);
  pointer-events:none; display:flex; align-items:center; gap:8px; }
.photo-cap.top{ top:0; background:linear-gradient(180deg, rgba(255,255,255,.85), transparent); }
.photo-cap.bottom{ bottom:0; justify-content:center; color:var(--muted); font-size:.82rem;
  background:linear-gradient(0deg, rgba(255,255,255,.85), transparent); }
.pill{ display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700;
  color:#fff; background:var(--grad-blue); box-shadow:var(--glow-blue); }

/* liquid-glass photo arrows — a glass bubble at rest that reveals its arrow on hover */
.ph-nav{ position:absolute; top:50%; z-index:3; width:46px; height:46px; transform:translateY(-50%);
  display:grid; place-items:center; border-radius:50%; color:var(--blue-700);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  box-shadow:var(--glass-sheen), var(--sh-2);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform var(--dur-3) var(--spring), box-shadow var(--dur-3) var(--ease), border-radius var(--dur-3) var(--ease); }
.ph-nav svg{ width:22px; height:22px; opacity:.55; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--spring); }
.ph-nav.prev{ left:14px; } .ph-nav.next{ right:14px; }
.ph-nav:hover{ box-shadow:var(--glass-sheen), var(--sh-3), var(--glow-blue); border-radius:16px; }
.ph-nav:hover svg{ opacity:1; }
.ph-nav.prev:hover{ transform:translateY(-50%) translateX(-3px); } .ph-nav.prev:hover svg{ transform:translateX(-2px); }
.ph-nav.next:hover{ transform:translateY(-50%) translateX(3px); } .ph-nav.next:hover svg{ transform:translateX(2px); }

.thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.thumbs button{ width:66px; height:66px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2);
  border:2px solid transparent; box-shadow:var(--sh-1); transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.thumbs button:hover{ transform:translateY(-2px); }
.thumbs button.active{ border-color:var(--blue-400); box-shadow:var(--glow-blue); }
.thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ---- 3D viewer ---- */
.viewer-wrap{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, var(--surface), var(--bg-2));
  border:1px solid var(--line); box-shadow:var(--glass-sheen), var(--sh-2); }
.viewer-wrap model-viewer, #mv{ width:100%; height:100%; background:transparent; --poster-color:transparent; }
.viewer-hint{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2;
  font:var(--t-caption); color:var(--muted); background:var(--glass-bg-strong); padding:6px 14px; border-radius:var(--r-pill);
  border:1px solid var(--glass-border); box-shadow:var(--sh-1); transition:opacity var(--dur-3) var(--ease); }
.viewer-controls{ position:absolute; left:0; right:0; bottom:16px; z-index:3; display:flex; justify-content:center; gap:10px; pointer-events:none; }
.viewer-controls .ctx{ pointer-events:auto; opacity:0; transform:translateY(8px); padding:9px 18px; font-size:.88rem;
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--spring); }
.viewer-controls .ctx.show{ opacity:1; transform:none; }
.media-placeholder{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:24px; color:var(--muted); background:var(--surface); }
.media-placeholder strong{ color:var(--ink); }
.media-placeholder code{ font:var(--t-small); font-family:var(--font-mono); background:var(--bg-2); padding:2px 6px; border-radius:6px; }

/* ---- hotspots ---- */
.hotspot{ --sz:26px; position:relative; width:var(--sz); height:var(--sz); border-radius:50%; display:grid; place-items:center;
  font-size:.78rem; font-weight:700; color:#fff; background:var(--grad-blue);
  border:2px solid #fff; box-shadow:var(--glow-blue), var(--sh-2); cursor:pointer;
  transition:transform var(--dur-2) var(--spring); }
/* Bigger invisible hit area on touch devices (keeps the 26px visual dot) — ≥44px target */
@media (pointer:coarse){ .hotspot::before{ content:""; position:absolute; inset:-9px; border-radius:50%; } }
.hotspot:hover{ transform:scale(1.15); }
.hotspot[slot="hotspot-mag"]{ background:linear-gradient(135deg,#9aa0aa,#5b626e); }
.hs-card{ position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(6px); width:230px;
  padding:14px 16px; border-radius:var(--r-md); text-align:left; opacity:0; visibility:hidden; pointer-events:none; z-index:5;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:var(--glass-sheen), var(--sh-3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--spring); }
.hotspot:hover .hs-card, .hotspot:focus-visible .hs-card, .hotspot.show .hs-card{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hs-card .tag{ display:inline-block; font:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--blue-600); margin-bottom:4px; }
.hs-card .t{ font-weight:700; color:var(--ink); margin-bottom:4px; }
.hs-card .f{ font-size:.82rem; color:var(--ink-2); line-height:1.5; }

/* ---- order panel ---- */
.info h1{ font:var(--t-h2); letter-spacing:var(--tracking-tight); margin-bottom:6px; }
.price-live{ font-size:1.7rem; font-weight:700; color:var(--blue-700); }
.unit-note{ color:var(--muted); font-size:.9rem; margin:2px 0 var(--sp-4); }
.option-label{ display:block; font:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--muted); margin:var(--sp-4) 0 var(--sp-3); }
.option-label strong{ color:var(--ink); text-transform:none; letter-spacing:0; font-size:.95rem; }

/* Colors / Themes segmented slider */
.ct-slider{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:5px; margin-bottom:var(--sp-2);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); }
.ct-thumb{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--sh-1); transition:transform var(--dur-3) var(--spring); }
.ct-slider.themes .ct-thumb{ transform:translateX(100%); }
.ct-seg{ position:relative; z-index:1; padding:9px 0; font-weight:600; font-size:.9rem; color:var(--muted);
  transition:color var(--dur-2) var(--ease); }
.ct-seg.active{ color:var(--ink); }

/* swatches — each a mini 3D MAGNOTE */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:12px; margin-top:6px; }
.color-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 10px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.color-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.color-card[aria-pressed="true"]{ border-color:var(--blue-400); box-shadow:var(--glow-blue); }
.mag-chip{ width:100%; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, var(--surface), var(--bg-2)); display:grid; place-items:center; }
.mag-chip svg{ width:82%; height:auto; filter:drop-shadow(0 5px 12px rgba(16,19,26,.14)); }
.pills{ display:flex; gap:5px; }
.pill-dot{ width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.cc-name{ font-size:.82rem; font-weight:600; color:var(--ink-2); text-align:center; }

.themes-soon{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px;
  border-radius:var(--r-md); color:var(--ink-2);
  background:var(--iglass-bg); border:1px solid var(--iglass-border); box-shadow:var(--glass-sheen), var(--sh-1); }
.themes-soon strong{ color:var(--ink); }
.themes-soon svg{ color:var(--blue-600); }
.themes-soon a{ color:var(--blue-600); font-weight:600; }

/* quantity input (app.css styles the buttons; style the numeric input) */
.qty input{ width:56px; text-align:center; border:0; border-inline:1px solid var(--line-strong); border-radius:0;
  padding:8px 0; font-weight:600; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.buy-now{ margin-top:var(--sp-4); }
.deliver-note{ display:flex; align-items:flex-start; gap:8px; margin-top:var(--sp-4); font-size:.85rem; color:var(--muted); }
.deliver-note svg{ flex:0 0 auto; color:var(--blue-500); margin-top:2px; }
.deliver-note a{ color:var(--blue-600); }
.desc{ margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--line); color:var(--ink-2); line-height:1.7; }

/* ---- bundle / quantity savings callout (in the order panel) ---- */
.bundle{ display:flex; align-items:center; gap:12px; margin-top:var(--sp-4); padding:13px 16px; border-radius:var(--r-md);
  background:var(--iglass-bg); border:1px solid var(--iglass-border); box-shadow:var(--glass-sheen), var(--sh-1);
  font-size:.9rem; color:var(--ivory-ink); }
.bundle svg{ width:22px; height:22px; color:var(--blue-600); flex:0 0 auto; }
.bundle a{ color:var(--blue-700); font-weight:600; }

/* ---- "How it works" 3-step ---- */
.howto{ margin-top:var(--sp-8); }
.howto h2{ text-align:center; margin-bottom:var(--sp-2); }
.howto .lead{ text-align:center; margin-inline:auto; }
.howto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-5); }
@media (max-width:720px){ .howto-grid{ grid-template-columns:1fr; } }
.howto-step{ padding:22px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.howto-step .step-n{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff;
  background:var(--grad-blue); box-shadow:var(--glow-blue); margin-bottom:14px; }
.howto-step h3{ font-size:1.05rem; margin-bottom:6px; }
.howto-step p{ font-size:.9rem; color:var(--muted); }

/* ---- product FAQ accordion ---- */
.pfaq{ margin:var(--sp-8) auto 0; max-width:var(--maxw-narrow); }
.pfaq h2{ text-align:center; margin-bottom:var(--sp-4); }
.pfaq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); overflow:hidden; }
.pfaq details[open]{ box-shadow:var(--sh-1); }
.pfaq summary{ list-style:none; cursor:pointer; padding:15px 18px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pfaq summary::-webkit-details-marker{ display:none; }
.pfaq summary::after{ content:"+"; color:var(--blue-500); font-size:1.35rem; font-weight:400; transition:transform var(--dur-2) var(--spring); }
.pfaq details[open] summary::after{ transform:rotate(45deg); }
.pfaq .a{ padding:0 18px 16px; color:var(--ink-2); font-size:.92rem; line-height:1.6; }
.pfaq .a a{ color:var(--blue-600); }