/*
 * Kalpazani design tokens
 *
 * Section 1 is copied VERBATIM from "Kalpazani 5 Style Guide" → 3 Developer tokens.
 * Do not edit it by hand; if the style guide changes, re-paste it.
 *
 * Section 2 applies the breakpoint values that the style guide gives in the
 * comments of section 1 (e.g. "16px mobile; 32px tablet; 60px desktop").
 * Every other CSS file in the theme uses these custom properties only.
 */

/* ==== 1. Style guide token block (verbatim) ==================================== */
:root {
  /* ── Breakpoints (use literal values in media queries) ─────────────
     mobile  : 0–767px     designed at 390px
     tablet  : 768–1199px  derived (not in approved files)
     desktop : ≥1200px     designed at 1440px; container caps at 1440px  */

  /* ── Colors · base ─────────────────────────────────────────────── */
  --color-bg:            #FFF8F0;  /* page background, cream */
  --color-surface:       #FFFFFF;  /* cards, panels */
  --color-surface-warm:  #FFFBF6;  /* zebra rows, hours table */
  --color-input-bg:      #FFFDFA;  /* form field fill */
  --color-selected-bg:   #FFFBF2;  /* selected radio-card fill */
  --color-image-bg:      #F7F5F2;  /* product image well */
  --color-ink:           #1F1F24;  /* text, secondary buttons, footer */
  --color-text-2:        #4A4650;  /* secondary body text */
  --color-muted:         #6A6470;  /* meta, labels, inactive tabs */
  --color-subtle:        #8A8490;  /* old price, placeholder (large/decorative only) */
  --color-disabled:      #B5ADA3;  /* disabled text/icons */
  --color-line:          #EFE6DA;  /* dividers, card/chip borders */
  --color-border:        #E2D8CA;  /* input borders, stepper, toggles off */
  --color-border-strong: #DCD2C4;  /* dashed placeholders, disabled arrows */
  --color-skeleton:      #F5EEE4;
  --color-scrim:         rgba(31, 31, 36, .45);
  --color-scrim-mobile:  rgba(31, 31, 36, .50);

  /* ── Colors · CTA (buying actions ONLY) ────────────────────────── */
  --color-cta:           #DC2B1E;
  --color-cta-hover:     #C02316;  /* proposed */
  --color-cta-active:    #A51D12;  /* proposed */
  --color-on-cta:        #FFFFFF;
  --color-ink-hover:     #3A3A42;  /* proposed: secondary hover */

  /* ── Colors · logo tiles (always with ink text) ────────────────── */
  --tile-orange: #F59A1B;  /* sale badge, stars, age 3–5 */
  --tile-yellow: #F4D40C;  /* age 0–12m, highlights */
  --tile-lime:   #B9D72B;  /* "Ново!", age 1–3 */
  --tile-green:  #52C41F;  /* age 12+, in-stock dot */
  --tile-teal:   #22D0AA;  /* age 5–8, step 1 */
  --tile-blue:   #2AA3E0;  /* age 8–12, info */

  /* ── Colors · tints (light section / tile backgrounds) ─────────── */
  --tint-yellow: #FFF3C4;
  --tint-orange: #FFE6CC;
  --tint-lime:   #EEF6D0;
  --tint-green:  #E0F4D6;
  --tint-teal:   #D9F5EC;
  --tint-blue:   #DDEFFA;
  --tint-neutral:#F1ECE4;

  /* ── Colors · semantic ─────────────────────────────────────────── */
  --color-sale:        var(--tile-orange);
  --color-new:         var(--tile-lime);
  --color-star:        var(--tile-orange);
  --color-success:     #3F8A1A;  /* text */
  --color-success-dot: var(--tile-green);
  --color-success-bg:  var(--tint-green);
  --color-warning:     #E0B800;  /* dot only */
  --color-warning-bg:  var(--tint-yellow);
  --color-info:        var(--tile-blue);  /* dot/icon only */
  --color-info-bg:     var(--tint-blue);
  --color-error:       #B3261E;  /* proposed — never reuse CTA red */
  --color-error-bg:    #FCE8E6;  /* proposed */

  /* ── Colors · footer (on ink) ──────────────────────────────────── */
  --color-footer-text: #E9E2D8;
  --color-footer-link: #BFB8AE;
  --color-footer-meta: #9A938A;
  --color-footer-line: #3A3A42;

  /* ── Fonts ─────────────────────────────────────────────────────── */
  --font-heading: "Rubik", system-ui, sans-serif;   /* 500–900, cyrillic */
  --font-body:    "Nunito", system-ui, sans-serif;  /* 400–800, cyrillic */
  --font-mono:    ui-monospace, Menlo, monospace;   /* SKU only */

  /* ── Type scale (mobile 390 → desktop 1440) ────────────────────── */
  --fs-display: clamp(2rem, 1.536rem + 1.905vw, 3.25rem);       /* 32 → 52 */
  --fs-h1:      clamp(2rem, 1.721rem + 1.143vw, 2.75rem);       /* 32 → 44 */
  --fs-h2:      clamp(1.625rem, 1.346rem + 1.143vw, 2.375rem);  /* 26 → 38 */
  --fs-h3:      clamp(1.375rem, 1.189rem + .762vw, 1.875rem);   /* 22 → 30 */
  --fs-h4:      clamp(1.125rem, 1.032rem + .381vw, 1.375rem);   /* 18 → 22 */
  --fs-h5:      clamp(.9375rem, .868rem + .286vw, 1.125rem);    /* 15 → 18 */
  --fs-h6:      1rem;                                           /* 16 */
  --fs-body-l:  clamp(1rem, .977rem + .095vw, 1.0625rem);       /* 16 → 17 */
  --fs-body-m:  clamp(.9375rem, .914rem + .095vw, 1rem);        /* 15 → 16 */
  --fs-body-s:  clamp(.875rem, .852rem + .095vw, .9375rem);     /* 14 → 15 */
  --fs-small:   clamp(.8125rem, .789rem + .095vw, .875rem);     /* 13 → 14 */
  --fs-caption: clamp(.75rem, .727rem + .095vw, .8125rem);      /* 12 → 13 */
  --fs-eyebrow: .75rem;                                         /* 12 */
  --fs-price-l: clamp(2rem, 1.814rem + .762vw, 2.5rem);         /* 32 → 40 */
  --fs-price-m: clamp(1.0625rem, .970rem + .381vw, 1.3125rem);  /* 17 → 21 */
  --fs-total:   clamp(1.625rem, 1.486rem + .571vw, 2rem);       /* 26 → 32 */
  --fs-badge:   clamp(.75rem, .727rem + .095vw, .8125rem);      /* 12 → 13 */
  --fs-btn-l:   clamp(1rem, .930rem + .286vw, 1.1875rem);       /* 16 → 19 */
  --fs-btn-m:   clamp(.9375rem, .914rem + .095vw, 1rem);        /* 15 → 16 */
  --fs-btn-s:   .9375rem;                                       /* 15 */

  --fw-regular: 400;  --fw-semibold: 600;  --fw-bold: 700;
  --fw-extrabold: 800;  --fw-black: 900;

  --lh-tight:   1.05;  /* display, h1 */
  --lh-heading: 1.15;  /* h2 */
  --lh-snug:    1.2;   /* h3, h4 */
  --lh-ui:      1.3;   /* h5, h6, card titles */
  --lh-body:    1.5;
  --lh-long:    1.6;   /* product description */

  --ls-display: -.01em;
  --ls-eyebrow: .06em;  /* uppercase brand label */

  /* ── Spacing (4px base) ────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 40px;  --space-10: 48px; --space-11: 56px; --space-12: 64px;
  --space-13: 72px; --space-14: 80px;

  --container-max: 1440px;
  --container-pad: 16px;          /* mobile; 32px tablet; 60px desktop */
  --grid-gap:      12px;          /* mobile; 16px tablet; 24px desktop */
  --section-gap:   32px;          /* mobile; 48px tablet; 64px desktop */
  --sidebar-width: 288px;
  --header-search-h: 56px;        /* 48px mobile */
  --tap-min: 44px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-tile-sm: 4px;   /* mobile badges, small tags */
  --radius-tile:    5px;   /* badges, age tag on image */
  --radius-tile-lg: 8px;   /* big price tiles, avatar tile */
  --radius-check:   6px;   /* checkbox */
  --radius-age:     12px;  /* age tiles (10px mobile) */
  --radius-image:   14px;  /* image well in card (12px mobile) */
  --radius-input:   14px;
  --radius-card:    20px;  /* product/content cards (16px mobile) */
  --radius-panel:   24px;  /* hero, promo, modal, summary */
  --radius-band:    28px;  /* newsletter band, bottom-sheet top */
  --radius-pill:    999px; /* buttons, chips, search */
  --radius-round:   50%;   /* icon buttons, category bubbles */

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-card:       0 1px 2px rgba(31,31,36,.05), 0 10px 28px rgba(31,31,36,.06);
  --shadow-card-hover: 0 24px 48px rgba(31,31,36,.14);
  --shadow-overlay:    0 30px 80px rgba(31,31,36,.25);  /* mega menu, modal, drawer */
  --shadow-sticky:     0 -10px 30px rgba(31,31,36,.08); /* mobile sticky bars */
  --shadow-icon:       0 2px 8px rgba(31,31,36,.12);    /* icon buttons on images */
  --shadow-cta-sm:     0 4px 12px rgba(220,43,30,.3);
  --shadow-cta-lg:     0 8px 20px rgba(220,43,30,.3);
  --shadow-tile:       0 6px 0 rgba(31,31,36,.12);      /* 4px offset on mobile */
  --focus-ring:        0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-ink); /* proposed */

  /* ── Borders ───────────────────────────────────────────────────── */
  --border-hairline: 1px solid var(--color-line);
  --border-field:    1.5px solid var(--color-border);
  --border-chip:     1.5px solid var(--color-line);
  --border-strong:   2px solid var(--color-ink);   /* search, outline btn, selected */
  --border-tab:      3px solid var(--color-ink);

  /* ── Tiles ─────────────────────────────────────────────────────── */
  --tile-rotate-badge: -4deg;
  --tile-rotate-age:    3deg;   /* age tag on product image */
  --tile-rotate-range:  2deg;   /* age/gift tiles alternate ±2–3deg */
  --tile-rotate-marker: -8deg;  /* section-heading square, ±6–10deg */

  /* ── Motion (proposed) ─────────────────────────────────────────── */
  --dur-fast: 120ms;   /* buttons, color changes */
  --dur-base: 200ms;   /* card lift, icon reveal, dropdowns */
  --dur-slow: 320ms;   /* drawers, bottom sheet, modal */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --lift-card: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --lift-card: none; }
}

