/* ================================================================
   GAEA SCENTS — Main Stylesheet
   Brand: Mauve luxury candle store
   Fonts: Playfair Display (display) · Inter (body)
================================================================ */

/* ----------------------------------------------------------------
   1. CSS DESIGN TOKENS
---------------------------------------------------------------- */
:root {
  /* ── Brand Accent ─────────────────────────────── */
  --clr-ember:        #9B5B7A;
  --clr-ember-dark:   #7A4560;
  --clr-ember-deep:   #5B2F4A;   /* alternate offer-bar tone (deep plum) */
  --clr-ember-light:  #C4899F;
  --clr-ember-pale:   #FAF0F5;
  --clr-ember-glow:   rgba(155,91,122,0.15);

  /* ── Warm Blush System (primary lights) ──────── */
  --clr-blush:        #FAE8DF;   /* Haven & Hue — dominant page bg */
  --clr-blush-mid:    #F5DDD3;
  --clr-blush-deep:   #EAC8BC;
  --clr-clay:         #C4695A;   /* alternate offer-bar tone (terracotta) */
  --clr-rose:         #D4958A;
  --clr-peach:        #E8B89A;

  /* ── Gold / Amber ─────────────────────────────── */
  --clr-gold:         #C4862A;
  --clr-gold-light:   #E8B84B;
  --clr-gold-pale:    #FDF3E0;
  --clr-gold-glow:    rgba(196,134,42,0.18);

  /* ── Creams & Ivories ─────────────────────────── */
  --clr-white:        #FFFCF9;
  --clr-cream:        #FDF6EC;
  --clr-ivory:        #FAF2E4;
  --clr-parchment:    #F0E4D4;
  --clr-linen:        #E4D4C0;

  /* ── Dark / Ink (warm espresso, never cold) ───── */
  --clr-ink:          #2D1A0E;
  --clr-espresso:     #3D2215;
  --clr-umber:        #5A3828;
  --clr-muted:        #8A6858;
  --clr-muted-light:  #B09888;

  /* ── Section Darks ───────────────────────────── */
  --clr-char:         #1E1008;
  --clr-char-mid:     #2D1A0E;

  /* ── Lavender Touch (Spirit Rituals-inspired) ── */
  --clr-lavender:     #C4B0D8;
  --clr-lavender-pale:#F0EAFA;   /* alternate section bg */
  --clr-lavender-mid: #9B88B8;
  --clr-purple-hl:    #7B5EA7;   /* headline purple (Spirit Rituals text colour) */

  /* ── Brand-specific craft palette ───────────── */
  --clr-beeswax:      #C4862A;   /* warm amber — candle wax, golden light */
  --clr-beeswax-pale: #F5E8C8;   /* pale beeswax */
  --clr-sage-craft:   #5A7A5A;   /* botanical sage green */
  --clr-sage-light:   #8BA98E;
  --clr-umber-warm:   #8B4513;   /* burnt umber — earth, clay */
  --clr-ivory-warm:   #F5F0E8;   /* warm ivory — replaces cold lavender-pale */

  /* ── Compat aliases ──────────────────────────── */
  --clr-mauve:        var(--clr-ember);
  --clr-mauve-dark:   var(--clr-ember-dark);
  --clr-mauve-light:  var(--clr-ember-light);
  --clr-mauve-pale:   var(--clr-ember-pale);
  --clr-dark:         var(--clr-char);
  --clr-charcoal:     var(--clr-umber);
  --clr-forest:       var(--clr-espresso);
  --clr-forest-mid:   var(--clr-umber);
  --clr-wax:          var(--clr-blush);
  --clr-sand:         var(--clr-linen);
  --clr-light-text:   var(--clr-cream);
  --clr-sage:         #6B8C6E;
  --clr-amber:        var(--clr-gold);
  --clr-ink-mid:      var(--clr-umber);

  /* ── Typography ─────────────────────────────── */
  --ff-serif:    'Playfair Display', 'Georgia', serif;
  --ff-sans:     'Inter', 'Helvetica Neue', sans-serif;
  --ff-script:   'Playfair Display', serif;
  --font-display: var(--ff-serif);
  --font-body:    var(--ff-sans);

  /* ── Spacing ─────────────────────────────────── */
  --section-py:  clamp(80px, 10vw, 140px);
  --container:   1280px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-xl:   48px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ── Spacing tokens ─────────────────────────── */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  80px;
  --sp-2xl: 120px;

  /* ── Transitions ─────────────────────────────── */
  --t-fast:   0.15s ease;
  --t-base:   0.25s ease;
  --t-slow:   0.4s ease;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:   0 2px 12px rgba(45,26,14,0.08);
  --shadow-md:   0 8px 32px rgba(45,26,14,0.12);
  --shadow-lg:   0 20px 60px rgba(45,26,14,0.16);
  --shadow-glow: 0 0 40px rgba(155,91,122,0.25);
  --shadow-gold: 0 8px 32px rgba(196,134,42,0.20);

  /* ── Layout ──────────────────────────────────── */
  --max-width: 1280px;
  --header-h-base: 96px;   /* the header's own height */
  --header-h:  96px;       /* how far content must clear the top; see body below */
}

/* ── Sparkle decorative elements ──────────────── */
.sparkle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: sparkle-pulse 3s ease-in-out infinite;
}
.sparkle svg { width: 100%; height: 100%; }

@keyframes sparkle-pulse {
  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1.1) rotate(15deg); }
}

/* ── Geometric circle backdrop ────────────────── */
.circle-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Floating blob shape ───────────────────────── */
.blob-deco {
  position: absolute;
  pointer-events: none;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: blob-drift 8s ease-in-out infinite alternate;
}

@keyframes blob-drift {
  0%   { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: translate(0, 0) rotate(0deg); }
  33%  { border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%; transform: translate(10px, -15px) rotate(5deg); }
  66%  { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; transform: translate(-8px, 10px) rotate(-3deg); }
  100% { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; transform: translate(5px, -8px) rotate(8deg); }
}

/* ── Oval image frame (Haven & Hue style) ─────── */
.oval-frame {
  border-radius: 50% / 40%;
  overflow: hidden;
  display: block;
}

/* ── Section label (eyebrow) ──────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-ember);
  margin-bottom: 18px;
}

/* ----------------------------------------------------------------
   2. RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ff-sans);
    font-weight: 400;
    color: var(--clr-ink);
    background: var(--clr-blush);
    line-height: 1.7;
    /* overflow-x on body is a horizontal-scroll safety net, but `hidden` makes
       body a scroll container, and iOS Safari then resolves position:fixed
       against it rather than the viewport. The header and offer bar drift down
       the page and get stamped over the content — reported 23 Aug 2026 with the
       header painted in the middle of the footer, iPhone only.

       `clip` does the same clipping WITHOUT establishing a scroll container, so
       fixed positioning keeps working. `hidden` stays first as the fallback for
       Safari below 16, which ignores the second declaration.

       Nothing on the page actually overflows today (measured with the rule off:
       scrollWidth equalled the viewport at 390px). The marquee that looks like
       it overflows is clipped by .gaea-offer-bar's own overflow:hidden, not by
       this. The net is kept for whatever gets added later. */
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; border: none; background: none; }

input, textarea, select {
    font-family: var(--font-body);
    font-size: 15px;
    border: 1px solid var(--clr-linen);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    width: 100%;
    background: #fff;
    color: var(--clr-dark);
    transition: border-color var(--t-base), box-shadow var(--t-base);
    outline: none;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--clr-mauve);
    box-shadow: 0 0 0 3px rgba(155,91,122,0.12);
}

::selection { background: var(--clr-mauve-pale); color: var(--clr-dark); }

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--clr-dark);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(32px, 4.5vw, 52px); }
h3 { font-size: clamp(22px, 3vw, 32px); }
h4 { font-size: 20px; font-weight: 500; }
h5 { font-size: 16px; font-weight: 500; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

.display-italic { font-style: italic; }

/* ----------------------------------------------------------------
   4. LAYOUT UTILITIES
---------------------------------------------------------------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

.section { padding: var(--sp-xl) 0; }
.section-sm { padding: var(--sp-lg) 0; }

.section-header {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 80px);
}

.section-header .eyebrow {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-ember);
    margin-bottom: 18px;
}

.section-header h2 {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--clr-ink);
    margin-bottom: 0.5em;
}

.section-header p {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--clr-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

/* Newsletter section keeps dark background — light text overrides */
.gs-newsletter-section .section-header h2,
.gs-newsletter-section h2 {
    color: var(--clr-cream);
}
.gs-newsletter-section p {
    color: rgba(253,246,242,0.72);
}
.gs-newsletter-section .eyebrow {
    color: var(--clr-ember-light);
}

/* Ingredients section — now light, use purple headline */
.gs-ingredients-section .section-header h2,
.gs-ingredients-section .gs-ingredients-header h2 {
    color: var(--clr-purple-hl);
}
.gs-ingredients-section .section-header p,
.gs-ingredients-section .gs-ingredients-header p {
    color: var(--clr-muted);
}
.gs-ingredients-section .eyebrow {
    color: var(--clr-ember);
}

/* Custom CTA — now amber warm section, dark text */
.gs-custom-cta-section .section-header h2 { color: var(--clr-ink); }
.gs-custom-cta-section .section-header p   { color: var(--clr-muted); }
.gs-custom-cta-section .eyebrow            { color: var(--clr-mauve-light, #C4829A); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   5. BUTTONS
---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    /* Centre the label. Harmless while a button sizes to its content, and
       load-bearing the moment one is stretched: several are set to width:100%
       on mobile, and without this the label sat against the left edge of the
       pill. .btn-atc and .gs-custom-cta-actions had each patched that locally;
       this fixes it where it comes from, including .hero-actions. */
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-family: var(--ff-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
    border: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn:hover::after { opacity: 1; }

.btn-primary {
    background: linear-gradient(135deg, var(--clr-ember), var(--clr-ember-dark));
    color: var(--clr-white);
    box-shadow: 0 4px 20px rgba(155,91,122,0.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(155,91,122,0.45);
}

.btn-secondary {
    background: rgba(255,255,255,0.55);
    color: var(--clr-ink);
    border: 1.5px solid rgba(45,26,14,0.18);
    backdrop-filter: blur(4px);
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.82);
    border-color: rgba(45,26,14,0.30);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--clr-ember);
    border: 1.5px solid var(--clr-ember);
}
.btn-outline:hover {
    background: var(--clr-ember);
    color: var(--clr-white);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--clr-dark);
    color: var(--clr-light-text);
    border: 1.5px solid var(--clr-dark);
}
.btn-dark:hover {
    background: var(--clr-charcoal);
    border-color: var(--clr-charcoal);
    transform: translateY(-2px);
}

.btn-light {
    background: var(--clr-cream);
    color: var(--clr-ink);
    border: 1.5px solid var(--clr-cream);
}
.btn-light:hover {
    background: var(--clr-white);
    transform: translateY(-2px);
}

.btn-sm { padding: 10px 22px; font-size: 0.78rem; }
.btn-lg { padding: 18px 44px; font-size: 0.9rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base), gap var(--t-base);
}
.link-arrow::after { content: none; }
.link-arrow:hover { border-color: var(--clr-mauve); gap: 10px; }

/* ----------------------------------------------------------------
   6. SITE HEADER
---------------------------------------------------------------- */
/* Full-width bar, flush to the top — the original treatment. (The rounded /
   floating-pill / translucent versions were reverted.)

   No `transform` or `will-change: transform` here: the header no longer hides
   on scroll, so they have no job, and either one would make position:fixed
   descendants resolve against the header instead of the viewport. */
/* The offer bar sits above a FIXED header, so it has to join that stack or the
   header simply covers it — which is what happened. Rather than patch the
   dozen places that offset content by --header-h, --header-h itself grows by
   the bar's height, and the header keeps its own via --header-h-base.

   --wp-admin--admin-bar--height is WordPress's, and 0 for logged-out visitors,
   so the same rule keeps the bar clear of the admin bar for signed-in staff. */
body { --offer-bar-h: 0px; }
body.has-offer-bar { --offer-bar-h: 48px; }
body { --header-h: calc(var(--header-h-base) + var(--offer-bar-h)); }


.site-header {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--offer-bar-h));
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h-base);
    background: transparent;
    transition: background var(--t-slow), box-shadow var(--t-slow);
}

.site-header.scrolled {
    /* Fully opaque, and a shade deeper than the old rgba(250,249,245,0.97).
       The header is sticky over product imagery, and even 3% transparency let
       card colours tint it — pink over soaps, green over botanicals — which read
       as the bar changing colour as you scrolled. */
    background: #F2ECE3;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

/* :not(.scrolled) matters. This rule sits after .site-header.scrolled and has
   the same specificity (0,2,0), so without the guard it won the cascade and
   forced the bar transparent again the moment you scrolled — leaving the blur
   but no background. */
.site-header.hero-mode:not(.scrolled) { background: transparent; }
/* Hero is now light — nav stays dark, no white override */
.site-header.hero-mode:not(.scrolled) .site-nav a,
.site-header.hero-mode:not(.scrolled) .header-actions button,
.site-header.hero-mode:not(.scrolled) .header-actions a { color: var(--clr-dark); }
.site-header.hero-mode:not(.scrolled) .site-logo img { filter: none; }

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

.site-logo-img {
    height: 88px;
    width: 88px;
    display: block;
    transition: opacity var(--t-base), transform var(--t-base);
}
.site-logo:hover .site-logo-img {
    opacity: 0.82;
    transform: scale(1.04);
}

/* Footer logo */
.footer-logo img {
    height: 64px;
    width: 64px;
    display: block;
    transition: opacity var(--t-base);
}
.footer-logo:hover img { opacity: 0.8; }

/* Nav */
.site-nav { display: flex; justify-content: center; }

.nav-list {
    display: flex;
    align-items: center;
    gap: 36px;
}

.nav-list > li { position: relative; }

.nav-list > li > a {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-dark);
    padding: 4px 0;
    position: relative;
}

.nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--clr-mauve);
    transition: width var(--t-base);
}
.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after { width: 100%; }

/* Dropdown */
.sub-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: 12px 0;
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base), transform var(--t-base);
    transform: translateX(-50%) translateY(-8px);
    border-top: 2px solid var(--clr-mauve);
}

.nav-list > li:hover .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--clr-charcoal);
    transition: color var(--t-fast), padding-left var(--t-fast);
}
.sub-menu li a:hover { color: var(--clr-mauve); padding-left: 26px; }

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-search-btn { display: none; }

.header-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--clr-dark);
    transition: color var(--t-fast);
    position: relative;
}
.header-cart:hover { color: var(--clr-mauve); }

/* Account button. Always rendered; GAEA_ACCOUNTS_ENABLED decides only where
   it points — /login when accounts are on, /my-account (which redirects to
   /track) when they are off. */
.header-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 6px;
    color: var(--clr-dark);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color var(--t-fast);
}
.header-account:hover { color: var(--clr-mauve); }
.header-account-label { line-height: 1; }
@media (max-width: 600px) {
    .header-account-label { display: none; }   /* icon only on small screens */
}

/* ── Login / Sign up pages ─────────────────────────────────────── */
/* The site header is position:fixed, so the auth pages must reserve its height
   or the nav overlaps the card (the generic .section padding isn't enough on
   mobile, where --sp-xl drops below the header height). */
/* .section.auth-page (0,2,0) so it beats the later mobile `.section { padding }`
   shorthand, which was resetting this and letting the nav overlap the card. */
.section.auth-page {
    background: var(--clr-blush, #F7EDE8);
    padding-top: calc(var(--header-h) + 32px);
}
.auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-md);
    padding: clamp(32px, 5vw, 56px);
    box-shadow: 0 24px 60px rgba(45,31,40,0.10);
    text-align: center;
}
.auth-card > .eyebrow { display: block; }
.auth-card h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 400; margin: 4px 0 0; }
.auth-card .divider { margin: 16px auto 26px; }
.auth-form { text-align: left; }
.auth-form .form-row { margin-bottom: 18px; display: flex; flex-direction: column; }
.auth-form label { font-size: 13px; font-weight: 500; margin-bottom: 7px; color: var(--clr-charcoal, #2D1F28); }
.auth-form .required { color: var(--clr-mauve); }
.auth-form .input-text {
    width: 100%; padding: 13px 16px; font-size: 14px;
    border: 1.5px solid var(--clr-lavender, #E5DCE8); border-radius: var(--radius-sm);
    background: #fff; transition: border-color var(--t-base);
}
.auth-form .input-text:focus { border-color: var(--clr-mauve); outline: none; box-shadow: none; }
.auth-form-row-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.auth-remember { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: 13px; margin: 0; }
.auth-remember input { width: auto; }
.auth-lost { font-size: 13px; color: var(--clr-mauve); }
.auth-submit { width: 100%; justify-content: center; margin-top: 6px; }
.auth-switch { margin-top: 22px; font-size: 14px; color: var(--clr-muted); text-align: center; }
.auth-switch a { color: var(--clr-mauve); font-weight: 500; }
.auth-note { font-size: 13px; color: var(--clr-muted); margin-bottom: 18px; }
.auth-hint { display: block; font-size: 12px; color: var(--clr-muted); margin-top: 5px; }
.search-overlay { display: none !important; }

.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--clr-mauve);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all var(--t-base);
}
.cart-count.has-items { opacity: 1; transform: scale(1); }

/* Menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    padding: 4px 0;
}
.menu-toggle span {
    display: block;
    height: 1.5px;
    background: var(--clr-dark);
    transition: all var(--t-base);
    transform-origin: center;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 82%;
    max-width: 340px;
    height: 100dvh;
    background: var(--clr-white);
    z-index: 1100;
    /* Slide via transform (GPU-composited) instead of `left` — animating
       `left` forces a full-page layout every frame, which made the drawer
       laggy on mobile. */
    transform: translateX(-100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.34s ease;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 40px;
    box-shadow: none;
    border-right: 1px solid var(--clr-linen);
}
.mobile-nav.open {
    transform: translateX(0);
    box-shadow: 12px 0 48px rgba(45,26,14,0.18);
}

/* Mobile nav header bar with logo + close */
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--clr-linen);
    background: var(--clr-white);
    position: sticky;
    top: 0;
    z-index: 2;
}
.mobile-nav-logo img {
    height: 64px;
    width: 64px;
    display: block;
}
.mobile-nav-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--clr-linen);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-muted);
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
    background: transparent;
}
.mobile-nav-close:hover {
    border-color: var(--clr-ember);
    color: var(--clr-ember);
    background: var(--clr-ember-pale);
}

/* Staggered list item entrance animation */
.mobile-nav.open .mobile-nav-list li {
    animation: slideInLeft 0.35s ease both;
}
.mobile-nav.open .mobile-nav-list li:nth-child(1) { animation-delay: 0.06s; }
.mobile-nav.open .mobile-nav-list li:nth-child(2) { animation-delay: 0.10s; }
.mobile-nav.open .mobile-nav-list li:nth-child(3) { animation-delay: 0.14s; }
.mobile-nav.open .mobile-nav-list li:nth-child(4) { animation-delay: 0.18s; }
.mobile-nav.open .mobile-nav-list li:nth-child(5) { animation-delay: 0.22s; }
.mobile-nav.open .mobile-nav-list li:nth-child(6) { animation-delay: 0.26s; }
.mobile-nav.open .mobile-nav-list li:nth-child(7) { animation-delay: 0.30s; }
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45,31,40,0.5);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-slow);
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-nav-list { padding: 16px 24px 0; }
.mobile-nav-list li { border-bottom: 1px solid var(--clr-linen); }
.mobile-nav-list li a {
    display: block;
    padding: 16px 0;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--clr-dark);
}
.mobile-nav-list li a:hover { color: var(--clr-mauve); }
.mobile-expand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 1px;
}
.mobile-nav-list .has-sub ul {
    padding: 0 0 8px 16px;
    display: none;
}
.mobile-nav-list .has-sub.open ul { display: block; }
.mobile-nav-list .has-sub ul li { border: none; }
.mobile-nav-list .has-sub ul li a { font-size: 13px; padding: 8px 0; color: var(--clr-muted); }

/* Search overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250,248,246,0.97);
    backdrop-filter: blur(16px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}
.search-overlay.open { opacity: 1; pointer-events: auto; }

.search-close {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 32px;
    color: var(--clr-muted);
    line-height: 1;
}
.search-close:hover { color: var(--clr-dark); }

.search-inner { width: 100%; max-width: 600px; padding: 0 24px; }
.search-inner .search-field {
    font-size: 22px;
    padding: 16px 20px;
    border: none;
    border-bottom: 2px solid var(--clr-linen);
    border-radius: 0;
    background: transparent;
    width: 100%;
}
.search-inner .search-field:focus {
    border-bottom-color: var(--clr-mauve);
    box-shadow: none;
}

/* ----------------------------------------------------------------
   7. HERO SECTION
---------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--clr-blush);
    /* Reserve space below the fixed nav at the TOP of the section */
    padding-top: var(--header-h);
    box-sizing: border-box;
    /* Use block layout — hero-content handles its own centering */
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    /* background-image is set inline by front-page.php, and only when
       assets/images/hero.jpg exists — hardcoding it here 404'd on every view. */
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 8s ease;
    will-change: transform;
    opacity: 0.18;   /* very subtle — tinted over the blush */
}
.hero-bg.loaded { transform: scale(1); }

/* Soft warm overlay — keeps the blush feel even if hero.jpg loads */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(250,232,223,0.82) 0%,
        rgba(250,232,223,0.60) 50%,
        rgba(245,210,196,0.72) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--clr-ink);
    /* Fill the padded hero area and center children vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 820px;
    padding: 40px 24px 60px;
    /* Never let content start above this div's top edge */
    min-height: calc(100vh - var(--header-h));
}

.hero-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-ember);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero-title {
    font-size: clamp(48px, 8vw, 88px);
    font-weight: 300;
    color: var(--clr-ink);
    line-height: 1.05;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.8s ease 0.4s forwards;
}

.hero-title em {
    font-style: italic;
    font-weight: 300;
    color: var(--clr-ember);
}

.hero-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 300;
    color: var(--clr-muted);
    max-width: 480px;
    margin: 0 auto 40px;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.8s ease 0.6s forwards;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.8s ease 0.8s forwards;
    position: relative;
    z-index: 5;
    padding-bottom: 32px;
}

/* Scroll indicator */
.hero-scroll {
    display: none;
}
.hero-scroll-line {
    display: none;
}
.hero-scroll-line::after {
    display: none;
}

/* ----------------------------------------------------------------
   8. TRUST BAR
---------------------------------------------------------------- */
.trust-bar {
    background: linear-gradient(90deg, #C4861A 0%, #D99B2C 50%, #C4861A 100%);
    padding: 14px 0;
    overflow: hidden;
}

.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 32px;
    border-right: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
}
.trust-item:last-child { border-right: none; }

.trust-item svg { color: rgba(255,255,255,0.95); flex-shrink: 0; }

.trust-item span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 768px) {
    .trust-bar-inner { flex-wrap: wrap; gap: 0; }
    .trust-item { padding: 10px 20px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); width: 50%; justify-content: center; }
    .trust-item:nth-child(3), .trust-item:nth-child(4) { border-bottom: none; }
}

/* ----------------------------------------------------------------
   9. COLLECTIONS GRID
---------------------------------------------------------------- */
.collections-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: clamp(400px, 46vw, 540px);   /* capped — cells fill this, images never expand it */
}

.collection-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-linen);
}

/* Big feature cell fills the whole left column (both rows) */
.collection-card--big {
    grid-column: 1;
    grid-row: 1 / 3;
}

.collection-card-img {
    position: absolute;   /* fill the card without contributing to its height */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* CSS gradient placeholder when no image */
.collection-card:nth-child(1) { background: linear-gradient(135deg, #C9899F, #9B5B7A); }
.collection-card:nth-child(2) { background: linear-gradient(135deg, #A8B5A2, #6B7D65); }
.collection-card:nth-child(3) { background: linear-gradient(135deg, #E8DCCA, #C4A882); }

.collection-card:hover .collection-card-img { transform: scale(1.06); }

.collection-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(38,26,33,0.82) 0%,
        rgba(38,26,33,0.45) 30%,
        transparent 62%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    transition: background var(--t-slow);
}

/* Soft blur band along the bottom that fades out upward — legibility without a
   hard-edged frosted box. Sits behind the text (.collection-card-body z-index:1). */
.collection-card-overlay::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, #000 38%, transparent 100%);
            mask-image: linear-gradient(to top, #000 38%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.collection-card:hover .collection-card-overlay {
    background: linear-gradient(to top,
        rgba(38,26,33,0.9) 0%,
        rgba(38,26,33,0.5) 32%,
        transparent 64%);
}

.collection-card-body {
    position: relative;   /* sit above the blurred band (overlay::before) */
    z-index: 1;
}

.collection-card-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;                 /* was mauve-light — washed out on bright photos */
    opacity: 0.92;
    margin-bottom: 6px;
}

.collection-card-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.2;
}

.collection-card-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
}

.collection-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-plum, #2D1F28);
    background: rgba(255,255,255,0.95);
    padding: 11px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(45,31,40,0.18);
    transition: transform var(--t-base), background var(--t-base);
}
.collection-card-link::after { content: none; }
.collection-card:hover .collection-card-link { transform: translateY(-2px); background: #fff; }

/* Slightly larger type on the big feature cell */
.collection-card--big .collection-card-title { font-size: clamp(28px, 3vw, 40px); }
.collection-card--big .collection-card-overlay { padding: 40px; }

@media (max-width: 768px) {
    .collections-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }
    .collection-card--big { grid-column: auto; grid-row: auto; }
    .collection-card { aspect-ratio: 4/3; }
    .collection-card--big { aspect-ratio: 3/4; }
}

/* ----------------------------------------------------------------
   10. PRODUCT CARDS
---------------------------------------------------------------- */
.product-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
    position: relative;
    /* Equal-height cards so price + button line up across the grid regardless
       of how long each title/description is. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.product-card-image {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--clr-parchment);
}

.product-card-image img {
    width: 100%;
    height: 100%;
    /* `contain` so the whole product shows. Photos come in mixed aspect ratios,
       and cover was cutting the tops off the jars on the shop/category grid. */
    object-fit: contain;
    transition: transform 0.6s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.05); }

