/*
 * Shared overlay mechanics for MobileNavigation, SearchDrawer, CartDrawer, and Modal shell
 * (Newsletter/Delete-confirm/Cookie-consent). One JS controller (assets/js/overlay.js) drives
 * all of them — see accessibility-spec.md: role="dialog", aria-modal, focus-trapped, Escape closes.
 */

.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.35);
  opacity: 0;
  visibility: hidden;
  /* Art-direction pass: backdrop fade uses the slower duration, paired with the drawer/nav-overlay
     panel entrance below — a deliberate fade-in-then-slide reads calmer than instant UI feedback. */
  transition: opacity var(--animation-duration-slow) var(--animation-easing);
  /* Real bug, found via visual review: this used to share --z-drawer (50) with the drawer panel
     itself — since .site-header only carries --z-header (10), the backdrop rendered ON TOP of
     the sticky header whenever a drawer was open, dimming the search/cart triggers along with
     the rest of the page. Stacking order needed here: page content < backdrop < header < drawer
     panel — a dedicated --z-backdrop token (5, below --z-header) fixes this without touching the
     drawer panel's own z-index (still --z-drawer, still above the header, so the drawer's own
     title/close row is untouched). */
  z-index: var(--z-backdrop);
}
.overlay-backdrop.is-open { opacity: 1; visibility: visible; }
/* Checkout has no backdrop (DESIGN_RULES §11) — simply never instantiate .overlay-backdrop there. */

/* Header interaction lock while Search or Cart is open. The header sits visually above the
   backdrop (z-index above) so it isn't dimmed — but z-index alone doesn't stop clicks from
   reaching regular header links straight through an undimmed header; pointer-events is the
   actual gate. .has-open-drawer is toggled on <body> by GBOverlay.open()/close()
   (assets/js/overlay.js), only for the backdrop-using drawers (Search, Cart) — not the
   full-screen mobile nav overlay, which doesn't need this.

   Real bug, found via review: an earlier version of this rule set pointer-events:none on
   .site-header itself. That doesn't just disable the nav links — with the whole header inert,
   a click "falls through" past it entirely to whatever is painted underneath at that point,
   which is .overlay-backdrop (full-viewport, sits right below the header in z-index). The
   backdrop already closes the open drawer on click (by design, see below) — so clicking a
   blocked nav link was silently closing the drawer as an unintended side effect, not just doing
   nothing. Fixed by putting pointer-events:none on the individual nav elements (hamburger, logo,
   desktop nav links) instead of their container: .site-header/.site-header__inner stay
   pointer-events:auto (the default), so a click on a now-inert link resolves to the header's own
   background — a real, hit-testable, click-handler-less target — and is swallowed there rather
   than reaching the backdrop underneath. */
body.has-open-drawer .site-header__hamburger,
body.has-open-drawer .site-header__logo,
body.has-open-drawer .site-header__nav-desktop {
  pointer-events: none;
}

/**
 * Component: DrawerShell (.drawer) — used by SearchDrawer and CartDrawer.
 * Mobile ~82% viewport width, desktop fixed 380–420px (responsive-spec.md) — min() covers both.
 */
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 82vw);
  background: var(--color-background-surface);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  /* Art-direction pass: was 250ms — slowed to the shared "slow" duration so the drawer reads as a
     considered slide rather than a snap-into-place UI panel. */
  transition: transform var(--animation-duration-slow) var(--animation-easing);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.drawer.is-open { transform: translateX(0); }
/**
 * Modifier: DrawerShell — CartDrawer (.drawer--cart)
 * Botanical-editorial redesign (2026-09-12, explicit request): the shared `.drawer` above stays
 * exactly as SearchDrawer needs it (420px/82vw, near-white --color-background-surface) — this
 * modifier only widens and re-warms the CART instance specifically, same pattern as the existing
 * `.modal--bottom`. Every value below (text/border/action colors, radii, spacing, the .btn
 * checkout CTA) is an EXISTING token, nothing invented for this redesign.
 * Visual pass (2026-09-13, explicit request): background swapped again, --color-background-primary
 * (#F6F2EA) -> --color-background-card (tokens.css — a color-mix of primary + border-default,
 * documented there as "the palette's one existing deeper-ivory tone"). Real issue found live:
 * --color-background-primary is the exact same color as the PAGE background behind the drawer, so
 * the drawer read as having zero contrast/separation from the site — not "too close to white",
 * literally identical to the ivory everywhere else. --color-background-card already exists
 * specifically for "needs to read as a distinct surface" cases; reused here rather than inventing
 * a new tone.
 */
