/* PD V2 design system — BUILT 2026-05-26T20:46:54Z — v2.0.0-alpha — DO NOT EDIT (edit theme/ sources) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--surface);color:var(--text);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== tokens/_tokens.css ===== */
/* ============================================================================
   PD V2 — RAW DESIGN TOKENS  (single source of truth)
   Lifted verbatim from css/shared.css :root so V2 stays 1:1 with the live
   palette. These are the PRIMITIVES. Components must consume the SEMANTIC
   tokens in _themes.css, not these raw values directly (so light/dark works).
   ========================================================================= */
:root{
  /* surfaces — deep-graphite campaign (tonal ladder, not flat black) */
  --bg:#08080a;--bg2:#131318;--bg3:#1c1c22;--bg4:#26262d;
  --card:rgba(255,255,255,0.05);--card-solid:#16161b;--card-h:rgba(255,255,255,0.09);
  /* surfaces — pure black campaign */
  --teal:#ffffff;--teal-d:#ededed;--teal-dd:#d6d6d6;
  --teal-g1:rgba(255,255,255,0.05);--teal-g2:rgba(255,255,255,0.10);--teal-g3:rgba(255,255,255,0.18);
  /* neutrals */
  /* --grey-d: tertiary/faint text. Raised #5b5b60(2.96:1)→#8a8a90 to clear WCAG AA
     4.5:1 on the graphite ladder (incl. footer #131318 + charcoal bands) while
     staying clearly dimmer than --grey muted (#9a9a9e). 2026-06-01 P1 a11y. */
  --white:#ffffff;--grey:#9a9a9e;--grey-d:#8a8a90;--grey-dd:#2a2a2e;
  /* status */
  --red:#c0384e;--green:#3dd88a;
  /* borders — neutral white hairlines on black */
  --border:rgba(255,255,255,0.12);--border-l:rgba(255,255,255,0.26);
  /* messenger channels */
  --wa:#25D366;--wa-d:#1faa55;
  --signal:#3A76F0;--signal-d:#2e5fd0;
  --threema:#3FE669;--threema-d:#35c15a;
  /* radii */
  --r:12px;--rs:8px;--r-sm:6px;--r-pill:100px;
  /* spacing scale */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;
  /* buttons */
  /* --btn-h 42→44 (2026-06-01 P2 a11y): standard buttons clear the 44px Apple-HIG touch bar. --btn-h-sm left at 36 (compact actions; still ≥24px WCAG 2.5.8 AA) to avoid layout shift in dense rows. */
  --btn-h:44px;--btn-h-sm:36px;--btn-px:24px;--btn-px-sm:18px;--btn-fs:.85rem;--btn-fs-sm:.78rem;
  /* type families */
  --f:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',Arial,sans-serif;--fh:'Inter',sans-serif;--fm:'Fira Code',monospace;
  /* layout */
  --max:1380px;
}

/* ===== tokens/_themes.css ===== */
/* ============================================================================
   PD V2 — SEMANTIC THEME LAYER  (light/dark architecture)
   Components reference THESE tokens (--surface, --text, --accent, …), never the
   raw primitives. Swapping [data-theme] re-points the whole system.
   Dark is the shipped default; light is a STUB to be finalised in a later phase.
   ========================================================================= */

/* ── DARK (default) — maps semantics onto the existing live palette ───────── */
:root,
[data-theme="dark"]{
  --surface:        var(--bg);          /* page background        */
  --surface-2:      var(--bg2);         /* raised panels          */
  --surface-3:      var(--bg3);         /* deeper raised panels   */
  --surface-4:      var(--bg4);
  --surface-card:   var(--card);        /* glass card fill        */
  --surface-card-solid: var(--card-solid);
  --surface-card-hover: var(--card-h);

  --text:           var(--white);       /* primary text           */
  --text-muted:     var(--grey);        /* secondary text         */
  --text-faint:     var(--grey-d);      /* tertiary / disabled    */

  --accent:         var(--teal);        /* monochrome accent (white) */
  --accent-strong:  var(--teal-d);      /* accent hover           */
  --accent-deep:    var(--teal-dd);
  --accent-contrast:#000000;            /* text/icon ON accent    */
  --accent-glow:    rgba(255,255,255,.14);

  --border-c:       var(--border);      /* hairline border        */
  --border-strong:  var(--border-l);    /* emphasised border      */

  color-scheme: dark;
}

