/*
Theme Name: Exotica Fresh
Theme URI: https://exoticafreshretail.com
Author: MAC Platforms
Description: Lightweight, ads-ready WooCommerce theme for Exotica Fresheners. No page builder, no bloat — built for fast Core Web Vitals and low cost-per-click.
Version: 3.53.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exotica-fresh
Tags: e-commerce, responsive, custom-colors, translation-ready
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- brand ------------------------------------------------------- */
  --blue:        #1852A5;
  --blue-dark:   #0F3C88;
  --blue-deep:   #0A2B63;
  --blue-mid:    #2E6FD0;
  --blue-light:  #5D9BFF;
  --blue-soft:   #EAF2FF;
  --blue-tint:   #F4F8FF;
  --yellow:      #FBFF00;   /* client brand yellow */
  --yellow-hi:   #FDFF66;
  --yellow-soft: #FEFFB3;
  --yellow-tint: #FFFFE8;
  --green:       #36B74D;   /* client brand green */
  /*
    The brand green only reaches 3.18:1 on white — under the 4.5:1 needed for
    small text, and the product-card eyebrow uses it at 11px. This darker green
    reads as the same colour but measures 5.09:1. Keep --green for fills and
    large numbers; use --green-text for anything small.
  */
  --green-text:  #1F8C38;
  --green-soft:  #EAF8EE;
  --red:         #D92D20;
  --red-soft:    #FEF3F2;

  --text:  #0B1220;
  --body:  #3F4A5C;
  /* #6B7789 measured 4.27:1 on the page background — just under the bar. */
  --muted: #626E80;
  --white: #ffffff;
  --bg:    #F5F8FD;
  --line:  #E4EAF2;
  --line-2:#D3DDEA;

  /* --- type -------------------------------------------------------- */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid type — scales smoothly instead of jumping at breakpoints */
  --fs-display: clamp(2.4rem, 1.3rem + 4.6vw, 5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.6vw, 4.1rem);
  --fs-h2: clamp(1.7rem, 1.15rem + 2.4vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 0.98rem + 0.8vw, 1.5rem);
  --fs-h4: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.22vw, 1.0625rem);
  --fs-sm: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --fs-xs: 0.75rem;

  /* --- rhythm ------------------------------------------------------- */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3.4rem);
  --maxw: 1400px;
  --maxw-narrow: 900px;
  --section-y: clamp(3rem, 2rem + 5vw, 7rem);

  /* --- shape -------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* --- depth: layered shadows read as real light, not a grey blur --- */
  --sh-xs: 0 1px 2px rgba(11,18,32,.04), 0 2px 6px rgba(11,18,32,.04);
  --sh-sm: 0 2px 4px rgba(11,18,32,.03), 0 6px 18px rgba(11,18,32,.05);
  --sh-md: 0 4px 8px rgba(11,18,32,.04), 0 16px 40px rgba(11,18,32,.07);
  --sh-lg: 0 8px 16px rgba(24,82,165,.06), 0 30px 70px rgba(24,82,165,.14);
  --sh-xl: 0 12px 24px rgba(24,82,165,.08), 0 44px 100px rgba(24,82,165,.20);
  --sh-yellow: 0 6px 14px rgba(255,212,0,.24), 0 18px 40px rgba(255,212,0,.22);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* --- motion ------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .55s var(--ease-out);

  --header-h: 80px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); letter-spacing: -.01em; }
p  { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--text); }

/* An accent underline for the key word in a heading: <em>freshness</em> */
h1 em, h2 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
h1 em::after, h2 em::after {
  content: "";
  position: absolute;
  left: -.04em; right: -.04em; bottom: .04em;
  height: .3em;
  background: var(--yellow);
  border-radius: var(--r-pill);
  z-index: -1;
  opacity: .9;
}

ul, ol { padding-inline-start: 1.2em; }

/* Visible keyboard focus — required for accessibility, often missing */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 10000;
  background: var(--blue); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 800;
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--maxw-narrow); }

/*
  `overflow: clip` (not hidden) contains the decorative blobs without
  turning the section into a scroll container — which would break
  `position: sticky` on anything inside it.
*/
.section { padding-block: var(--section-y); position: relative; overflow: clip; }
.section--tight { padding-block: clamp(1.75rem, 1rem + 3vw, 3.75rem); }
.section--white { background: var(--white); }
.section--soft  { background: var(--bg); }
.section--tint  { background: linear-gradient(180deg, var(--white), var(--blue-tint)); }
.section--dark  {
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(93,155,255,.22), transparent 60%),
    radial-gradient(700px 400px at 90% 110%, rgba(255,212,0,.16), transparent 60%),
    linear-gradient(160deg, var(--blue-deep), var(--blue-dark));
  color: #DDE8FA;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .section-title p { color: #B9CCEA; }

/* A soft blurred colour blob for depth behind a section */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0;
}
.blob--y { background: var(--yellow); }
.blob--b { background: var(--blue-light); }
.section > .container { position: relative; z-index: 1; }

/*
  Auto-fit grid: the single most important rule in this file.
  Cards reflow from 4 -> 3 -> 2 -> 1 columns automatically based on
  available width, so the layout is correct on every screen size —
  including ones we never tested.
*/
.grid {
  display: grid;
  gap: clamp(.85rem, .4rem + 1.3vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

.section-title { max-width: 760px; margin: 0 auto clamp(2rem, 1.2rem + 2.4vw, 3.75rem); text-align: center; }
.section-title h2 { margin-bottom: .65rem; }
.section-title p { color: var(--muted); font-size: 1.02em; }

/* Split heading: title left, "view all" link right */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.section-head h2 { margin-bottom: .3rem; }
.section-head p { color: var(--muted); }

.kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--blue-soft); color: var(--blue);
  padding: .4rem .9rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .9rem;
  border: 1px solid rgba(24,82,165,.1);
}
.kicker--yellow { background: var(--yellow); color: var(--blue-dark); border-color: rgba(15,60,136,.12); }
.kicker--glass  { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.24); }
.kicker--green  { background: var(--green-soft); color: var(--green-text); border-color: rgba(31,166,74,.14); }

/*
  Scroll reveal.

  Content is VISIBLE by default and only hidden once JavaScript has proved it
  can show it again — that is what `.reveal-ready` on <html> means. Written the
  other way round (hide by default, reveal with JS) a blocked script, a JS
  error or a slow connection leaves the visitor staring at a blank page. That
  failure mode is not worth a fade-in.

  The failsafe timer in the head script removes `.reveal-ready` if the main
  script never arrives, so the content appears regardless.
*/
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .9rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  text-align: center; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  min-height: 48px; /* comfortable tap target on mobile */
}
/* A light sweep on hover — subtle, and it costs nothing */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover::before { transform: translateX(120%); }
}
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--yellow); color: var(--blue-dark); box-shadow: var(--sh-yellow); }
.btn--primary:hover { background: var(--yellow-hi); color: var(--blue-dark); box-shadow: 0 10px 20px rgba(255,212,0,.3), 0 24px 50px rgba(255,212,0,.26); }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 6px 14px rgba(24,82,165,.22), 0 16px 36px rgba(24,82,165,.18); }
.btn--blue:hover { background: var(--blue-dark); color: #fff; }
.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--ghost { background: var(--white); color: var(--blue); border-color: var(--line-2); box-shadow: var(--sh-xs); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--glass { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn--outline-y { background: transparent; color: var(--yellow); border-color: var(--yellow); }
.btn--outline-y:hover { background: var(--yellow); color: var(--blue-dark); }
.btn--sm { padding: .6rem 1.15rem; font-size: .84rem; min-height: 40px; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; min-height: 58px; }
.btn--block { width: 100%; }

/*
  A "not yet" button.

  Fading a yellow button to 50% opacity left pale gold text on pale gold —
  under any readable contrast ratio, and it looked like a rendering fault
  rather than a deliberate state. A flat grey says "unavailable" plainly and
  still clears 4.5:1. `aria-disabled` on the element carries the meaning for a
  screen reader; this only carries the look.
*/
.btn.is-disabled,
.btn[aria-disabled="true"] {
  /* --muted on --line measures 4.27:1, which fails. This reads as the same
     grey and measures 5.27:1. Disabled is not an excuse to be unreadable. */
  background: var(--line); color: #546072;
  border-color: var(--line-2); box-shadow: none;
  cursor: not-allowed; transform: none;
}
.btn.is-disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--line); color: #546072; box-shadow: none; transform: none;
}
.btn.is-disabled::before,
.btn[aria-disabled="true"]::before { display: none; }

/* Text link with an animated arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 800; color: var(--blue); font-size: .92rem;
}
.link-arrow::after { content: "→"; transition: transform var(--t); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.topbar {
  background: var(--blue-dark); color: #fff;
  font-size: .8rem; font-weight: 600;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; min-height: 38px; padding-block: .4rem;
}
.topbar strong { color: var(--yellow); font-weight: 900; }
.topbar__secondary { display: none; }
@media (min-width: 900px) { .topbar__secondary { display: block; } }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--white);
  box-shadow: 0 6px 24px rgba(15,60,136,.07);
}
.site-header .container {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}

.brand { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 900; font-style: italic; color: var(--blue); letter-spacing: -.03em; white-space: nowrap; }
.brand span { color: var(--yellow); }
.brand img { max-height: 48px; width: auto; }

.primary-nav { display: none; margin-inline: auto; }
@media (min-width: 1024px) { .primary-nav { display: block; } }
/*
  Direct-child selector matters here: a plain `.primary-nav ul` also matches
  .sub-menu, which turns the dropdown into a wide flex row and pushes it off
  the right edge of the page.
*/
.primary-nav > ul { display: flex; gap: clamp(1rem, .3rem + 1.3vw, 2rem); list-style: none; margin: 0; padding: 0; align-items: center; }
.primary-nav li { position: relative; }
.primary-nav > ul > li > a { padding: 1.6rem 0; }
.primary-nav a { display: block; font-weight: 800; font-size: .95rem; }
.primary-nav .current-menu-item > a,
.primary-nav a:hover { color: var(--blue); }

/* Dropdown */
.primary-nav .sub-menu {
  display: block;
  position: absolute; top: 100%; left: 0; z-index: 10;
  min-width: 230px; max-width: min(280px, 90vw); padding: .5rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-md);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s ease;
}
/* Right-align dropdowns near the end of the bar so they never spill offscreen. */
.primary-nav > ul > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu a { padding: .65rem .85rem; border-radius: var(--r-sm); font-weight: 700; font-size: .9rem; }
.primary-nav .sub-menu a:hover { background: var(--blue-soft); }

.header-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
@media (min-width: 1024px) { .header-actions { margin-left: 0; } }

/*
  1024px is the tightest the full header ever gets: the nav has just switched
  on but the viewport is still narrow, and adding the wishlist heart tipped the
  row 44px past the container — which scrolls the whole document sideways.
  Rather than dropping a control in this band, the nav and the icons both give
  up a few pixels, which is invisible and keeps every destination reachable.
*/
@media (min-width: 1024px) and (max-width: 1179px) {
  .primary-nav > ul { gap: .7rem; }
  .header-actions { gap: .25rem; }
  .icon-btn { width: 38px; height: 38px; font-size: .95rem; }
}

/*
  Below ~420px the brand plus four controls no longer fit, and the row pushes
  the whole document sideways. Search and account both live in the bottom bar
  on mobile, so dropping them here loses nothing.
*/
@media (max-width: 460px) {
  .header-actions { gap: .25rem; }
  .header-actions .icon-btn--optional { display: none; }
  .icon-btn { width: 38px; height: 38px; font-size: .95rem; }
  .brand { font-size: 1.15rem; }
  .brand img { max-height: 36px; }
  .topbar { font-size: .72rem; }
}

.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-size: 1.05rem;
  transition: background .2s ease;
}
.icon-btn:hover { background: #D9E7FF; color: var(--blue-dark); }
.icon-btn__count {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 900; line-height: 1;
}
.header-actions .btn { display: none; }
@media (min-width: 1180px) { .header-actions .btn { display: inline-flex; } }
.nav-toggle { display: grid; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 1000;
  width: min(360px, 88vw);
  background: var(--white);
  box-shadow: -20px 0 60px rgba(16,24,40,.2);
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 1.25rem;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
.mobile-drawer .sub-menu { padding-left: .9rem; border-left: 2px solid var(--line); margin: .25rem 0 .5rem; }
.mobile-drawer a {
  display: block; padding: .8rem .25rem;
  font-weight: 800; border-bottom: 1px solid var(--line);
}
.mobile-drawer .sub-menu a { font-weight: 600; font-size: .92rem; border-bottom: none; padding: .5rem .25rem; color: var(--muted); }
.drawer-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(16,24,40,.5);
  opacity: 0; visibility: hidden; transition: .28s ease;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero { padding: var(--gutter) var(--gutter) 0; }
.hero__inner {
  max-width: var(--maxw); margin-inline: auto;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 78% 45%, rgba(255,212,0,.9) 0%, transparent 30%),
    linear-gradient(120deg, var(--blue-dark), var(--blue) 55%, #5D9BFF);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 47% 53%; min-height: 520px; } }

.hero__content { padding: clamp(2rem, 1rem + 4vw, 4.4rem); color: #fff; position: relative; z-index: 2; }
/*
  Headings carry an explicit dark colour, so every heading that sits on a
  dark surface has to opt back into white — inheriting is not enough.
*/
.hero__content h1, .hero__content h2, .hero__content h3 { color: #fff; }
.hero__label {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  padding: .55rem 1rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 900; margin-bottom: 1.1rem;
}
.hero__label span { color: var(--yellow); }
.hero__content h1 { margin-bottom: 1.1rem; }
.hero__content p { color: #EAF2FF; max-width: 46ch; margin-bottom: 1.6rem; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 420px) { .hero__buttons { flex-direction: column; } .hero__buttons .btn { width: 100%; } }

.hero__media {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  min-height: 280px;
}
.hero__media img {
  max-height: clamp(220px, 34vw, 420px);
  width: auto; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.35));
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/*
  Stats sit inside the text column. Floating them over the product shot
  collided with it at every width from 1024–1440px; as a full-width row
  they just repeated the USP bar directly below the hero.
*/
/*
  These are the old site's `.hero-badge` — white card, 18px radius, green
  figure, muted caption — carried across value for value from the original
  stylesheet, because that is the detail the client recognised as "the old
  design". The one thing not carried across is the old absolute positioning:
  floating them over the product image made them collide with it between
  1024px and 1440px. They sit in the text column instead and stay put.
*/
.hero__badges {
  display: flex; flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.85rem;
}
.hero__badge {
  flex: 1 1 auto; min-width: 118px;
  background: var(--white);
  border: 0;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: 0 15px 35px rgba(0,0,0,.12);
}
.hero__badge strong {
  display: block; color: var(--green-text);
  font-family: var(--font-head); font-size: 1.375rem; font-weight: 900;
  line-height: 1.1; margin-bottom: .15rem;
}
.hero__badge span { font-size: .75rem; font-weight: 800; color: var(--muted); }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(.85rem, .5rem + 1vw, 1.25rem);
  box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Brand accent bar that wipes in on hover */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); border-color: var(--blue-soft); }
  .card:hover::after { transform: scaleX(1); }
}

.card__media {
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--blue-tint) 78%);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: .9rem;
  position: relative;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform .45s var(--ease-out);
}
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.09) translateY(-3px); } }