/* ==== 2. Breakpoint overrides (values taken from the comments in section 1) ===== */
/* mobile 0–767 · tablet 768–1199 · desktop ≥1200 (literal values, see breakpoints) */

@media (max-width: 767px) {
  :root {
    --header-search-h: 48px;                       /* "56px; 48px mobile" */
    --radius-age:      10px;                       /* "12px (10px mobile)" */
    --radius-image:    12px;                       /* "14px (12px mobile)" */
    --radius-card:     16px;                       /* "20px (16px mobile)" */
    --shadow-tile:     0 4px 0 rgba(31,31,36,.12); /* "4px offset on mobile" */
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --grid-gap:      16px;
    --section-gap:   48px;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad: 60px;
    --grid-gap:      24px;
    --section-gap:   64px;
  }
}

/* ==== 3. Component tokens (geometry from the approved mockups) ================ */
/* Values the style guide shows on components but doesn't name as tokens.        */
/* Kept here so no other CSS file holds a raw size, color or radius.              */

:root {
  /* Site width: wider than the guide's 1440px (client, 2026-10-23), so the hero title fits in two lines */
  --container-max:   1600px;

  /* Logo */
  --logo-col:        260px;   /* header grid column */
  --logo-w:          260px;   /* = --logo-col */
  --logo-w-mobile:   180px;
  --logo-w-drawer:   180px;
  --logo-w-footer:   240px;

  /* Icons */
  --icon-size:       24px;
  --icon-sm:         20px;    /* search (desktop), drawer close */
  --icon-xs:         18px;    /* search (mobile), "Всички категории" */
  --icon-xxs:        14px;    /* top bar */

  /* Header */
  --topbar-h:        38px;
  --topbar-tile:     10px;    /* lime square before the delivery note */
  --topbar-tile-radius: 2px;
  --nav-h:           56px;
  --nav-pill-h:      42px;
  --header-action-w: 68px;    /* icon + label column */
  --header-icon-box: 28px;
  --badge-h:         20px;    /* counter bubble */
  --badge-fs:        .6875rem; /* 11px */
  --search-btn-h:    44px;
  --search-icon:     var(--icon-sm);
  --tile-pad-sm:     2px 8px; /* "%" tile */

  /* Ghost button states (style guide 2.1 button matrix) */
  --color-ghost-hover:  rgba(31, 31, 36, .06);
  --color-ghost-active: rgba(31, 31, 36, .10);

  /* Focus ring on ink surfaces (top bar, footer): the proposed ring, inverted */
  --focus-ring-on-ink: 0 0 0 3px var(--color-ink), 0 0 0 5px var(--color-bg);

  /* Mega menu */
  --mega-cats-w:       280px;
  --mega-promo-w:      300px;
  --mega-row-h:        46px;
  --mega-row-gap:      2px;
  --mega-title-fs:     1.625rem; /* 26px: between H3 and H4, not resolved by the style guide */
  --mega-thumb-h:      82px;
  --mega-card-inset:   10px;     /* image inset, kept like the product card's */
  --mega-card-radius:  16px;
  --mega-thumb-radius: 10px;
  --mega-promo-radius: 18px;
  --mega-promo-media-min: 150px;

  /* Mobile drawer */
  --drawer-w:        340px;
  --drawer-row-h:    56px;
  --drawer-row-fs:   1.0625rem;  /* 17px */

  /* Footer */
  --footer-logo-radius: 10px;
  --footer-row-h:    52px;       /* mobile accordion row */
  --footer-plus-fs:  1.25rem;    /* 20px "+" */
  --border-footer:   1px solid var(--color-footer-line);
  --pay-badge-h:     30px;
  --pay-badge-fs:    .75rem;     /* 12px */
}