/* ── LIGHT (stub — architecture only, not production-final) ───────────────── */
[data-theme="light"]{
  --surface:        #f5f5f2;            /* warm editorial paper   */
  --surface-2:      #eceae4;
  --surface-3:      #e3e1da;
  --surface-4:      #d9d6cd;
  --surface-card:   rgba(255,255,255,.7);
  --surface-card-solid:#ffffff;
  --surface-card-hover: rgba(255,255,255,.92);

  --text:           #0a0a0a;            /* near-black ink         */
  --text-muted:     #57554f;
  --text-faint:     #6f6c64;            /* was #9a978f(2.67:1) → 4.80:1 on #f5f5f2 (AA) — 2026-06-01 P1 a11y */

  --accent:         #0a0a0a;            /* monochrome ink accent  */
  --accent-strong:  #000000;
  --accent-deep:    #000000;
  --accent-contrast:#ffffff;
  --accent-glow:    rgba(0,0,0,.10);

  --border-c:       rgba(10,10,10,.12);
  --border-strong:  rgba(10,10,10,.24);

  color-scheme: light;
}

/* ── OS-preference bridge ─────────────────────────────────────────────────
   Intentionally DISABLED while the light palette is a stub, so light-mode OS
   users are NOT force-switched off the shipped dark design. Enable (uncomment)
   only once the light theme above is finalised and component-audited.

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --surface:#f5f8f9; --surface-2:#eef2f4; --surface-3:#e5ebee; --surface-4:#dbe3e7;
    --surface-card:rgba(255,255,255,.72); --surface-card-solid:#ffffff; --surface-card-hover:rgba(255,255,255,.9);
    --text:#0c1922; --text-muted:#4a5a6a; --text-faint:#8a9aa8;
    --accent:var(--teal-d); --accent-strong:var(--teal-dd); --accent-deep:var(--teal-dd);
    --accent-contrast:#ffffff; --accent-glow:rgba(36,158,144,.18);
    --border-c:rgba(12,26,42,.10); --border-strong:rgba(12,26,42,.18);
    color-scheme:light;
  }
}
*/

/* ===== tokens/_typography.css ===== */
/* ============================================================================
   PD V2 — TYPOGRAPHY
   Fluid type scale (clamp) + base rules. Fonts: Sora (body), Inter (headings),
   Fira Code (mono) — matches the live <link> in inc/header.php.
   ========================================================================= */
:root{
  /* fluid scale — min .. max across the 360–1380px viewport band */
  --fs-xs:  clamp(.70rem, .68rem + .10vw, .78rem);
  --fs-sm:  clamp(.80rem, .77rem + .15vw, .90rem);
  --fs-base:clamp(.94rem, .90rem + .20vw, 1.02rem);
  --fs-md:  clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --fs-lg:  clamp(1.30rem, 1.15rem + .70vw, 1.75rem);
  --fs-xl:  clamp(1.75rem, 1.45rem + 1.40vw, 2.75rem);
  --fs-2xl: clamp(2.25rem, 1.70rem + 2.60vw, 4.00rem);
  --fs-3xl: clamp(2.75rem, 1.90rem + 4.00vw, 5.25rem);

  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.75;
  --tracking-tight:-.01em; --tracking-wide:.04em;
  --fw-light:300; --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
}

.pd{ font-family:var(--f); font-size:var(--fs-base); line-height:var(--lh-body); color:var(--text); }
.pd h1,.pd h2,.pd h3,.pd h4{ font-family:var(--fh); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--text); font-weight:var(--fw-bold); }
.pd h1{ font-size:var(--fs-3xl); font-weight:var(--fw-black); }
.pd h2{ font-size:var(--fs-2xl); }
.pd h3{ font-size:var(--fs-lg); }
.pd h4{ font-size:var(--fs-md); }
.pd p{ color:var(--text-muted); }
.pd small,.pd .text-sm{ font-size:var(--fs-sm); }
.pd code,.pd kbd,.pd .mono{ font-family:var(--fm); }
.pd a:not(.btn):not(.ncta):not(.ed-textlink){ color:inherit; text-decoration:none; }

