/* ==========================================================================
   Casalingo theme chrome — header, footer, and homepage sections.
   Mirrors the approved mockups in designs/ (same class names).
   Requires tokens.css; uses logical properties throughout (RTL-safe).
   ========================================================================== */

/* Border-box everywhere — the design-system mockups (designs/*.html) assume it,
   so ported components size width:100% + padding correctly (fixes cart/checkout
   overflow, e.g. the checkout button and form fields). */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- announcement bar ---------- */
.announce{background:var(--cl-ink);color:var(--cl-cream);text-align:center;
  font-size:var(--fs-small);padding:var(--sp-2) var(--sp-4)}
.announce b{color:var(--cl-saffron)}

/* ---------- header ---------- */
/* Sticky lives on the template-part wrapper: the inner .site-header sits inside
   a short <header class="wp-block-template-part"> wrapper, and a sticky element
   can only travel within its parent — so stickiness must be on that full-height
   parent (a direct child of .wp-site-blocks). Header compresses on scroll via
   the .cl-scrolled class toggled by assets/js/header.js. */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:50}
.site-header{background:var(--color-bg);border-bottom:1px solid var(--color-border)}
/* Compress only the logo + bar padding on scroll (no announce collapse — a big
   layout-height change near the trigger causes scroll-anchor oscillation).
   header.js uses hysteresis so the size can't flip back and forth. */
.site-bar{transition:padding var(--ease)}
.site-bar .site-logo-link img{transition:height var(--ease)}
.cl-scrolled .site-bar{padding-block:var(--sp-2)}
.cl-scrolled .site-bar .site-logo-link img{height:clamp(44px,6vw,64px)}
.site-bar{display:flex;align-items:center;gap:var(--sp-4) var(--sp-6);
  max-width:var(--content-width);margin:0 auto;padding:var(--sp-3) var(--sp-6);
  flex-wrap:wrap;min-width:0}
.site-bar .site-logo-link{display:block;line-height:0;min-width:0}
.site-bar .site-logo-link img{
  height:clamp(56px,14vw,140px);width:auto;max-width:100%;display:block}
.site-bar nav{margin-inline-start:auto}
.site-bar nav a{color:var(--color-text);text-decoration:none;font-weight:var(--fw-body-medium);
  font-size:var(--fs-small);padding:var(--sp-2) 0;border-bottom:2px solid transparent;
  transition:border-color var(--ease),color var(--ease)}
.site-bar nav a:hover,.site-bar nav .current-menu-item > a{
  color:var(--color-secondary);border-bottom-color:var(--color-accent)}
.site-bar .wp-block-navigation{gap:var(--sp-6)}
/* Custom desktop nav (.cl-nav-desktop replaces the WP navigation block so the
   nav items stay a single source of truth with the mobile drawer). It's a
   plain flex row now, so it needs explicit gap/alignment (the old gap came
   from the WP block's layout config). */
.cl-nav-desktop{margin-inline-start:auto}
.cl-nav-desktop-list{
  display:flex;align-items:center;gap:var(--sp-6);list-style:none;margin:0;padding:0}
.cl-nav-desktop a{white-space:nowrap}
.cl-nav-desktop .cl-nav-link{ /* wp_nav_menu adds this via the link-attributes filter */
  color:var(--color-text);text-decoration:none;font-weight:var(--fw-body-medium);
  font-size:var(--fs-small);padding:var(--sp-2) 0;border-bottom:2px solid transparent;
  transition:border-color var(--ease),color var(--ease)}
.cl-nav-desktop .cl-nav-link:hover,
.cl-nav-desktop .current-menu-item > a{
  color:var(--color-secondary);border-bottom-color:var(--color-accent)}

/* ── daisyUI megamenu (desktop dropdown nav) ─────────────────────────
   Markup from casalingo_megamenu() in functions.php; popover/anchor
   mechanics + the sliding hover pill come from the vendored
   assets/css/vendor/daisyui-megamenu.css + daisyui-menu.css. Here we only
   (a) map daisyUI's theme variables to casalingo tokens — tokens stay the
   single source of truth — and (b) match strip typography to the old nav
   links. daisyUI positions everything with logical properties, so RTL is
   automatic. These rules are unlayered, daisyUI's are in @layer → ours
   always win where they declare a property. */
.cl-nav-desktop .megamenu{
  --color-base-100:var(--color-surface);   /* popover panel bg          */
  --color-base-300:var(--color-border);    /* popover panel border      */
  --color-base-content:var(--color-text);  /* text + hover-pill tint    */
  --color-neutral:var(--color-secondary);  /* .menu-active (current) bg */
  --color-neutral-content:var(--cl-cream); /* .menu-active (current) fg */
  --radius-field:var(--radius-sm);
  --radius-box:var(--radius-md);
  --border:1px;
  --size-field:0.25rem;                    /* strip buttons = 2.5rem tall */
  --tw-border-style:solid}                 /* Tailwind var daisyUI leans on */
/* Strip items (popover <button>s + leaf <a>s): kill UA button chrome,
   match the site-bar link typography. daisyUI supplies layout, padding,
   the chevron (button ::after) and the sliding .megamenu-active pill. */
.cl-nav-desktop .megamenu [popovertarget],
.cl-nav-desktop .cl-mm-link{
  background:none;border:none;text-decoration:none;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);color:var(--color-text);
  transition:color var(--ease)}
.cl-nav-desktop .megamenu [popovertarget]:hover,
.cl-nav-desktop .cl-mm-link:hover{color:var(--color-secondary)}
/* Leaf links mirror daisyUI's button metrics so the strip lines up; they
   get a plain hover tint (the pill only tracks popover buttons). */