@media (max-width: 767px) {
  :root {
    --topbar-h:     32px;
    --topbar-tile:  8px;
    --badge-h:      18px;
    --badge-fs:     .625rem;     /* 10px */
    --search-icon:  var(--icon-xs);
    --pay-badge-h:  26px;
    --pay-badge-fs: .6875rem;    /* 11px */
  }
}

/* ==== 4. Component tokens: buttons, product card, listing (mockup 2, guide 2.1–2.6) == */

:root {
  /* Buttons (2.1): L 60 / M 52 / S 44 / XS 40 */
  --btn-h-l:   60px;
  --btn-h-m:   52px;
  --btn-h-s:   44px;
  --btn-h-xs:  40px;
  --btn-pad-l: 32px;
  --btn-pad-m: 28px;
  --btn-pad-s: 22px;
  --btn-pad-xs: 14px;
  --color-ink-active: #000000;          /* 2.1 secondary :active */

  /* Product card (2.4) */
  --card-inset:      10px;              /* image well inset (kept as geometry) */
  --card-image-h:    210px;
  --card-body-pad:   6px 18px 18px;     /* kept as geometry, see inconsistencies #21 */
  --card-name-fs:    1rem;              /* 16px, Rubik 600 */
  --card-name-min:   42px;              /* 2 lines */
  --rating-row-h:    18px;
  --card-icon:       36px;              /* wishlist circle */
  --card-icon-hover: 40px;              /* hover icons */
  --card-cta:        46px;              /* red cart circle */
  --card-pill-h:     36px;              /* "Бърз преглед" */
  --card-pill-bg:    rgba(31, 31, 36, .88);
  --card-oos-opacity: .45;
  --badge-pad:       3px 9px;
  --age-tag-pad:     3px 8px;
  --status-dot:      8px;
  --color-star-empty: var(--color-border); /* #E2D8CA, guide 2.5 (proposed) */

  /* Listing (2.6, mockup 2) */
  --chip-h:          38px;              /* active-filter chip */
  --chip-x:          24px;              /* × inside the chip */
  --subcat-chip-h:   44px;
  --check:           22px;              /* filter checkbox */
  --filter-row-h:    40px;
  --filter-head-h:   44px;
  --age-filter-h:    44px;
  --toggle-w:        44px;
  --toggle-h:        26px;
  --toggle-knob:     20px;
  --range-thumb:     20px;
  --range-track:     4px;
  --progress-w:      240px;
  --progress-h:      4px;
  --sheet-handle-w:  44px;
  --sheet-handle-h:  5px;
  --sheet-top:       150px;             /* bottom sheet starts below this */
  --toast-bg:        var(--color-ink);
}