/* utility type helpers */
.pd-eyebrow{ font-family:var(--f); font-size:var(--fs-xs); font-weight:var(--fw-semi); letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.pd-muted{ color:var(--text-muted); }
.pd-faint{ color:var(--text-faint); }
.pd-accent{ color:var(--accent); }

/* ===== tokens/_spacing.css ===== */
/* ============================================================================
   PD V2 — SPACING, LAYOUT & SECTION RHYTHM
   Reuses the live spacing scale (--sp-1..6) + container (--max).
   ========================================================================= */
:root{
  --space-1:var(--sp-1);   /* 8  */
  --space-2:var(--sp-2);   /* 16 */
  --space-3:var(--sp-3);   /* 24 */
  --space-4:var(--sp-4);   /* 32 */
  --space-5:var(--sp-5);   /* 48 */
  --space-6:var(--sp-6);   /* 64 */
  --space-7:clamp(64px,5vw,96px);
  --gutter:clamp(1.1rem,4vw,2.5rem);   /* matches nav .nw padding 0 2.5rem */
  --section-y:clamp(48px,7vw,112px);   /* vertical rhythm between sections   */
}

/* container — matches live .nw / --max */
.pd-container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.pd-container--wide{ max-width:1680px; }
.pd-container--narrow{ max-width:880px; }

/* vertical section rhythm */
.pd-section{ padding-block:var(--section-y); }
.pd-section--tight{ padding-block:var(--space-5); }

/* simple responsive auto-grid for card rows */
.pd-grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.pd-grid--2{ grid-template-columns:repeat(2,1fr); }
.pd-grid--3{ grid-template-columns:repeat(3,1fr); }
.pd-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .pd-grid--3,.pd-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .pd-grid--2,.pd-grid--3,.pd-grid--4{ grid-template-columns:1fr; } }

.pd-stack > * + *{ margin-top:var(--space-3); }
.pd-cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* ===== components/_buttons.css ===== */
/* ============================================================================
   PD V2 — BUTTON SYSTEM   (parity with live .btn, re-pointed to semantic tokens)
   Variants: .btn-t (primary teal) · .btn-o (outline) · .btn-ghost · .btn-red
             · .btn-wa (WhatsApp) · sizes .btn-sm / .btn-xs / .btn-lg
   ========================================================================= */