.cl-nav-desktop .cl-mm-link{
  display:flex;align-items:center;height:calc(var(--size-field) * 10);
  padding-inline:var(--sp-4);border-radius:var(--radius-sm);
  transition:color var(--ease),background-color var(--ease)}
.cl-nav-desktop .cl-mm-link:hover{
  background:color-mix(in srgb, var(--color-text) 8%, transparent)}
.cl-nav-desktop .cl-mm-link.current-menu-item{color:var(--color-secondary)}
/* Popover panel: warm ink shadow on top of daisyUI's border/radius.
   Width: daisyUI's megamenu-wide makes panels exactly as wide as the strip,
   but our strip is short (3 items) and the category row wraps inside it —
   so let the panel hug its content instead, centered under the strip
   (anchor-center), capped so it can never overflow the viewport. */
.cl-nav-desktop .megamenu [popover]{
  box-shadow:var(--shadow-lg);padding:var(--sp-3);
  width:max-content;max-width:min(92vw,var(--content-width));
  justify-self:anchor-center}
/* Panel links: token-styled rows. The high-specificity selector is deliberate —
   it must beat the legacy `.site-bar nav a` rule (which zeroes inline padding
   and adds the underline hover) for links living inside the panel. */
.cl-nav-desktop .megamenu [popover] .menu{
  gap:var(--sp-1);margin:0;padding:0} /* kill base ul margins; panel pads */
.cl-nav-desktop .megamenu [popover] .menu a{
  display:block;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-sm);
  border-bottom:none;text-decoration:none;
  font-size:var(--fs-small);font-weight:var(--fw-body-medium);color:var(--color-text);
  transition:background-color var(--ease),color var(--ease)}
.cl-nav-desktop .megamenu [popover] .menu a:hover{
  background:var(--cl-cream-2);color:var(--color-secondary)}
.cl-nav-desktop .megamenu [popover] .menu .menu-active{
  background:var(--cl-saffron-light);color:var(--color-text)}

/* cart button (as in mockups) */
.cart-btn{display:flex;align-items:center;gap:var(--sp-2);background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-4);font-size:var(--fs-small);font-weight:var(--fw-body-medium);
  color:var(--color-text);text-decoration:none}
.cart-btn .count{background:var(--color-primary);color:var(--cl-cream);border-radius:50%;
  width:1.5em;height:1.5em;display:grid;place-items:center;font-size:var(--fs-xs)}

/* ── mini-cart popover ─────────────────────────────────────────────────
   Anchored below the header cart button (same popover + anchor-positioning
   pattern as the megamenu). Body HTML comes from casalingo_minicart_html();
   minicart.js drives open/load/qty. Browsers without anchor positioning
   fall back to a viewport-centered popover — still fully usable. */
#cl-cart-btn{anchor-name:--cl-cart}
.cl-minicart{
  position-anchor:--cl-cart;position-area:block-end span-inline-start;
  margin:var(--sp-2) 0 0;
  width:min(92vw,380px);max-height:min(72vh,560px);overflow:auto;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:var(--sp-4)}
.cl-minicart .mc-title{
  margin:0 0 var(--sp-3);font-weight:var(--fw-body-medium);color:var(--color-text)}
.cl-minicart .mc-body.is-loading{opacity:.55}
.mc-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.mc-item{display:grid;grid-template-columns:56px 1fr auto;gap:var(--sp-3);
  padding-block-end:var(--sp-3);border-block-end:1px solid var(--cl-cream-2)}
.mc-item:last-child{border-block-end:none;padding-block-end:0}
.mc-item.is-busy{opacity:.5;pointer-events:none}
.mc-thumb img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm);display:block}
.mc-name{display:block;color:var(--color-text);text-decoration:none;
  font-size:var(--fs-small);font-weight:var(--fw-body-medium);line-height:1.3}
.mc-name:hover{color:var(--color-secondary)}
.mc-meta{font-size:var(--fs-xs);color:var(--cl-ink-soft);margin-top:2px}
.mc-qty{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);
  border:1px solid var(--color-border);border-radius:var(--radius-pill)}
.mc-qty button{width:28px;height:28px;border:none;background:none;cursor:pointer;
  font-size:16px;line-height:1;color:var(--color-text)}
.mc-qty button:hover{color:var(--color-primary)}
.mc-n{min-width:20px;text-align:center;font-size:var(--fs-small)}
.mc-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.mc-remove{border:none;background:none;cursor:pointer;padding:2px;
  font-size:18px;line-height:1;color:var(--cl-ink-faint)}
.mc-remove:hover{color:var(--color-error)}
.mc-line{font-size:var(--fs-small);font-weight:var(--fw-body-medium);white-space:nowrap}
.mc-subtotal{display:flex;justify-content:space-between;align-items:center;
  margin-block:var(--sp-4) var(--sp-3);padding-block-start:var(--sp-3);
  border-block-start:1px solid var(--color-border);font-size:var(--fs-small)}
.mc-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.mc-actions--single{grid-template-columns:1fr}
.mc-actions .cl-btn{text-align:center;text-decoration:none;padding-block:var(--sp-3)}
.mc-empty{margin:0 0 var(--sp-3);text-align:center;color:var(--cl-ink-soft)}

/* ── Woo notices (product page) ────────────────────────────────────────
   Base card look lives in woocommerce.css; here: spacing + the inline
   "view cart" button Woo appends to the added-to-cart success message. */
.cl-notices{margin-block:var(--sp-4)}
.cl-notices .woocommerce-message,
.cl-notices .woocommerce-info,
.cl-notices .woocommerce-error{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-block:0 var(--sp-3)}
.cl-notices .woocommerce-error{display:block} /* error lists read top-down */
/* (the action-link pill inside notices is styled in woocommerce.css) */