@media (max-width: 767px) {
  :root {
    --card-inset:      6px;
    --card-image-h:    140px;
    --card-body-pad:   4px 12px 12px;
    --card-name-fs:    .875rem;         /* 14px */
    --card-name-min:   36px;
    --card-cta:        var(--tap-min);  /* 44px */
    --badge-pad:       2px 7px;
    --age-tag-pad:     2px 6px;
    --btn-h-l:         56px;
    --btn-h-m:         48px;
    --age-filter-h:    48px;
    --check:           24px;
    --filter-row-h:    46px;
    --range-thumb:     24px;
  }
}

/* ==== 4b. Catalogue page (mockup 2) ====================================== */
:root {
  --catalog-gap:     36px;               /* sidebar 288 + 36 gap + 4 columns (guide breakpoints) */
  --radius-age-sm:   10px;               /* age tiles at filter / mobile size */
  --chip-x-bg:       rgba(255, 255, 255, .18);
  --chip-sm-h:       34px;
  --menu-w:          260px;              /* sort dropdown */
  --menu-radius:     16px;
  --sheet-title-fs:  1.5rem;             /* 24px "Филтри" */
  --measure:         760px;              /* long-text line length (guide body copy) */
  --border-w-strong: 2px;                /* width of --border-strong */
  --border-w-thumb:  3px;                /* price slider handle ring */
}

