/* ============================================================
   Officine Cosmeceutiche — shared design system
   3 temi via body class: .dir-a (Atelier) .dir-b (Naturale) .dir-c (Pro Dark)
   ============================================================ */

:root{
  /* brand palette */
  --bg: oklch(97% 0.012 78);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(98.5% 0.01 80);
  --fg: oklch(30% 0.018 55);
  --muted: oklch(52% 0.018 60);
  --border: oklch(90% 0.012 78);
  --gold: oklch(71% 0.12 82);
  --gold-deep: oklch(58% 0.11 70);
  --cta: oklch(67% 0.15 52);
  --cta-deep: oklch(60% 0.15 48);
  --sale: oklch(52% 0.18 28);
  --brown: oklch(38% 0.022 50);
  --sage: oklch(62% 0.05 145);
  --ok: oklch(60% 0.12 150);
  --warn: oklch(72% 0.13 75);

  /* type */
  --display: 'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --body: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* shape */
  --r: 14px;
  --r-sm: 10px;
  --r-lg: 22px;
  --shadow: 0 1px 2px oklch(30% 0.02 60/.05), 0 8px 24px oklch(30% 0.02 60/.06);
  --shadow-lg: 0 12px 40px oklch(30% 0.02 60/.12);
  --maxw: 1200px;
  --header-h: 68px;
}

/* ---------- theme: A Atelier (default light editorial) ---------- */
.dir-a{ --bg: oklch(97.5% 0.012 80); --r:12px; --r-lg:18px; }

/* ---------- theme: B Naturale (warm, sage secondary, rounder) ---------- */
.dir-b{
  --bg: oklch(96.5% 0.018 95);
  --surface-2: oklch(97% 0.02 120);
  --accent2: var(--sage);
  --r: 18px; --r-sm:14px; --r-lg: 28px;
}

/* ---------- theme: C Pro Dark ---------- */
.dir-c{
  --bg: oklch(22% 0.012 60);
  --surface: oklch(27% 0.014 60);
  --surface-2: oklch(31% 0.016 62);
  --fg: oklch(95% 0.01 80);
  --muted: oklch(74% 0.02 75);
  --border: oklch(36% 0.016 62);
  --brown: oklch(18% 0.01 60);
  --shadow: 0 1px 2px oklch(0% 0 0/.3), 0 10px 30px oklch(0% 0 0/.35);
  --shadow-lg: 0 18px 50px oklch(0% 0 0/.5);
  --r: 12px;
}