/* ── snackbar (M3): transient add-to-cart confirmation ─────────────────
   Created by quickadd.js; inverse surface (ink on cream site), saffron
   action, slides up from the bottom and auto-hides after 5s. */
.cl-snackbar{
  position:fixed;inset-block-end:var(--sp-6);inset-inline:0;margin-inline:auto;
  width:fit-content;max-width:min(92vw,520px);z-index:90;
  display:flex;align-items:center;gap:var(--sp-8);
  /* lifted a touch above the ink footer + cream hairline, so the bar stays
     visible when it floats over the footer (identical base color). */
  background:color-mix(in srgb, var(--cl-ink) 88%, white);
  border:1px solid color-mix(in srgb, var(--cl-cream) 35%, transparent);
  color:var(--cl-cream);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  opacity:0;translate:0 12px;pointer-events:none;
  transition:opacity .25s ease,translate .25s ease}
.cl-snackbar.is-on{opacity:1;translate:0 0;pointer-events:auto}
.cl-snackbar-msg{font-size:var(--fs-body)}
.cl-snackbar-action{
  color:var(--cl-saffron);font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);text-decoration:none;white-space:nowrap}
.cl-snackbar-action:hover{text-decoration:underline}

/* ── quick-add dialog (product cards with options) ─────────────────────
   Native <dialog> filled by quickadd.js with the product's real Woo
   add-to-cart form; .buy-area on the wrapper reuses the product-page form
   styling (variations table, option rows, add button). */
dialog.cl-qa{
  width:min(92vw,520px);max-height:min(86vh,720px);overflow:auto;
  border:none;border-radius:var(--radius-lg);background:var(--color-surface);
  box-shadow:var(--shadow-lg);padding:var(--sp-6);margin:auto}
dialog.cl-qa::backdrop{background:color-mix(in srgb, var(--cl-ink) 45%, transparent)}
.cl-qa-close{
  position:absolute;inset-block-start:var(--sp-3);inset-inline-end:var(--sp-3);
  width:36px;height:36px;display:grid;place-items:center;
  border:none;background:none;border-radius:50%;cursor:pointer;
  font-size:20px;line-height:1;color:var(--cl-ink-faint);
  transition:background-color var(--ease),color var(--ease)}
.cl-qa-close:hover{background:var(--cl-cream-2);color:var(--color-text)}
.cl-qa-head{margin-block-end:var(--sp-4);padding-inline-end:var(--sp-8)}
.cl-qa-name{
  margin:0;font-family:var(--font-heading);font-weight:700;
  font-size:var(--fs-h3);color:var(--color-text)}
.cl-qa-price{color:var(--cl-ink-soft);font-size:var(--fs-small)}
.cl-qa-errors{margin-block-end:var(--sp-3);color:var(--color-error);font-size:var(--fs-small)}
.cl-qa-errors p{margin:0 0 var(--sp-1)}
.cl-qa .buy-area .single_add_to_cart_button{width:100%}
.cl-quickadd.is-busy{opacity:.6;pointer-events:none}

/* ---------- generic sections (match mockups) ---------- */
.wrap{max-width:var(--content-width);margin-inline:auto;padding-inline:var(--sp-6);
  box-sizing:border-box}
.band{padding-block:var(--sp-16)}
.band-alt{background:var(--color-surface)}
.sec-kicker{display:block;color:var(--color-secondary);font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);letter-spacing:.5px;margin-bottom:var(--sp-1);
  font-family:var(--font-body)}

/* ---------- hero ---------- */
.hero{padding-block:var(--sp-16) var(--sp-12);overflow:hidden;max-width:100%;
  box-sizing:border-box}
.hero h1{font-size:var(--fs-hero);line-height:1.1;word-break:break-word}
.hero h1 em{font-style:normal;color:var(--color-primary)}
.hero .sub{font-size:var(--fs-h4);color:var(--color-text-muted);max-width:34ch}
.trust{display:flex;gap:var(--sp-3) var(--sp-6);flex-wrap:wrap;color:var(--cl-ink-soft);font-size:var(--fs-small)}
.trust span::before{content:"✓";color:var(--color-secondary);font-weight:700;margin-inline-end:var(--sp-2)}
.hero-art{position:relative;display:grid;place-items:center;max-width:100%}
.hero-art .blob{position:absolute;inset:0;margin:auto;width:min(420px,90%);
  max-width:100%;aspect-ratio:1;
  background:radial-gradient(circle at 40% 35%, var(--cl-saffron-light), transparent 70%);
  border-radius:50%}
.hero-art img{position:relative;width:min(360px,80%);max-width:100%;height:auto}
.hero-art img.hero-photo{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg)}

/* buttons reuse the design-system classes; map WP button blocks too */
.wp-block-button .wp-block-button__link{
  font-family:var(--font-body);font-weight:var(--fw-body-medium);
  padding:var(--sp-4) var(--sp-8);border-radius:var(--radius-md);
  transition:background var(--ease)}
.btn-ghost .wp-block-button__link{
  background:transparent;color:var(--color-text);
  box-shadow:inset 0 0 0 1.5px var(--color-border)}
.btn-ghost .wp-block-button__link:hover{background:var(--cl-cream-2);color:var(--color-text)}

/* ---------- section head + product grid (Woo shortcode/archive) ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-8);flex-wrap:wrap}
.sec-head a{font-size:var(--fs-small);font-weight:var(--fw-body-medium)}
/* Featured grid on the front page — our own markup (functions.php),
   no WooCommerce ul.products CSS competing. */
.grid-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-2)}
.grid-products .cl-product-card{position:relative;display:flex;flex-direction:column;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
  transition:box-shadow var(--ease),transform var(--ease)}