@media (max-width: 767px) {
  :root {
    --subcat-chip-h: 40px;
  }
}

/* ==== 5. Product page (mockup 2 "Продукт", guide 2.2 stepper, 2.5 variations) === */
:root {
  /* Layout */
  --pdp-info-w:        560px;            /* info column (desktop grid 1fr 560px) */
  --pdp-gap:           56px;
  --gallery-h:         640px;
  --gallery-thumb:     96px;
  --gallery-thumb-border: 2.5px;
  --gallery-pill-h:    40px;             /* "1 / 5 · Увеличи" */
  --gallery-dot:       8px;
  --gallery-dot-active: 20px;
  --color-dot:         rgba(31, 31, 36, .25);
  --badge-l-pad:       4px 12px;         /* badge on the main image */
  --fs-badge-l:        1rem;             /* 16px */
  --radius-badge-l:    6px;

  /* Info column */
  --fs-price-old:      clamp(1.0625rem, .993rem + .286vw, 1.25rem); /* 17 → 20 */
  --save-pad:          6px 12px;
  --age-tile-pad:      4px 10px;
  --fs-age-tile:       1.0625rem;        /* 17px */
  --facts-sep-h:       24px;
  --swatch:            52px;
  --swatch-pad:        4px;
  --swatch-ring:       2.5px;
  --option-min-w:      96px;
  --option-h:          52px;
  --radius-option:     14px;
  --wish-btn:          60px;             /* ♡ next to "Добави в количката" */
  --service-tile:      40px;
  --service-pad:       6px 22px;         /* white box: kept as geometry */
  --service-row-pad:   14px;
  --radius-marker:     3px;              /* section-title square */
  --section-marker:    18px;

  /* Quantity stepper (guide 2.2): L 60 on the product page, M 48 in the cart */
  --stepper-l-btn:     52px;
  --stepper-l-val:     36px;
  --stepper-m-h:       48px;
  --stepper-m-btn:     44px;
  --stepper-m-val:     28px;
  --fs-stepper-sign:   1.5rem;           /* 24px */
  --fs-stepper-sign-m: 1.25rem;          /* 20px */
  --fs-stepper-val:    1.125rem;         /* 18px */

  /* Tabs / accordion / specs / reviews */
  --tab-h:             56px;
  --accordion-h:       58px;
  --fs-accordion:      1.0625rem;        /* 17px */
  --fs-accordion-icon: 1.375rem;         /* 22px "+" */
  --tabs-min-h:        340px;
  --specs-key-w:       280px;
  --specs-max-w:       820px;
  --reviews-aside-w:   300px;
  --fs-review-score:   3.5rem;           /* 56px */
  --rating-star:       2rem;             /* review form star */

  /* Similar products, sticky bar, zoom */
  --similar-card-w:    160px;            /* mobile swipe row */
  --sticky-btn-h:      54px;
  --fs-sticky-price:   1.3125rem;        /* 21px */
  --lightbox-nav:      56px;
}

