/* =====================================================================
   D'Milko storefront — stylesheet
   1. Tokens        5. Hero & home sections
   2. Reset/base    6. Product grid & cards
   3. Buttons       7. Product detail
   4. Header/nav    8. Cart, checkout, forms, footer, responsive
   ===================================================================== */

/* ------------------------------ 1. Tokens ---------------------------- */
:root {
  --cream: #fdf7ec;
  --cream-deep: #f6ecd9;
  --paper: #fffdf8;
  --ink: #2b1d10;
  --ink-soft: #6a5843;
  --ink-faint: #9b8a75;
  --gold: #b87514;
  --gold-bright: #d99a2b;
  --gold-pale: #f7e9cd;
  --green: #2f5d3a;
  --green-pale: #e7efe7;
  --red: #a8382b;
  --line: #e8dcc6;
  --studio: #fcf2e8;          /* the flat backdrop in every pack shot */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(43, 29, 16, .06), 0 2px 8px rgba(43, 29, 16, .05);
  --shadow-md: 0 4px 12px rgba(43, 29, 16, .07), 0 12px 32px rgba(43, 29, 16, .07);
  --shadow-lg: 0 18px 50px rgba(43, 29, 16, .14);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1240px;
  --header-h: 74px;
}

/* --------------------------- 2. Reset & base -------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream-deep); }
.center { text-align: center; }
.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .7em;
}
.section-head { max-width: 640px; margin: 0 auto 46px; }
.section-head p { color: var(--ink-soft); margin: 0; }
.lede { font-size: 1.08rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.tiny { font-size: .82rem; }
.hidden { display: none !important; }
.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;
}

/* ------------------------------ 3. Buttons ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .94rem;
  letter-spacing: .01em; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align: center; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #402c19; box-shadow: var(--shadow-md); }
.btn--gold { background: var(--gold); color: #fff; box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--gold-bright); box-shadow: var(--shadow-md); }
.btn--ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--light { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn--light:hover { border-color: var(--gold); color: var(--gold); }
.btn--wide { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------------------------- 4. Header / nav ------------------------- */
.announce {
  background: var(--ink); color: var(--cream); font-size: .82rem; text-align: center;
  padding: 9px 16px; letter-spacing: .02em;
}
.announce b { color: var(--gold-bright); }
.announce__track span { display: none; }
.announce__track span.is-on { display: inline; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.header {
  position: sticky; top: 0; z-index: 60; background: rgba(253, 247, 236, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.header__bar {
  display: flex; align-items: center; gap: 18px; height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo__img { height: 52px; width: auto; }
/* Header logo sheen.
   A warm highlight drifts across the mark every few seconds, then rests.
   The wrapper is masked by the logo artwork itself, so the sweep follows the
   logo's actual shape instead of showing as a rectangle over the transparent
   corners (the PNG is ~29% transparent). Purely decorative — no extra file,
   no page weight, and it stops for anyone who asks for reduced motion. */
.logo__mark {
  position: relative; display: inline-flex; line-height: 0; flex-shrink: 0;
  overflow: hidden;
  -webkit-mask-image: url('../img/logo.png'); mask-image: url('../img/logo.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.logo__mark::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .78), transparent);
  transform: translateX(-130%);
  animation: logoSheen 6.5s ease-in-out infinite;
}
@keyframes logoSheen {
  0%, 72% { transform: translateX(-130%); }
  100%    { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo__mark::after { animation: none; }
}

.logo__text { line-height: 1.25; display: block; padding-left: 11px; border-left: 1px solid var(--line); }
.logo__sub { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.logo__slogan { display: block; font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--gold); }
.logo--footer .logo__img { height: 66px; }
.logo--footer .logo__text { border-left-color: rgba(253, 247, 236, .22); }
.logo--footer .logo__sub { color: var(--cream); }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  font-size: .92rem; font-weight: 500; padding: 6px 0; position: relative; color: var(--ink-soft);
  transition: color .18s ease;
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav + .header__actions { margin-left: 26px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  position: relative; transition: background .18s ease;
}
.icon-btn:hover { background: var(--gold-pale); }
.icon-btn svg { width: 21px; height: 21px; stroke: var(--ink); fill: none; stroke-width: 1.7; }
.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: #fff; font-size: .68rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.nav-toggle { display: none; }

/* mobile drawer nav */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: var(--paper);
  z-index: 90; transform: translateX(100%); transition: transform .3s ease; padding: 24px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav.is-open { transform: none; }
.mobile-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.mobile-nav__close { align-self: flex-end; font-size: 1.6rem; line-height: 1; padding: 4px 8px; }

/* --------------------------- 5. Hero & home --------------------------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(170deg, var(--cream) 0%, var(--cream-deep) 100%); }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center;
  padding: 60px 0 70px;
}
.hero__copy h1 { margin-bottom: .35em; }
.hero__copy h1 em { font-style: italic; color: var(--gold); }
.hero__copy .lede { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; list-style: none; }
.hero__points li { display: flex; align-items: center; gap: 7px; font-size: .87rem; color: var(--ink-soft); }
.hero__points li::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
/* banner variant: centred copy above a full-bleed photograph */
.hero--banner { padding-top: 58px; }
.hero__intro { max-width: 760px; text-align: center; padding-bottom: 44px; }
.hero__intro .lede { margin-left: auto; margin-right: auto; max-width: 58ch; }
.hero__intro .hero__cta { justify-content: center; }
.hero__intro .hero__points { justify-content: center; gap: 8px 22px; }
.hero__banner { position: relative; line-height: 0; }
.hero__banner img { width: 100%; height: auto; }
/* sits over the out-of-focus shelf, clear of every label */
.hero--banner .hero__seal {
  right: 4%; top: 7%; bottom: auto; width: 124px; height: 124px;
}

.hero__art { position: relative; }
.hero__art::before {
  content: ''; position: absolute; inset: 6% 4% 12%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(255,255,255,0) 68%);
}
.hero__art img { position: relative; }
.hero__seal {
  position: absolute; right: 3%; top: -18px; width: 112px; height: 112px; border-radius: 50%;
  background: var(--ink); color: var(--cream); display: grid; place-items: center; text-align: center;
  font-size: .7rem; line-height: 1.35; padding: 14px; box-shadow: var(--shadow-md);
}
.hero__seal b { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-bright); }

/* marquee strip of trust points */
.strip { background: var(--ink); color: var(--cream); padding: 15px 0; overflow: hidden; }
.strip__row { display: flex; gap: 46px; justify-content: center; flex-wrap: wrap; font-size: .84rem; letter-spacing: .04em; }
.strip__row span { display: flex; align-items: center; gap: 9px; opacity: .92; }
.strip__row svg { width: 17px; height: 17px; stroke: var(--gold-bright); fill: none; stroke-width: 1.8; }

/* value / benefit cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: transform .2s ease, box-shadow .2s ease;
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vcard__icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--gold-pale);
  display: grid; place-items: center; margin-bottom: 16px;
}
.vcard__icon svg { width: 23px; height: 23px; stroke: var(--gold); fill: none; stroke-width: 1.7; }
.vcard h3 { font-size: 1.1rem; margin-bottom: .4em; }
.vcard p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 18px; }
.step__n {
  font-family: var(--serif); font-size: 2.6rem; color: var(--gold); opacity: .32; line-height: 1;
  margin-bottom: 8px; display: block;
}
.step h3 { font-size: 1.06rem; }
.step p { font-size: .91rem; color: var(--ink-soft); margin: 0; }

/* split story band */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split__art {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--cream-deep);
  box-shadow: var(--shadow-md); padding: 24px;
}
.quote {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; font-style: italic;
  border-left: 3px solid var(--gold); padding-left: 20px; margin: 0 0 22px; color: var(--ink);
}

/* testimonials */
.tcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.tcard p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.tcard__who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold-pale); color: var(--gold);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.tcard__who b { display: block; font-size: .9rem; }
.tcard__who small { color: var(--ink-faint); font-size: .78rem; }
.stars { color: var(--gold-bright); letter-spacing: 2px; font-size: .9rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, #33220f, #4a3218); color: var(--cream);
  border-radius: var(--radius-lg); padding: 54px 46px; text-align: center;
}
.cta-band h2 { color: var(--cream); }
.cta-band p { color: rgba(253, 247, 236, .78); max-width: 52ch; margin: 0 auto 26px; }

/* ------------------------ 6. Product grid & cards --------------------- */
.shop-head { padding: 44px 0 26px; border-bottom: 1px solid var(--line); }
.crumbs { font-size: .82rem; color: var(--ink-faint); margin-bottom: 10px; }
.crumbs a:hover { color: var(--gold); }
/* scrolls away with the page — pinning it left product cards sliding
   underneath the filters, which read as a rendering fault */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: .86rem; font-weight: 600; color: var(--ink-soft); transition: all .18s ease;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.toolbar__right { display: flex; align-items: center; gap: 10px; }
.toolbar__right #searchInput { width: 190px; }
.select, .field {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
  font-size: .88rem; min-width: 0;
}
.select:focus, .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.result-count { font-size: .85rem; color: var(--ink-faint); }

.grid-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 34px 0 0; }
.pcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .34s cubic-bezier(.2, .7, .25, 1), box-shadow .34s ease, border-color .34s ease;
}
.pcard:hover, .pcard:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(43, 29, 16, .09), 0 26px 52px rgba(43, 29, 16, .13);
  border-color: #dcc08a;
}
/* One image per card. On hover the jar drifts forward, a warm light rises
   behind it and a single highlight sweeps across the glass — the way light
   catches a jar when you pick it up. */