.grid-products .cl-product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.grid-products .cl-product-card .ph{display:block;aspect-ratio:4/3;background:var(--cl-cream-2);overflow:hidden}
.grid-products .cl-product-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ease)}
.grid-products .cl-product-card:hover .ph img{transform:scale(1.03)}
.grid-products .cl-product-card .pad{padding:var(--sp-4);display:flex;flex-direction:column;flex:1}
.grid-products .cl-product-title{display:block;font-family:var(--font-heading);
  font-weight:var(--fw-heading-sub);font-size:var(--fs-h4);color:var(--color-heading);
  text-decoration:none;margin-bottom:var(--sp-1)}
.grid-products .cl-product-title:hover{color:var(--color-secondary)}
.grid-products .meta{font-size:var(--fs-xs);color:var(--cl-ink-faint);margin-bottom:var(--sp-2)}
.grid-products .cl-price{display:block;margin-block:var(--sp-2) var(--sp-4);font-weight:var(--fw-body-medium)}
.grid-products .cl-price ins{color:var(--color-primary);text-decoration:none;font-weight:700}
.grid-products .cl-price del{color:var(--cl-ink-faint);margin-inline-end:var(--sp-2);font-weight:var(--fw-body)}
.grid-products .cl-btn{margin-top:auto;text-align:center;text-decoration:none}
.grid-products .card-badge{position:absolute;inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);z-index:2}
@media (max-width: 900px){ .grid-products{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .grid-products{grid-template-columns:minmax(0,1fr)} }

/* ---------- shop archive (matches designs/shop.html) ---------- */
.page-head{padding-block:var(--sp-8) var(--sp-6)}
.page-head .cl-breadcrumb{margin-bottom:var(--sp-3)}
.page-head .cl-breadcrumb a{text-decoration:none}
.page-head h1{margin-bottom:var(--sp-2)}
.page-head .lede{color:var(--color-text-muted);max-width:52ch}

.toolbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding-block:var(--sp-4);border-block:1px solid var(--color-border);margin-bottom:var(--sp-8)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{border:1.5px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);cursor:pointer;transition:all var(--ease)}
.chip:hover{border-color:var(--color-accent)}
.chip.is-on{background:var(--cl-ink);color:var(--cl-cream);border-color:var(--cl-ink)}
.toolbar .spacer{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-3)}
.toolbar .count-label{color:var(--cl-ink-faint);font-size:var(--fs-xs)}

/* custom product cards (shop + featured grid) */
.grid-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);margin-bottom:var(--sp-8)}
.grid-products.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-products .cl-product-card{position:relative;display:flex;flex-direction:column}
.cl-product-card.is-hidden{display:none}
.cl-product-card .ph{display:block;aspect-ratio:4/3;background:var(--cl-cream-2);overflow:hidden}
.cl-product-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--ease)}
.cl-product-card:hover .ph img{transform:scale(1.03)}
.cl-product-card .pad{padding:var(--sp-4);display:flex;flex-direction:column;flex:1}
.cl-product-card .cl-product-title{padding:0 0 var(--sp-1);text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--fw-heading-sub);
  font-size:var(--fs-h4);color:var(--color-heading)}
.cl-product-card .cl-product-title:hover{color:var(--color-secondary)}
.cl-product-card .meta{font-size:var(--fs-xs);color:var(--cl-ink-faint);margin-bottom:var(--sp-2)}
.cl-product-card .cl-price{display:block;margin-block:var(--sp-2) var(--sp-4)}
.cl-product-card .cl-btn{margin-top:auto;text-align:center;text-decoration:none}
.card-badge{position:absolute;inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);z-index:2}
.cl-product-card.soldout .ph{filter:grayscale(.65);opacity:.75}

.note-band{background:var(--cl-saffron-light);border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-8);display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-12)}
.note-band .icon{font-size:28px}
.note-band p{font-size:var(--fs-small);color:var(--color-text)}
.note-band b{color:var(--cl-terracotta-dark)}

@media (max-width: 900px){
  .grid-products,.grid-products.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid-products,.grid-products.grid-4{grid-template-columns:minmax(0,1fr)}
  .toolbar .spacer{margin-inline-start:0;width:100%}
}

/* ---------- single product (matches designs/product.html) ---------- */
.product-page{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);
  align-items:start;margin-block:var(--sp-6) var(--sp-16)}
.gallery .main{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--cl-cream-2);box-shadow:var(--shadow-md);margin-bottom:var(--sp-3)}
.gallery .main img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.thumb{aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  border:2.5px solid transparent;padding:0;background:var(--cl-cream-2);transition:border-color var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.is-on{border-color:var(--color-accent)}
.thumb:hover{border-color:var(--cl-saffron-light)}

.p-kicker{display:inline-block;color:var(--color-secondary);font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);margin-bottom:var(--sp-1);text-decoration:none}
.p-title{margin-bottom:var(--sp-2)}
.p-rating{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.p-rating .cl-stars{font-size:var(--fs-body);letter-spacing:2px}
.p-rating a{font-size:var(--fs-xs);color:var(--cl-ink-faint)}
.p-price{font-size:var(--fs-h3);font-weight:700;margin-bottom:var(--sp-4)}
.p-price del{color:var(--cl-ink-faint);font-weight:var(--fw-body);font-size:var(--fs-body)}
.p-price ins{color:var(--color-primary);text-decoration:none}
.p-price .unit{font-size:var(--fs-xs);color:var(--cl-ink-faint);font-weight:var(--fw-body)}
.p-price .unit .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}
.p-desc{color:var(--color-text-muted);margin-bottom:var(--sp-6);max-width:48ch}
.p-facts{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-6);
  padding:var(--sp-4) var(--sp-6);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md)}