/* Quick-view / wishlist buttons that slide up over the image */
.card__quick {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
  display: flex; gap: .4rem; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t), transform var(--t);
}
@media (hover: hover) { .card:hover .card__quick { opacity: 1; transform: none; } }
@media (hover: none) { .card__quick { display: none; } }
.card__quick button, .card__quick a {
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .45rem .8rem;
  font-size: .75rem; font-weight: 800; color: var(--blue);
  box-shadow: var(--sh-sm); backdrop-filter: blur(6px);
}
.card__quick button:hover, .card__quick a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.card__body { display: flex; flex-direction: column; flex: 1; }
.card__eyebrow { color: var(--green-text); font-weight: 900; text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; }
.card__title { font-size: 1rem; margin: .35rem 0 .45rem; }
.card__title a:hover { color: var(--blue); }
.card__desc { color: var(--muted); font-size: .85rem; margin-bottom: .9rem; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.card__price { color: var(--blue); font-size: 1.2rem; font-weight: 900; }

.badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 3;
  background: var(--yellow); color: var(--blue-dark);
  padding: .35rem .65rem; border-radius: var(--r-pill);
  font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.badge--blue  { background: var(--blue);  color: #fff; }
.badge--green { background: var(--green); color: #fff; }
.badge--red   { background: var(--red);   color: #fff; }

/* Category tile */
.tile {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem; text-align: center;
  box-shadow: var(--sh-sm); transition: .25s ease; display: block; height: 100%;
}
@media (hover: hover) { .tile:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } }
.tile__media { aspect-ratio: 4/3; background: linear-gradient(180deg,#fff,var(--blue-soft)); border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden; }
/*
  Contain, do not clip.

  `max-height: 82%; width: auto` only constrains one axis. A landscape
  packaging shot kept its intrinsic width, overflowed the 4:3 box and got
  sliced by `overflow: hidden` — which is why the Car Vents, Hanging Pouch and
  Palm Trees tiles were all cut off along the bottom edge while the square
  product shots looked fine. Sizing both axes and letting object-fit do the
  work means every tile frames its picture the same way, whatever shape it is.
*/
/*
  Absolutely positioned, because a percentage height inside an aspect-ratio
  grid cell is not a definite length in every engine — `height: 100%` and
  `max-height: 100%` both resolved against nothing here and the tall images
  kept overflowing. `inset: 0` gives the image a box that certainly exists.
*/
.tile__media { position: relative; }
.tile__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9%;
  transition: transform .3s ease;
}
@media (hover: hover) { .tile:hover .tile__media img { transform: scale(1.05); } }
.tile h3 { color: var(--blue); margin-bottom: .4rem; }
.tile p { color: var(--muted); font-size: .85rem; }
.tile__count { display: block; margin-top: .5rem; font-size: .75rem; font-weight: 800; color: var(--muted); }

/* Fragrance chip */
.frag {
  display: block; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem .75rem;
  box-shadow: var(--sh-sm); transition: .25s ease;
  position: relative; overflow: hidden; height: 100%;
}
@media (hover: hover) { .frag:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } }
.frag__icon { width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: var(--r-md); background: var(--blue-soft); display: grid; place-items: center; font-size: 1.7rem; }
.frag h3 { font-size: 1rem; color: var(--blue); margin-bottom: .2rem; }
.frag p { font-size: .75rem; color: var(--muted); font-weight: 700; }

/* Trust / feature card */
.feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.25rem; text-align: center; box-shadow: var(--sh-sm); height: 100%; }
.feature__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: var(--r-md); background: var(--blue-soft); display: grid; place-items: center; font-size: 1.9rem; }
.feature h3 { color: var(--blue); margin-bottom: .5rem; font-size: 1.1rem; }
.feature p { color: var(--muted); font-size: .875rem; }

/* ==========================================================================
   8. PROMO / BANNER BLOCKS
   ========================================================================== */
.promo {
  border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  display: grid; gap: 1.25rem; align-items: center;
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff; box-shadow: var(--sh-lg); overflow: hidden;
}
@media (min-width: 640px) { .promo { grid-template-columns: 1.1fr .9fr; } }
.promo--yellow { background: linear-gradient(135deg, var(--yellow), var(--yellow-soft)); color: var(--blue-dark); }
.promo .kicker { display: inline-block; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); margin-bottom: .6rem; }
.promo--yellow .kicker { color: var(--green); }
.promo h2 { margin-bottom: .6rem; }
.promo p { margin-bottom: 1.25rem; opacity: .92; }
.promo img { max-height: clamp(160px, 22vw, 250px); width: auto; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0,0,0,.25)); }

.banner {
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 82% 25%, rgba(255,212,0,.85), transparent 26%),
    linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff; padding: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  grid-template-columns: 1fr;
  box-shadow: var(--sh-lg); overflow: hidden;
}
@media (min-width: 900px) { .banner { grid-template-columns: 1fr 1.2fr; } }
.banner .kicker { display: inline-block; background: var(--yellow); color: var(--blue-dark); padding: .45rem .9rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 900; text-transform: uppercase; margin-bottom: .9rem; }
.banner p { color: #EAF2FF; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px,100%),1fr)); gap: .75rem; }
.stat { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-md); padding: 1.25rem .75rem; text-align: center; transition: .25s ease; }
@media (hover: hover) { .stat:hover { background: #fff; color: var(--blue); transform: translateY(-5px); } }
.stat strong { display: block; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); color: var(--yellow); line-height: 1; margin-bottom: .4rem; }
@media (hover: hover) { .stat:hover strong { color: var(--green); } }
.stat span { font-size: .78rem; font-weight: 900; }

/* ==========================================================================
   9. SUBSCRIPTION PLANS
   ========================================================================== */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(270px,100%),1fr)); align-items: stretch; }
.plan {
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 1.75rem 1.4rem;
  display: flex; flex-direction: column; text-align: center;
  box-shadow: var(--sh-sm); transition: .25s ease; position: relative;
}
.plan--featured { border-color: var(--yellow); box-shadow: 0 20px 50px rgba(255,212,0,.22); }
.plan--featured::before {
  content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: var(--blue-dark);
  padding: .35rem 1rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 900; text-transform: uppercase; white-space: nowrap;
}
@media (hover: hover) { .plan:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } }
.plan h3 { color: var(--blue); font-size: 1.35rem; margin-bottom: .5rem; }
.plan__price { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); font-weight: 900; color: var(--blue-dark); line-height: 1; }
.plan__price sub { font-size: .9rem; font-weight: 700; color: var(--muted); vertical-align: baseline; }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0; text-align: left; display: grid; gap: .55rem; }
.plan li { font-size: .9rem; padding-left: 1.6rem; position: relative; color: var(--muted); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.plan .btn { margin-top: auto; }

/* ==========================================================================
   10. TESTIMONIALS / NEWSLETTER
   ========================================================================== */
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--sh-sm); height: 100%; display: flex; flex-direction: column; }
.quote .stars { color: var(--yellow); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: .75rem; }
.quote p { color: var(--text); margin-bottom: 1.25rem; }
.quote__who { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.quote__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 900; flex-shrink: 0; }
.quote__who h4 { font-size: .95rem; }
.quote__who span { font-size: .75rem; color: var(--muted); }

.newsletter {
  border-radius: var(--r-xl); padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  background: linear-gradient(135deg, var(--blue-soft), #fff 55%, var(--yellow-soft));
  border: 1px solid var(--line);
  display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .newsletter { grid-template-columns: 1.2fr 1fr; } }
.newsletter form { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  padding: .9rem 1.1rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: #fff;
}

/* ==========================================================================
   11. WOOCOMMERCE
   ========================================================================== */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  list-style: none; border-left: 4px solid var(--blue); background: var(--blue-soft);
  font-weight: 600;
}
.woocommerce-error { border-left-color: var(--red); background: #FEF3F2; }
.woocommerce-message { border-left-color: var(--green); background: #ECFDF3; }
.woocommerce-message .button, .woocommerce-info .button { float: right; }

/* Shop toolbar */
.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.woocommerce-result-count { color: var(--muted); font-size: .875rem; margin: 0; }
.woocommerce-ordering select, .shop-toolbar select {
  padding: .6rem 1rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--bg); font-weight: 700; font-size: .875rem;
}

/* Product loop — override Woo's float layout with the auto-fit grid */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  gap: clamp(.85rem, .4rem + 1.3vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}

.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce span.onsale {
  position: absolute; top: .9rem; right: .9rem; left: auto; z-index: 3;
  background: var(--red); color: #fff;
  min-height: 0; min-width: 0; line-height: 1;
  padding: .4rem .7rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 900; margin: 0;
}

.price { color: var(--blue); font-weight: 900; }
.price del { color: var(--muted); font-weight: 600; opacity: .7; margin-right: .4rem; }
.price ins { text-decoration: none; }

/* Single product */
.single-product-layout { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .single-product-layout { grid-template-columns: 52% 1fr; } }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { border-radius: var(--r-lg); background: #F9FBFF; }
/* Thumbnails are uncropped now, so the file keeps whatever shape it was shot
   in. That is right for the grid, where every card contains its image, and
   wrong here: a spray bottle is roughly 1:3, so at the full column width it
   renders two screens tall and pushes the price and Add to cart below the
   fold. Box the gallery and let the picture sit inside it. */
.woocommerce div.product div.images { max-width: 560px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image > img,
.woocommerce div.product div.images img.wp-post-image {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(.75rem, .4rem + 1.4vw, 2rem);
}
.woocommerce div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px,1fr)); gap: .5rem; margin-top: .75rem; list-style: none; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--r-sm); border: 2px solid transparent; aspect-ratio: 1 / 1; object-fit: contain; }
.woocommerce div.product .flex-control-thumbs img.flex-active { border-color: var(--blue); }

.woocommerce div.product .product_title { margin-bottom: .5rem; }
/* The old site priced in green on the product page and in blue on the grid.
   `--green-text` rather than `--green`: the brand green only reaches 3.18:1
   on white, and a price is the one number nobody should have to squint at. */
.woocommerce div.product p.price {
  font-size: clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin-bottom: 1rem;
  color: var(--green-text); font-weight: 900;
}
.woocommerce div.product p.price del { color: var(--muted); font-weight: 800; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--green-text); }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 1.5rem 0; }
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce .quantity .qty {
  width: 84px; height: 50px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white);
  font-weight: 800;
}
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: .85rem 1.6rem; font-weight: 800; font-size: .95rem;
  min-height: 50px; line-height: 1.2;
  transition: background .2s ease, transform .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background: var(--blue-dark); color: #fff; transform: translateY(-2px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--yellow); color: var(--blue-dark);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #FFDE33; color: var(--blue-dark); }

.product-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%),1fr)); gap: .6rem; margin-top: 1.5rem; }
.product-trust div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .8rem; font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .65rem 1.25rem; font-weight: 800; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--blue); border-color: var(--blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem,1rem + 1.5vw,2rem); margin: 0; }

/*
  Cart.

  Not scoped under `.woocommerce` on purpose. Several WooCommerce templates
  and blocks render the cart table without that wrapper class, and when the
  scoped rules miss, the table falls back to browser defaults: centred
  headers over left-aligned cells, no padding, no border radius. Targeting
  the table class directly means it always looks right.
*/
table.shop_table {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--white);
}
table.shop_table th {
  background: var(--bg); padding: 1rem;
  font-weight: 900; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; color: var(--text);
}
table.shop_table td { padding: 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
table.shop_table img { width: 62px; border-radius: var(--r-sm); }

/* Numeric columns read better right-aligned and lined up. */
table.shop_table th:last-child,
table.shop_table td:last-child { text-align: right; }
table.shop_table td.product-price,
table.shop_table td.product-subtotal,
table.shop_table th.product-price,
table.shop_table th.product-subtotal { font-variant-numeric: tabular-nums; }

/*
  Cart table becomes stacked cards on small screens.

  These selectors deliberately do NOT require a `.woocommerce` ancestor.
  Scoping them to `.woocommerce table…` means the rules silently fail
  anywhere that wrapper class is missing, and the table then blows the
  page width open on a phone — which is exactly where it matters most.
*/
@media (max-width: 700px) {
  table.shop_table_responsive thead { display: none; }

  table.shop_table_responsive tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: .5rem 0;
  }

  table.shop_table_responsive tr td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border-top: none; padding: .5rem 1rem; text-align: right;
    width: auto !important;
  }

  table.shop_table_responsive tr td::before {
    content: attr(data-title);
    font-weight: 900; font-size: .78rem;
    text-transform: uppercase; color: var(--muted);
    text-align: left; flex-shrink: 0;
  }

  table.shop_table_responsive tr td.product-remove::before { content: ""; }
}

/* Any table that is still a table must be able to shrink or scroll. */
table.shop_table { width: 100%; max-width: 100%; table-layout: auto; }

/*
 * `display:block` on a table lets it scroll — and quietly breaks it.
 *
 * A block box is 100% wide, but the table's internal layout still sizes the
 * cells to their content, so the border and background are drawn across the
 * full width while the columns huddle on the left. That is the empty panel
 * that kept appearing to the right of every order table. Keeping the table a
 * table and putting the scroll on a wrapper fixes it; `.entry-content table`
 * is the only place a truly unpredictable table can appear, so it keeps the
 * old behaviour.
 */
.entry-content table { display: block; overflow-x: auto; max-width: 100%; }
.woocommerce-table { display: table; width: 100%; max-width: 100%; }

.cart-collaterals { margin-top: 2rem; }
.woocommerce .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
@media (min-width: 800px) { .woocommerce .cart-collaterals .cart_totals { width: 46% !important; margin-left: auto; } }
.woocommerce .cart_totals h2 { font-size: 1.3rem; margin-bottom: .75rem; }

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto !important; float: none !important; }
#customer_details, #order_review, #order_review_heading { }
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: start; }
  .woocommerce-checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 .75rem; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 1rem); }
}
.woocommerce form .form-row { margin-bottom: 1rem; padding: 0; }
.woocommerce form .form-row label { font-weight: 800; font-size: .85rem; margin-bottom: .35rem; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text,
select, input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], textarea {
  width: 100%; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); font-size: 16px; /* 16px stops iOS zooming on focus */
}
textarea { min-height: 110px; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
select:focus, input:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(24,82,165,.12); }

#order_review, .woocommerce-checkout-review-order {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1rem,.75rem + 1vw,1.6rem);
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0; margin: 0 0 1rem; }
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .9rem 1rem; margin-bottom: .6rem; list-style: none;
}
.woocommerce-checkout #payment div.payment_box { background: var(--white); border-radius: var(--r-sm); margin-top: .6rem; }
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce #payment #place_order { width: 100%; }

.checkout-trust { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; font-size: .78rem; color: var(--muted); font-weight: 700; }

/* Account */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin-bottom: 1.5rem; }
@media (min-width: 800px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 24% !important; float: left !important; }
  .woocommerce-account .woocommerce-MyAccount-content { width: 72% !important; float: right !important; }
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: .7rem 1rem; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Breadcrumb */
.woocommerce-breadcrumb { color: var(--muted); font-size: .82rem; margin-bottom: 1rem; font-weight: 600; }
.woocommerce-breadcrumb a { color: var(--blue); }

/*
  Pagination.

  Unscoped from `.woocommerce` for the same reason as the cart table: when the
  scoped rules miss, the list falls back to browser defaults and renders as a
  vertical bulleted list instead of a row of buttons.
*/
nav.woocommerce-pagination,
.woocommerce-pagination { margin-top: 2.5rem; }

nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
  border: none; margin: 0; padding: 0; list-style: none;
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
}
nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li {
  border: none; margin: 0; padding: 0; overflow: visible; list-style: none;
}
nav.woocommerce-pagination ul li::marker,
.woocommerce-pagination ul li::marker { content: none; }

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  min-width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--white); border: 1px solid var(--line);
  color: var(--text); font-weight: 800; font-size: .92rem;
  padding: 0 .75rem; text-decoration: none;
  transition: all var(--t-fast);
}
nav.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li a:hover {
  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);
}
nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
nav.woocommerce-pagination ul li span.dots,
.woocommerce-pagination ul li span.dots {
  background: transparent; border-color: transparent; color: var(--muted);
}

/* ==========================================================================
   12. PAGE HEADERS + CONTENT
   ========================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff; padding: clamp(2rem,1.5rem + 3vw,4rem) 0;
  margin-bottom: clamp(1.5rem,1rem + 2vw,3rem);
}
.page-hero .kicker { display: inline-block; background: var(--yellow); color: var(--blue-dark); padding: .35rem .9rem; border-radius: var(--r-pill); font-size: .7rem; font-weight: 900; text-transform: uppercase; margin-bottom: .75rem; }
.page-hero p { color: #EAF2FF; max-width: 60ch; margin-top: .6rem; }

/*
  Headings carry an explicit dark colour, which does not inherit the white set
  on a dark container — so every light-on-dark block has to restate it or the
  heading renders navy-on-navy. Listed in one place so a new dark section only
  needs adding here.
*/
.page-hero h1, .page-hero h2, .page-hero h3,
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.hero__content h1, .hero__content h2,
.banner h1, .banner h2, .banner h3,
.flash__content h1, .flash__content h2, .flash__content h3,
.scent__content h1, .scent__content h2, .scent__content h3,
.promo-card--blue h2, .promo-card--blue h3, .promo-card--blue h4,
.fcol--blue h2, .fcol--blue h3, .fcol--blue h4,
.mega__promo h3, .mega__promo h4,
.footer-top h3, .site-footer h4 { color: #fff; }

/* The yellow blocks are light backgrounds — those stay dark. */
.promo-card--yellow h2, .promo-card--yellow h3,
.fcol--yellow h2, .fcol--yellow h3,
.fcol--soft h2, .fcol--soft h3 { color: var(--blue-dark); }

.entry-content { max-width: 75ch; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content img { border-radius: var(--r-md); }
.entry-content blockquote { border-left: 4px solid var(--yellow); padding-left: 1.25rem; color: var(--muted); font-style: italic; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }

.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: .6rem; }
.faq summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 900; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: .75rem; color: var(--muted); font-size: .9rem; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer { background: var(--blue-dark); color: #EAF2FF; margin-top: clamp(2.5rem,2rem + 3vw,5rem); }
.site-footer a { color: #EAF2FF; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid {
  display: grid;
  /* Column gap stays tight; row gap only matters once they wrap. */
  gap: clamp(1.75rem, 1rem + 2vw, 2.75rem) 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px,100%),1fr));
  /* The brand block is wider than a link list — give it more room so the
     other four columns are not squeezed to fit its paragraph. */
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  align-items: start;
}
@media (min-width: 1040px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
}
.footer-col h4 {
  color: var(--yellow); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 1rem;
  /* Match the optical height of the brand wordmark opposite it, so all five
     column tops sit on the same line. */
  line-height: 1.9;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { font-size: .9rem; }
.footer-brand .brand { color: #fff; }
.footer-brand p { font-size: .875rem; opacity: .85; margin-top: .75rem; max-width: 34ch; }
.footer-social { display: flex; gap: .5rem; margin-top: 1rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.footer-social a:hover { background: var(--yellow); color: var(--blue-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: space-between; align-items: center;
  font-size: .8rem; opacity: .85;
}
.payment-icons { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.payment-icons span { background: rgba(255,255,255,.12); border-radius: 6px; padding: .3rem .55rem; font-size: .68rem; font-weight: 800; }

/* ==========================================================================
   14. MOBILE BOTTOM BAR
   ========================================================================== */
.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: var(--white); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5,1fr);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone home-indicator gap */
  box-shadow: 0 -6px 24px rgba(16,24,40,.08);
}
@media (min-width: 1024px) { .mobile-bar { display: none; } }
.mobile-bar a { display: grid; place-items: center; gap: 2px; padding: .55rem 0; font-size: .62rem; font-weight: 800; color: var(--muted); position: relative; }
.mobile-bar a span.ico { font-size: 1.15rem; }
.mobile-bar a.is-active { color: var(--blue); }
.mobile-bar .icon-btn__count { top: 2px; right: calc(50% - 22px); }
@media (max-width: 1023px) { body { padding-bottom: 62px; } }

/* ==========================================================================
   15. SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(16,24,40,.6);
  display: grid; place-items: start center;
  padding: clamp(1rem,5vh,4rem) var(--gutter);
  opacity: 0; visibility: hidden; transition: .25s ease;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-panel {
  width: min(680px,100%); background: var(--white);
  border-radius: var(--r-lg); padding: clamp(1.25rem,1rem + 2vw,2.25rem);
  box-shadow: var(--sh-lg); position: relative;
}
.search-panel form { display: flex; gap: .5rem; margin-top: 1rem; }
.search-panel input[type="search"] { flex: 1; }
.search-close { position: absolute; top: .75rem; right: .75rem; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--bg); font-size: 1.3rem; line-height: 1; }
.search-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.search-tags a { background: var(--blue-soft); color: var(--blue); padding: .4rem .8rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; }

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
.only-mobile { display: block; }
@media (min-width: 768px) { .only-mobile { display: none; } }

/* Print — customers do print order confirmations */
@media print {
  .site-header, .site-footer, .mobile-bar, .topbar, .search-overlay { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ==========================================================================
   17. MEGA MENU
   ========================================================================== */
/*
  Specificity matters here: `.primary-nav li { position: relative }` is
  (0,1,1) and would beat a bare `.has-mega` (0,1,0), leaving the panel
  positioned against the ~43px-wide menu item instead of the header.
*/
.primary-nav li.has-mega { position: static; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(11,18,32,.14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  /*
    Visibility is switched, not eased.
    Transitioning `visibility` over the same duration as the fade means the
    panel stays technically visible for the whole exit, and the pointer keeps
    hitting it — which is what made the menu feel like it was sticking. It
    now flips instantly on the way in, and waits for the fade on the way out.
  */
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

.mega__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) var(--gutter);
  display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
  grid-template-columns: 1.1fr 1.2fr 1fr;
}
@media (max-width: 1200px) { .mega__inner { grid-template-columns: 1fr 1fr; } .mega__promo { display: none; } }

.mega h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: .9rem; font-weight: 800;
}
.mega__list { display: grid; gap: .2rem; }
.mega__link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem; border-radius: var(--r-md);
  transition: background var(--t);
}
.mega__link:hover { background: var(--blue-soft); }
.mega__ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--blue-soft);
  display: grid; place-items: center; font-size: 1.15rem;
}
.mega__link:hover .mega__ico { background: var(--yellow); }
.mega__link strong { display: block; font-size: .9rem; color: var(--text); line-height: 1.3; }
.mega__link small { font-size: .75rem; color: var(--muted); font-weight: 600; }

.mega__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mega__chips a {
  background: var(--bg); border: 1px solid var(--line);
  padding: .45rem .8rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700;
  transition: all var(--t);
}
.mega__chips a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.mega__promo {
  border-radius: var(--r-lg); padding: 1.5rem;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,212,0,.85), transparent 46%),
    linear-gradient(140deg, var(--blue-dark), var(--blue));
  color: #fff; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.mega__promo h3 { color: #fff; font-size: 1.35rem; margin: .5rem 0 .5rem; }
.mega__promo p { font-size: .85rem; color: #D6E4FA; margin-bottom: 1rem; }
.mega__promo .btn { align-self: flex-start; margin-top: auto; }

.mega__products { display: grid; gap: .6rem; }
.mega__product {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem; border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: all var(--t);
}
.mega__product:hover { border-color: var(--blue); background: var(--blue-tint); }
.mega__product img, .mega__product svg {
  width: 52px; height: 52px; object-fit: contain; flex-shrink: 0;
  background: var(--blue-tint); border-radius: var(--r-xs);
}
.mega__product strong { display: block; font-size: .85rem; color: var(--text); }
.mega__product span { font-size: .8rem; font-weight: 800; color: var(--blue); }

/* ==========================================================================
   18. SEARCH STRIP
   ========================================================================== */
.search-strip {
  position: relative; z-index: 20;
  max-width: calc(var(--maxw) - 6rem);
  margin: -2.75rem auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(.75rem, .5rem + .8vw, 1.1rem);
  box-shadow: var(--sh-xl);
  display: grid; gap: .6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .search-strip { grid-template-columns: 1.6fr 1fr 1fr auto; align-items: center; } }
.search-strip input, .search-strip select {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .9rem 1.1rem;
  font-weight: 600; font-size: .92rem; width: 100%;
}
.search-strip .btn { min-height: 52px; }

/* ==========================================================================
   19. USP / TRUST BAR
   ========================================================================== */
.usp-bar {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr));
}
.usp {
  display: flex; align-items: center; gap: .85rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.05rem 1.15rem;
  box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) { .usp:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } }
.usp__ico {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--yellow-tint); font-size: 1.35rem;
}
.usp strong { display: block; font-size: .92rem; line-height: 1.3; }
.usp span { font-size: .78rem; color: var(--muted); font-weight: 600; }

/* Scrolling scent marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(.95rem, .85rem + .4vw, 1.2rem);
  color: var(--blue); opacity: .55; white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   20. PROMO CARDS
   ========================================================================== */
.promo-grid { display: grid; gap: clamp(1rem,.6rem + 1.2vw,1.6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .promo-grid { grid-template-columns: 1.35fr 1fr; } }

.promo-card {
  border-radius: var(--r-xl); padding: clamp(1.6rem, 1rem + 2.4vw, 2.9rem);
  display: grid; gap: 1.25rem; align-items: center;
  grid-template-columns: 1fr; min-height: 300px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-lg);
  transition: transform var(--t), box-shadow var(--t);
}
@media (min-width: 560px) { .promo-card { grid-template-columns: 1.15fr .85fr; } }
@media (hover: hover) { .promo-card:hover { transform: translateY(-5px); box-shadow: var(--sh-xl); } }
.promo-card::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  right: -110px; bottom: -140px; background: rgba(255,255,255,.13);
}
.promo-card--blue {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,212,0,.55), transparent 45%),
    linear-gradient(140deg, var(--blue-dark), var(--blue));
  color: #fff;
}
.promo-card--blue h3 { color: #fff; }
.promo-card--blue p { color: #D6E4FA; }
.promo-card--yellow {
  background: linear-gradient(140deg, var(--yellow), var(--yellow-soft));
  color: var(--blue-dark);
}
.promo-card--yellow h3 { color: var(--blue-dark); }
.promo-card--yellow p { color: #4A5568; }
/*
  The button carries `white-space: nowrap`, so in a narrow grid column it was
  wider than its parent and stuck out by 23px at 1024px. Letting the text block
  be its own flex column lets the button size to the space it actually has.
*/
.promo-card__text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
}
.promo-card__text .btn { max-width: 100%; white-space: normal; }
.promo-card h3 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem); margin-bottom: .6rem; }
.promo-card p { margin-bottom: 1.35rem; max-width: 38ch; }
.promo-card__media { position: relative; z-index: 2; display: grid; place-items: center; }
.promo-card__media img, .promo-card__media svg {
  max-height: clamp(150px, 20vw, 240px); width: auto;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.28));
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .promo-card:hover .promo-card__media img,
                        .promo-card:hover .promo-card__media svg { transform: scale(1.07) rotate(-3deg); } }

/* ==========================================================================
   21. FLASH DEALS + COUNTDOWN
   ========================================================================== */
.flash {
  border-radius: var(--r-2xl);
  background:
    radial-gradient(circle at 80% 45%, rgba(255,212,0,.9), transparent 34%),
    linear-gradient(140deg, var(--blue-deep), var(--blue) 70%, var(--blue-mid));
  color: #fff; overflow: hidden; position: relative;
  box-shadow: var(--sh-xl);
  display: grid; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 980px) { .flash { grid-template-columns: 1fr 1.05fr; } }
.flash__content { padding: clamp(1.75rem, 1.2rem + 3vw, 3.75rem); position: relative; z-index: 3; }
.flash__content h2 { color: #fff; margin-bottom: .7rem; }
.flash__content > p { color: #D6E4FA; max-width: 44ch; margin-bottom: 1.6rem; }

.countdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; max-width: 420px; margin-bottom: 1.75rem; }
@media (min-width: 420px) { .countdown { grid-template-columns: repeat(4, 1fr); } }
.countdown__unit { min-width: 0; }
.countdown__unit {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md); padding: .9rem .4rem; text-align: center;
  backdrop-filter: blur(6px);
}
.countdown__num {
  display: block; font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800;
  color: var(--yellow); line-height: 1; margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}
.countdown__label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #B9CCEA; }
.countdown.is-over .countdown__num { color: #9FB4D6; }

.flash__products {
  position: relative; z-index: 2;
  padding: clamp(1rem, .6rem + 2vw, 2.5rem);
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr));
}
.flash__card {
  background: #fff; border-radius: var(--r-lg); padding: 1rem;
  text-align: center; box-shadow: var(--sh-lg);
  transition: transform var(--t);
}
@media (hover: hover) { .flash__card:hover { transform: translateY(-8px) scale(1.02); } }
.flash__card .badge { position: static; display: inline-block; margin-bottom: .6rem; }
.flash__card img, .flash__card svg { height: 130px; width: 100%; object-fit: contain; margin-bottom: .6rem; }
.flash__card h3 { font-size: .92rem; color: var(--blue); margin-bottom: .35rem; }
.flash__price { font-weight: 900; color: var(--text); font-size: 1.05rem; }
.flash__price del { color: var(--muted); font-weight: 600; font-size: .85rem; margin-right: .3rem; }

/* ==========================================================================
   22. FEATURED COLLECTIONS
   ========================================================================== */
.fcol-grid { display: grid; gap: clamp(1rem,.6rem + 1.2vw,1.6rem); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .fcol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fcol-grid { grid-template-columns: 1.25fr 1fr 1fr; } }

.fcol {
  border-radius: var(--r-2xl); padding: clamp(1.5rem,1rem + 1.6vw,2.2rem);
  min-height: 400px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-md);
  transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) { .fcol:hover { transform: translateY(-8px); box-shadow: var(--sh-xl); } }