/* ---------- theme: D Editoriale (boutique magazine — Pawsome-inspired, brand-fedele) ---------- */
.dir-d{
  --bg: oklch(96.5% 0.006 82);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.6% 0.008 82);
  --fg: oklch(26% 0.018 55);
  --muted: oklch(50% 0.016 60);
  --border: oklch(91% 0.008 82);
  --ink: oklch(27% 0.02 58);          /* near-black brand brown per i pulsanti "Pawsome" */
  --display: 'Playfair Display','Cormorant Garamond',Georgia,serif;
  --r: 16px; --r-sm: 12px; --r-lg: 28px;
  --shadow: 0 1px 2px oklch(30% .02 60/.05), 0 16px 44px oklch(30% .02 60/.07);
}
.dir-d h1,.dir-d h2,.dir-d h3,.dir-d h4{font-weight:500;letter-spacing:-.02em}
.dir-d .btn--cta{background:var(--ink);color:#fff}
.dir-d .btn--cta:hover{background:oklch(20% .02 58)}
.dir-d .card{padding:14px}
.dir-d .card:hover{border-color:color-mix(in oklab,var(--ink) 22%,var(--border))}
.dir-d .card__line,.dir-d .eyebrow{color:var(--muted)}
.dir-d .card__name{font-weight:500}
.dir-d .nav__links a{text-transform:none;letter-spacing:0;font-weight:500;font-size:14px}
.dir-d .nav__links a.active::after{background:var(--ink)}
.dir-d .chip.active,.dir-d .chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.dir-d .variant.active{border-color:var(--ink);background:color-mix(in oklab,var(--ink) 10%,var(--surface))}

/* ===================== Direction E · Boutique luxury (isp. Haven & Hound) ===================== */
.dir-e{
  --bg: oklch(96.6% 0.012 92);          /* cream */
  --surface: oklch(99.2% 0.006 92);
  --surface-2: oklch(93.6% 0.016 96);
  --fg: oklch(27% 0.03 150);            /* forest ink */
  --muted: oklch(45% 0.022 140);
  --border: oklch(87% 0.018 92);
  --forest: oklch(27% 0.03 150);
  --forest-2: oklch(33% 0.035 152);
  --display: 'Playfair Display','Cormorant Garamond',Georgia,serif;
  --r: 16px; --r-sm: 12px; --r-lg: 26px;
  --shadow: 0 1px 2px oklch(27% .03 150/.05), 0 18px 48px oklch(27% .03 150/.08);
}
.dir-e h1,.dir-e h2,.dir-e h3,.dir-e h4{font-weight:500;letter-spacing:-.01em}
.dir-e .eyebrow{color:var(--gold-deep);letter-spacing:.2em}
.dir-e .btn--cta{background:var(--forest);color:oklch(96.6% .012 92);border-radius:999px}
.dir-e .btn--cta:hover{background:var(--forest-2)}
.dir-e .btn--ghost,.dir-e .btn--gold{border-radius:999px}
.dir-e .card{border-radius:22px;padding:14px}
.dir-e .card:hover{border-color:color-mix(in oklab,var(--gold) 55%,var(--border))}
.dir-e .card__name{font-weight:500}
.dir-e .chip{border-radius:999px}
.dir-e .chip.active,.dir-e .chip:hover{background:var(--forest);border-color:var(--forest);color:oklch(96.6% .012 92)}
.dir-e .cart-pill{background:var(--forest);color:oklch(96.6% .012 92)}
.dir-e .nav__links a{text-transform:none;letter-spacing:.03em;font-weight:500;font-size:14px}
.dir-e .nav__links a.active::after{background:var(--gold)}
.dir-e .variant.active{border-color:var(--forest);background:color-mix(in oklab,var(--forest) 10%,var(--surface))}
.dir-e .site-header{border-bottom:1px solid color-mix(in oklab,var(--forest) 14%,transparent)}
.dir-e .site-footer{background:var(--forest)}
.dir-e .pill--ok{background:color-mix(in oklab,var(--forest) 12%,var(--surface));color:var(--forest)}

/* ===================== Direction F · Luce (luminosa, pura, ariosa — NO dark) ===================== */
.dir-f{
  --bg: oklch(98.6% 0.008 225);          /* near-white, soffio di cielo */
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.4% 0.013 222);
  --fg: oklch(33% 0.022 250);
  --muted: oklch(55% 0.016 245);
  --border: oklch(92.5% 0.01 225);
  --sky: oklch(80% 0.072 225);           /* luce cielo soffusa */
  --sky-deep: oklch(64% 0.105 232);
  --display: 'Cormorant Garamond','Playfair Display',Georgia,serif;
  --r: 18px; --r-sm: 14px; --r-lg: 32px;
  --shadow: 0 1px 2px oklch(60% .05 235/.05), 0 22px 55px oklch(62% .07 235/.12);
  --shadow-lg: 0 30px 72px oklch(62% .08 235/.18);
}
.dir-f h1,.dir-f h2,.dir-f h3,.dir-f h4{font-weight:500;letter-spacing:-.015em}
.dir-f .eyebrow{color:var(--sky-deep);letter-spacing:.22em}
.dir-f .btn--cta{background:var(--gold-deep);color:#fff;border-radius:999px}
.dir-f .btn--cta:hover{background:var(--gold);color:oklch(28% .03 60)}
.dir-f .btn--ghost{border-radius:999px;border-color:color-mix(in oklab,var(--sky) 60%,var(--border))}
.dir-f .btn--ghost:hover{border-color:var(--sky-deep);color:var(--sky-deep)}
.dir-f .card{border-radius:26px;padding:14px;border-color:color-mix(in oklab,var(--sky) 18%,var(--border))}
.dir-f .card:hover{border-color:color-mix(in oklab,var(--sky) 55%,var(--border))}
.dir-f .chip{border-radius:999px}
.dir-f .chip.active,.dir-f .chip:hover{background:var(--sky-deep);border-color:var(--sky-deep);color:#fff}
.dir-f .cart-pill{background:var(--gold)}
.dir-f .nav__links a{text-transform:none;letter-spacing:.02em;font-weight:600;font-size:14px}
.dir-f .nav__links a:hover{color:var(--sky-deep)}
.dir-f .nav__links a.active::after{background:var(--sky)}
.dir-f .variant.active{border-color:var(--sky-deep);background:color-mix(in oklab,var(--sky) 16%,var(--surface))}
.dir-f .site-header{background:color-mix(in oklab,var(--bg) 78%,transparent)}
.dir-f .pill--ok{background:color-mix(in oklab,var(--sky) 18%,var(--surface));color:var(--sky-deep)}

/* ===================== Direction G · Tenerezza (calda, luminosa, affettuosa — NO dark) ===================== */
.dir-g{
  --bg: oklch(98.2% 0.014 72);           /* crema luminosa */
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.2% 0.02 52);
  --fg: oklch(33% 0.03 38);
  --muted: oklch(55% 0.024 45);
  --border: oklch(92% 0.014 55);
  --blush: oklch(79% 0.085 30);          /* corallo morbido — "amore" */
  --blush-deep: oklch(63% 0.135 31);
  --display: 'Quicksand','Playfair Display',sans-serif;
  --r: 22px; --r-sm: 16px; --r-lg: 34px;
  --shadow: 0 1px 2px oklch(60% .06 40/.06), 0 22px 55px oklch(62% .10 40/.13);
  --shadow-lg: 0 30px 72px oklch(60% .12 40/.18);
}
.dir-g h1,.dir-g h2,.dir-g h3,.dir-g h4{font-weight:600;letter-spacing:-.01em}
.dir-g .eyebrow{color:var(--blush-deep);letter-spacing:.16em}
.dir-g .btn{border-radius:999px}
.dir-g .btn--cta{background:var(--blush-deep);color:#fff}
.dir-g .btn--cta:hover{background:var(--blush);color:oklch(28% .04 35)}
.dir-g .btn--ghost{border-color:color-mix(in oklab,var(--blush) 55%,var(--border))}
.dir-g .btn--ghost:hover{border-color:var(--blush-deep);color:var(--blush-deep)}
.dir-g .card{border-radius:28px;padding:14px}
.dir-g .card:hover{border-color:color-mix(in oklab,var(--blush) 50%,var(--border))}
.dir-g .chip{border-radius:999px}
.dir-g .chip.active,.dir-g .chip:hover{background:var(--blush-deep);border-color:var(--blush-deep);color:#fff}
.dir-g .cart-pill{background:var(--blush-deep);color:#fff}
.dir-g .cart-pill .bubble{background:#fff;color:var(--blush-deep)}
.dir-g .nav__links a{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:14px}
.dir-g .nav__links a:hover{color:var(--blush-deep)}
.dir-g .nav__links a.active::after{background:var(--blush)}
.dir-g .variant.active{border-color:var(--blush-deep);background:color-mix(in oklab,var(--blush) 16%,var(--surface))}
.dir-g .pill--ok{background:color-mix(in oklab,var(--blush) 16%,var(--surface));color:var(--blush-deep)}

/* ===================== base ===================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,7vw,64px)}
h2{font-size:clamp(26px,4.5vw,42px)}
h3{font-size:clamp(19px,3vw,26px)}
p{margin:0;text-wrap:pretty}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.muted{color:var(--muted)}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.price--old{color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:8px}
.price--sale{color:var(--sale)}
.section{padding:clamp(44px,8vw,88px) 0}
.section--tight{padding:clamp(28px,5vw,52px) 0}
.center{text-align:center}
.lead{font-size:clamp(16px,2.4vw,19px);color:var(--muted);max-width:60ch}

/* ===================== buttons ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:15px;line-height:1;transition:.18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--cta{background:var(--cta);color:#fff}
.btn--cta:hover{background:var(--cta-deep)}
.btn--gold{background:var(--gold);color:oklch(28% 0.03 60)}
.btn--gold:hover{background:var(--gold-deep);color:#fff}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--fg)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn--block{width:100%}
.btn--lg{padding:16px 30px;font-size:16px}
.btn--sm{padding:9px 14px;font-size:13px}

/* ===================== header ===================== */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.dir-c .site-header{background:color-mix(in oklab,var(--brown) 78%,transparent)}
.nav{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.02em;line-height:1}
.brand__name small{display:block;font-size:9px;letter-spacing:.34em;color:var(--muted);font-family:var(--mono);margin-top:2px}
.nav__links{display:none;gap:26px;align-items:center}
.nav__links a{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);position:relative;padding:4px 0}
.nav__links a:hover{color:var(--gold-deep)}
.nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}
.nav__actions{display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:999px;border:1px solid transparent;background:transparent;
  display:grid;place-items:center;color:var(--fg)}
.icon-btn:hover{background:var(--surface-2)}
.cart-pill{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:oklch(28% 0.03 60);
  padding:7px 8px 7px 14px;border-radius:999px;font-weight:600;font-size:13px}
.cart-pill .bubble{background:oklch(28% 0.03 60);color:#fff;min-width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;font-size:12px;font-family:var(--mono)}
.hamburger{display:grid}
@media(min-width:880px){.nav__links{display:flex}.hamburger{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer[aria-hidden="false"]{visibility:visible}
.drawer__scrim{position:absolute;inset:0;background:oklch(20% 0.02 60/.45);opacity:0;transition:.25s}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);background:var(--surface);
  transform:translateX(100%);transition:.28s cubic-bezier(.4,0,.2,1);padding:22px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:6px}
.drawer[aria-hidden="false"] .drawer__scrim{opacity:1}
.drawer[aria-hidden="false"] .drawer__panel{transform:none}
.drawer__panel a{padding:14px 8px;border-bottom:1px solid var(--border);font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* ===================== product illustration ===================== */
.thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--surface));
  display:grid;place-items:center;border:1px solid var(--border)}
.thumb svg{width:62%;height:62%}
.thumb__paws{position:absolute;inset:0;opacity:.5;pointer-events:none}
/* foto reale prodotto: riempie la thumb su fondo bianco neutro (vale anche per dir-c scura) */
.thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7%;z-index:1;display:block}
.thumb:has(.thumb__img){background:#fff;border-color:color-mix(in oklab,var(--border) 70%,#0000)}
.thumb:has(.thumb__img) .thumb__paws,
.thumb:has(.thumb__img) > svg:not(.thumb__paws){display:none}
.badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--sale);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;letter-spacing:.02em}
.badge--line{left:auto;right:10px;background:var(--gold);color:oklch(28% 0.03 60)}