.p-facts div{font-size:var(--fs-xs);color:var(--cl-ink-faint)}
.p-facts b{display:block;font-size:var(--fs-small);color:var(--color-text);font-weight:var(--fw-body-medium)}

/* Woo add-to-cart form styled as the mockup buy row */
.buy-area{margin-bottom:var(--sp-3)}
.buy-area form.cart{display:flex;gap:var(--sp-3);align-items:stretch;flex-wrap:wrap}
.buy-area .quantity{display:flex;align-items:center;border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}
.buy-area .quantity .qty{width:3.2em;text-align:center;border:none;background:transparent;
  font-family:var(--font-body);font-size:var(--fs-body);padding-block:var(--sp-3);
  -moz-appearance:textfield;appearance:textfield}
.buy-area .quantity .qty::-webkit-outer-spin-button,
.buy-area .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-area .quantity label{display:none}
.buy-area .qty-minus,.buy-area .qty-plus{width:44px;border:none;background:none;
  font-size:20px;color:var(--color-text);cursor:pointer;align-self:stretch}
.buy-area .qty-minus:hover,.buy-area .qty-plus:hover{background:var(--cl-cream-2)}
.buy-area .single_add_to_cart_button{flex:1;font-size:var(--fs-body);
  padding-block:var(--sp-4);min-width:220px}
.buy-area > .cl-btn[disabled]{width:100%;padding-block:var(--sp-4)}
/* variable product: size selector stacks above the qty + button buy row */
.buy-area form.variations_form{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
.buy-area table.variations{border:none;margin:0;width:100%;border-collapse:collapse}
.buy-area table.variations th,.buy-area table.variations td{border:none;padding:var(--sp-1) 0;vertical-align:middle}
.buy-area table.variations th.label{text-align:start;width:1%;white-space:nowrap;
  padding-inline-end:var(--sp-4);font-weight:var(--fw-body-medium);color:var(--color-text)}
.buy-area table.variations th.label label{margin:0}
.buy-area table.variations select{min-width:220px;font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--color-text);background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);cursor:pointer}
.buy-area .reset_variations{display:inline-block;margin-inline-start:var(--sp-3);
  font-size:var(--fs-xs);color:var(--cl-ink-faint)}
.buy-area .woocommerce-variation{margin-bottom:var(--sp-1)}
.buy-area .woocommerce-variation-price{font-size:var(--fs-h4);font-weight:700;color:var(--color-text)}
.buy-area .woocommerce-variation-price .price{color:var(--color-text)}
.buy-area .woocommerce-variation-add-to-cart{display:flex;gap:var(--sp-3);align-items:stretch;flex-wrap:wrap}
.buy-area .single_add_to_cart_button[disabled],
.buy-area .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}

/* chosen variation / options shown on cart lines + checkout mini rows */
.line-options,.mini-options{display:block;margin:var(--sp-1) 0}
.line-options .variation,.mini-options .variation{margin:0}
.line-options .variation dt,.mini-options .variation dt{display:inline;font-weight:var(--fw-body-medium);
  color:var(--cl-ink-faint);font-size:var(--fs-xs)}
.line-options .variation dd,.mini-options .variation dd{display:inline;margin:0 var(--sp-1) 0 0;
  color:var(--cl-ink-faint);font-size:var(--fs-xs)}
.line-options .variation dd p,.mini-options .variation dd p{display:inline;margin:0}

.stock{color:var(--color-success);font-size:var(--fs-small);font-weight:var(--fw-body-medium);
  margin-bottom:var(--sp-4)}
.stock::before{content:"●";margin-inline-end:var(--sp-2);font-size:10px;vertical-align:2px}
.order-note{background:var(--cl-saffron-light);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-small);margin-bottom:var(--sp-6)}
.order-note b{color:var(--cl-terracotta-dark)}

details.acc{border-top:1px solid var(--color-border)}
details.acc:last-of-type{border-bottom:1px solid var(--color-border)}
details.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;padding:var(--sp-4) 0;font-weight:var(--fw-body-medium)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-size:20px;color:var(--color-secondary)}
details.acc[open] summary::after{content:"–"}
details.acc .acc-body{padding-bottom:var(--sp-4);color:var(--color-text-muted);font-size:var(--fs-small)}

.sec-head-stack{margin-bottom:var(--sp-8)}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.review{background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-6)}
.review .cl-stars{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-small);letter-spacing:2px}
.review p{font-size:var(--fs-small);margin-bottom:var(--sp-3)}
.review footer{color:var(--cl-ink-faint);font-size:var(--fs-xs)}
.reviews-empty{color:var(--color-text-muted)}

@media (max-width: 900px){
  .product-page{grid-template-columns:1fr;gap:var(--sp-8)}
  .reviews{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .buy-area .single_add_to_cart_button{flex-basis:100%}
}

/* ---------- cart (matches designs/cart.html) ---------- */
/* WooCommerce's block-theme CSS caps `main .woocommerce` at 1000px and (in RTL,
   with no auto margin) leaves it flush-right. Widen it to our content width and
   center it, so cart/checkout align with the header/footer like the mockups. */
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce{max-width:var(--content-width);margin-inline:auto}
h1.page-title{margin-block:var(--sp-4) var(--sp-2)}
.items-count{color:var(--color-text-muted);font-size:var(--fs-small);margin-bottom:var(--sp-8)}
.cart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:var(--sp-8);
  align-items:start;margin-bottom:var(--sp-16)}