.btn{
  height:var(--btn-h); padding:0 var(--btn-px);
  border-radius:var(--rs);
  font-family:var(--f); font-size:var(--btn-fs); font-weight:var(--fw-bold); letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; background:transparent; color:var(--text);
  cursor:pointer; text-align:center; line-height:1; white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* primary — monochrome (Tesla/Apple): light fill on dark, dark text */
.btn-t{ background:var(--text); color:var(--surface); border-color:var(--text); font-weight:var(--fw-black); }
.btn-t:hover{ background:#fff; border-color:#fff; }
[data-theme="light"] .btn-t:hover{ background:#000; border-color:#000; }
.btn-t:active{ transform:scale(.98); }

/* outline / secondary */
.btn-o{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-o:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }

/* ghost */
.btn-ghost{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-ghost:hover{ background:var(--accent); color:var(--accent-contrast); }

/* destructive */
.btn-red{ background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 25%,transparent); }
.btn-red:hover{ background:color-mix(in srgb,var(--red) 25%,transparent); border-color:color-mix(in srgb,var(--red) 40%,transparent); }

/* WhatsApp */
.btn-wa{ background:var(--wa); color:#fff; border-color:var(--wa); font-weight:var(--fw-bold); }
.btn-wa:hover{ background:var(--wa-d); border-color:var(--wa-d); }
.btn-wa svg{ fill:#fff; }

/* sizes */
.btn-sm,.btn-xs{ height:var(--btn-h-sm); padding:0 var(--btn-px-sm); font-size:var(--btn-fs-sm); }
.btn-lg{ height:54px; padding:0 32px; font-size:.98rem; font-weight:var(--fw-black); letter-spacing:.02em; }
.btn-block{ display:flex; width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }

/* ===== components/_cards.css ===== */
/* ============================================================================
   PD V2 — CARD SYSTEM   (glass surface cards + product card + badges)
   ========================================================================= */

/* generic surface card — solid, flat, hairline (no glassmorphism) */
.pd-card{
  background:var(--surface-2);
  border:1px solid var(--border-c);
  border-radius:var(--r);
  padding:var(--space-3);
  transition:border-color .25s ease;
}
.pd-card--solid{ background:var(--surface-card-solid); }
.pd-card--pad-lg{ padding:var(--space-4); }
.pd-card:hover{ border-color:var(--border-strong); }
.pd-card--interactive:hover{ border-color:var(--accent); }

.pd-card__eyebrow{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-1); }
.pd-card__title{ font-family:var(--fh); font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text); }
.pd-card__body{ color:var(--text-muted); font-size:var(--fs-sm); margin-top:var(--space-1); }

/* product card — solid, flat, hairline (no glass, no float) */
.pd-pcard{
  display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--surface-2); border:1px solid var(--border-c); border-radius:var(--r);
  padding:var(--space-3); transition:border-color .3s ease;
}
.pd-pcard:hover{ border-color:var(--accent); }
.pd-pcard__media{ aspect-ratio:3/4; border-radius:var(--rs); overflow:hidden; background:var(--surface-2); display:grid; place-items:center; }
.pd-pcard__media img{ width:100%; height:100%; object-fit:cover; }
.pd-pcard__name{ font-family:var(--fh); font-weight:var(--fw-bold); font-size:var(--fs-md); color:var(--text); }
.pd-pcard__price{ display:flex; align-items:baseline; gap:.5rem; }
.pd-pcard__price b{ font-size:var(--fs-md); color:var(--text); }
.pd-pcard__price s{ color:var(--text-faint); font-size:var(--fs-sm); }
.pd-pcard__foot{ margin-top:auto; display:flex; gap:var(--space-1); }

/* badges / pills */
.pd-badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill); font-family:var(--f); font-size:var(--fs-xs); font-weight:var(--fw-semi); letter-spacing:.02em; line-height:1; }
.pd-badge--accent{ background:transparent; color:var(--text-muted); border:1px solid var(--border-strong); }
.pd-badge--stock{ color:var(--text-muted); }
.pd-badge--stock::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }
.pd-badge--muted{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border-c); }

/* ===== components/_nav.css ===== */
/* ============================================================================
   PD V2 — NAV / HEADER   (fixed, blurred, left links · right CTAs)
   Parity with live nav + .ncta messenger system, re-pointed to semantic tokens.
   ========================================================================= */
.pd-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--border-c); transition:.3s;
}
.pd-nav.scrolled{ background:var(--surface); border-bottom-color:var(--border-strong); }
.pd-nav__w{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; height:56px; }
.pd-nav__logo{ display:flex; align-items:center; gap:10px; }
.pd-nav__logo-name{ font-family:var(--fh); font-size:1.05rem; font-weight:var(--fw-bold); letter-spacing:-.01em; color:var(--text); }

.pd-nav__links{ display:flex; gap:1.2rem; align-items:center; list-style:none; margin-right:auto; margin-left:1.8rem; }
.pd-nav__links a:not(.btn):not(.ncta){ font-size:.78rem; font-weight:var(--fw-med); color:var(--text-muted); transition:.2s; letter-spacing:.01em; }
.pd-nav__links a:hover,.pd-nav__links a[aria-current="page"]{ color:var(--accent); }