.drawer--cart {
  width: 560px;
  max-width: 92vw;
  background: var(--color-background-card);
  /* Rounded only on the leading (left) edge — the trailing edge is flush with the viewport edge
     it slides in from, so a radius there would never actually be visible. */
  border-radius: var(--radius-large) 0 0 var(--radius-large);
}
@media (max-width: 767px) {
  .drawer--cart { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
}
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-drawer-header-padding-y) var(--space-5); /* 18px/20px — matches source exactly */
  border-bottom: var(--border-width) solid var(--color-border-default);
}
/* Cart's own warm background sits much closer in value to --color-border-default (both light warm
   neutrals) than SearchDrawer's near-white one does — the shared hairline border all but
   disappeared here. A darker, deliberate divider instead of a wider/heavier one.
   Visual pass (2026-09-13, explicit request): padding widened to 28px/32px (was 18px/32px from the
   previous pass) for a more generous editorial header. */
.drawer--cart .drawer__header { padding: 28px var(--space-7); border-bottom-color: color-mix(in srgb, var(--color-text-primary) 16%, transparent); }
@media (max-width: 767px) {
  .drawer--cart .drawer__header { padding-left: var(--space-5); padding-right: var(--space-5); }
}
.drawer__title { font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-heading); }
/* Cart-only: the item count as a small raised superscript ("КОШИК ²") rather than the header
   capsule's own "· N" format — a deliberately different, quieter treatment for the drawer title
   specifically. */
.cart-drawer__count { font-size: 0.5em; font-weight: var(--font-weight-body); margin-left: 2px; }
/**
 * Real bug, found live: the close button's "oversized bordered square" the redesign was asked to
 * remove isn't a mis-set border/background at all — `.drawer__close` has never had either. It's
 * this button legitimately RECEIVING KEYBOARD FOCUS the instant the drawer opens (the shared focus
 * trap, assets/js/overlay.js, moves focus to the dialog's first focusable element — here, that's
 * this button) and rendering its own `:focus-visible` state, a plain 2px outline around the full
 * 44px hit box — around a glyph that (before this pass) was only 16px, so the ring reads as a
 * conspicuous, oversized, seemingly-permanent square rather than a normal focus indicator sized to
 * its icon. Confirmed live: document.activeElement was this exact button right after open().
 * Visual pass (2026-09-13, explicit request — "must NOT look like a button... no background"):
 * the shared `.drawer__close` below still gives Search/Nav a background tint on hover/focus, which
 * is exactly the "button chrome" this request wants gone specifically from the cart's ×. Both
 * states reset to background:none here; a plain color/opacity shift is still a real, visible,
 * WCAG-compliant indicator without ever painting a box behind the glyph.
 */
.drawer--cart .drawer__close svg { width: 26px; height: 26px; min-width: 26px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; }
.drawer--cart .drawer__close:hover { background: none; opacity: 0.6; }
.drawer--cart .drawer__close:focus-visible { outline: none; background: none; opacity: 0.6; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.drawer__footer { padding: var(--space-5); border-top: var(--border-width) solid var(--color-border-default); }

/**
 * Component: DrawerClose (.drawer__close) — lighter-weight close control matching the
 * source's plain "✕" text glyph (16px, no button chrome), while keeping a real 44×44px
 * <button> hit target per accessibility-spec.md (source-priority rule #3: accessibility
 * stays mandatory even where the visual control is smaller).
 */
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-small);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--animation-duration) var(--animation-easing);
}
.drawer__close:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); }
.drawer__close:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }

/**
 * Component: MobileNavigation (.nav-overlay)
 * Purpose: full-screen nav overlay, olive background (per Gentle Botanica.dc.html M2).
 */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-background-accent);
  color: var(--color-text-on-accent);
  z-index: var(--z-drawer);
  transform: translateX(-100%);
  transition: transform var(--animation-duration-slow) var(--animation-easing);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nav-overlay.is-open { transform: translateX(0); }