.lines{display:flex;flex-direction:column;gap:var(--sp-4)}
.line{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.line .ph{width:110px;height:82px;border-radius:var(--radius-md);overflow:hidden;
  display:block;background:var(--cl-cream-2)}
.line .ph img{width:100%;height:100%;object-fit:cover;display:block}
.line .name{font-family:var(--font-heading);font-weight:var(--fw-heading-sub);
  font-size:var(--fs-h4);color:var(--color-heading);text-decoration:none}
.line .name:hover{color:var(--color-secondary)}
.line .meta{font-size:var(--fs-xs);color:var(--cl-ink-faint);margin-top:2px}
.line .unit-price{font-size:var(--fs-small);color:var(--color-text-muted);margin-top:var(--sp-1)}
.line .unit-price ins{color:var(--color-primary);text-decoration:none;font-weight:700}
.line .unit-price del{color:var(--cl-ink-faint);margin-inline-end:var(--sp-1)}
.line .side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}
.line .line-total{font-weight:700}
.line .line-remove{background:none;border:none;color:var(--cl-ink-faint);font-size:var(--fs-xs);
  cursor:pointer;text-decoration:underline;padding:0}
.line .line-remove:hover{color:var(--color-error)}

/* compact qty stepper used in cart lines */
.line .qty-box{display:flex;align-items:center;border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}
.line .qty-box .quantity{display:contents}
.line .qty-box input.qty{width:2.6em;text-align:center;border:none;background:transparent;
  font-family:var(--font-body);font-size:var(--fs-small);padding-block:var(--sp-2);
  -moz-appearance:textfield;appearance:textfield}
.line .qty-box input.qty::-webkit-outer-spin-button,
.line .qty-box input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.line .qty-box label{display:none}
.line .qty-minus,.line .qty-plus{width:36px;height:36px;border:none;background:none;
  font-size:18px;color:var(--color-text);cursor:pointer}
.line .qty-minus:hover,.line .qty-plus:hover{background:var(--cl-cream-2)}

.keep-shopping{margin-top:var(--sp-4);font-size:var(--fs-small)}

.summary{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--sp-6)}
.summary h2{font-size:var(--fs-h4);margin-bottom:var(--sp-4)}

.ship-progress{margin-bottom:var(--sp-6)}
.ship-progress .label{font-size:var(--fs-xs);margin-bottom:var(--sp-2)}
.ship-progress .label b{color:var(--cl-terracotta-dark)}
.ship-progress .label .woocommerce-Price-amount{font-size:inherit}
.ship-progress .bar{height:10px;background:var(--cl-cream-2);border-radius:var(--radius-pill);overflow:hidden}
.ship-progress .fill{height:100%;background:var(--cl-saffron);border-radius:var(--radius-pill);
  transition:width .25s ease}
.ship-progress.done .fill{background:var(--color-success)}

.coupon{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.coupon .cl-input{flex:1;min-width:0}
.coupon .cl-btn{flex:none}
.coupon-applied{font-size:var(--fs-xs);color:var(--color-success);margin-bottom:var(--sp-3)}

.summary .totals{border-top:1px dashed var(--color-border);padding-top:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-small);margin-top:var(--sp-4)}
.summary .totals .row{display:flex;justify-content:space-between}
.summary .totals .row.grand{font-size:var(--fs-h4);font-weight:700;border-top:1px solid var(--color-border);
  padding-top:var(--sp-3);margin-top:var(--sp-2)}
.summary .totals .free{color:var(--color-success);font-weight:var(--fw-body-medium)}
.summary .totals .discount{color:var(--color-success)}
.summary .totals-note{font-size:var(--fs-xs);color:var(--cl-ink-faint)}

.summary button.update-cart{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0;margin:-1px}
.summary .checkout-btn{display:block;text-align:center;text-decoration:none;width:100%;
  margin-top:var(--sp-6);font-size:var(--fs-body);padding-block:var(--sp-4)}
.summary .deadline{background:var(--cl-saffron-light);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);margin-top:var(--sp-4)}
.summary .deadline b{color:var(--cl-terracotta-dark)}

.empty-note{background:var(--color-surface);border:1px dashed var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-12);text-align:center;
  color:var(--color-text-muted);margin-bottom:var(--sp-16)}

@media (max-width: 900px){
  .cart-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  .line{grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto}
  .line .ph{width:84px;height:64px}
  .line .side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}

/* ---------- checkout (matches designs/checkout.html) ---------- */
.steps-nav{display:flex;justify-content:center;gap:var(--sp-2);align-items:center;
  font-size:var(--fs-small);color:var(--cl-ink-faint);margin-block:var(--sp-6) var(--sp-4)}
.steps-nav a{color:var(--color-secondary);text-decoration:none}
.steps-nav .cur{color:var(--color-text);font-weight:var(--fw-body-medium)}

.co-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-8);
  align-items:start;margin-bottom:var(--sp-16)}
.panel{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:var(--sp-6);margin-bottom:var(--sp-6)}
.panel h2{font-size:var(--fs-h4);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.panel h2 .n{width:30px;height:30px;border-radius:50%;background:var(--cl-saffron);
  color:var(--cl-ink);font-family:var(--font-heading);font-weight:900;font-size:var(--fs-small);
  display:grid;place-items:center;flex:none}

/* Woo form rows inside panels */
.panel .frow-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
.panel .form-row{margin:0 0 var(--sp-4);padding:0;display:block;
  width:100% !important;float:none !important} /* beat Woo's 47% float layout */
.panel .form-row-wide,.panel .form-row.notes,.panel .form-row#billing_address_1_field{grid-column:1/-1}
.panel .form-row label{display:block;font-size:var(--fs-small);
  font-weight:var(--fw-body-medium);margin-bottom:var(--sp-2)}
.panel .form-row label .required{color:var(--color-primary);text-decoration:none}
.panel .form-row .woocommerce-input-wrapper{display:block}
.panel .form-row input.input-text,.panel .form-row textarea,.panel .form-row select{
  width:100%;background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--fs-body);
  padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);transition:border-color var(--ease),box-shadow var(--ease)}