.pcard__media {
  position: relative; display: block; background: var(--studio); overflow: hidden;
}
.pcard__img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform .85s cubic-bezier(.2, .7, .25, 1);
}
.pcard:hover .pcard__img, .pcard:focus-within .pcard__img { transform: scale(1.07); }

/* warm glow rising behind the product */
.pcard__media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 54%, rgba(255, 206, 122, .40) 0%,
              rgba(255, 206, 122, .12) 42%, rgba(255, 206, 122, 0) 68%);
  opacity: 0; transition: opacity .55s ease;
}
.pcard:hover .pcard__media::before, .pcard:focus-within .pcard__media::before { opacity: 1; }

/* the highlight sweep — runs once per hover, never loops */
.pcard__media::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: -55%; width: 42%;
  z-index: 2; pointer-events: none; opacity: 0;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .55) 42%, rgba(255, 236, 190, .55) 58%,
              rgba(255, 255, 255, 0) 100%);
}
.pcard:hover .pcard__media::after, .pcard:focus-within .pcard__media::after {
  animation: sheen 1.05s cubic-bezier(.25, .6, .3, 1) .06s 1 both;
}
@keyframes sheen {
  0%   { opacity: 0; transform: skewX(-18deg) translateX(0); }
  14%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(430%); }
}