.fcol::after {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  right: -90px; bottom: -110px; background: rgba(255,255,255,.2);
}
.fcol--blue   { background: linear-gradient(150deg, var(--blue-deep), var(--blue)); color: #fff; }
.fcol--yellow { background: linear-gradient(150deg, var(--yellow), var(--yellow-soft)); color: var(--blue-dark); }
.fcol--soft   { background: linear-gradient(150deg, var(--blue-soft), #fff); color: var(--blue-dark); border: 1px solid var(--line); }
.fcol--blue h3 { color: #fff; }
.fcol--blue p  { color: #D6E4FA; }
.fcol--yellow p, .fcol--soft p { color: #4A5568; }
.fcol__text { position: relative; z-index: 2; }
.fcol__text h3 { font-size: clamp(1.5rem,1.2rem + 1.2vw,2.05rem); margin: .4rem 0 .6rem; }
.fcol__text p { max-width: 34ch; margin-bottom: 1rem; font-size: .92rem; }
.fcol__media { position: relative; z-index: 2; display: grid; place-items: end center; min-height: 180px; }
.fcol__media img, .fcol__media svg {
  max-height: 210px; width: auto;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.22));
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .fcol:hover .fcol__media img, .fcol:hover .fcol__media svg { transform: scale(1.08) rotate(-2deg); } }
.fcol .link-arrow { color: inherit; }

/* ==========================================================================
   22b. PREMIUM BANNER
   --------------------------------------------------------------------------
   The old site's `.premium-banner-section`: a blue panel with a yellow
   sun-glow burning through the top right. The gradient below is the original
   value. What has changed is everything structural — the old one was a fixed
   two-column grid with three absolutely-positioned photos at hard-coded
   percentages, which collapsed into overlap on anything narrower than a
   laptop. This is a normal grid that folds to one column, and the photos are
   a fan that scales rather than three pinned coordinates.
   ========================================================================== */
.premium {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  min-height: 460px;
  background:
    radial-gradient(circle at 80% 30%, rgba(251,255,0,.7), transparent 27%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 55%, var(--yellow) 100%);
  box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .premium { grid-template-columns: 1.05fr .95fr; } }
.premium--textonly { min-height: 0; }
.premium--textonly .premium__content { max-width: 760px; }

.premium__content {
  padding: clamp(1.75rem, 1.2rem + 3vw, 4.4rem);
  color: #fff; position: relative; z-index: 3;
}
.premium__content h2 {
  color: #fff; margin-bottom: .8rem;
  letter-spacing: -.02em;
}
.premium__content p {
  color: #EAF2FF; max-width: 52ch; margin-bottom: 1.6rem; line-height: 1.75;
}

.premium__points {
  display: grid; gap: .6rem; max-width: 520px; margin-bottom: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(140px,100%), 1fr));
}
.premium__points div {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md); padding: 1.1rem;
}
.premium__points strong {
  display: block; color: var(--yellow);
  font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 900; line-height: 1; margin-bottom: .35rem;
}
.premium__points small { font-size: .75rem; font-weight: 800; color: #EAF2FF; }

.premium__images {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.5rem, .2rem + 1.4vw, 1.5rem);
  padding: clamp(1rem, .5rem + 2vw, 2.5rem);
  padding-top: 0;
}
.premium__img { display: block; }
.premium__img img {
  display: block; width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.32));
}
.premium__img.is-main  { width: clamp(120px, 34%, 210px); order: 2; }
.premium__img.is-one   { width: clamp(80px, 24%, 140px); order: 1; transform: rotate(-8deg); }
.premium__img.is-two   { width: clamp(80px, 24%, 140px); order: 3; transform: rotate(8deg); }

@media (prefers-reduced-motion: no-preference) {
  .premium__img.is-main { animation: premiumFloat 4s ease-in-out infinite; }
}
@keyframes premiumFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ==========================================================================
   23. FRAGRANCE EXPERIENCE (scent tabs)
   ========================================================================== */
.scent {
  border-radius: var(--r-2xl); overflow: hidden; position: relative;
  padding: clamp(1.75rem, 1.2rem + 3vw, 4rem);
  display: grid; gap: clamp(1.5rem,1rem + 2vw,3rem); align-items: center;
  grid-template-columns: 1fr;
  color: #fff; box-shadow: var(--sh-xl);
  transition: background .6s var(--ease);
  background: linear-gradient(140deg, var(--blue-deep), var(--blue));
}
@media (min-width: 940px) { .scent { grid-template-columns: 1fr 1fr; min-height: 560px; } }
.scent::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  right: -150px; top: -140px; background: rgba(255,255,255,.1);
}
.scent[data-scent="cherry"]     { background: radial-gradient(circle at 76% 40%, rgba(255,212,0,.7), transparent 40%), linear-gradient(140deg, #7A1020, #C0392B 60%, #E23B3B); }
.scent[data-scent="exotica-ice"]{ background: radial-gradient(circle at 76% 40%, rgba(255,255,255,.6), transparent 40%), linear-gradient(140deg, #0A2B63, #1E6FB8 60%, #4FC3F7); }
.scent[data-scent="strawberry"] { background: radial-gradient(circle at 76% 40%, rgba(255,212,0,.5), transparent 40%), linear-gradient(140deg, #8E1F4B, #D63A6E 60%, #FF6FA0); }
.scent[data-scent="vanilla"]    { background: radial-gradient(circle at 76% 40%, rgba(255,255,255,.6), transparent 40%), linear-gradient(140deg, #7A5A12, #C89B26 60%, #F5D272); }
.scent[data-scent="bubble-gum"] { background: radial-gradient(circle at 76% 40%, rgba(255,255,255,.5), transparent 40%), linear-gradient(140deg, #5B1E7A, #9B45C4 60%, #D96DFF); }
.scent[data-scent="black-x"]    { background: radial-gradient(circle at 76% 40%, rgba(255,212,0,.45), transparent 40%), linear-gradient(140deg, #0B0B0E, #2A2A32 60%, #4A4A57); }
.scent[data-scent="new-car"]    { background: radial-gradient(circle at 76% 40%, rgba(255,212,0,.45), transparent 40%), linear-gradient(140deg, #10233F, #2E5C93 60%, #6D9BD1); }
.scent[data-scent="coconut"]    { background: radial-gradient(circle at 76% 40%, rgba(255,255,255,.55), transparent 40%), linear-gradient(140deg, #6B4E24, #B8894A 60%, #E5C08A); }

.scent__content { position: relative; z-index: 3; }
.scent__content h2 { color: #fff; font-size: clamp(2rem,1.4rem + 2.6vw,3.4rem); margin-bottom: .7rem; }
.scent__content > p { color: rgba(255,255,255,.86); max-width: 46ch; margin-bottom: 1.5rem; font-size: 1.02rem; }
.scent__notes { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; }
.scent__notes span {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  padding: .4rem .85rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px);
}
.scent__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.scent__tab {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.26);
  padding: .65rem 1.1rem; border-radius: var(--r-pill);
  font-weight: 800; font-size: .85rem;
  transition: all var(--t); backdrop-filter: blur(6px);
}
.scent__tab:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }
.scent__tab[aria-selected="true"] { background: var(--yellow); color: var(--blue-dark); border-color: var(--yellow); }

.scent__stage { position: relative; z-index: 3; display: grid; place-items: center; min-height: 320px; }
.scent__stage-inner {
  background: rgba(255,255,255,.97); border-radius: var(--r-2xl);
  padding: 1.6rem; text-align: center; width: min(340px, 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
  animation: scentIn .5s var(--ease-out);
}
@keyframes scentIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.scent__stage img, .scent__stage svg { height: 220px; width: 100%; object-fit: contain; margin-bottom: .9rem; }
.scent__stage h3 { color: var(--blue); font-size: 1.2rem; margin-bottom: .3rem; }
.scent__stage p { color: var(--muted); font-size: .84rem; font-weight: 600; }
.scent__stage .btn { margin-top: 1rem; }

/* ==========================================================================
   24. BUNDLE BUILDER
   ========================================================================== */
.bundle {
  /*
    `overflow: hidden` here was cutting the product list off — 202px of it on
    a phone. The rounded corners do not need clipping because nothing inside
    reaches them, so the box simply grows to fit its contents instead.
  */
  border-radius: var(--r-2xl); position: relative;
  background: linear-gradient(150deg, var(--blue-tint), #fff 55%, var(--yellow-tint));
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 1.1rem + 2.6vw, 3.5rem);
  display: grid; gap: clamp(1.5rem,1rem + 2vw,3rem);
  grid-template-columns: 1fr; align-items: start;
  box-shadow: var(--sh-md);
}
@media (min-width: 940px) { .bundle { grid-template-columns: .95fr 1.05fr; } }

.bundle__benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin: 1.4rem 0; max-width: 400px; }
.bundle__benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem .5rem; text-align: center; }
.bundle__benefit strong { display: block; font-size: 1.4rem; color: var(--blue); line-height: 1; margin-bottom: .25rem; font-family: var(--font-head); }
.bundle__benefit span { font-size: .7rem; font-weight: 800; color: var(--muted); }

.bundle__box {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.1rem,.8rem + 1vw,1.6rem);
  box-shadow: var(--sh-lg);
}
.bundle__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.bundle__head h3 { font-size: 1.15rem; }
.bundle__save { background: var(--green-soft); color: var(--green-text); padding: .35rem .8rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 900; }

/*
  The list scrolls, and the previous version cut the next row dead in half at
  the bottom edge — which reads as a rendering fault rather than as "there is
  more below". The mask fades the last few pixels out so the cut is obviously
  a scroll edge, and it lifts once you reach the end.
*/
.bundle__items {
  /* 372px lands mid-way through the fifth row rather than flush after the
     fourth, so the fade sits over a visible sliver of the next product and
     the list obviously continues instead of just looking finished. */
  display: grid; gap: .55rem; max-height: 372px; overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .35rem; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.bundle__items.is-scrolled-end {
  -webkit-mask-image: none;
          mask-image: none;
}
/* On a phone a nested scroll area inside a scrolling page is a trap — the
   list steals the swipe. Let it run full length instead. */
@media (max-width: 700px) {
  .bundle__items {
    max-height: none; overflow-y: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.bundle__items::-webkit-scrollbar { width: 6px; }
.bundle__items::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.bundle__item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: all var(--t);
}
.bundle__item.is-picked { border-color: var(--blue); background: var(--blue-tint); }
.bundle__item img, .bundle__item svg { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; background: var(--blue-tint); border-radius: var(--r-xs); }
.bundle__item-info { flex: 1; min-width: 0; }
.bundle__item-info h4 { font-size: .85rem; line-height: 1.3; }
.bundle__item-info span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.bundle__qty { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.bundle__qty button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff;
  font-weight: 900; color: var(--blue); line-height: 1;
  display: grid; place-items: center;
  transition: all var(--t-fast);
}
.bundle__qty button:hover:not(:disabled) { background: var(--blue); color: #fff; border-color: var(--blue); }
.bundle__qty button:disabled { opacity: .35; cursor: not-allowed; }
.bundle__qty output { min-width: 22px; text-align: center; font-weight: 900; font-size: .9rem; font-variant-numeric: tabular-nums; }

.bundle__total { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.bundle__total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; font-size: .88rem; color: var(--muted); }
.bundle__total-row.is-grand { font-size: 1.05rem; color: var(--text); font-weight: 800; margin-top: .5rem; }
.bundle__total-row.is-grand output { font-size: 1.6rem; color: var(--blue); font-family: var(--font-head); font-weight: 800; }
.bundle__total-row.is-save { color: var(--green-text); font-weight: 800; }
.bundle__hint { font-size: .78rem; color: var(--muted); text-align: center; margin-top: .6rem; }

/* ==========================================================================
   25. INSTAGRAM GRID
   ========================================================================== */
.insta-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(150px,45%), 1fr)); }
.insta {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md);
  overflow: hidden; background: var(--blue-tint); display: block;
}
.insta img, .insta svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.insta__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,60,136,.82), rgba(15,60,136,.15));
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: .82rem;
  opacity: 0; transition: opacity var(--t);
}
@media (hover: hover) {
  .insta:hover img, .insta:hover svg { transform: scale(1.08); }
  .insta:hover .insta__overlay { opacity: 1; }
}

/* ==========================================================================
   26. DEALER LOCATOR / WHOLESALE
   ========================================================================== */
.dealer {
  display: grid; gap: clamp(1.5rem,1rem + 2vw,3rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .dealer { grid-template-columns: 1fr 1fr; } }
.dealer__search { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0; }
.dealer__search input { flex: 1 1 220px; min-width: 0; padding: .9rem 1.15rem; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; }
.dealer__search input::placeholder { color: rgba(255,255,255,.6); }
.dealer__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; max-width: 420px; }
.dealer__stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-md); padding: 1rem .5rem; text-align: center; }
.dealer__stat strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--yellow); line-height: 1; margin-bottom: .25rem; }
.dealer__stat span { font-size: .7rem; font-weight: 800; color: #B9CCEA; }

.dealer__map {
  border-radius: var(--r-2xl); overflow: hidden; position: relative;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  aspect-ratio: 4/3; display: grid; place-items: center; padding: 1.5rem;
  text-decoration: none; transition: transform var(--t), box-shadow var(--t);
}
.dealer__map:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }

/* Artwork variant: the picture fills the panel, the label floats on it. */
.dealer__map--art { padding: 0; }
.dealer__map--art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.dealer__map-cta {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 2; white-space: nowrap;
  padding: .62rem 1.15rem; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--blue);
  font-size: .8rem; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.dealer__pin {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 0 rgba(255,212,0,.6);
  animation: pin 2.6s ease-out infinite;
}
@keyframes pin { 70% { box-shadow: 0 0 0 16px rgba(255,212,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,212,0,0); } }
@media (prefers-reduced-motion: reduce) { .dealer__pin { animation: none; } }

/* ==========================================================================
   27. JOURNAL / BLOG CARDS
   ========================================================================== */
.post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t); }
@media (hover: hover) { .post-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } }
.post-card__media { aspect-ratio: 16/10; background: var(--blue-tint); overflow: hidden; }
.post-card__media img, .post-card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
@media (hover: hover) { .post-card:hover .post-card__media img { transform: scale(1.06); } }
.post-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--green-text); margin-bottom: .5rem; }
.post-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.post-card p { font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.post-card .link-arrow { margin-top: auto; }

/* ==========================================================================
   28. STEPS / HOW IT WORKS
   ========================================================================== */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%),1fr)); counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.2rem 1.35rem 1.35rem; box-shadow: var(--sh-xs); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 1.35rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(24,82,165,.3);
}
.step:nth-child(even)::before { background: var(--yellow); color: var(--blue-dark); box-shadow: 0 6px 16px rgba(255,212,0,.4); }
.step h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.step p { font-size: .88rem; color: var(--muted); }

/* ==========================================================================
   29. TIMELINE (about page)
   ========================================================================== */
.timeline { position: relative; display: grid; gap: 1.5rem; padding-left: 2.25rem; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--blue), var(--yellow)); border-radius: 2px; }
.timeline__item { position: relative; }
.timeline__item::before {
  content: ""; position: absolute; left: -2.25rem; top: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 4px solid var(--blue);
}
.timeline__item:last-child::before { border-color: var(--yellow); }
.timeline__year { font-family: var(--font-head); font-weight: 800; color: var(--blue); font-size: 1.1rem; }
.timeline__item h3 { font-size: 1.05rem; margin: .2rem 0 .35rem; }
.timeline__item p { font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   30. FRAGRANCE GUIDE
   ========================================================================== */
.fg-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); }
.fg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform var(--t), box-shadow var(--t); display: flex; flex-direction: column; }
@media (hover: hover) { .fg-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); } }
.fg-card__swatch { height: 96px; position: relative; display: grid; place-items: center; font-size: 2.2rem; }
/* A darker family needs the same visual weight as a bright one, so every
   swatch gets the same soft top highlight regardless of its base colour. */