.panel .form-row input.input-text:focus,.panel .form-row textarea:focus,.panel .form-row select:focus{
  outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(232,178,58,.25)}

/* choice cards (shipping methods) */
.choices{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5, 1.25rem)}
.choice{display:flex;align-items:center;gap:var(--sp-3);border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--sp-4);cursor:pointer;
  transition:border-color var(--ease);margin-bottom:var(--sp-3)}
.choice:hover{border-color:var(--color-accent)}
.choice.is-on{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(232,178,58,.2)}
.choice input{accent-color:var(--cl-terracotta);width:18px;height:18px;flex:none}
.choice .t{flex:1}
.choice .t b{display:block;font-weight:var(--fw-body-medium)}
.choice .t small{color:var(--cl-ink-faint);font-size:var(--fs-xs)}
.choice .fee{font-weight:700;font-size:var(--fs-small);color:var(--color-text)}
.choice .fee.free{color:var(--color-success)}

/* summary aside */
.co-summary{position:sticky;top:180px}
.minis{margin-bottom:var(--sp-2)}
.mini{display:flex;gap:var(--sp-3);align-items:center;padding-block:var(--sp-3);
  border-bottom:1px solid var(--color-border)}
.mini:last-of-type{border-bottom:none}
.mini .ph{width:56px;height:44px;border-radius:var(--radius-sm);overflow:hidden;flex:none;background:var(--cl-cream-2)}
.mini .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mini .t{flex:1;font-size:var(--fs-small)}
.mini .t small{color:var(--cl-ink-faint);display:block;font-size:var(--fs-xs)}
.mini .p{font-size:var(--fs-small);font-weight:var(--fw-body-medium)}

.co-summary .totals{border-top:1px dashed var(--color-border);padding-top:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-small)}
.co-summary .totals .row{display:flex;justify-content:space-between}
.co-summary .totals .row.grand{font-size:var(--fs-h4);font-weight:700;
  border-top:1px solid var(--color-border);padding-top:var(--sp-3);margin-top:var(--sp-2)}
.co-summary .totals .free{color:var(--color-success);font-weight:var(--fw-body-medium)}
.co-summary .totals .discount{color:var(--color-success)}
.co-summary .deadline{background:var(--cl-saffron-light);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);margin-top:var(--sp-4)}
.co-summary .deadline b{color:var(--cl-terracotta-dark)}
.co-summary .secure{text-align:center;font-size:var(--fs-xs);color:var(--cl-ink-faint);margin-top:var(--sp-3)}

/* payment box (Woo renders #payment inside order review area) */
.co-summary #payment{background:transparent;border-radius:0;margin-top:var(--sp-4)}
.co-summary #payment ul.wc_payment_methods{list-style:none;padding:0;margin:0 0 var(--sp-4);
  border-top:1px dashed var(--color-border);padding-top:var(--sp-4)}
.co-summary #payment li.wc_payment_method{margin-bottom:var(--sp-2)}
.co-summary #payment li.wc_payment_method > label{font-weight:var(--fw-body-medium);
  font-size:var(--fs-small);cursor:pointer}
.co-summary #payment li.wc_payment_method input{accent-color:var(--cl-terracotta);
  margin-inline-end:var(--sp-2)}
.co-summary #payment div.payment_box{background:var(--cl-cream-2);border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--color-text-muted);
  margin-top:var(--sp-2)}
.co-summary #payment .place-order{padding:0;margin-top:var(--sp-2)}
.co-summary #payment .place-order .button{width:100%;font-size:var(--fs-body);
  padding-block:var(--sp-4);border:none;cursor:pointer}
.co-summary .woocommerce-terms-and-conditions-wrapper{font-size:var(--fs-xs);
  color:var(--color-text-muted);margin-bottom:var(--sp-3)}

@media (max-width: 900px){
  .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-summary{position:static}
}
@media (max-width: 640px){
  .panel .frow-wrap{grid-template-columns:minmax(0,1fr)}
}

/* ---------- how it works ---------- */
.step{text-align:center;padding:var(--sp-6)}
.step .num{width:64px;height:64px;margin:0 auto var(--sp-4);border-radius:50%;
  background:var(--cl-saffron);color:var(--cl-ink);font-family:var(--font-heading);
  font-weight:900;font-size:var(--fs-h3);display:grid;place-items:center}
.step h3{margin-bottom:var(--sp-2)}
.step p{color:var(--color-text-muted);font-size:var(--fs-small)}

/* ---------- story ---------- */
.story-ph{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--cl-cream-2)}
.story-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- newsletter ---------- */
.newsletter{background:var(--cl-saffron-light);border-radius:var(--radius-lg);
  padding:var(--sp-12);text-align:center}
.newsletter h2{margin-bottom:var(--sp-2)}
.newsletter p{color:var(--color-text-muted);margin-bottom:var(--sp-6)}

/* newsletter signup form */
.nl-form{max-width:460px;margin:0 auto;text-align:start}
.nl-label{display:block;font-size:var(--fs-small);font-weight:var(--fw-body-medium);
  color:var(--color-text);margin-bottom:var(--sp-2)}
.nl-row{display:flex;gap:var(--sp-2)}
.nl-input{flex:1;min-width:0}
.nl-input.cl-input{
  background:var(--color-surface);font-family:var(--font-body);font-size:var(--fs-body);
  padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);color:var(--color-text);width:100%}
.nl-input.cl-input:focus{outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(232,178,58,.25)}
.nl-btn{flex:none;padding-inline:var(--sp-6)}
.nl-msg{margin-top:var(--sp-3);font-size:var(--fs-small);min-height:1.4em;
  transition:color var(--ease)}