/* benefit chips, the "what's good about it" line on each card */
.chips-bene { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.chips-bene li {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; background: var(--green-pale); color: var(--green);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.chips-bene svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.chips-bene--lg { margin: 0 0 18px; gap: 8px; }
.chips-bene--lg li { font-size: .8rem; padding: 6px 13px; }
.chips-bene--lg svg { width: 15px; height: 15px; }
.badge {
  position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--cream);
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; z-index: 4;
}
.badge--save { left: auto; right: 14px; background: var(--red); }
.pcard__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard__rating { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-faint); }
.pcard h3 { font-size: 1.14rem; margin: 0; }
.pcard h3 a:hover { color: var(--gold); }
.pcard__tag { font-size: .86rem; color: var(--ink-soft); margin: 0; flex: 1; }
.sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.size-btn {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
  font-size: .81rem; font-weight: 600; color: var(--ink-soft); transition: all .16s ease;
}
.size-btn:hover { border-color: var(--gold); color: var(--gold); }
.size-btn.is-active { background: var(--gold-pale); border-color: var(--gold); color: var(--gold); }
.size-btn.is-out { opacity: .4; text-decoration: line-through; pointer-events: none; }
.price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price { font-family: var(--serif); font-size: 1.42rem; font-weight: 700; }
.price-mrp { color: var(--ink-faint); text-decoration: line-through; font-size: .92rem; }
.price-off { color: var(--red); font-size: .82rem; font-weight: 700; }
.stock-note { font-size: .78rem; color: var(--green); font-weight: 600; }
.stock-note.is-low { color: var(--red); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  background: var(--ink); color: var(--cream); padding: 13px 22px; border-radius: 999px;
  font-size: .89rem; font-weight: 600; z-index: 120; box-shadow: var(--shadow-lg);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.2); display: flex; align-items: center; gap: 9px;
  max-width: 90vw;
}
.toast.is-on { transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; stroke: var(--gold-bright); fill: none; stroke-width: 2.4; }