.nav-overlay__header { display: flex; justify-content: flex-end; padding: var(--space-4) var(--space-5); }
.nav-overlay__header .icon-btn { color: var(--color-text-on-accent); }
.nav-overlay__header .icon-btn:hover { background: color-mix(in srgb, var(--color-text-on-accent) 12%, transparent); }
.nav-overlay__list { padding: var(--space-4) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.nav-overlay__list a {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  color: var(--color-text-on-accent);
  text-decoration: none;
}
.nav-overlay__list a:hover, .nav-overlay__list a:focus-visible { text-decoration: underline; }

/**
 * Component: Modal shell (.modal) — Newsletter popup, Delete-confirm, Cookie-consent.
 * Cookie-consent is bottom-anchored via .modal--bottom, not centered (component-inventory.md).
 */
.modal {
  position: fixed;
  left: 50%; top: 50%;
  width: calc(100% - var(--space-8));
  max-width: 480px;
  background: var(--color-background-surface);
  border-radius: var(--radius-medium);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity var(--animation-duration-slow) var(--animation-easing), transform var(--animation-duration-slow) var(--animation-easing);
  padding: var(--space-6);
}
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.modal--bottom {
  left: 0; right: 0; bottom: 0; top: auto;
  max-width: none;
  width: 100%;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  transform: translateY(100%);
}
.modal--bottom.is-open { transform: translateY(0); }
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); }
.modal__title { font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-heading); margin-bottom: var(--space-4); }

/**
 * Component: SearchDrawer content shell (visual shell only — no live query wiring yet)
 * States: empty, typing/loading, results, no-results (states-spec.md).
 */
.search-drawer__field { margin-bottom: var(--space-6); }
.search-drawer__popular-label { margin-bottom: var(--space-3); }
.search-drawer__popular { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-drawer__popular a {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-label);
}
.search-drawer__popular a:hover { border-color: var(--color-text-primary); }

/**
 * Component: CartDrawer shell (botanical-editorial redesign, 2026-09-12, explicit request)
 *
 * `.drawer__body.cart-drawer__body` (both classes always render together — cart-drawer.php and
 * the woocommerce_add_to_cart_fragments filter, inc/woocommerce-cart.php) becomes the flex column
 * that keeps the header fixed above it, only `.cart-drawer__scroll` (items + order note) growing/
 * scrolling, and `.cart-drawer__footer` (subtotal + checkout) pinned at the bottom without ever
 * needing a fixed height on any of the three — plain flexbox, per the request. This is also the
 * actual fix for the old "huge empty area under two products" bug: `.drawer__body` was a single
 * flex:1 box (correctly sized to fill the drawer) with its content — items AND the subtotal/CTA
 * together — sized to only a fraction of that box's height, and nothing pinned the subtotal/CTA to
 * the box's own bottom edge, so they sat right under the items with dead space stretching below
 * them to the drawer's bottom. Splitting the CTA into its own non-growing flex sibling fixes that
 * at the source rather than papering over it with a min-height guess.
 */
.drawer--cart .drawer__body { padding: 0; display: flex; flex-direction: column; }
/* Visual pass (2026-09-13, explicit request): horizontal padding widened --space-5 (20px) ->
   --space-7 (32px), landing inside the requested 32-40px desktop range and matching the header's
   own horizontal padding (above) so title/items/footer all share one left/right edge instead of
   the items column sitting narrower than the header. */
.cart-drawer__scroll { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-7); }
/* Footer intentionally keeps the ORIGINAL --color-background-primary (lighter than the drawer's
   own --color-background-card above) — a genuinely different, subtly lighter oat tone rather than
   a same-color "card" boundary, satisfying "very subtle slightly different oat tone... do not make
   it look like another card" without adding a second background token. */
/* Divider strengthened 16% -> 24% opacity + 1px -> 1.5px (explicit request: "stronger horizontal
   divider before footer") — still a hairline, not a heavy rule, just more deliberate than the
   item-row dividers above it. */
.cart-drawer__footer { flex-shrink: 0; padding: var(--space-6) var(--space-7); border-top: 1.5px solid color-mix(in srgb, var(--color-text-primary) 24%, transparent); background: var(--color-background-primary); }
@media (max-width: 767px) {
  .cart-drawer__scroll, .cart-drawer__footer { padding-left: var(--space-5); padding-right: var(--space-5); }
}
/* iOS safe-area: on a notched/home-indicator device the footer (and its full-width CTA) would
   otherwise sit flush against the bottom edge, under the home-indicator's own gesture area.
   max() keeps the normal padding on every other device (env() resolves to 0 there). */
@media (max-width: 767px) {
  .cart-drawer__footer { padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
}

.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
}
.cart-drawer__empty p { font-size: var(--font-size-body); margin: 0 0 var(--space-5); }
.cart-drawer__empty .btn { margin-top: 0; }