.nl-msg:empty{margin-top:0;min-height:0}
.nl-msg.is-ok{color:var(--color-success)}
.nl-msg.is-err{color:var(--color-error)}
.nl-msg[role=status]{text-align:center}
@media (max-width:560px){
  .nl-row{flex-direction:column}
  .nl-btn{width:100%;padding-block:var(--sp-3)}
}

/* ---------- footer ---------- */
.site-footer{background:var(--cl-ink);color:var(--cl-cream);
  padding-block:var(--sp-12) var(--sp-6);margin-top:var(--sp-16)}
.site-footer .wrap{max-width:var(--content-width)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-8);
  padding-bottom:var(--sp-8);border-bottom:1px solid rgba(251,246,238,.15)}
.foot-grid img{width:220px;height:auto;margin-bottom:var(--sp-4)}
.foot-grid p{font-size:var(--fs-small);color:rgba(251,246,238,.65)}
.foot-grid h4{color:var(--cl-saffron);font-size:var(--fs-small);font-family:var(--font-body);
  font-weight:var(--fw-body-medium);margin-bottom:var(--sp-3);letter-spacing:.5px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:var(--sp-2)}
.foot-grid a{color:rgba(251,246,238,.8);text-decoration:none;font-size:var(--fs-small)}
.foot-grid a:hover{color:var(--cl-saffron)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding-top:var(--sp-6);font-size:var(--fs-xs);color:rgba(251,246,238,.5)}

/* ---------- mobile navigation drawer (M3-style) ----------
   Markup: patterns/header.php. assets/js/nav-drawer.js toggles .is-open on
   the drawer + backdrop. All visuals live here on tokens (no utility classes).
   M3 traits: ink scrim, rounded away-from-edge corners, pill item rows with
   a tonal active indicator. Slides from the RIGHT (inline-start in RTL); the
   translate is hard-coded because transforms have no logical equivalents. */
.cl-drawer-backdrop{
  position:fixed;inset:0;z-index:60;
  background:color-mix(in srgb, var(--cl-ink) 45%, transparent);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.cl-drawer-backdrop.is-open{opacity:1}

.cl-drawer{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:70;
  width:min(84vw,340px);display:flex;flex-direction:column;
  background:var(--color-bg);
  border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  transform:translate3d(100%,0,0);
  transition:transform .3s cubic-bezier(.2,0,0,1)} /* M3 emphasized easing */
.cl-drawer.is-open{transform:translate3d(0,0,0)}

.cl-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--color-border)}
/* Logo fills most of the head row (close icon keeps its corner). */
.cl-drawer-head img{width:100%;max-width:220px;height:auto;display:block}
.cl-drawer-close{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:none;border:none;border-radius:50%;cursor:pointer;
  color:var(--color-text);transition:background-color var(--ease)}
.cl-drawer-close:hover{background:var(--cl-cream-2)}

.cl-drawer-nav{flex:1;overflow-y:auto;padding-block:var(--sp-2)}
.cl-drawer-nav-list{
  list-style:none;margin:0;padding:0 var(--sp-3);display:flex;flex-direction:column}
.cl-drawer-nav-list a{
  display:flex;align-items:center;min-height:48px;padding-inline:var(--sp-4);
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:var(--fs-body);font-weight:var(--fw-body-medium);color:var(--color-text);
  transition:background-color var(--ease),color var(--ease)}
.cl-drawer-nav-list a:hover{background:var(--cl-cream-2)}
.cl-drawer-nav-list .current-menu-item > a{background:var(--cl-saffron-light)}
/* Sub-items: indented under their parent — no collapse/JS, the drawer scrolls. */
.cl-drawer-nav-list .sub-menu{list-style:none;margin:0;padding:0}
.cl-drawer-nav-list .sub-menu a{
  min-height:40px;padding-inline-start:var(--sp-8);
  font-size:var(--fs-small);font-weight:var(--fw-body);color:var(--cl-ink-soft)}
.cl-drawer-nav-list .sub-menu a:hover{color:var(--color-text)}

.cl-drawer-foot{
  padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--color-border)}
.cl-drawer-foot .cart-btn{justify-content:center}
/* The header trims .cart-btn to icon-only on mobile; the drawer has room. */
.cl-drawer-foot .cart-btn .label{display:inline}

/* ---------- responsive ---------- */

/* Mobile menu button (3-line hamburger), shown ≤900px. */
.cl-menu-btn{
  display:none;width:30px;height:24px;padding:0;background:transparent;border:none;
  cursor:pointer;color:var(--color-text);
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor);
  background-size:100% 2px;background-position:0 0,50% 50%,0 100%;background-repeat:no-repeat;
  flex:none}
.cl-menu-icon{display:none}

@media (max-width: 900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Hide the inline desktop nav below tablet; show the menu button. */
  .cl-nav-desktop{display:none}
  .cl-menu-btn{display:block}
}
@media (max-width: 640px){
  .foot-grid{grid-template-columns:1fr}
  .hero{padding-block:var(--sp-8)}
  .newsletter{padding:var(--sp-8) var(--sp-4)}
  /* Tighter header on mobile: cut the site-bar padding/gap. Size the wide
     ~2.96:1 lockup by WIDTH (a slice of the viewport) rather than height, so it
     can never overflow past the hamburger + cart no matter the aspect. */
  .site-bar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2) var(--sp-3)}
  .site-bar .site-logo-link img{height:auto;width:auto;max-width:46vw}
  /* Trim the cart button to icon + count only, reclaiming header space. */
  .cart-btn{padding:var(--sp-2) var(--sp-3)}
  .cart-btn .label{display:none}
}