/* --------------------------- 7. Product detail ------------------------ */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; padding: 34px 0 18px; align-items: start; }
.gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.gallery__main {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--studio);
  border: 1px solid var(--line);
}
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery__thumbs button {
  width: 74px; height: 74px; border-radius: 11px; overflow: hidden; border: 2px solid transparent;
  background: var(--studio); transition: border-color .18s ease;
}
.gallery__thumbs button.is-active { border-color: var(--gold); }
.pdp__title { margin-bottom: .25em; }
.pdp__rating { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--ink-soft); margin-bottom: 14px; }
.pdp .price { font-size: 2rem; }
.pdp__price-row { margin: 6px 0 4px; }
.tax-note { font-size: .8rem; color: var(--ink-faint); margin-bottom: 22px; }
.opt-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 24px; }
.size-card {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; text-align: left;
  background: var(--paper); transition: all .18s ease;
}
.size-card:hover { border-color: var(--gold); }
.size-card.is-active { border-color: var(--gold); background: var(--gold-pale); }
.size-card b { display: block; font-size: .95rem; }
.size-card small { color: var(--ink-soft); font-size: .82rem; }
.size-card.is-out { opacity: .45; pointer-events: none; }
.buy-row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.qty {
  display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--paper); overflow: hidden; flex-shrink: 0;
}
.qty button { width: 42px; height: 100%; font-size: 1.2rem; color: var(--ink-soft); }
.qty button:hover { color: var(--gold); background: var(--gold-pale); }
.qty input {
  width: 40px; text-align: center; border: 0; background: transparent; font-weight: 700;
  -moz-appearance: textfield; padding: 12px 0;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.assurance { display: grid; gap: 10px; margin: 24px 0; padding: 20px; background: var(--green-pale); border-radius: var(--radius); }
.assurance div { display: flex; gap: 11px; align-items: flex-start; font-size: .89rem; }
.assurance svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 1.9; flex-shrink: 0; margin-top: 3px; }
.hl-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; }
.hl-list li { display: flex; gap: 10px; font-size: .93rem; color: var(--ink-soft); }
.hl-list li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; border-radius: 50%;
  background: var(--gold-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B87514' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* tabs */
.tabs { border-top: 1px solid var(--line); margin-top: 20px; }
.tabs__nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs__nav button {
  padding: 16px 20px; font-weight: 700; font-size: .92rem; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__nav button.is-active { color: var(--ink); border-bottom-color: var(--gold); }
.tabs__panel { padding: 28px 0; max-width: 760px; }
.tabs__panel[hidden] { display: none; }
.spec { width: 100%; border-collapse: collapse; font-size: .93rem; }
.spec td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec td:first-child { color: var(--ink-soft); width: 45%; }
.spec td:last-child { font-weight: 600; text-align: right; }

/* accordion (FAQ) */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; text-align: left; padding: 20px 40px 20px 0; font-weight: 600; font-size: 1.02rem;
  position: relative; font-family: var(--serif);
}
.acc__q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--gold); font-family: var(--sans); transition: transform .2s ease;
}
.acc__item.is-open .acc__q::after { transform: translateY(-50%) rotate(45deg); }
.acc__a { display: none; padding: 0 40px 22px 0; color: var(--ink-soft); font-size: .95rem; }
.acc__item.is-open .acc__a { display: block; }