/* ===================== product card ===================== */
.grid{display:grid;gap:16px}
.grid--products{grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.grid--products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid--products{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px;
  display:flex;flex-direction:column;transition:.2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:color-mix(in oklab,var(--gold) 50%,var(--border))}
.card__line{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:12px 2px 4px}
.card__name{font-family:var(--display);font-size:18px;font-weight:600;margin:0 2px 6px;line-height:1.15}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 2px 2px}
.card__add{flex:none}

/* horizontal rail */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 -20px;padding-inline:20px}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.rail>*{flex:0 0 min(72vw,260px);scroll-snap-align:start}

/* ===================== sections / hero ===================== */
.hero{position:relative;overflow:hidden}
.kicker-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.divider{height:1px;background:var(--border);border:0;margin:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{flex:1 1 auto}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.stat__n{font-family:var(--display);font-size:clamp(30px,7vw,52px);font-weight:600;color:var(--gold-deep);line-height:1}
.stat__l{font-size:12px;color:var(--muted);margin-top:6px}

/* feature trio */
.trio{display:grid;gap:16px}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}

/* 3-up split (linee, ecc.) — primitivo condiviso così non si rompe per pagina */
.split{display:grid;gap:18px}
@media(min-width:820px){.split{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.feature .ico{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--gold-deep);margin-bottom:14px}

/* category chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
.chip.active,.chip:hover{background:var(--gold);border-color:var(--gold);color:oklch(28% 0.03 60)}

/* ===================== footer ===================== */
.site-footer{background:var(--brown);color:oklch(92% 0.01 80);margin-top:40px}
.dir-c .site-footer{background:oklch(15% 0.008 60)}
.footer__grid{display:grid;gap:30px;grid-template-columns:1fr;padding:48px 0 24px}
@media(min-width:720px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__grid h4{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.footer__grid a{display:block;padding:6px 0;color:oklch(85% 0.01 80);font-size:14px}
.footer__grid a:hover{color:#fff}
.footer__bar{border-top:1px solid oklch(100% 0 0/.12);padding:16px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:oklch(78% 0.01 80)}

/* ===================== forms ===================== */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.input{width:100%;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--fg);font:inherit}
.input:focus{outline:2px solid color-mix(in oklab,var(--gold) 60%,transparent);outline-offset:1px;border-color:var(--gold)}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.qty button{width:38px;height:38px;background:transparent;color:var(--fg);font-size:18px;display:grid;place-items:center}
.qty button:hover{background:var(--surface-2)}
.qty input{width:40px;text-align:center;border:0;background:transparent;font-family:var(--mono);color:var(--fg);font-weight:600}

/* ===================== cart ===================== */
.cart-layout{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:920px){.cart-layout{grid-template-columns:1.6fr 1fr;align-items:start}}
.cart-item{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cart-item .thumb{aspect-ratio:1;border-radius:var(--r-sm)}
.cart-item__top{display:flex;justify-content:space-between;gap:10px}
.cart-item__name{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.1}
.cart-item__ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;position:sticky;top:84px}
.summary__row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px}
.summary__row--total{border-top:1px solid var(--border);margin-top:6px;padding-top:14px;font-size:18px;font-weight:700}
.pay-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pay-row span{flex:1;min-width:64px;text-align:center;border:1px solid var(--border);border-radius:8px;padding:9px 4px;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2)}
.link-x{background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;padding:0}
.link-x:hover{color:var(--sale)}

/* ===================== product detail ===================== */
.pdp{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:920px){.pdp{grid-template-columns:1.05fr 1fr;gap:48px}}
.pdp__media .thumb{border-radius:var(--r-lg)}
.pdp__gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pdp__gallery .thumb{aspect-ratio:1;cursor:pointer}
.pdp__gallery .thumb.active{border-color:var(--gold);border-width:2px}
.variants{display:flex;gap:8px;flex-wrap:wrap}
.variant{padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;color:var(--muted)}
.variant.active{border-color:var(--gold);color:var(--fg);background:color-mix(in oklab,var(--gold) 14%,var(--surface))}
.acc{border-top:1px solid var(--border)}
.acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 2px;background:none;border:0;color:var(--fg);font-weight:600;font-size:15px;text-align:left}
.acc__b{max-height:0;overflow:hidden;transition:.3s;color:var(--muted);font-size:14px}
.acc__b p{padding:0 2px 16px}
.acc.open .acc__b{max-height:280px}
.acc.open .acc__h .chev{transform:rotate(45deg)}

/* ===================== toast ===================== */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:80;
  background:var(--fg);color:var(--bg);padding:13px 18px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.3s;display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;translate:-50% -6px}

/* ===================== badges/pills ===================== */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.pill--ok{background:color-mix(in oklab,var(--ok) 16%,transparent);color:var(--ok)}

/* trust bar */
.trust{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:14px 0}
.trust::-webkit-scrollbar{display:none}
.trust span{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}

/* utilities */
.stack-sm>*+*{margin-top:8px}
.stack>*+*{margin-top:16px}
.flex{display:flex;gap:12px;align-items:center}
.wrap{flex-wrap:wrap}
.hide-m{display:none}
@media(min-width:880px){.hide-m{display:revert}.hide-d{display:none}}
.breadcrumb{font-size:13px;color:var(--muted);padding:14px 0}
.breadcrumb a:hover{color:var(--gold-deep)}