/* unified messenger CTA — equal geometry, colour via variant */
.ncta{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--rs); font-family:var(--f); font-size:.74rem; font-weight:var(--fw-bold); letter-spacing:.02em; color:#fff; background:transparent; border:1px solid var(--border-c); transition:background .2s,border-color .2s,box-shadow .2s; line-height:1; white-space:nowrap; }
.ncta svg{ fill:currentColor; flex-shrink:0; }
.ncta:hover{ border-color:var(--accent); }
.ncta-wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.ncta-wa:hover{ background:var(--wa-d); border-color:var(--wa-d); }
.ncta-signal{ background:var(--signal); border-color:var(--signal); color:#fff; }
.ncta-signal:hover{ background:var(--signal-d); border-color:var(--signal-d); }
.ncta-threema{ background:var(--threema); border-color:var(--threema); color:#0a1822; }
.ncta-threema:hover{ background:var(--threema-d); border-color:var(--threema-d); }
.ncta-group{ display:inline-flex; align-items:center; gap:.5rem; list-style:none; }

/* hamburger toggle — hidden on desktop, shown via _mobile-menu.css */
.pd-nav__toggle{ display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:1px solid var(--border-c); border-radius:var(--rs); padding:0 10px; color:var(--text); cursor:pointer; font-size:1.1rem; }

/* ===== components/_mobile-menu.css ===== */
/* ============================================================================
   PD V2 — MOBILE MENU   (hamburger-driven nav drawer)
   Toggle: JS adds .open to .pd-nav__links (mirrors live .nlinks.open pattern).
   ========================================================================= */
@media(max-width:900px){
  .pd-nav__toggle{ display:inline-flex; align-items:center; }

  /* hide desktop link row until opened */
  .pd-nav__links{ display:none; margin:0; }
  .pd-nav__links.open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:56px; left:0; right:0;
    background:color-mix(in srgb,var(--surface) 98%,transparent);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border-strong);
    padding:1.5rem var(--gutter); gap:1rem;
    max-height:calc(100dvh - 56px); overflow-y:auto;
  }
  .pd-nav__links.open a{ font-size:1rem; padding:.35rem 0; width:100%; }

  /* CTA group stacks full-width inside the drawer */
  .pd-nav__links.open .ncta-group{ flex-direction:column; align-items:stretch; width:100%; gap:.6rem; }
  .pd-nav__links.open .ncta{ width:100%; height:44px; }   /* 44px = iOS touch target */
}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .pd-nav,.pd-nav__links.open{ transition:none; }
}

/* ===== components/_footer.css ===== */
/* ============================================================================
   PD V2 — FOOTER   (multi-column links + payment/trust strip + legal bar)
   Mirrors the live footer structure (Devices / Services / Guides / Connect).
   ========================================================================= */
.pd-footer{ background:var(--surface-2); border-top:1px solid var(--border-c); color:var(--text-muted); margin-top:var(--section-y); }
.pd-footer__w{ max-width:var(--max); margin:0 auto; padding:var(--space-6) var(--gutter) var(--space-4); display:grid; gap:var(--space-4); grid-template-columns:1.4fr repeat(4,1fr); }
@media(max-width:900px){ .pd-footer__w{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pd-footer__w{ grid-template-columns:1fr; } }

.pd-footer__brand{ font-family:var(--fh); font-size:1.1rem; font-weight:var(--fw-bold); color:var(--text); margin-bottom:var(--space-1); }
.pd-footer__col h4{ font-family:var(--fh); font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text); margin-bottom:var(--space-2); }
.pd-footer__col a{ display:block; font-size:var(--fs-sm); color:var(--text-muted); padding:.22rem 0; transition:color .2s; }
.pd-footer__col a:hover{ color:var(--accent); }

/* payment + trust strip */
.pd-footer__pay{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.55rem; padding:var(--space-3) var(--gutter) 0; border-top:1px solid var(--border-c); max-width:1180px; margin:0 auto; }
.pd-footer__pay span{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f); font-size:.7rem; font-weight:var(--fw-semi); color:var(--text-muted); background:var(--surface-3); border:1px solid var(--border-c); border-radius:var(--r-sm); padding:.4rem .7rem; letter-spacing:.02em; }
.pd-footer__pay svg{ width:13px; height:13px; }

/* legal bar */
.pd-footer__bot{ max-width:var(--max); margin:0 auto; padding:var(--space-3) var(--gutter); display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between; align-items:center; border-top:1px solid var(--border-c); font-size:var(--fs-xs); }
.pd-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pd-footer__legal a:hover{ color:var(--accent); }
.pd-footer__compliance{ text-align:center; font-size:var(--fs-xs); color:var(--text-faint); padding:0 var(--gutter) var(--space-3); }

/* ===== components/_gallery.css ===== */
/* ============================================================================
   PD V2 — PRODUCT GALLERY FOUNDATION
   Main image + thumbnail rail. JS swaps .pd-gallery__main src on thumb click
   (see theme/components-php/gallery.php + the wiring note there).
   ========================================================================= */