.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--clr-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    z-index: 2;
}

.product-card-badge.sale       { background: var(--clr-mauve); }
.product-card-badge.sold-out   { background: var(--clr-muted); }
.product-card-badge.bestseller { background: var(--clr-amber); }

.product-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;              /* grow so the footer can pin to the bottom */
}

/* Mobile: the 1:1 image makes a single-column card fill the whole screen.
   Shorten the image + tighten padding so ~2 cards are visible per screen. */
@media (max-width: 600px) {
    .product-card-image { aspect-ratio: 4 / 3; }
    .product-card-body  { padding: 14px 16px 16px; }
}
@media (max-width: 480px) {
    .product-card-image { aspect-ratio: 3 / 2; }  /* single-column regime */
}

.product-card-collection {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    margin-bottom: 6px;
}

.product-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    /* 500, not 400 — Playfair's regular is a high-contrast serif whose thin
       strokes go weedy at card size on a light background. 500 is a real loaded
       weight (the Google Fonts request carries 400/500/600/700), so this is an
       actual cut of the typeface rather than a browser-synthesised fake bold. */
    font-weight: 500;
    color: var(--clr-dark);
    margin-bottom: 4px;
    line-height: 1.2;
    /* Exactly two lines, and flex may not take them away.

       .product-card-body is a column flex container, so this h3 is a flex
       item — and a flex item blockifies display:-webkit-box, which switches
       -webkit-line-clamp off. flex-shrink then sized the box at 2.83 lines,
       slicing the third through the middle instead of hiding it.

       flex:none is the fix: nothing can shrink the box, so it is the height of
       its content and the clamp on the link caps that at two lines.

       Not a fixed height: the h3 has 8px of vertical padding with
       box-sizing:border-box, so height:2.4em leaves 1.17 lines and halves the
       SECOND line instead. min-height reserves without capping. */
    min-height: 2.4em;
    flex: none;
    overflow: hidden;
}
/* The clamp lives on the link, which is not a flex item, so -webkit-box
   survives there and the ellipsis comes back. The height above is the
   backstop for the one card that has no link (the demo card on the home
   page): no ellipsis, but it still clips on a line boundary. */
.product-card-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--t-fast);
}
.product-card-title a:hover { color: var(--clr-mauve); }

.product-card-scent {
    font-size: 12px;
    color: var(--clr-muted);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
    /* Cap at three lines so long stories don't blow out card height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;     /* pin price + button to the bottom of every card */
    /* Wrap rather than squeeze. The footer is 268px and the button takes 152,
       leaving 104 for the price — enough for a single amount but not for a
       variable product's range, which was breaking into three lines with the
       dash stranded on its own. With wrap, a range pushes the button onto a
       second row and single-price cards are untouched, because 64 + 12 + 152
       still fits on one line. */
    flex-wrap: wrap;
}

.product-card-price {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--clr-dark);
}

/* A variable product prints a range ("₹450 – ₹750") where a simple one prints
   a single number. Keep the whole range on one line and let the footer above
   wrap the button beneath it — breaking the range itself put the dash on a
   line of its own and made the card three lines tall. flex-shrink:0 is what
   forces that: without it the price is squeezed instead of the button moving. */
.product-card-price {
    white-space: nowrap;
    flex-shrink: 0;
}
.product-card-price bdi { white-space: nowrap; }

.product-card-price del {
    font-size: 13px;
    color: var(--clr-muted);
    font-weight: 300;
    margin-right: 4px;
}

.product-card-atc {
    /* inline-flex so the icon and label sit apart at EVERY width — this was
       only set in the <600px override, so on desktop the tick was jammed
       against the text. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    background: var(--clr-mauve);
    color: #fff;
    border: 1.5px solid var(--clr-mauve);
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);   /* brand pill, not a heavy box */
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
    white-space: nowrap;
    cursor: pointer;
}
.product-card-atc:hover {
    background: var(--clr-mauve-dark, #7a4560);
    border-color: var(--clr-mauve-dark, #7a4560);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(155,91,122,0.28);
}

/* ----------------------------------------------------------------
   11. BESTSELLERS SECTION
---------------------------------------------------------------- */
.bestsellers-section { background: var(--clr-wax); }

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .products-grid { grid-template-columns: 1fr; } }

.section-cta { text-align: center; margin-top: var(--sp-lg); }

/* ----------------------------------------------------------------
   12. ABOUT TEASER SECTION
---------------------------------------------------------------- */
.about-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 560px;
    overflow: hidden;
    align-items: stretch;
}
.about-teaser-image,
.about-teaser-content,
.gs-about-brand-panel { height: 100%; }

.about-teaser-image {
    position: relative;
    overflow: hidden;
    background: var(--clr-espresso);
    /* Fallback gradient */
    background: linear-gradient(150deg, #2A1A14 0%, #3D2030 40%, #1A1014 100%);
}
.about-teaser-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.about-teaser:hover .about-teaser-image img { transform: scale(1.04); }

.about-teaser-content {
    background: var(--clr-parchment);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 8vw, 96px);
}

.about-teaser-content .eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    margin-bottom: 16px;
    display: block;
}

.about-teaser-content h2 { margin-bottom: 20px; }

.about-teaser-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--clr-charcoal);
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .about-teaser { grid-template-columns: 1fr; }
    .about-teaser-image { height: 320px; }
    .about-teaser-content { padding: 48px 24px; }
    /* Centre the heading + CTA on the stacked layout to match the
       centred credentials below. Body paragraphs stay left-aligned. */
    .about-teaser-content .eyebrow { align-self: center; }
    .about-teaser-content h2 { text-align: center; }
    .about-teaser-content .link-arrow { align-self: center; }
}

/* ----------------------------------------------------------------
   13. INSTAGRAM SECTION
---------------------------------------------------------------- */
.instagram-section { background: #fff; }

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.instagram-item {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--clr-linen);
    position: relative;
}
.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.instagram-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(155,91,122,0.6);
    opacity: 0;
    transition: opacity var(--t-base);
    display: flex;
    align-items: center;
    justify-content: center;
}
.instagram-item:hover img { transform: scale(1.08); opacity: 0.85; }
.instagram-item:hover::after { opacity: 1; }

.instagram-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.instagram-handle {
    font-family: var(--font-display);
    font-size: 18px;
    font-style: italic;
    color: var(--clr-mauve);
}

@media (max-width: 768px) {
    .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------
   14. NEWSLETTER SECTION (footer)
---------------------------------------------------------------- */
.landing-newsletter {
    background: var(--clr-mauve-pale);
    padding: var(--sp-xl) 0;
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.newsletter-text h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    color: var(--clr-dark);
    margin-bottom: 10px;
}
.newsletter-text p {
    font-size: 15px;
    color: var(--clr-muted);
    margin: 0;
}

.newsletter-field {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--clr-lavender);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
    transition: border-color var(--t-base);
}
.newsletter-field:focus-within { border-color: var(--clr-mauve); }

.newsletter-field input {
    border: none;
    border-radius: 0;
    flex: 1;
    padding: 14px 18px;
    background: transparent;
    font-size: 14px;
}
.newsletter-field input:focus { box-shadow: none; }

.newsletter-field button {
    padding: 14px 28px;
    background: var(--clr-mauve);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--t-base);
    flex-shrink: 0;
}
.newsletter-field button:hover { background: var(--clr-mauve-dark); }

.newsletter-note { font-size: 12px; color: var(--clr-ink); }

/* Instagram follow CTA (replaces the old subscribe form) — centred in its
   column so it balances the text block instead of hugging the left edge. */
.landing-newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.insta-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.insta-follow-btn svg { flex-shrink: 0; }
.landing-newsletter .newsletter-note { margin: 0; }

/* Stacked layout: centre the whole block.

   The two columns become one here, so the heading, the copy, the button and
   the note all sit on the same axis. Previously only the CTA was realigned to
   the left to match the text; centring the text instead keeps the button on
   the axis it already had at every other width. */
@media (max-width: 768px) {
    .landing-newsletter .newsletter-text { text-align: center; }
    .landing-newsletter .newsletter-form { align-items: center; text-align: center; }
}

.newsletter-msg {
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}
.newsletter-msg.success { color: #2e7d32; }
.newsletter-msg.error   { color: #c62828; }

/* Compact newsletter signup sewn into the footer brand column */
.footer-newsletter-form { margin-top: 22px; max-width: 340px; }
.footer-newsletter-form .newsletter-field { margin-bottom: 6px; }
@media (max-width: 768px) {
    .footer-newsletter-form { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    .newsletter-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ----------------------------------------------------------------
   15. SITE FOOTER
---------------------------------------------------------------- */
.footer-main {
    background: var(--clr-dark);
    padding: var(--sp-xl) 0;
    position: relative;
}
/* Soft seam between the light newsletter band and the dark footer — the two
   were meeting as a hard flat colour cut with zero visual buffer. */
.footer-main::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 28px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.16), transparent);
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer-logo img { height: 108px; width: 108px; margin-bottom: 20px; transition: opacity var(--t-base); }
.footer-logo:hover img { opacity: 0.8; }

.footer-tagline {
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 12px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    transition: all var(--t-base);
}
.footer-social a:hover {
    border-color: var(--clr-mauve-light);
    color: var(--clr-mauve-light);
    transform: translateY(-2px);
}

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 20px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    transition: color var(--t-fast);
}
.footer-col ul li a:hover { color: var(--clr-mauve-light); }

/* Copyright line — sits inside the (already dark) footer, separated by a hairline
   rule. No separate strip / background of its own. */
.footer-copyright {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.footer-copyright p {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin: 0;
    letter-spacing: 0.4px;
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ----------------------------------------------------------------
   16. PAGE HEADER (inner pages)
---------------------------------------------------------------- */
.page-header {
    padding: calc(var(--header-h) + 60px) 0 60px;
    background: var(--clr-parchment);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--clr-mauve-pale);
    opacity: 0.6;
}

.page-header .eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    display: block;
    margin-bottom: 12px;
}

.page-header h1 { margin-bottom: 14px; }

.page-header p {
    font-size: 17px;
    color: var(--clr-muted);
    max-width: 540px;
    margin: 0 auto;
}

/* Breadcrumb */
.gaea-breadcrumb {
    padding: 12px 0;
    font-size: 12px;
    color: var(--clr-muted);
    letter-spacing: 0.5px;
}
.gaea-breadcrumb a { color: var(--clr-mauve); }
.gaea-breadcrumb a:hover { text-decoration: underline; }

/* The single-product breadcrumb used to sit here and carried the fixed
   header's clearance. It is gone, and .single-product-layout already clears
   the header itself at every breakpoint, so nothing replaces this. Removing
   it also fixed the gap under the header: the height was being cleared twice,
   once by the breadcrumb (160px) and again by the layout (184px). */

/* ----------------------------------------------------------------
   17. ABOUT PAGE
---------------------------------------------------------------- */
.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 500px;
    margin-top: var(--header-h);
}

.about-hero-image {
    background: linear-gradient(135deg, #D9CEDE, #9B5B7A);
    overflow: hidden;
}
.about-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.about-hero-content {
    background: var(--clr-parchment);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 8vw, 96px);
}

/* Our Story — "How It All Began" two-column (craft photo + text) */
.about-story-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.about-story-media {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(45,26,14,0.16), 0 4px 14px rgba(45,26,14,0.08);
    aspect-ratio: 4 / 3;
}
.about-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The founder portrait. Phone photos are tall; the default 4:3 box would crop a
   standing subject to a band across the middle.

   4/5 rather than 3/4 so the block isn't overly tall next to the story text, and
   object-position:top rather than a percentage so the crop is taken entirely off
   the BOTTOM. The source is 540x880 (0.61) and cover scales it to fill the box
   width, so there is always vertical overflow to lose — anything other than
   `top` spends some of that budget clipping the subject's head. Legs are the
   right thing to lose in a founder portrait; hair is not. */
.about-story-media--portrait { aspect-ratio: 4 / 5; }
.about-story-media--portrait img { object-position: center top; }
.about-story-text .divider { margin-left: 0; }
@media (max-width: 768px) {
    .about-story-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-story-text { text-align: center; }
    .about-story-text .divider { margin-left: auto; }
}

.about-values {
    background: var(--clr-cream);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.value-card {
    text-align: center;
    padding: 40px 28px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.value-icon {
    width: 56px;
    height: 56px;
    background: var(--clr-mauve-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--clr-mauve);
}

.value-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.value-card p {
    font-size: 14px;
    color: var(--clr-muted);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .about-hero { grid-template-columns: 1fr; }
    .about-hero-image { height: 300px; }
    .values-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   18. FAQ PAGE
---------------------------------------------------------------- */
.faq-section { max-width: 800px; margin: 0 auto; }

/* FAQ page rendered from the block editor — style native Details blocks and
   Headings to match the accordion look. Editable in wp-admin. */
.faq-content { max-width: 800px; margin: 0 auto; }
.faq-content h2, .faq-content h3 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clr-linen);
    margin: var(--sp-lg) 0 4px;
}
.faq-content h2:first-child, .faq-content h3:first-child { margin-top: 0; }
.faq-content details {
    border-bottom: 1px solid var(--clr-linen);
    padding: 0;
}
.faq-content details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    color: var(--clr-dark);
    transition: color var(--t-fast);
}
.faq-content details > summary::-webkit-details-marker { display: none; }
.faq-content details > summary::after {
    content: '';
    flex-shrink: 0;
    width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239B5B7A' stroke-width='2.5'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat center;
    transition: transform var(--t-base);
}
.faq-content details[open] > summary::after { transform: rotate(45deg); }
.faq-content details > summary:hover { color: var(--clr-mauve); }
.faq-content details > *:not(summary) {
    font-size: 15px;
    color: var(--clr-charcoal);
    line-height: 1.8;
    margin: 0 0 20px;
}

.faq-category { margin-bottom: var(--sp-lg); }

.faq-category-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clr-linen);
    margin-bottom: 4px;
}

.faq-item { border-bottom: 1px solid var(--clr-linen); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: var(--clr-dark);
    transition: color var(--t-fast);
    width: 100%;
    text-align: left;
}
.faq-question:hover { color: var(--clr-mauve); }

.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--clr-linen);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-muted);
    transition: all var(--t-base);
}
.faq-item.open .faq-icon {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
    transform: rotate(45deg);
}

.faq-answer {
    font-size: 15px;
    color: var(--clr-charcoal);
    line-height: 1.8;
    padding: 0 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding var(--t-base);
}
.faq-item.open .faq-answer { max-height: 400px; }

/* ----------------------------------------------------------------
   19. CONTACT PAGE
---------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.contact-info { }

.contact-info h2 { margin-bottom: 16px; }
.contact-info > p { font-size: 16px; color: var(--clr-muted); margin-bottom: 36px; }

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-detail-icon {
    width: 44px;
    height: 44px;
    background: var(--clr-mauve-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-mauve);
    flex-shrink: 0;
}
/* The icon is a link too (customers tap it first) — give it a clear affordance. */
a.contact-detail-icon {
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
a.contact-detail-icon:hover {
    background: var(--clr-mauve);
    color: #fff;
    transform: translateY(-2px);
}

.contact-detail-text strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--clr-dark);
    margin-bottom: 4px;
}
.contact-detail-text a, .contact-detail-text span {
    font-size: 15px;
    color: var(--clr-charcoal);
    transition: color var(--t-fast);
}
.contact-detail-text a:hover { color: var(--clr-mauve); }

.contact-form-wrap { }

.form-row { margin-bottom: 20px; }

.form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-charcoal);
    margin-bottom: 8px;
}

.form-row textarea { min-height: 140px; resize: vertical; }

.form-msg {
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}
.form-msg.success { color: #2e7d32; }
.form-msg.error   { color: #c62828; }

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ----------------------------------------------------------------
   20. CUSTOM ORDERS PAGE
---------------------------------------------------------------- */
.custom-orders-intro { max-width: 680px; }

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: var(--sp-xl);
}

.use-case-card {
    background: #fff;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    text-align: center;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.use-case-card:hover {
    border-color: var(--clr-mauve-light);
    box-shadow: var(--shadow-sm);
}

.use-case-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

.use-case-card h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--clr-dark);
}
.use-case-card p {
    font-size: 13px;
    color: var(--clr-muted);
    margin: 0;
}

.how-it-works {
    background: var(--clr-parchment);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-xl);
}

.steps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: var(--sp-md);
}

.step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.step-num {
    width: 36px;
    height: 36px;
    background: var(--clr-mauve);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}

.step-text h4 {
    font-size: 16px;
    margin-bottom: 4px;
}
.step-text p { font-size: 13px; color: var(--clr-muted); margin: 0; }

.occasion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 8px;
}

/* Scoped under .occasion-grid so it beats the generic `.form-row label` rule
   (which otherwise forces display:block + margin and breaks the centering). */
.occasion-grid .occasion-option {
    position: relative;
    display: flex;
    align-items: stretch;          /* label fills the card height… */
    min-height: 60px;
    margin: 0;                     /* reset .form-row label margin-bottom */
    background: #fff;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-md);
    padding: 0;
    cursor: pointer;
    overflow: visible;
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base), transform var(--t-base);
}
.occasion-option:hover {
    border-color: var(--clr-mauve-light);
    box-shadow: var(--shadow-sm);
}
.occasion-option:has(input:checked) {
    border-color: var(--clr-mauve);
    background: linear-gradient(135deg, rgba(155,91,122,.10), rgba(196,137,159,.16));
    box-shadow: 0 0 0 3px rgba(155,91,122,.14), var(--shadow-sm);
    transform: translateY(-2px) scale(1.03);
}
/* Visually hide the native control (radio now — was checkbox). Selector must
   not be type-specific or the raw input renders on top of the card. */
.occasion-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.occasion-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;            /* icon keeps its size when the label wraps */
    transition: transform var(--t-base);
}
.occasion-option:has(input:checked) .occasion-icon {
    transform: scale(1.15) rotate(-6deg);
}
.occasion-label {
    /* Fill the whole card and centre the text both ways — stays centred no
       matter how tall the grid stretches the card. */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    line-height: 1.25;
    color: var(--clr-dark);
}

/* Selection feedback: checkmark badge */
.occasion-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--clr-mauve);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: opacity .3s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 2px 6px rgba(155,91,122,.4);
    z-index: 2;
}
.occasion-option:has(input:checked) .occasion-check {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Selection feedback: confetti burst of occasion-related emoji */
.occasion-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.occasion-decor span {
    position: absolute;
    font-size: 11px;
    opacity: 0;
    transform: scale(.2) rotate(0deg);
    transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.occasion-decor span:nth-child(1) { top: 3px;    left: 5%;   transition-delay: 0ms; }
.occasion-decor span:nth-child(2) { top: 1px;    right: 16%; transition-delay: 60ms; }
.occasion-decor span:nth-child(3) { bottom: 3px; left: 5%;   transition-delay: 120ms; }
.occasion-decor span:nth-child(4) { bottom: 1px; right: 8%;  transition-delay: 180ms; }
.occasion-decor span:nth-child(5) { top: 42%;    left: 3px;  transition-delay: 240ms; }
.occasion-decor span:nth-child(6) { top: 38%;    right: 3px; transition-delay: 300ms; }

.occasion-option:has(input:checked) .occasion-decor span:nth-child(1) { opacity: 1; transform: scale(1) rotate(-18deg); }
.occasion-option:has(input:checked) .occasion-decor span:nth-child(2) { opacity: 1; transform: scale(1) rotate(14deg); }
.occasion-option:has(input:checked) .occasion-decor span:nth-child(3) { opacity: 1; transform: scale(1) rotate(12deg); }
.occasion-option:has(input:checked) .occasion-decor span:nth-child(4) { opacity: 1; transform: scale(1) rotate(-14deg); }
.occasion-option:has(input:checked) .occasion-decor span:nth-child(5) { opacity: 1; transform: scale(1) rotate(-10deg); }
.occasion-option:has(input:checked) .occasion-decor span:nth-child(6) { opacity: 1; transform: scale(1) rotate(10deg); }

@media (max-width: 600px) {
    .occasion-grid { grid-template-columns: repeat(2, 1fr); }
}

.custom-order-form-wrap {
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-sm);
}

.custom-order-form-wrap h3 { margin-bottom: var(--sp-md); }

/* The "or just browse" panel below the enquiry form. */
.custom-order-browse {
    margin-top: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    background: var(--clr-mauve-pale);
    border-radius: var(--radius-md);
    text-align: center;
}
.custom-order-browse h3 {
    font-size: 22px;
    margin-bottom: 8px;
}
.custom-order-browse p {
    max-width: 46ch;
    margin: 0 auto 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--clr-muted);
}

@media (max-width: 600px) {
    .custom-order-browse { padding: var(--sp-md); }
    .custom-order-browse h3 { font-size: 19px; }
    /* Full-width tap target, matching the submit button above it. */
    .custom-order-browse .btn { width: 100%; justify-content: center; }
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-list { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .use-cases-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   21. WOOCOMMERCE — SHOP ARCHIVE
---------------------------------------------------------------- */
.woo-main {
    padding-top: var(--header-h);
    /* Breathing room before the dark footer — the grid used to butt straight
       against it with no gap. */
    padding-bottom: var(--sp-xl);
}
/* When a shop-header precedes it (shop / category archives), that band already
   clears the fixed nav — so drop the redundant header-height top padding that
   left a big empty gap above the category panel. */
.shop-header + .woo-main { padding-top: 16px; }

.shop-header {
    background: var(--clr-parchment);
    /* The site header is position:fixed and there is no global body offset —
       every section that starts a page reserves the space itself (see the hero
       and .section.auth-page). This was a bare 60px, less than the 96px header,
       so the shop and category titles rendered UNDER the nav: measured at -4px,
       i.e. actually overlapping. The mobile rule below already did this. */
    padding: calc(var(--header-h) + 32px) 0 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.shop-header::before {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--clr-mauve-pale);
    opacity: 0.5;
}
.shop-header h1 { margin-bottom: 10px; }
.shop-header p { font-size: 16px; color: var(--clr-muted); max-width: 480px; margin: 0 auto; }

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--clr-linen);
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.shop-result-count {
    font-size: 13px;
    color: var(--clr-muted);
}

/* Shop sort control — icon + label + styled dropdown pill */
.shop-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.shop-sort-icon { color: var(--clr-mauve); flex-shrink: 0; }
.shop-sort-label {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    white-space: nowrap;
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select,
.shop-sort select.orderby {
    width: auto;
    padding: 10px 38px 10px 16px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--clr-ink);
    background-color: #fff;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-pill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239B5B7A' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.woocommerce-ordering select:hover,
.shop-sort select.orderby:hover { border-color: var(--clr-mauve); }
.woocommerce-ordering select:focus,
.shop-sort select.orderby:focus {
    outline: none;
    border-color: var(--clr-mauve);
    box-shadow: 0 0 0 3px var(--clr-mauve-pale);
}

.shop-category-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 0 28px;
}

.category-filter-btn {
    padding: 8px 20px;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--clr-charcoal);
    background: #fff;
    transition: all var(--t-base);
    cursor: pointer;
}
.category-filter-btn:hover,
.category-filter-btn.active {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
}

/* WooCommerce resets for our grid */
.woocommerce ul.products {
    margin: 0; padding: 0; list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.woocommerce ul.products li.product { margin: 0 !important; float: none !important; width: auto !important; }

/* WooCommerce ships a legacy float clearfix (woocommerce-layout.css):
       .woocommerce ul.products::before, ::after { content: " "; display: table; }
   Harmless while the list floated. But this list is a CSS grid, and a grid turns
   those pseudo-elements into real grid items — ::before claims cell 1, shoving every
   card one column right and wrapping the last onto a row of its own. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* WooCommerce's loop rule `.woocommerce ul.products li.product a img { height: auto }`
   (0,3,4) out-specifies our `.product-card-image img { height: 100% }` (0,1,1), so the
   image sat at its intrinsic height inside the 4:5 box and left a band of dead space
   below it. Homepage bestsellers escape this — they aren't inside ul.products — which
   is why only shop/category cards were affected. Match WooCommerce's specificity.

   `contain`, not `cover`: this rule is the one that actually wins on shop/category
   pages, so it — not the `contain` up at .product-card-image img — decided how the
   photo was scaled, and it was cropping the packaging boxes. Product shots arrive in
   mixed aspect ratios (2160×3840 portrait through 4032×2268 landscape); the whole
   product has to stay visible even if that letterboxes the card. */
.woocommerce ul.products li.product .product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Override WooCommerce's own column classes — we always use our 4-col grid */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr; }
}