@media (max-width: 1199px) {
  :root {
    --gallery-h:       440px;
  }
}

@media (max-width: 767px) {
  :root {
    --gallery-h:       340px;
    --badge-l-pad:     3px 10px;
    --fs-badge-l:      .875rem;          /* 14px */
    --radius-badge-l:  var(--radius-tile);
    --save-pad:        4px 10px;
    --age-tile-pad:    3px 9px;
    --fs-age-tile:     .9375rem;         /* 15px */
    --swatch:          48px;
    --option-h:        48px;
    --radius-option:   12px;
    --service-tile:    36px;
    --service-pad:     4px 16px;
    --service-row-pad: 12px;
    --lightbox-nav:    var(--tap-min);
  }
}

/* ==== 6. Cart, checkout, account (mockup 3) =============================== */
:root {
  --cart-summary-w:     420px;
  --checkout-summary-w: 440px;
  --flow-gap:           40px;            /* columns gap (cart, checkout, account) */
  --cart-thumb:         110px;
  --cart-row-pad:       22px;
  --summary-pad:        28px;
  --fs-summary-total:   1.875rem;        /* 30px cart, 32px checkout = --fs-total */
  --free-ship-h:        8px;
  --step-tile:          32px;
  --step-line:          40px;            /* line between the header steps */
  --ship-card-min-h:    118px;
  --radio:              22px;
  --radio-dot:          10px;
  --order-thumb:        60px;
  --qty-bubble:         22px;
  --account-nav-w:      260px;
  --account-row-h:      48px;
  --avatar:             40px;
  --order-cols:         140px 140px minmax(0, 1fr) 160px 120px 130px;
  --details-key-w:      120px;
  --mobile-bar-btn-h:   56px;
  --thankyou-tile:      56px;
  --ship-card-min-w:    10rem;
  --fact-min-w:         9rem;
  --address-min-w:      14rem;
  --terms-max-h:        12rem;
  --busy-opacity:       .6;              /* cart while WooCommerce updates it */
  --border-w-hair:      1px;
  --border-dashed:      1.5px dashed var(--color-border-strong); /* card form placeholder (mockup 3) */
}

@media (max-width: 767px) {
  :root {
    --cart-thumb:       84px;
    --cart-row-pad:     12px;
    --summary-pad:      18px;
    --fs-summary-total: 1.625rem;      /* 26px */
    --free-ship-h:      6px;
    --ship-card-min-h:  56px;
    --account-row-h:    var(--tap-min);
  }
}