.fg-card__swatch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%);
}
.fg-card__swatch > * { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)); }
/*
  A one-line description and a three-line one used to push their "Shop N
  products" buttons to different heights, so a row of cards looked ragged.
  The body is a column and the button takes the slack, which pins every CTA
  in a row to the same baseline no matter how long the copy is.
*/
.fg-card__body { padding: 1.15rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.fg-card__body > .btn { margin-top: auto; }
.fg-card h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.fg-card p { font-size: .86rem; color: var(--muted); margin-bottom: .8rem; }
.fg-card__notes { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }
.fg-card__notes span { background: var(--bg); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; color: var(--body); }

/* ==========================================================================
   31. HORIZONTAL SCROLLER
   ========================================================================== */
.scroller { position: relative; }
.scroller__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: clamp(.85rem,.4rem + 1.3vw,1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: .75rem;
  scrollbar-width: thin;
}
@media (min-width: 1100px) { .scroller__track { grid-auto-columns: minmax(260px, 1fr); } }
.scroller__track > * { scroll-snap-align: start; }
.scroller__track::-webkit-scrollbar { height: 6px; }
.scroller__track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.scroller__nav { display: none; gap: .4rem; }
@media (min-width: 900px) { .scroller__nav { display: flex; } }
.scroller__nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; color: var(--blue);
  font-size: 1.1rem; display: grid; place-items: center;
  box-shadow: var(--sh-xs); transition: all var(--t);
}
.scroller__nav button:hover:not(:disabled) { background: var(--blue); color: #fff; border-color: var(--blue); }
.scroller__nav button:disabled { opacity: .35; cursor: not-allowed; }

/* ==========================================================================
   32. CONTACT / WHOLESALE FORMS
   ========================================================================== */
.contact-layout { display: grid; gap: clamp(1.5rem,1rem + 2vw,3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: 1.2fr .8fr; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.25rem,1rem + 1.4vw,2.25rem); box-shadow: var(--sh-md); }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); margin-bottom: 1rem; }
.field label { display: block; font-weight: 800; font-size: .82rem; margin-bottom: .35rem; color: var(--text); }
.field small { display: block; font-size: .75rem; color: var(--muted); margin-top: .3rem; }

.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; display: flex; gap: .9rem; align-items: flex-start; box-shadow: var(--sh-xs); }
.info-card__ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--blue-soft); display: grid; place-items: center; font-size: 1.2rem; }
.info-card strong { display: block; margin-bottom: .2rem; }
.info-card p, .info-card a { font-size: .88rem; color: var(--muted); }
.info-card a:hover { color: var(--blue); }

/* ==========================================================================
   33. FINAL TRUST BAR
   ========================================================================== */
.trust-bar {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr));
  text-align: center;
}
.trust-bar__item { padding: 1.25rem .75rem; }
.trust-bar__ico { font-size: 1.9rem; margin-bottom: .6rem; display: block; }
.trust-bar__item strong { display: block; margin-bottom: .25rem; font-size: .98rem; }
.trust-bar__item span { font-size: .82rem; color: var(--muted); }
.section--dark .trust-bar__item span { color: #B9CCEA; }

/* ==========================================================================
   34. CARD TOOLS — WISHLIST + COMPARE
   ========================================================================== */
.card__tools {
  position: absolute; top: .8rem; right: .8rem; z-index: 4;
  display: grid; gap: .35rem;
}
.wish-btn, .compare-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.92);
  color: var(--muted); font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: all var(--t-fast); cursor: pointer;
}
.wish-btn:hover { color: var(--red); border-color: var(--red); transform: scale(1.08); }
.wish-btn.is-on { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.compare-btn:hover { color: var(--blue); border-color: var(--blue); transform: scale(1.08); }
.compare-btn.is-on { color: #fff; border-color: var(--blue); background: var(--blue); }

/*
  The compare control only earns its place once there is room for it. On a
  phone the cards are already tight and two stacked circles crowd the product
  shot, so it drops out and the heart carries on alone.
*/
@media (max-width: 600px) { .compare-btn { display: none; } }

/* ==========================================================================
   34b. SAVED LISTS — WISHLIST PAGE + COMPARE TABLE
   ========================================================================== */
.saved-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(250px,100%), 1fr));
}
.saved-card {
  position: relative; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem;
  box-shadow: var(--sh-sm);
}
.saved-card img {
  display: block; width: 100%; height: 200px; object-fit: contain;
  margin: .5rem auto 1.25rem;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.14));
}
.saved-card__noimg {
  height: 200px; margin: .5rem 0 1.25rem;
  border-radius: var(--r-md); background: var(--blue-tint);
}
.saved-card small {
  color: var(--green-text); font-size: .7rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em;
}
.saved-card h3 { color: var(--blue); font-size: 1.15rem; margin: .5rem 0; }
.saved-card strong {
  display: block; color: var(--green-text); font-size: 1.4rem;
  font-family: var(--font-head); font-weight: 900; margin-bottom: 1rem;
}
.saved-card__remove {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  color: var(--muted); font-size: 1.25rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: all var(--t-fast);
}
.saved-card__remove:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

.saved-empty {
  text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1.25rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-xs);
}
.saved-empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.25rem; }
.saved-noscript {
  margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--r-md);
  background: var(--yellow-tint); border: 1px solid var(--line);
  color: var(--body); font-size: .9rem;
}
.saved-list[aria-busy="true"] { opacity: .55; }

/*
  The compare table is the one place a horizontal scroll is the right answer
  rather than a bug: four product columns cannot usefully reflow into one
  column on a phone, because the whole point is reading across a row. The
  scroll is contained here so it never becomes a sideways scroll of the page.
*/
.compare-table {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md);
}
.compare-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.compare-row {
  display: grid; min-width: 780px;
  grid-template-columns: 180px repeat(auto-fit, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row > div {
  padding: 1.25rem; border-right: 1px solid var(--line);
  color: var(--body); font-weight: 700; font-size: .92rem;
}
.compare-row > div:last-child { border-right: 0; }
.compare-row > div:first-child {
  color: var(--blue); font-weight: 900; background: var(--bg);
}
.compare-head > div { text-align: center; position: relative; }
.compare-head img {
  display: block; height: 170px; width: 100%; object-fit: contain;
  margin: 0 auto 1rem; filter: drop-shadow(0 18px 24px rgba(0,0,0,.16));
}
.compare-head h3 { color: var(--blue); font-size: 1.05rem; }
.compare-row strong {
  color: var(--green-text); font-size: 1.35rem;
  font-family: var(--font-head); font-weight: 900;
}
.compare-actions > div { padding: 1.25rem; }

/* ==========================================================================
   35. FOOTER EXTRAS
   ========================================================================== */
.footer-top {
  border-bottom: 1px solid rgba(255,255,255,.12);
  /* Was too tight — the signup and the link columns read as one crowded
     block instead of two separate things. */
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: 1fr;
}
/*
  The homepage ends with a full newsletter section, so the footer signup
  landed directly beneath it — the same ask twice, back to back. Keep the
  footer one everywhere else, where it is the only one on the page.
*/
.home .footer-top { display: none; }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.1fr .9fr; } }
.footer-top h3 { color: #fff; font-size: clamp(1.2rem,1rem + 1vw,1.7rem); margin-bottom: .3rem; }
.footer-top p { color: #B9CCEA; font-size: .9rem; }
.footer-newsletter { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-newsletter input {
  flex: 1 1 200px; min-width: 0; padding: .9rem 1.15rem;
  border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.55); }

/* ==========================================================================
   36. OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, which lets long words,
   wide tables and fixed-width children push a whole page sideways. These
   guards are what keep the layout honest at 320px.
   ========================================================================== */
.grid > *, .plans > *, .steps > *, .usp-bar > *, .promo-grid > *,
.fcol-grid > *, .fg-grid > *, .insta-grid > *, .stats > *,
.trust-bar > *, .bundle > *, .dealer > *, .contact-layout > *,
.form-row > *, .scent > *, .flash > *, .footer-grid > * { min-width: 0; }

.hero__content, .flash__content, .scent__content,
.promo-card__text, .fcol__text { min-width: 0; }

/* Long product names and URLs must wrap rather than widen their container. */
.card__title, .card__title a, .mega__link strong, .bundle__item-info h4,
.info-card a, .entry-content a { overflow-wrap: anywhere; }

/*
  Name length is a layout problem, and it gets a layout answer.

  These two lists used to be shortened in PHP with `wp_trim_words( $name, 5 )`,
  which cut "Palm Tree Hanging — Black Leather" down to "Palm Tree Hanging —
  Black" — a product that does not exist, at a price that belongs to something
  else. A shopper reads that as fact. Clamping to two lines here keeps the row
  the same height while the true name stays in the markup, so search engines
  and screen readers still get all of it.
*/
.bundle__item-info h4,
.mega__link strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==========================================================================
   37. HIDDEN ATTRIBUTE
   `[hidden]` only sets `display:none` at user-agent priority, so ANY author
   rule with a display value silently defeats it. Scripts that toggle
   `el.hidden = true` then appear to do nothing. This makes it reliable.
   ========================================================================== */
[hidden] { display: none !important; }

/* Fixed-size thumbnails must not be stretched by a parent grid or flex row. */
.bundle__item > img, .bundle__item > svg,
.mega__product > img, .mega__product > svg {
  width: 52px; height: 52px; flex: 0 0 52px;
  object-fit: contain;
}

/* ==========================================================================
   36. TOUCH TARGETS
   ========================================================================== */
/*
  Anything tappable needs roughly a fingertip of room. The audit found a
  "Contact us" link at 23px tall and a 13px checkbox — both easy to miss and
  frustrating to hit. Applied only on touch-sized screens so the desktop
  layout keeps its tighter rhythm.
*/
@media (max-width: 700px) {
  .link-arrow,
  .widget ul a,
  .footer-col a,
  .mega__chips a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    accent-color: var(--blue);
  }

  /* Give the label around a checkbox a full-height hit area. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .payment-option,
  .shipping-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
}

/* ==========================================================================
   99. PREMIUM PASS
   --------------------------------------------------------------------------
   The brief was "make it feel more expensive without losing the identity".
   Expensive is not more decoration — it is fewer decisions, more air, and
   letting the product be the only saturated thing on the screen.

   Three changes carry most of it:

   1. Product surfaces go neutral. Every card sat on a blue radial gradient,
      so a yellow Exotica pack was fighting a blue halo on every tile. A near
      white surface makes the packaging read as the brand colour instead of
      competing with it.
   2. More air. Cards and sections were tight; generous padding is the single
      cheapest signal of a considered layout.
   3. Quieter chrome. Lighter borders, softer shadows, one weight of emphasis
      rather than three.

   Kept intentionally: the blue and yellow, the type, the rounded geometry.
   The identity does not change — only the volume it is played at.
   ========================================================================== */

:root {
  --surface: #FAFBFD;   /* what a product sits on */
}

.card {
  border-color: #ECF0F6;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
}
@media (hover: hover) {
  .card:hover { box-shadow: 0 18px 40px rgba(11,18,32,.10); }
}
.card__media,
.tile__media {
  background: var(--surface);
  border: 1px solid #EFF2F7;
}
.card__media img { padding: 11%; }

.card__body,
.card > .card__body { padding-inline: .15rem; }

/* One emphasis per card: the name. The eyebrow steps back. */
.card__cat { color: var(--muted); font-weight: 700; letter-spacing: .06em; }

/* Sections breathe. */
.section { padding-block: clamp(3rem, 2rem + 4.5vw, 6.5rem); }
.section-title { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.section-title p { max-width: 58ch; margin-inline: auto; }

/* The fragrance tiles were the loudest thing on the page for the least
   important reason — a coloured gradient behind an emoji. */
.frag { background: var(--white); border: 1px solid #ECF0F6; }
.frag__icon { background: var(--surface); }

/* Product page: the same neutral surface, so the grid and the detail page
   look like the same shop. */
.woocommerce div.product div.images img { background: var(--surface); }

/* ==========================================================================
   100. CAROUSEL + GRID CORRECTIONS
   ========================================================================== */

/*
  Arrows belong on the row, not in the heading.

  The JS was pinning the pair at `top: -3.6rem; right: 0`, which put them on
  top of the "View all" button in the section header — two round buttons
  overlapping a pill, all three half-covering each other. Moved onto the track
  itself, vertically centred on the cards, which is also where a hand expects
  to find them.
*/
.scroller__nav {
  position: absolute; inset: 0;
  pointer-events: none;
  display: none;
}
@media (min-width: 900px) { .scroller__nav { display: block; } }
.scroller__nav button {
  position: absolute;
  top: 38%;
  pointer-events: auto;
  box-shadow: 0 6px 20px rgba(11,18,32,.14);
}
.scroller__nav button[data-dir="-1"] { left: -14px; }
.scroller__nav button[data-dir="1"]  { right: -14px; }

/*
  No scrollbar under the row.

  Snap scrolling already moves a card at a time on drag, trackpad and arrow
  key; the grey bar underneath only advertised that this was a scrolling div.
*/
.scroller__track {
  scrollbar-width: none;
  padding-bottom: .35rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.scroller__track::-webkit-scrollbar { display: none; }

/*
  Even rows for the fragrance grid.

  `auto-fit` gave seven tiles on the first row and five on the second, leaving
  a hole the width of two tiles at the end. Fixed column counts mean twelve
  scents always divide cleanly.
*/
#fragrances .grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { #fragrances .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { #fragrances .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { #fragrances .grid { grid-template-columns: repeat(6, 1fr); } }

/* ==========================================================================
   102. CARD RHYTHM
   ========================================================================== */

/*
  Reserve two lines for the product name.

  "Elegant Big Bottle – CK1" fits on one line and "Elegant Big Bottle – Cool
  Breeze" needs two, so along a row of four the eyebrow, the title and the
  price all sat at different heights. Nothing is misaligned enough to point at,
  which is exactly why it reads as sloppy rather than broken. Holding two lines
  whatever the name length makes every card in a row identical.
*/
.card__title {
  min-height: calc(2 * 1.35em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.card__eyebrow { min-height: 1.1em; display: block; }

/* ==========================================================================
   40. SHOP — REBUILT
   --------------------------------------------------------------------------
   The old shop styling was six rounds of patches stacked on each other, each
   one fighting the last, and the result behaved differently on every page. All
   of it is gone. This is the whole shop in one place, written once.

   The shape: the products get the full width of the page, and the filters live
   in a drawer behind a button. No side column means no column to lose — which
   is what kept breaking — and a 157-product grid reads far better across the
   full width anyway.
   ========================================================================== */

/* --- Layout ------------------------------------------------------------- */
.shop-layout { display: block; }
.shop-main   { width: 100%; min-width: 0; }

/* --- Toolbar ------------------------------------------------------------ */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  padding: 0 0 1.15rem;
  margin: 0 0 1.75rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.shop-toolbar__end { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.woocommerce-result-count { color: var(--muted); font-size: .875rem; margin: 0; font-weight: 600; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select, .shop-toolbar select {
  padding: .55rem 2rem .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-weight: 700; font-size: .85rem; color: var(--text);
  cursor: pointer;
}

.filter-toggle {
  display: inline-flex !important; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem;
  font-size: .85rem; font-weight: 800;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--white); color: var(--text);
}
.filter-toggle:hover { border-color: var(--blue); color: var(--blue); }
.filter-toggle::before { content: "☰"; font-size: .85em; }

/* --- Product grid ------------------------------------------------------- */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
}

/* --- Filters drawer ----------------------------------------------------- */
/*
  Fixed, so it is not part of any layout that another stylesheet can rearrange.
  It has no siblings to overlap and no track to be spanned across.
*/
.shop-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(370px, 90vw);
  z-index: 140;
  display: block;
  background: var(--white);
  padding: 1.25rem 1.25rem 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -24px 0 70px rgba(11,18,32,.22);
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
  visibility: hidden;
}
.shop-sidebar.is-open { transform: none; visibility: visible; }

.shop-filters-backdrop {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(11,18,32,.42);
  border: 0; padding: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  cursor: pointer;
}
.shop-filters-backdrop.is-open { opacity: 1; visibility: visible; }

.shop-sidebar__close {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: .1rem 0 .9rem;
  margin-bottom: 1.1rem;
  background: var(--white);
  border: 0; border-bottom: 1px solid var(--line);
  font: inherit; font-size: 1rem; font-weight: 900; color: var(--text);
  cursor: pointer;
}
.shop-sidebar__close span:last-child { font-size: 1.5rem; line-height: 1; color: var(--muted); }

/* --- Everything inside the drawer -------------------------------------- */
.shop-sidebar .widget,
.shop-sidebar > [class*="wc-block-product-filter"],
.shop-sidebar .wp-block-woocommerce-product-filters > * {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 1.1rem;
  margin: 0 0 1.1rem;
  max-width: 100%;
}
.shop-sidebar .wp-block-woocommerce-product-filters { display: block; }

.shop-sidebar .widget-title,
.shop-sidebar [class*="wc-block-product-filter"] h2,
.shop-sidebar [class*="wc-block-product-filter"] h3 {
  font-size: .75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 .75rem;
}

/* Lists: name left, count right, one line, children indented. */
.shop-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.shop-sidebar li,
.shop-sidebar [class*="checkbox-list__item"] {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem;
  padding: .3rem 0;
}
.shop-sidebar li > a {
  flex: 1 1 auto; min-width: 0;
  font-size: .9rem; color: var(--body); font-weight: 600;
}
.shop-sidebar li > a:hover { color: var(--blue); }
.shop-sidebar .count,
.shop-sidebar [class*="__count"] {
  flex: 0 0 auto;
  font-size: .75rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.shop-sidebar li > ul {
  flex: 1 0 100%;
  margin: .2rem 0 .2rem .2rem;
  padding-left: .85rem;
  border-left: 2px solid var(--line);
}

.shop-sidebar input[type="checkbox"] {
  width: 17px; height: 17px; flex: 0 0 auto;
  accent-color: var(--blue); cursor: pointer;
}
.shop-sidebar [class*="checkbox-list__label"] {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; width: 100%; cursor: pointer;
}
.shop-sidebar [class*="checkbox-list__text"] { font-size: .9rem; color: var(--body); font-weight: 600; }

.shop-sidebar [class*="show-more"],
.shop-sidebar [class*="show-less"] {
  background: none; border: 0; padding: .5rem 0 0;
  font-size: .8rem; font-weight: 800; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.shop-sidebar [class*="removable-chips"] { display: flex; flex-wrap: wrap; gap: .4rem; }
.shop-sidebar [class*="removable-chips"] li {
  background: var(--blue-soft); color: var(--blue);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
  font-size: .78rem; font-weight: 800;
}
.shop-sidebar [class*="clear-button"] {
  display: block; width: 100%; text-align: center;
  padding: .55rem 1rem; margin-top: .6rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: none; font-size: .82rem; font-weight: 800; color: var(--body);
  cursor: pointer;
}
.shop-sidebar [class*="clear-button"]:hover { border-color: var(--blue); color: var(--blue); }

.shop-sidebar input[type="range"] { accent-color: var(--blue); width: 100%; }
.shop-sidebar input[type="text"],
.shop-sidebar input[type="number"] {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .4rem .55rem; font-size: .85rem; width: 100%;
}

/* --- Card presentation -------------------------------------------------- */
/*
  Four across at most.

  `minmax(250px, 1fr)` gave five columns on a wide screen and the cards came
  out narrow enough that the picture was a postage stamp and the price and the
  button were shoulder to shoulder. A shop selling a $2 product still has to
  look like it values it.
*/
@media (min-width: 1100px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The picture gets a square of its own, whatever shape the photograph is. */
.woocommerce ul.products li.product .card__media,
.card__media {
  aspect-ratio: 1 / 1 !important;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.woocommerce ul.products li.product .card__media img,
.card__media img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: 10%;
}

/*
  Price above, button below and full width.

  Side by side, the button crowded the price and both were squeezed into
  whatever was left of a narrow card. Stacked, the price is read first — which
  is the order a shopper actually wants — and the button becomes a proper
  target instead of a sliver.
*/
.card__foot {
  display: grid;
  grid-template-columns: 1fr;   /* an explicit track, so the button can stretch */
  gap: .6rem;
  margin-top: auto;
  padding-top: .85rem;
}
.card__price { font-size: 1.3rem; line-height: 1; }
.card__foot .btn,
.card__foot .button,
.card__foot a.button,
.card__foot .add_to_cart_button {
  display: flex !important;
  width: 100% !important;
  justify-self: stretch;
  justify-content: center;
  padding-inline: .75rem;
  white-space: normal;
}

/* ==========================================================================
   41. MINIMUM ORDER
   ========================================================================== */
/*
  Said at the top of the cart, as distance remaining rather than a refusal.
  Finding out at the checkout button that the basket is too small is where
  people give up; "$4.50 away" reads as one more item, "minimum not met" reads
  as go somewhere else.
*/
.min-order {
  display: grid; gap: .6rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  background: var(--yellow-tint);
  border: 1px solid var(--yellow-soft);
  border-radius: var(--r-md);
}
.min-order p { margin: 0; font-size: .9rem; font-weight: 700; color: var(--text); }
.min-order p .amount { color: var(--blue); }
.min-order__bar {
  height: 6px; border-radius: 3px;
  background: rgba(11,18,32,.08);
  overflow: hidden;
}
.min-order__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-mid));
  border-radius: 3px;
  transition: width .4s var(--ease-out, ease);
}
.min-order.is-met {
  background: var(--green-soft);
  border-color: #BFE9CC;
}
.min-order.is-met .min-order__bar span { background: var(--green); }
.min-order.is-met p { color: var(--green-text); }

/* Alcohol-based sprays: said on the product page, not at the checkout. */
.ships-us-only {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .75rem 0 0;
  padding: .7rem .9rem;
  background: var(--yellow-tint);
  border: 1px solid var(--yellow-soft);
  border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 600; color: var(--body);
}
.ships-us-only::before { content: "✈"; opacity: .55; }

/* Display stands: list price struck through beside the display price. */
.display-price { display: inline-flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.display-price del { color: var(--muted); font-weight: 700; font-size: .8em; text-decoration-thickness: 1px; }
.display-price ins { text-decoration: none; color: var(--blue); font-weight: 900; }
.display-price small {
  font-size: .68em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-text); background: var(--green-soft);
  padding: .2rem .45rem; border-radius: var(--r-pill);
}

/* ==========================================================================
   42. DISPLAY STAND BUILDER
   ========================================================================== */
.display-builder {
  margin: 1.25rem 0;
  padding: 1.15rem;
  background: var(--surface);
  border: 1px solid #E7ECF4;
  border-radius: var(--r-lg);
}
.display-builder__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .8rem;
}
.display-builder__head strong { display: block; font-size: .98rem; }
.display-builder__head span { font-size: .82rem; color: var(--muted); }
.display-builder__count {
  font-size: .95rem; font-weight: 800; color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.display-builder__count b { font-size: 1.35rem; color: var(--blue); }

.display-builder__bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(11,18,32,.08);
  margin-bottom: .9rem;
}
.display-builder__bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-mid));
  transition: width .25s ease;
}
.display-builder.is-complete .display-builder__bar span { background: var(--green); }
.display-builder.is-complete .display-builder__count b { color: var(--green-text); }
.display-builder.is-over .display-builder__bar span { background: var(--red); }
.display-builder.is-over .display-builder__count b { color: var(--red); }

.display-builder__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .1rem;
  max-height: 21rem; overflow-y: auto;
  scrollbar-width: thin;
}
.display-builder__list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .35rem 0;
  border-bottom: 1px solid #EEF2F7;
}
.display-builder__list li:last-child { border-bottom: 0; }
.display-builder__name { font-size: .88rem; font-weight: 600; color: var(--body); min-width: 0; }