/* WooCommerce pagination
   Round pills in the brand mauve, not the default squares.

   The selectors are over-qualified on purpose. Something later in the cascade
   was painting the current page a lavender-grey (rgb(233,230,237) on
   rgb(129,111,152)) while our border-colour still won, so the active page read
   as disabled rather than selected. That rule lives in a stylesheet the browser
   serves cross-origin, so it cannot be enumerated from the page — hence
   winning on specificity rather than on politely matching it. */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    padding: var(--sp-lg) 0 var(--sp-xl);
}
/* The grey box and the dividers between cells are WooCommerce's own:
   `.woocommerce nav.woocommerce-pagination ul` puts a 1px border round the
   list and a 1px right border on every li, which is what made the pills look
   like they were sitting in a table. That selector is (0,2,2) and a plain
   `.woocommerce-pagination ul.page-numbers` is (0,2,1), so it lost. Matching
   WooCommerce's own shape and adding the class takes it to (0,3,2), which
   wins on specificity — no !important needed here, unlike the fill above
   where the competing rule could not even be read. */
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
}
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
    list-style: none;
    margin: 0;
    border: 0;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--clr-muted);
    text-decoration: none;
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    border-color: var(--clr-mauve);
    background: var(--clr-mauve-pale);
    color: var(--clr-mauve);
    transform: translateY(-1px);
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
    outline: 2px solid var(--clr-mauve);
    outline-offset: 2px;
}

/* The page you are on. Filled, so it reads as selected rather than disabled. */
.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.woocommerce-pagination ul.page-numbers li a.page-numbers.current {
    background: var(--clr-mauve) !important;
    border-color: var(--clr-mauve) !important;
    color: var(--clr-white) !important;
    font-weight: 600;
}

/* Prev/next carry an arrow rather than a number, so they get room to breathe
   and no border — they are navigation, not a destination. */
.woocommerce-pagination ul.page-numbers li a.page-numbers.next,
.woocommerce-pagination ul.page-numbers li a.page-numbers.prev {
    border-color: transparent;
    color: var(--clr-mauve);
    font-size: 18px;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover {
    border-color: var(--clr-mauve);
}

/* The gap between page runs, e.g. 1 2 ... 9 */
.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
    border-color: transparent;
    min-width: 24px;
    padding: 0 4px;
    color: var(--clr-muted-light);
}

@media (max-width: 600px) {
    /* Thumb-sized, same floor as every other tap target on a phone. */
    .woocommerce-pagination ul.page-numbers li a.page-numbers,
    .woocommerce-pagination ul.page-numbers li span.page-numbers {
        min-width: 44px;
        height: 44px;
    }
    .woocommerce-pagination { padding: var(--sp-md) 0 var(--sp-lg); }
}

/* ----------------------------------------------------------------
   22. WOOCOMMERCE — SINGLE PRODUCT
---------------------------------------------------------------- */
.single-product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    padding: calc(var(--header-h) + 40px) 0 var(--sp-xl);
}

.product-gallery {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.gallery-main {
    aspect-ratio: 1/1;
    background: var(--clr-parchment);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}
/* `contain`, not `cover` — product photos arrive in mixed aspect ratios
   (portrait 9:16, landscape 16:9), and cover was cropping the tops off jars.
   The whole product is now always visible inside the frame. */
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.gallery-thumb {
    aspect-ratio: 1/1;
    background: var(--clr-parchment);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--t-base);
}
.gallery-thumb.active { border-color: var(--clr-mauve); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product info */
.product-info {}

.product-collection-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    margin-bottom: 10px;
    display: block;
}

.product-info h1 {
    font-size: clamp(32px, 5vw, 52px);
    margin-bottom: 8px;
    line-height: 1.1;
}

.product-scent-story {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--clr-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    /* Flush-left so the description shares the same left edge as the title
       and price (was indented 19px by a left accent border). */
    padding-left: 0;
    border-left: 0;
}

.product-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 28px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-linen);   /* clean separation above price */
}

.product-price {
    font-size: 28px;
    font-weight: 500;
    color: var(--clr-dark);
}

.product-price del {
    font-size: 18px;
    color: var(--clr-muted);
    font-weight: 300;
}

.product-price ins {
    text-decoration: none;
    color: var(--clr-mauve);
}

.product-sale-badge {
    background: var(--clr-mauve);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

/* Scent notes */
.scent-notes {
    background: var(--clr-parchment);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 28px;
}

.scent-notes-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    margin-bottom: 16px;
}

.scent-note-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}
.scent-note-row:last-child { margin-bottom: 0; }

.scent-note-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-muted);
    min-width: 52px;
    padding-top: 2px;
}

.scent-note-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}
.scent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-mauve-light);
}
.scent-dot.filled { background: var(--clr-mauve); }

.scent-note-value { font-size: 14px; color: var(--clr-charcoal); padding-top: 2px; }

/* Product meta details */
.product-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}
.product-detail-item {
    display: flex;
    gap: 12px;
    font-size: 14px;
    align-items: center;
}
.product-detail-item svg { color: var(--clr-mauve); flex-shrink: 0; }
.product-detail-item strong { color: var(--clr-dark); margin-right: 4px; }
.product-detail-item span { color: var(--clr-muted); }

/* Variant selector */
.product-variants { margin-bottom: 28px; }
.product-variants label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-dark);
    margin-bottom: 10px;
}

.variant-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.variant-btn {
    padding: 10px 18px;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--clr-charcoal);
    background: #fff;
    cursor: pointer;
    transition: all var(--t-base);
}
.variant-btn:hover { border-color: var(--clr-mauve); color: var(--clr-mauve); }
.variant-btn.active {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
}

/* ATC section */
.product-atc-section {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: stretch;
}
/* The add-to-cart form must grow so the button fills the row beside the qty
   stepper (previously only fixed in the mobile block, leaving desktop short). */
.product-atc-section form.cart {
    flex: 1;
    display: flex;
    margin: 0;
}
.product-atc-section .btn-atc { flex: 1; }

/* The product page has no quantity control — it asks one question, add this or
   not, and the stepper below changes what is already in the cart. WooCommerce
   still renders its own .quantity input inside the variable add-to-cart form,
   and we want it in the DOM (it posts the default of 1 and keeps the form
   valid), just not on screen. Scoped to the single-product add-to-cart so the
   cart page, which genuinely needs a stepper, is untouched.

   !important is load-bearing, not laziness. WooCommerce's variation script
   sets style="display: block" INLINE on this wrapper the moment a variation is
   chosen, and an inline declaration beats any normal stylesheet rule. Without
   it the field stays hidden until you pick a size, then reappears above Add to
   Cart next to our own stepper — two quantity controls, one of which does
   nothing. */
.single-product .gaea-variations .quantity,
.single-product .product-atc-section .quantity {
    display: none !important;
}

.quantity-input-wrap {
    display: flex;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-pill);   /* match the pill Add-to-Cart button */
    overflow: hidden;
    flex-shrink: 0;
    min-height: 54px;                     /* consistent, comfortable row height */
}
.qty-btn {
    width: 40px;
    background: transparent;
    color: var(--clr-dark);
    font-size: 18px;
    transition: background var(--t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover { background: var(--clr-parchment); }
.qty-input {
    width: 52px;
    border: none;
    border-left: 1px solid var(--clr-linen);
    border-right: 1px solid var(--clr-linen);
    border-radius: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
}
.qty-input:focus { box-shadow: none; border-left-color: var(--clr-mauve); border-right-color: var(--clr-mauve); }

.btn-atc { flex: 1; justify-content: center; font-size: 13px; padding: 14px 24px; }

/* Product accordion tabs */
.product-tabs { margin-top: 32px; border-top: 1px solid var(--clr-linen); }

.product-tab-item { border-bottom: 1px solid var(--clr-linen); }
.product-tab-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-dark);
    cursor: pointer;
    text-align: left;
    transition: color var(--t-fast);
}
.product-tab-btn:hover { color: var(--clr-mauve); }
.product-tab-btn svg { transition: transform var(--t-base); }
.product-tab-item.open .product-tab-btn svg { transform: rotate(180deg); }

.product-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.product-tab-item.open .product-tab-content { max-height: 600px; }
.product-tab-content-inner { padding: 4px 0 20px; font-size: 14px; color: var(--clr-charcoal); line-height: 1.8; }
.product-tab-content-inner ul { list-style: disc; padding-left: 20px; }
.product-tab-content-inner li { margin-bottom: 6px; }

@media (max-width: 900px) {
    .single-product-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }
}

/* Related products */
.related-products { padding: var(--sp-xl) 0 var(--sp-lg); background: var(--clr-parchment); }

/* ----------------------------------------------------------------
   23. WOOCOMMERCE — CART & CHECKOUT (basic overrides)
---------------------------------------------------------------- */
.woocommerce-cart-form table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form .cart th {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    padding: 12px 0;
    border-bottom: 1px solid var(--clr-linen);
}
.woocommerce-cart-form .cart td { padding: 20px 0; border-bottom: 1px solid var(--clr-linen); vertical-align: middle; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--clr-mauve) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    transition: background var(--t-base) !important;
    border: none !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--clr-mauve-dark) !important;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    border-top-color: var(--clr-mauve) !important;
}

/* ----------------------------------------------------------------
   24. ANIMATIONS
---------------------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scrollLine {
    0%   { top: -100%; }
    100% { top: 100%; }
}

/* Scroll-triggered reveal — GSAP handles entrance animation.
   CSS sets natural visible state; .visible class is added by JS
   immediately so GSAP can take over per-element timing. */
.reveal {
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
/* No-JS safety: show everything if JS is disabled */
.no-js .reveal,
.no-js .gs-cat-card,
.no-js .gs-ingredient,
.no-js .gs-step { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ----------------------------------------------------------------
   25. UTILITY / MISC
---------------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.text-center { text-align: center; }
.text-mauve  { color: var(--clr-mauve); }
.bg-parchment { background: var(--clr-parchment); }
.bg-sand     { background: var(--clr-sand); }
.bg-dark     { background: var(--clr-dark); color: var(--clr-light-text); }

.divider {
    width: 48px;
    height: 1px;
    background: var(--clr-mauve);
    margin: 20px auto;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(155,91,122,0.2);
    border-top-color: var(--clr-mauve);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* WooCommerce notices */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
}
.woocommerce-error { background: #fdecea; color: #c62828; border: 1px solid #ffcdd2; }
.woocommerce-message { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.woocommerce-info { background: var(--clr-mauve-pale); color: var(--clr-mauve-dark); border: 1px solid var(--clr-lavender); }

/* Mobile global adjustments */
@media (max-width: 768px) {
    :root {
        --sp-xl: 56px;
        --sp-2xl: 80px;
    }

    .header-inner { grid-template-columns: auto auto auto; }
    .site-nav { display: none; }
    .menu-toggle { display: flex; }

    .hero-actions { flex-direction: column; align-items: center; }

    .single-product-layout { padding-top: calc(var(--header-h) + 20px); }

    .custom-order-form-wrap { padding: var(--sp-md); }
}

@media (min-width: 769px) {
    .menu-toggle { display: none; }
}

/* ================================================================
   26. WHATSAPP FLOATING BUTTON
================================================================ */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    border-radius: var(--radius-full);
    padding: 12px 20px 12px 14px;
    box-shadow: 0 4px 20px rgba(37,211,102,0.35);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: transform var(--t-base), box-shadow var(--t-base), padding var(--t-base);
    overflow: hidden;
    max-width: 56px;        /* collapsed — icon only */
    white-space: nowrap;
}

.wa-float:hover {
    max-width: 220px;       /* expand to show label */
    padding-right: 24px;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(37,211,102,0.4);
}

.wa-float-icon { flex-shrink: 0; }

.wa-float-label {
    opacity: 0;
    transition: opacity var(--t-base) 0.05s;
    overflow: hidden;
}
.wa-float:hover .wa-float-label { opacity: 1; }

/* Pulse ring */
.wa-float-pulse {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    background: #25D366;
    animation: waPulse 2.5s ease-out infinite;
    z-index: -1;
}

@keyframes waPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 480px) {
    .wa-float { bottom: 20px; right: 20px; padding: 14px; border-radius: 50%; max-width: none; }
    .wa-float-label { display: none; }
    .wa-float:hover { max-width: none; transform: translateY(-2px); }
}

/* ================================================================
   27. ORDER TRACKING PAGE
================================================================ */
.track-section { background: var(--clr-parchment); min-height: 60vh; }

.track-wrap {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Form card */
.track-form-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 36px 40px;
    box-shadow: var(--shadow-sm);
}

.track-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.track-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-charcoal);
    margin-bottom: 8px;
}

.track-field-hint {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--clr-muted);
}

.track-order-input {
    display: flex;
    border: 1px solid var(--clr-linen);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.track-order-input:focus-within {
    border-color: var(--clr-mauve);
    box-shadow: 0 0 0 3px rgba(155,91,122,0.12);
}

.track-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--clr-parchment);
    font-size: 15px;
    font-weight: 500;
    color: var(--clr-mauve);
    border-right: 1px solid var(--clr-linen);
    flex-shrink: 0;
    user-select: none;
}

.track-order-input input {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}
.track-order-input input:focus { box-shadow: none; }

.track-submit { white-space: nowrap; align-self: end; }

.track-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #ffcdd2;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: #c62828;
}

@media (max-width: 640px) {
    .track-form-card { padding: 24px 20px; }
    .track-form-fields { grid-template-columns: 1fr; }
    .track-submit { width: 100%; justify-content: center; }
}

/* Result card */
.track-result {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.track-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--clr-linen);
    flex-wrap: wrap;
}

.track-result-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 4px;
}

.track-result-id {
    font-size: 28px;
    color: var(--clr-mauve);
    margin: 0;
}

.track-result-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.track-result-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--clr-dark);
}

/* Status badge */
.track-status-badge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 32px;
    border-bottom: 1px solid var(--clr-linen);
}

.track-status-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.track-status-badge strong { display: block; font-size: 16px; font-weight: 500; color: var(--clr-dark); margin-bottom: 4px; }
.track-status-badge p { font-size: 14px; color: var(--clr-muted); margin: 0; }

.track-status-completed  { background: #f0faf0; }
.track-status-shipped    { background: var(--clr-mauve-pale); }
.track-status-cancelled  { background: #fdecea; }
.track-status-refunded   { background: #fff8e1; }

/* Timeline */
.track-timeline {
    display: flex;
    align-items: flex-start;
    padding: 28px 32px;
    border-bottom: 1px solid var(--clr-linen);
    overflow-x: auto;
    gap: 0;
}

.track-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 80px;
}

.track-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--clr-linen);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    transition: all var(--t-base);
}

.track-step--done .track-step-dot {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
}

.track-step--active .track-step-dot {
    border-color: var(--clr-mauve);
    box-shadow: 0 0 0 4px var(--clr-mauve-pale);
}

.track-step-pulse {
    width: 10px;
    height: 10px;
    background: var(--clr-mauve);
    border-radius: 50%;
    animation: trackPulse 1.5s ease infinite;
}

@keyframes trackPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}

.track-step-line {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--clr-linen);
    z-index: 0;
}

.track-step--done + .track-step .track-step-line,
.track-step--done .track-step-line {
    background: var(--clr-mauve);
}

.track-step-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-top: 10px;
    text-align: center;
    line-height: 1.3;
}

.track-step--done .track-step-label,
.track-step--active .track-step-label { color: var(--clr-dark); }

/* Shipping info */
.track-shipping-info {
    padding: 20px 32px;
    background: var(--clr-mauve-pale);
    border-bottom: 1px solid var(--clr-linen);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.track-shipping-row { display: flex; gap: 32px; flex-wrap: wrap; }

.track-id-mono {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    background: rgba(155,91,122,0.1);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 1px;
}

.track-note {
    padding: 16px 32px;
    font-size: 13px;
    color: var(--clr-muted);
    border-bottom: 1px solid var(--clr-linen);
    font-style: italic;
}

/* Items */
.track-items { padding: 24px 32px; border-bottom: 1px solid var(--clr-linen); }
.track-items-heading {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 16px;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--clr-linen);
}
.track-item:last-child { border-bottom: none; }

.track-item-img { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--clr-parchment); }
.track-item-img img { width: 100%; height: 100%; object-fit: cover; }

.track-item-details { flex: 1; }
.track-item-name { display: block; font-size: 14px; font-weight: 500; color: var(--clr-dark); }
.track-item-qty  { display: block; font-size: 12px; color: var(--clr-muted); margin-top: 2px; }

.track-item-total { font-size: 15px; font-weight: 500; color: var(--clr-dark); }

/* Address */
.track-address { padding: 20px 32px; border-bottom: 1px solid var(--clr-linen); }
.track-address address { font-size: 14px; color: var(--clr-charcoal); font-style: normal; line-height: 1.7; }

/* Help */
.track-help {
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.track-help p { font-size: 13px; color: var(--clr-muted); margin: 0; }

/* Hint (empty state) */
.track-hint {
    text-align: center;
    padding: 40px 24px;
    background: var(--clr-mauve-pale);
    border-radius: var(--radius-md);
}
.track-hint-icon { font-size: 36px; margin-bottom: 12px; }
.track-hint p { font-size: 15px; color: var(--clr-charcoal); margin: 0; }

/* ================================================================
   28. ORDER THANK-YOU PAGE
================================================================ */
.gaea-thankyou {
    text-align: center;
    padding: var(--sp-xl) 24px;
    max-width: 560px;
    margin: 0 auto;
}

.gaea-thankyou-icon { font-size: 48px; margin-bottom: 16px; }
.gaea-thankyou h2 { margin-bottom: 12px; }
.gaea-thankyou > p { color: var(--clr-muted); margin-bottom: 28px; }

.gaea-order-id-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--clr-mauve-pale);
    border: 2px dashed var(--clr-mauve-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin: 0 auto 24px;
    max-width: 280px;
}

.gaea-order-id-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--clr-muted);
}

.gaea-order-id-number {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    color: var(--clr-mauve);
    letter-spacing: 2px;
    line-height: 1;
}

.gaea-copy-btn {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-mauve);
    border: 1px solid var(--clr-mauve-light);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    background: transparent;
    cursor: pointer;
    transition: all var(--t-base);
}
.gaea-copy-btn:hover { background: var(--clr-mauve); color: #fff; }

/* ================================================================
   29. RESPONSIVE OVERRIDES & DESIGN REFRESH
   Comprehensive fix for all breakpoints + visual polish
================================================================ */

/* ── DESIGN ENHANCEMENTS (all sizes) ─────────────────────────── */

/* Subtle card border for definition */
.product-card {
    border: 1px solid rgba(229,221,212,0.5);
    box-shadow: 0 2px 16px rgba(45,31,40,0.05);
}
.product-card:hover {
    box-shadow: 0 12px 40px rgba(45,31,40,0.13);
    transform: translateY(-5px);
}

/* Section backgrounds — Warm Bloom alternation */
.bestsellers-section {
    background: var(--clr-blush-mid);
}
.landing-newsletter {
    background: linear-gradient(135deg, #EDE0E8 0%, var(--clr-mauve-pale) 100%);
}

/* Better page header  */
.page-header {
    background: linear-gradient(135deg, var(--clr-parchment) 0%, #EDE0E8 100%);
}
.page-header::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(155,91,122,0.07);
    pointer-events: none;
}

/* Collection card — smoother scale */
.collection-card-img {
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.collection-card:hover .collection-card-img { transform: scale(1.06); }

/* Better use-case cards */
.use-case-card:hover {
    border-color: var(--clr-mauve);
    box-shadow: 0 8px 24px rgba(155,91,122,0.12);
    transform: translateY(-3px);
}

/* Refined product price */
.product-card-price { font-weight: 400; }

/* Value cards */
.value-card { border: 1px solid rgba(229,221,212,0.4); }

/* Shop header accent */
.shop-header {
    background: linear-gradient(135deg, var(--clr-parchment) 0%, #EDE0E8 60%, var(--clr-parchment) 100%);
}

/* Better scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-cream); }
::-webkit-scrollbar-thumb { background: var(--clr-lavender); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-mauve-light); }

/* ── MY ACCOUNT: order tracking ────────────────────────────────── */
/* The badge and timeline were written to sit inside .track-result on /track,
   so they carry their own padding and a border-bottom between sections and
   expect a card around them. This is that card, on the order page. */
.gaea-order-tracking {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin: 0 0 32px;
}
.gaea-order-tracking > .track-items-heading {
    padding: 18px 32px 0;
    margin: 0;
}
/* Whichever section lands last must not leave a rule hanging across the
   bottom of the card — which section that is depends on the order's status. */
.gaea-order-tracking > *:last-child { border-bottom: 0; }
.gaea-order-tracking .track-note { padding: 0 32px 20px; margin: 0; }

@media (max-width: 600px) {
    .gaea-order-tracking > .track-items-heading { padding: 16px 20px 0; }
    .gaea-order-tracking .track-note { padding: 0 20px 16px; }
}

/* ── GENERIC PAGE PROSE ────────────────────────────────────────── */
/* Was an inline style on the wrapper in page.php, which meant no stylesheet
   rule could widen it for pages that need more room — an inline declaration
   beats any selector. Same values, now overridable. */
.page-prose {
    max-width: 820px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.85;
    color: var(--clr-charcoal);
}
/* My Account is a two-column layout with a five-column table in it; 820px
   squeezed the Total column to 71px and broke "₹510.00 for 3 items" over
   three lines. */
.woocommerce-account .page-prose { max-width: 1120px; }

/* ── MY ACCOUNT: layout and navigation ─────────────────────────── */
/* Unstyled until now — WooCommerce's own floats with no treatment at all. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 13px 20px;
    font-size: 14px;
    color: var(--clr-umber);
    border-bottom: 1px solid var(--clr-linen);
    transition: background var(--t-fast), color var(--t-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--clr-ember-pale);
    color: var(--clr-ember-dark);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--clr-ember-pale);
    color: var(--clr-ember-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--clr-mauve);
}

/* ── MY ACCOUNT: orders table ──────────────────────────────────── */
/* Left to itself this was raw WooCommerce markup wearing the theme's global
   .button rule: every action was a 40px-tall filled CTA with margin:0, so
   Pay/View/Cancel sat edge to edge and their meeting rounded corners read as
   one blob with notches cut out of it. The cell is a flex row now, and table
   actions get their own weight — a table has no primary CTA in every cell. */

.woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 14px;
}

.woocommerce-orders-table thead th {
    padding: 14px 20px;
    background: var(--clr-ember-pale);
    border-bottom: 1px solid var(--clr-linen);
    font-family: var(--font-body, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--clr-muted);
    text-align: left;
    white-space: nowrap;
}

.woocommerce-orders-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--clr-linen);
    vertical-align: middle;
    color: var(--clr-umber);
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }

/* Figures that sit in a column should line up as one. */
.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-total { font-variant-numeric: tabular-nums; }

.woocommerce-orders-table__cell-order-number a {
    font-weight: 600;
    color: var(--clr-mauve-dark);
    white-space: nowrap;
}
.woocommerce-orders-table__cell-order-number a:hover { color: var(--clr-ember); }
.woocommerce-orders-table__cell-order-date { color: var(--clr-muted); white-space: nowrap; }
.woocommerce-orders-table__cell-order-total {
    font-weight: 500;
    color: var(--clr-dark);
    min-width: 122px;   /* fits "₹510.00 for 3 items" without a stray last word */
}
/* Keep the figure itself intact; only "for N items" may wrap after it. */
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { white-space: nowrap; }
/* WooCommerce renders "₹120.00 for 1 item" — the count is context, not figure. */
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { display: inline-block; }

/* Status pill — colour carries the state so the column reads at a glance. */
.gs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    background: var(--clr-parchment);
    color: var(--clr-umber);
}
.gs-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.gs-status--processing,
.gs-status--packed,
.gs-status--shipped        { background: var(--clr-ember-pale);   color: var(--clr-ember-dark); }
.gs-status--out-for-delivery { background: var(--clr-gold-pale);  color: #8A5D12; }
.gs-status--completed      { background: #EAF6EA;                 color: #3F6B3F; }
.gs-status--on-hold,
.gs-status--refunded       { background: var(--clr-gold-pale);    color: #8A5D12; }
.gs-status--cancelled,
.gs-status--failed         { background: #FBEAE7;                 color: #A6402F; }

/* Actions — spaced with margins rather than a flex row, because this is a
   <td>: giving it display:flex takes it out of the table layout and the
   column stops sizing with its header. The buttons are echoed with no
   whitespace between them, so without a margin they butt right up.

   The !important below is not decoration. The site-wide rule at the top of the
   WooCommerce section (.woocommerce a.button) declares EVERY property with
   !important, so no amount of specificity here beats it — these actions would
   otherwise keep the 14px/28px filled-CTA treatment that caused the problem.
   Only the properties that actually collide are forced. */
.woocommerce-orders-table__cell-order-actions {
    white-space: normal;
    min-width: 264px;   /* fits three actions on one line; below this they stack */
}
.woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-orders-table__cell-order-actions a.woocommerce-button {
    /* Deliberately narrower than the site's .button: these are row actions. */
    display: inline-flex;
    align-items: center;
    margin: 0 8px 8px 0;
    padding: 8px 15px !important;
    min-height: 0;
    border-radius: var(--radius-pill) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1.2;
    white-space: nowrap;
    background: transparent !important;
    color: var(--clr-mauve-dark) !important;
    border: 1px solid var(--clr-linen) !important;
    box-shadow: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast) !important;
}
.woocommerce-orders-table__cell-order-actions a.button:last-child { margin-right: 0; }

.woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover {
    background: var(--clr-ember-pale) !important;
    border-color: var(--clr-ember-light) !important;
    color: var(--clr-ember-dark) !important;
    transform: none;
}

/* One filled action per row at most: whatever the customer most likely came
   to do. Pay outranks Track — an unpaid order needs paying before it moves. */
.woocommerce-orders-table__cell-order-actions a.track,
.woocommerce-orders-table__cell-order-actions a.pay {
    background: var(--clr-mauve) !important;
    border-color: var(--clr-mauve) !important;
    color: #fff !important;
}
.woocommerce-orders-table__cell-order-actions a.track:hover,
.woocommerce-orders-table__cell-order-actions a.pay:hover {
    background: var(--clr-mauve-dark) !important;
    border-color: var(--clr-mauve-dark) !important;
    color: #fff !important;
}
.woocommerce-orders-table__cell-order-actions a.pay ~ a.track {
    background: transparent !important;
    border-color: var(--clr-linen) !important;
    color: var(--clr-mauve-dark) !important;
}
/* Cancel is destructive; it should never look like the thing to press. */
.woocommerce-orders-table__cell-order-actions a.cancel { color: var(--clr-muted) !important; }
.woocommerce-orders-table__cell-order-actions a.cancel:hover {
    background: #FBEAE7 !important;
    border-color: #E8BDB4 !important;
    color: #A6402F !important;
}

/* The info notice's icon is a glyph from the "WooCommerce" icon font, which
   isn't loaded here — it rendered as a tofu box. Own SVG instead, so it can't
   depend on a font that may or may not arrive. */
.woocommerce-info::before,
.woocommerce-message::before {
    content: "";
    /* WooCommerce positions this absolutely and reserves room with a large
       padding-left the theme has since overridden — so the icon landed on top
       of the first word. Put it back in the flow. */
    position: static;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.woocommerce-message::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.woocommerce-info .button,
.woocommerce-message .button { float: right; margin-left: 16px; }

/* ── MY ACCOUNT: addresses ─────────────────────────────────────── */
/* Both address blocks were unstyled WooCommerce: the titles picked up the
   global h2 (52px Playfair — a page headline on a field label), the Edit link
   floated off to the right of it, and the addresses rendered in the browser's
   default italic for <address>. */
/* Flex, not grid. As a grid this laid the two cards out diagonally — one in
   row 1 column 2, the other in row 2 column 1 — because WooCommerce's markup
   puts whitespace text nodes between and around the two divs. Flex has no
   auto-placement to get wrong: one line, two items, done. */
.woocommerce-account .woocommerce-Addresses {
    display: flex;
    align-items: stretch;
    gap: 20px;
}
/* body. prefix is load-bearing: WooCommerce styles these as
   `.woocommerce .col2-set .col-1 { float: left; width: 48% }` at (0,3,0), and
   a plain `.woocommerce-account .woocommerce-Address` (0,2,0) loses — the
   cards came out 48% of their own grid track, staggered diagonally. The extra
   element selector takes this to (0,3,1). */
body.woocommerce-account .woocommerce-Addresses > .woocommerce-Address {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    float: none;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}
.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--clr-linen);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--clr-muted);
}
/* The Edit link is a button here, matching the row actions in the orders
   table — same shape, same weight, so the account reads as one thing. */
.woocommerce-account .woocommerce-Address-title .edit {
    float: none;
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--clr-linen);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--clr-mauve-dark);
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
    background: var(--clr-ember-pale);
    border-color: var(--clr-ember-light);
}
.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.75;
    color: var(--clr-umber);
}
/* The intro line above the two cards. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    font-size: 14px;
    color: var(--clr-muted);
    margin: 0 0 18px;
}

/* ── MY ACCOUNT: forms (account details, address editing) ──────── */
/* "Billing address" / "Shipping address" above the edit form comes through as
   an h3 and picked up the global display scale — ~50px, a hero size sitting on
   top of a form card. */