.pd-gallery{ display:grid; gap:var(--space-2); grid-template-columns:88px 1fr; }
@media(max-width:560px){ .pd-gallery{ grid-template-columns:1fr; } }

.pd-gallery__main{
  grid-column:2; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border-c);
  display:grid; place-items:center;
}
.pd-gallery__main img{ width:100%; height:100%; object-fit:cover; }

.pd-gallery__thumbs{
  grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:var(--space-1);
  max-height:520px; overflow-y:auto; scrollbar-width:thin;
}
@media(max-width:560px){
  .pd-gallery__thumbs{ grid-column:1; grid-row:2; flex-direction:row; max-height:none; overflow-x:auto; }
}
.pd-gallery__thumb{
  flex:0 0 auto; width:72px; aspect-ratio:1/1; border-radius:var(--rs); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border-c); cursor:pointer;
  transition:border-color .2s, opacity .2s; opacity:.7;
}
.pd-gallery__thumb:hover{ opacity:1; }
.pd-gallery__thumb[aria-selected="true"]{ border-color:var(--accent); opacity:1; box-shadow:0 0 0 1px var(--accent); }
.pd-gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-gallery__thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== components/_woo.css ===== */
/* ============================================================================
   PD V2 — HEADLESS WOOCOMMERCE COMPONENTS
   NOTE: This is NOT a wp-content theme template override. privacydevices.net
   renders Woo data via the Store API (/wp-json/wc/store/v1/...) in the custom
   PHP router. These styles cover the headless cart / checkout / price / stock
   UI the router builds. Canonical state stays in WooCommerce — never duplicate.
   ========================================================================= */

/* price + stock */
.pd-price{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--fh); }
.pd-price__now{ font-size:var(--fs-lg); font-weight:var(--fw-black); color:var(--text); }
.pd-price__was{ font-size:var(--fs-sm); color:var(--text-faint); text-decoration:line-through; }
.pd-price__cur{ font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.06em; }
.pd-price__save{ font-size:var(--fs-xs); color:var(--accent); font-weight:var(--fw-semi); }
.pd-stock{ font-size:var(--fs-sm); color:var(--green); display:inline-flex; align-items:center; gap:6px; }
.pd-stock--out{ color:var(--text-faint); }

/* quantity stepper */
.pd-qty{ display:inline-flex; align-items:center; border:1px solid var(--border-c); border-radius:var(--rs); overflow:hidden; }
.pd-qty button{ width:44px; height:44px; min-height:44px; background:var(--surface-2); border:0; color:var(--text); font-size:1.1rem; cursor:pointer; }
.pd-qty input{ width:48px; height:44px; text-align:center; background:transparent; border:0; color:var(--text); font-family:var(--f); -moz-appearance:textfield; }
.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }

/* cart line item */
.pd-cart-line{ display:grid; grid-template-columns:64px 1fr auto; gap:var(--space-2); align-items:center; padding:var(--space-2) 0; border-bottom:1px solid var(--border-c); }
.pd-cart-line__media{ width:64px; aspect-ratio:1/1; border-radius:var(--rs); overflow:hidden; background:var(--surface-2); }
.pd-cart-line__name{ font-weight:var(--fw-semi); color:var(--text); font-size:var(--fs-sm); }

/* order summary */
.pd-summary{ background:var(--surface-2); border:1px solid var(--border-c); border-radius:var(--r); padding:var(--space-3); }
.pd-summary__row{ display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-muted); padding:.3rem 0; }
.pd-summary__total{ display:flex; justify-content:space-between; font-family:var(--fh); font-weight:var(--fw-black); color:var(--text); font-size:var(--fs-md); padding-top:var(--space-2); margin-top:var(--space-1); border-top:1px solid var(--border-c); }

/* checkout payment options (BTCPay default · Stripe) — mirrors live checkout.js */
.pd-pay-opt{ display:flex; align-items:flex-start; gap:.7rem; padding:var(--space-2); border:1px solid var(--border-c); border-radius:var(--r); cursor:pointer; transition:border-color .2s, background .2s; }
.pd-pay-opt + .pd-pay-opt{ margin-top:var(--space-1); }
.pd-pay-opt.selected,.pd-pay-opt:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.pd-pay-opt__title{ font-weight:var(--fw-semi); color:var(--text); font-size:var(--fs-sm); }
.pd-pay-opt__desc{ font-size:var(--fs-xs); color:var(--text-muted); }