.display-builder__step { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.display-builder__step button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--white);
  color: var(--blue); font-size: 1rem; font-weight: 800; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.display-builder__step button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.display-builder__step input {
  width: 46px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .3rem 0; font-size: .9rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* the spinners fight the +/- buttons for the same job */
  -moz-appearance: textfield; appearance: textfield;
}
.display-builder__step input::-webkit-outer-spin-button,
.display-builder__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.display-builder__msg {
  margin: .8rem 0 0; font-size: .84rem; font-weight: 700; color: var(--muted);
}
.display-builder.is-complete .display-builder__msg { color: var(--green-text); }
.display-builder.is-over .display-builder__msg { color: var(--red); }

.display-fixed {
  margin: 1rem 0; padding: .8rem 1rem;
  background: var(--blue-tint); border: 1px solid var(--blue-soft);
  border-radius: var(--r-md);
  font-size: .86rem; font-weight: 600; color: var(--body);
}

/* --- The chooser inside the add-to-cart form ---------------------------- */
/*
  `form.cart` is a flex row with `align-items: stretch`, which is right for a
  quantity box beside a button — and wrong the moment a tall block joins them.
  The chooser became a flex item, so the button stretched to match its height
  and came out as a purple column half the page tall.

  The chooser takes its own full-width row; the quantity and the button keep
  theirs underneath, at their own height.
*/
.woocommerce div.product form.cart { align-items: center; }
.woocommerce div.product form.cart .display-builder,
.woocommerce div.product form.cart .display-fixed {
  flex: 1 0 100%;
  width: 100%;
  margin: 0 0 .35rem;
}
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .single_add_to_cart_button {
  align-self: center;
  height: auto;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 0 1 auto;
  min-height: 50px;
}

/* A disabled Add to cart has to look disabled, or it reads as broken. */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.is-disabled {
  background: var(--line-2);
  color: #546072;
  cursor: not-allowed;
  transform: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover {
  background: var(--line-2); transform: none;
}

/* ==========================================================================
   43. NOTICES + ADD-TO-CART TOAST
   ========================================================================== */

/*
  WooCommerce paints its own round icon with `::before` and positions it over
  the start of the text, so "Please choose..." rendered as "P!ease choose...".
  Its own stylesheet expects a left padding this theme does not use. Rather
  than guess at the offset, the icon is dropped and the message is laid out as
  a flex row with a mark of our own.
*/
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex; align-items: flex-start; gap: .65rem;
  padding-left: 1.15rem;
}
.woocommerce-message::first-letter,
.woocommerce-error::first-letter { text-transform: none; }

.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }

/* --- Toast ---------------------------------------------------------------
   Adding to the basket used to reload the page and throw the shopper back to
   the top, away from the thing they were looking at. The item did land in the
   cart, but nothing said so at the point of the click — so people click again.
   The toast says it where the click happened, and the page does not move.
   ------------------------------------------------------------------------ */
.exo-toasts {
  position: fixed; z-index: 200;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  display: grid; gap: .5rem;
  width: min(340px, calc(100vw - 1.5rem));
  pointer-events: none;
}
.exo-toast {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .9rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  box-shadow: 0 18px 45px rgba(11,18,32,.18);
  font-size: .88rem; font-weight: 700; color: var(--text);
  pointer-events: auto;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.exo-toast.is-in { opacity: 1; transform: none; }
.exo-toast--error { border-left-color: var(--red); }
.exo-toast__icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.35; }
.exo-toast__body { min-width: 0; }
.exo-toast__body a {
  display: inline-block; margin-top: .25rem;
  color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: 3px;
}
.exo-toast__close {
  margin-left: auto; flex: 0 0 auto;
  background: none; border: 0; padding: 0 .1rem;
  font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer;
}

/* The button says what it is doing while the request is in the air. */
.single_add_to_cart_button.is-busy { opacity: .75; pointer-events: none; }

/* --- Search inside the filters drawer ----------------------------------- */
.shop-sidebar__search {
  display: flex; gap: .4rem; align-items: center;
  margin-bottom: 1.1rem;
}
.shop-sidebar__search input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .88rem; background: var(--white);
}
.shop-sidebar__search input[type="search"]:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; }
.shop-sidebar__search button {
  flex: 0 0 auto; width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--white); cursor: pointer; font-size: .9rem;
}
.shop-sidebar__search button:hover { background: var(--blue); border-color: var(--blue); }

.shop-sidebar__find {
  width: 100%;
  margin: 0 0 .55rem;
  padding: .45rem .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .82rem; background: var(--white);
}
.shop-sidebar__find:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; }

/* Say so when the narrowing finds nothing, rather than showing a blank gap. */
.shop-sidebar ul.is-empty::after {
  content: "No match in this list.";
  display: block; padding: .5rem 0;
  font-size: .82rem; color: var(--muted);
}

/* --- Hero: a lead product and a companion ------------------------------- */
/*
  Both shots sit in the same grid cell so they overlap deliberately rather
  than sharing the width. The palm keeps the centre and the full size; the
  companion is smaller, pushed to the lower right, and floats on its own
  rhythm so the pair does not bob in lockstep like a single image.
*/
.hero__shot { grid-area: 1 / 1; display: grid; place-items: center; }

.hero__shot--lead { z-index: 2; }

/*
  Smaller, to the left, and in FRONT.
  
  At 45% of the palm and tucked behind it, the gel read as a second hero rather
  than a supporting shot — and half of it was hidden, which just looked like a
  mistake. A third of the height, offset to the lower left, and layered on top
  makes the relationship obvious: one product, one prop.
*/
.hero__shot--second {
  z-index: 3;
  /* Low and out to the side, so it reads as supporting the palm rather
     than crowding it in the middle of the frame. */
  transform: translate(-96%, 64%);
}
.hero__shot--second img {
  max-height: clamp(72px, 10vw, 132px);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.38));
  animation-duration: 5.2s;
  animation-delay: -1.4s;
}

/*
  Gone on a phone.
  
  The hero column is barely wider than the palm there, so a second product has
  nowhere to stand that is not on top of the first. One clear product beats two
  overlapping ones, and the range is a scroll away regardless.
*/
@media (max-width: 900px) {
  .hero__shot--second { display: none; }
}

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

/* ==========================================================================
   44. STORE LOCATOR
   ========================================================================== */
.locator-sample {
  padding: .85rem 1.1rem; margin-bottom: 1.5rem;
  background: var(--yellow-tint); border: 1px solid var(--yellow-soft);
  border-radius: var(--r-md);
  font-size: .86rem; color: var(--body);
}
.locator-sample strong { color: var(--text); }

.locator { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .locator { grid-template-columns: 380px minmax(0, 1fr); } }

.locator__panel { display: grid; gap: .85rem; min-width: 0; }

.locator__search { display: flex; gap: .5rem; }
.locator__search input {
  flex: 1 1 auto; min-width: 0;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .92rem;
}
.locator__geo {
  justify-self: start;
  background: none; border: 0; padding: 0;
  color: var(--blue); font-weight: 800; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.locator__status { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); min-height: 1.2em; }