.woocommerce-account .woocommerce-MyAccount-content > h3 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 18px;
}

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 28px 28px 24px;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row { margin-bottom: 18px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 7px;
}
.woocommerce-account .woocommerce-MyAccount-content .required {
    color: var(--clr-mauve);
    text-decoration: none;
    border: 0;
}
/* Matching the input treatment used on the login and signup pages, so a
   customer doesn't meet two different field styles in one account. */
.woocommerce-account .woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select {
    width: 100%;
    padding: 12px 15px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-ink);
    background: #fff;
    border: 1.5px solid var(--clr-lavender);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-base);
}
.woocommerce-account .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
    border-color: var(--clr-mauve);
    outline: none;
    box-shadow: none;
}
/* WooCommerce's two-up rows use floats and a percentage width. */
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    width: calc(50% - 9px);
    float: left;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row-last { float: right; }
.woocommerce-account .woocommerce-MyAccount-content .clear { clear: both; }

/* Hints ("This will be how your name is displayed…") default to italic. */
.woocommerce-account .woocommerce-MyAccount-content .form-row span em,
.woocommerce-account .woocommerce-MyAccount-content .form-row em,
.woocommerce-account .woocommerce-MyAccount-content .description {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
    color: var(--clr-muted);
}

/* The password section is a bare <fieldset>, which the browser draws with its
   own border and a legend notched into it — the one piece of unstyled chrome
   on the page. */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
    margin: 26px 0 0;
    padding: 22px 0 0;
    border: 0;
    position: relative;
}
/* The divider is drawn as a pseudo-element rather than border-top, because a
   <legend> notches itself into its fieldset's top border — the rule ran
   straight through "Password change" instead of sitting above it. */
.woocommerce-account .woocommerce-MyAccount-content fieldset::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--clr-linen);
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    display: block;
    width: 100%;
    float: left;   /* takes the legend out of the border-notch behaviour */
    padding: 0;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--clr-dark);
}
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    margin-top: 6px;
}

@media (max-width: 600px) {
    .woocommerce-account .woocommerce-Addresses { flex-direction: column; }
    .woocommerce-account .woocommerce-EditAccountForm,
    .woocommerce-account .woocommerce-address-fields { padding: 20px 18px 18px; }
    .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
    .woocommerce-account .woocommerce-MyAccount-content .form-row-last {
        width: 100%;
        float: none;
    }
}

/* ── MY ACCOUNT: orders table on mobile ───────────────────────────── */
/* A five-column table can't shrink to a phone. WooCommerce already prints
   data-title on every cell, so each row becomes a card with its own labels. */
@media (max-width: 768px) {
    .woocommerce-orders-table thead { display: none; }
    .woocommerce-orders-table,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr,
    .woocommerce-orders-table td { display: block; width: 100%; }

    .woocommerce-orders-table {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .woocommerce-orders-table tbody tr {
        background: #fff;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-bottom: 16px;
        padding: 6px 4px;
        overflow: hidden;
    }
    .woocommerce-orders-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 11px 18px;
        border-bottom: 0;
        text-align: right;
    }
    .woocommerce-orders-table tbody td::before {
        content: attr(data-title);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--clr-muted);
        text-align: left;
        flex-shrink: 0;
    }
    /* Actions get the full width of the card rather than a label and a huddle. */
    .woocommerce-orders-table__cell-order-actions {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        border-top: 1px solid var(--clr-linen);
        margin-top: 4px;
        padding-top: 14px;
    }
    .woocommerce-orders-table__cell-order-actions a.button,
    .woocommerce-orders-table__cell-order-actions a.woocommerce-button { margin: 0; }
    .woocommerce-orders-table__cell-order-actions::before { display: none; }
    .woocommerce-orders-table__cell-order-actions a.button,
    .woocommerce-orders-table__cell-order-actions a.woocommerce-button {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 40px;   /* thumb-sized once it is the only way to tap */
        padding: 10px 15px !important;
    }
    .woocommerce-orders-table__cell-order-actions { min-width: 0; }
    .woocommerce-info .button,
    .woocommerce-message .button { float: none; display: block; margin: 12px 0 0; }
}

/* ── CHECKOUT (WooCommerce Blocks) ─────────────────────────────── */
/* This page is the block checkout, not the classic shortcode, and it was
   rendering almost entirely on WooCommerce's own defaults: near-black 1px
   field borders at 4px radius, and a Place Order button in #32373c — slate
   grey, on a warm mauve brand, as the single most important control on the
   site. Selectors are prefixed with body. because the block styles load after
   the theme's and match on their own component classes. */

/* Specificity here is measured, not guessed. WooCommerce styles the fields as
   `.wc-block-components-form .wc-block-components-text-input input[type=email]`
   — (0,3,1) — so a shorter override loses outright, and its button rule ties
   with a plain body-prefixed selector and wins on source order because the
   block stylesheet loads after this one. Each selector below carries one more
   step than the rule it has to beat. */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input,
body.woocommerce-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-textarea {
    border: 1.5px solid var(--clr-lavender);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--clr-ink);
    transition: border-color var(--t-base);
}
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-textarea:focus {
    border-color: var(--clr-mauve);
    outline: none;
    box-shadow: none;
}
/* The floating label sits inside the field; it must not inherit the uppercase
   micro-label treatment used elsewhere on the site. */
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label {
    color: var(--clr-muted);
    letter-spacing: 0;
    text-transform: none;
}

/* The one button the whole page exists for. */
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    background: var(--clr-mauve);
    border: 0;
    border-radius: var(--radius-pill);
    min-height: 54px;   /* was 40px — under the 44px tap target on a phone */
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background var(--t-base);
}
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
    background: var(--clr-mauve-dark);
}
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:disabled {
    opacity: 0.55;
}

/* Order summary — the same white card the account pages use. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: #fff;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    /* No horizontal padding. The block already spaces its own contents, and
       adding 20px a side narrowed the item column until the product name
       wrapped one character per line. */
}
body.woocommerce-checkout .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-variant-numeric: tabular-nums;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--clr-mauve-dark);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    border-radius: var(--radius-sm);
}

/* Step headings: keep the display face, drop it to a section size. */
body.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--clr-dark);
}

/* ── CHECKOUT on mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* The WhatsApp bubble is position:fixed bottom-right, so once the customer
       scrolls to the end of the form it sits on top of Place Order. Checkout
       is also the one page where a link off-site is least welcome. */
    body.woocommerce-checkout .wa-float { display: none; }

}

/* ── LARGE DESKTOP (≤1400px) ──────────────────────────────────── */
@media (max-width: 1400px) {
    .container { padding: 0 32px; }
}

/* ── TABLET (≤1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Header: show hamburger on tablet */
    .site-nav    { display: none; }
    .menu-toggle { display: flex; }
    .header-inner { grid-template-columns: auto 1fr auto; }

    /* Collections: 2 columns */
    .collections-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .collection-card { aspect-ratio: 4/3; }

    /* About */
    .about-hero { grid-template-columns: 1fr; min-height: auto; }
    .about-hero-image { height: 400px; }
    .about-hero-content { padding: clamp(36px, 5vw, 72px); }

    /* Values */
    .values-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

    /* Custom orders steps */
    .steps-list { grid-template-columns: 1fr; gap: 20px; }
    .use-cases-grid { grid-template-columns: repeat(3, 1fr); }

    /* Single product already handled at 900px */

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }

    /* Products grid */
    .products-grid { grid-template-columns: repeat(3, 1fr); }

    /* Woo products */
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* ── LARGE MOBILE (≤768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sp-xl:   44px;
        --sp-2xl:  64px;
        --sp-lg:   32px;
        --section-py: 44px;
        --header-h: 80px;
    }

    .container { padding: 0 18px; }

    /* Typography */
    h1 { font-size: clamp(28px, 8vw, 44px); }
    h2 { font-size: clamp(22px, 6vw, 34px); }
    h3 { font-size: clamp(18px, 5vw, 26px); }

    /* Header */
    .header-inner { padding: 0 16px; grid-template-columns: auto 1fr auto; gap: 12px; }
    .site-logo { justify-self: start; }
    .site-logo-img { height: 68px; width: 68px; }
    /* A stray `--header-h: 80px;` sat here, outside any selector — invalid at
       this position and silently discarded. The real declaration is in the
       :root block at the top of this same media query. */

    /* Category cards: 1 column on mobile, horizontal layout kept */
    .gs-categories-grid { grid-template-columns: 1fr; }

    /* Testimonials: 1 column on mobile */
    .gs-testimonials-grid { grid-template-columns: 1fr; }

    /* Process steps: vertical on mobile */
    .gs-process-steps {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .gs-step-connector { display: none; }
    .gs-step { max-width: 100%; width: 100%; padding: 0; }

    /* Hero */
    .hero, .gs-hero { min-height: 100svh; min-height: 100vh; }
    .hero-content {
        padding: 32px 18px 48px;
        min-height: calc(100vh - var(--header-h));
    }
    .hero-title { font-size: clamp(34px, 9vw, 58px); line-height: 1.08; }
    .hero-subtitle { font-size: 15px; margin-bottom: 28px; }
    .hero-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
    }
    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    /* Hide botanical decorations on small screens */
    .hero-leaf { display: none; }

    /* Trust bar: 2×2 grid */
    .trust-bar-inner { flex-wrap: wrap; }
    .trust-item {
        width: 50%;
        padding: 12px 14px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        justify-content: center;
    }
    .trust-item:nth-child(3),
    .trust-item:nth-child(4) { border-bottom: none; }

    /* Collections: 1 column on mobile */
    .collections-grid { grid-template-columns: 1fr; gap: 12px; }
    .collection-card { aspect-ratio: 16/9; min-height: 220px; }

    /* Products grid: 2 column */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* Section header */
    .section-header { margin-bottom: 32px; }
    .section { padding: var(--sp-xl) 0; }

    /* About teaser */
    .about-teaser { grid-template-columns: 1fr; }
    .about-teaser-image { height: 260px; }
    .about-teaser-content { padding: 36px 18px; }

    /* About hero */
    .about-hero { grid-template-columns: 1fr; }
    .about-hero-image { height: 280px; }
    .about-hero-content { padding: 36px 18px; }

    /* Values */
    .values-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .value-card { padding: 28px 18px; }

    /* Instagram */
    .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }

    /* Newsletter */
    .newsletter-inner { grid-template-columns: 1fr; gap: 24px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-main { padding: 48px 0 40px; }

    /* Page header */
    .page-header { padding: calc(var(--header-h) + 28px) 0 36px; }

    /* Shop */
    .shop-header { padding: calc(var(--header-h) + 20px) 0 28px; }
    .shop-category-filters { padding: 16px 0 20px; gap: 8px; }
    /* Stack result-count + sort tightly (the wrapped row left a big gap) */
    .shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 0 14px;
        margin-bottom: 18px;
    }
    .shop-result-count { margin: 0; }

    /* Single product */
    .single-product-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: calc(var(--header-h) + 16px);
    }
    .product-gallery { position: static; }
    .scent-notes { gap: 16px; }
    .product-tab-btn { font-size: 13px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }

    /* Custom orders */
    .use-cases-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .steps-list { grid-template-columns: 1fr; gap: 16px; }
    .form-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .custom-order-form-wrap { padding: 28px 18px; }

    /* Track page */
    .track-form-card { padding: 24px 18px; }
    .track-form-fields { grid-template-columns: 1fr; gap: 14px; }

    /* FAQ */
    .faq-section { max-width: 100%; }
    .faq-question { font-size: 15px; padding: 16px 0; }
}

/* ── SMALL MOBILE (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
    :root { --sp-xl: 36px; --sp-lg: 24px; --sp-md: 18px; }

    /* Reduce section min-heights that cause white space */
    .gs-ingredients-section { padding: 36px 0; }
    .gs-process-section { padding: 36px 0; }
    .gs-testimonials-section { padding: 36px 0; }
    .gs-custom-cta-section { padding: 48px 0; }
    .gs-newsletter-section { padding: 56px 0; }
    .gs-categories-section.section { padding: 36px 0; }
    .bestsellers-section.section { padding: 36px 0; }
    .about-teaser { min-height: unset; }
    #featured-collections.section { padding: 36px 0; }
    .section { padding: 36px 0; }

    .container { padding: 0 14px; }

    /* Trust: 1 column */
    .trust-item { width: 100%; }
    .trust-item:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .trust-item:nth-child(4) { border-bottom: none; }

    /* Collections: 1 column */
    .collections-grid { grid-template-columns: 1fr; }
    .collection-card { aspect-ratio: 3/2; }

    /* Products: 2 → 1 */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Footer: 2 column grid on small mobile */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-main { padding: 40px 0 28px; }
    .footer-col h4 { font-size: 11px; margin-bottom: 12px; }
    .footer-col ul li a { font-size: 13px; }
    .footer-logo img { height: 72px; width: 72px; }

    /* Values: 1 column */
    .values-grid { grid-template-columns: 1fr; }

    /* Instagram: 3 → 2 */
    .instagram-grid { grid-template-columns: repeat(2, 1fr); }

    /* Custom orders use cases */
    .use-cases-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Buttons: full width in forms */
    .hero-actions .btn { max-width: none; width: 100%; }

    /* Track prefix + input */
    .track-id-group {
        flex-direction: row;
    }

    /* Category filter pills: smaller */
    .category-filter-btn { padding: 8px 12px; font-size: 11px; letter-spacing: 0.5px; }

    /* Shop toolbar: stack */
    .shop-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Newsletter: stack button */
    .newsletter-field { flex-direction: column; border-radius: var(--radius-sm); }
    .newsletter-field input { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .newsletter-field button {
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        padding: 14px;
        text-align: center;
    }

    /* Page header smaller */
    .page-header { padding: calc(var(--header-h) + 20px) 0 28px; }
}

/* ── VERY SMALL (≤375px) ─────────────────────────────────────── */
@media (max-width: 375px) {
    .container { padding: 0 12px; }
    .hero-title { font-size: clamp(30px, 11vw, 40px); }
    .hero-subtitle { font-size: 14px; }
    .btn { padding: 13px 20px; }
    .track-form-card { padding: 18px 14px; }
    .newsletter-text h3 { font-size: 26px; }
    .products-grid { grid-template-columns: 1fr; }
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr; }
}

/* ── DESKTOP: ensure desktop nav always visible ──────────────── */
@media (min-width: 1025px) {
    .site-nav    { display: flex !important; }
    .menu-toggle { display: none !important; }
    .header-inner { grid-template-columns: auto 1fr auto; }
}

/* ================================================================
   30. DESIGN SYSTEM V2 — Professional UI / New Components
================================================================ */

/* ── KEYFRAME ANIMATIONS ──────────────────────────────────────── */
@keyframes float-y {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
@keyframes float-y-sm {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}
@keyframes orb-drift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33%  { transform: translate(40px, -30px) scale(1.1); opacity: 0.3; }
    66%  { transform: translate(-20px, 20px) scale(0.9); opacity: 0.6; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes tag-float {
    0%   { opacity: 0; transform: translateY(14px) scale(0.85); }
    18%  { opacity: 1; transform: translateY(0px) scale(1); }
    78%  { opacity: 1; transform: translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateY(-22px) scale(0.9); }
}
@keyframes shimmer-sweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.6; }
}
@keyframes glow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.15); }
}
@keyframes count-up-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes border-spin {
    to { transform: rotate(360deg); }
}

/* ── HERO ENHANCEMENTS ────────────────────────────────────────── */
.gs-hero {
    position: relative;
    overflow: hidden;
    background: var(--clr-blush);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-top: var(--header-h);
    box-sizing: border-box;
}

/* ── ANIMATED HERO CANDLE ─────────────────────────────────────── */
/* Hero creative — real product photograph on the right (replaces the old candle SVG) */
.hero-creative {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%) rotate(2deg);
    width: clamp(180px, 22vw, 340px);
    aspect-ratio: 866 / 1300;
    z-index: 2;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(45,26,14,0.24), 0 6px 18px rgba(45,26,14,0.12);
    animation: hero-creative-float 7s ease-in-out infinite;
}
.hero-creative img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes hero-creative-float {
    0%, 100% { transform: translateY(-50%) rotate(2deg); }
    50%      { transform: translateY(calc(-50% - 12px)) rotate(2deg); }
}

/* Hide on smaller screens so it never overlaps the centered headline */
@media (max-width: 900px) {
    .hero-creative { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-creative { animation: none; }
}

/* ── BRAND-APPROPRIATE HERO DECORATIONS ───────────────────────── */
/* Warm wax glow — bottom right ambient warmth */
.hero-wax-glow {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,134,42,0.13) 0%, rgba(155,91,122,0.06) 50%, transparent 75%);
    filter: blur(50px);
    pointer-events: none;
    animation: wax-breathe 8s ease-in-out infinite;
}
@keyframes wax-breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%       { transform: scale(1.12); opacity: 1; }
}

/* Candle flame dots — tiny warm amber specks */
.hero-flame-dot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,134,42,0.7), rgba(155,91,122,0.3) 60%, transparent);
    pointer-events: none;
    animation: flame-flicker 3s ease-in-out infinite;
}
.hero-flame-dot-1 { width: 6px; height: 8px; top: 22%; right: 18%; animation-delay: 0s; }
.hero-flame-dot-2 { width: 4px; height: 6px; top: 55%; left: 14%; animation-delay: 1.1s; }
.hero-flame-dot-3 { width: 5px; height: 7px; bottom: 28%; right: 32%; animation-delay: 2.2s; }
@keyframes flame-flicker {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.6; }
    25%       { transform: scaleX(0.85) scaleY(1.2); opacity: 0.9; }
    75%       { transform: scaleX(1.1) scaleY(0.9); opacity: 0.7; }
}

/* Botanical leaf SVGs */
.hero-leaf {
    position: absolute;
    pointer-events: none;
    animation: leaf-sway 7s ease-in-out infinite;
}
.hero-leaf-1 {
    width: 80px; height: 108px;
    top: 12%; left: 3%;
    animation-delay: 0s;
    opacity: 0.7;
}
.hero-leaf-2 {
    width: 60px; height: 82px;
    bottom: 15%; right: 4%;
    transform: rotate(150deg);
    animation-delay: 2.5s;
    opacity: 0.5;
}
@keyframes leaf-sway {
    0%, 100% { transform: rotate(0deg); }
    33%       { transform: rotate(3deg); }
    66%       { transform: rotate(-2deg); }
}
.hero-leaf-2 { animation-name: leaf-sway-r; }
@keyframes leaf-sway-r {
    0%, 100% { transform: rotate(150deg); }
    33%       { transform: rotate(153deg); }
    66%       { transform: rotate(147deg); }
}

.hero-tags {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hero-tag {
    position: absolute;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(155,91,122,0.18);
    color: var(--clr-ink);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(45,26,14,0.08);
    animation: tag-float 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}
/* 3 tags — left side upper, right side mid, left side lower */
.hero-tag:nth-child(1) { top: 28%; left:  5%; }
.hero-tag:nth-child(2) { top: 42%; right: 5%; left: auto; }
.hero-tag:nth-child(3) { top: 62%; left:  6%; }

.hero-badge {
    display: none; /* removed — badge was distracting on light hero */
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(155,91,122,0.28);
    color: var(--clr-ember);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(155,91,122,0.12);
}
.hero-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--clr-ember-light);
    border-radius: 50%;
}
.hero-badge-dot {
    width: 6px; height: 6px;
    background: #9B5B7A;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-title {
    font-family: var(--ff-serif);
    font-size: clamp(3.2rem, 7.5vw, 8rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--clr-ink);      /* dark espresso on light hero */
    margin-bottom: 0.4em;
    letter-spacing: -0.02em;
}
.hero-title em {
    font-style: italic;
    color: var(--clr-ember);    /* brand mauve */
    font-weight: 400;
    display: block;
}
.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--clr-muted);
    max-width: 480px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(155,91,122,0.18);
    color: var(--clr-ink);
    font-size: 0.82rem;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(45,26,14,0.07);
}

.hero-tags-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.hero-tags-left  { left: 3%; }
.hero-tags-right { right: 3%; }

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #9B5B7A;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
    box-shadow: 0 4px 20px rgba(155,91,122,0.35);
}
.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmer-sweep 3s ease-in-out infinite;
    animation-delay: 1s;
}
.btn-hero-primary:hover {
    background: #7A4560;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(155,91,122,0.5);
    color: #fff;
}
.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.48);
    color: var(--clr-ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(45,26,14,0.16);
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all var(--t-base);
}
.btn-hero-ghost:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(45,26,14,0.28);
    color: var(--clr-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45,26,14,0.10);
}

.hero-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    justify-content: center;
}
.hero-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--t-base);
}
.hero-cat-pill:hover {
    background: rgba(155,91,122,0.2);
    border-color: rgba(155,91,122,0.4);
    color: #fff;
    transform: translateY(-1px);
}

/* ── MARQUEE BAND ─────────────────────────────────────────────── */
.marquee-band {
    background: linear-gradient(90deg, var(--clr-ember-dark), var(--clr-ember), var(--clr-rose), var(--clr-ember));
    background-size: 200% 100%;
    animation: marquee-gradient 6s linear infinite;
    color: rgba(255,255,255,0.92);
    padding: 14px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
@keyframes marquee-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.marquee-track span {
    color: var(--clr-white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 0 20px;
}
.marquee-sep {
    color: #9B5B7A;
    font-size: 10px;
    padding: 0 8px;
    flex-shrink: 0;
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }

/* ── PRODUCT CATEGORIES GRID ──────────────────────────────────── */
.gs-categories-section {
    background: var(--clr-blush);
    position: relative;
    overflow: hidden;
}

/* Subtle blob in background */
.gs-categories-section::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--clr-ember-pale) 0%, transparent 70%);
    top: -100px; right: -100px;
    border-radius: 50%;
    pointer-events: none;
}