/* ---------------- 8. Cart drawer, cart page, checkout ----------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(43, 29, 16, .45); z-index: 80; opacity: 0;
  pointer-events: none; transition: opacity .28s ease;
}
.overlay.is-on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); background: var(--paper);
  z-index: 95; transform: translateX(100%); transition: transform .32s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h3 { margin: 0; font-size: 1.15rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 6px 22px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 18px 22px 22px; background: var(--cream); }

.ship-bar { padding: 14px 22px; background: var(--green-pale); font-size: .84rem; }
.ship-bar__track { height: 6px; border-radius: 999px; background: #fff; margin-top: 8px; overflow: hidden; }
.ship-bar__fill { height: 100%; background: var(--green); border-radius: 999px; transition: width .4s ease; }

.line-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line-item__img { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--studio); }
.line-item h4 { margin: 0 0 3px; font-size: .96rem; font-family: var(--sans); font-weight: 700; }
.line-item small { color: var(--ink-faint); font-size: .82rem; }
.line-item__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.qty--sm { border-radius: 8px; }
.qty--sm button { width: 30px; font-size: 1rem; padding: 2px 0; }
.qty--sm input { width: 32px; padding: 6px 0; font-size: .88rem; }
.link-btn { font-size: .8rem; color: var(--ink-faint); text-decoration: underline; }
.link-btn:hover { color: var(--red); }
.line-item__price { text-align: right; font-weight: 700; white-space: nowrap; }

.totals { display: grid; gap: 9px; font-size: .93rem; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .is-total { font-size: 1.18rem; font-family: var(--serif); font-weight: 700; padding-top: 11px; border-top: 1px solid var(--line); }
.totals .is-discount { color: var(--green); font-weight: 600; }

.empty { text-align: center; padding: 60px 20px; }
.empty svg { width: 54px; height: 54px; stroke: var(--ink-faint); fill: none; stroke-width: 1.3; margin: 0 auto 16px; }

/* GST note printed under every money total */
.gst-note {
  font-size: .78rem; color: var(--ink-faint); margin: 10px 0 0; text-align: center;
}
/* Stands in for the coupon box while codes are switched off */
.coupon-soon {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--cream);
}
.coupon-soon b { font-size: .88rem; font-weight: 600; }
.coupon-soon span {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}

.coupon-row { display: flex; gap: 8px; margin-bottom: 16px; }
.coupon-row .field { flex: 1; }
.coupon-msg { font-size: .82rem; margin: -8px 0 14px; }
.coupon-msg.is-ok { color: var(--green); }
.coupon-msg.is-bad { color: var(--red); }