/**
 * CartDrawer — real line items (inc/woocommerce-cart.php).
 * Image: 64px -> 120px (requested 115-130px range) — a controlled editorial frame, not a tiny
 * thumbnail. Item grid drops its old 3rd `auto` column (the remove control used to live there, a
 * bare × in its own column) now that Remove is a text action inside the controls row below the
 * price, alongside the new quantity stepper.
 */
.cart-drawer__items { list-style: none; margin: 0; padding: 0; }
.cart-drawer__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}
/* Editorial shopping list, not a stack of cards — a hairline between items, first one flush with
   the scroll area's own top padding, last one with no trailing rule. */
.cart-drawer__item:first-child { padding-top: 0; }
.cart-drawer__item:last-child { padding-bottom: 0; border-bottom: none; }
.cart-drawer__item-image { width: 120px; }
.cart-drawer__item-image .responsive-image { aspect-ratio: 1 / 1; border-radius: var(--radius-medium); }
@media (max-width: 767px) {
  .cart-drawer__item { grid-template-columns: 96px 1fr; }
  .cart-drawer__item-image { width: 96px; }
}
/* Product name — existing serif heading face (matches the product page's own title treatment).
   Visual pass (2026-09-13, explicit request): font-size bumped again, --font-size-article-lead
   (19px) -> --font-size-h3 (24px, tokens.css), landing inside the newly requested 22-26px desktop
   range — still an existing token, not a new size. */
.cart-drawer__item-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  line-height: 1.15;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
@media (max-width: 767px) {
  .cart-drawer__item-name { font-size: 21px; }
}
a.cart-drawer__item-name:hover { text-decoration: underline; }
/* Visual pass (2026-09-13, explicit request): replaces the old wc_get_formatted_cart_item_data()
   <dl> (a real cause of the previous "raw WooCommerce metadata" look — its default markup is a
   label+value table). gb_render_cart_drawer_item() now builds this from
   wc_get_formatted_variation() instead, a bare flat string ("10 мл", no label) — landing inside
   the requested 13-14px muted secondary-text range, one plain line under the name. */
.cart-drawer__item-variation { font-size: 13px; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
/* Discovery Set line (inc/discovery-set.php) — compact bullet list of the 6 chosen scents, same
   muted 13px treatment as .cart-drawer__item-variation above (a plain list, not the raw
   wc_get_formatted_cart_item_data() <dl> removed by the fix documented above). */
.cart-drawer__item-scents { list-style: none; margin: 0 0 var(--space-2); padding: 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
/* Line subtotal (qty × unit price, already qty-aware — WC()->cart->get_product_subtotal()) — its
   own line under the variation meta, "clear but not oversized" per the request. font-weight added
   (400 -> --font-weight-heading's 500, reused as the closest existing "medium" weight) per the
   newly requested "medium weight" price treatment. */
.cart-drawer__item-price { font-size: var(--font-size-body); font-weight: var(--font-weight-heading); color: var(--color-text-primary); margin-bottom: var(--space-4); }
.cart-drawer__item-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/**
 * Quantity stepper (new — the old drawer only ever showed static "1 × 750 ₴" text, no way to
 * change it without leaving the drawer). Deliberately NOT the boxed/bordered .quantity component
 * from the product page (assets/css/product.css) — "no giant boxes around each control" per the
 * request — just the glyphs themselves with a generous, borderless click/tap area.
 */
/* Visual pass (2026-09-13, explicit request): glyphs bumped 17px -> 21px and the gap between them
   widened --space-3 (12px) -> --space-4 (16px), landing inside the requested 20-22px/16-20px
   ranges. Still no visible button chrome — background stays transparent at rest, the hover tint
   below is the only visual feedback, exactly as before. */
.cart-drawer__qty { display: inline-flex; align-items: center; gap: var(--space-4); }
.cart-drawer__qty.is-busy { pointer-events: none; opacity: 0.6; }
.cart-drawer__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-small);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--animation-duration) var(--animation-easing);
}
.cart-drawer__qty-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
.cart-drawer__qty-btn:disabled { color: var(--color-text-muted); cursor: not-allowed; }
.cart-drawer__qty-value { min-width: 1.4em; font-size: 16px; text-align: center; color: var(--color-text-primary); }