/* Empty products fallback */
.gs-empty-products {
    text-align: center;
    padding: 80px 24px;
}
.gs-empty-icon { font-size: 56px; margin-bottom: 16px; display: block; }
.gs-empty-products p {
    font-size: 17px;
    color: var(--clr-muted);
    margin-bottom: 24px;
}

.gs-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 16px;
}

/* ── Category card — light theme, on-brand colors ─────────────── */
.gs-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* Cards are now conditional — a category with no products doesn't render — so
   the count can be odd. Let a lone final card span the row instead of sitting
   in the left column with a hole beside it. No-op at an even count. */
.gs-categories-grid > .gs-cat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* ── "Our Products. One Promise." — photo-led bento ───────────────────
   Rebuilt. The previous version gave each card its own pastel tint — pink,
   mint, lavender, cream — which fought each other, fought the blush section
   behind them, and put the brand mauve nowhere. Two cards carried a photo and
   two did not, so the set looked unfinished.

   Now every card is a photograph under a bottom-up scrim with the copy on the
   dark, which is the same language as "Find Your Ritual" further down the
   page. Two things it buys beyond looking better: the section reads as one
   family, and the treatment survives ANY photograph the owner uploads —
   including the car-perfume packshots, whose printed cartons defeated the old
   faint-tint approach. Type sits on the darkened bottom, never on the picture.

   The per-card colour in wp-admin is now the fallback ground for a card with
   no image, and tints its eyebrow. It no longer paints the whole card. */
.gs-cat-card {
    --cat-clr: #9B5B7A;
    --cat-bg: linear-gradient(135deg, #3A2430 0%, #241620 100%);
}
.gs-cat-card[data-theme="blush"]    { --cat-clr: #C98BA6; }
.gs-cat-card[data-theme="sage"]     { --cat-clr: #8FB894; }
.gs-cat-card[data-theme="lavender"] { --cat-clr: #9FAEE0; }
.gs-cat-card[data-theme="amber"]    { --cat-clr: #E4B96A; }
.gs-cat-card[data-theme="rose"]     { --cat-clr: #DFA0B2; }

.gs-cat-card {
    position: relative;
    display: flex;
    align-items: flex-end;          /* copy sits on the dark bottom */
    min-height: 220px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--cat-bg);      /* shows only when a card has no photo */
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.gs-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(52,24,42,0.22);
}
.gs-cat-card:focus-visible { outline: 2px solid var(--clr-ember); outline-offset: 3px; }

/* The photograph. A separate layer so it can scale on hover without dragging
   the scrim or the type with it. */
.gs-cat-card .gs-cat-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.001);        /* hides the hairline edge while scaling */
    transition: transform 0.6s ease;
    -webkit-mask-image: none;
            mask-image: none;
    width: auto;
    display: block;
    opacity: 1;
}
.gs-cat-card:hover .gs-cat-card-bg { transform: scale(1.05); }

/* Scrim. Starts around a third down so the subject of the photo stays clear,
   then deepens fast enough that white type is legible over ANY image —
   including the pale soap shot and the printed car cartons. */
.gs-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(28,13,22,0.94) 0%,
        rgba(28,13,22,0.80) 26%,
        rgba(28,13,22,0.34) 55%,
        rgba(28,13,22,0.06) 78%,
        transparent 100%);
    pointer-events: none;
}

.gs-cat-card-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.gs-cat-badge {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.26);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.gs-cat-card h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.gs-cat-card p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    color: rgba(255,255,255,0.82);
    max-width: 46ch;
}

.gs-cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}
.gs-cat-cta svg { transition: transform var(--t-base); }
.gs-cat-card:hover .gs-cat-cta svg { transform: translateX(4px); }

/* The hero cell has the room for a bigger headline; the two small ones do not
   carry body copy at all (set in the bento rules further down). */
.gs-bento > .gs-cat-card:nth-child(1) h3 { font-size: 27px; }
.gs-bento > .gs-cat-card:nth-child(1) .gs-cat-card-content { padding: 26px 28px 24px; }

@media (max-width: 600px) {
    .gs-cat-card { min-height: 200px; }
    .gs-cat-card-content { padding: 18px 18px 16px; }
    .gs-bento > .gs-cat-card:nth-child(1) h3 { font-size: 22px; }
    .gs-cat-card h3 { font-size: 19px; }

    /* No translucent chip on a phone.
       These eyebrows are three qualifiers long and the card is ~300px wide, so
       every one of them wrapped — and a wrapped pill breaks into two stepped
       boxes, which is what was reported. Over a busy photograph the frosted
       chip also went muddy rather than reading as glass.

       Plain uppercase text instead: it wraps like text is supposed to, and a
       text-shadow does the legibility work the chip was there for. */
    .gs-cat-badge {
        background: none;
        border: 0;
        backdrop-filter: none;
        padding: 0;
        letter-spacing: 0.13em;
        line-height: 1.5;
        color: rgba(255,255,255,0.90);
        text-shadow: 0 1px 6px rgba(0,0,0,0.75);
    }
    /* Keep the same rule when the cell-specific overrides above would
       otherwise re-apply a chip to the two small cells. */
    .gs-bento > .gs-cat-card:nth-child(3) .gs-cat-badge,
    .gs-bento > .gs-cat-card:nth-child(4) .gs-cat-badge {
        padding: 0;
        letter-spacing: 0.13em;
    }

    /* A phone card is shorter, so the copy sits proportionally higher up the
       photo. Bring the scrim up with it, or the eyebrow lands on the picture
       — on the car card it was sitting directly on the carton's own type. */
    .gs-cat-card::after {
        background: linear-gradient(to top,
            rgba(28,13,22,0.95) 0%,
            rgba(28,13,22,0.88) 38%,
            rgba(28,13,22,0.55) 66%,
            rgba(28,13,22,0.15) 86%,
            transparent 100%);
    }
}

.gs-cat-cta svg { transition: transform var(--t-base); }
.gs-cat-cta:hover svg { transform: translateX(4px); }

/* ── INGREDIENT SECTION ───────────────────────────────────────── */
.gs-ingredients-section {
    background: var(--clr-blush);   /* light blush peach — icons pop */
    padding: var(--sp-xl) 0 calc(var(--sp-xl) + 16px);
    position: relative;
    overflow: hidden;
}
.gs-ingredients-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 500px at 10% 60%, rgba(155,91,122,0.06), transparent),
        radial-gradient(ellipse 500px 700px at 90% 10%, rgba(196,134,42,0.06), transparent);
    pointer-events: none;
}
.gs-ingredients-section::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(123,94,167,0.05) 0%, transparent 70%);
    top: 20%; right: -50px;
    border-radius: 50%;
    pointer-events: none;
}
.gs-ingredients-header {
    text-align: center;
    margin-bottom: 64px;
}
.gs-ingredients-header .eyebrow { color: var(--clr-ember); }
.gs-ingredients-header h2 {
    color: var(--clr-purple-hl);   /* Spirit Rituals — purple headline on light bg */
}
.gs-ingredients-header p {
    color: var(--clr-muted);
    max-width: 540px;
    margin: 12px auto 0;
    font-size: 16px;
}

.gs-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
}

.gs-ingredient {
    background: var(--clr-cream);
    border-radius: var(--radius-lg);
    padding: 44px 36px 40px;
    border-top: 3px solid var(--accent, var(--clr-ember));
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s ease;
}
/* .gs-ingredient::before removed — border-top on card itself is sufficient */
.gs-ingredient:hover {
    /* No lift — ingredient card is not a link. Warm border glow instead. */
    box-shadow: 0 0 0 2px var(--accent, var(--clr-ember)), 0 8px 28px rgba(45,26,14,0.10);
    transform: none;
}

.gs-ingredient-icon {
    width: 72px;
    height: 72px;
    background: var(--accent, var(--clr-ember));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(155,91,122,0.30);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease;
}
.gs-ingredient-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px dashed rgba(155,91,122,0.25);
}
.gs-ingredient-icon svg { width: 32px; height: 32px; }
.gs-ingredient:hover .gs-ingredient-icon {
    box-shadow: 0 8px 24px rgba(155,91,122,0.35);
}

.gs-ingredient h4 {
    font-family: var(--ff-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-ink);
    margin-bottom: 10px;
    line-height: 1.2;
}
.gs-ingredient p {
    font-family: var(--ff-sans);
    font-size: 0.9rem;
    color: var(--clr-umber);
    line-height: 1.65;
    margin-bottom: 20px;
}
.gs-ingredient-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, var(--clr-ember));
    background: color-mix(in srgb, var(--accent, var(--clr-ember)) 10%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent, var(--clr-ember)) 25%, transparent);
    padding: 5px 14px;
    border-radius: 999px;
}

/* ── STATS BAND — removed per design decision ─────────────────── */
.gs-stats-band { display: none; }
.gs-stats-band::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}
.gs-stat-number {
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    transition: opacity 0.3s;
}
.gs-stat-label {
    display: block;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 6px;
}
.gs-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}
.gs-stat { text-align: center; }

/* ── PROCESS SECTION ──────────────────────────────────────────── */
.gs-process-section {
    background: var(--clr-ivory-warm);   /* warm ivory — earthy, artisanal */
    position: relative;
    overflow: hidden;
}

.gs-step {
    flex: 1;
    max-width: 240px;
    text-align: center;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.gs-process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin: 44px auto 0;
    max-width: 980px;
    flex-wrap: nowrap;
    position: relative;
}
/* Continuous dashed line threading the four icons into one journey */
.gs-process-steps::before {
    content: '';
    position: absolute;
    top: 50px;                       /* aligns with the icon vertical centre */
    left: 13%;
    right: 13%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--clr-mauve-light) 0 7px, transparent 7px 15px);
    opacity: 0.6;
    z-index: 0;
}
/* Step number — elegant gold numeral above the icon */
.gs-step-number {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-serif);
    font-size: 34px;
    font-weight: 500;
    color: #c4863a;
    opacity: 0.9;
    line-height: 1;
    letter-spacing: 0.02em;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}
.gs-step-icon {
    position: relative;
    z-index: 1;
    width: 76px; height: 76px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto 20px;          /* icon centre sits on the connector line */
    color: var(--clr-mauve);
    box-shadow: 0 6px 22px rgba(155,91,122,0.18);
    border: 1px solid var(--clr-mauve-pale);
    transition: box-shadow var(--t-base), transform var(--t-base);
}
.gs-step:hover .gs-step-icon {
    box-shadow: 0 10px 30px rgba(155,91,122,0.28);
    transform: translateY(-4px);
}
.gs-step h4 {
    font-family: var(--font-display);
    font-size: 21px;
    color: var(--clr-dark);
    margin-bottom: 10px;
}
.gs-step p {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-muted);
    line-height: 1.7;
}
.gs-step-connector { display: none; }   /* replaced by the continuous line above */
.gs-process-section .section-header { margin-bottom: 18px; }
@media (max-width: 1200px) {
    .gs-process-steps::before { display: none; }   /* steps wrap — no straight line */
}

/* ── FEATURED COLLECTIONS — warm cream section ───────────────── */
#featured-collections {
    background: var(--clr-cream);
    position: relative;
    overflow: hidden;
}
#featured-collections .section-header h2  { color: var(--clr-ink); }
#featured-collections .section-header .eyebrow { color: var(--clr-ember); }
#featured-collections .section-header p   { color: var(--clr-muted); }

/* ── ENHANCED PRODUCT CARDS ───────────────────────────────────── */
.gs-products-grid { gap: 20px; }

.product-card, .gs-product-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(45,26,14,0.06);
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s ease;
}
.product-card:hover, .gs-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}
.product-card .product-image-wrap, .gs-product-card .product-image-wrap {
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.product-card img, .gs-product-card img {
    transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
}
.product-card:hover img, .gs-product-card:hover img {
    transform: scale(1.06);
}

.gs-product-card {
    position: relative;
}

.product-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--clr-parchment), var(--clr-linen));
}
.product-card-image-link { display: block; height: 100%; }
/* `contain` — same specificity as the .product-card-image img rule in §"product card"
   but later in the file, so this is what homepage/bestseller cards actually use.
   Left as `cover` it silently re-cropped the images that rule had just fixed. */
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.gs-product-card:hover .product-card-image img { transform: scale(1.06); }

.gs-product-placeholder {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--clr-parchment) 0%, #EDE0E8 100%);
    color: var(--clr-mauve);
}
/* Demo cards use custom gradient backgrounds */
.gs-demo-card .gs-product-placeholder { background: var(--clr-espresso); }
.gs-placeholder-icon { font-size: 36px; filter: drop-shadow(0 4px 16px rgba(155,91,122,0.4)); }

/* Product hover overlay + view btn removed per design decision */
.gs-product-hover-overlay { display: none; }
.gs-product-view-btn { display: none; }

.product-card-notes {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--clr-muted);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.product-card-notes svg { color: var(--clr-mauve); flex-shrink: 0; }

/* ── ABOUT TEASER ENHANCEMENTS ────────────────────────────────── */
.gs-about-teaser { position: relative; }
.gs-about-badge { display: none; } /* removed */
.gs-about-badge-hidden {
    position: absolute;
    bottom: 32px;
    right: 32px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(45,31,40,0.15);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.6);
}
.gs-about-badge-line {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 4px;
}
.gs-about-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--clr-dark);
    font-style: italic;
}

/* ── NEW ABOUT BRAND PANEL — on-brand warm/earthy ─────────────── */
.gs-about-brand-panel {
    position: relative;
    background: linear-gradient(
        150deg,
        var(--clr-cream) 0%,
        var(--clr-ivory-warm) 40%,
        var(--clr-parchment) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 580px;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid rgba(155,91,122,0.08);
}
/* Subtle botanical watermark background */
.gs-about-leaf-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 300px 400px at 10% 80%, rgba(90,122,90,0.06), transparent),
        radial-gradient(ellipse 200px 300px at 90% 20%, rgba(196,134,42,0.05), transparent);
    pointer-events: none;
}
.gs-about-brand-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 48px 40px;
}
.gs-about-brand-logo {
    opacity: 0.9;
    transition: opacity var(--t-base);
    filter: drop-shadow(0 4px 16px rgba(155,91,122,0.15));
}
.gs-about-brand-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.gs-about-brand-gaea {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--clr-ink);
    line-height: 1;
}
.gs-about-brand-scents {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.55em;
    color: var(--clr-ember);
    text-transform: uppercase;
    margin-top: 2px;
}
.gs-about-wave {
    width: 120px;
    height: 16px;
    opacity: 0.7;
}
.gs-about-brand-tagline {
    font-family: var(--font-display);
    font-size: 16px;
    font-style: normal;
    /* Both lines carry the brand mauve. "Fragrance & flame" used to sit in
       --clr-muted, so the tagline read as two different thoughts in two
       different colours rather than one line that happens to wrap. */
    color: var(--clr-ember);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}
.gs-about-brand-tagline em {
    font-style: italic;
}
/* Brand pillars */
.gs-about-pillars {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 24px;
    background: rgba(255,255,255,0.55);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(155,91,122,0.10);
    margin-top: 8px;
    backdrop-filter: blur(4px);
}
.gs-about-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
}
.gs-about-pillar-icon { font-size: 18px; line-height: 1; }
.gs-about-pillar span:last-child {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--clr-muted);
    white-space: nowrap;
}
.gs-about-pillar-sep {
    width: 1px;
    height: 32px;
    background: rgba(155,91,122,0.15);
    flex-shrink: 0;
}
/* Update about-teaser to use the new panel */
.about-teaser-image { display: none; } /* hide old image div */
.gs-about-teaser {
    grid-template-columns: 1fr 1fr;
}
/* Override: replace about-teaser-image slot with brand-panel */
.gs-about-brand-panel { grid-area: unset; }

@media (max-width: 768px) {
    .gs-about-brand-panel { min-height: 300px; }
    .gs-about-brand-center { padding: 32px 24px; gap: 14px; }
    .gs-about-brand-gaea { font-size: 28px; }
    .gs-about-pillars { gap: 0; padding: 12px 16px; }
    .gs-about-pillar { padding: 0 10px; }
}

/* ── OLD ABOUT ART PANEL (kept for about.php page) ───────────── */
/* ── ABOUT ART PANEL — candle-inspired aesthetic ─────────────── */
.gs-about-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 540px;
    /* Deep warm espresso → mauve, inspired by a candle-lit room */
    background: linear-gradient(160deg,
        #1A0C08 0%,
        #2D1418 30%,
        #4A1E2C 60%,
        #6B3348 100%
    );
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Warm amber light pool — mimics candle glow on a surface */
.gs-about-art::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 160px;
    background: radial-gradient(ellipse, rgba(196,134,42,0.25) 0%, transparent 70%);
    filter: blur(30px);
    animation: candle-glow 4s ease-in-out infinite;
}
/* Top wax melt halo */
.gs-about-art::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(155,91,122,0.20), transparent 65%);
    filter: blur(50px);
    border-radius: 50%;
    animation: wax-breathe 9s ease-in-out infinite reverse;
}
@keyframes candle-glow {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
    50%       { transform: translateX(-50%) scaleX(1.3); opacity: 1; }
}
.gs-about-art-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.gs-about-art-orb1 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(155,91,122,0.40), transparent 70%);
    top: -40px; left: -40px;
    animation: candle-flicker-orb 6s ease-in-out infinite;
}
.gs-about-art-orb2 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(196,134,42,0.25), transparent 70%);
    bottom: 0; right: -20px;
    animation: candle-flicker-orb 8s ease-in-out infinite reverse;
}
.gs-about-art-orb3 { display: none; }

@keyframes candle-flicker-orb {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    30%       { opacity: 0.9; transform: scale(1.08); }
    60%       { opacity: 0.5; transform: scale(0.95); }
}
.gs-about-art-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 24px;
}
/* Candle flame icon */
.gs-about-art-icon {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(196,134,42,0.8)) drop-shadow(0 0 8px rgba(155,91,122,0.6));
    animation: candle-flame 2.8s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes candle-flame {
    0%, 100% { transform: scaleX(1) rotate(0deg); filter: drop-shadow(0 0 20px rgba(196,134,42,0.8)); }
    20%       { transform: scaleX(0.9) rotate(-1.5deg); filter: drop-shadow(0 0 28px rgba(196,134,42,1)); }
    40%       { transform: scaleX(1.05) rotate(1deg); filter: drop-shadow(0 0 16px rgba(196,134,42,0.6)); }
    70%       { transform: scaleX(0.92) rotate(-0.5deg); filter: drop-shadow(0 0 24px rgba(196,134,42,0.9)); }
}
.gs-about-art-wordmark {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 400;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.22em;
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(196,134,42,0.4);
}
.gs-about-art-wordmark small {
    display: block;
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.45em;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
    text-transform: uppercase;
}
.gs-about-art-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gs-about-art-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(155,91,122,0.2);
}
.gs-about-art-ring.r1 { width: 220px; height: 220px; }
.gs-about-art-ring.r2 { width: 340px; height: 340px; border-color: rgba(155,91,122,0.12); }
.gs-about-art-ring.r3 { width: 460px; height: 460px; border-color: rgba(155,91,122,0.07); }


.gs-credentials {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--clr-linen);
    border-bottom: 1px solid var(--clr-linen);
    margin: 24px 0 28px;
}
.gs-cred { text-align: center; }
.gs-cred strong {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--clr-dark);
    margin-bottom: 2px;
    /* Playfair defaults to old-style figures, so "100" rendered smaller than
       the letters beside it. Force lining (full-height) numerals so
       "100% Soy Wax" reads as one consistent size. */
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}
.gs-cred span {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-muted);
}
.gs-cred-sep { width: 1px; height: 36px; background: var(--clr-linen); }

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.gs-testimonials-section {
    background: var(--clr-ivory-warm);
    position: relative;
    overflow: hidden;
}
.gs-testimonials-section::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(155,91,122,0.08) 0%, transparent 70%);
    bottom: -100px; left: -50px;
    border-radius: 50%;
    pointer-events: none;
}
.gs-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.gs-testimonial {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(155,91,122,0.08);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.gs-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.gs-testimonial::before {
    content: '"';
    font-family: var(--ff-serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--clr-ember-pale);
    position: absolute;
    top: 16px;
    left: 24px;
    font-style: italic;
    pointer-events: none;
}

.gs-testimonial-stars {
    color: #C4A832;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.gs-testimonial blockquote {
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    color: var(--clr-dark);
    flex: 1; /* grow to push author to bottom */
    line-height: 1.65;
    margin: 0 0 24px;
    position: relative;
    z-index: 1;
}
.gs-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    /* Pin the attribution to the bottom of the card. The quotes are different
       lengths, so without this the name and city sit at a different height in
       each card and the row reads as misaligned even when the cards themselves
       are the same height. The card is already a flex column. */
    margin-top: auto;
    padding-top: 20px;
}
.gs-testimonial-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.gs-testimonial-author strong {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-dark);
}
.gs-testimonial-author span {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--clr-muted);
}

/* ── CUSTOM ORDERS CTA ────────────────────────────────────────── */
.gs-custom-cta-section {
    position: relative;
    /* Was near-black (--clr-char), which sat like a slab against the warm
       creams either side of it. This is the same ember gradient the Our Story
       CTA already uses, so the two "big statement" bands now match and the
       page keeps one palette. White text still carries on it. */
    background: linear-gradient(135deg, var(--clr-ember) 0%, #7A4560 100%);
    padding: 96px 0;
    text-align: center;
    overflow: hidden;
    color: #fff;
}
.gs-custom-cta-bg { position: absolute; inset: 0; pointer-events: none; }
.gs-custom-cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.gs-custom-cta-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    top: -200px; left: -100px;
    animation: orb-drift 14s ease-in-out infinite;
}
.gs-custom-cta-orb-2 {
    width: 400px; height: 400px;
    /* Was mauve, which disappeared once the ground became mauve. */
    background: radial-gradient(circle, rgba(255,225,235,0.18), transparent 70%);
    bottom: -150px; right: -50px;
    animation: orb-drift 10s ease-in-out infinite reverse;
}
.gs-custom-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.gs-custom-cta-inner h2 {
    color: #fff;
    font-size: clamp(36px, 5vw, 60px);
    margin-bottom: 20px;
    line-height: 1.1;
}
.gs-custom-cta-inner p {
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 36px;
}
.gs-custom-cta-uses {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}
/* gs-event-chip: informational tags — NOT interactive buttons */
.gs-event-chip { cursor: default !important; }

.gs-custom-cta-uses span {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
    cursor: default;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 999px;
    transition: background var(--t-fast), border-color var(--t-fast);
}
/* No hover effect — chips are informational only */
.gs-custom-cta-uses span:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }

.gs-custom-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.gs-whatsapp-btn {
    background: #25D366;
    border-color: #25D366;
    color: #fff !important;
}
.gs-whatsapp-btn:hover {
    background: #1DAF56;
    border-color: #1DAF56;
    color: #fff !important;
}

/* ── INSTAGRAM ITEM ENHANCEMENT ──────────────────────────────── */
.gs-insta-item { position: relative; overflow: hidden; }
.gs-insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(155,91,122,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.gs-insta-item:hover .gs-insta-overlay { opacity: 1; }
.gs-insta-item img { transition: transform 0.5s; }
.gs-insta-item:hover img { transform: scale(1.08); }

/* ── EMPTY PRODUCTS PLACEHOLDER ──────────────────────────────── */
.gs-empty-products {
    text-align: center;
    padding: 80px 20px;
    color: var(--clr-muted);
}
.gs-empty-icon { font-size: 48px; display: block; margin-bottom: 16px; animation: float-y 3s ease-in-out infinite; }

/* ── RESPONSIVE OVERRIDES ─────────────────────────────────────── */
@media (max-width: 1200px) {
    .gs-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .gs-ingredients-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gs-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
    .gs-testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gs-process-steps { flex-wrap: wrap; justify-content: center; gap: 24px; }
    .gs-step-connector { display: none; }
    .gs-step { max-width: 200px; }
}
@media (max-width: 768px) {
    .gs-categories-grid { grid-template-columns: 1fr; gap: 14px; }
    .gs-ingredients-grid { grid-template-columns: 1fr; gap: 16px; }
    .gs-stats-band { padding: 48px 0; }
    .gs-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .gs-stat-number { font-size: clamp(40px, 12vw, 64px); }
    .gs-testimonials-grid { grid-template-columns: 1fr; }
    /* Compact left-aligned timeline: small icon node + vertical line on the
       left, number/title/text on the right — far tighter than the old
       full-width centred blocks. */
    .gs-process-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: 440px;
        margin-top: 26px;
    }
    .gs-step {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 18px;
        text-align: left;
        max-width: 100%;
        padding: 0 0 26px;
        position: relative;
    }
    .gs-step:last-child { padding-bottom: 0; }
    /* vertical connector threading the icon nodes */
    .gs-step:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 25px;                 /* centre of the icon column */
        top: 54px;
        bottom: -2px;
        width: 2px;
        background: repeating-linear-gradient(180deg,
            var(--clr-mauve-light) 0 6px, transparent 6px 13px);
        opacity: 0.55;
    }
    .gs-step-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 50px; height: 50px;
        margin: 0;
    }
    .gs-step-icon svg { width: 22px; height: 22px; }
    .gs-step-number {
        position: static;
        transform: none;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        font-size: 22px;
        margin-bottom: 2px;
    }
    .gs-step h4 { grid-column: 2; grid-row: 2; font-size: 18px; margin-bottom: 4px; }
    .gs-step p  { grid-column: 2; grid-row: 3; font-size: 13px; line-height: 1.6; }
    .gs-about-badge { bottom: 16px; right: 16px; }
    .gs-credentials { gap: 16px; }
    .gs-custom-cta-section { padding: 64px 0; }
    .gs-custom-cta-inner h2 { font-size: clamp(30px, 8vw, 44px); }
    .hero-categories { gap: 6px; }
    .hero-cat-pill { font-size: 11px; padding: 5px 12px; }
    .hero-tags { display: none; }
}
@media (max-width: 480px) {
    .gs-categories-grid { gap: 12px; }
    .gs-cat-card { padding: 28px 20px; }
    .gs-cat-card h3 { font-size: 17px; }
    .gs-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .gs-custom-cta-actions { flex-direction: column; align-items: center; }
    .gs-custom-cta-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
    /* One claim per line — three centred rows. Side-by-side left the claims
       wrapping unevenly on a phone. */
    .gs-credentials {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .gs-cred-sep { display: none; }
    .gs-cred { text-align: center; width: 100%; }
    .gs-cred strong { font-size: 22px; margin-bottom: 4px; }
}

/* ================================================================
   SWIPER — brand overrides
================================================================ */
.swiper-pagination-bullet {
    background: var(--clr-mauve);
    opacity: 0.3;
    width: 8px;
    height: 8px;
    transition: opacity 0.3s, transform 0.3s;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.25);
    background: var(--clr-mauve);
}
.swiper-wrapper { align-items: stretch; }
.swiper-slide { height: auto; }