.locator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.locator__list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.locator__list li:hover { border-color: var(--blue); box-shadow: var(--sh-sm); }
.locator__list strong { display: block; font-size: .95rem; }
.locator__list span { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.locator__list a { display: inline-block; margin-top: .25rem; font-size: .82rem; font-weight: 700; }
.locator__list b { flex: 0 0 auto; color: var(--blue); font-size: .85rem; font-variant-numeric: tabular-nums; }

.locator__map {
  height: clamp(340px, 60vh, 620px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  z-index: 0;   /* keep the tiles under the sticky header */
}

/* ==========================================================================
   45. WHOLESALE — TIERS, FORMATS, ENQUIRY FEEDBACK
   ========================================================================== */

/*
 * Honeypot.
 *
 * Hidden the safe way. `display:none` is the first thing a modern spam bot
 * checks for, and screen readers must not offer the field to a real person
 * either — so it is pushed off-canvas and taken out of the tab order in the
 * markup.
 */
.exotica-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.lead-note {
  border-radius: var(--r-md);
  padding: .95rem 1.15rem;
  margin-bottom: 1.25rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  scroll-margin-top: 120px;
}
.lead-note--ok  { background: #E8F6EC; border: 1px solid #B7E2C3; color: #17603A; }
.lead-note--bad { background: #FDECEC; border: 1px solid #F5C2C2; color: #8A1F1F; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.tier {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.tier:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.tier__from { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }
.tier__off {
  display: block; margin-top: .35rem;
  font-family: var(--font-head); font-size: 1.55rem; line-height: 1;
  color: var(--blue);
}
.tier-note { margin-top: 1.15rem; font-size: .85rem; color: var(--muted); text-align: center; }

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.format {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.25rem;
}
.format__ico { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: .6rem; }
.format strong { display: block; font-size: 1rem; margin-bottom: .3rem; }
.format p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   46. TRADE PORTAL
   ========================================================================== */

/*
 * A standing reminder of which price list is on screen.
 *
 * Case and retail prices differ by more than half. Someone logged into a
 * trade account, reading a $0.58 unit price, quoting it to a walk-in
 * customer, is a real and expensive mistake — and it is prevented by one
 * line of text that never goes away.
 */
.trade-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1.25rem;
  padding: .55rem 1rem;
  background: var(--blue); color: #fff;
  font-size: .82rem; font-weight: 700;
  text-align: center;
}
.trade-bar a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

.price-case {
  display: block;
  margin-top: .2rem;
  font-size: .78rem; font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.trade-gate {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  box-shadow: var(--sh-sm);
}
.trade-gate h2 { margin-bottom: .6rem; }
.trade-gate p { color: var(--muted); margin: 0 auto; max-width: 46ch; }
.trade-gate__actions {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-top: 1.5rem;
}

.trade-filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.75rem;
}
.trade-filters .chip {
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: .84rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.trade-filters .chip:hover { border-color: var(--blue); }
.trade-filters .chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

.exotica-tier-note { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   47. ORDER RECEIVED
   ========================================================================== */

.order-done {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) 0;
  /*
   * The order-received screen IS the checkout page as far as the body class
   * is concerned, so the two-column checkout grid can catch this block and
   * squeeze it into the left column with dead space beside it. Spanning
   * every column makes that harmless whatever the parent turns out to be.
   */
  grid-column: 1 / -1;
}

.order-done__head { text-align: center; margin-bottom: 2.25rem; }
.order-done__mark {
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: #E8F6EC; color: #17603A;
  font-size: 2rem; font-weight: 800; line-height: 1;
}
.order-done__head--bad .order-done__mark { background: #FDECEC; color: #8A1F1F; }
.order-done__head h1 { margin-bottom: .5rem; }
.order-done__head p { color: var(--muted); max-width: 52ch; margin: 0 auto; }

.order-done__facts {
  list-style: none; margin: 0 0 2.25rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.order-done__facts li {
  background: var(--white);
  padding: 1.1rem 1rem;
  text-align: center;
}
.order-done__facts span {
  display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .3rem;
}
.order-done__facts strong {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* never break "$176.57" across two lines */
}
.order-done__facts .woocommerce-Price-amount,
.order-done__facts bdi { white-space: nowrap; }

.order-next {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  margin-bottom: 2.25rem;
}
.order-next h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.order-next ol { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }
/*
 * Three grid items, two columns.
 *
 * Without explicit placement the ::before takes cell 1, <strong> takes cell 2
 * and <span> wraps onto the next row into the 30px number column — which
 * renders the sentence one word per line. Pinning the marker across both
 * rows and both children to column 2 is the fix.
 */
.order-next li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: .85rem;
  row-gap: .15rem;
  align-items: start;
}
.order-next li::before {
  content: counter(step);
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .82rem; font-weight: 800;
}
.order-next strong { grid-column: 2; grid-row: 1; display: block; font-size: .96rem; }
.order-next span { grid-column: 2; grid-row: 2; display: block; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* WooCommerce's own tables, brought into the same visual language. */
.order-done .woocommerce-order-details,
.order-done .woocommerce-customer-details { margin-bottom: 2rem; }
.order-done .woocommerce-order-details__title,
.order-done .woocommerce-column__title { font-size: 1.15rem; margin-bottom: .9rem; }
/* One address, one column — not a half-empty two-column grid. */
.order-done .col2-set { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .order-done .woocommerce-columns--2 .col2-set { grid-template-columns: 1fr 1fr; }
}
.order-done .col2-set .col-1,
.order-done .col2-set .col-2 { width: auto !important; float: none !important; }

.order-done table.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.order-done table.woocommerce-table--order-details th,
.order-done table.woocommerce-table--order-details td {
  padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.order-done table.woocommerce-table--order-details tfoot td,
.order-done table.woocommerce-table--order-details tfoot th { font-weight: 700; }
.order-done table.woocommerce-table--order-details tfoot tr:last-child td,
.order-done table.woocommerce-table--order-details tfoot tr:last-child th {
  font-size: 1.05rem; color: var(--blue); border-bottom: 0;
}
.order-done .woocommerce-table__product-name .price-case { display: none; }

.order-done address {
  font-style: normal; line-height: 1.7; font-size: .92rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
}

.order-done__actions {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin: 2rem 0 1rem;
}
.order-done__help { text-align: center; font-size: .88rem; color: var(--muted); }

/* ==========================================================================
   48. MY ACCOUNT
   ========================================================================== */

/*
 * WooCommerce ships these screens as floats with percentage widths, and the
 * result is what you would expect: labels beside their own fields, headings
 * colliding with their edit links, and addresses in italics. Everything here
 * replaces a float with a grid.
 */

.woocommerce-MyAccount-content > p:first-child { color: var(--muted); font-size: .93rem; }

/* ---- forms ---- */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row {
  float: none !important;
  width: auto !important;
  display: block;
  margin-bottom: 1rem;
}
.woocommerce-MyAccount-content form .form-row label,
.woocommerce-address-fields .form-row label,
.woocommerce-EditAccountForm .form-row label {
  display: block;
  width: auto !important;
  float: none !important;
  font-weight: 800;
  font-size: .85rem;
  margin-bottom: .35rem;
}
.woocommerce-MyAccount-content form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce-MyAccount-content form span.description,
.woocommerce-EditAccountForm span.description {
  display: block;
  float: none !important;
  width: auto !important;
  font-style: normal;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .35rem;
}

@media (min-width: 620px) {
  .woocommerce-address-fields__field-wrapper,
  .woocommerce-EditAccountForm > p:not(.form-row-wide):not(.woocommerce-form-row--wide) {
    /* Two-up for the paired name fields, full width for everything else. */
  }
  .woocommerce-address-fields .form-row-first,
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-address-fields .form-row-last,
  .woocommerce-EditAccountForm .form-row-last {
    display: inline-block;
    width: calc(50% - .4rem) !important;
    vertical-align: top;
  }
  .woocommerce-address-fields .form-row-first,
  .woocommerce-EditAccountForm .form-row-first { margin-right: .7rem; }
}

.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: 1.25rem;
  margin: 1.75rem 0 1.25rem;
}
.woocommerce-EditAccountForm legend {
  font-family: var(--font-head);
  font-size: 1rem;
  padding: 0 .5rem;
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  display: inline-block;
  padding: .85rem 1.6rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--blue); color: #fff;
  font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: filter var(--t);
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover { filter: brightness(1.12); }

/* ---- addresses ---- */
.woocommerce-Addresses {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 760px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address {
  width: auto !important; float: none !important;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
}
.woocommerce-Address-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: .85rem;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { font-size: 1.15rem; margin: 0; }
.woocommerce-Address-title .edit {
  font-size: .84rem; font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-Address address {
  font-style: normal;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink);
}

/* ---- order tables inside the account ---- */
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--custom-fields,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: .85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.woocommerce-MyAccount-content table.shop_table thead th {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th {
  border-bottom: 0; font-size: 1.02rem; color: var(--blue); font-weight: 800;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { padding: .5rem 1rem; font-size: .8rem; }

/* ---- the order view ---- */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 { font-size: 1.15rem; margin: 2rem 0 .9rem; }
.woocommerce-customer-details address {
  font-style: normal; line-height: 1.7; font-size: .92rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
}
.woocommerce-customer-details .col2-set {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .woocommerce-customer-details .woocommerce-columns--2 .col2-set,
  .woocommerce-columns--2 .col2-set { grid-template-columns: 1fr 1fr; }
}
.woocommerce-customer-details .col2-set .col-1,
.woocommerce-customer-details .col2-set .col-2 { width: auto !important; float: none !important; }

/* ==========================================================================
   49. SINGLE PRODUCT — TABS, RELATED, EXPRESS CHECKOUT
   ========================================================================== */

/*
 * Not scoped under `.woocommerce div.product`.
 *
 * The existing rules were, and on the live site they were not winning —
 * the tab list rendered as plain bullets. Targeting the component itself
 * means the styling holds whether or not WooCommerce's own stylesheet
 * loaded, which on this host it sometimes does not.
 */
.woocommerce-tabs { margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; }

.woocommerce-tabs ul.tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: flex; flex-wrap: wrap; gap: .5rem;
  border: 0;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { content: none !important; display: none !important; }
.woocommerce-tabs ul.tabs li {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  background: var(--white);
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .65rem 1.35rem;
  font-weight: 800; font-size: .88rem;
  color: var(--ink); text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active { background: var(--blue); border-color: var(--blue) !important; }
.woocommerce-tabs ul.tabs li.active a { color: #fff; }

.woocommerce-tabs .panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  margin: 0 !important;
}
/* The panel already has a tab with its name on it. */
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.woocommerce-tabs .panel table { width: 100%; }
.woocommerce-tabs .panel th { text-align: left; width: 30%; }
.woocommerce-tabs .panel th, .woocommerce-tabs .panel td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--line); font-size: .92rem;
}

/*
 * Related products need air.
 *
 * The description ended and the next heading started immediately underneath,
 * so the two blocks read as one run-on section.
 */
.related.products,
.upsells.products {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.related.products > h2,
.upsells.products > h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Express payment buttons: a block of their own, clearly separated. */
.wc-stripe-product-checkout-container,
#wc-stripe-express-checkout-element,
.wc-block-components-express-payment {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.wc-stripe-product-checkout-container::before,
#wc-stripe-express-checkout-element::before {
  content: "Or pay in one tap";
  display: block;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .7rem;
}

/* The Additional information table: full width, and not in italics. */
.woocommerce-tabs .panel table.shop_attributes,
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  text-align: left;
  vertical-align: top;
}
.woocommerce-product-attributes th { width: 34%; font-weight: 800; background: var(--bg); }
.woocommerce-product-attributes td,
.woocommerce-product-attributes td p { font-style: normal; margin: 0; }
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: 0; }

/* Undo, inside the add-to-cart confirmation. */
.exo-toast__undo {
  display: inline-block;
  margin-left: .75rem;
  padding: 0;
  border: 0; background: none;
  color: var(--blue);
  font: inherit; font-weight: 800; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.exo-toast__undo:disabled { opacity: .6; cursor: default; text-decoration: none; }

/* ==========================================================================
   50. CLIENT REVISION — YELLOW BANDS, MORE GREEN
   ========================================================================== */

/*
 * Yellow top bar and yellow footer.
 *
 * Overrides rather than edits to the originals, so the blue versions are
 * still there to go back to if the client changes their mind — and so the
 * text/link colours that have to change with the background are all in one
 * place instead of scattered through two earlier sections.
 *
 * Yellow is a light background, so every colour that assumed white text on
 * dark has to be inverted. Missing one is how you end up with white on
 * yellow, which is unreadable and fails contrast outright.
 */
.topbar {
  background: var(--yellow);
  color: var(--blue-deep);
}
.topbar a { color: var(--blue-deep); }
.topbar a:hover { color: var(--blue); }
.topbar strong { color: var(--blue-deep); }

.site-footer {
  background: var(--yellow);
  color: var(--blue-deep);
}
.site-footer a { color: var(--blue-deep); }
.site-footer a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.footer-col h4 { color: var(--blue); }
.footer-brand .brand { color: var(--blue-deep); }
.footer-brand .brand span { color: var(--blue); }
.footer-brand p { opacity: .85; }
.footer-social a {
  background: rgba(15,60,136,.12);
  color: var(--blue-deep);
}
.footer-social a:hover { background: var(--blue); color: var(--yellow); }
.footer-bottom { border-top-color: rgba(15,60,136,.22); opacity: 1; color: rgba(15,60,136,.8); }
.payment-icons span { background: rgba(15,60,136,.12); color: var(--blue-deep); }

/* The newsletter strip sits inside the footer, so it inverts too. */
.newsletter { background: transparent; color: var(--blue-deep); }
.newsletter h2, .newsletter h3 { color: var(--blue-deep); }
.newsletter p { color: rgba(15,60,136,.8); }
.newsletter input {
  background: rgba(255,255,255,.75);
  border-color: rgba(15,60,136,.25);
  color: var(--blue-deep);
}
.newsletter input::placeholder { color: rgba(15,60,136,.55); }
.newsletter .btn--primary,
.newsletter button[type="submit"] {
  background: var(--blue); color: #fff;
}
.newsletter .btn--primary:hover,
.newsletter button[type="submit"]:hover { background: var(--blue-dark); }

/*
 * More green, as asked for — used where green already means something.
 *
 * Green is the "natural / oil-based / in stock / saving" colour on this site.
 * Spreading it onto anything else would dilute the one job it does, so it
 * goes on the botanical and reassurance cues and nowhere else.
 */
.kicker { color: var(--green-text); }
.usp__ico,
.feature__icon,
.product-trust span:first-child,
.format__ico { filter: none; }
.product-trust > div {
  border-color: var(--green-soft);
  background: var(--green-soft);
  color: var(--green-text);
}
.checkout-trust span { color: var(--green-text); }
.trust-bar strong { color: var(--green-text); }
.feature {
  border-top: 3px solid var(--green);
}
.section-title .kicker,
.section-head .kicker { color: var(--green-text); }

/* A three-across row for city / state / ZIP. */
.form-row--three { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .form-row--three { grid-template-columns: 2fr 1fr 1fr; }
}

/* ==========================================================================
   51. GREEN, PROPERLY
   ========================================================================== */

/*
 * The client's note was that green is not pulling its weight, and they were
 * right: it was only appearing on sale badges. Green is the second brand
 * colour, so it now carries a consistent job across the site — everything
 * that means natural, oil-based, verified or in stock.
 *
 * Yellow stays the action colour and blue stays the structure colour. Three
 * colours each doing one job reads as a brand; three colours doing all three
 * jobs reads as a mess.
 */

/* Section eyebrows across the whole site. */
.kicker { color: var(--green-text); }
.kicker--yellow { color: var(--blue-deep); }
.kicker--glass { color: #fff; }

/* The flag sits with the type, not above or below it. */
.us-flag {
  display: inline-block;
  vertical-align: -2px;
  margin-right: .35rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* Trust and proof cues. */
.product-trust > div {
  background: var(--green-soft);
  border-color: rgba(54,183,77,.28);
  color: var(--green-text);
}
.checkout-trust span { color: var(--green-text); font-weight: 700; }
.usp strong { color: var(--blue-deep); }
.usp__ico {
  background: var(--green-soft);
  color: var(--green-text);
  border-radius: 50%;
}

/* The Why block: a green rule that ties the four cards together. */
.feature { border-top: 3px solid var(--green); }

/* In stock, saved, added — all the same green. */
.stock.in-stock,
.woocommerce div.product .stock { color: var(--green-text) !important; font-weight: 700; }
.exo-toast__icon { color: var(--green); }
.lead-note--ok {
  background: var(--green-soft);
  border-color: rgba(54,183,77,.35);
  color: var(--green-text);
}
.badge--save,
.card__save,
.save-badge { background: var(--green-soft); color: var(--green-text); }

/* Footer headings: green on yellow is the strongest pairing available here. */
.footer-col h4 { color: var(--green-text); }

/* The wholesale tier ladder reads as "money saved", so green. */
.tier__off { color: var(--green-text); }
.tier:hover { border-color: var(--green); }

/* Secondary buttons pick up green rather than another blue. */
.btn--ghost:hover {
  border-color: var(--green);
  color: var(--green-text);
}

/* Single-fragrance stands: one choice, not a counter per scent. */
.display-single {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
}
.display-single label { display: block; margin-bottom: .7rem; }
.display-single strong { display: block; font-size: .98rem; }
.display-single span { display: block; font-size: .85rem; color: var(--muted); margin-top: .15rem; }

/* Admin-only diagnostic for a display that cannot build its chooser. */
.display-debug {
  background: var(--red-soft);
  border: 1px solid #F5C2C2;
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  margin: 1rem 0;
  font-size: .85rem;
  color: #8A1F1F;
}
.display-debug strong { display: block; margin-bottom: .35rem; }
.display-debug p { margin: 0 0 .5rem; }
.display-debug ul { margin: 0 0 .5rem 1.1rem; padding: 0; }
.display-debug code { background: rgba(0,0,0,.06); padding: .1rem .3rem; border-radius: 3px; }

/* A fragrance that cannot be added because four are already chosen. */
.display-builder__list li.is-locked { opacity: .45; }
.display-builder__list li.is-locked .display-builder__name { text-decoration: line-through; }
.display-builder__step button:disabled { opacity: .35; cursor: not-allowed; }
.display-builder__step input:disabled { background: var(--bg); color: var(--muted); }

/* ==========================================================================
   52. FOOTER — YELLOW, BUT LIVEABLE
   ========================================================================== */

/*
 * The client asked for the bottom of the site in yellow, and a single flat
 * sheet of #FBFF00 two thousand pixels deep is what that literally means —
 * and it is exhausting to look at. Worse, the newsletter block on top of it
 * was still styled for a dark background, so its white heading and pale
 * caption were all but invisible.
 *
 * Same instruction, read properly: the footer IS yellow, but it starts below
 * a deep-blue newsletter band. The blue gives the eye somewhere to rest, the
 * yellow still owns the bottom of every page, and every piece of text now
 * sits on a background it was designed for.
 */
.site-footer { background: var(--yellow); color: var(--blue-deep); }

/* The newsletter keeps the brand blue and spans the full width. */
.footer-top {
  position: relative;
  background: var(--blue-dark);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  margin-block: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0;
}
.footer-top h3 { color: #fff; margin-bottom: .3rem; }
.footer-top p { color: #C9DBF7; margin: 0; font-size: .9rem; }
.footer-top input {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.footer-top input::placeholder { color: rgba(255,255,255,.62); }
.footer-top .btn--primary { background: var(--yellow); color: var(--blue-deep); }
.footer-top .btn--primary:hover { background: var(--yellow-hi); }

/* Columns: dark type on yellow, headings in the brand green. */
.site-footer a { color: var(--blue-deep); }
.site-footer a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.footer-col h4 { color: var(--green-text); }
.footer-brand .brand { color: var(--blue-deep); }
.footer-brand p { color: rgba(11,18,32,.72); opacity: 1; }

.footer-social a { background: var(--blue-deep); color: var(--yellow); }
.footer-social a:hover { background: var(--blue); color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(11,18,32,.18);
  color: rgba(11,18,32,.7);
  opacity: 1;
}
.payment-icons span { background: var(--blue-deep); color: var(--yellow); }

/* ==========================================================================
   53. WHOLESALE CATALOGUE — THE NOTE AT THE TOP
   ========================================================================== */
.trade-note {
  background: var(--green-soft);
  border: 1px solid rgba(54,183,77,.3);
  border-left: 4px solid var(--green);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.25rem;
}
.trade-note strong { display: block; font-size: 1.05rem; color: var(--green-text); margin-bottom: .3rem; }
.trade-note p { margin: 0; font-size: .92rem; color: var(--body); line-height: 1.6; max-width: 78ch; }
.trade-note__facts {
  list-style: none; margin: .85rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.trade-note__facts li {
  background: var(--white);
  border: 1px solid rgba(54,183,77,.3);
  border-radius: var(--r-pill);
  padding: .35rem .85rem;
  font-size: .82rem; font-weight: 700; color: var(--green-text);
}

.trade-tiers {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: .35rem 1.15rem;
  margin-bottom: 1.75rem;
}
.trade-tiers summary {
  cursor: pointer;
  padding: .8rem 0;
  font-weight: 800;
  font-size: .92rem;
  color: var(--blue);
}
.trade-tiers[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.trade-tiers .tier-grid { padding-bottom: 1.15rem; }

/* ---- Footer identity ---------------------------------------------------- */

.footer-logo { margin-bottom: .9rem; line-height: 0; }
.footer-logo img { height: 46px; width: auto; max-width: 220px; object-fit: contain; }
.footer-social a svg { display: block; }

/* ---- Mix or one fragrance ---------------------------------------------- */

.exotica-scent { margin: 0 0 1.1rem; }
.exotica-scent label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: .4rem; color: var(--blue); }
.exotica-scent select {
  width: 100%; max-width: 26rem; font: inherit; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.exotica-scent__note { margin: .45rem 0 0; font-size: .82rem; color: var(--muted); }

/* =========================================================================
   Mobile hardening (v3.37) — pre-launch technical checkup
   -------------------------------------------------------------------------
   The theme's lag on phones is not its byte weight (38 KB CSS, 15 KB JS,
   both deferred) — it is compositor work: a wall of will-change layers from
   the scroll-reveal, 90px blur() blobs, backdrop-filter on every card
   button, and infinite animations that also carry a 40px drop-shadow. All
   of it runs on the first screens. Touch devices get the calm version.
   ========================================================================= */
@media (hover: none), (max-width: 1023px) {
  /* Reveal: show everything, promote nothing. */
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; }

  /* Decorative blur blobs are the single most expensive scroll cost. */
  .blob { display: none !important; }

  /* Per-card glass — dozens of live render surfaces during scroll. */
  .wish-btn, .compare-btn, .scent__tab, .scent__notes span,
  .countdown__unit, .btn--glass, .card__quick { backdrop-filter: none !important; }

  /* Infinite float on images that also blur a 40px shadow every frame. */
  .hero__media img, .premium__img.is-main, .dealer__pin { animation: none !important; }
  .hero__media img, .premium__img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }

  /* Sticky :hover states left over after a tap. */
  .wish-btn:hover, .scent__tab:hover, .woocommerce a.button:hover,
  .btn--primary:hover, .btn--blue:hover { transform: none; }
}

/* Add-to-cart toast must sit ABOVE the fixed bottom bar, not behind it. */
.exo-toasts { z-index: 900; }
@media (max-width: 1023px) {
  .exo-toasts { bottom: calc(66px + env(safe-area-inset-bottom) + .75rem); }
}

/* iOS zooms any input under 16px on focus and shifts the layout. */
@media (max-width: 1023px) {
  .search-strip input, .search-strip select,
  .woocommerce-ordering select,
  .shop-sidebar input, .shop-sidebar__search input, .shop-sidebar__find,
  .display-builder__step input, .search-panel input { font-size: 16px; }
}

/* Two product columns on a phone instead of one 14,000px-tall scroll. */
@media (max-width: 599px) {
  .woocommerce ul.products, ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
  }
  .card { padding: .6rem; }
  .card__price { font-size: 1.05rem; }
}

/* The mega panel is desktop-only; never let it open inside the drawer. */
.mobile-drawer .mega { display: none !important; }

/* Drawer scrolling must not chain to the page behind it (iOS rubber-band). */
.mobile-drawer, .search-panel { overscroll-behavior: contain; }

/* Slimmer sticky header on phones — 80px was a fifth of the viewport. */
@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .brand img { max-height: 36px; max-width: 42vw; width: auto; }
}

/* 44px touch targets on the small controls people actually miss. */
@media (hover: none) {
  .exo-toast__close, .bundle__qty button, .display-builder__step button,
  .wish-btn, .search-close, .saved-card__remove { min-width: 44px; min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
}

/* =========================================================================
   Client review fixes (v3.38) — Nabil Mneymneh, 11 Sep 2026
   ========================================================================= */

/* --- The filter drawer must sit ABOVE the sticky header ------------------
   The header is z-index 900 and the drawer was 140, so opening the filters
   slid a panel out UNDERNEATH the header: its own close button and the
   "clear filters" row were hidden behind it, which is why clearing filters
   looked like it rendered halfway down the sidebar instead of at the top.
   The drawer is a modal surface — it belongs above everything.            */
.shop-sidebar        { z-index: 1200; }
.shop-filters-backdrop { z-index: 1150; }

/* The drawer's own sticky head now has a surface to sit on, so the close
   button and the clear-filters row stay pinned at the true top. */
.shop-sidebar__close {
  background: var(--white);
  padding-block: .35rem;
  margin-bottom: .35rem;
  box-shadow: 0 10px 16px -14px rgba(11,18,32,.5);
}

/* WooCommerce's filter block prints its "Clear" link wherever it likes;
   pin it to the top of the panel where people look for it. */
.shop-sidebar [class*="wc-block-product-filter"] [class*="__clear"],
.shop-sidebar .wc-block-product-filter-clear-button {
  order: -1;
  align-self: flex-start;
  margin: 0 0 .5rem;
}

/* --- Pagination: room to breathe between the numbers -------------------- */
nav.woocommerce-pagination ul,
.woocommerce-pagination ul { gap: .6rem; }
nav.woocommerce-pagination,
.woocommerce-pagination { padding-block: .5rem 1rem; }

/* --- Product cards: space around the title and the button --------------- */
.card__title { margin: .5rem 0 .55rem; }
.card__body  { padding-inline: .3rem; }
.card > .card__body { padding-inline: .3rem; }
.card__foot {
  margin-top: auto;
  padding-top: .85rem;   /* the button was sitting on the price */
}
.card__media + .card__body { padding-top: .35rem; }

/* ==========================================================================
   3.42 — MEGA MENU: MAKE THE HOVER CHEAP

   Reported as "put the mouse on it and it is very heavy". It was, and none of
   it was the content: the panel is full-viewport-width, and everything below
   was being repainted each time it faded.

   Three costs, in order of size.
   ========================================================================== */

/*
  1. The shadow. A 60px blur across the full width of the viewport is one of
     the most expensive things a browser can be asked to paint, and it was
     being painted on the way in and again on the way out. Half the blur is a
     quarter of the work, and at this size nobody can tell the difference.

  2. `contain: paint` tells the browser nothing inside the panel can affect
     anything outside it, so revealing it stops invalidating the page behind.
     This is what removes the stutter on the fade itself.
*/
.mega {
  box-shadow: 0 16px 30px rgba(11, 18, 32, .12);
  contain: paint;
}

/*
  3. `transition: all` makes the browser watch every animatable property on
     every row and chip — and there are dozens of them in this panel. Moving
     the pointer across the list was recalculating all of them. Name the two
     properties that actually change.
*/
.mega__product,
.mega__chips a {
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/*
  The promo panel stacks a radial gradient over a linear one. Static, so it
  paints once — but it re-paints on every reveal unless it is given its own
  layer to keep. It is a small, fixed-size box, so this is cheap to hold.
*/
.mega__promo { will-change: transform; }

/*
  A pointer that cannot hover never opens this panel, and a phone renders the
  drawer instead. No reason to carry any of the above on a touch device.
*/
@media (hover: none) {
  .mega { box-shadow: none; contain: none; }
  .mega__promo { will-change: auto; }
}

/* Case fill: mixed or single, on the wholesale boards. */
.display-pack { display: grid; gap: .75rem; margin: 1.1rem 0; }
.display-pack label strong { display: block; font-weight: 800; font-size: .95rem; }
.display-pack label span { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.display-pack select {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--white); font-weight: 700; font-size: .95rem;
}
.display-pack__one { display: grid; gap: .5rem; padding-left: .9rem; border-left: 3px solid var(--line); }

/* ==========================================================================
   3.49 — PAGINATION SITS WITH ITS PRODUCTS

   The page numbers were floating a long way under the last row, far enough
   that on a short category they read as belonging to whatever came next
   rather than to the grid above them. The rule said 2.5rem; the gap on screen
   was more than double that, which means something above was contributing
   margin of its own.

   Rather than guess which, the spacing is set here and everything that could
   add to it is zeroed — so the distance is decided in one place and holds on
   the shop, every category, and search results alike.
   ========================================================================== */
nav.woocommerce-pagination,
.woocommerce-pagination {
  margin-top: 1.5rem;
  margin-bottom: 0;
  clear: both;
}

/* Whatever WooCommerce or a plugin wraps it in must not add to that. */
.woocommerce-pagination::before,
.woocommerce-pagination::after { content: none; display: none; }

/* The grid's last row ends the grid; nothing below it needs pushing away. */
.woocommerce ul.products,
ul.products { margin-bottom: 0 !important; }

/* On a phone the numbers are the next thing a thumb reaches for. */
@media (max-width: 767px) {
  nav.woocommerce-pagination,
  .woocommerce-pagination { margin-top: 1.15rem; }
}

/* ==========================================================================
   3.50 — PAGINATION: TAKE THE STYLING BACK FROM WOOCOMMERCE CORE
   --------------------------------------------------------------------------
   The numbers were rendering inside a grey rectangle, split by vertical
   dividers, with the current page washed out to grey-on-mauve. None of that
   is in this theme. It is woocommerce-layout.css, which ships:

     .woocommerce nav.woocommerce-pagination ul      -> border, inline-block
     .woocommerce nav.woocommerce-pagination ul li   -> border-right, float
     ... ul li span.current                          -> #eee / #8a7e88

   Every one of those selectors carries two classes. The theme's carried one.
   Specificity, not load order, is why core won — so the rules below are
   written with the `.woocommerce` ancestor too, and the shop wrapper is
   named twice so the result out-ranks core wherever it appears.

   Core's stylesheet only loads on shop pages, so the plain selectors are
   kept alongside for the places it does not (search results, shortcodes).
   ========================================================================== */
.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul,
nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  white-space: normal;
}

.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  display: block;
  overflow: visible;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  min-width: 44px;
  height: 44px;
  padding: 0 .75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* Core paints hover and focus the same washed grey. Both get the blue. */
.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li a:focus,
nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li a:focus,
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li a:focus {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue);
}

/* The page you are on is the one solid element in the row. */
.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.woocommerce nav.woocommerce-pagination.woocommerce-pagination ul li span.dots,
nav.woocommerce-pagination ul li span.dots,
.woocommerce-pagination ul li span.dots {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

/* Keyboard users still need a ring; it just should not be the browser's
   default one sitting half inside a rounded button. */
nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce-pagination ul li a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
nav.woocommerce-pagination ul li a:focus:not(:focus-visible),
.woocommerce-pagination ul li a:focus:not(:focus-visible) { outline: none; }

/* The arrows read as arrows, not as a number that lost its digit. */
nav.woocommerce-pagination ul li a.prev,
nav.woocommerce-pagination ul li a.next,
.woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next { font-weight: 800; }