/**
 * Remove — was a grey circular × button; now a quiet text action, understated per the request.
 * Real bug, found live via a full element.matches() sweep of every loaded stylesheet (guessing
 * from source order alone was actively misleading here): the actual winning rule isn't
 * WooCommerce's at all, it's Storefront's own `assets/css/base/icons.css` — `a.remove` (matched
 * because this element must keep the plain `remove` class for wc-cart-fragments.js's built-in AJAX
 * handler to intercept the click), which sets `text-indent:-9999px` to shove the link's real text
 * off-screen, plus an absolutely-positioned `a.remove::before` Font Awesome "×" glyph meant to be
 * the only visible thing. My first pass reset width/height/overflow/display but never touched
 * text-indent — so "Видалити" was still being pushed off-screen the entire time, just inside a
 * correctly-sized (but empty-looking) box instead of a clipped one. Two real fixes: text-indent:0
 * un-hides the actual text, and `::before { content: none }` removes the stray icon-font glyph
 * that would otherwise sit on top of/before it. `!important` only on the exact properties that
 * source hard-codes (same justified pattern as the other documented Storefront-load-order fights
 * in this codebase, e.g. product.css/checkout.css) — not a blanket override.
 */
/* Visual pass (2026-09-13, explicit request): font-size 12px -> 14px; underline now hover-only
   (was always-on) for a quieter resting state — "underline or subtle underline-on-hover". */
.cart-drawer__item-remove {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  text-indent: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border: none !important;
  background: none !important;
  text-align: left !important;
  color: var(--color-text-muted);
  text-decoration: none;
  text-underline-offset: 2px;
  font-size: 14px;
  font-weight: var(--font-weight-body);
  transition: color var(--animation-duration) var(--animation-easing);
}
.cart-drawer__item-remove::before { content: none !important; }
.cart-drawer__item-remove:hover { color: var(--color-text-primary); text-decoration: underline !important; background: none !important; }

/**
 * Order note (new — "+ Додати примітку до замовлення"). Moved (2026-09-13, explicit request) from
 * inside `.cart-drawer__scroll` to the top of `.cart-drawer__footer` — directly above the subtotal
 * row, matching the requested footer structure — so it stays pinned with the subtotal/CTA rather
 * than scrolling away with a long item list. Persisted server-side (WC session,
 * inc/woocommerce-cart.php) — starts expanded (`.is-expanded`) only when a note already exists, so
 * a fragment refresh from an unrelated change (another item's quantity, a remove) never silently
 * collapses one the customer already wrote.
 */
.cart-drawer__note { margin-bottom: var(--space-5); }
.cart-drawer__note-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-meta);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
  cursor: pointer;
}
.cart-drawer__note.is-expanded .cart-drawer__note-toggle { text-decoration: none; }
.cart-drawer__note-toggle-icon { font-size: 14px; line-height: 1; }
.cart-drawer__note-field { margin-top: var(--space-3); }
.cart-drawer__note-textarea {
  width: 100%;
  min-height: 64px;
  padding: var(--space-3);
  background: var(--color-background-surface);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-medium);
  font-family: var(--font-body);
  font-size: var(--font-size-meta);
  color: var(--color-text-primary);
  resize: vertical;
}
.cart-drawer__note-textarea:focus-visible { outline: none; border-color: var(--color-action-primary); }
.cart-drawer__note-textarea::placeholder { color: var(--color-text-muted); }

/* Footer — subtotal + shipping microcopy + checkout CTA, pinned (see .cart-drawer__footer above). */
.cart-drawer__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.cart-drawer__subtotal span:last-child { font-weight: var(--font-weight-emphasis); }
.cart-drawer__shipping-note { font-size: var(--font-size-meta); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
/* Checkout CTA reuses the sitewide .btn primary exactly (dark botanical green, warm ivory text,
   --radius-small — "consistent with the site's current UI", not a new pill shape) — only height is
   taller here, landing inside the requested 54-58px range instead of .btn's shared 44px. Scoped to
   this footer so no other .btn instance sitewide grows with it. */
/* Font-size 13px -> 14px and weight 400 -> 500 (reusing --font-weight-heading's own value, the
   closest existing "medium" weight in the type system — no new weight introduced), landing inside
   the requested 14-15px/medium-weight range; letter-spacing/radius/color untouched — already
   .btn's own existing --letter-spacing-button (0.03em) and --radius-small, "the site's existing
   button radius, not excessive pill styling" per the request. */
.cart-drawer__footer .btn { min-height: 56px; font-size: 14px; font-weight: var(--font-weight-heading); }