/* Bestsellers — static 4-column grid (no swiper) */
.bestsellers-static-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 8px;
}
/* Tablet + phone: 2 across. Image switched to square (1/1) here —
   the base 4/5 portrait made cards too tall (esp. full-width). These
   .bestsellers-static-grid-scoped rules also out-rank the later
   .product-card-image { aspect-ratio: 4/5 } at line ~4433. */
@media (max-width: 1024px) and (min-width: 601px) {
    .bestsellers-static-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .bestsellers-static-grid .product-card-image { aspect-ratio: 1 / 1; }
}
@media (max-width: 600px) {
    .bestsellers-static-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bestsellers-static-grid .product-card-image { aspect-ratio: 1 / 1; }
}
/* Hide bestseller swiper if it still exists */
.bestsellers-swiper { display: none !important; }

/* Testimonials swiper */
.testimonials-swiper { padding-bottom: 48px !important; }
.testimonials-swiper .swiper-wrapper { align-items: stretch !important; }
.testimonials-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-self: stretch;
}
.testimonials-swiper .gs-testimonial {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ================================================================
   NEWSLETTER SECTION
================================================================ */
.gs-newsletter-section {
    background: var(--clr-char);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.gs-newsletter-section::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(155,91,122,0.15) 0%, transparent 65%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}
/* Newsletter sparkle positions */
.nl-sparkle {
    position: absolute;
    pointer-events: none;
}
.nl-sparkle-1 { top: 15%; left: 8%;  width: 28px; height: 28px; }
.nl-sparkle-2 { top: 20%; right: 10%; width: 20px; height: 20px; }
.nl-sparkle-3 { bottom: 25%; left: 15%; width: 22px; height: 22px; }
.nl-sparkle-4 { bottom: 15%; right: 8%; width: 32px; height: 32px; }
.gs-newsletter-inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.gs-newsletter-inner .eyebrow {
    color: var(--clr-mauve-light, #C4829A);
    display: block;
    margin-bottom: 16px;
}
.gs-newsletter-inner h2 {
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.2;
}
.gs-newsletter-inner > p {
    color: rgba(255,255,255,0.55);
    font-size: 15px;
    margin-bottom: 36px;
    line-height: 1.6;
}
.gs-nl-form {
    display: flex;
    gap: 0;
    max-width: 440px;
    margin: 0 auto 16px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(155,91,122,0.35);
    background: rgba(255,255,255,0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.gs-nl-form:focus-within {
    border-color: rgba(155,91,122,0.7);
    box-shadow: 0 0 0 4px rgba(155,91,122,0.12);
}
.gs-nl-form input {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    padding: 14px 20px;
    outline: none;
    min-width: 0;
}
.gs-nl-form input::placeholder { color: rgba(255,255,255,0.35); }
.gs-nl-form input:focus { border: none; box-shadow: none; }
.gs-nl-form button {
    background: var(--clr-mauve);
    color: #fff;
    border: none;
    padding: 14px 26px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0 999px 999px 0;
    transition: background 0.25s;
    flex-shrink: 0;
}
.gs-nl-form button:hover { background: #7A4560; }
.gs-nl-note {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.04em;
}
#gs-nl-msg {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    min-height: 18px;
}
#gs-nl-msg.success { color: #6fcf8a; }
#gs-nl-msg.error   { color: #f28b82; }

@media (max-width: 640px) {
    .gs-newsletter-section { padding: 72px 0; }
    .gs-nl-form { flex-direction: column; border-radius: 16px; }
    .gs-nl-form input { border-radius: 0; padding: 14px 18px; }
    .gs-nl-form button { border-radius: 0 0 16px 16px; }
}

/* ================================================================
   HERO — remove category pills on all screens (redundant)
================================================================ */
.hero-categories { display: none; }

/* ================================================================
   BRAND ANIMATIONS — Artisanal Candle / Soap / Fragrance Identity
   "The brand is artisanal, not flashy. Less is more."
================================================================ */

/* ── 1. CANDLE LIGHT PULSE — gentle amber glow on process section ── */
.gs-process-section {
    position: relative;
}
.gs-process-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 60% at 50% 40%,
        rgba(196,134,42,0.05) 0%,
        transparent 65%
    );
    pointer-events: none;
    animation: candle-light-pulse 6s ease-in-out infinite;
    z-index: 0;
}
@keyframes candle-light-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}
.gs-process-section .container { position: relative; z-index: 1; }

/* ── 2. WAX DRIP DIVIDER — subtle amber line drop between hero & marquee ── */
.marquee-band {
    position: relative;
}
.marquee-band::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(196,134,42,0.55), transparent);
    border-radius: 2px;
    animation: wax-drip-fall 2.5s ease-out 0.8s forwards;
}
@keyframes wax-drip-fall {
    from { height: 0; opacity: 0.8; }
    to   { height: 18px; opacity: 0; }
}

/* ── 3. POUR REVEAL — ingredients section cards reveal top→bottom ── */
.gs-ingredient {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0s; /* GSAP takes over when .visible is added */
}
.gs-ingredient.revealed {
    clip-path: inset(0 0 0% 0);
    transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fallback if no JS */
.no-js .gs-ingredient { clip-path: none; }

/* ── 4. SCENT WAVE — subtle horizontal wave on section eyebrows ── */
.eyebrow {
    position: relative;
    display: inline-block;
}
.eyebrow::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--clr-ember) 30%,
        var(--clr-beeswax) 60%,
        transparent 100%
    );
    opacity: 0.35;
}

/* ── 5. SECTION SCROLL ANCHORING — smooth scroll with header offset ── */
#collections,
.gs-ingredients-section,
.gs-process-section,
#featured-collections,
.gs-testimonials-section,
.gs-custom-cta-section,
.gs-newsletter-section {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ── 6. CANDLE CARD HOVER — ingredient cards get warm glow on hover ── */
.gs-ingredient:hover {
    background: linear-gradient(
        160deg,
        var(--clr-cream) 0%,
        rgba(245,240,232,0.8) 100%
    );
}

/* ── 7. CATEGORY CARD — beeswax icon tint on candles card ── */
.gs-cat-card[data-cat="candles"] .gs-cat-icon svg {
    filter: drop-shadow(0 0 6px rgba(196,134,42,0.3));
}
.gs-cat-card[data-cat="soaps"] .gs-cat-icon svg {
    filter: drop-shadow(0 0 6px rgba(90,122,90,0.3));
}
.gs-cat-card[data-cat="car"] .gs-cat-icon svg {
    filter: drop-shadow(0 0 6px rgba(85,101,168,0.3));
}

/* ── 8. SAGE GREEN accent on ingredient tags ── */
.gs-ingredient[style*="--accent:#6B8C6E"] .gs-ingredient-icon {
    background: var(--clr-sage-craft);
}
.gs-ingredient[style*="--accent:#4A7D50"] .gs-ingredient-icon {
    background: var(--clr-sage-craft);
}
.gs-ingredient[style*="--accent:#8B4513"] .gs-ingredient-icon,
.gs-ingredient[style*="--accent:#C4862A"] .gs-ingredient-icon {
    background: var(--clr-beeswax);
}


/* ================================================================
   ACCESSIBILITY & UX FIXES (2026-07-11)
================================================================ */

/* Skip link — hidden until keyboard-focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--clr-ember, #9B5B7A);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}
#main-content { scroll-margin-top: calc(var(--header-h, 88px) + 10px); }

/* Visible focus ring for keyboard users (mouse clicks stay clean) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.gallery-thumb:focus-visible,
.mobile-expand:focus-visible {
    outline: 3px solid var(--clr-ember, #9B5B7A);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Newsletter fine-print — was ~1.6:1 (invisible). Lift contrast. */
.gs-nl-note,
.newsletter-note {
    color: var(--clr-ink);   /* dark on the light landing-newsletter bg */
}

/* "Coming Soon" filler cards (bestsellers fallback) — honest, non-purchasable */
.gs-comingsoon-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.gs-comingsoon-card .gs-product-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.gs-comingsoon-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.9);
    color: var(--clr-ember, #9B5B7A);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(45,26,14,0.12);
}
.gs-comingsoon-card:hover .gs-comingsoon-badge { background: #fff; }

/* Sold-out card CTA — muted but clearly a "View" link */
.product-card-atc--muted {
    opacity: 0.65;
    background: transparent !important;
    border: 1px solid var(--clr-ember, #9B5B7A) !important;
    color: var(--clr-ember, #9B5B7A) !important;
}

/* Respect reduced-motion: kill decorative animation/parallax/marquee */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-track { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   LIVING GARDEN — button-hover butterfly
   Hovering any button summons a butterfly: it flies in from a random
   off-screen angle along a wavy path, trailing soft motes, and perches
   just above the button's top edge. Mouse-off (or the button scrolling
   out of view) sends it back out via the nearest screen edge.
   JS drives flight + perch anchoring; CSS drives wings and colour.
================================================================ */

/* Interpolatable wing colours. A tight, muted periwinkle→lilac→soft-blue
   range with enough value depth to read on the pale blush sections, on
   the mauve buttons and on the dark footer alike. (Pale pastels had no
   such depth and vanished; neon cyan was alien to the brand.) */
@property --gwa { syntax: '<color>'; inherits: true; initial-value: #8E9BD6; }
@property --gwb { syntax: '<color>'; inherits: true; initial-value: #BFB4E4; }

/* Styled for all devices (JS only creates the elements on desktop-hover or
   mobile-tap), so no hover/pointer gate here. */
@media all {

    /* ── Butterfly ── */
    .gaea-butterfly {
        position: fixed; top: 0; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
        z-index: 2147483001; pointer-events: none;
        transform: translate3d(-400px, -400px, 0);
        will-change: transform;
        opacity: 1; transition: opacity 0.45s ease;
        animation: gaea-wing-color 11s ease-in-out infinite;   /* gentle colour drift */
    }
    .gaea-butterfly.is-away { opacity: 0; }   /* parked (mobile, between taps) */
    /* NO filter here: a drop-shadow on an element that moves every frame forces
       a full repaint per frame and was the main cause of the choppiness. */
    .gaea-butterfly svg {
        display: block; width: 100%; height: 100%; overflow: visible;
    }
    .gw-s1 { stop-color: var(--gwa); }
    .gw-s2 { stop-color: var(--gwb); }
    @keyframes gaea-wing-color {
        0%   { --gwa: #8E9BD6; --gwb: #BFB4E4; }  /* periwinkle · lilac    */
        33%  { --gwa: #9DAFDE; --gwb: #C9BDE9; }  /* soft blue · pale iris */
        66%  { --gwa: #A99BDA; --gwb: #B9C6E8; }  /* violet · powder blue  */
        100% { --gwa: #8E9BD6; --gwb: #BFB4E4; }
    }

    /* Wings flap (dots live inside the groups → they flap with the wing).
       A real butterfly beats FAST — slowing this to 0.34s read as sluggish
       slow-motion, which is exactly what "laggy" looks like. Brisk beat with
       a moderate fold keeps it alive without strobing. */
    .gaea-wing { transform-box: fill-box; will-change: transform; }
    .gaea-wing-l { transform-origin: 100% 45%; animation: gaea-wing-l 0.17s ease-in-out infinite; }
    .gaea-wing-r { transform-origin: 0% 45%;   animation: gaea-wing-r 0.17s ease-in-out infinite; }
    .gaea-butterfly.is-resting .gaea-wing-l,
    .gaea-butterfly.is-resting .gaea-wing-r { animation-duration: 2.6s; }
    @keyframes gaea-wing-l {
        0%, 100% { transform: scaleX(1)    rotate(0deg); }
        50%      { transform: scaleX(0.34) rotate(8deg); }
    }
    @keyframes gaea-wing-r {
        0%, 100% { transform: scaleX(1)    rotate(0deg); }
        50%      { transform: scaleX(0.34) rotate(-8deg); }
    }

    /* ── Flight trail: soft motes that swell and dissolve. Tinted toward the
       butterfly's own lilac so it reads as part of the creature, not stray
       white specks sitting on top of the page. ── */
    .gaea-trail-dash {
        position: fixed; width: 8px; height: 8px; margin: -4px 0 0 -4px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(191,180,228,0.72) 0%, rgba(160,150,205,0.32) 55%, rgba(160,150,205,0) 74%);
        z-index: 2147483000; pointer-events: none;
        opacity: 0.62;
        transform: scale(0.65);
        transition: opacity 0.5s ease, transform 0.5s ease;
        will-change: opacity, transform;
    }
    .gaea-trail-dash.is-fading { opacity: 0; transform: scale(1.7); }

}
@media (prefers-reduced-motion: reduce) {
    .gaea-butterfly, .gaea-trail-dash { display: none !important; }
}

/* ================================================================
   26. MOBILE POLISH — 2026-07 audit fixes.
   Tap targets ≥44px, 13px type floor, 16px input font (stops iOS
   focus-zoom), comfortable edge padding. Kept at the END of the
   file on purpose: these override earlier equal-specificity rules
   (e.g. the late .hero-title block) via source order.
================================================================ */

/* Drawer is only translated off-screen — hide it from the tab order too. */
.mobile-nav {
    visibility: hidden;
    transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.38s ease,
                visibility 0s linear 0.38s;
}
.mobile-nav.open {
    visibility: visible;
    transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.38s ease,
                visibility 0s;
}

/* Hamburger + drawer close: proper hit areas at every width they show. */
.menu-toggle { width: 44px; min-height: 44px; padding: 10px 6px; justify-content: center; }
.mobile-nav-close { width: 44px; height: 44px; }

@media (max-width: 768px) {

    /* ── Forms: no iOS zoom, fingers fit ── */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="password"],
    select, textarea,
    .woocommerce .input-text {
        font-size: 16px !important;
        min-height: 48px;
    }
    textarea { min-height: 120px; }
    .select2-container .select2-selection--single { height: 48px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; font-size: 16px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
    .woocommerce form .form-row label { font-size: 13px; }

    /* Qty steppers — single product */
    .qty-btn { min-width: 44px; min-height: 44px; }
    .qty-input { min-height: 44px; font-size: 16px; }
    /* Qty steppers + remove — block cart */
    .wc-block-components-quantity-selector__button { min-width: 40px !important; }
    .wc-block-components-quantity-selector input { font-size: 16px !important; }
    .wc-block-cart-item__remove-link {
        width: 44px !important; height: 44px !important; margin: -10px !important;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* ── Primary actions ── */
    .btn { font-size: 14px; min-height: 48px; }
    .product-card-atc { font-size: 13px; min-height: 44px; }
    .product-atc-section form.cart { flex: 1 1 auto; }
    .btn-atc { min-height: 48px; width: 100%; }
    .product-tab-btn { font-size: 14px; }
    .category-filter-btn { font-size: 13px; min-height: 40px; padding: 10px 18px; }
    .newsletter-field button { font-size: 14px; min-height: 48px; }
    #place_order { font-size: 15px !important; min-height: 52px; }
    .woocommerce-form-coupon-toggle .showcoupon { display: inline-block; padding: 10px 0; }
    .woocommerce-breadcrumb a { display: inline-block; padding: 8px 2px; }

    /* ── Type floor: nothing customer-facing below ~12px ──
       .gs-cat-badge is deliberately exempt. At 11px the longer eyebrows
       ("Melt & Pour · Botanical · Glycerin-Rich") need ~313px against ~304px
       of card, so they wrapped — and a wrapped eyebrow is harder to read than
       a slightly smaller one that fits. It is sized fluidly further down
       instead, shrinking only as far as it must. */
    .gs-ingredient-tag { font-size: 12px; }
    .eyebrow { font-size: 12px; }
    .marquee-item { font-size: 13px; }
    .gs-cat-cta { font-size: 13px; }
    .cart-count { font-size: 11px; }
    .track-field-hint { font-size: 12px; }
    .footer-tagline { font-size: 14px; }
    .newsletter-note { font-size: 13px; }

    /* ── Footer link farm → real tap targets ── */
    .footer-col ul li { margin-bottom: 2px; }
    .footer-col ul li a { display: inline-block; padding: 9px 0; font-size: 14px; }

    /* ── Hero: balanced headline, more above the fold ── */
    .hero-title { font-size: clamp(34px, 10.5vw, 56px); }
}

/* ── Comfortable edges on small phones (raises the old 12/14px) ── */
@media (max-width: 480px) {
    .container { padding: 0 18px; }
}
@media (max-width: 375px) {
    .container { padding: 0 16px; }
}

/* ================================================================
   27. GRID REWORK + BRAND TWEAKS — 2026-07-16 client round.
   Appended last on purpose: wins the cascade over the scattered
   earlier breakpoint rules for the same grids.
================================================================ */

/* The Collections dropdown was removed from the markup; make sure an
   admin-assigned menu can never render one either. */
.nav-list .sub-menu { display: none !important; }

/* Bigger logos (client request), stepped down so the fixed header
   (96px desktop / 80px mobile) never clips. */
.site-logo-img { height: 100px; width: 100px; }
.footer-logo img { height: 124px; width: 124px; }
@media (max-width: 768px) {
    .site-logo-img { height: 76px; width: 76px; }
    .footer-logo img { height: 96px; width: 96px; }
}

/* ── gs-categories-grid: 2×2 desktop (kept), 2-col tablet, 1-col small ── */
@media (max-width: 768px) {
    .gs-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .gs-cat-card { padding: 26px 20px; }
}
@media (max-width: 540px) {
    .gs-categories-grid { grid-template-columns: 1fr; }
}

/* ── gs-ingredients-grid: 3 → 2 → 1 (was jumping straight to 1 at 768,
      wasting the whole 600–768 band) ── */
@media (max-width: 768px) {
    .gs-ingredients-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
    .gs-ingredients-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── collections-grid responsive: big banner on top, two cards below ──
   Overrides the base 2-row / row-span layout so cards get real breathing
   room at tablet + phone (the big card no longer cramps the botanical one). */
@media (max-width: 1024px) and (min-width: 601px) {
    .collections-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 18px;
        height: auto;
    }
    .collection-card { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; }
    .collection-card--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/7; }
    .collection-card-overlay { padding: 24px; }
    .collection-card--big .collection-card-overlay { padding: 28px; }
}
@media (max-width: 600px) {
    .collections-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
        height: auto;
    }
    .collection-card,
    .collection-card--big { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; min-height: 210px; }
    .collection-card-overlay,
    .collection-card--big .collection-card-overlay { padding: 22px; }
    .collection-card-title,
    .collection-card--big .collection-card-title { font-size: 24px; }
}

/* Keep 2 across even on the smallest phones (was 1 col ≤430px). */
@media (max-width: 430px) {
    .bestsellers-static-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Narrow cards (tablet/phone): the inline price + ADD-TO-CART row overflowed
   the card because the button can't wrap. Stack them — price on top, a
   full-width centred button below. */
@media (max-width: 1024px) {
    .product-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .product-card-atc {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 11px 12px;
    }
}

/* ── about teaser: collapse at 900 (panel + text were cramped 769–900) ── */
@media (max-width: 900px) {
    .about-teaser, .gs-about-teaser { grid-template-columns: 1fr; }
    .gs-about-brand-panel { min-height: 320px; }
}

/* ── testimonial cards + custom-orders CTA on small phones ── */
@media (max-width: 480px) {
    .gs-testimonial { padding: 28px 20px; }
    .gs-testimonial blockquote { font-size: 15px; }
    .gs-custom-cta-inner p { font-size: 15px; }
    .gs-custom-cta-uses { gap: 8px; }
}

/* ── footer brand column: centered whenever it spans the full row ── */
@media (max-width: 1024px) {
    .footer-brand { text-align: center; }
    .footer-brand .footer-logo { display: inline-block; }
    .footer-brand .footer-social { justify-content: center; }
}

.container { position: relative; z-index: 1; }

/* ── Drifting scent particles (touch devices) ── glowing motes rise slowly
   from the bottom of the screen with a gentle side-to-side sway, like
   fragrance wafting up from a candle. Pure CSS animation — cheap on battery,
   no JS work per frame. */
.gaea-mote {
    position: fixed;
    bottom: -20px;
    left: var(--x, 50%);
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,241,214,0.95) 0%, rgba(240,190,120,0.45) 55%, rgba(240,190,120,0) 75%);
    pointer-events: none;
    z-index: 2147483000;
    opacity: 0;
    will-change: transform, opacity;
    animation: gaea-mote-rise var(--dur, 14s) linear var(--delay, 0s) infinite;
}
@keyframes gaea-mote-rise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: 0.75; }
    25%  { transform: translate3d(var(--sway, 18px), -25vh, 0); }
    50%  { transform: translate3d(calc(var(--sway, 18px) * -1), -50vh, 0); }
    75%  { transform: translate3d(var(--sway, 18px), -75vh, 0); }
    92%  { opacity: 0.75; }
    100% { transform: translate3d(0, -105vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gaea-mote { display: none; }
}

/* ============================================================
   BRAND LOCKUP LOGO — wide-aspect "GS / GAEA SCENTS" mark.
   Higher-specificity rules that override the legacy square
   (WxW) sizings scattered across the breakpoints above, so the
   wide logo keeps its aspect ratio (width auto) at every size.
============================================================ */
/* The logo's height is set in four different places across this file (88px and
   100px base rules, 68px at ≤768, and the values here). Any of those winning
   at the wrong breakpoint would push the mark past the fixed header and clip
   it. This ties the ceiling to the header itself, so whichever rule wins the
   logo still fits — 72px of room at the 96px desktop header, 56px at the 80px
   mobile one, both well above the heights actually used. */
.site-header .site-logo .site-logo-img {
    width: auto;
    height: 50px;
    max-height: calc(var(--header-h) - 24px);
    object-fit: contain;
}
.mobile-nav .mobile-nav-logo img       { width: auto; height: 46px; object-fit: contain; }
.site-footer .footer-logo img           { width: auto; height: 74px; object-fit: contain; margin-bottom: 20px; }
.gs-about-brand-panel .gs-about-brand-logo { width: auto; height: 96px; object-fit: contain; margin-bottom: 6px; }
@media (max-width: 768px) {
    .site-header .site-logo .site-logo-img { height: 44px; }
    .site-footer .footer-logo img           { height: 64px; }
    .mobile-nav .mobile-nav-logo img        { height: 42px; }
}
@media (max-width: 480px) {
    .site-header .site-logo .site-logo-img { height: 40px; }
}

/* ============================================================
   SHOP LAYOUT — left category sidebar + product grid
============================================================ */
.shop-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 44px;
    align-items: start;
}
.shop-sidebar { position: sticky; top: calc(var(--header-h) + 24px); }
.shop-sidebar-title {
    font-family: var(--ff-serif);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--clr-muted);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clr-linen);
}
.shop-cat-nav { display: flex; flex-direction: column; gap: 2px; }
.shop-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--clr-ink);
    font-size: 14.5px;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.shop-cat-link:hover { background: var(--clr-mauve-pale); color: var(--clr-mauve); }
.shop-cat-link.active { background: var(--clr-mauve); color: #fff; }
.shop-cat-count { font-size: 12px; opacity: 0.55; }
.shop-cat-link.active .shop-cat-count { opacity: 0.85; }

/* Expandable category group (parent with sub-categories, e.g. Candles) */
.shop-cat-toggle { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.shop-cat-caret { flex-shrink: 0; opacity: 0.55; transition: transform var(--t-base); }
.shop-cat-group.open > .shop-cat-toggle .shop-cat-caret { transform: rotate(180deg); }
.shop-cat-children {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px 14px;
    padding-left: 10px;
    border-left: 1px solid var(--clr-linen);
}
.shop-cat-group.open > .shop-cat-children { display: flex; }
.shop-cat-children .shop-cat-link,
.shop-cat-sublink { font-size: 13.5px; padding: 7px 12px; }
.shop-cat-sublink {
    display: block;
    border-radius: var(--radius-sm);
    color: var(--clr-muted);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.shop-cat-sublink:hover { background: var(--clr-mauve-pale); color: var(--clr-mauve); }
.shop-cat-sublink.active { color: var(--clr-mauve); font-weight: 500; }

/* Product grid fills the narrower content column */
.woocommerce .shop-content ul.products { grid-template-columns: repeat(3, 1fr); }

/* The collapse caret on the sidebar title is desktop-hidden (JS shows it on mobile) */
.shop-sidebar-caret { display: none; }

/* Medium: narrower sidebar + tighter gap so products don't get cramped */
@media (max-width: 1100px) {
    .shop-layout { grid-template-columns: 180px 1fr; gap: 28px; }
    .woocommerce .shop-content ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile/tablet: every sidebar section — Categories, Sort by, Price, each
   attribute filter — becomes its own collapsible pill, CLOSED by default, so
   products appear immediately instead of below a wall of filters.

   This used to collapse the sidebar as a single unit, and only `.shop-cat-nav`
   was hidden, so Sort by and Price stayed fully expanded underneath a closed
   Categories header and ate the whole first screen.

   JS toggles `.is-collapsed` per group (see main.js); without JS every panel
   stays open, so nothing is ever unreachable. */
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; gap: 18px; }
    .shop-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }
    /* Each section is a compact chip; its options open in a floating panel
       beneath it. Full-width stacked accordions still cost four rows before a
       single product — a chip row costs one. */
    .shop-sidebar .shop-filter-group {
        margin: 0;
        position: relative;        /* anchor for the dropdown */
        overflow: visible;         /* ...which has to escape the chip */
        border: 1px solid var(--clr-linen);
        border-radius: var(--radius-pill);
        background: #fff;
    }
    .shop-sidebar .shop-filter-group:not(.is-collapsed) {
        border-color: var(--clr-mauve);
    }
    .shop-sidebar .shop-filter-group .shop-sidebar-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 9px 14px;
        border-bottom: none;
        font-size: 11.5px;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }
    .shop-sidebar .shop-filter-group:not(.is-collapsed) .shop-sidebar-title { color: var(--clr-mauve); }
    .shop-sidebar .shop-sidebar-caret {
        display: block;
        flex-shrink: 0;
        opacity: 0.6;
        transition: transform var(--t-base);
    }
    .shop-sidebar .shop-filter-group:not(.is-collapsed) .shop-sidebar-caret { transform: rotate(180deg); }

    /* The dropdown itself. Capped and scrollable so a long category list can't
       run off the bottom of the screen. */
    .shop-sidebar .shop-filter-group .shop-cat-nav,
    .shop-sidebar .shop-filter-group .shop-filter-list {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 40;
        min-width: 210px;
        max-width: calc(100vw - 40px);
        max-height: 58vh;
        overflow-y: auto;
        padding: 8px;
        background: #fff;
        border: 1px solid var(--clr-linen);
        border-radius: var(--radius-md);
        box-shadow: 0 12px 30px rgba(45,31,40,0.14);
    }
    /* JS flips this on when a chip near the right edge would push its panel
       off screen. */
    .shop-sidebar .shop-filter-group.opens-left .shop-cat-nav,
    .shop-sidebar .shop-filter-group.opens-left .shop-filter-list { left: auto; right: 0; }

    .shop-sidebar .shop-filter-group.is-collapsed .shop-cat-nav,
    .shop-sidebar .shop-filter-group.is-collapsed .shop-filter-list { display: none; }

    /* Availability is a single control — it toggles directly instead of
       opening a panel to hold one checkbox. */
    .shop-sidebar .shop-filter-group:not(:has(.shop-sidebar-title)) {
        border: none;
        background: none;
    }
    .shop-sidebar .shop-filter-group:not(:has(.shop-sidebar-title)) .shop-filter-list {
        position: static;
        min-width: 0;
        max-height: none;
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
        overflow: visible;
    }
    .shop-sidebar .shop-filter-group:not(:has(.shop-sidebar-title)) .shop-filter-link {
        padding: 8px 14px;
        font-size: 12.5px;
        white-space: nowrap;
        border: 1px solid var(--clr-linen);
        border-radius: var(--radius-pill);
        background: #fff;
    }
    .shop-sidebar .shop-filter-group:not(:has(.shop-sidebar-title)) .shop-filter-link.active {
        border-color: var(--clr-mauve);
    }
}
@media (max-width: 480px) {
    .woocommerce .shop-content ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
    .shop-cat-link { padding: 11px 14px; }   /* larger tap targets */
}

/* ============================================================
   CHOOSE-YOUR-SCENT — clickable scent pills on the product page
============================================================ */
.scent-picker { margin: 24px 0; }
.scent-picker .scent-notes-title {
    font-family: var(--ff-serif);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin: 0 0 12px;
}
.scent-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.scent-pill {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--clr-lavender, var(--clr-mauve-pale));
    background: #fff;
    color: var(--clr-ink);
    cursor: pointer;
    transition: border-color var(--t-base), background var(--t-base), color var(--t-base), transform var(--t-base);
}
.scent-pill:hover { border-color: var(--clr-mauve); color: var(--clr-mauve); }
.scent-pill.selected {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
}
.scent-picker-hint { font-size: 12px; color: var(--clr-muted); margin: 10px 0 0; }
/* ── Bestsellers CTA ──────────────────────────────────────────────────
   Centred under the grid, with enough room above it that it reads as the end
   of the section rather than a fifth card. */
.bestsellers-cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

@media (max-width: 600px) {
    .bestsellers-cta { margin-top: 28px; }
    .bestsellers-cta .btn { width: 100%; }
}

/* ── Offer bar ────────────────────────────────────────────────────────
   Espresso. Four colours were tried live on the page: gold, plum, terracotta
   and this. Gold and terracotta both added warmth to a composition already
   carrying pink, mauve and blush; plum stayed in the family but echoed the
   trust band below it. A dark neutral sits outside that argument, frames the
   pink hero, and is the site's own body-text tone — so it introduces no new
   colour at all.

   It is also the most legible by a distance: cream on it is 15.5:1 at the
   dark end and 9.6:1 at the light end, against terracotta's 4.87:1 floor.

   --clr-clay and --clr-ember-deep stay in the palette as the alternates; the
   bar is one line away from either. */
.gaea-offer-bar {
    /* Fixed, because it sits above a fixed header and would otherwise be
       covered by it. z-index clears the header's 1000. The admin-bar variable
       is WordPress's and resolves to 0 for logged-out visitors, so one rule
       keeps it clear for signed-in staff too. */
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 1001;
    background: linear-gradient(90deg, var(--clr-ink), var(--clr-espresso), var(--clr-umber), var(--clr-espresso), var(--clr-ink));
    background-size: 200% 100%;
    animation: marquee-gradient 5s linear infinite;
    padding: 11px 0;
    overflow: hidden;
}

.gaea-offer-track {
    display: flex;
    width: max-content;
    /* 16s, against the trust band's 28s: an offer should feel urgent. */
    animation: marquee-scroll 16s linear infinite;
}

/* Each half is at least a full screen wide, and the track slides exactly one
   half. That is what closes the gap: a short message repeated a few times did
   not add up to two screens, so the strip ran out before it looped. */
.gaea-offer-half {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
}

.gaea-offer-item,
.gaea-offer-sep {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 0 22px;
    color: var(--clr-cream);
}
/* No underline: it is a strip of moving text, and an underline on something
   sliding past reads as noise rather than as a link. */
.gaea-offer-item a {
    color: inherit;
    text-decoration: none;
}
.gaea-offer-sep { opacity: 0.5; }

@media (max-width: 600px) {
    .gaea-offer-item, .gaea-offer-sep { font-size: 13px; padding: 0 14px; }
    /* Must track the rule above: a wrong value here leaves a gap under the
       header or hides the top of the page behind it. */
    body.has-offer-bar { --offer-bar-h: 42px; }
}

/* Someone who has asked for less motion should not be handed a moving strip;
   the text still reads, it just stops travelling. */
@media (prefers-reduced-motion: reduce) {
    .gaea-offer-track,
    .gaea-offer-bar { animation: none; }
}

.gaea-offer-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(45,26,14,0.55);
}
/* [hidden] loses to display:flex on specificity alone, which is how a hidden
   dialog ends up on screen. */