/* ==== 7. Homepage widgets (mockup 1; guide 1.3 spacing, 1.4 tiles/doodles) ==== */
:root {
  /* Section rhythm: --section-gap between blocks; bands (gift finder) get more air */
  --band-gap:          80px;             /* "80px only around full-bleed bands" */
  --wave-h:            40px;             /* wavy divider: 40 desktop / 20 mobile */
  --page-end-gap:      var(--space-13);  /* 72px before newsletter / footer */

  /* Hero + promo tiles */
  --hero-min-h:        440px;
  --hero-pad:          var(--space-11);  /* guide: "56 Hero padding" */
  --hero-text-w:       380px;
  --fs-hero-title:     clamp(1.75rem, 3.85vw - 1.0625rem, 2.75rem); /* the hero title stays on 2 lines (desktop 28 → 44; tablet and phone values below) */
  --hero-media-h:      190px;            /* phones: photo above the text */
  --promo-media:       130px;
  --promo-pad:         var(--space-7);   /* guide: "28 Promo/gift tile padding" */
  --badge-hero-pad:    4px 12px;
  --fs-badge-hero:     .875rem;          /* 14px */
  --fs-badge-promo:    .9375rem;         /* 15px */

  /* Doodles (guide 1.4): star 26–44px, squiggle 70–80px */
  --doodle-star:       44px;
  --doodle-star-sm:    34px;
  --doodle-squiggle-w: 80px;
  --doodle-squiggle-h: 20px;
  --doodle-hero-x:     44%;              /* positions from mockup 1 */
  --doodle-hero-y:     40px;
  --squiggle-hero-x:   46%;
  --squiggle-hero-y:   44px;
  --doodle-gift-x:     260px;
  --doodle-gift-y:     -30px;

  /* Category bubbles, age tiles, brand strip */
  --bubble:            128px;
  --bubble-label-min:  38px;             /* two lines of the label */
  --bubble-letter:     44px;             /* tile with the initial when there is no photo */
  --fs-bubble-letter:  1.5rem;           /* 24px */
  --age-tile-h:        132px;
  --fs-age-tile-big:   2.875rem;         /* 46px */
  --brand-chip-h:      52px;
  --brand-chip-min-w:  90px;
  --brand-logo-h:      28px;

  /* Rotations: age / gift tiles alternate −3, +2, −2, +3; trust icons −4, +3, −3, +4 */
  --rotate-a:          -3deg;
  --rotate-b:          2deg;
  --rotate-c:          -2deg;
  --rotate-d:          3deg;
  --rotate-e:          4deg;
  --marker-tilt:       8deg;             /* section square tilted the other way */

  /* Product rows */
  --row-arrow:         var(--tap-min);
  --border-arrow:      1.5px solid var(--color-ink);
  --row-cols:          5;
  --row-shadow-room:   var(--space-10);  /* room for the card hover lift and shadow */

  /* Gift finder band + trust strip */
  --gift-col:          380px;
  --fs-gift-title:     clamp(1.625rem, 1.207rem + 1.714vw, 2.75rem); /* 26 → 44 */
  --fs-gift-amount:    3rem;             /* 48px */
  --gift-amount-pad:   6px 16px;
  --trust-icon:        52px;
  --trust-glyph:       26px;
  --trust-overlap:     var(--space-9);   /* trust card overlaps the band (36 → 40) */

  /* Stores, blog, newsletter */
  --store-media-h:     150px;
  --post-media-h:      220px;
  --scroll-card-w:     78%;              /* phones: swipe rows of stores and posts */
  --newsletter-form-w: 560px;
  --newsletter-pad:    var(--space-10) var(--space-11); /* 48 / 56 */
  --fs-newsletter:     2.25rem;          /* 36px */
  --input-pill-h:      48px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --hero-min-h:        360px;
    --hero-pad:          var(--space-8);
    --fs-hero-title:     clamp(1.5rem, 4.8vw - .6875rem, 2.75rem); /* 2 lines in the half-width card */
    --band-gap:          64px;
    --bubble:            104px;
    --age-tile-h:        100px;
    --fs-age-tile-big:   2.25rem;         /* 36px */
    --row-cols:          3;
    --trust-icon:        44px;
  }
}

@media (max-width: 767px) {
  :root {
    --band-gap:          40px;
    --wave-h:            20px;
    --page-end-gap:      var(--section-gap); /* mockup 24; the footer's own gap (32) is the minimum */
    --hero-pad:          var(--space-5) var(--space-6) var(--space-6); /* 20 22 24 → 20 24 24 */
    --fs-hero-title:     clamp(1.5rem, 7vw, 2rem);  /* 2 lines from 360px */
    --badge-hero-pad:    3px 10px;
    --fs-badge-hero:     .8125rem;        /* 13px */
    --fs-badge-promo:    .8125rem;
    --promo-pad:         var(--space-4);
    --doodle-star:       30px;
    --bubble:            78px;
    --bubble-label-min:  0px;
    --bubble-letter:     32px;
    --fs-bubble-letter:  1.125rem;        /* 18px */
    --age-tile-h:        84px;
    --fs-age-tile-big:   1.75rem;         /* 28px */
    --brand-chip-h:      44px;
    --row-cols:          2;
    --fs-gift-amount:    1.5rem;          /* 24px */
    --gift-amount-pad:   3px 8px;
    --trust-icon:        40px;
    --trust-glyph:       var(--icon-sm);
    --trust-overlap:     0px;
    --post-media-h:      180px;
    --newsletter-pad:    var(--space-6) var(--space-5); /* 24 / 20 */
    --fs-newsletter:     1.375rem;        /* 22px */
  }
}