/* ── Cart icon in nav ──────────────────────────────────────────────────────── */
.pd-nav__cart{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--text); text-decoration:none; border-radius:8px; transition:background .2s; flex-shrink:0; }
.pd-nav__cart:hover{ background:var(--surface-2); }
.pd-nav__cart svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pd-nav__cart-count{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; background:var(--accent); color:#000; font-family:var(--f); font-size:10px; font-weight:700; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; pointer-events:none; line-height:1; }

/* ── Mini cart drawer ─────────────────────────────────────────────────────── */
.pd-cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(400px,100vw); background:var(--surface); border-left:1px solid var(--border-c); z-index:2000; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.pd-cart-drawer.open{ transform:none; }
.pd-cart-drawer__overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1999; opacity:0; pointer-events:none; transition:opacity .35s; }
.pd-cart-drawer__overlay.open{ opacity:1; pointer-events:auto; }
.pd-cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem; border-bottom:1px solid var(--border-c); }
.pd-cart-drawer__title{ font-family:var(--fh); font-weight:700; font-size:1rem; color:var(--text); }
.pd-cart-drawer__close{ background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:1.4rem; line-height:1; padding:4px; }
.pd-cart-drawer__body{ flex:1; overflow-y:auto; padding:1.2rem 1.6rem; display:flex; flex-direction:column; gap:1rem; }
.pd-cart-drawer__empty{ text-align:center; padding:3rem 1rem; color:var(--text-muted); font-size:var(--fs-sm); }
.pd-cart-item{ display:flex; gap:1rem; align-items:flex-start; padding-bottom:1rem; border-bottom:1px solid var(--border-c); }
.pd-cart-item__img{ width:56px; height:56px; flex-shrink:0; background:var(--surface-2); border-radius:8px; overflow:hidden; }
.pd-cart-item__img img{ width:100%; height:100%; object-fit:contain; }
.pd-cart-item__info{ flex:1; min-width:0; }
.pd-cart-item__name{ font-family:var(--fh); font-size:var(--fs-sm); font-weight:600; color:var(--text); line-height:1.3; }
.pd-cart-item__meta{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:.2rem; }
.pd-cart-item__price{ font-family:var(--fh); font-size:var(--fs-sm); font-weight:700; color:var(--text); white-space:nowrap; }
.pd-cart-item__remove{ background:none; border:none; cursor:pointer; color:var(--text-faint); font-size:1rem; padding:2px 4px; line-height:1; transition:color .2s; }
.pd-cart-item__remove:hover{ color:var(--text); }
.pd-cart-drawer__foot{ padding:1.4rem 1.6rem; border-top:1px solid var(--border-c); display:flex; flex-direction:column; gap:.8rem; }
.pd-cart-drawer__total{ display:flex; justify-content:space-between; font-family:var(--fh); font-weight:700; font-size:1rem; color:var(--text); }

/* ═══ Apple commerce pass — payment confidence (monochrome, truthful) ═══
   Shared by product / checkout / footer. Methods shown reflect what is
   ACTUALLY live: Visa · Mastercard · Amex (card via Stripe) + Bitcoin &
   Lightning (BTCPay). No Apple Pay / Google Pay (not wired). */
.pay-conf{ display:flex; flex-direction:column; gap:.55rem; }
.pay-conf__brands{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.pay-brand{ display:inline-flex; align-items:center; gap:.32rem; height:26px; padding:0 .6rem; border:1px solid var(--border-c); border-radius:7px; background:var(--surface-2); font-family:var(--fm); font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; white-space:nowrap; }
.pay-brand svg{ width:11px; height:11px; flex-shrink:0; }
.pay-brand--crypto{ color:var(--text); border-color:var(--border-strong); }
.pay-conf__note{ font-family:var(--f); font-size:var(--fs-xs); color:var(--text-faint); line-height:1.55; margin:0; }
.pay-conf__note strong{ color:var(--text-muted); font-weight:600; }