.gaea-offer-popup[hidden] { display: none; }

.gaea-offer-popup-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 40px 32px 32px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(45,26,14,0.28);
}
.gaea-offer-popup-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 5vw, 30px);
    color: var(--clr-dark);
    margin: 0 0 10px;
}
.gaea-offer-popup-inner p {
    font-size: 14px;
    color: var(--clr-muted);
    margin: 0 0 20px;
}
.gaea-offer-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--clr-muted);
    cursor: pointer;
}
.gaea-offer-close:hover { color: var(--clr-dark); }

/* A dashed "ticket" so it reads as a code to take, not a button to submit. */
.gaea-offer-code {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1.5px dashed var(--clr-ember);
    border-radius: var(--radius-md);
    background: var(--clr-mauve-pale);
    cursor: pointer;
}
.gaea-offer-code-value {
    display: block;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--clr-ember);
}
.gaea-offer-code-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-muted);
}
.gaea-offer-popup .btn { width: 100%; }

/* Stop the page behind it scrolling while the dialog is up. */
body.gaea-offer-open { overflow: hidden; }

/* ── Footer trademark notice ──────────────────────────────────────────
   Quieter and smaller than the copyright line it sits under: it has to be
   findable, not read before someone shops. Kept above the 12px floor the rest
   of the customer-facing type observes, and given a max-width so it does not
   run the full footer width as one long line on a desktop. */
/* Selector deliberately over-qualified. `.footer-copyright p` sets margin:0
   and is (0,1,1); a bare `.footer-trademark` is (0,1,0) and loses to it
   whatever the source order, so the auto margins below never applied and the
   block sat against the left edge of a centred parent. This is (0,2,1). */
.footer-copyright p.footer-trademark {
    /* Auto side margins, or the max-width box sits at the left edge while its
       text centres inside it, which reads as a block shoved off to one side
       of the centred copyright above. */
    margin: 10px auto 0;
    /* Even out the rag. Centred text over four lines left "legal action." on
       a line of its own, 79px wide under three ~530px lines. */
    text-wrap: balance;
    max-width: 68ch;
    font-size: 12px;
    line-height: 1.6;
    /* Not --clr-muted: that is #8A6858, a brown for light backgrounds, and on
       this dark footer it lands around 3.4:1 against the ground — under the
       4.5:1 that 12px text needs. White at 55% sits a step below the
       copyright's 70%, so it still reads as secondary. */
    color: rgba(255,255,255,0.55);
}

/* ── Personalised message field ───────────────────────────────────────
   Sits with the scent picker and borrows its label and hint, because it is
   the same kind of question: something to answer before adding to cart. */
.gaea-personalise { margin: 24px 0; }
.gaea-personalise .scent-notes-title {
    display: block;
    font-family: var(--ff-serif);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin: 0 0 12px;
}
.gaea-personalise input[type="text"] {
    width: 100%;
    font-family: var(--font-body);
    /* 16px is the floor at which iOS Safari stops zooming the page on focus. */
    font-size: 16px;
    padding: 12px 16px;
    border: 1.5px solid var(--clr-lavender, var(--clr-mauve-pale));
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--clr-ink);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.gaea-personalise input[type="text"]::placeholder { color: var(--clr-muted); opacity: 0.7; }
.gaea-personalise input[type="text"]:focus {
    outline: none;
    border-color: var(--clr-mauve);
    box-shadow: 0 0 0 3px rgba(155,91,122,0.12);
}
/* Only after the browser has something to complain about — :invalid alone
   would paint the field red before the customer has typed anything. */
.gaea-personalise input[type="text"]:user-invalid { border-color: #c0392b; }

.scent-picker.scent-error .scent-pills { animation: scent-shake 0.3s; }
.scent-picker.scent-error .scent-picker-hint { color: #c0392b; }
/* ============================================================
   OUR STORY — founder sign-off
============================================================ */
.founder-signoff {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--clr-linen);
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}
.founder-signoff-name {
    font-family: var(--ff-serif, var(--font-display));
    font-size: 22px;
    color: var(--clr-dark);
    margin: 0;
}
.founder-signoff-role {
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin: 0;
}
.founder-signoff-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 16px;
    border: 1.5px solid var(--clr-lavender, var(--clr-mauve-pale));
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--clr-ember);
    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.founder-signoff-social:hover {
    background: var(--clr-ember);
    border-color: var(--clr-ember);
    color: #fff;
}
.founder-signoff-social svg { flex-shrink: 0; }

@media (max-width: 600px) {
    .founder-signoff { align-items: center; text-align: center; }
    .founder-signoff-social { min-height: 44px; }
}

@keyframes scent-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ============================================================
   EMPTY CART — WooCommerce's own block
   ------------------------------------------------------------
   "New in store" ships with margin-bottom:0, so the heading sat
   flush against the product grid with a measured 0px gap.
   Scoped to the empty-cart block so other block headings on the
   site keep their own spacing.
============================================================ */
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
    margin-bottom: 28px;
}
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator {
    margin: 28px auto;
}

/* Cards sat at different heights because the block scales each photo to its
   own aspect: Charcoal Multani Mitti is 510x419 where the others are square,
   so it rendered 159px tall against their 193px and pulled its title, price
   and button up with it. A square box with object-fit:contain normalises the
   photo slot — same approach the theme's own product cards use — and the
   flex column keeps price and button on a shared baseline even when a title
   wraps to two lines. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    display: flex;
    flex-direction: column;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    margin-top: auto;
}

/* ============================================================
   VARIABLE PRODUCTS — size / fragrance pills
   ------------------------------------------------------------
   Styles WooCommerce's own variation form. The markup is Woo's
   (it moved from <table class="variations"> to <div> in recent
   versions), so selectors here stay structure-agnostic and lean
   on Woo's stable class names.
============================================================ */
.gaea-variations { margin: 24px 0 28px; }
.gaea-variations .variations_form { margin: 0; }

/* Woo's own layout table/list — strip it back to a plain stack */
.gaea-variations .variations,
.gaea-variations .variations tbody,
.gaea-variations .variations tr,
.gaea-variations .variations th,
.gaea-variations .variations td {
    display: block;
    width: auto;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    /* <th> centres its text by browser default, and display:block doesn't
       reset that — it left the SIZE / FRAGRANCE labels centred over
       left-aligned pills. */
    text-align: left;
}
.gaea-variations .variations tr,
.gaea-variations .variation { margin-bottom: 22px; }

.gaea-variations .label label,
.gaea-variations .variations label {
    font-family: var(--ff-serif);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin: 0 0 12px;
    display: block;
    font-weight: 400;
}

/* The select is replaced by pills, but stays in the DOM as the value Woo
   reads. Only hidden once JS has actually built the pills — without the
   class it remains visible, so a JS failure degrades to a usable form. */
.gaea-select-hidden { display: none !important; }

.gaea-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gaea-pill {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--clr-lavender, var(--clr-mauve-pale));
    background: #fff;
    color: var(--clr-ink);
    cursor: pointer;
    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.gaea-pill:hover { border-color: var(--clr-mauve); color: var(--clr-mauve); }
.gaea-pill.selected {
    background: var(--clr-mauve);
    border-color: var(--clr-mauve);
    color: #fff;
}
.gaea-pill:focus-visible {
    outline: 2px solid var(--clr-ember);
    outline-offset: 2px;
}
/* Combination doesn't exist (e.g. Saffron only comes in 4.5in). Shown, not
   hidden — a customer needs to see that the option exists but not together. */
.gaea-pill.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.gaea-pill.is-unavailable:hover {
    border-color: var(--clr-lavender, var(--clr-mauve-pale));
    color: var(--clr-ink);
}

/* Attributes with too many terms for pills keep the native select */
.gaea-variation-select {
    width: 100%;
    max-width: 320px;
    padding: 11px 14px;
    border: 1.5px solid var(--clr-linen);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    background: #fff;
    color: var(--clr-ink);
}

.gaea-variations .reset_variations {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    color: var(--clr-muted);
    text-decoration: underline;
}
.gaea-variations .reset_variations:hover { color: var(--clr-mauve); }

/* Live price for the chosen combination */
.gaea-variations .woocommerce-variation-price { margin: 4px 0 18px; }
.gaea-variations .woocommerce-variation-price .price {
    font-family: var(--ff-serif);
    font-size: 26px;
    color: var(--clr-dark);
}
.gaea-variations .woocommerce-variation-availability p {
    font-size: 13px;
    color: var(--clr-muted);
    margin: 0 0 14px;
}
.gaea-variations .woocommerce-variation-description p { font-size: 14px; color: var(--clr-muted); }

/* Add-to-cart row — same shape as the simple-product branch */
.gaea-variations .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.gaea-variations .quantity { min-height: 54px; }
.gaea-variations .quantity label { display: none; }
.gaea-variations .single_add_to_cart_button {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--clr-ember);
    color: #fff;
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-base);
}
.gaea-variations .single_add_to_cart_button:hover { background: var(--clr-mauve); }
/* Woo disables the button until a full combination is chosen */
.gaea-variations .single_add_to_cart_button.disabled,
.gaea-variations .single_add_to_cart_button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.gaea-variations .single_add_to_cart_button.disabled:hover { background: var(--clr-ember); }

.gaea-variations .stock.out-of-stock {
    font-size: 14px;
    color: var(--clr-muted);
    font-style: italic;
}

@media (max-width: 600px) {
    .gaea-variations .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
    .gaea-variations .single_add_to_cart_button { min-height: 48px; width: 100%; flex: 1 1 auto; }
    .gaea-pill { padding: 11px 18px; }   /* 44px tap target */
}

/* ============================================================
   FULL-BLEED HERO — photograph fills the section, text overlaid on a
   readability scrim. Same design on desktop and mobile. Appended last so
   it overrides the earlier .hero / .hero-content / button rules.
============================================================ */
.hero--fullbleed {
    position: relative;
    min-height: 100vh;               /* fallback for old browsers */
    min-height: 100svh;              /* modern: small/visible viewport so the
                                        bottom CTAs never fall below the fold on
                                        phones (100vh is taller than what's
                                        visible behind the address bar) */
    display: flex;
    align-items: flex-end;           /* text sits at the bottom; candle shows above */
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-h) + 32px) 24px 6vh;
    overflow: hidden;
    box-sizing: border-box;
    background: #EAD7EC;             /* soft pink fallback while the photo loads */
}
.hero--fullbleed .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero--fullbleed .hero-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Centred, because the crop is no longer doing the framing — the <picture>
       in front-page.php serves a purpose-built landscape file to desktop and
       the portrait one to phones, and each is composed to sit centred.

       This replaced an object-position hack. Nudging the crop up cleared the
       flame from the header but pulled the candle's GAEA SCENTS label down
       behind the headline; nudging it down did the reverse. One image cannot
       satisfy both in a viewport that wide, which is why there are now two. */
    object-position: center center;
    display: block;
}
.hero--fullbleed .hero-scrim {
    position: absolute;
    inset: 0;
    /* Candle stays clear in the upper ~half; a soft dark band builds toward
       the bottom where the (now smaller) headline + CTAs sit. */
    background: linear-gradient(to bottom,
        rgba(38,16,34,0) 0%,
        rgba(38,16,34,0) 46%,
        rgba(38,16,34,0.34) 66%,
        rgba(38,16,34,0.74) 100%);
}
.hero--fullbleed .hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    min-height: 0;
    padding: 0;
    color: #fff;
}
.hero--fullbleed .hero-title {
    /* Restrained size so the candle stays the hero (was the huge base size,
       which buried the product). */
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    line-height: 1.08;
    margin-bottom: 12px;
    /* Overrides the -0.02em inherited from .hero-title, which fused the f and l
       in "flame" into a single shape: any letter-spacing other than normal
       makes the browser drop ligatures, and Playfair's bold 'f' has a long
       overhanging terminal that the fl ligature exists to absorb. Forcing
       font-variant-ligatures does not bring it back — the spacing itself is
       what suppresses it.

       0 un-fused them but left the f's terminal still touching the l. A small
       POSITIVE value is what actually opens the pair; compared at 51px,
       0.005em is barely distinguishable from 0 and 0.01em gives a clean gap
       without reading as loose. */
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(30,12,26,0.6), 0 1px 3px rgba(30,12,26,0.45);
    animation: none;
    opacity: 1;
    transform: none;
}
/* Both lines in the same face — 'Kindled with Intention.' was italic, which
   read as a different font next to 'Born from the Earth.' */
.hero--fullbleed .hero-title em {
    color: #fff;
    font-style: normal;
    font-weight: inherit;
}
/* Brand tagline above the headline */
.hero--fullbleed .hero-eyebrow {
    color: rgba(255,255,255,0.95);
    letter-spacing: 3px;
    font-size: 10.5px;
    margin-bottom: 12px;
    text-shadow: 0 1px 10px rgba(30,12,26,0.6);
}
.hero--fullbleed .hero-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.02rem);
    margin-bottom: 22px;
    color: #fff;
    text-shadow: 0 1px 12px rgba(30,12,26,0.6);
    animation: none;
    opacity: 1;
    transform: none;
}
.hero--fullbleed .hero-actions { justify-content: center; animation: none; opacity: 1; transform: none; }
/* Solid + glass buttons that read on a photo */
.hero--fullbleed .btn-hero-primary { background: #fff; color: var(--clr-ink); }
.hero--fullbleed .btn-hero-primary:hover { background: var(--clr-mauve); color: #fff; }
.hero--fullbleed .btn-hero-ghost {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.65);
    backdrop-filter: blur(2px);
}
.hero--fullbleed .btn-hero-ghost:hover { background: rgba(255,255,255,0.26); }

@media (max-width: 768px) {
    .hero--fullbleed { padding: calc(var(--header-h) + 16px) 20px 36px; }
    .hero--fullbleed .hero-content { max-width: 100%; }
}

/* ============================================================
   SHOP FILTERS — left sidebar (see inc/shop-filters.php)
============================================================ */
.shop-filter-group { margin-top: 22px; }
/* Categories is now a .shop-filter-group too, and it leads the sidebar — the
   22px would otherwise push the whole column down on desktop. */
.shop-sidebar > .shop-filter-group:first-child { margin-top: 0; }
.shop-filter-group .shop-sidebar-title { margin-bottom: 10px; }
.shop-filter-list { display: flex; flex-direction: column; gap: 1px; }

.shop-filter-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--clr-ink);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.shop-filter-link:hover { background: var(--clr-mauve-pale); color: var(--clr-mauve); }
.shop-filter-link.active { color: var(--clr-mauve); font-weight: 500; }

/* Square = multi-select (attributes, stock); the price band uses the same mark
   but only one can be on at a time. */
.shop-filter-box {
    width: 15px; height: 15px;
    flex-shrink: 0;
    border: 1.5px solid var(--clr-linen);
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: background var(--t-base), border-color var(--t-base);
}
.shop-filter-box.is-on { background: var(--clr-mauve); border-color: var(--clr-mauve); }
.shop-filter-box.is-on::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.shop-filter-count { margin-left: auto; font-size: 12px; opacity: 0.5; }

/* Active-filter chips above the grid */
.shop-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--clr-mauve-pale);
    border: 1px solid var(--clr-mauve-light, var(--clr-mauve));
    color: var(--clr-mauve);
    font-size: 12.5px;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.shop-chip:hover { background: var(--clr-mauve); color: #fff; }
.shop-chip--clear {
    background: transparent;
    border-style: dashed;
    color: var(--clr-muted);
    border-color: var(--clr-linen);
}
.shop-chip--clear:hover { background: var(--clr-ink); color: #fff; border-color: var(--clr-ink); }

/* Filtered down to nothing */
.shop-empty { text-align: center; padding: 56px 20px; }
.shop-empty p { color: var(--clr-muted); margin-bottom: 20px; }

/* ── Shop by Category carousel ─────────────────────────────────────────
   Square photo, name and a quiet CTA. The photo is borrowed from a product
   in the category (see gaea_category_image), so the slide has to cope with
   whatever aspect that photo happens to be — hence the fixed-ratio box with
   object-fit rather than letting the image set the height and giving the
   row ragged card heights. */
.gs-catcarousel-section {
    background: var(--clr-ivory-warm);
}
/* Swiper's stylesheet is lazy-loaded from a CDN and lands in <head> AFTER
   this file, so its `.swiper` rule beats a bare `.gs-catcarousel-swiper` at
   equal specificity — the padding silently computed to 0px and the dots sat
   on top of the cards. The section class buys the specificity to win. */
.gs-catcarousel-section .gs-catcarousel-swiper {
    padding-bottom: 44px;   /* room for the pagination dots */
}

/* Until Swiper initialises, the slides are plain block children and render as
   five full-width images stacked down the page — a big layout jump on every
   load, and permanent if the CDN ever fails. Lay them out as a scrollable row
   up front. Swiper adds .swiper-initialized when it takes over, at which point
   this stops applying and its own layout (and inline slide widths) win. */
.gs-catcarousel-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.gs-catcarousel-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
    display: none;
}
.gs-catcarousel-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 clamp(200px, 24vw, 268px);
}
.gs-catslide {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(155,91,122,0.14);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.gs-catslide:hover {
    transform: translateY(-4px);
    border-color: rgba(155,91,122,0.32);
    box-shadow: 0 14px 34px rgba(60,30,50,0.10);
}
.gs-catslide:focus-visible {
    outline: 2px solid var(--clr-ember);
    outline-offset: 3px;
}
.gs-catslide-media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #FAE8DF 0%, #F3D2E4 100%);
    overflow: hidden;
}
.gs-catslide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.gs-catslide:hover .gs-catslide-media img { transform: scale(1.04); }
.gs-catslide-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.gs-catslide-body h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--clr-ink);
    text-wrap: balance;
}
.gs-catslide-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-ember);
}
.gs-catslide:hover .gs-catslide-cta { gap: 10px; }
@media (max-width: 600px) {
    .gs-catslide-body { padding: 14px 14px 16px; }
    .gs-catslide-body h3 { font-size: 16px; }
}