/* ==== 8. Lists, quick view, brands, stores, returns, empty states (mockup 4, guide 2.7) == */
:root {
  /* Empty state (guide 2.7: letter tiles, H1-mobile heading, one button, chips) */
  --empty-tile-w:      60px;
  --empty-tile-h:      66px;
  --fs-empty-tile:     2.375rem;         /* 38px */
  --fs-empty-title:    2rem;             /* "H1-mobile" 32px (mockup 28 → H1 mobile) */
  --empty-max-w:       560px;
  --chip-l-h:          var(--tap-min);   /* suggestion chips 44px */

  /* Quick view (guide 2.7, proposed) */
  --qv-max-w:          760px;
  --qv-pad:            var(--space-5);   /* 20px */
  --qv-image-h:        340px;
  --qv-thumb:          56px;
  --qv-close:          var(--tap-min);
  --fs-qv-price:       1.875rem;         /* 30px */
  --qv-info-pad-end:   var(--space-11);  /* room for the × (56px) */

  /* Wishlist / compare */
  --compare-col-min:   220px;
  --compare-key-w:     180px;
  --compare-thumb:     140px;

  /* Brands A–Z (mockup 4) */
  --az-letter:         var(--tap-min);   /* 44px letter buttons */
  --az-letter-rotate:  -6deg;
  --az-search-w:       360px;
  --az-group-key:      100px;
  --az-group-tile:     64px;
  --az-group-rotate-a: -5deg;
  --az-group-rotate-b: 4deg;
  --az-scroll-margin:  80px;             /* room for the sticky letter bar */
  --fs-az-group:       2.125rem;         /* 34px */
  --brand-top-h:       90px;
  --fs-brand-top:      1.375rem;         /* 22px */
  --brand-pill-h:      48px;

  /* Stores page (mockup 4) */
  --store-photo-h:     200px;
  --store-city-pad:    6px 14px;
  --store-city-radius: 7px;
  --store-rotate-a:    -4deg;
  --store-rotate-b:    3deg;
  --store-rotate-c:    -3deg;
  --store-city-drop:   -18px;            /* city tile hangs over the photo edge */
  --store-body-top:    34px;             /* clears the hanging city tile */
  --store-map-h:       160px;
  --fs-store-phone:    1.1875rem;        /* 19px */
  --fs-store-address:  1.0625rem;        /* 17px */
  --open-dot:          9px;
  --stores-doodle-x:   560px;
  --stores-doodle-y:   40px;
  --stores-doodle-w:   70px;

  /* Returns form */
  --returns-max-w:     720px;
}

@media (max-width: 1199px) {
  :root {
    --qv-image-h:        300px;
    --stores-doodle-x:   55%;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-empty-tile:     2rem;           /* 32px */
    --empty-tile-w:      52px;
    --empty-tile-h:      58px;
    --az-group-key:      56px;
    --az-group-tile:     48px;
    --fs-az-group:       1.625rem;       /* 26px */
    --brand-top-h:       72px;
    --fs-brand-top:      1.125rem;       /* 18px */
    --store-photo-h:     170px;
    --compare-col-min:   160px;
    --compare-key-w:     110px;
    --compare-thumb:     100px;
  }
}

/* Empty state: geometry from mockup 4 (390px screens) */
:root {
  --empty-pad-top:     var(--space-10);  /* 48px above the tiles */
  --empty-tile-gap:    6px;
  --empty-tile-radius: 6px;
  --empty-tile-shadow: 0 5px 0 rgba(31, 31, 36, .14);
  --empty-tile-1:      rotate(-6deg);
  --empty-tile-2:      rotate(4deg) translateY(-6px);
  --empty-tile-3:      rotate(-3deg) translateY(4px);
  --empty-tile-4:      rotate(8deg) translateY(-2px);
  --empty-star:        26px;
  --empty-star-x:      -40px;            /* beside the last tile */
  --empty-star-y:      -26px;
  --empty-cta-h:       54px;
  --empty-cta-pad:     30px;
}

/* ==== 9. Content pages and forms (no mockup; guide type scale and 2.2 fields) ===== */
:root {
  --prose-max-w:       760px;            /* readable line length */
  --textarea-min-h:    144px;            /* about 5 lines */
}