/* cart & checkout page layout */
.two-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; padding: 34px 0 0; }
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
}
.panel + .panel { margin-top: 22px; }
.panel h3 { font-size: 1.15rem; margin-bottom: 18px; }
.summary { position: sticky; top: calc(var(--header-h) + 20px); }
.summary__items { max-height: 320px; overflow-y: auto; margin-bottom: 18px; }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row--full { grid-column: 1 / -1; }
.form-row label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.form-row .field, .form-row .select { width: 100%; padding: 12px 14px; }
.form-row textarea { min-height: 84px; resize: vertical; }
.form-row .err { font-size: .78rem; color: var(--red); display: none; }
.form-row.has-error .field, .form-row.has-error .select { border-color: var(--red); }
.form-row.has-error .err { display: block; }
.pay-opts { display: grid; gap: 12px; }
.pay-opt {
  display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer; transition: all .18s ease;
}
.pay-opt:hover { border-color: var(--gold); }
.pay-opt.is-active { border-color: var(--gold); background: var(--gold-pale); }
.pay-opt input { margin-top: 4px; accent-color: var(--gold); }
.pay-opt b { display: block; font-size: .95rem; }
.pay-opt small { color: var(--ink-soft); font-size: .84rem; }
.pay-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.pay-opt.is-disabled:hover { border-color: var(--line); }
/* Still selectable — it explains itself when picked — but visibly not ready. */
.pay-opt.is-soon b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-soon {
  font-family: var(--sans); font-style: normal; font-size: .64rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.pay-notice {
  display: grid; gap: 8px; justify-items: start;
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-pale);
}
.pay-notice b { font-size: .95rem; }
.pay-notice span { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.pay-notice .btn { margin-top: 4px; }

/* order confirmation */
.confirm { max-width: 640px; margin: 0 auto; text-align: center; padding: 70px 0; }
.confirm__tick {
  width: 82px; height: 82px; border-radius: 50%; background: var(--green-pale); margin: 0 auto 22px;
  display: grid; place-items: center;
}
.confirm__tick svg { width: 40px; height: 40px; stroke: var(--green); fill: none; stroke-width: 2.4; }
.order-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: left; margin: 26px 0;
}

/* ------------------------------ Footer -------------------------------- */
.footer { background: var(--ink); color: rgba(253, 247, 236, .74); padding: 62px 0 26px; margin-top: 80px; }
.footer a:hover { color: var(--gold-bright); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 40px; }
.footer h4 {
  color: var(--cream); font-family: var(--sans); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9rem; }
.footer .logo__name, .footer .logo__sub { color: var(--cream); }
.footer__note { font-size: .88rem; max-width: 34ch; }
.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input {
  flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(253,247,236,.22);
  background: rgba(253,247,236,.06); color: var(--cream);
}
.newsletter input::placeholder { color: rgba(253,247,236,.45); }
.footer__bottom {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(253,247,236,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(253,247,236,.22);
  display: grid; place-items: center; transition: all .18s ease;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); }
.socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* floating WhatsApp */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center; z-index: 55; box-shadow: var(--shadow-md);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  /* nav is hidden, so the actions must reclaim the auto margin */
  .nav + .header__actions { margin-left: auto; }
  .nav-toggle { display: grid; }
  .hero__grid { grid-template-columns: 1fr; gap: 10px; padding: 40px 0 50px; }
  .hero__art { order: -1; max-width: 520px; margin: 0 auto; }
  .hero__seal { width: 96px; height: 96px; font-size: .62rem; }
  .grid-products, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .gallery, .summary { position: static; }
  .two-col { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  /* the wordmark is inside the logo image — drop the strapline on phones */
  .logo__text { display: none; }
  .logo__img { height: 44px; }
  /* show the product before the pitch on a phone screen */
  .hero--banner { display: flex; flex-direction: column; padding-top: 0; }
  .hero__banner { order: -1; }
  .hero__intro { padding: 30px 22px 34px; }
  .hero__intro .lede { font-size: 1rem; }
  .hero__intro .hero__cta { flex-direction: column; align-items: stretch; }
  .hero--banner .hero__seal { width: 84px; height: 84px; font-size: .58rem; padding: 9px; right: 4%; top: 5%; }
  .hero--banner .hero__seal b { font-size: 1.1rem; }
  .grid-products, .cards-3, .cards-4, .steps, .form-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .toolbar__right { flex-wrap: wrap; width: 100%; }
  .toolbar__right #searchInput { flex: 1 1 100%; width: auto; }
  .toolbar__right .select { flex: 1; }
  .result-count { flex: 1 1 100%; order: 3; }
  .strip__row { gap: 14px 24px; font-size: .78rem; }
  .cta-band { padding: 38px 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
  .line-item { grid-template-columns: 64px 1fr; }
  .line-item__price { grid-column: 2; text-align: left; }
  .buy-row { flex-wrap: wrap; }
  .buy-row .btn { flex: 1 1 100%; }
  .wa-float { width: 48px; height: 48px; bottom: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}