/* ── Bento grid for "Our Products. One Promise." ──────────────────────
   Replaces the flat 2x2. The first card is the hero tile; the rest fill
   around it. Two shapes only, because the admin screen caps the section at
   4 or 5 cards — anything else has no sensible arrangement.

     4 cards            5 cards
     ┌────┬──┬──┐       ┌────┬──┬──┐
     │ 1  │  2  │       │ 1  │  2  │
     │    ├──┬──┤       │    ├──┬──┤
     │    │3 │4 │       │    │3 │4 │
     └────┴──┴──┘       ├────┴──┴──┤
                        │    5     │
                        └──────────┘
   The tall first cell is what makes it read as a bento rather than a grid,
   so it keeps 2 rows in both shapes. */
.gs-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.gs-bento > .gs-cat-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gs-bento > .gs-cat-card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.gs-bento > .gs-cat-card:nth-child(3) { grid-column: 3; grid-row: 2; }
.gs-bento > .gs-cat-card:nth-child(4) { grid-column: 4; grid-row: 2; }
.gs-bento--5 > .gs-cat-card:nth-child(5) { grid-column: 1 / 5; grid-row: 3; }

/* The hero tile has room for a real paragraph; the small cells do not, so
   they lead with the title and let the picture do the talking. */
.gs-bento > .gs-cat-card:nth-child(1) { min-height: 340px; }
.gs-bento > .gs-cat-card:nth-child(n+3) p { display: none; }
.gs-bento--5 > .gs-cat-card:nth-child(5) p { display: block; }

/* Body copy only where there is room for it: the hero, the wide cell, and the
   full-width fifth. The two small cells lead with the title and let the
   photograph do the rest. */
.gs-bento > .gs-cat-card:nth-child(n+3):nth-child(-n+4) p { display: none; }
.gs-bento--5 > .gs-cat-card:nth-child(5) p { display: block; }

/* Narrow cells cannot hold a full sentence of qualifiers on one line. */
.gs-bento > .gs-cat-card:nth-child(3) .gs-cat-badge,
.gs-bento > .gs-cat-card:nth-child(4) .gs-cat-badge {
    font-size: 8px;
    letter-spacing: 0.10em;
    padding: 3px 8px;
}

@media (max-width: 1024px) {
    .gs-bento { grid-template-columns: repeat(2, 1fr); }
    .gs-bento > .gs-cat-card:nth-child(1) { grid-column: 1 / 3; grid-row: auto; min-height: 260px; }
    .gs-bento > .gs-cat-card:nth-child(2),
    .gs-bento > .gs-cat-card:nth-child(3),
    .gs-bento > .gs-cat-card:nth-child(4) { grid-column: auto; grid-row: auto; }
    .gs-bento--5 > .gs-cat-card:nth-child(5) { grid-column: 1 / 3; grid-row: auto; }
    .gs-bento > .gs-cat-card p { display: block; }
}
@media (max-width: 600px) {
    .gs-bento { grid-template-columns: 1fr; gap: 14px; }
    .gs-bento > .gs-cat-card,
    .gs-bento > .gs-cat-card:nth-child(1),
    .gs-bento--5 > .gs-cat-card:nth-child(5) { grid-column: 1; min-height: 0; }
}

/* ── Marquee trust band — restyle ─────────────────────────────────────
   Content unchanged; this is presentation only.

   Three things were working against it:
   1. The band's background gradient was itself animated (6s) while the track
      scrolled (28s). Two unrelated motions at once read as restless rather
      than lively, so the gradient is now static and the scroll carries it.
   2. Items were hard-clipped at both edges — a word would simply be sliced in
      half at the viewport boundary. A mask fades them out instead, which is
      what makes a marquee feel continuous rather than cropped.
   3. `.marquee-track span` and `.marquee-item` both set type, so size,
      weight and letter-spacing were resolved from two rules at equal
      specificity. Set once here, on the item.                            */
.marquee-band {
    background: linear-gradient(100deg, var(--clr-ember-dark) 0%, var(--clr-ember) 55%, var(--clr-rose) 100%);
    background-size: auto;
    animation: none;
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    /* Feather both ends. Kept narrow so the band still reads as full-bleed. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee-track span,
.marquee-item {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: none;   /* the items carry their own emoji + sentence case */
    color: rgba(255,255,255,0.94);
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 0 26px;
}

/* A hairline diamond reads as punctuation between items; the old one sat in
   the brand mauve on a mauve band, so it was nearly invisible. */
.marquee-sep {
    color: rgba(255,255,255,0.38);
    font-size: 8px;
    padding: 0;
    flex-shrink: 0;
    transform: translateY(-1px);
}

.marquee-band:hover .marquee-track,
.marquee-band:focus-within .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; transform: none; }
    .marquee-band {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

@media (max-width: 600px) {
    .marquee-item { padding: 0 16px; font-size: 11px; letter-spacing: 0.08em; }
    .marquee-band { padding: 12px 0; }
}

/* ── Product image lightbox ───────────────────────────────────────────
   Deliberately dark and chromeless: the point is the photograph, so
   everything else recedes. Controls are large enough to hit on a phone
   (44px) and sit clear of the image on small screens. */
.gaea-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 12, 20, 0.94);
    padding: 56px 16px;
    cursor: zoom-out;
    animation: gaea-lb-in 0.18s ease-out;
}
@keyframes gaea-lb-in { from { opacity: 0; } to { opacity: 1; } }

.gaea-lb-img {
    max-width: min(100%, 1400px);
    max-height: 100%;
    object-fit: contain;
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}

.gaea-lb-close,
.gaea-lb-nav {
    position: absolute;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-base);
}
.gaea-lb-close:hover,
.gaea-lb-nav:hover { background: rgba(255,255,255,0.22); }
.gaea-lb-close:focus-visible,
.gaea-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* `display: flex` above beats the UA stylesheet's `[hidden] { display: none }`,
   so setting .hidden in JS did nothing and a single-image product still showed
   both arrows. Author rule needed to win it back. */
.gaea-lb-nav[hidden] { display: none; }

.gaea-lb-close { top: 16px; right: 16px; font-size: 28px; }
.gaea-lb-prev { left: 16px; }
.gaea-lb-next { right: 16px; }

.gaea-lb-count {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.72);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.10em;
    font-variant-numeric: tabular-nums;
}

/* Phones: the arrows would sit on top of a portrait photo at the sides, so
   they move to the bottom corners where the image has already ended. */
@media (max-width: 600px) {
    .gaea-lb { padding: 56px 8px 72px; }
    .gaea-lb-prev { left: 12px; bottom: 12px; top: auto; }
    .gaea-lb-next { right: 12px; bottom: 12px; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .gaea-lb { animation: none; }
}

/* ── Add to Cart: confirmed state ─────────────────────────────────────
   WooCommerce injects its own "View cart" link immediately after the button
   once something is added. On a product card that link has nowhere to sit —
   it wrapped out of the footer and pushed the layout around. The header
   already carries a cart count and the button now says what happened, so the
   link is redundant here; it stays on the single-product page where there is
   room for it. */
/* Specificity matters here: WooCommerce's own `.woocommerce a.added_to_cart`
   is (0,2,1) — the element selector beats a plain two-class rule — so
   `.product-card-footer .added_to_cart` at (0,2,0) lost and the link stayed
   visible. These are (0,3,1). */
.product-card .product-card-footer a.added_to_cart,
.gs-product-card .product-card-footer a.added_to_cart,
.products .product-card-footer a.added_to_cart {
    display: none;
}

/* Confirmed state. It is a link to the cart now, so it keeps a pointer and a
   hover — the previous version used cursor:default, which said "inert" about
   something that is meant to be clicked. */
.product-card-atc.is-added,
a.product-card-atc.is-added {
    background: var(--clr-sage, #6B8C6E);
    border-color: var(--clr-sage, #6B8C6E);
    color: #fff;
    text-decoration: none;
}
.product-card-atc.is-added:hover {
    background: var(--clr-sage-craft, #5A7A5A);
    border-color: var(--clr-sage-craft, #5A7A5A);
}
.product-card-atc svg { flex-shrink: 0; }

/* ── Product page: in-cart state ──────────────────────────────────────
   The Add to Cart button becomes the confirmation, and the stepper beside it
   changes the cart directly. Sage on the button rather than the brand mauve so
   the state reads as done rather than as another thing to press. */
.btn-atc.is-added {
    background: var(--clr-sage, #6B8C6E);
    border-color: var(--clr-sage, #6B8C6E);
    color: #fff;
    cursor: default;
}
.btn-atc.is-added:hover {
    background: var(--clr-sage, #6B8C6E);
    border-color: var(--clr-sage, #6B8C6E);
    transform: none;
    box-shadow: none;
}

/* Sits beside the button on a wide screen and drops under it on a narrow one.
   .product-atc-section is flex/nowrap, so without the wrap below the two would
   be squeezed side by side on a phone. */
.product-atc-section { flex-wrap: wrap; row-gap: 12px; }
.product-atc-section .gaea-in-cart { flex: 0 1 auto; }

.gaea-in-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-ink);
    transition: opacity var(--t-base);
}
.gaea-in-cart[hidden] { display: none; }
.gaea-in-cart.is-busy { opacity: 0.5; pointer-events: none; }

.gaea-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(155,91,122,0.35);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: #fff;
}

.gaea-qty-btn {
    width: 38px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--clr-ember);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-base);
}
.gaea-qty-btn:hover { background: rgba(155,91,122,0.10); }
.gaea-qty-btn:focus-visible { outline: 2px solid var(--clr-ember); outline-offset: -2px; }

.gaea-qty-num {
    min-width: 34px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gaea-in-cart-text strong { font-weight: 600; }

.gaea-in-cart-link {
    color: var(--clr-ember);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
}
.gaea-in-cart-link:hover { opacity: 0.75; }

@media (max-width: 480px) {
    .product-atc-section .gaea-in-cart { flex: 1 1 100%; }
    .gaea-qty-btn { width: 44px; height: 44px; }   /* thumb-sized on a phone */
}

/* ── Product card: in-cart state ──────────────────────────────────────
   The action slot holds either "Add to Cart" or the confirmation plus a
   stepper, so it stacks. On a wide card the footer is a row (price | action)
   and the column right-aligns under the price; below 1024 the footer is
   already a column, so this stretches to match it. */
.product-card-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}
.product-card-action.is-busy { opacity: 0.5; pointer-events: none; }

/* Matching the button's width rather than hugging its own contents — a
   narrower control sitting under a wider one reads as misaligned. */
.gaea-qty--card {
    width: 100%;
    justify-content: space-between;
}
.gaea-qty--card .gaea-qty-btn { width: 40px; height: 40px; font-size: 16px; }
.gaea-qty--card .gaea-qty-num { min-width: 30px; font-size: 13px; }

@media (max-width: 1024px) {
    .product-card-action { align-items: stretch; }
}

@media (max-width: 600px) {
    /* Thumb-sized, same floor as every other tap target on a phone. */
    .gaea-qty--card .gaea-qty-btn { width: 44px; height: 44px; }
}

/* ── Bento eyebrow: shrink to fit, never wrap ─────────────────────────
   Cards range from about 560px down to 250px, and no single font size serves
   both: at any fixed size the longer eyebrows wrapped on narrow cards, which
   reads worse than smaller type that fits.

   Sized against the CARD, not the viewport — a 390px phone gives a full-width
   card while a 900px tablet gives a 250px one, and a vw unit would size those
   identically and get the narrow case wrong.

   nowrap makes the intent enforceable: an eyebrow too long for the clamp
   overflows visibly rather than wrapping quietly, so someone notices.

   The 7.5px floor is below the ~12px mobile type minimum set above. Wrapping
   was judged worse, but this is the place to revisit if it reads too small. */
.gs-cat-card { container-type: inline-size; }

.gs-cat-badge {
    white-space: nowrap;
    font-size: 9px;                          /* fallback: no container queries */
    font-size: clamp(7.5px, 2.9cqw, 11px);
}


/* ── PRODUCT CARDS on small phones ─────────────────────────────────
   Deliberately last in the file. The 768px block above already sets
   .product-card-atc { font-size: 13px }, and at 390px BOTH media queries
   match — same specificity, so source order decides. Placed earlier, these
   overrides were simply ignored. ──────────────────────────────────── */
@media (max-width: 480px) {
    .product-card-price {
        font-size: 15px;      /* 163px -> ~136px, inside the 144 available */
        /* Safety valve: a wider range than today's (say ₹1,200 to ₹12,000)
           still would not fit, so let it wrap to a second line rather than
           spill out of the card. flex-shrink has to come back for that: at 0
           the item keeps its max-content width and overflows regardless. */
        white-space: normal;
        flex-shrink: 1;
    }
    /* Each amount still stays whole — only the gap around the dash may break. */
    .product-card-price bdi { white-space: nowrap; }

    .product-card-atc {
        /* Measured across the real breakpoints: at 12px/0.6px the label still
           overran its padding box by 7px at 375 and 2px at 390. 11px with
           tighter tracking clears it at every width with room to spare.
           The padding is left alone on purpose — shrinking that would put the
           text nearer the pill edge, which is the thing being complained
           about. */
        font-size: 11px;
        letter-spacing: 0.4px;
    }
}

/* Narrower still (360px Androids are common). The label needs a few more
   pixels than 11px/0.4px leaves it, so the tracking closes up and the pill
   gives back 3px a side. 9px of padding still reads as breathing room; the
   original complaint was the text overrunning the padding entirely. */
@media (max-width: 375px) {
    .product-card-atc {
        letter-spacing: 0.2px;
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* At 320px two columns leaves about 130px per card, which is too narrow for a
   price range and a "Select Options" pill however small the type gets. One
   column hands the card its full width back and fixes both at once. Kept at
   340 so the common 360px Androids stay two-up, where they already fit. */
@media (max-width: 340px) {
    .woocommerce .shop-content ul.products { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
}

/* ── PRODUCT SHARE ─────────────────────────────────────────────── */
.gaea-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}
.gaea-share-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-right: 2px;
}
.gaea-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--clr-linen);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-umber);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.gaea-share-btn:hover {
    background: var(--clr-ember-pale);
    border-color: var(--clr-ember-light);
    color: var(--clr-ember-dark);
}
.gaea-share-btn svg { flex-shrink: 0; }
/* WhatsApp keeps its own colour, since that is the recognisable part. */
.gaea-share-wa:hover { background: #E7F6EC; border-color: #9AD5AE; color: #1D7A45; }
.gaea-share-copy.is-copied {
    background: var(--clr-ember-pale);
    border-color: var(--clr-ember-light);
    color: var(--clr-ember-dark);
}

@media (max-width: 480px) {
    /* Thumb-sized, and the row still fits without wrapping oddly. */
    .gaea-share-btn { padding: 10px 14px; }
    .gaea-share-label { width: 100%; margin-bottom: 2px; }
}

/* ── COUPON PRICE LINE ─────────────────────────────────────────── */
/* The price the customer will actually pay, worked out per product. Quiet
   enough not to fight the real price above it, green because it is a saving. */
.gaea-coupon-price {
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: #3F6B3F;
}
.gaea-coupon-price strong { font-weight: 600; }
.gaea-coupon-price code {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: #EAF6EA;
    color: #2F5A2F;
}
.gaea-coupon-price--single { font-size: 14px; margin-top: 8px; }

/* On a card the line sits under the price, above the button, so it has to
   stay on one line at card width. */
.gaea-coupon-price--card {
    font-size: 12px;
    margin-top: 4px;
    flex-basis: 100%;
    order: 3;
}
.gaea-coupon-price--card code { font-size: 11px; padding: 1px 5px; }

@media (max-width: 480px) {
    .gaea-coupon-price--card { font-size: 11px; }
    .gaea-coupon-price--card code { font-size: 10px; }
}

/* `flex-basis:100%` above is what puts the line on its own row -- but only
   while the footer is a row. At 1024 the footer flips to `flex-direction:
   column` and keeps `flex-wrap:wrap`, and in a column the basis is measured
   against the HEIGHT. Asking for the full height forced a wrap, so the line
   started a second COLUMN and hung off the right edge of the card: on a
   132px card the text was laid out at x=177, clipped mid-word.

   In the column state it just needs its natural height. */
@media (max-width: 1024px) {
    .gaea-coupon-price--card { flex-basis: auto; }
}

/* ── SAVE FOR LATER ────────────────────────────────────────────── */
/* The link injected next to Remove on each cart line. Matched to the block
   cart's own remove link so the pair reads as one set of row actions. */
.gaea-save-later {
    display: inline-block;
    margin-right: 12px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-mauve-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.gaea-save-later:hover { color: var(--clr-ember); }
.gaea-save-later[disabled] { opacity: 0.6; cursor: default; }

.gaea-saved {
    max-width: 1120px;
    margin: 40px auto 0;
    padding: 24px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.gaea-saved-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin: 0 0 18px;
}
.gaea-saved-count {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--clr-ember-pale);
    color: var(--clr-ember-dark);
}
.gaea-saved-list { list-style: none; margin: 0; padding: 0; }
.gaea-saved-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--clr-linen);
}
.gaea-saved-item:first-child { border-top: 0; }
.gaea-saved-thumb { flex-shrink: 0; width: 64px; }
.gaea-saved-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.gaea-saved-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gaea-saved-name { font-size: 15px; color: var(--clr-dark); }
.gaea-saved-name:hover { color: var(--clr-mauve); }
.gaea-saved-meta { font-size: 12px; color: var(--clr-muted); }
.gaea-saved-price { font-size: 14px; font-weight: 500; color: var(--clr-dark); font-variant-numeric: tabular-nums; }
.gaea-saved-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gaea-saved-actions button {
    padding: 8px 15px;
    border: 1px solid var(--clr-linen);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.gaea-saved-move { background: var(--clr-mauve) !important; border-color: var(--clr-mauve) !important; color: #fff !important; }
.gaea-saved-move:hover { background: var(--clr-mauve-dark) !important; border-color: var(--clr-mauve-dark) !important; }
.gaea-saved-remove { color: var(--clr-muted); }
.gaea-saved-remove:hover { background: #FBEAE7; border-color: #E8BDB4; color: #A6402F; }
.gaea-saved-item.is-unavailable .gaea-saved-thumb img { opacity: 0.5; }
.gaea-saved-oos { font-size: 12px; color: #A6402F; font-weight: 600; }

@media (max-width: 600px) {
    .gaea-saved { padding: 18px; margin-top: 28px; }
    .gaea-saved-item { flex-wrap: wrap; }
    .gaea-saved-actions { width: 100%; }
    .gaea-saved-actions button { flex: 1 1 auto; text-align: center; min-height: 40px; }
}

/* ── CART DEMAND ───────────────────────────────────────────────── */
/* Real count of other carts holding this product. Understated on purpose:
   it is information, not a countdown. */
.gaea-cart-demand {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--clr-muted);
}
.gaea-cart-demand::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C4862A;
    flex-shrink: 0;
}
/* The element ships with the `hidden` attribute and only loses it once the
   count comes back non-zero. But `display:flex` above is an author rule and
   the browser's `[hidden]{display:none}` is a UA rule, so flex won.

   A product in nobody's cart therefore painted an empty 6px row: no text,
   just the amber dot floating under the price. */
.gaea-cart-demand[hidden] { display: none; }

/* ── PRICE ROW on narrow screens ───────────────────────────────── */
/* The row holds three things: the price, the after-coupon price, and the
   cart count. At 344px they were squeezed to about 100px each and every one
   broke to a word per line, because the row was nowrap and the children were
   free to shrink.

   The count goes on its own line and the other two keep their natural width,
   so they wrap as whole phrases rather than being compressed. Desktop is
   untouched: there the three sit on one line comfortably. */
@media (max-width: 768px) {
    .product-price-wrap {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .product-price-wrap > .gaea-coupon-price { flex-shrink: 0; }
    .product-price-wrap > .gaea-cart-demand {
        flex-basis: 100%;
        margin-top: 2px;
    }
}

/* ── SHOP SEARCH ───────────────────────────────────────────────── */
.shop-search {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 22px;
    border: 1.5px solid var(--clr-lavender);
    border-radius: var(--radius-pill);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--t-base);
}
.shop-search:focus-within { border-color: var(--clr-mauve); }
.shop-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 11px 4px 11px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-ink);
}
.shop-search input[type="search"]::placeholder { color: var(--clr-muted-light); }
/* Safari draws its own clear button; it collides with ours. */
.shop-search input[type="search"]::-webkit-search-decoration,
.shop-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.shop-search button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: var(--clr-mauve-dark);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.shop-search button:hover { background: var(--clr-ember-pale); color: var(--clr-ember-dark); }

@media (max-width: 1024px) {
    /* The filter groups collapse here; search stays open above them. */
    .shop-search { margin-bottom: 16px; }
    .shop-search input[type="search"] { font-size: 16px; }   /* no iOS zoom on focus */
}


/* ── WOOCOMMERCE BLOCK NOTICES vs THE FIXED HEADER ─────────────────
   "Coupon code LAUNCH30 has been applied to your cart" landed on top of the
   logo on mobile. WooCommerce renders block notices into a snackbar that is
   position:fixed at top:10px with z-index:100000, and the theme's header is
   fixed in that same band at z-index:1000. The header loses, and because it
   is transparent until you scroll, the notice and the logo were painted over
   each other rather than one simply hiding the other.

   Pushed clear of the header, using the header's own measurements so it stays
   right whether or not the offer bar and the admin bar are showing. */
.wc-block-components-notices__snackbar {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--offer-bar-h) + var(--header-h-base) + 12px);
}

/* ── CART TOOLS ────────────────────────────────────────────────────
   Delivery switch, empty cart and continue shopping: three controls the
   block cart does not offer. See inc/cart-actions.php for why each exists. */
.gaea-delivery-switch {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--clr-lavender);
    border-radius: var(--radius-md);
    background: #fff;
    transition: opacity var(--t-base);
}
.gaea-delivery-switch.is-busy { opacity: 0.55; pointer-events: none; }
.gaea-delivery-label {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--clr-muted);
    margin-bottom: 10px;
}
.gaea-delivery-options { display: flex; flex-wrap: wrap; gap: 8px; }
.gaea-delivery-option {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1.5px solid var(--clr-lavender);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.gaea-delivery-option:hover { border-color: var(--clr-mauve); }
.gaea-delivery-option.selected {
    border-color: var(--clr-mauve);
    background: var(--clr-mauve-pale);
}
.gaea-delivery-name { font-size: 14px; color: var(--clr-dark); }
.gaea-delivery-price { font-size: 13px; font-weight: 600; color: var(--clr-mauve-dark); }

.gaea-cart-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-lavender);
}
.gaea-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-mauve-dark);
    text-decoration: none;
}
.gaea-continue-shopping:hover { text-decoration: underline; text-underline-offset: 3px; }
.gaea-empty-cart {
    padding: 8px 14px;
    border: 1px solid var(--clr-lavender);
    border-radius: var(--radius-pill);
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-muted);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.gaea-empty-cart:hover { color: var(--clr-dark); border-color: var(--clr-mauve); }
/* Armed state is deliberately louder: the next tap is the destructive one. */
.gaea-empty-cart.is-armed {
    color: #fff;
    background: #A33A3A;
    border-color: #A33A3A;
}
.gaea-empty-cart[disabled] { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
    .gaea-cart-tools { flex-direction: column; align-items: stretch; }
    .gaea-continue-shopping { justify-content: center; }
    .gaea-empty-cart { width: 100%; }
    .gaea-delivery-option { flex-basis: 100%; }
}

/* ── SHOP: LOAD MORE ───────────────────────────────────────────────
   Replaces the numbered pagination once JS is running. The numbers stay in
   the DOM (hidden) as the crawler path and the fallback. */
.gaea-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 36px 0 8px;
}
.gaea-more-btn {
    padding: 12px 30px;
    border: 1.5px solid var(--clr-mauve);
    border-radius: var(--radius-pill);
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--clr-mauve-dark);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.gaea-more-btn:hover { background: var(--clr-mauve); color: #fff; }
.gaea-more-btn[disabled] { opacity: 0.6; cursor: default; }
.gaea-more-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-muted);
}
.gaea-more.is-loading .gaea-more-btn { opacity: 0.6; }

/* The numbers are hidden by main.js once infinite scroll takes over. The
   theme styles this nav with display:flex, an author rule, which beats the
   browser's own [hidden]{display:none} -- so setting the attribute left the
   pagination sitting under the Load more button. Same trap as the empty
   cart-demand row. */
nav.woocommerce-pagination[hidden] { display: none; }