/* ==========================================================================
   Haystack customisation layer for Lavichic  —  loaded after theme styles
   Ref: Haystack "Lavichic Website Updates & E-Commerce Optimisation"
   §B General Design & UX  |  §F Product Card / Add-to-Cart cleanup
   Fonts & colours are intentionally UNCHANGED (League Spartan + existing palette).
   This file only normalises SIZING, WEIGHTS, SPACING and RESPONSIVENESS so that
   headings/body/buttons are consistent site-wide.
   ========================================================================== */

:root {
  /* --- Brand type + colour tokens (mirrors the current live site) --- */
  --lc-font: "League Spartan", sans-serif;
  --lc-ink: #111111;      /* headings */
  --lc-body: #4b4b4b;     /* body copy */
  --lc-muted: #7a7a7a;    /* meta / secondary */
  --lc-line: #e7e3df;     /* hairlines / borders */

  /* --- Responsive type scale (min → fluid → max) --- */
  --lc-fs-h1:      clamp(2rem,    1.35rem + 2.6vw, 2.75rem);   /* 32 → 44 */
  --lc-fs-section: clamp(1.75rem, 1.20rem + 2.1vw, 2.25rem);   /* 28 → 36  (.main-title) */
  --lc-fs-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);    /* 20 → 24 */
  --lc-fs-h4:      clamp(1.125rem,1.00rem + 0.5vw, 1.375rem);  /* 18 → 22 */
  --lc-fs-h5:      1.125rem;                                   /* 18 */
  --lc-fs-h6:      1rem;                                       /* 16 */
  --lc-fs-body:    clamp(1rem,    0.97rem + 0.15vw, 1.0625rem);/* 16 → 17 */
  --lc-fs-small:   0.875rem;                                   /* 14 */
  --lc-fs-eyebrow: 0.8125rem;                                  /* 13 uppercase label */

  --lc-fs-product-title:  clamp(0.95rem, 0.88rem + 0.3vw, 1.0625rem); /* 15 → 17 */
  --lc-fs-price:          clamp(1rem,    0.94rem + 0.25vw, 1.125rem);  /* 16 → 18 */

  --lc-lh-tight: 1.15;
  --lc-lh-snug:  1.3;
  --lc-lh-base:  1.55;

  /* --- Spacing rhythm --- */
  --lc-section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --lc-gap:       clamp(1rem, 0.6rem + 1.5vw, 1.75rem);

  /* --- Buttons --- */
  --lc-btn-radius: 10px;  /* = --lc-radius: buttons share the cards' radius */
  --lc-btn-py: 0.9em;
  --lc-btn-px: 1.6em;

  /* --- Design system (§X, 2026-09-24 consistency pass) --- */
  --lc-ink-hover:  #333333;   /* primary button hover — visibly lighter than ink */
  --lc-tint:       #f7f2ee;   /* bands / summary panels */
  --lc-tint-2:     #f2e7e1;   /* image wells / inactive chips */
  --lc-ctl-lg: 48px;          /* primary buttons + every text input */
  --lc-ctl-md: 42px;          /* secondary / toolbar buttons */
  --lc-ctl-sm: 30px;          /* in-card +Add / notify / stepper */
  --lc-btn-fs:    .8125rem;   /* 13px */
  --lc-btn-fs-sm: .75rem;     /* 12px */
  --lc-btn-ls:    .08em;
  --lc-ease:      cubic-bezier(.22, .61, .36, 1);
  --lc-dur-fast:  .18s;       /* colour / background hovers */
  --lc-dur:       .3s;        /* UI state changes */
  --lc-dur-slow:  .5s;        /* image zoom */
  --lc-zoom:      1.06;       /* the one card hover: subtle image zoom */
  --lc-shadow-sm: 0 2px 10px rgba(17,17,17,.06);
  --lc-shadow-md: 0 12px 32px rgba(17,17,17,.09);
  --lc-focus:     0 0 0 3px rgba(17,17,17,.12);

  /* --- Corner radius (client request 2026-09-22: reverse the site-wide
     "square corners" design from earlier in this engagement — "rounded
     edges... just enough to look more feminine and more welcoming", applied
     consistently everywhere, not the theme's own inconsistent native radii
     this engagement originally flattened away). One moderate value for
     cards/panels/inputs/images (§M below), reusing --lc-btn-radius for
     buttons/pills (already 8px, already used by a few components), and a
     dedicated pill value for the fully-rounded CTAs that were already coded
     as 999px before §M silently zeroed them out. */
  --lc-radius:      10px;
  --lc-radius-pill: 999px;

  /* --- Site-wide page container (TRUE full-width, edge to edge) ---
     A single source of truth for "how wide is the content" everywhere: full
     browser width on every page (shop/brand/checkout/cart/account/category),
     matching the homepage's own sections — no centered/boxed max-width.
     --hs-container-pad is the only thing keeping content off the browser
     edge; every rule that used to rely on the OLD 85%-width formula for its
     side gutter must use this instead now that width itself is 100%. */
  --hs-container-w:   100%;
  --hs-container-max: none;
  --hs-container-pad: clamp(1rem, 1vw + .75rem, 2.5rem);
}

/* Elementor's own Container widget (.e-con) caps its content at 1140px by
   default (--content-width: min(100%, var(--container-max-width,1140px)),
   from Elementor's frontend.min.css) UNLESS a wider --container-max-width is
   set per-element — which is why the shop/checkout/cart/account pages (built
   from auto-generated ShopBuilder .e-con sections with no such override)
   were stuck at 1140px regardless of the --hs-container-* variables above,
   while hand-built homepage sections (which DO carry an explicit wider
   --container-max-width from their own Elementor settings) were not. Setting
   --content-width directly (not just --container-max-width, which only
   feeds INTO that calc) bypasses the whole min()/fallback chain in one rule,
   site-wide, regardless of what any individual element's own inline
   --container-max-width happens to be.
   CORRECTION found while checking the homepage for comparison: even
   Elementor's own "Full Width" container variant (class .e-con-full — the
   type used by the homepage's product rows, e.g. .hs-prod-row) was STILL
   rendering boxed at ~1628px on a 1920px viewport, not full-bleed as
   assumed. Root cause is a SEPARATE mechanism from the --content-width
   custom-property chain above: a literal `max-width:85%` on .e-con-full
   from the theme's own base CSS (not Elementor core, not routed through any
   custom property my override could catch) — confirmed via getComputedStyle
   showing `maxWidth:"85%"` with an EMPTY --container-max-width. Needs its
   own separate override. */
.e-con { --content-width: 100% !important; }
.e-con-full { max-width: none !important; width: 100% !important; }

/* ==========================================================================
   §B.1  Base typography — consistent defaults (fallback layer)
   Component classes below win where the theme sets them explicitly.
   ========================================================================== */
body,
.blusho-body,
button, input, select, textarea {
  font-family: var(--lc-font);
}
body { font-size: var(--lc-fs-body); line-height: var(--lc-lh-base); color: var(--lc-body); }

h1, .h1 { font-size: var(--lc-fs-h1); line-height: var(--lc-lh-tight); font-weight: 600; color: var(--lc-ink); }
h2, .h2 { font-size: var(--lc-fs-section); line-height: var(--lc-lh-tight); font-weight: 600; color: var(--lc-ink); }
h3, .h3 { font-size: var(--lc-fs-h3); line-height: var(--lc-lh-snug); font-weight: 600; color: var(--lc-ink); }
h4, .h4 { font-size: var(--lc-fs-h4); line-height: var(--lc-lh-snug); font-weight: 600; color: var(--lc-ink); }
h5, .h5 { font-size: var(--lc-fs-h5); line-height: var(--lc-lh-snug); font-weight: 600; color: var(--lc-ink); }
h6, .h6 { font-size: var(--lc-fs-h6); line-height: var(--lc-lh-snug); font-weight: 600; color: var(--lc-ink); }
p { font-size: var(--lc-fs-body); line-height: var(--lc-lh-base); color: var(--lc-body); }

/* ==========================================================================
   §B.2  Section titles — unify every ".main-title" (caps the 50px hero outlier)
   ========================================================================== */
.main-title,
.rtsb-section-title,
.rt-section-title .title,
.widget-title,
.elementor-widget-heading .elementor-heading-title.rtsb-heading {
  font-size: var(--lc-fs-section) !important;
  line-height: var(--lc-lh-tight) !important;
  font-weight: 600 !important;
  color: var(--lc-ink);
}
/* Intro paragraph that is (incorrectly) marked up as an H2 .main-title */
h2.main-title[class*="capitalize"],
.main-title.rtsb-normal-weight { font-weight: 400 !important; }

/* ==========================================================================
   §B.3  Product cards — uniform titles, prices, spacing (also supports §F)
   ========================================================================== */
.product-title,
.woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title {
  font-size: var(--lc-fs-product-title) !important;
  line-height: var(--lc-lh-snug) !important;
  font-weight: 500 !important;
  color: var(--lc-ink) !important;
  letter-spacing: 0;
}
.category-title {
  font-size: var(--lc-fs-h5) !important;
  font-weight: 500 !important;
  line-height: var(--lc-lh-snug) !important;
}
li.product .price,
.rtsb-product-price .price,
.price ins, .price .amount {
  font-size: var(--lc-fs-price) !important;
  font-weight: 600 !important;
  color: var(--lc-ink);
}
.price del, .price del .amount { color: var(--lc-muted); font-weight: 400; }

/* Blog card titles */
.rtsb-post-title, .rtsb-post-title a { font-size: var(--lc-fs-h4) !important; font-weight: 600 !important; line-height: var(--lc-lh-snug) !important; }

/* ==========================================================================
   §B.4  Buttons — one consistent, responsive style
   ========================================================================== */
.button, a.button, button.button,
.woocommerce a.button, .woocommerce button.button,
.rtsb-btn, .rtsb-button, .add_to_cart_button, .single_add_to_cart_button {
  font-family: var(--lc-font);
  font-size: var(--lc-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--lc-btn-radius);
  padding: var(--lc-btn-py) var(--lc-btn-px);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .1s ease;
}
.button:active, a.button:active, .add_to_cart_button:active, .single_add_to_cart_button:active { transform: translateY(1px); }

/* ==========================================================================
   §B.5  Section rhythm — even vertical spacing between homepage blocks
   ========================================================================== */
.rtsb-section, .home .elementor-section.elementor-top-section { }
.home main .elementor-top-section > .elementor-container { }

/* ==========================================================================
   FIX  Stuck ShopBuilder preloader — content is server-rendered, so never
   let a perpetual spinner sit over it. (Root cause: Turnstile domain error
   on staging halts SB slider init; addressed properly under §K.)
   ========================================================================== */
.rtsb-elements-loading,
.rtsb-ball-clip-rotate,
.rtsb-content-loader > .rtsb-elements-loading { display: none !important; }
.rtsb-content-loader { min-height: 0; opacity: 1; }
.rtsb-content-loader > * { visibility: visible; opacity: 1 !important; }
/* If a slider never initialised, degrade to a horizontal scroll row rather
   than a clipped/broken block (also matches the §D browsing pattern). */
.rtsb-content-loader .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex; gap: var(--lc-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rtsb-content-loader .swiper:not(.swiper-initialized) .swiper-slide { scroll-snap-align: start; flex: 0 0 auto; }

/* ==========================================================================
   §C  Header & Navigation — single-row header, self-driven sticky/shrink,
   modern multi-column mega-menu.  (Desktop ≥1025px; theme mobile drawer kept.)
   ========================================================================== */

/* Logo vertical-centering (client request 2026-09-22).
   FIRST ATTEMPT (wrong, corrected same session after the client flagged it
   with a screenshot): tried `vertical-align:middle` on the image, reasoning
   the default `baseline` reserves phantom descender space below it. That
   assumption was only half right — `vertical-align:middle` aligns to the
   line's baseline + half the FONT's x-height, not the true geometric center
   of an arbitrarily-tall container, so it left the image sitting ~20px
   HIGHER than the nav row (measured live: image center 62 vs nav center 82,
   at a header where the .site-logo anchor's own box was ALREADY correctly
   centered — top 42/bottom 122/center 82 — the anchor was fine, only the
   image inside it wasn't centering within it). Font-metric-based alignment
   can't reliably center an image inside an arbitrary-height box — flexbox
   can, regardless of font metrics: */
.site-logo, .site-title {
  display: flex !important;
  align-items: center;
}

@media (min-width: 1025px) {

  /* --- Take full control of stickiness from the theme's Headroom.js ---
     Fixed (not sticky) because the theme sets overflow-x:hidden on <body>,
     which breaks position:sticky. JS offsets the page by the header height. */
  .site-header {
    position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%;
    z-index: 1000; background: #fff;
  }
  /* The theme's Headroom still toggles its classes on scroll; pin every one
     of them to our own transform so it can never slide the header away. */
  .site-header, .site-header.headroom, .site-header.headroom--pinned, .site-header.headroom--unpinned,
  .site-header.headroom--top, .site-header.headroom--not-top {
    position: fixed !important; top: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease !important;
    will-change: transform;
  }
  /* Scrolled: the whole header slides up by exactly the top bar's height
     (--hs-topbar-h, measured by initSticky()) — one compositor-only
     transform. Client feedback 2026-09-24: the old version collapsed the
     top bar via max-height (reflowing every frame, with a dead zone at the
     start) while the logo eased and the nav links' padding SNAPPED with no
     transition at all, so the menu items visibly jumped. Nothing inside the
     header changes size now; only the header moves, as one piece.
     `body` prefix: outranks the two-class Headroom rule above. */
  body .site-header.hs-scrolled {
    transform: translate3d(0, calc(-1 * var(--hs-topbar-h, 36px)), 0) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header, .site-header .blusho-top-bar { transition: none !important; }
  }
  .site-header .header-desktop { position: relative; }
  /* JS sets --hs-header-offset on .site so content clears the fixed header */
  .site { padding-top: var(--hs-header-offset, 0px); }
}

/* Mobile: the theme's own fixed-header spacer is hardcoded to 100px
   regardless of the actual header height (`.fixed-header-space{height:100px
   !important}`, an inline theme <style> block that happens to be placed
   LATER in <head> than this stylesheet — so at equal specificity+importance
   it won the cascade tie-break) — our single-row header is only ~62px, so
   that stale 100px left a permanent ~38px blank gap above the hero on every
   mobile page. initSticky() already measures the real height into
   --hs-header-offset unconditionally (not desktop-gated); reuse it here,
   with `body` added purely to win on specificity rather than source order. */
body .fixed-header-space { height: var(--hs-header-offset, 62px) !important; }

@media (min-width: 1025px) {

  /* Scrolled state (added by haystack-header.js) — top bar slid out of view
     (see the transform above), subtle shadow. The top bar keeps its size and
     only fades as it leaves, so the rows below it never reflow. */
  .site-header.hs-scrolled { box-shadow: 0 4px 18px rgba(17,17,17,.045); }
  .site-header .blusho-top-bar { transition: opacity .35s ease; opacity: 1; }
  .site-header.hs-scrolled .blusho-top-bar { opacity: 0; pointer-events: none; }

  /* --- Single row: logo · nav · actions all on one line --- */
  .hs-single-row .hs-header-row {
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: clamp(.5rem, 1.2vw, 1.25rem); width: 100%;
    padding-top: .4rem; padding-bottom: .4rem;
  }

  .hs-header-logo { flex: 0 0 auto; margin: 0; }
  .hs-header-logo img, .hs-header-logo svg { max-height: 42px; width: auto; display: block; }

  /* nav column must never overflow its track (min-width:0 lets flex shrink it) */
  .hs-primary-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
  .hs-primary-nav > div { min-width: 0; display: flex; justify-content: center; flex: 1 1 auto; }
  .hs-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-left: auto; padding-left: 1.75rem; }
  /* clear separation between the search icon and the account/cart icons */
  .hs-header-actions .hs-search-toggle { margin-right: .35rem; }

  /* --- Primary nav bar --- */
  .hs-navbar {
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: clamp(.05rem, .25vw, .3rem);
    list-style: none; margin: 0; padding: 0; max-width: 100%;
  }
  /* Force top-level items static so the mega panel's containing block is the
     header (full width), not the narrow <li>. Theme sets these relative. */
  .blusho-navbar.hs-navbar > li,
  .blusho-navbar.hs-navbar > li.menu-item-has-children { position: static !important; }
  .hs-navbar > li > a {
    display: inline-flex; align-items: center; gap: .28rem;
    padding: 1.05rem .42rem !important; white-space: nowrap;
    font-size: clamp(.8rem, .7rem + .18vw, .92rem) !important; font-weight: 600 !important;
    letter-spacing: .04em; text-transform: uppercase; color: var(--lc-ink);
    line-height: 1; position: relative; transition: color .18s ease;
  }
  .hs-navbar > li > a:hover { color: #000; }
  /* underline indicator */
  .hs-navbar > li > a::after {
    content: ""; position: absolute; left: .3rem; right: .3rem; bottom: .65rem; height: 2px;
    background: var(--lc-ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .hs-navbar > li:hover > a::after,
  .hs-navbar > li:focus-within > a::after,
  .hs-navbar > li.current-menu-item > a::after,
  .hs-navbar > li.current-menu-ancestor > a::after { transform: scaleX(1); }
  /* chevron for parents */
  .hs-navbar > li.menu-item-has-children > a::before {
    content: ""; order: 2; width: 8px; height: 8px; margin-left: .1rem;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; opacity: .7;
  }
  .hs-navbar > li.menu-item-has-children:hover > a::before { transform: rotate(225deg) translateY(2px); opacity: 1; }
  /* hide the theme's own caret <b class="caret"> so there's only ONE chevron */
  .hs-navbar .caret, .hs-navbar b.caret,
  .hs-navbar .dropdown-toggle > .caret { display: none !important; }

  /* The theme reserves space with .fixed-header-space for ITS fixed header;
     we manage the offset ourselves (--hs-header-offset on .site), so collapse
     it — this removes the large empty gap under the nav on every page. */
  .fixed-header-space { display: none !important; }

  /* --- Mega-menu panel (theme markup: ul.dropdown-menu.depth_0) --- */
  .hs-navbar > li.menu-item-has-children > .dropdown-menu {
    position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important;
    width: auto !important; min-width: 0 !important; max-width: 1160px !important;
    margin: 0 auto !important; list-style: none;            /* centred + constrained → 5x2 */
    background: #fff; border: 0; border-top: 1px solid var(--lc-line); border-radius: 0 0 14px 14px;
    box-shadow: 0 22px 44px rgba(17,17,17,.11);
    /* Hide via display (the theme controls opacity/visibility, so we don't fight
       it). Force opacity/visibility visible so nothing else re-hides it. */
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    pointer-events: none; z-index: 999;
    display: none !important; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: .2rem clamp(1rem, 2vw, 2.25rem);
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 3rem) !important;
    overflow: visible;
  }
  /* Invisible hover-bridge filling the deadspace between the nav item and the
     panel. It's a child of the panel (⇒ of the <li>), so stopping the cursor in
     the gap still counts as hovering the item and the menu stays open. */
  .hs-navbar > li.menu-item-has-children > .dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
  }
  /* Show is driven by JS hover-intent (.hs-hovering) with a close-delay so the
     menu never drops while the cursor crosses the gap; plus keyboard + touch. */
  .hs-navbar > li.menu-item-has-children.hs-hovering > .dropdown-menu,
  .hs-navbar > li.menu-item-has-children:focus-within > .dropdown-menu,
  .hs-navbar > li.menu-item-has-children.hs-open > .dropdown-menu {
    display: grid !important; pointer-events: auto !important;
  }

  /* first-level items inside the panel = column headings */
  .hs-navbar > li > .dropdown-menu > li { break-inside: avoid; margin-bottom: 1rem; list-style: none; }
  .hs-navbar > li > .dropdown-menu > li > a {
    display: block; font-size: .95rem; font-weight: 600; color: var(--lc-ink);
    padding: .25rem 0; letter-spacing: .01em; text-transform: none; line-height: 1.3;
  }
  .hs-navbar > li > .dropdown-menu > li > a:hover { color: var(--lc-muted); }

  /* second-level (grandchildren) render as a static list under the heading */
  .hs-navbar .dropdown-menu .dropdown-menu {
    position: static !important; display: block !important; opacity: 1 !important;
    visibility: visible !important; transform: none !important; pointer-events: auto !important;
    box-shadow: none !important; border: 0 !important; background: none !important;
    padding: .15rem 0 0 !important; margin: 0 !important;
    grid-template-columns: none !important; width: auto !important; max-height: none !important;
  }
  /* grandchildren align flush with the column heading (theme adds 30px indent) */
  .hs-navbar .dropdown-menu .dropdown-menu > li { margin: 0 !important; padding: 0 !important; list-style: none; }
  .hs-navbar .dropdown-menu .dropdown-menu > li > a {
    display: block; font-size: .85rem; font-weight: 400; color: var(--lc-body);
    padding: .18rem 0 !important; text-transform: none; letter-spacing: 0; line-height: 1.3;
  }
  .hs-navbar .dropdown-menu .dropdown-menu > li > a:hover { color: var(--lc-ink); }
  /* hide the theme's own caret/toggle arrows inside the panel */
  .hs-navbar .dropdown-menu .dropdown-toggle::after,
  .hs-navbar .dropdown-menu .rt-dropdown-icon { display: none !important; }

  /* actions: search icon + account + cart sizing */
  .hs-header-actions .menu-icon-wrapper { margin: 0; }
  .hs-header-actions .menu-icon-action { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
  .hs-header-actions .menu-icon-action > li > a,
  .hs-header-actions .hs-search-toggle { padding: .4rem; }
  .hs-header-actions i { font-size: 21px; color: var(--lc-ink); }
}

/* Compact desktop (1025–1300): tightest so the single row never overlaps */
@media (min-width: 1025px) and (max-width: 1300px) {
  .hs-navbar { gap: .02rem; }
  .hs-navbar > li > a { padding-left: .3rem !important; padding-right: .3rem !important; font-size: .78rem !important; letter-spacing: .03em; }
  .hs-navbar > li > a::after { left: .3rem; right: .3rem; }
  .hs-header-logo img, .hs-header-logo svg { max-height: 36px; }
}

/* ==========================================================================
   §B/§C  Content top spacing — trim the oversized empty gap between the fixed
   header and the first section. The announcement-bar section carried ~155px of
   Elementor top padding (45px section + 110px widget) meant for a non-fixed
   header; bring it up close to the nav.
   ========================================================================== */
.elementor-widget-container:has(.rt-marquee-slider) { padding-top: 0 !important; }
.elementor-section:has(> .elementor-container .rt-marquee-slider),
.elementor-top-section:has(.rt-marquee-slider),
.e-con:has(.rt-marquee-slider) { padding-top: clamp(.5rem, 1vw, 1rem) !important; }
/* General safety cap: no first content section should push more than ~2.25rem
   under the header (keeps intended breathing room, kills excessive gaps). */
@media (min-width: 1025px) {
  .site-content > .elementor > .elementor-section:first-child,
  .site-content > .elementor > .e-con:first-child { padding-top: min(2.25rem, 45px) !important; }
}

/* ==========================================================================
   §C  Mobile bottom navigation — keep only Search · Profile · Cart, restyle
   ========================================================================== */
/* These icons live in the shared .menu-icon-action list (header + bottom bar).
   Remove Shop-grid, Compare and Wishlist everywhere they appear. */
li.rt-shop-page,
li.header-compare-icon,
li.header-wishlist-icon,
.menu-icon-action li.rt-shop-page,
.menu-icon-action li.header-compare-icon,
.menu-icon-action li.header-wishlist-icon,
.menu-icon-action li:has(.icon-rt-grid-two),
.mobile-action-button li:has(.icon-rt-grid-two) { display: none !important; }

.mobile-action-button {
  justify-content: space-around;
  gap: 0;
  padding: .35rem 0 max(.35rem, env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -2px 18px rgba(17,17,17,.08);
  border-top: 1px solid var(--lc-line);
}
.mobile-action-button .action-icon,
.mobile-action-button > * { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.mobile-action-button i { font-size: 23px; color: var(--lc-ink); transition: color .15s ease, transform .1s ease; }
.mobile-action-button a:active i { transform: translateY(1px); }
.mobile-action-button .current-menu-item i,
.mobile-action-button a[aria-current="page"] i { color: var(--lc-ink); }
/* tidy the cart count bubble */
.mobile-action-button .rt-cart-count, .mobile-action-button .cart-count {
  font-size: 11px; font-weight: 600; min-width: 17px; height: 17px; line-height: 17px;
}
/* Fix the cart-count badge: theme sets left:117px which throws it off-screen.
   Pin it as a compact number bubble at the cart icon's top-right; hide "Item". */
.mobile-action-button .rt-cart-icon,
.mobile-action-button .rt-cart-float-inner { position: relative; }
.mobile-action-button .rtsb-cart-icon-num {
  position: absolute; left: 52%; right: auto !important; top: -1px !important;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--lc-ink); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; white-space: nowrap;
}
.mobile-action-button .rtsb-cart-icon-num .items { display: none; }

/* ==========================================================================
   §C  Search: hide the persistent bar; a search icon opens a popup instead
   (icon + popup markup added in the child header template)
   ========================================================================== */
.hs-search-open .hs-search-overlay { opacity: 1; visibility: visible; }
/* Lock the background from scrolling while the search popup is open
   (results scroll inside their own panel). */
html.hs-search-open, html.hs-search-open body { overflow: hidden !important; }
.hs-search-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(17,17,17,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  display: flex; align-items: flex-start; justify-content: center;
}
.hs-search-overlay__panel {
  width: min(760px, 92vw); margin-top: clamp(80px, 12vh, 160px);
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(17,17,17,.22);
  padding: clamp(1rem, 2vw, 1.75rem); transform: translateY(-12px);
  transition: transform .25s ease;
}
.hs-search-open .hs-search-overlay__panel { transform: translateY(0); }
.hs-search-overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.hs-search-overlay__title { font-size: var(--lc-fs-eyebrow); text-transform: uppercase; letter-spacing: .08em; color: var(--lc-muted); }
.hs-search-close,
.hs-search-close:hover, .hs-search-close:focus, .hs-search-close:active, .hs-search-close:focus-visible {
  background: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
  cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--lc-ink); padding: .25rem;
  transition: color .18s ease, transform .1s ease;
}
.hs-search-close:hover { color: var(--lc-muted) !important; }
.hs-search-close:active { transform: scale(.9); }
/* The persistent header search bar becomes the popup content; hide it in-header */
.header-custom-search { display: none !important; }
.hs-search-overlay .header-custom-search { display: block !important; }
/* Search toggle icon button sits with the other header icons */
.hs-search-toggle,
.hs-search-toggle:hover,
.hs-search-toggle:focus,
.hs-search-toggle:active,
.hs-search-toggle:focus-visible {
  background: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
  cursor: pointer; padding: .35rem; color: var(--lc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s ease, transform .1s ease;
}
.hs-search-toggle:hover { color: var(--lc-muted) !important; } /* subtle only, no box */
.hs-search-toggle:active { transform: scale(.92); }
/* Kill the hover jitter: the SVG inherited transition:all, so the colour hover
   animated its geometry a sub-pixel. Transition colour only, never layout. */
.hs-search-toggle svg { width: 22px; height: 22px; transition: none !important; transform: none !important; }

/* --- Search results panel (modern instant-search) ------------------------ */
.hs-search-overlay__panel { max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.hs-search-overlay .header-custom-search { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hs-search-overlay .rt-search-box-wrap { flex: 0 0 auto; }
/* Results flow inside the popup (theme renders them absolutely) and scroll */
.hs-search-overlay .result-wrap {
  position: static !important; display: block !important; width: 100% !important;
  box-shadow: none !important; border: 0 !important; background: none !important;
  margin: 1rem 0 0 !important; padding: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important; max-height: 62vh !important; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--lc-line);
}
.hs-search-overlay .result-wrap ul { list-style: none; margin: 0; padding: 0; }
.hs-search-overlay .result-wrap li {
  display: flex !important; align-items: center; gap: .9rem;
  padding: .7rem .25rem !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--lc-line) !important;
  transition: background .12s ease;
}
.hs-search-overlay .result-wrap li:last-child { border-bottom: 0 !important; }
.hs-search-overlay .result-wrap li:hover { background: #faf7f4 !important; }
.hs-search-overlay .result-wrap .thumb { flex: 0 0 auto; width: 54px; height: 54px; }
.hs-search-overlay .result-wrap .thumb a { display: block; width: 54px; height: 54px; }
.hs-search-overlay .result-wrap .thumb img { width: 54px; height: 54px; object-fit: contain; border-radius: 6px; background: #f6f2ef; }
.hs-search-overlay .result-wrap .content { min-width: 0; flex: 1 1 auto; }
.hs-search-overlay .result-wrap .title { font-size: .92rem !important; font-weight: 500 !important; line-height: 1.35 !important; margin: 0 0 .15rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.hs-search-overlay .result-wrap .title a { color: var(--lc-ink); }
.hs-search-overlay .result-wrap .title a:hover { color: var(--lc-muted); }
.hs-search-overlay .result-wrap .price, .hs-search-overlay .result-wrap .rt-price { font-size: .9rem; font-weight: 600; color: var(--lc-ink); }
.hs-search-overlay .result-wrap .price del, .hs-search-overlay .result-wrap .price del .amount { color: var(--lc-muted); font-weight: 400; margin-right: .35rem; }
/* Category suggestions get a subtle label look */
.hs-search-overlay .result-wrap .search-category-item .title strong { font-weight: 600; }
.hs-search-overlay .result-wrap .search-category-item .thumb img { background: #efe9e4; }
/* "No product found" */
.hs-search-overlay .result-wrap li:only-child .title { font-size: .95rem !important; color: var(--lc-muted); padding: .5rem 0; }

/* ==========================================================================
   §B/UX  Footer — was oversized: 36px column titles, 28px links, ~940px tall.
   ========================================================================== */
.site-footer .main-title,
.site-footer .main-title.title-gradient-animation {
  font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1.1rem !important;
}
/* Newsletter promo heading — sane, not 36px */
.site-footer .footer-subscribe .main-title,
.site-footer [class*="subscribe"] .main-title,
.site-footer [class*="newsletter"] .main-title {
  font-size: 1.3rem !important; letter-spacing: .01em; text-transform: none; line-height: 1.3 !important;
}
.site-footer a, .site-footer li a, .site-footer .menu-item a,
.site-footer p, .site-footer .rt-address, .site-footer .address, .site-footer li {
  font-size: .92rem !important; line-height: 1.6 !important;
}
.site-footer .info-title { font-size: .95rem !important; }
.site-footer .phone a, .site-footer .footer-phone a, .site-footer .rt-phone,
.site-footer [class*="phone"] a { font-size: 1.05rem !important; font-weight: 600; }

/* Tighten vertical rhythm + cut the excessive footer height */
.site-footer .menu li, .site-footer .menu-item { margin-bottom: .15rem !important; }
.site-footer .elementor-widget:not(:last-child) { margin-bottom: .9rem !important; }
/* The main footer section carried 100px top + 100px bottom padding on its inner
   container (plus 56/32 on the section) — ~156px of empty space each end. Cut it. */
.site-footer .e-con > .e-con-inner,
.site-footer .e-con-inner {
  padding-top: clamp(1.25rem, 2vw, 1.75rem) !important;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem) !important;
}
.site-footer > .elementor > .e-con,
.site-footer .elementor > .elementor-element.e-con {
  padding-top: clamp(.9rem, 1.6vw, 1.35rem);
  padding-bottom: clamp(.6rem, 1.2vw, 1rem);
}
/* copyright bar: keep it slim */
.site-footer .e-con:last-child .e-con-inner { padding-top: 1rem !important; padding-bottom: 1rem !important; }
/* social icons row */
.site-footer .social-icon a, .site-footer .footer-social a,
.site-footer [class*="social"] a { font-size: 1rem !important; }

/* Rebalance: drop the duplicated address in the newsletter column (it already
   lives in the "OUR ADDRESS" column) so the columns aren't forced tall. */
.site-footer .elementor-element-ae1fc26 { display: none !important; }

/* Social icons + copyright relocated (via JS) under the subscribe field,
   left-aligned with the rest of the newsletter column. */
.site-footer .hs-footer-col .elementor-element-cb1d6d6 { margin-top: 1.25rem !important; text-align: left !important; }
.site-footer .hs-footer-col .elementor-element-cb1d6d6 .social-icon { display: flex; gap: .5rem; justify-content: flex-start; margin: 0; }
.site-footer .hs-footer-col .elementor-element-3ea45b5 { margin-top: 1rem; text-align: left; }
.site-footer .hs-footer-col .elementor-element-3ea45b5,
.site-footer .hs-footer-col .elementor-element-3ea45b5 * { font-size: .85rem; color: var(--lc-muted); letter-spacing: 0; }

/* ==========================================================================
   §H  Back-in-stock form — brand styling (plugin ships sky-blue)
   ========================================================================== */
.cwginstock-subscribe-form__form,
.cwginstock-subscribe-form .panel {
  border: 1px solid var(--lc-line) !important; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: none !important;
}
/* Brand the header bar (plugin ships Bootstrap sky-blue). */
.cwginstock-subscribe-form .panel-heading,
.cwginstock-panel-heading,
.cwginstock-subscribe-form__title, .cwg_title, .cwginstock-header {
  background: var(--lc-ink) !important; color: #fff !important; border: 0 !important;
  text-transform: none; font-weight: 600; letter-spacing: .01em;
}
.cwginstock-subscribe-form .panel-title { color: #fff !important; }
/* Kill the stray black bars: the input group must not inherit a dark bg. */
.cwginstock-subscribe-form .form-group,
.cwginstock-subscribe-form__form .form-group { background: transparent !important; margin-bottom: .75rem; }
.cwgstock_email, .cwgstock_name,
.cwginstock-subscribe-form__form input[type="email"],
.cwginstock-subscribe-form__form input[type="text"] {
  border: 1px solid var(--lc-line) !important; border-radius: var(--lc-radius) !important;
  padding: .7em .9em !important; text-align: left !important; background: #fff !important;
}
.cwgstock_button, .cwginstock-subscribe-form__form button,
.cwginstock-subscribe-form__form input[type="submit"] {
  background: var(--lc-ink) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--lc-radius) !important; text-transform: uppercase; font-weight: 600; letter-spacing: .04em;
}
.cwgstock_button:hover { opacity: .9; }
.cwg_gdpr_wrapper, .cwginstock-gdpr, [class*="cwg"][class*="gdpr"] { font-size: .82rem; color: var(--lc-muted); margin-top: .5rem; }
.hs-bis-consent { font-size: .78rem; color: var(--lc-muted); line-height: 1.45; margin: 0; padding: .75rem 1rem 1rem; }
.hs-bis-consent a { text-decoration: underline; color: var(--lc-ink); }

/* ==========================================================================
   §J  Blog & Social — remove Pinterest links + blog comment counters
   ========================================================================== */
.social-icon a[href*="pinterest"],
.offcanvas-social-icon a[href*="pinterest"],
a[href*="pinterest.com"] { display: none !important; }
.rtsb-post-meta .rtsb-meta-item.comments,
.rtsb-meta-item.comments,
.rtsb-post-comment, .post-comment-count, [class*="comment-count"],
.blog .comments-area, .single-post .comments-area, #comments { display: none !important; }

/* ==========================================================================
   §I  Cart Totals + Checkout "Your Order" — style, responsiveness, UI/UX
   ========================================================================== */
/* NOTE: the §I stacking/subheading rules below are scoped to .site-content so
   they NEVER touch the mini-cart / float-cart drawer (which is body-level and
   reuses .site-content .cart_totals). The drawer keeps its own original layout untouched. */

.site-content .cart_totals .shop_table,
.site-content .woocommerce-checkout-review-order-table,
.site-content .cart_totals table.shop_table { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; }
/* Long shipping-description URLs must break, not widen the table */
.shipping_method_description, .shipping_method_description small, small.smdfw,
.woocommerce-shipping-methods small, .woocommerce-shipping-methods .smdfw {
  display: block; word-break: break-all !important; overflow-wrap: anywhere !important;
  font-size: .8rem; color: var(--lc-muted); line-height: 1.4;
}

.site-content .cart_totals .shop_table th, .site-content .cart_totals .shop_table td,
.site-content .woocommerce-checkout-review-order-table th, .site-content .woocommerce-checkout-review-order-table td {
  padding: .8rem .5rem; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--lc-line); font-size: .95rem; overflow-wrap: anywhere;
}
.site-content .cart_totals .shop_table th { font-weight: 600; color: var(--lc-ink); width: 34%; white-space: nowrap; }
.site-content .cart_totals .shop_table .order-total th,
.site-content .cart_totals .shop_table .order-total td { font-size: 1.05rem; font-weight: 700; border-bottom: 0; }

/* Product line items: wide title cell, narrow price cell (prices are short) */
.site-content .woocommerce-checkout-review-order-table tbody td { padding: .4rem 0 !important; margin: 0 !important; vertical-align: top; border-bottom: 1px solid var(--lc-line); }
.site-content .woocommerce-checkout-review-order-table td.product-name,
.site-content .woocommerce-checkout-review-order-table th.product-name {
  padding-right: .4rem !important; overflow-wrap: break-word; line-height: 1.4; font-size: .9rem;
}
/* kill the inner margins on the product name / variation / quantity */
.site-content .woocommerce-checkout-review-order-table td.product-name > *,
.site-content .woocommerce-checkout-review-order-table td.product-name p,
.site-content .woocommerce-checkout-review-order-table td.product-name .variation,
.site-content .woocommerce-checkout-review-order-table td.product-name dl { margin: 0 !important; padding: 0 !important; }
.site-content .woocommerce-checkout-review-order-table td.product-name a { color: var(--lc-ink); font-weight: 500; }
.site-content .woocommerce-checkout-review-order-table td.product-total,
.site-content .woocommerce-checkout-review-order-table th.product-total {
  width: 26% !important; text-align: right !important; white-space: nowrap; font-weight: 600; font-size: .9rem;
}
.site-content .woocommerce-checkout-review-order-table .product-quantity,
.site-content .woocommerce-checkout-review-order-table .product-name .quantity { color: var(--lc-muted); font-size: .85rem; }
.site-content .woocommerce-checkout-review-order-table .variation { margin: .3rem 0 0; font-size: .82rem; color: var(--lc-muted); }
.site-content .woocommerce-checkout-review-order-table .variation dt, .site-content .woocommerce-checkout-review-order-table .variation dd { display: inline; margin: 0; }

/* Shipping method radios — aligned, URLs wrap, no horizontal overflow */
#shipping_method, .woocommerce-shipping-methods { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#shipping_method li, .woocommerce-shipping-methods li {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .3rem .45rem; margin: 0 0 .65rem !important;
}
#shipping_method li input[type="radio"] { margin: .2rem 0 0 !important; flex: 0 0 auto; }
#shipping_method li > label { flex: 0 1 auto; min-width: 0; margin: 0 !important; font-weight: 500; overflow-wrap: break-word; word-break: normal; line-height: 1.4; }
/* description ("View map" link) sits INLINE with the shipping label */
#shipping_method li .shipping_method_description, .shipping_method_description {
  flex: 0 1 auto; width: auto; margin: 0 0 0 .5rem;
}
.hs-view-map {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; color: var(--lc-ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px; word-break: normal !important;
}
.hs-view-map::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
}
.shipping td, .woocommerce-shipping-totals td { overflow-wrap: anywhere; }
.woocommerce-shipping-methods a { overflow-wrap: anywhere; word-break: break-all; color: var(--lc-muted); }
.shipping-calculator-button { display: inline-block; margin-top: .35rem; font-size: .85rem; text-decoration: underline; }

/* VAT breakdown small + muted */
.site-content .cart_totals small.includes_tax, .includes_tax, .woocommerce-Price-taxLabel { color: var(--lc-muted); font-size: .8rem; font-weight: 400; }

/* Proceed-to-checkout button (was white text on transparent = invisible) */
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .checkout-button, a.checkout-button {
  background: var(--lc-ink) !important; background-color: var(--lc-ink) !important; color: #fff !important;
  display: block; width: 100%; text-align: center; padding: .95em 1.5em !important;
  border-radius: var(--lc-radius) !important; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; margin-top: 1rem;
}
.wc-proceed-to-checkout a.checkout-button:hover, a.checkout-button:hover { opacity: .9; }

/* Coupon field tidy */
.coupon input.input-text, #coupon_code, input#coupon_code {
  border: 1px solid var(--lc-line) !important; border-radius: var(--lc-radius) !important; padding: .7em .9em !important;
}

/* Seamless payment section — remove the boxy outer/inner borders (keep the
   actual card-input fields defined for usability). */
#payment, .woocommerce-checkout-payment,
.woocommerce-checkout #payment,
.wc_payment_methods, li.wc_payment_method,
.wc_payment_method > .payment_box, .payment_box,
.wc-payment-form, .wc-upe-form {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}
#payment { padding-left: 0 !important; padding-right: 0 !important; }
.payment_box::before { display: none !important; } /* remove the little callout arrow */
/* keep card input fields visually defined */
.wc-upe-element, #wc-stripe-upe-element, .StripeElement,
.wc-payment-form .input-text, .woocommerce-checkout-payment input.input-text {
  border: 1px solid var(--lc-line) !important; border-radius: var(--lc-radius) !important; background: #fff !important;
}

/* Stack the TOTALS rows: subtitle on its own line, details full-width below —
   avoids the cramped 2-column split in the narrow cart/checkout sidebar.
   (Product line-items stay 2-col: name left, price right.) */
.site-content .cart_totals .shop_table tr,
.site-content .woocommerce-checkout-review-order-table tr.cart-subtotal,
.site-content .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
.site-content .woocommerce-checkout-review-order-table tr.order-total,
.site-content .woocommerce-checkout-review-order-table tr.tax-total,
.site-content .woocommerce-checkout-review-order-table tr.fee,
.site-content .woocommerce-checkout-review-order-table tr.cart-discount {
  display: flex !important; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--lc-line); border-top: 0;
}
.site-content .cart_totals .shop_table tr:last-child,
.site-content .woocommerce-checkout-review-order-table tr.order-total { border-bottom: 0; }
/* Label (th) — content width, left. */
.site-content .cart_totals .shop_table tr > th,
.site-content .woocommerce-checkout-review-order-table tr.cart-subtotal > th,
.site-content .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
.site-content .woocommerce-checkout-review-order-table tr.order-total > th,
.site-content .woocommerce-checkout-review-order-table tr.tax-total > th,
.site-content .woocommerce-checkout-review-order-table tr.fee > th,
.site-content .woocommerce-checkout-review-order-table tr.cart-discount > th {
  display: block !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important;
  text-align: left !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  white-space: nowrap !important; font-size: .82rem !important; text-transform: uppercase; letter-spacing: .06em;
  color: var(--lc-ink) !important; font-weight: 700 !important;
}
/* Value (td) — fills the rest, right-aligned like the item prices. */
.site-content .cart_totals .shop_table tr > td,
.site-content .woocommerce-checkout-review-order-table tr.cart-subtotal > td,
.site-content .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td,
.site-content .woocommerce-checkout-review-order-table tr.order-total > td,
.site-content .woocommerce-checkout-review-order-table tr.tax-total > td,
.site-content .woocommerce-checkout-review-order-table tr.fee > td,
.site-content .woocommerce-checkout-review-order-table tr.cart-discount > td {
  display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important;
  text-align: right !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  white-space: normal !important;
}
.site-content .woocommerce-checkout-review-order-table tr.order-total td,
.site-content .woocommerce-checkout-review-order-table tr.order-total th { font-size: 1.05rem !important; }
.site-content .woocommerce-checkout-review-order-table tr.order-total > td > strong .amount { font-size: 1.15rem; font-weight: 700; }
.site-content .woocommerce-checkout-review-order-table tr.order-total .includes_tax {
  display: block; width: 100%; margin-top: .3rem; font-size: .78rem; font-weight: 400;
}
.site-content .woocommerce-checkout-review-order-table tr.order-total .includes_tax .amount { font-size: .78rem; font-weight: 400; }
.site-content .woocommerce-checkout-review-order-table thead { display: none; }

/* ==========================================================================
   §F  Remove Compare / Wishlist / Quick View / Star ratings (defensive hide)
   Primary removal is done at source (ShopBuilder modules + WC rating option);
   these rules guarantee no residual markup renders anywhere.
   ========================================================================== */
.rtsb-quick-view-btn, .rtsb-quick-view, a.rtsb-quick-view,
.rtsb-compare-btn, .rtsb-compare, a.compare, .compare-button,
.rtsb-wishlist-btn, .rtsb-wishlist, .yith-wcwl-add-to-wishlist,
.add_to_wishlist, .rtsb-add-to-wishlist,
.rtsb-loop-actions .rtsb-quick-view,
.rtsb-loop-actions .rtsb-compare,
.rtsb-loop-actions .rtsb-wishlist,
.rtsb-icon-wishlist, .rtsb-icon-compare, .rtsb-icon-quick-view {
  display: none !important;
}
/* Header wishlist/compare counters */
.header-wishlist, .rtsb-header-wishlist, .rt-wishlist-menu,
.header-compare, .rtsb-header-compare { display: none !important; }

/* Star ratings (product cards, single product, reviews summary) */
.star-rating, .woocommerce-product-rating, .rtsb-product-rating,
.rtsb-rating, li.product .star-rating, .woocommerce-review__rating,
#reviews .comment-form-rating, .rtsb-loop-rating { display: none !important; }

/* Filter-by-star-rating widgets in the shop sidebar */
.woocommerce-widget-layered-nav-rating,
.widget_rating_filter, .rtsb-filter-rating,
.rtsb-shop-filter [data-filter="rating"],
.rtsb-filter-item.rtsb-filter-rating,
.rtsb-product-filters.rtsb-ratings { display: none !important; }

/* ==========================================================================
   §G  Shop, filters & product loading
   ========================================================================== */
/* Sticky desktop filter panel — stays in view while products scroll */
@media (min-width: 1025px) {
  .rtsb-archive-filters-wrapper.vertical-layout {
    position: sticky;
    top: var(--lc-sticky-offset, 120px);
    align-self: flex-start;
    max-height: calc(100vh - var(--lc-sticky-offset, 120px) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* Ensure the parent row allows the sticky child to work (no overflow clip) */
  .rtsb-archive-filters-wrapper.vertical-layout,
  .rtsb-shop-page-wrapper, .rtsb-archive-content-wrap { overflow: visible; }
}

/* Infinite scroll: hide the Load More button (auto-loaded via JS), keep an
   accessible focus target + show the spinner only while a page is loading. */
.rtsb-infinite-on .rtsb-archive-pagination-wrap .rtsb-load-more {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rtsb-infinite-sentinel { width: 100%; height: 1px; }
.rtsb-infinite-loading-indicator {
  display: none; text-align: center; padding: 1.5rem 0;
  font-size: var(--lc-fs-small); letter-spacing: .04em; text-transform: uppercase; color: var(--lc-muted);
}
.rtsb-infinite-on.is-loading .rtsb-infinite-loading-indicator { display: block; }

/* --- Filter panel UI/UX (§G) --------------------------------------------- */
/* Titles: §B section-normalisation blew these up to 36px — bring them down to
   a compact, uppercase filter heading. */
.rtsb-product-filters .widget-title,
.rtsb-product-filters .widget-title .title,
.filter-title-wrapper .widget-title,
.filter-title-wrapper .widget-title .title,
.rtsb-shop-filters .widget-title,
.rtsb-archive-filters-wrapper .widget-title,
.rtsb-archive-filters-wrapper .widget-title .title {
  font-size: .9rem !important; font-weight: 600 !important; line-height: 1.3 !important;
  text-transform: uppercase; letter-spacing: .07em; color: var(--lc-ink); margin: 0 !important;
}
.filter-title-wrapper { margin-bottom: .9rem; padding-bottom: 0; align-items: center; }

/* Tighten the space between filter groups + hairline dividers */
.rtsb-product-filters { margin-bottom: 1.25rem !important; padding-bottom: 1.25rem !important; border-bottom: 1px solid var(--lc-line); }
.rtsb-product-filters:last-child { border-bottom: 0; }

/* Option rows: readable, evenly spaced, clear hover */
.rtsb-product-filters .rtsb-checkbox-filter-label,
.rtsb-product-filters li label {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--lc-body); line-height: 1.4;
  padding: .28rem 0; margin: 0; cursor: pointer; transition: color .15s ease;
}
.rtsb-product-filters .rtsb-checkbox-filter-label:hover { color: var(--lc-ink); }
.rtsb-product-filters .rtsb-checkbox-filter-label .name { flex: 1 1 auto; }
.rtsb-product-filters .rtsb-count { color: var(--lc-muted); font-size: .8rem; font-weight: 400; }

/* Checkbox styling — square, brand-ink when checked */
.rtsb-product-filters input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 17px; height: 17px; border: 1.5px solid var(--lc-line); border-radius: 4px;
  background: #fff; cursor: pointer; position: relative; transition: border-color .15s, background .15s;
}
.rtsb-product-filters input[type="checkbox"]:hover { border-color: var(--lc-muted); }
.rtsb-product-filters input[type="checkbox"]:checked { background: var(--lc-ink); border-color: var(--lc-ink); }
.rtsb-product-filters input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Expand (+/–) toggles for categories with children + the group collapse */
.rtsb-product-filters .rtsb-child-indicator,
.filter-title-wrapper .rtsb-filter-toggle,
.rtsb-product-filters .has-child > .rtsb-toggle { color: var(--lc-muted); cursor: pointer; }

/* "+ More" link */
.rtsb-product-filters .rtsb-show-more,
.rtsb-product-filters .rtsb-more-less,
.rtsb-product-filters a.rtsb-more {
  display: inline-block; margin-top: .5rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--lc-ink); cursor: pointer;
}

/* Price filter: readable label + slider handles on brand ink */
.rtsb-product-filters .rtsb-price-label, .rtsb-product-filters .price_label { font-size: .9rem; color: var(--lc-body); margin-top: .75rem; }
.rtsb-product-filters .rtsb-price-label .amount, .rtsb-product-filters .price_label .amount { color: var(--lc-ink); font-weight: 600; }
.rtsb-product-filters .noUi-connect, .rtsb-product-filters .ui-slider-range { background: var(--lc-ink) !important; }
.rtsb-product-filters .noUi-handle, .rtsb-product-filters .ui-slider-handle { border-color: var(--lc-ink) !important; }

/* ============================================================= §E  BRAND PAGES
   Branded hero at the top of each /brand/{slug}/ product-taxonomy archive.
   Logo + blurb + product count, pulled from the brands CPT bridge (PHP). */
.hs-brand-hero {
  /* Full-bleed, edge to edge — the section itself sits inside the page's
     normal (narrower) container, so break out of it the same way the
     homepage promo bands do. */
  width: 100vw;
  margin: clamp(1rem, 2vw, 2rem) 0 clamp(1.5rem, 1rem + 2vw, 2.75rem) calc(50% - 50vw);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 1.25rem;
  background: #faf8f6;
  text-align: center;
}
.hs-brand-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hs-brand-hero__logo { display: flex; align-items: center; justify-content: center; }
.hs-brand-hero__logo-img {
  max-height: 96px;
  width: auto;
  max-width: min(260px, 70vw);
  height: auto;
  object-fit: contain;
}
.hs-brand-hero__wordmark {
  font-family: var(--lc-font);
  font-size: var(--lc-fs-h1);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--lc-ink);
  margin: 0;
  text-transform: uppercase;
}
.hs-brand-hero__blurb {
  font-size: var(--lc-fs-body);
  line-height: var(--lc-lh-base);
  color: var(--lc-body);
  margin: 0;
  max-width: 58ch;
}
.hs-brand-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.hs-brand-hero__count {
  font-size: var(--lc-fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.hs-brand-hero__story {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--lc-fs-small);
  font-weight: 600;
  color: var(--lc-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--lc-ink);
  padding-bottom: 1px;
  transition: opacity .15s ease;
}
.hs-brand-hero__story::after { content: "\2192"; font-weight: 400; }
.hs-brand-hero__story:hover { opacity: .6; }

/* Tidy the archive header spacing now the hero owns the title. */
.tax-product_brand .woocommerce-products-header { margin-bottom: 0; }
.tax-product_brand .woocommerce-products-header__title { display: none; }

/* ============================================================= §L  MOBILE PASS
   Modern 2-up product grid on phones (was 1-up) — matches how Sephora/ASOS et al
   present listings on mobile. Applies to the ShopBuilder shop/archive grid AND
   the theme's WooCommerce archives (brand/category). GRID view only — the
   list-view toggle (.rtsb-col-list) is intentionally left as full-width rows. */
@media (max-width: 767px) {
  /* ShopBuilder grid rows */
  .rtsb-row.rtsb-content-loader {
    flex-wrap: wrap !important;
    gap: 22px 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .rtsb-row.rtsb-content-loader > .rtsb-col-grid {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    margin: 0 !important;
  }
  /* Theme WooCommerce archive grid (brand / category fallback pages) */
  ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 12px !important;
    margin: 0 !important;
  }
  ul.products::before, ul.products::after { content: none !important; display: none !important; }
  ul.products > li.product {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  /* Tighten product card meta so two columns stay legible */
  .rtsb-col-grid .rtsb-product-title, ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }
}

/* §L cont. — trim the oversized top padding on archive/single content on phones
   (the fixed-header spacer already reserves room for the header). */
@media (max-width: 767px) {
  #primary.content-area,
  .section.content-area { padding-top: 26px !important; }

  /* Result-count and the sort dropdown collide when floated on a 375px row —
     stack them cleanly on mobile (theme WooCommerce archives). */
  .woocommerce-result-count {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 .6rem !important;
    text-align: left !important;
  }
  .rtsb-archive-catalog-ordering,
  .woocommerce-ordering {
    float: none !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
  }
  .rtsb-archive-catalog-ordering select,
  .woocommerce-ordering select,
  .rtsb-archive-catalog-ordering .orderby { width: 100% !important; max-width: 100% !important; }
}

/* ============================================================ §F  ADD TO CART
   Welbee's-style: a clean "−  n  +" quantity stepper beside a prominent,
   flex-growing add-to-cart button. Simple + variable products. */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
}
.hs-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-btn-radius, 8px);
  overflow: hidden;
  height: 52px;
  background: #fff;
  flex: 0 0 auto;
}
.hs-qty .hs-qty-btn {
  width: 44px;
  border: 0;
  background: #f6f4f2;
  color: var(--lc-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hs-qty .hs-qty-btn:hover { background: var(--lc-ink); color: #fff; }
.hs-qty input.qty {
  width: 54px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  color: var(--lc-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.hs-qty input.qty::-webkit-outer-spin-button,
.hs-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 220px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
}
/* Full-width button under the stepper on phones. */
@media (max-width: 767px) {
  .single-product form.cart .single_add_to_cart_button { flex: 1 1 100%; min-width: 0; }
  .hs-qty { flex: 1 1 100%; height: 50px; }
  .hs-qty input.qty { flex: 1 1 auto; width: auto; }
}

/* ================================================ ASOS-STYLE PRODUCT ROWS (§D2)
   Homepage category + edit carousels: heading left, "Shop now" right, then the
   product carousel. Rows are tagged .hs-prod-row / headers .hs-row-head by JS. */
.hs-prod-row .section-title-wrapper.hs-row-head {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 0 0 1.4rem !important;
  padding: 0;
  text-align: left !important;
}
.hs-prod-row .hs-row-head .title-inner-wrapper { text-align: left; margin: 0 !important; width: auto; }
.hs-prod-row .hs-row-head .main-title {
  text-align: left;
  margin: 0 !important;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem) !important;
  font-weight: 700;
  line-height: 1.1;
}
.hs-prod-row .hs-row-head .top-sub-title-wrap { text-align: left; justify-content: flex-start; margin-bottom: .25rem; }
.hs-prod-row .hs-row-head .top-sub-title { text-align: left; }
/* Drop the decorative eyebrow / "About" / description lines the base slider
   carried (they render as junk "Why Choose Our About" on the cloned rows). */
.hs-prod-row .hs-row-head .top-sub-title-wrap,
.hs-prod-row .hs-row-head .top-sub-title,
.hs-prod-row .hs-row-head .desc-wrapper,
.hs-prod-row .hs-row-head .section-desc,
.hs-prod-row .hs-row-head .title-desc { display: none !important; }

.hs-shop-now {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lc-ink);
  color: var(--lc-ink);
  background: transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .72em 1.5em;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.hs-shop-now:hover { background: var(--lc-ink); color: #fff; }

@media (max-width: 767px) {
  .hs-prod-row .section-title-wrapper.hs-row-head { margin-bottom: 1rem; }
  .hs-shop-now { font-size: .66rem; padding: .6em 1.1em; }
}

/* ============================================== ASOS-STYLE BRAND STRIP (§E2)
   "Shop by brand" heading + View all, over a clean, uniform logo row. */
/* The section is an Elementor flex-ROW container; force it to stack so the
   injected header sits ABOVE the logo row (not squished beside it). */
.hs-brand-strip.e-flex,
.hs-brand-strip > .e-con-inner {
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
.hs-brand-strip .hs-brand-head { flex: 0 0 auto; width: 100%; }
.hs-brand-strip .hs-brand-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 0 0 1.4rem; /* matches .hs-row-head/.hs-promo-row-head exactly */
  padding: 0;
}
.hs-brand-head-text h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--lc-ink);
}
.hs-brand-head-text p {
  margin: .35rem 0 0;
  color: var(--lc-muted);
  font-size: .95rem;
}
.hs-view-all {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lc-ink);
  color: var(--lc-ink);
  background: transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .72em 1.5em;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.hs-view-all:hover { background: var(--lc-ink); color: #fff; }

/* Original ShopBuilder logo-slider widget — hidden (display:none) by
   initBrandStrip() and replaced by the .hs-brand-swiper card row below, but
   left styled defensively in case that widget is ever re-shown. Always
   color, matching the card row (client request 2026-09-22). */
.hs-brand-strip .rtsb-logo-img img,
.hs-brand-strip .logo-content-wrapper img {
  max-height: 46px !important;
  width: auto !important;
  object-fit: contain;
}

@media (max-width: 767px) {
  .hs-brand-strip .hs-brand-head { margin-bottom: 1rem; } /* matches .hs-row-head's mobile value */
  .hs-view-all { font-size: .66rem; padding: .6em 1.1em; }
  .hs-brand-strip .rtsb-logo-img img { max-height: 38px; }
}

/* ============================ WELBEE'S-STYLE PRODUCT CARDS (§F2) — ALL GRIDS
   Bordered card box + a compact "+ Add" pill on the image. Applies to the
   ShopBuilder grids/carousels (.rtsb-col-grid) and the theme WooCommerce
   archives (ul.products li.product) — i.e. every page that lists products. */
.rtsb-col-grid.product .rtsb-grid-item,
ul.products li.product {
  position: relative;
  background: #f7f2ee; /* distinct from a plain white page/section, no border needed */
  overflow: hidden;
  height: 100%;
}
/* Inside an alternating "tint" homepage row, invert to white so the card
   still reads as distinct against THAT section's own tint background. */
.hs-band-tint .rtsb-col-grid.product .rtsb-grid-item,
.hs-band-tint ul.products li.product { background: #fff; }
/* image = positioning context for the +Add pill */
.rtsb-col-grid.product .rtsb-product-img,
ul.products li.product > a[class*="LoopProduct"],
ul.products li.product > a:first-of-type {
  position: relative;
  display: block;
}
/* keep card inner padding tidy now there's a border */
.rtsb-col-grid.product { padding-left: 6px !important; padding-right: 6px !important; }
.rtsb-col-grid.product .rtsb-grid-item > *:not(.rtsb-product-img) { padding-left: .85rem; padding-right: .85rem; }
.rtsb-col-grid.product .rtsb-grid-item > *:last-child { padding-bottom: .9rem; }
ul.products li.product { padding: 0 0 .9rem !important; }
ul.products li.product > *:not(a):not(.hs-add-btn) { padding-left: .85rem; padding-right: .85rem; }

/* +Add pill (brand black, not Welbee green) */
.hs-add-btn {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: .3em;
  background: var(--lc-ink); color: #fff;
  font-size: .8rem; font-weight: 600; line-height: 1;
  padding: .62em .95em; border-radius: 999px;
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease;
}
.hs-add-btn .hs-add-plus { font-size: 1.1em; font-weight: 700; margin-top: -1px; }
.hs-add-btn:hover { background: #000; color: #fff; transform: translateY(-1px); }
.hs-add-btn.is-disabled { background: #c4c0bb; cursor: default; box-shadow: none; }
.hs-add-btn.loading { opacity: .6; pointer-events: none; }
.hs-add-btn.added::after { content: "\2713"; margin-left: .2em; }

@media (max-width: 767px) {
  .hs-add-btn { font-size: .72rem; padding: .55em .8em; bottom: 8px; right: 8px; }
}

/* "− n +" stepper — replaces the pill in place once added_to_cart fires, so
   a shopper can bump quantity right from the card. Same position/colour as
   the pill it replaces, just a 3-part row instead of one label. */
.hs-add-stepper {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 4;
  display: inline-flex; align-items: center;
  background: var(--lc-ink); color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  line-height: 1;
}
.hs-add-stepper.is-busy { opacity: .6; pointer-events: none; }
.hs-add-stepper__btn {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 0;
}
.hs-add-stepper__btn:hover { background: rgba(255,255,255,.15); }
.hs-add-stepper__qty {
  min-width: 1.4em; text-align: center;
  font-size: .8rem; font-weight: 600;
  padding: 0 .15em;
}
@media (max-width: 767px) {
  .hs-add-stepper { bottom: 8px; right: 8px; }
  .hs-add-stepper__btn { width: 25px; height: 25px; font-size: .9rem; }
  .hs-add-stepper__qty { font-size: .72rem; }
}

/* Ensure +Add pill text stays white (theme colours <a> inside product cards). */
.hs-add-btn,
.hs-add-btn:hover,
.hs-add-btn:focus,
.hs-add-btn:visited,
.hs-add-btn.is-disabled { color: #fff !important; }

/* Hide ShopBuilder's built-in hover "Add to Cart" — the +Add pill replaces it. */
.rtsb-action-buttons .rtsb-cart,
.rtsb-action-button-item.rtsb-cart,
.rtsb-wc-add-to-cart-wrap,
.rtsb-action-btn.simple-product,
.rtsb-action-btn.product_type_simple { display: none !important; }
/* If the action-button rows are now empty, collapse them so they don't cover the image. */
.rtsb-action-buttons.bottom-part:empty,
.rtsb-action-buttons.top-part:empty { display: none !important; }

/* More breathing room between the homepage product rows. */
.hs-prod-row {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) !important;
  margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) !important;
}

/* Keep carousel arrows beneath the sticky header (they were z:10 > header z:9,
   so they bled over the nav bar on scroll). */
.rtsb-products-slider .swiper-arrow,
.rtsb-products-slider .swiper-nav,
.hs-prod-row .swiper-arrow,
.hs-prod-row .swiper-nav { z-index: 3 !important; }
.site-header { z-index: 50 !important; }

/* §H v2 — minimal back-in-stock form: no header bar, no outer box, keep only
   the input field borders. (Auto-emails subscribers when the product restocks.) */
.cwginstock-subscribe-form .panel-heading,
.cwginstock-panel-heading { display: none !important; }
.cwginstock-subscribe-form__form,
.cwginstock-subscribe-form .panel,
.cwginstock-subscribe-form .panel-body,
.cwginstock-subscribe-form .panel-primary {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Card consistency: apply the bordered box to EVERY product card site-wide
   (related products, up-sells, cross-sells, widget grids), not just the shop. */
li.product {
  position: relative;
  background: #f7f2ee; /* distinct from a plain white page/section, no border needed */
  overflow: hidden;
}
.hs-band-tint li.product { background: #fff; }
li.product > a[class*="LoopProduct"],
li.product > a:first-of-type { position: relative; display: block; }

/* -------------------- Trust bar: soft band + circular icons, centered */
.hs-trust { background: #f4ede7 !important; }
.hs-trust > .e-con-inner { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.hs-trust .info-box {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .55rem;
}
.hs-trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--lc-ink); box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.hs-trust-icon svg { width: 24px; height: 24px; }
.hs-trust .info-title { margin: 0 !important; }
.hs-trust .info-content-holder { display: flex; flex-direction: column; align-items: center; gap: .1rem; }

/* Trust-bar band bg — higher specificity to beat Elementor's element rule. */
body .hs-trust,
.hs-trust.e-con,
.hs-trust.e-con-full { background-color: #f4ede7 !important; }

/* ============================================ §L2  MOBILE QA FIXES
   Homepage carousels were cramped on phones: hide the overlapping side arrows
   (users swipe), square the product images so "+ Add" clears the sale badge,
   and clamp long titles. */
@media (max-width: 1024px) {
  .hs-prod-row .swiper-arrow,
  .hs-prod-row .swiper-nav { display: none !important; }
}
@media (max-width: 767px) {
  .hs-prod-row .rtsb-product-img,
  .hs-prod-row .rtsb-product-img figure { aspect-ratio: 1 / 1; height: auto; }
  .hs-prod-row .rtsb-product-img img {
    width: 100%; height: 100%; object-fit: contain;
  }
  .hs-prod-row .rtsb-product-title,
  .hs-prod-row .product-title,
  .hs-prod-row .woocommerce-loop-product__title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.4em;
  }
  /* Trust bar as a compact 2×2 grid on phones (was a tall single column). */
  .hs-trust > .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1rem !important;
  }
  .hs-trust > .e-con-inner > * { width: auto; max-width: 100%; }
}

/* §L2b — Mobile: the ShopBuilder swiper mis-lays-out on phones (tiny slides,
   empty gutter). Convert it to a native horizontal scroll-snap row. */
@media (max-width: 767px) {
  .hs-prod-row .swiper { overflow: visible !important; }
  .hs-prod-row .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 0 10px;
    scrollbar-width: none;
  }
  .hs-prod-row .swiper-wrapper::-webkit-scrollbar { display: none; }
  .hs-prod-row .swiper-slide {
    width: 44% !important;
    min-width: 44% !important;
    max-width: 44% !important;
    flex: 0 0 44% !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
    height: auto !important;
  }
  .hs-prod-row .product-title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.4em;
  }
}

/* §L2c — Mobile: swiper won't lay out reliably in the cloned rows, so render
   the category products as a clean 2-col grid on phones (like the shop). */
@media (max-width: 767px) {
  .hs-prod-row .swiper { overflow: visible !important; }
  .hs-prod-row .swiper-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    transform: none !important;
    gap: 20px 12px !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .hs-prod-row .swiper-slide {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    flex: none !important; margin: 0 !important; transform: none !important; height: auto !important;
  }
  /* Site-wide "Infinite Loop" was switched on for every product-row slider
     2026-09-22 (client: carousels should continue seamlessly like the hero,
     not stop/snap at the end) — deliberately skipped in an earlier pass for
     exactly this reason: Swiper's loop mode works by DUPLICATING slide DOM
     nodes (tagged .swiper-slide-duplicate) and positioning the clones via
     its own transform-based layout, which this override strips out
     (`transform:none`) to turn every child into a plain static grid cell —
     without this rule, the clones would show up as genuinely repeated
     products in the mobile grid. Hiding them here is the fix, not avoiding
     loop mode altogether. */
  .hs-prod-row .swiper-slide-duplicate { display: none !important; }
  .hs-prod-row .product-title,
  .hs-prod-row [class*="product-title"] {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; min-height: 2.35em; white-space: normal !important;
  }
}

/* §L2d — ROOT FIX: the carousel wrapper carried a half-width `rtsb-col-grid`
   class (~170px) on mobile, squishing every card. Force it full width. */
@media (max-width: 767px) {
  .hs-prod-row .rtsb-carousel-slider,
  .hs-prod-row .rtsb-col-grid.rtsb-carousel-slider {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}

/* Desktop GLOV hero: the promo banner was object-fit:cover, cropping to a blank
   region (right half looked empty). Contain shows the full banner. */
@media (min-width: 1025px) {
  .elementor-element-fed099e img.attachment-full,
  .elementor-element-fed099e img.size-full { object-fit: contain !important; }
}

/* =============================== §L3  MOBILE OFF-CANVAS DRAWER SUBMENUS
   (Superseded 2026-09-24: the drawer menu is rebuilt as .hs-mnav — see §Y.)
   The drawer reuses the desktop mega-menu's Bootstrap-style dropdown markup
   (a.dropdown-toggle + b.caret + ul.dropdown-menu), which only ever had
   hover-based interaction — no tap/click affordance existed, so the caret
   was decorative and tapping it (or the label) just followed the link.
   initOffcanvasSubmenus() now toggles .hs-submenu-open on the <li>; this
   shows/hides the submenu and gives the caret its own real, generously-sized
   tap target independent of the category label next to it. */
/* Drawer header: the logo <img> has no width cap (native 2560px asset), so
   inside the flex `justify-content:space-between` row it grows to fill
   nearly the whole row, crowding the close "×" into a ~13px sliver right
   against the wordmark. Cap the logo and give the close button a real,
   comfortably-sized tap target. */
.blusho-offcanvas-drawer .offcanvas-logo img { max-width: 150px; width: auto; height: auto; }
.blusho-offcanvas-drawer .trigger-off-canvas.is-open {
  flex: 0 0 auto; display: flex !important; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.4rem;
}

/* Remove the "Products" widget from archive sidebars (shop/category/brand/tag). */
#woocommerce_products-1,
.widget[id^="woocommerce_products"],
.blusho-widget-area .widget_products,
.woo-archive-sidebar.widget_products { display: none !important; }

/* =============================== /brands/ index: static A-Z brand logo grid
   (converts the auto-rotating logo carousels to a clean wrapped grid). */
.page-id-3942 [class*="logo-slider-and-grid"] .swiper,
.page-id-3942 [class*="logo"] .swiper { overflow: visible !important; }
.page-id-3942 [class*="logo-slider-and-grid"] .swiper-wrapper,
.page-id-3942 [class*="logo"] .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  justify-content: center;
  align-items: center;
  gap: 2rem 3.5rem;
  width: 100% !important;
}
.page-id-3942 [class*="logo"] .swiper-slide {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}
.page-id-3942 [class*="logo"] .rtsb-logo-img img,
.page-id-3942 [class*="logo"] .logo-content-wrapper img {
  max-height: 50px !important; width: auto !important; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .2s ease, opacity .2s ease;
}
.page-id-3942 [class*="logo"] a:hover img,
.page-id-3942 [class*="logo"] .rtsb-logo-img img:hover { filter: none; opacity: 1; }
/* tighten vertical rhythm between the 6 logo rows */
.page-id-3942 [class*="logo-slider-and-grid"] { margin: .4rem 0 !important; }

/* More breathing room around the brand strip(s) — same outer margin as
   .hs-prod-row (homepage product rows), unified from this strip's own
   previously-asymmetric, smaller values so every homepage "row" section
   shares one consistent top/bottom rhythm. */
.hs-brand-strip {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) !important;
  margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) !important;
  padding-bottom: 1rem !important;
}

/* Hero/top ticker marquee: never pause on hover (keep it scrolling). */
.rt-marquee:hover .rt-marquee-item,
.rt-marquee-wrapper:hover .rt-marquee-item,
.elementor-widget-rt-marquee:hover .rt-marquee-item,
[class*="marquee"]:hover .rt-marquee-item { animation-play-state: running !important; }

/* ============================ CARD ADD-TO-CART: consistency, no shift, notify
   Keep the +Add pill compact everywhere (the theme forces full-width links),
   hide the theme's own add-to-cart bar, and make sold-out a bell "notify" btn. */
.hs-add-btn { width: auto !important; }
li.product .action-cart,
.rtsb-col-grid .action-cart,
.rtsb-grid-item .action-cart,
.action-cart { display: none !important; }
/* No layout shift / no "View cart" link after an AJAX add. */
.added_to_cart, a.added_to_cart, .product .added_to_cart,
li.product .added_to_cart { display: none !important; }
.hs-add-btn.added::after { content: none !important; }
/* Notify-when-in-stock bell button (same footprint as +Add → nothing shifts). */
.hs-add-btn.hs-notify {
  background: var(--lc-ink) !important; color: #fff !important;
  padding: .5em .7em;
}
.hs-add-btn.hs-notify svg { width: 17px; height: 17px; display: block; }


/* Matches the .hs-band-tint/.hs-band-plain padding exactly — this section
   sits in the same visual rhythm as the rows below it (its leading margin
   is zeroed against "Now on Sale" in initHomeRhythm(), so this padding is
   now the ONLY gap before the heading, not stacked on top of a separate
   ~69px natural margin like it used to be). */
.hs-brand-strip { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; }

/* Brand strip: align the "Shop by brand" head to the same centred container as
   the "Now on Sale" / category-row headings (≈1196px centred + a small inset),
   so the headings line up. The logo marquee keeps a light gutter. */
.hs-brand-strip .hs-brand-head {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Fits the theme's section headings (Now on Sale / category rows) at every
     width — derived from measured positions (≈8.5%·vw + 12px). */
  padding-left: max(1rem, calc(8.5% + 12px)) !important;
  padding-right: max(1rem, calc(8.5% + 12px)) !important;
}
/* Category row heads: nudge to match their slider's inset. */
.hs-prod-row .section-title-wrapper.hs-row-head { padding: 0 clamp(0.5rem, 1vw, 1.5rem) !important; }

/* Theme card thumb wrapper = positioning context for the +Add / bell pill
   (fixes related-products & any theme grid where the image is wrapped in the
   hidden .action-cart anchor). */
.rt-product-thumb,
li.product .rt-product-thumb,
[class*="rt-product-thumb"] { position: relative !important; }

/* ===================================== §G2 infinite-scroll loading indicator */
.hs-inf-sentinel { width: 100%; height: 1px; }
.hs-inf-loading { display: flex; justify-content: center; padding: 1.5rem 0 2.5rem; }
.hs-inf-loading .hs-inf-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--lc-line); border-top-color: var(--lc-ink);
  animation: hs-inf-spin .7s linear infinite; opacity: 0;
}
.hs-inf-loading.is-active .hs-inf-spinner { opacity: 1; }
@keyframes hs-inf-spin { to { transform: rotate(360deg); } }

/* Quick-filter AJAX swap — brief dim + wait cursor on the grid while the
   filtered result set loads in (no full page reload, no layout jump). */
.hs-filter-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* ===================================== §E2 brand-page hero (banner, promo-ready) */
.hs-brand-hero--banner:not(.hs-brand-hero--image) { background: linear-gradient(135deg, #faf6f2 0%, #f2e9e1 100%) !important; }
.hs-brand-hero--banner {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 1.5rem !important;
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  text-align: center;
}
.hs-brand-hero--banner .hs-brand-hero__inner { max-width: 780px; margin: 0 auto; gap: 1.15rem; }
.hs-brand-hero__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lc-muted);
}
.hs-brand-hero--banner .hs-brand-hero__logo-img { max-height: 120px; max-width: min(320px, 78vw); }
.hs-brand-hero--banner .hs-brand-hero__wordmark { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem); }
.hs-brand-hero__promo {
  font-size: var(--lc-fs-body); line-height: var(--lc-lh-base); color: var(--lc-body);
  margin: 0; max-width: 54ch;
}
.hs-brand-hero--banner .hs-brand-hero__count {
  font-size: var(--lc-fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--lc-muted);
}

/* Theme archive cards: image fills to the card border (match ShopBuilder cards).
   The theme insets the thumb via .rt-product-block{padding:0 13.6px}; remove it
   and pad only the text content instead. */
li.product .rt-product-block { padding: 0 !important; }
li.product .rt-product-thumb {
  margin: 0 0 .85rem !important;
  border-radius: 0 !important;   /* card's overflow:hidden clips the top corners */
}
li.product .rt-product-block > *:not(.rt-product-thumb),
li.product .rt-product-block > .rt-product-content {
  padding-left: .9rem !important;
  padding-right: .9rem !important;
}
li.product .rt-product-block > *:last-child { padding-bottom: .15rem !important; }

/* ==========================================================================
   §H  Filter sidebar + Filter/Sort drawers (initShopDrawer)
   Applies to /shop/, category and brand listings (all one template).
   Desktop (≥1025px): filter groups stay OPEN in the template's native left
   column, below the brand hero + promotions row (client, 2026-09-24).
   Below that: the column is hidden and the groups live in a Filter drawer.
   Both drawers open from the LEFT (Excel row 33). Rules styling the filter
   groups themselves target .hs-filter-panel — the shared class on BOTH the
   sidebar column and the drawer — so they look identical in either home.
   ========================================================================== */

/* Mobile/tablet: hide the (now empty) sidebar column, content fills the row. */
.hs-filter-col-hidden { display: none !important; }
.hs-content-col-full {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100% !important;
  /* This column's own Elementor gutter padding (~30px/12px) was set for
     spacing against the sidebar column, which is now hidden — zero it so
     the grid actually reaches the full canonical container width. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The row wrapping the sidebar+content columns carries a large (140px)
   bottom padding from the original 2-column design — left a big block of
   empty space at the foot of every shop/category/brand listing. :has()
   scopes this to that specific row (the one containing the now full-width
   content column) instead of every .e-con-inner site-wide. */
.e-con-inner:has(> .hs-content-col-full) { padding-bottom: 0 !important; }
.hs-native-hide { display: none; }

/* --- Toolbar --------------------------------------------------------------- */
.hs-shop-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .5rem 0 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--lc-line);
  position: sticky; top: var(--hs-header-offset, 64px); z-index: 20;
  background: #fff;
}
.hs-shop-bar__actions { display: flex; gap: .6rem; margin-left: auto; }
.hs-shop-title {
  margin: 0; font-family: var(--lc-font);
  font-size: var(--lc-fs-h3); font-weight: 700; line-height: var(--lc-lh-tight);
  color: var(--lc-ink); letter-spacing: .005em;
}

/* Breadcrumb row (ASOS-style, above the toolbar) */
.hs-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .1rem .1rem; padding: .35rem 0 0;
  font-size: var(--lc-fs-small); color: var(--lc-muted);
}
.hs-breadcrumb a { color: var(--lc-muted); text-decoration: none; transition: color .16s ease; }
.hs-breadcrumb a:hover { color: var(--lc-ink); }
.hs-breadcrumb [aria-current="page"] { color: var(--lc-ink); }
.hs-breadcrumb__sep { margin: 0 .5rem; color: var(--lc-line); }
.hs-bar-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem;
  font-family: var(--lc-font);
  font-size: var(--lc-fs-small); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--lc-ink); background: #fff;
  border: 1px solid var(--lc-ink); border-radius: 999px;
  cursor: pointer; line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.hs-bar-btn:hover { background: var(--lc-ink); color: #fff; }
.hs-bar-btn svg { display: block; }

/* Pill filters — used by the blog page's category bar (initBlogLayout).
   Same pill shape/sizing as .hs-bar-btn so they read as one family. */
.hs-quick-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-right: .25rem; }
.hs-quick-filter {
  display: inline-flex; align-items: center;
  padding: .6rem 1.15rem;
  font-family: var(--lc-font);
  font-size: var(--lc-fs-small); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--lc-ink); background: #fff;
  border: 1px solid var(--lc-line); border-radius: 999px;
  text-decoration: none; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hs-quick-filter:hover { border-color: var(--lc-ink); }
.hs-quick-filter.is-active { background: var(--lc-ink); color: #fff; border-color: var(--lc-ink); }

/* --- Overlay + drawer shell ------------------------------------------------ */
.hs-drawer-overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,.42);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 3000;
}
.hs-drawer-overlay.is-visible { opacity: 1; pointer-events: auto; }
body.hs-drawer-lock { overflow: hidden; }

.hs-drawer {
  position: fixed; top: 0; height: 100%;
  width: min(430px, 90vw);
  background: #fff; z-index: 3001;
  display: flex; flex-direction: column;
  /* Closed drawers park just off the left edge; a shadow there bled a grey
     band onto every listing page (client, 12 Oct). Shadow + visibility only
     while open, and a softer shadow at that. */
  box-shadow: none; visibility: hidden;
  transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  will-change: transform;
}
.hs-filter-drawer { left: 0; transform: translateX(-100%); }
.hs-sort-drawer   { left: 0; transform: translateX(-100%); width: min(380px, 88vw); }
.hs-drawer.is-open { transform: translateX(0); visibility: visible; box-shadow: 0 0 32px rgba(17,17,17,.08); transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s; }

.hs-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--lc-line);
  flex: 0 0 auto;
}
.hs-drawer__title {
  font-size: var(--lc-fs-h6); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lc-ink);
}
.hs-drawer__close {
  border: 0 !important; background: transparent !important; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--lc-ink);
  width: 2.25rem; height: 2.25rem; padding: 0 !important;
  display: grid; place-items: center !important;
  transition: background .18s ease;
}
.hs-drawer__close:hover { background: #f2efec; }

.hs-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1.35rem 1.5rem; }

.hs-drawer__foot {
  flex: 0 0 auto; display: flex; gap: .75rem;
  padding: 1rem 1.35rem; border-top: 1px solid var(--lc-line);
}
.hs-drawer__foot button {
  flex: 1 1 50%; padding: .95rem 1rem;
  font-family: var(--lc-font); font-size: var(--lc-fs-small); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  border-radius: 999px; line-height: 1; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hs-drawer__clear { background: #fff; color: var(--lc-ink); border: 1px solid var(--lc-line); }
.hs-drawer__clear:hover { border-color: var(--lc-ink); }
.hs-drawer__apply { background: var(--lc-ink); color: #fff; border: 1px solid var(--lc-ink); }
.hs-drawer__apply:hover { background: #000; }

/* Keep the moved filter groups full-width + expanded inside the drawer. */
.hs-filter-panel .rtsb-archive-filters,
.hs-filter-panel .rtsb-archive-filters-wrapper { width: 100% !important; display: block !important; }
.hs-filter-panel .rtsb-filter-mobile-toggle { display: none; }

/* Flatten the filter lists: no bullets, no "+ More/− Less", no per-row
   "+/−" subcategory toggles — every option (incl. nested sub-terms) is shown. */
.hs-filter-panel .rtsb-product-filters ul,
.hs-filter-panel .rtsb-product-filters li { list-style: none !important; }
.hs-filter-panel .more-less-button,
.hs-filter-panel .rtsb-more-less,
.hs-filter-panel .filter-child,
.hs-filter-panel .plus-icon,
.hs-filter-panel .minus-icon { display: none !important; }
.hs-filter-panel .rtsb-product-filters li > ul,
.hs-filter-panel .rtsb-product-filters ul.children,
.hs-filter-panel .rtsb-product-filters .term-has-children > ul { display: block !important; height: auto !important; }
/* Indent nested sub-terms so the hierarchy still reads. */
.hs-filter-panel .rtsb-product-filters li > ul { padding-left: 1.35rem; }
/* ShopBuilder's "+ More" truncation collapses the extra terms with
   max-height:0 + overflow:hidden on .additional-option (not display:none),
   so removing the More button alone left them invisible — e.g. Face Care's
   brand list stopped at 3 of 11, hiding Thalgo's 89 products. */
.hs-filter-panel .rtsb-product-filters li.additional-option {
  max-height: none !important; overflow: visible !important;
  opacity: 1 !important; visibility: visible !important;
}

/* Relocating the filter markup out of ShopBuilder's container bypasses its
   accordion JS, so force every section fully open (matches "load all when the
   filter is open") and turn the section headers into plain, non-collapsing
   labels. */
.hs-filter-panel .filter-content {
  max-height: none !important; height: auto !important; overflow: visible !important;
}
.hs-filter-panel .filter-title-wrapper { pointer-events: none; }
.hs-filter-panel .filter-title-wrapper::before,
.hs-filter-panel .filter-title-wrapper::after,
.hs-filter-panel .filter-title-wrapper .widget-title::before,
.hs-filter-panel .filter-title-wrapper .widget-title::after { content: none !important; display: none !important; }

/* The native "Reset Filter" button/group is superseded by the drawer's Clear-all. */
.hs-filter-panel .product-filter-reset,
.hs-filter-panel .rtsb-reset-filter,
.hs-filter-panel .rtsb-filter-reset-wrap,
.hs-filter-panel .rtsb-product-filters.rtsb-reset { display: none !important; }

/* --- Sort drawer options --------------------------------------------------- */
.hs-sort-list { padding: .5rem 0 1.5rem; }
.hs-sort-opt {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: .95rem 1.35rem;
  font-family: var(--lc-font); font-size: var(--lc-fs-body); color: var(--lc-body);
  background: #fff; border: 0; border-bottom: 1px solid var(--lc-line);
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.hs-sort-opt:hover { background: #f7f4f1; color: var(--lc-ink); }
.hs-sort-opt.is-active { color: var(--lc-ink); font-weight: 700; }
.hs-sort-opt.is-active::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Tablet range (768-1024px, where the grid runs full-width with the filters
   in the drawer) pinned explicitly: ShopBuilder's own
   native column count in this range comes from an undocumented fluid
   auto-fill/minmax default, NOT a clean breakpoint (measured live: 2-up up
   to ~1024px, 3-up from ~1050px, no round number in between) — .hs-promo-row
   (§R below) can't reliably chase a moving, unknown formula, so instead of
   approximating the promo row TO the shop grid, this pins the shop grid's
   OWN columns explicitly across the whole tablet band too, matching
   .hs-promo-row's existing 768px breakpoint exactly. Removes the dependency
   on ShopBuilder's opaque default entirely, for both rows. */
@media (min-width: 768px) and (max-width: 1099px) {
  .hs-content-col-full .rtsb-row.rtsb-content-loader.rtsb-grid-layout1 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem 1.25rem !important;
  }
}
/* Desktop: open filter sidebar (left) + main column. The native column is
   Elementor-sized for a different design, so its width/padding are pinned. */
@media (min-width: 1025px) {
  .hs-listing-row {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: flex-start;
    /* !important: Elementor's own `.e-con > .e-con-inner { gap: var(--gap) }`
       (0,2,0) outranks a single class and resolved to 0 here. */
    gap: clamp(1.75rem, 2.5vw, 3rem) !important;
  }
  /* The theme gives <body> `overflow: hidden auto`, which makes body a
     scroll container that never actually scrolls — so `position: sticky`
     inside it never engages (same reason the header is position:fixed).
     `clip` still stops sideways scrolling but creates no scroll container. */
  body.hs-has-filter-sidebar:not(.hs-drawer-lock) { overflow-x: clip !important; overflow-y: visible !important; }
  body.hs-has-filter-sidebar .hs-shop-bar { position: relative; top: auto; }
  .hs-filter-sidebar {
    flex: 0 0 250px !important; width: 250px !important; max-width: 250px !important;
    padding: 0 !important; margin: 0 !important;
    /* --hs-header-live = the fixed header's CURRENT bottom edge (it shrinks
       on scroll), kept in sync by initShopDrawer(). !important beats the
       theme's own .sidebar-sticky top. */
    position: sticky !important; top: calc(var(--hs-header-live, 66px) + 1rem) !important;
    align-self: flex-start;
    max-height: calc(100vh - var(--hs-header-live, 66px) - 2rem);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
  /* A plugin .filter-content runs 30px wider than its group (280px in a
     250px column) — showed as a stray horizontal scrollbar. */
  .hs-filter-sidebar .filter-content { max-width: 100%; box-sizing: border-box; }

  /* The grid's beige backdrop (.hs-band-bg) is a 100vw full-bleed layer
     centred on its parent — fine on the homepage, but beside the sidebar
     its parent is the narrower main column, so it shifted ~150px under the
     sidebar and past the right edge. Beside a sidebar it's a panel sized to
     the main column instead (lines up with the toolbar above), with a
     little inner padding so the cards don't touch its edges. */
  .hs-content-col-main .hs-band-tint > .hs-band-bg {
    left: 0; width: 100%; transform: none;
    border-radius: var(--lc-radius);
  }
  .hs-content-col-main .hs-band-tint { padding-inline: clamp(1rem, 1.5vw, 1.5rem) !important; }
  .hs-content-col-main {
    flex: 1 1 0 !important; min-width: 0;
    width: auto !important; max-width: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .e-con-inner:has(> .hs-content-col-main) { padding-bottom: 0 !important; }
  body.hs-has-filter-sidebar .hs-filter-open { display: none !important; }

  /* Tile width, not a fixed column count, drives the grid: ~200–240px tiles
     beside the sidebar at every desktop width — in line with the "slightly
     smaller" tiles (Excel row 35) the full-width 6-up grid gave (218px). */
  .hs-content-col-main .rtsb-row.rtsb-content-loader.rtsb-grid-layout1 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1.75rem 1.25rem !important;
  }
}

.hs-filter-sidebar__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .35rem 0 .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--lc-line);
}
.hs-filter-sidebar__title {
  font-size: var(--lc-fs-h6); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lc-ink);
}
.hs-filter-sidebar__clear {
  background: none !important; border: 0 !important; padding: 0 !important;
  cursor: pointer; font-family: var(--lc-font); font-size: var(--lc-fs-small);
  color: var(--lc-ink); text-decoration: underline; text-underline-offset: 3px;
}
.hs-filter-sidebar__clear:hover { opacity: .7; }

/* ==========================================================================
   §Q  Shop/category/brand grid — match the homepage product-row backdrop
   Homepage rows alternate a beige "tint" band behind every other row (see
   §O initHomeRhythm()), which flips the product cards to WHITE for contrast
   (.hs-band-tint ul.products li.product / .rtsb-grid-item — see §F2). The
   shop archive grid sits on a plain white page, so by §F2's DEFAULT it
   rendered BEIGE cards instead — same card component, opposite colour
   scheme, which read as visually inconsistent with the homepage rows.
   initShopDrawer() now wraps the grid+pagination in the SAME .hs-band-tint
   class (+ .hs-band-bg backdrop plate) used on the homepage, verbatim reusing
   §O/§F2's existing rules rather than inventing a parallel white-card rule.
   No padding override here (there used to be one, with its own slightly
   smaller clamp() than §O's generic .hs-band-tint/.hs-band-plain rule below
   — a two-class selector that unintentionally won on specificity, giving the
   shop grid's band LESS internal breathing room than every other tinted band
   on the site for no real reason; found during a padding/margin consistency
   pass and removed so this inherits the one shared value like everything
   else). */

/* Phones: Filter + Sort share the toolbar width as two equal buttons. */
@media (max-width: 767px) {
  .hs-shop-bar { top: var(--hs-header-offset, 56px); }
  .hs-shop-bar__actions { flex: 1 1 100%; }
  .hs-bar-btn { flex: 1 1 0; justify-content: center; }
}

/* ==========================================================================
   §E3  Brand hero — full-bleed promo image variant (hs-brand-hero--image)
   Set a per-brand "Hero background image" (Products → Brands) to turn the
   hero into a promo banner with the logo/text over a darkened photo.
   ========================================================================== */
.hs-brand-hero--image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  /* Larger, promo-scale banner. */
  min-height: clamp(340px, 34vw, 540px);
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
}
/* Lighter scrim — darkens only the lower-left where the lockup sits, so the
   brand image stays visible on the right. */
.hs-brand-hero--image .hs-brand-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17,17,17,.52) 0%, rgba(17,17,17,.20) 42%, rgba(17,17,17,0) 70%),
    linear-gradient(0deg,  rgba(17,17,17,.34) 0%, rgba(17,17,17,0) 42%);
}
.hs-brand-hero--image .hs-brand-hero__inner {
  position: relative; z-index: 1; text-align: left;
  margin: 0; align-items: flex-start; gap: 1.1rem;
  padding: clamp(1.75rem, 3.2vw, 3.25rem);
  max-width: 620px;
}
/* Logo on a white plate, in the lower-left lockup with the product count. */
.hs-brand-hero--image .hs-brand-hero__logo {
  display: inline-flex; background: #fff;
  padding: .85rem 1.25rem; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(17,17,17,.24);
}
.hs-brand-hero--image .hs-brand-hero__logo-img { max-height: 74px; max-width: 210px; }
.hs-brand-hero--image .hs-brand-hero__wordmark { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hs-brand-hero--image .hs-brand-hero__promo {
  color: #fff; opacity: .96; max-width: 44ch; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.hs-brand-hero--image .hs-brand-hero__meta { justify-content: flex-start; margin-top: 0; }
.hs-brand-hero--image .hs-brand-hero__count { color: #fff; opacity: .9; letter-spacing: .1em; }

/* Checkout: hide the locked single-country field (Malta-only store); the
   Malta/Gozo "Country / Region" dropdown is the single location field. */
.woocommerce-checkout .hs-country-hidden { display: none !important; }

/* ==========================================================================
   §I  Product card corners — consistent radius, no white gap
   The ShopBuilder grid card (.rtsb-grid-item) rounds at 12px but its inner
   image box rounded at 15px while the card rounded at 12px, so white
   triangles showed at the top corners. Now that §M squares every corner
   site-wide this can't recur (card and inner are both 0), but the card
   still needs to CLIP so nothing overhangs its edge. */
.rtsb-grid-item {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.rtsb-grid-item .rtsb-product-img,
.rtsb-grid-item .rtsb-product-img > *,
.rtsb-grid-item .rtsb-product-img figure,
.rtsb-grid-item .rtsb-product-img a,
.rtsb-grid-item .rtsb-product-img img,
.rtsb-grid-item .rtsb-image-wrap,
.rtsb-grid-item .rtsb-product-image-wrap {
  border-radius: 0 !important;
}

/* Theme cards (related products / brand index): same principle — the card
   clips, the pink thumb is square so it fills the corners. */
li.product { border-radius: 14px; overflow: hidden; }
li.product .rt-product-thumb,
li.product .rt-product-thumb a,
li.product .rt-product-thumb img { border-radius: 0 !important; }

/* Regression found in the 2026-09-22 final sanity pass: the +Add/notify
   pill and quantity stepper both live INSIDE these same image wrappers
   (absolutely positioned over the photo), so `...img a{border-radius:0
   !important}` above was ALSO catching them — `.rtsb-grid-item .rtsb-
   product-img a` is higher specificity (2 classes + 1 type) than the pill
   exception's `.hs-add-btn[class]` (2 classes only), so the square-corner
   rule silently won regardless of source order, squaring off a button that
   was always meant to read as a pill (confirmed live: computed
   border-radius 0px, cross-checked against the CSSOM rule list directly
   since getComputedStyle for border-radius has a documented history of
   giving false readings in this tool — this one was a REAL 0px, a higher-
   specificity selector genuinely won). Needs one more class in the
   selector than the offending rule to win outright. */
.rtsb-grid-item .rtsb-product-img a.hs-add-btn,
.rtsb-grid-item .rtsb-product-img > .hs-add-stepper,
li.product .rt-product-thumb a.hs-add-btn,
li.product .rt-product-thumb > .hs-add-stepper {
  border-radius: var(--lc-radius) !important;
}

/* ==========================================================================
   §J  Cart drawer — visible remove (trash) button, no border/box
   The icon path is filled white on a light drawer bg (invisible) and sits in a
   bordered box. Make it dark ink, drop the border/background, red on hover.
   ========================================================================== */
.remove.remove_from_cart_button {
  border: 0 !important;
  background: transparent !important;
  width: 30px !important; height: 30px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.remove.remove_from_cart_button svg { width: 15px; height: 17px; }
.remove.remove_from_cart_button svg path { fill: var(--lc-ink); transition: fill .15s ease; }
.remove.remove_from_cart_button:hover svg path { fill: #c0392b !important; }

/* ==========================================================================
   §K  Checkout — "Your Order" summary. Works WITH the existing table layout
   (§ earlier, .site-content rules): keep every row a real table row so the
   value sits in the right column; put the quantity on its own muted line.
   Overrides use .site-content to match the existing rules' specificity.
   ========================================================================== */
.woocommerce-checkout-review-order-table thead { display: none !important; }

/* (Totals rows are handled inline — label left / value right — up in the
   earlier .site-content checkout block.) */

/* Item quantity as an inline prefix before the name ("×2 Item Name") — moved
   to be the first child of .product-name by initCheckoutQtyPrefix() in
   haystack-header.js (pure CSS reordering here would break text wrapping on
   long names, since it would force the row into a flex layout). */
.site-content .woocommerce-checkout-review-order-table .product-quantity {
  display: inline !important;
  margin-top: 0 !important;
  margin-right: .35rem !important;
  color: var(--lc-muted);
  font-size: .82rem;
  font-weight: 400;
  white-space: nowrap;
}

/* ==========================================================================
   §L  Page-width consistency — every page shares ONE container system
   (--hs-container-w / --hs-container-max, defined in :root). Every ShopBuilder
   template (shop/category/brand archive, checkout, cart, account) renders its
   content in `.rtsb-builder-content`; applying the canonical width there once
   means the whole shopping flow finally scales the same as the rest of the
   site, instead of shop=1140-fixed / checkout=full-width / home=85%.
   ========================================================================== */
.rtsb-builder-content,
.rtsb-builder-content > .elementor {
  width: var(--hs-container-w) !important;
  max-width: var(--hs-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--hs-container-pad) !important;
  padding-right: var(--hs-container-pad) !important;
  box-sizing: border-box !important;
}

/* Single product / blog / search / 404 pages use a THIRD, separate width
   system from Elementor's (.e-con) and ShopBuilder's (.rtsb-builder-content)
   above: the theme's own Bootstrap-style `.container` (native to
   content-single-product.php and friends), independently capped at a fixed
   ~1314px (a classic Bootstrap XL container breakpoint) with its own 12px
   gutter — found while checking a single product page for the same
   full-width treatment as the rest of the site. */
.content-area .container,
.site-content .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--hs-container-pad) !important;
  padding-right: var(--hs-container-pad) !important;
  box-sizing: border-box !important;
}

/* Single-product gallery — square, contained slides (client re-check
   2026-09-22: "what is that white line bar behind the image"). This was
   fixed once already (Batch 6: forced every .rtwpvg-gallery-image slide to
   a fixed aspect-ratio:1/1 box, object-fit:contain on the image, to stop
   tall/wide product photos rendering at wildly inconsistent heights) but
   the rule is missing from the live file entirely — re-adding it, and
   fixing the ACTUAL white-bar cause at the same time: the plugin's own
   `.rtwpvg-single-image-container` wrapper renders `display:inline`, which
   collapses its own box to a single text line's height (confirmed live:
   16.5px, vs. the 468px-tall image inside it) while still painting its own
   white background across that thin sliver band — the sliver sat mid-image
   because `vertical-align:middle` on the inline-block <img> centers the
   (much taller) image around that collapsed line. Forcing the wrapper to
   `display:block` at full width/height stops it generating an undersized
   inline box in the first place, so there's no white sliver left to paint
   over the photo. The library's separate `.zoomImg` (hover-zoom preview,
   absolutely positioned, opacity:0 at rest) is untouched by this. */
.rtwpvg-gallery-image {
  aspect-ratio: 1 / 1;
  height: auto !important;
  overflow: hidden;
}
.rtwpvg-gallery-image .rtwpvg-single-image-container {
  display: block !important;
  width: 100%;
  height: 100%;
}
.rtwpvg-gallery-image .rtwpvg-single-image-container img:not(.zoomImg) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Payment box: drop the little pointer triangle + stray borders so it sits
   cleanly (the card fields are the Stripe element). */
.woocommerce-checkout-payment { background: transparent !important; border: 0 !important; }
.woocommerce-checkout-payment ul.wc_payment_methods { border: 0 !important; }
.woocommerce-checkout-payment .payment_box { background: transparent !important; }
.woocommerce-checkout-payment .payment_box::before { display: none !important; }

/* ==========================================================================
   §M  Consistent rounded corners site-wide (client request 2026-09-22 —
   reverses this section's ORIGINAL "square corners everywhere" rule; see the
   --lc-radius/--lc-radius-pill tokens in :root for why a blanket revert back
   to whatever native radius each theme/plugin component happened to have
   wasn't safe: this same blanket-override technique had already been zeroing
   out plenty of leftover, wildly inconsistent component-level radius values
   — 999px pills, 14px cards, 4px/6px/12px/16px odds and ends — none of which
   were actually rendering while this rule said 0. Reintroducing them as-is
   would've produced the chaotic, INCONSISTENT corners the client explicitly
   did NOT want ("just enough... to look more feminine and welcoming",
   repeated for cards/buttons/dropdowns/inputs/panels site-wide) — so this
   still forces ONE value everywhere by default, just a non-zero one now.
   Applied last (haystack.css loads after every theme/plugin stylesheet).
   `*` alone isn't enough: !important only wins ties at EQUAL specificity, and
   a plain universal selector (0,0,0,0) still loses to any `.foo{radius:Xpx
   !important}` rule (0,0,1,0) from the theme/WooCommerce/Elementor/
   ShopBuilder, no matter which loads last. [class] and [id] match the same
   elements but at class/id-level specificity, so they win those ties too;
   [class][class] covers two-class selectors. Belt-and-braces beats hunting
   down every third-party !important radius rule individually. */
*, *::before, *::after,
[class], [class]::before, [class]::after,
[class][class], [class][class]::before, [class][class]::after,
[id], [id]::before, [id]::after {
  border-radius: var(--lc-radius) !important;
}

/* Exceptions, needing the SAME [class][class]-level specificity
   (+ !important + later source order) to beat §M above:
   1. The mobile cart-count bubble — a count badge, round by function.
      (Buttons/CTAs used to be pills here too; since 2026-09-24 every button
      shares the cards' 10px radius — client: "the buttons should be the
      same radius as the cards". See §X.)
   2. TRUE circles that are circular by function, not by "corner rounding" —
      the infinite-scroll spinner (a square spinner wouldn't read as
      spinning) and testimonial author avatars (a conventional circular
      headshot crop, never named in the client's list as a complaint). The
      "Free shipping / Payment & policy / Fast delivery" footer icon
      badges were ALSO 50%-circle before §M zeroed them, but the client
      explicitly asked for THOSE to gain rounded edges — so they're left
      OUT of this exception list on purpose, falling through to the new
      general --lc-radius like every other newly-rounded element. */
.mobile-action-button .rtsb-cart-icon-num[class] {
  border-radius: var(--lc-radius-pill) !important;
}
.hs-inf-spinner[class],
.rtsb-testimonial-author-img[class],
.rtsb-testimonial-author-img img[class] {
  border-radius: 50% !important;
}
/* 3. SVG icon glyphs (trust-bar truck/card icons, social icons, cart/search
   icons, etc.) must stay sharp — client feedback 2026-09-22: "icons have
   rounded edges which shouldn't be the case, it should be only to the outer
   background not the icon itself." Root cause: `*` in §M's blanket selector
   also matches every <svg>, and an outermost <svg> defaults to
   `overflow:hidden` per spec — so a border-radius on the svg's own box
   visibly clips the icon's corners, on top of whatever radius its
   container/background element already (correctly) has. `svg` alone would
   still lose to §M's `[class]`/`[class][class]`/`[id]` tiers on
   specificity, so this mirrors each of those tiers with a `svg` type
   selector prefixed on, which wins every tie via the extra type-selector
   (d) point without changing the class/id-count (c) tier. */
svg, svg::before, svg::after,
svg[class], svg[class]::before, svg[class]::after,
svg[class][class], svg[class][class]::before, svg[class][class]::after,
svg[id], svg[id]::before, svg[id]::after {
  border-radius: 0 !important;
}
/* 4. Nav dropdown chevrons (client re-check, round 2 — this exact fix had
   already been applied once this engagement and was found MISSING from the
   live file again: "the arrows which are rounded now for some reason and it
   should be an arrow"). Same border-trick construction as before: an 8x8px
   ::before box with only the right+bottom borders visible, rotated 45deg —
   a sharp point via one unrounded corner. §M's blanket radius rounds that
   corner into a blob. Needs to stay perfectly square, not fall through to
   ANY radius value. */
.hs-navbar li.dropdown > a::before {
  border-radius: 0 !important;
}
/* 5. Site logo wordmark (client re-check: "including logo") — a plain
   transparent-background PNG, not a card/photo that should read as
   "rounded, welcoming"; §M's blanket radius was rounding its own bounding
   box regardless. A plain `.site-logo img` (1 class + 1 type = c:1,d:1)
   still LOSES to §M's `[class][class]` tier (c:2,d:0) on specificity —
   adding `[class]` brings it to c:2,d:1, winning via the same d-tiebreak
   technique used for the svg exceptions above. */
.site-logo img[class], .site-title img[class] {
  border-radius: 0 !important;
}

/* ==========================================================================
   §N  Homepage hero carousel — full-bleed, ASOS-style, swappable slides
   Built by initHeroCarousel() in place of the static Elementor hero. Each
   slide keeps the original 2-card layout (text/CTA card + full-bleed image
   card); the whole band runs edge-to-edge (no side container/gutters).

   The original Elementor hero is hidden HERE (in CSS, applied before the page
   paints) rather than by initHeroCarousel() reaching it after the fact —
   JS-after-paint caused a visible flash of the old static hero before the
   carousel swapped in. CSS applies before first paint, so it never renders.
   ========================================================================== */
.home .elementor-element-fed099e { display: none !important; }

.hs-hero-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: #f4ede7;
}
.hs-hero-track {
  display: flex;
  transition: transform .55s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
/* Full-bleed background-image hero: the image card is absolutely positioned
   to fill the whole slide, the text card overlays it directly (both cards
   stay separate elements/DOM order for the carousel JS and the image
   card's own link — just re-stacked visually via position instead of the
   old side-by-side grid on desktop / stacked-blocks on mobile). A gradient
   scrim on the image card keeps the (now light-on-photo) text readable
   regardless of what's behind it. */
.hs-hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(420px, 52vw, 680px);
}
.hs-hero-card { display: block; text-decoration: none; }
.hs-hero-card--text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1rem;
  max-width: 34rem;
  height: 100%;
  padding: clamp(2rem, 4vw, 5rem);
}
.hs-hero-eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hs-hero-title {
  margin: 0; font-family: var(--lc-font);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: 700; line-height: 1.02;
  color: #fff;
}
.hs-hero-body { margin: 0; max-width: 42ch; color: rgba(255,255,255,.9); font-size: var(--lc-fs-body); line-height: var(--lc-lh-base); }
.hs-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: .5rem; padding: 1rem 2.25rem;
  background: #fff; color: var(--lc-ink);
  font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: background .18s ease, color .18s ease;
}
.hs-hero-cta:hover { background: var(--lc-ink); color: #fff; }
.hs-hero-card--image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hs-hero-card--image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,.38) 38%, rgba(17,17,17,0) 65%);
}

/* Controls — a single cluster (dots + prev/next) in the bottom-right corner,
   sitting entirely over the image card. Edge-straddling arrows (the previous
   design) landed almost exactly where the text card's copy starts and
   visually overlapped it at common widths — a bottom-right cluster can never
   collide with the text card since it's fully inside the image half. */
.hs-hero-nav {
  position: absolute; z-index: 2;
  right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  /* No explicit width: an absolutely-positioned box anchored by `right` (not
     `left`+`width`) shrinks to fit its content, so it can never extend into
     the text card's half no matter how narrow that half gets. */
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .4rem .5rem; background: rgba(17,17,17,.35); backdrop-filter: blur(2px);
}
.hs-hero-dots { display: flex; align-items: center; gap: .45rem; margin-right: .3rem; }
.hs-hero-dot {
  width: 7px; height: 7px; padding: 0; border: 1px solid rgba(255,255,255,.7);
  background: transparent; cursor: pointer; transition: background .15s ease;
}
.hs-hero-dot.is-active { background: #fff; }
/* !important throughout: it's a <button>, and the parent theme has a global
   button padding/sizing reset with enough weight to otherwise win — that's
   what was pushing the chevron icon off-center (button grew to fit the
   theme's own em-based padding instead of the fixed 32x32 box below). */
.hs-hero-arrow {
  position: static !important; /* laid out in the flex cluster, not independently placed */
  width: 32px !important; height: 32px !important; flex: 0 0 auto !important;
  padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center !important;
  background: transparent !important; border: 1px solid rgba(255,255,255,.7) !important;
  cursor: pointer; color: #fff !important; line-height: 1 !important;
  transition: background .15s ease, border-color .15s ease;
}
.hs-hero-arrow svg { display: block; width: 18px; height: 18px; }
.hs-hero-arrow:hover { background: rgba(255,255,255,.18) !important; border-color: #fff !important; }

@media (max-width: 767px) {
  .hs-hero-slide { min-height: clamp(460px, 130vw, 620px); }
  /* Full width (no more side-by-side max-width) and pinned to the bottom of
     the slide, matching the reference pattern for a photo-background hero
     on a narrow screen: copy reads over the image's lower portion, not
     squeezed into half the width. */
  .hs-hero-card--text {
    max-width: none; justify-content: flex-end;
    padding: 1.75rem 1.25rem 2.25rem; text-align: left;
  }
  /* Bottom-heavy scrim instead of the desktop left-to-right one — mobile
     text sits along the bottom edge, not the left third. */
  .hs-hero-card--image::before {
    background: linear-gradient(0deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.32) 45%, rgba(17,17,17,0) 75%);
  }
  .hs-hero-nav { bottom: .75rem; right: .75rem; }
  .hs-hero-arrow { width: 28px; height: 28px; }
  .hs-hero-arrow svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   §P  Testimonials — card design
   Layout/sizing (grid columns, responsive breakpoints) is handled entirely
   by initTestimonialSizing() in haystack-header.js, which destroys the
   widget's swiper instance and lays the cards out in a plain CSS grid — see
   that function's own comments for why (swiper's layout engine fought any
   CSS sizing applied here, including earlier versions of these very rules).
   Nothing below sets width/height/display on the slide or grid wrapper —
   only the CARD'S OWN internal design.

   ROOT-CAUSE FIX (the main visible bug): `.rtsb-testimonial-author` ships
   as `display:inline-block; width:230px` — its two children (avatar photo,
   name) lay out as INLINE content, so whether they land on one line or wrap
   onto two depends on the NAME's own rendered text width against that fixed
   230px box. Short names ("Gabi Giorgio") fit beside the photo; a longer
   one ("Antoine Degiorgio") doesn't quite, and wraps the name below the
   photo instead — same information, inconsistent layout from card to card,
   which is what read as "buggy" (each card seemed to work, they just didn't
   agree with each other). Fixed by making it a real flex row instead: photo
   and name ALWAYS sit side by side, vertically centred, regardless of name
   length; the row itself wraps to a new line only if it doesn't fit at all
   (not mid-pair). Also: made the avatar circular (was a plain square crop)
   and pinned the whole author row to the BOTTOM of each card (flex column +
   space-between on the card) so avatars align on one baseline across a row
   even though quote lengths differ — before this, cards with a short quote
   left their photo/name floating awkwardly high with a lot of dead space
   below (visible in the "Antoine" card vs. "Gabi" card side by side). */
.rtsb-testimonial-item {
  display: flex !important; flex-direction: column; justify-content: space-between;
  gap: 1.5rem; background: #fff; border-radius: var(--lc-radius); box-sizing: border-box;
  box-shadow: 0 2px 16px rgba(17,17,17,.06);
}
.rtsb-testimonial-description p {
  margin: 0; color: var(--lc-body); font-size: .95rem; line-height: 1.6;
}
/* Grid, not flex: the photo, name and designation are three SIBLING
   elements in the markup (no wrapper around name+designation) — a flex row
   lays all three out side by side, so a filled-in designation ("Software
   Developer") floated next to the name instead of stacking under it. Grid
   places the photo spanning both rows in column 1, name/designation
   stacked in column 2. */
.rtsb-testimonial-author {
  display: grid !important; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .85rem; width: auto !important;
}
.rtsb-testimonial-author-img {
  grid-column: 1; grid-row: 1 / 3;
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
}
.rtsb-testimonial-author-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.rtsb-testimonial-author-name {
  grid-column: 2; grid-row: 1;
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--lc-ink); line-height: 1.3;
}
.rtsb-testimonial-author-designation {
  grid-column: 2; grid-row: 2;
  font-size: .8rem; color: var(--lc-muted);
}
.rtsb-testimonial-author-designation:empty { display: none; }

/* ==========================================================================
   §O  Homepage section rhythm — alternating bands + promo banners
   Breaks up the run of near-identical category rows (Body/Face/Makeup/
   Fragrance) with a light tint on every other one, plus two promo bands
   dropped into the sequence by initHomeRhythm(). Gopuff-style section break.
   ========================================================================== */
/* Full-bleed background breakout: the section itself is only ~85% wide (the
   theme's own container setting), so painting a background directly on it
   just tints that narrower box, not the page. A real element (.hs-band-bg,
   inserted by initHomeRhythm()) sized to 100vw and re-centered on the
   viewport paints edge-to-edge behind the section's normal-width content.
   (A ::before pseudo-element was tried first but Elementor's own container
   background feature already uses ::before on these same elements, and the
   two collided — hence a real DOM node instead.) */
.hs-band-tint, .hs-band-plain { position: relative; background: transparent !important; }
/* Same padding on tint AND plain — this is the section's own breathing room
   from the colour-boundary "seam" to its heading/content, independent of
   which shade it happens to be. Previously only .hs-band-tint had this,
   so every plain row (Face Care, Fragrance) sat flush against the seam
   with its heading almost touching the row above. */
.hs-band-tint, .hs-band-plain {
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
}
.hs-band-bg {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.hs-band-tint .hs-band-bg { background: #f7f2ee; }
.hs-band-plain .hs-band-bg { background: #fff; }

/* Image-backed promo band: full-bleed photo, dark scrim for legibility,
   centered eyebrow/title/CTA overlaid — same visual language as the hero
   carousel's image card and the brand hero, so these read as part of one
   design system rather than a bolted-on flat-color strip. */
.hs-promo-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* Scroll-scaling band — client request 2026-09-22: "scalable, so when
     scrolling they expand and cover most of the view height". */
  /* initScrollScaleBands() reserves the full expanded height once
     (--hs-band-h) and grows only the VISIBLE panel inside it by shrinking
     --hs-band-inset — layout never changes on scroll, so the sections
     below stay put. Without JS (or with reduced motion) it's simply the
     baseline-height band, no clipping. */
  height: var(--hs-band-h, clamp(240px, 24vw, 380px));
  clip-path: inset(var(--hs-band-inset, 0px) var(--hs-band-inset-x, 0px) var(--hs-band-inset, 0px) var(--hs-band-inset-x, 0px) round var(--lc-radius));
  display: flex; align-items: center; justify-content: center;
}
.hs-promo-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,.30) 0%, rgba(17,17,17,.55) 100%);
}
.hs-promo-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  text-align: center; max-width: 620px;
  padding: 2rem 1.5rem;
  text-decoration: none;
}
.hs-promo-band__eyebrow {
  color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .9rem; border: 1px solid rgba(255,255,255,.7);
}
.hs-promo-band__title {
  margin: 0; font-family: var(--lc-font); font-weight: 700; color: #fff;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.18;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.hs-promo-band__cta {
  margin-top: .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 2rem;
  background: #fff; color: var(--lc-ink);
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.hs-promo-band__inner:hover .hs-promo-band__cta { background: var(--lc-ink); color: #fff; }

@media (max-width: 600px) {
  .hs-promo-band { height: var(--hs-band-h, 300px); }
  .hs-promo-band__title { font-size: 1.5rem; }
}

/* ==========================================================================
   §P  Brand Directory (/brands/) — full redesign
   A–Z index, live search, brand cards grouped by first letter. Uses the same
   canonical page container as the rest of the site (--hs-container-w/-max).
   ========================================================================== */
.hs-brands-page {
  width: var(--hs-container-w);
  max-width: var(--hs-container-max);
  margin: 0 auto;
  padding-left: var(--hs-container-pad);
  padding-right: var(--hs-container-pad);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  box-sizing: border-box;
}

.hs-brands-hero {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 2.1rem + 4vw, 5.5rem) 1rem clamp(2rem, 1.4rem + 3vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
/* Full-bleed tinted backdrop (the hero sits inside the page's normal
   container, which is narrower than the viewport) — same real-element
   breakout used for the homepage section bands; a ::before pseudo-element
   isn't safe here either given the earlier Elementor collision. */
.hs-brands-hero__bg {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, #f7f2ee 0%, #faf7f4 100%);
  z-index: -1;
}
.hs-brands-hero__inner { position: relative; max-width: 640px; margin: 0 auto; }
.hs-brands-hero__eyebrow {
  display: inline-block; margin-bottom: 1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lc-muted); border: 1px solid var(--lc-ink); padding: .35rem 1rem;
}
.hs-brands-hero__title {
  margin: 0 0 .75rem; font-family: var(--lc-font); font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.1; color: var(--lc-ink);
}
.hs-brands-hero__sub { margin: 0 0 2rem; color: var(--lc-body); font-size: var(--lc-fs-body); }

.hs-brands-search {
  display: flex; align-items: center; gap: .65rem;
  max-width: 420px; margin: 0 auto;
  padding: .85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--lc-ink);
  color: var(--lc-muted);
}
.hs-brands-search input {
  flex: 1 1 auto; border: 0 !important; outline: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  font-family: var(--lc-font); font-size: 1rem; color: var(--lc-ink);
}
.hs-brands-search input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.hs-brands-search input::placeholder { color: var(--lc-muted); }

/* Sticky A–Z index */
.hs-brands-az {
  /* Sits in normal flow until initBrandsDirectory()'s scroll handler adds
     .is-stuck — real position:sticky doesn't work here (the theme's
     overflow-x:hidden on <body> breaks it for descendants, same reason the
     site header itself uses fixed), and a permanent position:fixed is wrong
     too: it would render pinned at the top from the very first paint,
     ahead of the hero content that comes before it in the DOM. */
  position: relative;
  width: var(--hs-container-w); max-width: var(--hs-container-max);
  z-index: 15;
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .25rem;
  padding: .85rem var(--hs-container-pad);
  box-sizing: border-box;
  background: #fff; border-top: 1px solid var(--lc-line); border-bottom: 1px solid var(--lc-line);
  scrollbar-width: none;
}
.hs-brands-az.is-stuck {
  /* Docks under the VISIBLE header: full height minus the top bar it slides away. */
  position: fixed; top: calc(var(--hs-header-offset, 64px) - var(--hs-topbar-h, 0px));
  left: 0; right: 0; margin: 0 auto;
}
.hs-brands-az-spacer { margin-bottom: 1.5rem; }
.hs-brands-az::-webkit-scrollbar { display: none; }
.hs-brands-az__link {
  flex: 0 0 auto; min-width: 2.1rem; text-align: center;
  padding: .4rem .5rem; font-weight: 600; font-size: .9rem;
  color: var(--lc-muted); text-decoration: none; transition: color .15s ease, background .15s ease;
}
.hs-brands-az__link:hover { color: var(--lc-ink); }
.hs-brands-az__link.is-active { color: #fff; background: var(--lc-ink); }

/* Letter groups + brand cards */
.hs-brands-group { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); scroll-margin-top: calc(var(--hs-header-offset, 64px) + 60px); }
.hs-brands-group__letter {
  margin: 0 0 1rem; font-family: var(--lc-font); font-weight: 700;
  font-size: 1.5rem; color: var(--lc-ink);
  /* Was a solid var(--lc-ink) (near-black) 2px line — much heavier than the
     A-Z index bar just above it (var(--lc-line), a light hairline). Matched
     to the same colour so the two dividers read as one consistent system
     down the page, keeping the extra weight (2px vs the AZ bar's 1px) since
     this is still a section heading, not another hairline. */
  padding-bottom: .5rem; border-bottom: 2px solid var(--lc-line);
}
.hs-brands-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
}
.hs-brand-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .6rem; padding: 1.5rem 1.1rem;
  background: #faf8f6;
  text-decoration: none; transition: background-color .18s ease;
}
.hs-brand-card:hover { background-color: #f1ebe4; }
.hs-brand-card__logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 64px;
}
/* Always shown in full color (client request 2026-09-22 — was grayscale,
   hover-to-color; PNGs are already transparent-background per the source
   brand assets, no change needed there). */
.hs-brand-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hs-brand-card__initial {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--lc-ink); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.hs-brand-card__name { font-weight: 600; color: var(--lc-ink); font-size: .95rem; }
.hs-brand-card__count { font-size: .78rem; color: var(--lc-muted); }

.hs-brands-empty { text-align: center; color: var(--lc-muted); padding: 3rem 1rem; }

@media (max-width: 640px) {
  .hs-brands-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .hs-brand-card { padding: 1.1rem .75rem; }
  .hs-brands-az__link { min-width: 1.9rem; font-size: .85rem; }
}

/* ==========================================================================
   §Q  Homepage "Shop by brand" — card row (replaces the old logo marquee)
   Reuses the exact .hs-brand-card styling from the /brands/ directory (§P)
   so the two are visually the same design language, laid out as a horizontal
   scroll row like every other homepage product row (heading + View-all +
   arrows). Built by the rewritten initBrandStrip().
   ========================================================================== */
.hs-brand-row-wrap { position: relative; }
/* Real Swiper instance (client request 2026-09-22: "use the same
   functionality and style of animation/transition" as the product row
   carousels) — replaces an earlier hand-rolled scrollLeft+setInterval
   marquee that proved fragile across three separate real bugs (CSS
   scroll-snap cancelling the autoplay's own tiny increments; Chrome's
   routine unfocused-tab timer throttling; concurrent animation loops
   stacking on rapid clicks). Swiper owns all of scroll position, loop
   wraparound, autoplay timing and pause-on-hover now — none of that is
   hand-implemented here any more. */
.hs-brand-swiper { overflow: hidden; padding: .25rem 56px .75rem; }
/* !important needed: both frontend.css (ShopBuilder Pro) and the theme's
   own swiper.min.css ship a bare `.swiper-slide{width:100%}` at the same
   specificity as this class selector — confirmed live via the CSSOM rule
   list (not a source-order fluke, all three rules tie on specificity), same
   recurring theme/plugin-!important-wins pattern documented throughout this
   file. */
.hs-brand-slide { width: 168px !important; }
.hs-brand-slide .hs-brand-card { width: 100%; height: 100%; }

.hs-brand-row-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0 !important; margin: 0 !important;
  display: grid; place-items: center !important;
  background: #fff !important; border: 1px solid var(--lc-ink) !important;
  cursor: pointer; color: var(--lc-ink); z-index: 2;
  transition: background .15s ease, color .15s ease;
}
.hs-brand-row-arrow svg { display: block; width: 18px; height: 18px; }
.hs-brand-row-arrow:hover { background: var(--lc-ink) !important; color: #fff !important; }
.hs-brand-row-arrow--prev { left: 8px; }
.hs-brand-row-arrow--next { right: 8px; }

@media (max-width: 640px) {
  .hs-brand-row-arrow { display: none; } /* touch-scroll on mobile */
  .hs-brand-swiper { padding: .25rem clamp(1rem, 4vw, 1.5rem) .75rem; }
  .hs-brand-slide { width: 132px !important; }
}

/* ==========================================================================
   §R  "{Brand} Promotions" row — under the brand hero (hs_render_brand_promotions)
   Real WooCommerce product cards (li.product) via wc_get_template_part, so
   the CARD markup itself is the same component used everywhere. It used to
   be a horizontal-scroll row with prev/next arrows, but ul.products carries
   a site-wide grid rule this row was never going to out-specificity, so the
   arrows were live but functionally inert. Removed the arrows (and the
   scroll setup they were driving) at the source: wrapping is what the user
   wants here anyway.
   CORRECTION (this row was visibly 4-up and a different card size than the
   shop grid below it — user reported this twice): the comment that used to
   sit here claimed leaving this on the native `ul.products` grid "matches
   every other product listing" — that was wrong. The shop/category/brand
   archive grid does NOT use `ul.products`'s native grid at all; it uses
   ShopBuilder's own `.rtsb-row.rtsb-content-loader.rtsb-grid-layout1` grid
   (explicit `repeat(5,1fr)` at ≥1100px, see §Q above) — a DIFFERENT grid
   mechanism with a different native column count/card width than plain
   `ul.products`. The two only ever looked alike by accident before the 5-up
   change. Explicitly matching the same column count here, rather than
   assuming two different grid systems will coincidentally agree. */
.hs-promo-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.75rem 1.25rem !important;
  /* Match the shop grid's own -15px/-15px row breakout (ShopBuilder's
     .rtsb-row.rtsb-content-loader carries this natively, a leftover gutter
     offset from its col/row system) — found during a final full-site sweep:
     without it this row's actual container was 30px NARROWER than the shop
     grid's, so cards that matched in column COUNT still came out ~10px
     narrower each despite everything else being aligned. */
  margin-left: -15px !important;
  margin-right: -15px !important;
}
/* This row renders through wc_get_template_part('content-product') — the
   classic WooCommerce loop template (RadiusTheme's own `.rt-product-block.
   rt-product-grid` card markup) — NOT the same code path as the shop/
   category/brand archive grid (ShopBuilder's Elementor grid WIDGET,
   `.rtsb-grid-item`). They're two different renderers, not the same
   component in two contexts as assumed earlier — §F2's shared background/
   padding rules happen to apply to both by selector, but the classic
   template's own CSS carries a fixed `width` on li.product (~48px,
   presumably sized for a different column count/breakpoint in its own
   stylesheet) that a grid parent's track sizing does NOT override on its
   own — a grid item keeps whatever explicit width it's given, it doesn't
   auto-fill the cell. Force it to fill the (correctly 5-up-sized) cell. */
.hs-promo-row > li.product {
  width: 100% !important;
  max-width: 100% !important;
}
/* Tablet range: the shop grid's own native columns here come from
   ShopBuilder's fluid auto-fill/minmax default (2-up ~768-999px, 3-up
   ~1000-1099px, measured live), not a clean breakpoint — approximated with
   a single 3-up step rather than reverse-engineering its exact formula,
   since the range that actually matters (typical desktop widths) is the
   explicit 5-up match below. */
@media (min-width: 768px) {
  .hs-promo-row { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1100px) {
  .hs-promo-row { grid-template-columns: repeat(5, 1fr) !important; }
}
/* width:100%, not the var(--hs-container-w)/max-width canonical-container
   formula used elsewhere in this file: this element renders INSIDE
   .rtsb-builder-content (via the rtsb/builder/template/before/content hook)
   — .rtsb-builder-content is ALREADY that canonical container (already 85%
   width, already capped at 1600px). Applying the same 85%-of-parent formula
   a second time here compounded it (~85% of an already-85%-wide parent ≈
   72%), narrowing and left-shifting this row noticeably relative to the
   product grid below it, which correctly sizes off the outer container
   only once. Just fill the already-correctly-sized parent. */
/* No margin-bottom here: now that this row carries .hs-band-tint (added in
   initShopDrawer()/hs_render_brand_promotions() to match the homepage rows'
   backdrop, see §Q), its own bottom padding already comes from the generic
   .hs-band-tint rule below — same as how consecutive homepage rows touch
   directly and rely on padding alone, not a separate margin PLUS padding
   stacked on top of it (that combination was measured at ~107px live,
   roughly double a normal inter-row gap, most of it invisible dead space
   before the toolbar/breadcrumb that follows). */
.hs-promo-row-wrap {
  width: 100%; margin: 0 auto;
}
.hs-promo-row-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.4rem; /* matches .hs-row-head's product-row heading gap exactly */
}
.hs-promo-row-head__text h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); font-weight: 700; line-height: 1.1; margin: 0; color: var(--lc-ink);
}
.hs-promo-row-head__text p { margin: .35rem 0 0; color: var(--lc-muted); font-size: .95rem; }

/* ============================================================= §S  CART & CHECKOUT
   Both pages carried a leftover ~140px top+bottom padding from the original
   2-column Elementor layout (same bug class as the shop page's bottom-gap
   fix — see §-content-col-full above), had no page heading, unstyled native
   WooCommerce form/table markup, stretched non-square thumbnails, and a
   "sidebar-sticky" order-review column that never actually stuck (same
   overflow:hidden-on-body issue documented elsewhere — position:sticky is
   dead site-wide; hand-rolled via initCheckoutSticky() in haystack-header.js).
   ========================================================================== */
body.woocommerce-cart .e-con-inner,
body.woocommerce-checkout .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem) !important;
}

/* -- Page heading (built by initCartCheckoutHead() in haystack-header.js) -- */
.hs-page-head {
  max-width: var(--hs-container-max);
  width: var(--hs-container-w);
  margin: 0 auto;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) var(--hs-container-pad) clamp(1rem, .6rem + 1vw, 1.5rem);
  box-sizing: border-box;
}
.hs-page-head h1 {
  margin: 0 0 .3rem; font-family: var(--lc-font); font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); color: var(--lc-ink);
  display: flex; align-items: baseline; gap: .85rem;
}
.hs-page-head__count {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--lc-muted);
}
.hs-page-head p { margin: 0; color: var(--lc-muted); font-size: .92rem; }
.hs-page-head .hs-secure-note { display: inline-flex; align-items: center; gap: .4rem; }
.hs-page-head .hs-secure-note::before { content: "\1F512"; font-size: .85em; }

.hs-continue-shopping {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 1.25rem; font-size: .85rem; font-weight: 600; color: var(--lc-ink);
  text-decoration: none; border-bottom: 1px solid var(--lc-line); padding-bottom: 1px;
}
.hs-continue-shopping:hover { color: var(--lc-muted); border-color: var(--lc-muted); }

/* -- Cart table: card-row treatment, fixed-square thumbnails -- */
table.shop_table.cart { border: 0; border-collapse: collapse; }
/* Headerless, ASOS/Cozy-style row list rather than a literal data table —
   the row content (image, name, price) already carries its own labels. */
table.shop_table.cart thead { display: none !important; }
table.shop_table.cart tbody tr.cart_item {
  border: 0; border-bottom: 1px solid var(--lc-line);
}
table.shop_table.cart tbody td { border: 0; padding: 1.1rem .5rem; vertical-align: middle; }
table.shop_table.cart td.product-remove { width: 2rem; }
table.shop_table.cart td.product-remove a.remove {
  display: grid !important; place-items: center; width: 26px !important; height: 26px !important;
  padding: 0 !important; background: transparent !important; color: var(--lc-muted) !important;
  border: 1px solid var(--lc-line) !important; font-size: 1rem; line-height: 1;
}
table.shop_table.cart td.product-remove a.remove:hover { background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important; }
table.shop_table.cart td.product-thumbnail { width: 110px; }
body.woocommerce-cart table.shop_table.cart td.product-thumbnail a {
  display: flex; align-items: center !important; justify-content: center !important;
  width: 92px; height: 92px !important; background: #f7f2ee; overflow: hidden;
}
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  width: 92px; height: 92px !important; max-width: 92px !important; max-height: 92px !important;
  object-fit: contain; object-position: center !important;
  display: block;
}
table.shop_table.cart td.product-name a {
  color: var(--lc-ink); font-weight: 600; font-size: .92rem; text-decoration: none;
}
table.shop_table.cart td.product-name a:hover { color: var(--lc-muted); }
table.shop_table.cart .wc-item-meta,
table.shop_table.cart .product-name > div:not(.hs-cart-remove-mobile) { font-size: .78rem; color: var(--lc-muted); margin-top: .2rem; }
table.shop_table.cart td.product-price,
table.shop_table.cart td.product-subtotal { font-weight: 600; color: var(--lc-ink); font-size: .9rem; }

/* Quantity stepper (ShopBuilder's own .rtsb-quantity-* markup) — restyled to
   the site's black-ink pill language instead of the plugin's default. */
.rtsb-quantity-box-group {
  display: inline-flex !important; align-items: center; border: 1px solid var(--lc-line);
  width: fit-content;
}
.rtsb-quantity-box-group .rtsb-quantity-btn {
  width: 30px; height: 30px !important; padding: 0 !important;
  display: grid !important; place-items: center; background: transparent !important;
  border: 0 !important; color: var(--lc-ink); cursor: pointer;
  font-size: .7rem !important;
}
.rtsb-quantity-box-group .rtsb-quantity-btn:hover { background: var(--lc-ink) !important; color: #fff !important; }
.rtsb-quantity-box-group input.qty {
  width: 40px; height: 30px !important; border: 0 !important; border-left: 1px solid var(--lc-line) !important; border-right: 1px solid var(--lc-line) !important;
  text-align: center; font-size: .85rem; font-weight: 600; color: var(--lc-ink); background: transparent;
  -moz-appearance: textfield;
}
.rtsb-quantity-box-group input.qty::-webkit-outer-spin-button,
.rtsb-quantity-box-group input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pre-existing duplicate: a standalone "Apply Coupon" sidebar widget
   (data-widget_type="rtsb-cart-coupon-form") duplicates the coupon form
   already built into the cart table/form below — two coupon boxes on one
   page reads as broken, not thorough. Keep the one integrated with the
   table; drop the standalone widget. */
[data-widget_type="rtsb-cart-coupon-form.default"] { display: none !important; }

/* -- Coupon, inline with "Clear All" on the same row --
   Actual markup: .actions-button-wrapper > .coupon (label+input+button) and
   .rtsb-button-wrapper (Clear All + the hidden Update Cart button) as two
   sibling flex items. */
.actions-button-wrapper {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lc-line);
}
.coupon {
  display: flex; flex-wrap: nowrap; gap: .6rem; align-items: center; flex: 1 1 auto; min-width: 0;
  margin-top: 0; padding-top: 0; border-top: 0;
}
.coupon label { display: none; } /* the placeholder already communicates this */
.coupon input.input-text {
  flex: 0 1 220px; min-width: 0; height: 44px !important; padding: 0 1rem !important; border: 1px solid var(--lc-line) !important;
  font-size: .85rem; background: #fff;
}
.coupon input.input-text:focus { outline: none; border-color: var(--lc-ink) !important; }
.coupon button.button {
  height: 44px; padding: 0 1.6rem !important; background: var(--lc-ink) !important; color: #fff;
  border: 0 !important; font-size: .8rem; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important;
  cursor: pointer; transition: background .15s ease;
  /* Some site-wide button style (theme/Elementor global, not ours) sets
     -webkit-text-fill-color independently of `color` — on this near-black
     background it rendered the label invisible ("blacked out"): white by
     `color`, but filled almost-black by this property winning over it. */
  -webkit-text-fill-color: #fff !important;
}
.coupon button.button:hover { background: #000 !important; }
/* The cart form's native "Update cart" button — redundant now that quantity
   changes auto-submit (initCartAutoUpdate()); hidden by JS already, but hide
   it by default via CSS too so there's never a flash of it before JS runs. */
button[name="update_cart"] { display: none !important; }

/* Checkout's separate coupon TOGGLE bar ("Have a coupon? Click here…") */
.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon.woocommerce-form-coupon {
  background: #f7f2ee; border: 0; padding: 1rem 1.25rem; font-size: .85rem; color: var(--lc-ink);
  display: flex; align-items: center; gap: .5rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { content: "\1F3F7"; }
.checkout_coupon.woocommerce-form-coupon { display: block; margin-bottom: 1.75rem; }
.checkout_coupon.woocommerce-form-coupon .form-row { margin: 0 0 .75rem; }
.checkout_coupon.woocommerce-form-coupon input.input-text {
  width: 100% !important; height: 44px !important; padding: 0 1rem !important; border: 1px solid var(--lc-line) !important; font-size: .85rem;
}
.checkout_coupon.woocommerce-form-coupon .button {
  height: 44px !important; padding: 0 1.6rem !important; background: var(--lc-ink) !important; color: #fff !important; border: 0 !important;
  font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; cursor: pointer;
}

/* The sidebar column's wrapper (.ele-gray-bg — a generic theme utility class
   ALSO used elsewhere, e.g. the homepage testimonials band, so it can't be
   zeroed blanket-wide) already carries its own 40px side padding from the
   original design. My .cart_totals/#order_review padding below stacks on
   TOP of that, compounding to ~76px combined inset — narrow enough that the
   "proceed to checkout" button (already width:100% of ITS OWN parent)
   rendered visibly cramped even though nothing about the button itself was
   wrong. :has() scopes the fix to just this instance of .ele-gray-bg. */
.ele-gray-bg:has(.elementor-widget-rtsb-product-cart-totals),
.ele-gray-bg:has(.elementor-widget-rtsb-order-review) { padding: 0 !important; }

/* -- Totals / order-review card (both cart sidebar + checkout sidebar) -- */
.cart_totals,
#order_review,
.woocommerce-checkout-review-order {
  background: #f7f2ee; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
/* Mini-cart (slide-in) drawer: the totals block above the View cart/Checkout
   buttons already carries the #f7f2ee tint (.cart_totals, above) — the
   button row itself was transparent, showing raw white and reading as a
   seam between two different cards instead of one continuous panel. */
.rtsb-minicart-drawer .woocommerce-mini-cart__buttons.buttons {
  background: #f7f2ee; padding: 0 clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
  margin: 0;
}
.cart_totals h2,
.woocommerce-checkout-review-order-table + * h2,
#order_review h3 {
  margin: 0 0 1.1rem; font-size: 1.15rem; font-weight: 700; color: var(--lc-ink);
}
.cart_totals table.shop_table,
.woocommerce-checkout-review-order-table { border: 0; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: 0; border-bottom: 1px solid rgba(17,17,17,.1); padding: .7rem 0; font-size: .88rem;
}
.cart_totals .cart-subtotal th, .cart_totals .cart-subtotal td,
.woocommerce-checkout-review-order-table .cart-subtotal th, .woocommerce-checkout-review-order-table .cart-subtotal td { font-weight: 500; }
.cart_totals .order-total th, .cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0; padding-top: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--lc-ink);
}
.cart_totals .order-total strong > .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .order-total strong > .woocommerce-Price-amount { font-size: 1.15rem; }
/* "(includes €X VAT)" — own line under the total, same small size as the
   rest of this note (its nested amount was inheriting the big total's
   1.15rem via the rule above since .woocommerce-Price-amount matches both). */
.cart_totals .includes_tax, .woocommerce-checkout-review-order-table .includes_tax {
  display: block; margin-top: .3rem; font-size: .78rem; font-weight: 400; color: var(--lc-muted);
}
.cart_totals .includes_tax .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .includes_tax .woocommerce-Price-amount { font-size: .78rem; }

/* Checkout order-review line items: thumbnail (added via woocommerce_cart_item_name
   filter, cart-checkout.php) + name/qty stacked cleanly. */
.woocommerce-checkout-review-order-table .product-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hs-review-line { display: flex; align-items: center; gap: .75rem; }
.hs-review-thumb { width: 52px !important; height: 52px !important; object-fit: cover; background: #fff; flex: 0 0 auto; }
.hs-review-line__name { font-size: .85rem; color: var(--lc-ink); line-height: 1.35; }
.woocommerce-checkout-review-order-table .product-quantity { font-weight: 700; color: var(--lc-muted); font-size: .78rem; }

/* Shipping method — selectable option rows instead of bare radios. */
#shipping_method, ul.woocommerce-shipping-methods { list-style: none; margin: 0 0 .5rem; padding: 0; }
#shipping_method li, ul.woocommerce-shipping-methods li {
  border: 1px solid var(--lc-line); background: #fff; padding: .75rem .9rem; margin-bottom: .5rem;
  transition: border-color .15s ease;
}
#shipping_method li:has(input:checked), ul.woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--lc-ink);
}
#shipping_method li label, ul.woocommerce-shipping-methods li label { font-size: .88rem; font-weight: 600; color: var(--lc-ink); }
#shipping_method li input[type="radio"], ul.woocommerce-shipping-methods li input[type="radio"] {
  accent-color: var(--lc-ink); width: 16px; height: 16px; margin-right: .5rem; vertical-align: middle;
}
.shipping_method_description { font-size: .78rem; color: var(--lc-muted); margin-top: .25rem; padding-left: 1.5rem; }
.hs-view-map, .shipping-calculator-button {
  color: var(--lc-ink); font-size: .78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.woocommerce-shipping-destination { font-size: .78rem; color: var(--lc-muted); }

/* Proceed-to-checkout / place-order CTAs — full-width black-ink, matches the
   site's other primary buttons. */
.wc-proceed-to-checkout { margin-top: 1.5rem; width: 100% !important; display: block !important; }
.wc-proceed-to-checkout .checkout-button,
.rtsb-cart-totals .wc-proceed-to-checkout .checkout-button.checkout-button,
#place_order {
  display: block !important; width: 100% !important; text-align: center !important;
  background: var(--lc-ink) !important; color: #fff !important;
  padding: 1.05rem 1.5rem !important; font-size: .88rem !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; border: 0 !important; cursor: pointer;
  transition: background .15s ease;
}
.wc-proceed-to-checkout .checkout-button:hover, #place_order:hover { background: #000 !important; }

/* -- Checkout billing/shipping form -- */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: #fff;
}
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--lc-ink); margin: 0 0 1.25rem;
}
.woocommerce-checkout .form-row { margin: 0 0 1.1rem; }
.woocommerce-checkout label { display: block; font-size: .78rem; font-weight: 600; color: var(--lc-ink); margin-bottom: .35rem; }
.woocommerce-checkout label .required { color: #b3261e; text-decoration: none; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
  width: 100% !important; height: 48px !important; padding: 0 1rem !important; border: 1px solid var(--lc-line) !important;
  background: #fff; font-size: .88rem; color: var(--lc-ink);
}
.woocommerce-checkout textarea { height: auto !important; padding: .8rem 1rem !important; min-height: 90px; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none; border-color: var(--lc-ink) !important; box-shadow: 0 0 0 1px var(--lc-ink);
}
.woocommerce-checkout .select2-selection { display: flex; align-items: center; }
.woocommerce-checkout .select2-selection__rendered { line-height: 46px !important; padding-left: 0 !important; }
.woocommerce-checkout .select2-selection__arrow { height: 46px !important; }

/* "Create an account?" / "Ship to a different address?" toggles */
.woocommerce-checkout .create-account label,
#ship-to-different-address label {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500;
  text-transform: none; margin: 0;
}
.woocommerce-checkout .create-account input[type="checkbox"],
#ship-to-different-address input[type="checkbox"] { accent-color: var(--lc-ink); width: 16px; height: 16px; }

/* -- Payment -- */
body.woocommerce-checkout #payment { background: #f7f2ee !important; padding: clamp(1.5rem, 1rem + 2vw, 2rem); margin-top: 1.5rem; }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 0 !important; }
#payment ul.payment_methods li.wc_payment_method { border: 0; padding: 0; }
#payment ul.payment_methods label { font-size: .95rem; font-weight: 700; color: var(--lc-ink); }
body.woocommerce-checkout #payment .payment_box { background: #fff !important; margin: 1rem 0 0; padding: 1.25rem; font-size: .85rem; }
#payment .payment_box::before { display: none; } /* theme's default speech-bubble arrow — clashes with square-corner system */

@media (max-width: 767px) {
  .hs-page-head { padding-top: 1.25rem; }
  table.shop_table.cart td.product-thumbnail { width: 76px; }
  table.shop_table.cart td.product-thumbnail a,
  table.shop_table.cart td.product-thumbnail img { width: 64px !important; height: 64px !important; }
  .cart_totals, #order_review, .woocommerce-checkout-review-order,
  .woocommerce-billing-fields, .woocommerce-additional-fields, #payment { padding: 1.25rem; }
}

/* Hand-rolled sticky order-review sidebar (initCheckoutSticky(), desktop only —
   see the site-wide overflow:hidden-on-body note at the top of this section). */
.hs-checkout-sidebar-spacer { height: 0; }
.sidebar-sticky.is-stuck, .hs-wizard-sidebar.is-stuck { z-index: 20; }

/* ============================================================= §T  CHECKOUT WIZARD
   Address / Shipping / Payment as three screens (initCheckoutWizard()) — a UI
   layer over the real WooCommerce checkout. The billing fields, shipping-
   method list, and payment box are MOVED (not cloned) into these panels, so
   every input stays wired to WooCommerce/Stripe's own JS; "Place Your Order
   and Pay" is the real #place_order button, just relocated into the sidebar.
   ========================================================================== */
/* Hide the raw (un-restructured) checkout form until initCheckoutWizard()
   finishes moving its pieces into the wizard panels — otherwise the plain
   2-column WooCommerce layout flashes on screen first and then jumps into
   the wizard layout a moment later (WooCommerce's own initial
   update_checkout AJAX call can still be in flight at DOMContentLoaded, so
   the wizard's first build attempt legitimately can't run immediately; see
   the race-condition note on initCheckoutWizard() itself). A 3s safety
   timeout reveals the plain form regardless if the wizard never builds. */
body.woocommerce-checkout form.woocommerce-checkout { visibility: hidden !important; }
body.woocommerce-checkout.hs-wizard-ready.hs-wizard-ready form.woocommerce-checkout { visibility: visible !important; }

/* initCheckoutWizard() moves the real #order_review table out of this
   Elementor "order review" widget and into .hs-wizard-sidebar, but leaves
   the widget's own template heading (<h3 id="order_review_heading">) behind
   in its now-empty shell — which then renders as a stray "Your order"
   label (in its column's beige background) floating below the rest of the
   page. It's a separate Elementor column from form.woocommerce-checkout, so
   the visibility rule above never touched it, and the widget holds nothing
   else worth keeping — its outer column exists solely to wrap it, so hide
   that whole column rather than just the widget (display:none on the widget
   alone still left the column's own padding showing as an empty bar). The
   wizard sidebar is the only order summary that should ever be visible on
   this page. */
body.woocommerce-checkout .rtsb-checkout-order-review { display: none !important; }
body.woocommerce-checkout .sidebar-sticky:has(.rtsb-checkout-order-review) { display: none !important; }

.hs-wizard {
  max-width: var(--hs-container-max); width: var(--hs-container-w); margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--hs-container-pad) clamp(2.5rem, 2rem + 2vw, 4rem);
  box-sizing: border-box;
}
.hs-wizard-steps {
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}
.hs-wizard-step {
  background: none; border: 0; padding: 0; margin: 0;
  font-family: var(--lc-font); font-size: clamp(1rem, .9rem + .4vw, 1.3rem); font-weight: 700;
  color: var(--lc-line); cursor: default;
}
.hs-wizard-step.is-active { color: var(--lc-ink); }
.hs-wizard-step.is-done:not(.is-active) { color: var(--lc-muted); cursor: pointer; }
.hs-wizard-step.is-done:not(.is-active):hover { color: var(--lc-ink); }
.hs-wizard-step-sep { color: var(--lc-line); font-size: 1.3rem; line-height: 1; }

.hs-wizard-layout { display: flex; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: flex-start; }
/* max-width mirrors the sidebar's fixed 340px + the row gap, hard-coded
   rather than left to flex-grow — initCheckoutSticky() takes the sidebar to
   position:fixed while scrolling, removing it from flex flow entirely, and
   its own vertical spacer (.hs-checkout-sidebar-spacer, JS-sized) has no
   width, so without this cap .hs-wizard-main silently grows to fill the
   whole row and its form fields render UNDER the now-floating sidebar. */
.hs-wizard-main { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 340px - clamp(2rem, 1rem + 3vw, 4.5rem)); }
.hs-wizard-sidebar {
  flex: 0 0 340px; width: 340px; background: #f7f2ee;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.hs-wizard-panel { display: none; }
.hs-wizard-panel.is-active { display: block; }

/* -- Address step -- */
.hs-addr-card {
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1px solid var(--lc-line); padding: 1.15rem 1.35rem; margin-bottom: 1rem;
  cursor: pointer; transition: border-color .15s ease;
}
.hs-addr-card.is-selected { border-color: var(--lc-ink); border-width: 2px; padding: 1.14rem 1.34rem; }
.hs-addr-card input[type="radio"] {
  margin: .2rem 0 0; accent-color: var(--lc-ink); width: 17px; height: 17px; flex: 0 0 auto;
}
.hs-addr-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.hs-addr-card__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hs-addr-card__head strong { font-size: 1rem; color: var(--lc-ink); font-weight: 700; }
.hs-addr-card__tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--lc-ink); color: var(--lc-ink); padding: .18rem .55rem;
}
.hs-addr-card__line { font-size: .85rem; color: var(--lc-body); line-height: 1.4; }
.hs-addr-card__actions { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 auto; text-align: right; }
.hs-addr-card__actions button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-size: .8rem; font-weight: 600; color: var(--lc-ink); text-decoration: underline; text-underline-offset: 2px;
}
.hs-addr-remove-btn { color: #b3261e !important; }
.hs-addr-add-btn {
  background: none; border: 0; padding: 0; margin-top: .25rem; cursor: pointer;
  font-size: .92rem; font-weight: 700; color: var(--lc-ink);
  display: inline-flex; align-items: center; gap: .4rem;
}
.hs-addr-add-btn::before { content: "+"; font-size: 1.3em; line-height: 1; }

.hs-addr-label-row { margin-bottom: 1.5rem; max-width: 320px; }
.hs-addr-label-row label { display: block; font-size: .78rem; font-weight: 600; color: var(--lc-ink); margin-bottom: .35rem; }
.hs-addr-label-row input {
  width: 100%; height: 48px; padding: 0 1rem; border: 1px solid var(--lc-line); font-size: .88rem;
}
.hs-addr-label-row input:focus { outline: none; border-color: var(--lc-ink); box-shadow: 0 0 0 1px var(--lc-ink); }
.hs-addr-form-actions { display: flex; gap: .75rem; margin-top: .5rem; }
.hs-addr-form-actions button {
  padding: .9rem 1.75rem; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; border: 0;
}
.hs-addr-save-btn { background: var(--lc-ink) !important; color: #fff !important; }
.hs-addr-save-btn:hover { background: #000 !important; }
.hs-addr-cancel-btn { background: #fff !important; border: 1px solid var(--lc-line) !important; color: var(--lc-ink) !important; }

/* -- Sidebar: order summary + step CTA (no coupon here — see cart page) -- */
.hs-wizard-sidebar-head { margin: 0 0 1.1rem; font-size: 1.15rem; font-weight: 700; color: var(--lc-ink); }
.hs-wizard-sidebar .woocommerce-checkout-review-order { background: transparent; padding: 0; }
/* The item list duplicates the cart page right before payment — collapse it
   to a one-line toggle by default (§ initCheckoutWizard()'s items-toggle). */
.hs-wizard-items-toggle {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  background: none; border: 0; padding: 0 0 1rem; margin: 0; cursor: pointer;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--lc-ink); text-align: left;
}
/* The parent theme's generic button:hover rule paints a dark fill on any
   bare <button> — invisible-on-black text here since this one is meant to
   stay a plain text toggle, not a filled button. */
.hs-wizard-items-toggle:hover { background: none !important; color: var(--lc-ink) !important; }
.hs-wizard-items-toggle::after {
  content: "\203A"; display: inline-block; font-size: 1rem; transform: rotate(90deg); transition: transform .15s ease;
}
.hs-wizard-items-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
.woocommerce-checkout-review-order-table tbody.hs-wizard-items-collapsed { display: none; }
/* Shipping method was chosen upstream on the cart page (its own picker stays
   interactive there); checkout has no separate Shipping step any more, so
   #shipping_method just rides along inside the order-review table here —
   collapse it to a single read-only line instead of the cart's bordered,
   clickable option rows (§S). Only the checked row stays in the flow; the
   radio itself is hidden but untouched functionally. */
.hs-wizard-sidebar #shipping_method { margin: 0; }
.hs-wizard-sidebar #shipping_method li:not(:has(input:checked)) { display: none !important; }
.hs-wizard-sidebar #shipping_method li {
  border: 0; background: transparent; padding: 0; margin: 0; display: flex; align-items: baseline;
  justify-content: flex-end; gap: .4rem; flex-wrap: wrap;
}
.hs-wizard-sidebar #shipping_method input[type="radio"] { display: none; }
.hs-wizard-sidebar #shipping_method label { font-size: .85rem; font-weight: 500; color: var(--lc-ink); pointer-events: none; }
.hs-wizard-sidebar .shipping_method_description { flex-basis: 100%; padding-left: 0; margin-top: .1rem; text-align: right; }
.hs-wizard-sidebar .woocommerce-form-coupon-toggle,
.hs-wizard-sidebar .checkout_coupon.woocommerce-form-coupon { margin: 1.25rem 0 0; }
.hs-wizard-cta {
  display: block; width: 100%; margin-top: 1.5rem; text-align: center;
  background: var(--lc-ink); color: #fff; border: 0;
  padding: 1.05rem 1.5rem; font-size: .88rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background .15s ease;
}
.hs-wizard-cta:hover { background: #000; }
.hs-wizard-sidebar .form-row.place-order { margin: 1.5rem 0 0; padding: 0; border: 0; }
.hs-wizard-sidebar .form-row.place-order .woocommerce-terms-and-conditions-wrapper { margin-bottom: .85rem; font-size: .78rem; color: var(--lc-muted); }

/* Native WooCommerce/Stripe saved-card list inside the moved #payment box —
   no custom JS needed, WC already renders this when a customer has saved
   cards; just carries the card visual language instead of the plugin default. */
.woocommerce-SavedPaymentMethods { list-style: none; margin: 0 0 1rem; padding: 0; }
.woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token {
  border: 1px solid var(--lc-line); padding: .9rem 1.1rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem;
}
.woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput { accent-color: var(--lc-ink); width: 17px; height: 17px; }

@media (max-width: 900px) {
  .hs-wizard-layout { flex-direction: column; }
  .hs-wizard-sidebar { width: 100%; flex-basis: auto; order: 2; }
  .hs-wizard-main { order: 1; max-width: none; }
  .hs-addr-card { flex-wrap: wrap; }
  .hs-addr-card__actions { flex-direction: row; text-align: left; }
}

/* ==========================================================================
   §T  Homepage section headings — centered (client request 2026-09-22)
   "Section break headings (now on sale | shop by brand) etc > I would put
   them in the middle for the sake of consistency through the home page."
   Both .hs-row-head (product-category rows) and .hs-brand-head (Shop by
   brand) were left-aligned text + a right-pinned CTA button
   (justify-content:space-between). Switched to a centered column: heading +
   subtitle centered, CTA button centered below. Scoped to the HOMEPAGE
   headings specifically, as asked ("through the home page") — the brand-page
   promotions row heading (.hs-promo-row-head, a different page) is untouched.
   Placed at the end of the file / later in cascade order to win over the
   earlier space-between layout at matching specificity. */
.hs-prod-row .section-title-wrapper.hs-row-head,
.hs-brand-strip .hs-brand-head {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: .5rem;
}
.hs-prod-row .hs-row-head .title-inner-wrapper,
.hs-prod-row .hs-row-head .main-title,
.hs-brand-head-text,
.hs-brand-head-text h2 {
  text-align: center !important;
}
.hs-brand-head-text { display: flex; flex-direction: column; align-items: center; }
.hs-shop-now, .hs-view-all { margin-top: .25rem; }

/* ==========================================================================
   §U  Blog page (client request 2026-09-22): remove the sidebar entirely
   (Search / Categories / Latest Posts / Popular Tags widgets — all four),
   replace Categories specifically with shop-style quick-filter pills above
   the grid (initBlogLayout() relocates the widget's own real category
   links/URLs, doesn't reimplement filtering), omit Search/Latest-Posts/
   Popular-Tags outright, smaller cards with more per row, rounded edges +
   a real hover (there wasn't one before). This is the classic WP sidebar
   template (get_sidebar(), id="sidebar") — separate from the ShopBuilder
   shop template's own sidebar-hiding in initShopDrawer()/.hs-filter-col-
   hidden above, hence a fresh, differently-scoped rule here rather than
   reusing that class. Rounded corners on the cards/images need no rule of
   their own — §M's site-wide [class][class]{border-radius:...} blanket
   already covers them, confirmed live.
   ========================================================================== */
#sidebar.blusho-widget-area { display: none !important; }
.row.align-stretch:has(> #sidebar) > .col-xl-9 {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}

.hs-blog-cats { margin: 0 0 1.75rem; }

/* Grid: was a flat col-lg-6 (2-up at lg+, 1-up below) sized for a page that
   also had a sidebar eating 3/12 of the row. Now full-width, so pin more
   columns explicitly per breakpoint instead of inheriting Bootstrap's
   original 2-up. */
@media (min-width: 576px) {
  .rt-masonry-grid > .blusho-post-card { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (min-width: 992px) {
  .rt-masonry-grid > .blusho-post-card { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}
@media (min-width: 1400px) {
  .rt-masonry-grid > .blusho-post-card { flex: 0 0 25% !important; max-width: 25% !important; }
}

/* Hover: card lifts + thumbnail zooms slightly — there was no hover state
   on these at all before. */
.blusho-post-card .post-thumbnail-wrap { overflow: hidden; }
.blusho-post-card .article-inner-wrapper { transition: transform .22s ease, box-shadow .22s ease; }

.blusho-post-card .post-thumbnail img { transition: transform .35s ease; }
.blusho-post-card:hover .post-thumbnail img { transform: scale(1.05); }

/* ==========================================================================
   §V  Single product page (client request 2026-09-22): fix oversized/
   inconsistent product images ("taller products appearing massive"), more
   spacing between image and text (smaller overall), back-in-stock button
   text centering.
   ========================================================================== */

/* Gallery: ShopBuilder Pro's RTWPVG widget runs its swiper in "autoHeight"
   mode, sizing the whole container to match each slide's OWN rendered
   height with no cap. Most product photos are near-square so this went
   unnoticed, but real outliers exist across the catalog — some liner/
   mascara shots are shot at up to ~19:1 portrait, some lash-pack photos
   ~1:4 landscape (confirmed via a DB scan of every product's attachment
   metadata). Confirmed live: RIMMEL Wonder'Luxe Mascara (h/w ratio 5.9)
   rendered a 3,924px-tall gallery — 60% of that single product page's
   entire scroll height. Fixed by giving every slide the SAME fixed 1:1 box
   regardless of the source photo's native aspect ratio, contained rather
   than cropped — consistent framing across the whole catalog, not a patch
   for only the worst offenders. `!important` needed: swiper sets its own
   inline height on the wrapper via JS every time it (re)measures a slide. */
.rtwpvg-gallery-image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: flex !important;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.rtwpvg-gallery-image img:not(.zoomImg) {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
}

/* Image column smaller + more breathing room before the text column: the
   gallery (.rtwpvg-wrapper) was stretching to its FULL floated-column width
   (~48% of the page, 663px on a 1440px viewport) — capped so it reads as
   one deliberate product shot rather than dominating half the page; the
   space this frees up on its right becomes the extra gap before the
   summary column starts (both columns are classic WC float:left/right with
   no gap of their own, so shrinking the left one is what creates it). */
.rtwpvg-wrapper { max-width: 460px; }

/* Back-in-stock button: text sat visibly high, not vertically centered —
   the plugin's own padding was asymmetric (5px top / 17px bottom). Rounded
   edges already covered by §M's site-wide radius; the "rounded image" part
   of this request is the product gallery image above, covered by the fix
   above it regardless of in-stock/out-of-stock state. */
.cwgstock_button { padding-top: 11px !important; padding-bottom: 11px !important; }

/* ==========================================================================
   §W  Create an Account / Login (logged-out My Account) — Excel row 51:
   "move everything to the center so left and right margins would be equal".
   WooCommerce floats both .col2-set columns left at 48%, so the spare 4%
   all lands on the RIGHT (measured @1440: 26px left margin vs 87px right)
   and the two forms butt together with no gutter. A centred 2-column grid
   gives equal margins and a real gap; stacks to one column on phones.
   ========================================================================== */
.woocommerce #customer_login.u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1100px;
  margin-inline: auto;
}
/* The clearfix pseudo-elements would otherwise become grid items. */
.woocommerce #customer_login.u-columns::before,
.woocommerce #customer_login.u-columns::after { content: none; display: none; }
.woocommerce #customer_login > .u-column1,
.woocommerce #customer_login > .u-column2 { float: none; width: auto; max-width: none; margin: 0; }
@media (max-width: 767px) {
  .woocommerce #customer_login.u-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   §X  Design-system consolidation (2026-09-24, "everything matches and is
   consistent"). Measured live across home / listing / product / cart /
   checkout / account / blog / brands before writing: 4 button shapes, 5
   primary-button type treatments (44–52px tall, 11.5–18px text), inputs from
   44–49px with 0 / 10px corners and 1–3px borders, 14 transition timings,
   two product-card systems with different title/price/badge styles AND
   order, the theme's olive (#6b704f) and ShopBuilder's blue (#06f) / cool
   grey (#e2e2e2) leaking into a black-and-cream palette.

   SPECIFICITY: theme/plugin button and input rules commonly run 3–4 classes
   deep with !important. Rather than out-rank them one by one, each list is
   wrapped in :is() alongside a dummy `.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx` — :is()
   takes the specificity of its MOST specific argument, so every entry
   inherits (0,6,0) (+ html body = (0,6,2)) — six, because Elementor's own
   per-widget CSS runs five classes deep with !important (e.g. the cart
   totals button: 6px corners, 50px tall). Class-level only, no ids.
   ========================================================================== */

/* --- Palette: stop theme/plugin accents leaking in ----------------------- */
:root, body {
  --wp--preset--color--blusho-primary: #111111 !important;
  --rtsb-color-primary: #111111 !important;
  --rtsb-color-border: #e7e3df !important;
}

/* --- Buttons: one shape, one type treatment, three heights --------------- */
html body :is(
  a.checkout-button, .wc-proceed-to-checkout .checkout-button, .hs-wizard-cta, [id="place_order"],
  .single_add_to_cart_button, .cwgstock_button, .woocommerce-form-login__submit,
  .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button,
  .coupon button, .coupon .button, .hs-drawer__apply, .hs-drawer__clear, .rtsb-clear-cart-items,
  .btn.button-3, .hs-hero-cta, .woocommerce-mini-cart__buttons .button, .mini-cart-bottom .button,
  .hs-bar-btn, .hs-shop-now, .hs-view-all, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) {
  display: inline-flex; align-items: center !important; justify-content: center !important; gap: .5rem;
  min-height: var(--lc-ctl-lg) !important; height: auto !important;
  padding: 0 1.6rem !important;
  font-family: var(--lc-font) !important; font-size: var(--lc-btn-fs) !important;
  font-weight: 600 !important; letter-spacing: var(--lc-btn-ls) !important;
  text-transform: uppercase !important; line-height: 1.1 !important; text-align: center;
  border-radius: var(--lc-radius) !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease),
              border-color var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease),
              transform var(--lc-dur-fast) var(--lc-ease) !important;
  box-shadow: none !important;
}
/* Secondary / toolbar size */
html body :is(
  .hs-bar-btn, .hs-shop-now, .hs-view-all,
  .woocommerce-mini-cart__buttons .button, .mini-cart-bottom .button, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) { min-height: var(--lc-ctl-md) !important; padding: 0 1.25rem !important; }

/* Primary = ink fill */
html body :is(
  a.checkout-button, .wc-proceed-to-checkout .checkout-button, .hs-wizard-cta, [id="place_order"],
  .single_add_to_cart_button, .cwgstock_button, .woocommerce-form-login__submit,
  .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button,
  .coupon button, .coupon .button, .hs-drawer__apply, .btn.button-3,
  .woocommerce-mini-cart__buttons .button.checkout, .mini-cart-bottom .button.checkout, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) {
  background: var(--lc-ink) !important; color: #fff !important; border: 1px solid var(--lc-ink) !important;
  -webkit-text-fill-color: #fff;
}
html body :is(
  a.checkout-button, .wc-proceed-to-checkout .checkout-button, .hs-wizard-cta, [id="place_order"],
  .single_add_to_cart_button, .cwgstock_button, .woocommerce-form-login__submit,
  .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-button,
  .coupon button, .coupon .button, .hs-drawer__apply, .btn.button-3,
  .woocommerce-mini-cart__buttons .button.checkout, .mini-cart-bottom .button.checkout, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
):hover { background: var(--lc-ink-hover) !important; border-color: var(--lc-ink-hover) !important; color: #fff !important; opacity: 1 !important; }

/* Secondary = ink outline, fills on hover */
html body :is(
  .hs-bar-btn, .hs-shop-now, .hs-view-all, .hs-drawer__clear, .rtsb-clear-cart-items,
  .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout), .mini-cart-bottom .button.wc-forward:not(.checkout),
  .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) { background: #fff !important; color: var(--lc-ink) !important; border: 1px solid var(--lc-ink) !important; -webkit-text-fill-color: currentColor; }
html body :is(
  .hs-bar-btn, .hs-shop-now, .hs-view-all, .hs-drawer__clear, .rtsb-clear-cart-items,
  .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout), .mini-cart-bottom .button.wc-forward:not(.checkout),
  .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
):hover { background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important; }

/* Inverted = white on photography (hero), ink on hover */
html body :is(.hs-hero-cta, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { background: #fff !important; color: var(--lc-ink) !important; border: 1px solid #fff !important; }
html body :is(.hs-hero-cta, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx):hover { background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important; }

/* Press feedback, same everywhere */
html body :is(
  a.checkout-button, .hs-wizard-cta, [id="place_order"], .single_add_to_cart_button, .cwgstock_button,
  .woocommerce-button, .woocommerce-Button, .coupon button, .hs-drawer__apply, .hs-drawer__clear,
  .rtsb-clear-cart-items, .btn.button-3, .hs-hero-cta, .hs-bar-btn, .hs-shop-now, .hs-view-all,
  .hs-add-btn, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
):active { transform: translateY(1px); }

/* In-card small buttons: +Add, notify bell, quantity stepper */
html body :is(.rtsb-grid-item a.hs-add-btn, li.product a.hs-add-btn, a.hs-add-btn, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  min-height: var(--lc-ctl-sm) !important; height: var(--lc-ctl-sm) !important;
  padding: 0 .8rem !important; gap: .3rem;
  display: inline-flex; align-items: center !important; justify-content: center !important;
  font-family: var(--lc-font) !important; font-size: var(--lc-btn-fs-sm) !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; line-height: 1 !important;
  border-radius: var(--lc-radius) !important; box-shadow: none !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), transform var(--lc-dur-fast) var(--lc-ease) !important;
}
html body :is(a.hs-add-btn.hs-notify, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { padding: 0 !important; width: var(--lc-ctl-sm) !important; min-width: var(--lc-ctl-sm) !important; }
html body :is(a.hs-add-btn, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx):hover { background: var(--lc-ink-hover) !important; }
html body :is(.hs-add-stepper, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { height: var(--lc-ctl-sm) !important; border-radius: var(--lc-radius) !important; }

/* Grid / list view toggle: ink when active (was theme olive) */
html body :is(.rtsb-mode-switcher, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  width: var(--lc-ctl-md) !important; height: var(--lc-ctl-md) !important;
  border-radius: var(--lc-radius) !important; background: var(--lc-tint-2) !important; color: var(--lc-ink) !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease) !important;
}
html body :is(.rtsb-mode-switcher.active, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { background: var(--lc-ink) !important; color: #fff !important; }

/* Pill chips (blog category bar) share the radius too */
html body :is(.hs-quick-filter, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  min-height: 38px; border-radius: var(--lc-radius) !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease) !important;
}

/* Mini-cart count bubble (was olive) */
html body :is(.cart-count, .rtsb-cart-icon-num, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { background-color: var(--lc-ink) !important; color: #fff !important; }

/* --- Inputs: 48px, 1px warm hairline, ink focus ------------------------- */
html body :is(
  .woocommerce form input.input-text:not(.qty), .woocommerce form select, .woocommerce form textarea,
  .woocommerce-Input, .cwgstock_email, .cwgstock_name, input[name="coupon_code"],
  .hs-brands-search input, .select2-container .select2-selection--single, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) {
  min-height: var(--lc-ctl-lg) !important; box-sizing: border-box !important;
  padding: 0 1rem !important; border: 1px solid var(--lc-line) !important; border-radius: var(--lc-radius) !important;
  background-color: #fff !important; color: var(--lc-ink) !important;
  font-family: var(--lc-font) !important; font-size: .9375rem !important;
  box-shadow: none !important; outline: none !important;
  transition: border-color var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease) !important;
}
html body :is(.woocommerce form textarea, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { min-height: 120px !important; padding: .85rem 1rem !important; }
html body :is(
  .woocommerce form input.input-text:not(.qty), .woocommerce form select, .woocommerce form textarea,
  .woocommerce-Input, .cwgstock_email, .cwgstock_name, input[name="coupon_code"], .hs-brands-search input,
  .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
):focus { border-color: var(--lc-ink) !important; box-shadow: var(--lc-focus) !important; }
html body :is(.select2-container--focus .select2-selection--single, .select2-container--open .select2-selection--single, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { border-color: var(--lc-ink) !important; box-shadow: var(--lc-focus) !important; }
html body .select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(var(--lc-ctl-lg) - 2px) !important; padding-left: 0 !important; }
html body .select2-container .select2-selection--single .select2-selection__arrow { height: calc(var(--lc-ctl-lg) - 2px) !important; }
input::placeholder, textarea::placeholder { color: var(--lc-muted); opacity: 1; }

/* --- Keyboard focus, visible and consistent ----------------------------- */
:is(a, button, [role="button"], summary, .rtsb-mode-switcher):focus-visible {
  outline: 2px solid var(--lc-ink) !important; outline-offset: 2px !important;
}

/* --- Hairlines: the warm line everywhere (was cool #e2e2e2/#ebebeb/#ddd) - */
html body :is(
  .hs-filter-panel .rtsb-product-filters, .mini-cart-header-wrapper, .mini-cart-bottom,
  .woocommerce-checkout-review-order-table, .shop_table, .shop_table td, .shop_table th,
  .rtsb-quantity-box-group, .product-search-form, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) { border-color: var(--lc-line) !important; }

/* --- Filter panel typography (sidebar + drawer) ------------------------- */
html body :is(.hs-filter-panel .widget-title, .hs-filter-panel .rtsb-filter-title, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: var(--lc-fs-eyebrow) !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--lc-ink) !important;
}
html body :is(.hs-filter-panel .rtsb-checkbox-filter-label, .hs-filter-panel .rtsb-filter-group label, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: .9375rem !important; color: var(--lc-body) !important;
  transition: color var(--lc-dur-fast) var(--lc-ease) !important;
}
html body :is(.hs-filter-panel .rtsb-filter-group:hover label, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { color: var(--lc-ink) !important; }
html body :is(.hs-filter-panel .rtsb-count, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { color: var(--lc-muted) !important; }

/* --- Product cards: identical content style + order in both systems ----- */
/* ShopBuilder's per-widget order is set inline on .rtsb-row; a stylesheet
   custom property marked !important beats a non-important inline one. */
.rtsb-row[style] { --rtsb-title-order: 3 !important; --rtsb-price-order: 4 !important; }
html body :is(.rtsb-grid-item .rtsb-category-list-item a, li.product .shop-cat a, li.product .shop-cat, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: var(--lc-muted) !important;
}
html body :is(.rtsb-grid-item .product-title, .rtsb-grid-item .product-title a, li.product .rt-shop-title, li.product .rt-shop-title a, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: var(--lc-fs-product-title) !important; font-weight: 500 !important;
  line-height: var(--lc-lh-snug) !important; color: var(--lc-ink) !important; letter-spacing: 0 !important;
}
html body :is(.rtsb-grid-item .price, .rtsb-grid-item .rtsb-product-price, li.product .rt-price, li.product .price, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: var(--lc-fs-price) !important; font-weight: 600 !important; color: var(--lc-ink) !important;
}
html body :is(.rtsb-grid-item .price del, .rtsb-grid-item del .amount, li.product .rt-price del, li.product del .amount, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: .875em !important; font-weight: 400 !important; color: var(--lc-muted) !important;
}
/* Badges (-30% / Sale! / Sold out) */
html body :is(.rtsb-grid-item .rtsb-tag-fill, li.product .onsale, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-family: var(--lc-font) !important; font-size: .75rem !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important; line-height: 1 !important;
  padding: .4rem .6rem !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important;
  border-radius: var(--lc-radius) !important; background: #fff !important; color: var(--lc-ink) !important;
}

/* --- The ONE card hover: subtle image zoom (Excel rows 18 + 29) --------- */
html body :is(
  .rtsb-grid-item .rtsb-product-img img, li.product .rt-product-thumb img,
  .blusho-post-card .post-thumbnail img, .rtsb-post-grid img, .hs-brand-card__logo img, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) { transition: transform var(--lc-dur-slow) var(--lc-ease) !important; }
html body :is(
  .rtsb-grid-item:hover .rtsb-product-img img, li.product:hover .rt-product-thumb img,
  .blusho-post-card:hover .post-thumbnail img, .rtsb-post-grid article:hover img, .hs-brand-card:hover .hs-brand-card__logo img,
  .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx
) { transform: scale(var(--lc-zoom)) !important; }
html body :is(.rtsb-grid-item, li.product, .blusho-post-card .article-inner-wrapper, .hs-brand-card, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  transition: background-color var(--lc-dur-fast) var(--lc-ease) !important;
  transform: none !important; box-shadow: none !important;
}

/* --- Panels & cards: one radius, one soft shadow where lifted ----------- */
html body :is(.rtsb-testimonial-item, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { border-radius: var(--lc-radius) !important; box-shadow: var(--lc-shadow-sm) !important; }
html body :is(.hs-trust-icon, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { box-shadow: none !important; } /* no shadow — not used anywhere else (client, 14 Oct) */

/* --- Section headings: one size + weight per level ---------------------- */
html body :is(.section-title-wrapper .main-title, .hs-brand-head h2, .hs-promo-row-head h2, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: var(--lc-fs-section) !important; font-weight: 600 !important;
  line-height: var(--lc-lh-tight) !important; letter-spacing: -.005em !important;
}

/* --- Carousel arrows: one style (product rows + brand strip) ------------ */
html body :is(.rtsb-carousel-slider .swiper-arrow, .hs-brand-row-arrow, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  width: 40px !important; height: 40px !important; border-radius: var(--lc-radius) !important;
  background: #fff !important; color: var(--lc-ink) !important; border: 1px solid var(--lc-line) !important;
  box-shadow: var(--lc-shadow-sm) !important; line-height: 38px !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease),
              border-color var(--lc-dur-fast) var(--lc-ease), opacity var(--lc-dur) var(--lc-ease) !important;
}
html body :is(.rtsb-carousel-slider .swiper-arrow, .hs-brand-row-arrow, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx):hover {
  background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important;
}
html body :is(.rtsb-carousel-slider .swiper-arrow i, .rtsb-carousel-slider .swiper-arrow svg, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { color: inherit !important; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Desktop filter sidebar: the Filter button stays hidden (the rule above
   gives every .hs-bar-btn display:inline-flex at (0,6,2), so the hide has to
   carry the same lift). Its internal scrollbar is tuned to the palette. */
@media (min-width: 1025px) {
  html body.hs-has-filter-sidebar :is(.hs-filter-open, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { display: none !important; }
}
.hs-filter-sidebar { scrollbar-width: thin; scrollbar-color: var(--lc-line) transparent; }
.hs-filter-sidebar::-webkit-scrollbar { width: 6px; }
.hs-filter-sidebar::-webkit-scrollbar-thumb { background: var(--lc-line); border-radius: 3px; }
.hs-filter-sidebar::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   §Y  NAVIGATION v2 — desktop mega panels + mobile drawer (2026-09-24)
   Client: "improve the UI/UX of the navigation menu both on mobile and
   desktop … super professional but fitting with the style of the site".
   Markup is built by initMegaPanels() / initBrandNavMega() /
   initOffcanvasSubmenus() in haystack-header.js. Everything here uses the
   §X tokens (10px radius, ink/cream palette, --lc-ease timings); Excel
   constraints kept: rounded dropdowns, ALL-CAPS labels everywhere.
   ========================================================================== */

/* ---- Desktop ------------------------------------------------------------ */
@media (min-width: 1025px) {
  /* Top-level items: one easing for underline + chevron; both stay "on"
     while the item's panel is open (cursor in the panel, keyboard, touch). */
  .hs-navbar > li > a::after { transition: transform var(--lc-dur) var(--lc-ease) !important; }
  .hs-navbar > li.hs-hovering > a::after,
  .hs-navbar > li.hs-open > a::after { transform: scaleX(1); }
  .hs-navbar > li.menu-item-has-children > a::before { transition: transform var(--lc-dur) var(--lc-ease), opacity var(--lc-dur-fast) var(--lc-ease) !important; }
  .hs-navbar > li.menu-item-has-children.hs-hovering > a::before,
  .hs-navbar > li.menu-item-has-children.hs-open > a::before { transform: rotate(225deg) translateY(2px); opacity: 1; }

  /* Panel = a floating rounded card, sized to its content and centred under
     the header (abs. box with left/right 0 + a definite width + auto margins). */
  .hs-navbar > li.menu-item-has-children > .dropdown-menu.depth_0 {
    width: max-content !important; max-width: calc(100vw - 48px) !important;
    margin: 10px auto 0 !important; padding: 0 !important;
    background: #fff !important; border: 1px solid var(--lc-line) !important;
    border-radius: var(--lc-radius) !important;
    box-shadow: 0 28px 60px -18px rgba(17,17,17,.22), 0 2px 6px rgba(17,17,17,.04) !important;
  }
  .hs-navbar > li.menu-item-has-children > .dropdown-menu.depth_0.hs-brands-mega { width: min(1040px, calc(100vw - 48px)) !important; }
  /* Category cards get an EXPLICIT width (rail + n tiles + gaps + padding +
     border) instead of max-content: Safari sized the max-content flex+grid
     inconsistently (tiles overflowing the right edge on Makeup, uneven right
     padding on Gift Sets/Fragrance). Tracks are then 1fr so they fill it exactly. */
  .hs-navbar > li.menu-item-has-children > .dropdown-menu.depth_0.hs-mega-tiled {
    --tile: clamp(112px, 10.6vw, 168px);
    box-sizing: border-box !important;
    width: calc(236px + var(--cols, 4) * var(--tile) + (var(--cols, 4) - 1) * 16px + 56px + 2px) !important;
  }
  /* Hover bridge spans the header-to-card gap (incl. the 10px margin). */
  .hs-navbar > li.menu-item-has-children > .dropdown-menu.depth_0::before { top: -36px !important; height: 36px !important; }
  .hs-navbar > li.menu-item-has-children.hs-hovering > .dropdown-menu.depth_0,
  .hs-navbar > li.menu-item-has-children:focus-within > .dropdown-menu.depth_0,
  .hs-navbar > li.menu-item-has-children.hs-open > .dropdown-menu.depth_0 {
    display: block !important;
    animation: hsMegaIn .28s var(--lc-ease) both;
  }
  /* Switching panel → panel swaps content in place (no re-animation). */
  .hs-navbar > li.menu-item-has-children.hs-mega-instant > .dropdown-menu.depth_0 { animation: none !important; }
  .hs-navbar > li.menu-item-has-children.hs-mega-leaving > .dropdown-menu.depth_0 {
    animation: hsMegaOut .16s ease-in forwards !important; pointer-events: none !important;
  }
  /* (opacity/transform are pinned with !important by §C to beat the theme,
     and !important beats keyframes — so the fade runs on filter + translate.) */
  @keyframes hsMegaIn  { from { filter: opacity(0); translate: 0 -8px; } to { filter: none; translate: 0 0; } }
  @keyframes hsMegaOut { from { filter: none; translate: 0 0; } to { filter: opacity(0); translate: 0 -4px; } }

  .hs-mega-inner { display: flex; align-items: stretch; }

  /* Rail: title · text list · Shop all */
  .hs-mega-rail {
    flex: 0 0 236px; box-sizing: border-box; display: flex; flex-direction: column;
    padding: 26px 28px 24px; border-right: 1px solid var(--lc-line);
  }
  .hs-mega-inner .hs-mega-title {
    margin: 0 0 12px !important; padding: 0 !important;
    font-family: var(--lc-font); font-size: 1.125rem !important; font-weight: 600 !important;
    letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; color: var(--lc-ink) !important;
  }
  .hs-mega-rail .hs-mega-list { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; }
  .hs-mega-rail .hs-mega-list > li { margin: 0 !important; padding: 0 !important; list-style: none; }
  .hs-mega-rail .hs-mega-list a {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 0 !important; margin: 0 !important;
    font-size: .8125rem !important; font-weight: 500 !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; line-height: 1.3 !important; color: var(--lc-body) !important;
    background: none !important; transition: color var(--lc-dur-fast) var(--lc-ease) !important;
  }
  .hs-mega-rail .hs-mega-list a .hs-arrow {
    flex: none; opacity: 0; translate: -6px 0;
    transition: opacity var(--lc-dur-fast) var(--lc-ease), translate var(--lc-dur) var(--lc-ease);
  }
  .hs-mega-rail .hs-mega-list a:hover, .hs-mega-rail .hs-mega-list a.is-active,
  .hs-mega-rail .hs-mega-list a:focus-visible { color: var(--lc-ink) !important; }
  .hs-mega-rail .hs-mega-list a:hover .hs-arrow, .hs-mega-rail .hs-mega-list a.is-active .hs-arrow,
  .hs-mega-rail .hs-mega-list a:focus-visible .hs-arrow { opacity: 1; translate: 0 0; }

  .hs-mega-inner .hs-mega-all {
    display: inline-flex !important; align-items: center; gap: 10px; align-self: flex-start;
    margin-top: auto; padding: 18px 0 0 !important;
    font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; line-height: 1.2 !important; color: var(--lc-ink) !important;
  }
  .hs-mega-inner .hs-mega-all > span { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
  .hs-mega-inner .hs-mega-all .hs-arrow { transition: translate var(--lc-dur) var(--lc-ease); }
  .hs-mega-inner .hs-mega-all:hover .hs-arrow { translate: 4px 0; }

  /* Tiles: equal squares, label below, balanced columns (--cols from JS) */
  .hs-mega-inner .hs-mega-tiles {
    display: grid !important; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
    gap: 22px 16px; align-content: start;
    height: auto !important; margin: 0 !important; padding: 26px 28px 28px !important; list-style: none;
  }
  .hs-mega-tiles .hs-mega-tile {
    display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important;
    gap: 10px; min-width: 0; text-align: left !important;
    padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
    border-radius: 0 !important; text-decoration: none !important; color: var(--lc-ink) !important;
  }
  .hs-mega-tiles .hs-mega-tile-media {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--lc-radius) !important; background: var(--lc-tint-2);
    transition: opacity var(--lc-dur) var(--lc-ease);
  }
  .hs-mega-tiles .hs-mega-tile-media.hs-noimg { background: linear-gradient(135deg, var(--lc-tint), var(--lc-tint-2)); }
  .hs-mega-tiles .hs-mega-tile-img {
    position: absolute; inset: 14px; margin: 0 !important; border-radius: 0 !important;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transition: transform var(--lc-dur-slow) var(--lc-ease);
  }
  .hs-mega-tiles .hs-mega-tile-img.hs-tile-cover { inset: 0; background-size: cover; }
  .hs-mega-tiles .hs-mega-tile:hover .hs-mega-tile-img,
  .hs-mega-tiles .hs-mega-tile.is-active .hs-mega-tile-img { transform: scale(var(--lc-zoom)); }
  /* Focus effect: the hovered item stays full-strength, siblings recede. */
  .hs-mega-inner.has-active .hs-mega-tile:not(.is-active) .hs-mega-tile-media { opacity: .62; }
  .hs-mega-tiles .hs-mega-tile-label {
    position: static !important; display: block; padding: 0 !important; margin: 0 !important;
    background: none !important; border: 0 !important; backdrop-filter: none !important;
    font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; line-height: 1.3 !important; color: var(--lc-ink) !important;
  }

  /* Brands A–Z */
  .hs-brands-mega .hs-brands-inner { display: block; padding: 24px 32px 26px; }
  .hs-brands-mega .hs-brands-head {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--lc-line);
  }
  .hs-brands-mega .hs-brands-head .hs-mega-title { margin: 0 !important; }
  .hs-brands-mega .hs-brands-head .hs-mega-all { margin: 0; padding: 0 !important; }
  .hs-brands-mega .hs-brands-cols { columns: 5 150px; column-gap: 32px; }
  .hs-brands-mega .hs-bnav-group { break-inside: avoid; display: flex; gap: 14px; margin: 0 !important; padding: 0 0 12px !important; }
  .hs-brands-mega .hs-bnav-letter {
    flex: 0 0 16px; padding-top: 6px; line-height: 1.3;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--lc-muted);
  }
  .hs-brands-mega .hs-bnav-group ul { list-style: none; margin: 0 !important; padding: 0 !important; flex: 1 1 auto; min-width: 0; }
  .hs-brands-mega .hs-bnav-group li { margin: 0 !important; padding: 0 !important; list-style: none; }
  .hs-brands-mega .hs-bnav-group a {
    display: block !important; padding: 5px 0 !important; margin: 0 !important; background: none !important;
    font-size: .8125rem !important; font-weight: 500 !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; line-height: 1.3 !important; color: var(--lc-body) !important;
    transition: color var(--lc-dur-fast) var(--lc-ease) !important;
  }
  .hs-brands-mega .hs-bnav-group a:hover, .hs-brands-mega .hs-bnav-group a:focus-visible { color: var(--lc-ink) !important; }

  /* Page scrim behind an open panel (sits just under the fixed header, z 50) */
  .hs-nav-scrim {
    position: fixed; inset: 0; z-index: 49; pointer-events: none;
    background: rgba(17,17,17,.2); opacity: 0; visibility: hidden;
    transition: opacity var(--lc-dur) var(--lc-ease), visibility 0s linear var(--lc-dur);
  }
  html.hs-mega-on .hs-nav-scrim { opacity: 1; visibility: visible; transition: opacity var(--lc-dur) var(--lc-ease), visibility 0s; }
}
@media (max-width: 1024px) { .hs-nav-scrim { display: none !important; } }
.hs-nav-scrim.hs-nav-scrim { border-radius: 0 !important; }

/* ---- Mobile drawer ------------------------------------------------------ */
/* Slide on transform (the theme animated margin-left, i.e. layout) with the
   site easing; right corners rounded like every other panel. */
.blusho-offcanvas-drawer.hs-drawer-v2 {
  width: min(88vw, 380px) !important; max-width: none !important;
  margin-left: 0 !important; padding: 0 !important; row-gap: 0 !important;
  justify-content: flex-start !important; overscroll-behavior: contain;
  border-radius: 0 var(--lc-radius) var(--lc-radius) 0 !important;
  transform: translate3d(-100%, 0, 0); visibility: hidden;
  transition: transform .45s var(--lc-ease), box-shadow .45s var(--lc-ease), visibility 0s linear .45s !important;
}
.blusho-offcanvas-drawer.hs-drawer-v2.is-open {
  transform: none; visibility: visible; box-shadow: 0 0 40px rgba(17,17,17,.10);
  transition: transform .45s var(--lc-ease), box-shadow .45s var(--lc-ease), visibility 0s !important;
}
html.hs-mnav-lock, html.hs-mnav-lock body { overflow: hidden !important; }

/* Head: logo + close, pinned while the menu scrolls */
.hs-drawer-v2 .offcanvas-logo.offcanvas-logo {
  position: sticky; top: 0; z-index: 2; flex: none;
  margin: 0 !important; padding: 14px 20px !important;
  background: #fff; border-bottom: 1px solid var(--lc-line); border-radius: 0 !important;
}
.hs-drawer-v2 .offcanvas-logo img { max-width: 128px; }
.hs-drawer-v2 .offcanvas-logo .trigger-off-canvas.trigger-icon {
  width: 40px !important; height: 40px !important; padding: 0 !important;
  font-size: 1.25rem !important; line-height: 1 !important;
  background: var(--lc-tint-2) !important; color: var(--lc-ink) !important;
  border-radius: var(--lc-radius) !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease);
}
.hs-drawer-v2 .offcanvas-logo .trigger-off-canvas.trigger-icon:active { background: var(--lc-ink) !important; color: #fff !important; }

/* Menu */
.hs-drawer-v2 .offcanvas-navigation.hs-mnav-ready { flex: none; padding: 6px 20px 8px !important; margin: 0 !important; }
.hs-mnav.hs-mnav { list-style: none; margin: 0 !important; padding: 0 !important; }
.hs-mnav > .hs-mnav-item { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--lc-line); list-style: none; }
.hs-mnav > .hs-mnav-item:last-child { border-bottom: 0; }
/* §M's blanket [class][class] radius curved the hairline ends */
.hs-mnav > .hs-mnav-item.hs-mnav-item, .hs-mnav .hs-mnav-sub.hs-mnav-sub, .hs-mnav .hs-mnav-sub-inner.hs-mnav-sub-inner,
.hs-mnav .hs-mnav-list.hs-mnav-list, .hs-mnav .hs-mnav-link.hs-mnav-link { border-radius: 0 !important; }
.hs-mnav .hs-mnav-row {
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 54px; height: auto !important; margin: 0 !important; padding: 0 2px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--lc-font) !important; font-size: .9375rem !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; line-height: 1.2 !important;
  color: var(--lc-ink) !important; text-align: left; text-decoration: none !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hs-mnav .hs-mnav-row .hs-chev { flex: none; transition: transform var(--lc-dur) var(--lc-ease); }
.hs-mnav .hs-mnav-item.is-open > .hs-mnav-row .hs-chev { transform: rotate(180deg); }
.hs-mnav .hs-mnav-row:focus-visible { outline: none; box-shadow: var(--lc-focus) !important; border-radius: var(--lc-radius) !important; }

/* Accordion: animated height via grid rows 0fr → 1fr; hidden content is
   also made non-focusable (visibility) once collapsed. */
.hs-mnav .hs-mnav-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--lc-dur) var(--lc-ease);
}
.hs-mnav .hs-mnav-item.is-open > .hs-mnav-sub { grid-template-rows: 1fr; }
.hs-mnav .hs-mnav-sub-inner {
  min-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
  transition: opacity var(--lc-dur-fast) var(--lc-ease), visibility 0s linear var(--lc-dur);
}
.hs-mnav .hs-mnav-item.is-open > .hs-mnav-sub > .hs-mnav-sub-inner {
  visibility: visible; opacity: 1;
  transition: opacity var(--lc-dur) var(--lc-ease) .05s, visibility 0s;
}
.hs-mnav .hs-mnav-all {
  display: flex !important; align-items: center; justify-content: space-between;
  min-height: 44px; margin: 0 0 4px !important; padding: 0 14px !important;
  background: var(--lc-tint) !important; border-radius: var(--lc-radius) !important;
  font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--lc-ink) !important; text-decoration: none !important;
}
.hs-mnav .hs-mnav-list { list-style: none; margin: 0 !important; padding: 0 0 12px !important; }
.hs-mnav .hs-mnav-list > li { margin: 0 !important; padding: 0 !important; list-style: none; }
.hs-mnav .hs-mnav-link {
  display: flex !important; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 2px !important; margin: 0 !important;
  font-size: .8125rem !important; font-weight: 500 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; line-height: 1.3 !important; color: var(--lc-body) !important;
  text-decoration: none !important; background: none !important; -webkit-tap-highlight-color: transparent;
}
.hs-mnav .hs-mnav-link:active { color: var(--lc-ink) !important; }
.hs-mnav .hs-mnav-thumb {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--lc-radius) !important;
  background: var(--lc-tint-2) center / cover no-repeat;
}
.hs-mnav .hs-mnav-list--text { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding-top: 2px !important; }
.hs-mnav .hs-mnav-list--text .hs-mnav-link { min-height: 44px; padding: 4px 2px !important; }

/* About / Contact blocks now follow the menu — quieter, on a tint panel */
.hs-drawer-v2 > .offcanvas-about,
.hs-drawer-v2 > .offcanvas-address {
  flex: none; margin: 8px 20px 0 !important; padding: 18px !important;
  background: var(--lc-tint); border-radius: var(--lc-radius) !important;
  font-size: .875rem; line-height: 1.55;
}
.hs-drawer-v2 > .offcanvas-address:last-child { margin-bottom: 24px !important; }
.hs-drawer-v2 > .offcanvas-about > label,
.hs-drawer-v2 > .offcanvas-address > label {
  display: block; font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 0 10px !important; color: var(--lc-ink) !important;
}
.hs-drawer-v2 > .offcanvas-address .offcanvas-info { margin: 0 0 14px !important; }
.hs-drawer-v2 > .offcanvas-address .offcanvas-info li { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; line-height: 1.45; }
.hs-drawer-v2 > .offcanvas-address .offcanvas-info li > i { flex: none; margin: 2px 0 0 !important; }
.hs-drawer-v2 > .offcanvas-about p { margin: 0 !important; color: var(--lc-body); font-size: .875rem !important; }

@media (prefers-reduced-motion: reduce) {
  .hs-navbar > li.menu-item-has-children > .dropdown-menu.depth_0 { animation: none !important; }
  .blusho-offcanvas-drawer.hs-drawer-v2, .hs-mnav .hs-mnav-sub, .hs-mnav .hs-mnav-sub-inner, .hs-nav-scrim { transition: none !important; }
}

/* Header logo: the theme outputs a dark AND a white (.light-logo, for
   transparent headers) logo; since .site-logo became a flex row (logo
   centring fix, 2026-09-22) the invisible white copy sat beside the real one
   and reserved ~163px, squeezing the nav until "SALE / BLOG" ran under the
   search icon at 1025–1300px. This header is never transparent. */
.site-header .header-desktop .hs-header-logo .light-logo { display: none !important; }
/* Narrow desktop (1025–1180): the 10-item nav needs ~707px; tighten type,
   padding and the actions' left inset so it never runs under the icons. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .hs-navbar > li > a { padding-left: .2rem !important; padding-right: .2rem !important; font-size: .72rem !important; letter-spacing: .02em; gap: .2rem; }
  .hs-navbar > li.menu-item-has-children > a::before { width: 6px; height: 6px; }
  .hs-header-actions { padding-left: .5rem; gap: .25rem; }
  .hs-header-logo img, .hs-header-logo svg { max-height: 32px; }
}

/* ==========================================================================
   §Z  SITE POLISH PASS (2026-09-24) — "million-euro feel" within the brand:
   ink #111 / cream tints / League Spartan / 10px radius / --lc-ease motion.
   Nothing here adds new content; it refines what exists.
   ========================================================================== */

/* ---- Z1 Type fixes ------------------------------------------------------ */
/* Line-clamped product titles (overflow:hidden on the <a>) shaved the left
   edge off League Spartan capitals (T, F, R, B, S overhang their advance by
   ~1px) → "ƬHALGO". Give the clip box 2px of inline room, net zero. */
.rtsb-grid-item .product-title a, .hs-prod-row .product-title a,
li.product .rt-shop-title a, .rtsb-grid-item .product-title, .hs-prod-row [class*="product-title"] {
  padding-inline: 2px !important; margin-inline: -2px !important;
}
/* Theme forces Title Case on every .main-title — the homepage intro read
   "Lavichic.Mt Is Your Go-To Beauty Destination…". Show copy as written. */
.elementor-element-8b5768c .main-title { text-transform: none !important; text-wrap: balance; }
/* Blog meta: the date's "-----" separator trailed into nothing (comments
   item is hidden). */
.rtsb-post-meta .rtsb-meta-item.date::after { content: none !important; display: none !important; }
.rtsb-post-meta .rtsb-meta-item.comments { display: none !important; }

/* ---- Z2 Motion: scroll reveal (JS adds .hs-reveal only to below-the-fold
   elements, so the first frame is always complete) ------------------------ */
.hs-reveal {
  opacity: 0; translate: 0 18px;
  transition: opacity .7s var(--lc-ease) var(--hs-rd, 0ms), translate .8s var(--lc-ease) var(--hs-rd, 0ms);
}
.hs-reveal.is-in { opacity: 1; translate: 0 0; }
/* Listing grids: freshly rendered / infinite-scroll / filtered cards ease in */
@keyframes hsCardIn { from { opacity: 0; translate: 0 12px; } }
body:not(.home) .rtsb-content-loader > .rtsb-col-grid:not(.rtsb-carousel-slider) { animation: hsCardIn .55s var(--lc-ease) backwards; }
body:not(.home) .rtsb-content-loader > .rtsb-col-grid:not(.rtsb-carousel-slider):nth-child(4n+2) { animation-delay: 50ms; }
body:not(.home) .rtsb-content-loader > .rtsb-col-grid:not(.rtsb-carousel-slider):nth-child(4n+3) { animation-delay: 100ms; }
body:not(.home) .rtsb-content-loader > .rtsb-col-grid:not(.rtsb-carousel-slider):nth-child(4n+4) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) {
  .hs-reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
  body:not(.home) .rtsb-content-loader > .rtsb-col-grid:not(.rtsb-carousel-slider) { animation: none !important; }
}

/* ---- Z3 Homepage category image cards (Gift Sets / Sale / SPF) ---------- */
/* Title used to sit top-centre, 30px, underlined white. Now: bottom-left
   editorial caption on a soft scrim, image zooms on hover. */
.rt-image-box-layout-2 .rt-image-box.rt-image-box {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important;
  gap: 16px; padding: clamp(20px, 2.2vw, 32px) !important;
  border-radius: var(--lc-radius) !important;
}
.rt-image-box-layout-2 .rt-image-box.rt-image-box::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: inherit; background-size: cover; background-position: center;
  transition: transform var(--lc-dur-slow) var(--lc-ease), scale 1.2s var(--lc-ease);
  border-radius: 0 !important;
}
.rt-image-box-layout-2 .rt-image-box.rt-image-box::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,17,17,0) 45%, rgba(17,17,17,.55) 100%);
  border-radius: 0 !important;
}
.rt-image-box-layout-2:hover .rt-image-box.rt-image-box::before { scale: var(--lc-zoom); }
.rt-image-box-layout-2 .rt-image-box .rt-content {
  position: static !important; inset: auto !important; transform: none !important;
  margin: 0 !important; padding: 0 !important; text-align: left !important; width: auto !important;
}
.rt-image-box-layout-2 .rt-image-box .rt-title {
  text-decoration: none !important; text-align: left !important;
  font-family: var(--lc-font); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem) !important;
  font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: .01em; color: #fff !important;
  text-shadow: 0 1px 12px rgba(17,17,17,.25);
}
.rt-image-box-layout-2 .rt-image-box .rt-button {
  position: static !important; inset: auto !important; transform: none !important; margin: 0 !important;
}
/* on the dark scrim the ink CTA reads as a hole — use the hero's white CTA */
html body :is(.rt-image-box-layout-2 .rt-button .btn.button-3, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  background: #fff !important; color: var(--lc-ink) !important; border-color: #fff !important; -webkit-text-fill-color: var(--lc-ink);
}
html body :is(.rt-image-box-layout-2 .rt-button .btn.button-3, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx):hover {
  background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important; -webkit-text-fill-color: #fff;
}

/* ---- Z4 Blog cards: one hover language with the product cards ---------- */
.rtsb-post-grid article .rtsb-post-title a, .rtsb-post-grid .rtsb-post-title a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--lc-dur) var(--lc-ease);
}
.rtsb-post-grid article:hover .rtsb-post-title a { background-size: 100% 1px; }

/* ---- Z5 Mobile homepage product rows → swipe rails --------------------- */
/* Each category row used to stack its whole feed as a 2-col grid (~20 cards
   per category ⇒ an endless homepage). Now a native scroll-snap rail with a
   peek of the next card, bleeding to the screen edge like the brand strip. */
@media (max-width: 767px) {
  body .hs-prod-row .swiper { overflow: visible !important; }
  body .hs-prod-row .swiper-wrapper.swiper-wrapper {
    display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
    gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--hs-rail-pad, 16px);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    width: auto !important; margin-inline: calc(-1 * var(--hs-rail-pad, 16px)) !important;
    padding: 2px var(--hs-rail-pad, 16px) 14px !important; transform: none !important;
  }
  body .hs-prod-row .swiper-wrapper.swiper-wrapper::-webkit-scrollbar { display: none; }
  body .hs-prod-row .swiper-slide.swiper-slide {
    flex: 0 0 calc((100vw - 2 * var(--hs-rail-pad, 16px) - 12px) / 2.25) !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    scroll-snap-align: start; height: auto !important; margin: 0 !important; transform: none !important;
  }
  body .hs-prod-row .swiper-slide-duplicate { display: none !important; }
}

/* ---- Z6 Listing page rhythm --------------------------------------------- */
@media (min-width: 1025px) {
  .hs-content-col-main .rtsb-row.rtsb-content-loader { row-gap: 28px !important; }
}
/* breathing room before the trust band on every page */
.site-footer .hs-trust { margin-top: clamp(40px, 5vw, 72px) !important; }

/* ---- Z7 Product page ---------------------------------------------------- */
.single-product .content-area { padding-top: clamp(20px, 3vw, 44px) !important; }
@media (min-width: 1025px) {
  .single-product div.product .rtwpvg-images { display: block; }
  .single-product div.product .rtwpvg-wrapper { width: 100% !important; max-width: 620px; }
}
.single-product .rtwpvg-gallery-image,
.single-product .rtwpvg-single-image-container,
.single-product .rtwpvg-single-image-container img.zoomImg { background: var(--lc-tint-2) !important; }
.single-product .rtwpvg-slider-wrapper { border-radius: var(--lc-radius) !important; overflow: hidden; }
.single-product .rtwpvg-trigger { box-shadow: var(--lc-shadow-sm); transition: background-color var(--lc-dur-fast) var(--lc-ease); }
.single-product .summary .hs-pdp-brand {
  display: inline-block; margin: 0 0 10px; text-decoration: none !important;
  font-size: var(--lc-fs-eyebrow) !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lc-muted) !important; transition: color var(--lc-dur-fast) var(--lc-ease);
}
.single-product .summary .hs-pdp-brand:hover { color: var(--lc-ink) !important; }
.single-product .summary .product_title {
  font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem) !important; font-weight: 600 !important;
  line-height: 1.15 !important; letter-spacing: -.005em; margin: 0 0 14px !important; text-wrap: balance;
}
.single-product .summary > .price { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem) !important; margin: 0 0 18px !important; }
.single-product .summary .woocommerce-product-details__short-description { max-width: 60ch; color: var(--lc-body); margin-bottom: 24px; }
.single-product .summary .product_meta { padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--lc-line); font-size: .875rem; }

/* ---- Z8 Footer ----------------------------------------------------------- */
.site-footer .elementor-element-bc58373 { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(24px, 3vw, 40px) !important; }
.site-footer .elementor-element-bc58373 > .e-con-inner { padding-block: 0 !important; row-gap: 40px; }
/* column headings: quiet eyebrow labels instead of 32px shouting caps */
html body :is(.site-footer .elementor-element-bc58373 .main-title.line-shape, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; line-height: 1.2 !important;
  color: rgba(255,255,255,.55) !important; -webkit-text-fill-color: currentColor; background: none !important;
  margin: 0 0 22px !important; padding: 0 !important;
}
.site-footer .elementor-element-bc58373 .main-title.line-shape::before,
.site-footer .elementor-element-bc58373 .main-title.line-shape::after,
.site-footer .elementor-element-bc58373 .line-shape::before,
.site-footer .elementor-element-bc58373 .line-shape::after { display: none !important; }
/* subscribe headline: confident, not underlined */
html body :is(.site-footer .elementor-element-0df8361 .main-title, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem) !important; font-weight: 600 !important;
  line-height: 1.2 !important; text-decoration: none !important; letter-spacing: 0 !important;
  color: #fff !important; -webkit-text-fill-color: #fff; background: none !important; margin: 0 !important;
}
.site-footer .elementor-element-0df8361 .main-title * { text-decoration: none !important; }
.site-footer .elementor-element-1b5035f { row-gap: 22px; }
.site-footer .elementor-element-1b5035f.footer-widget-line::after,
.site-footer .elementor-element-1b5035f.footer-widget-line::before { background: rgba(255,255,255,.1) !important; }
/* link lists */
.site-footer .elementor-element-bc58373 .elementor-widget-rt-site-menu li { margin: 0 0 12px !important; padding: 0 !important; }
.site-footer .elementor-element-bc58373 .elementor-widget-rt-site-menu a {
  font-size: .9375rem !important; color: rgba(255,255,255,.78) !important; padding: 0 !important;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--lc-dur-fast) var(--lc-ease), background-size var(--lc-dur) var(--lc-ease) !important;
}
.site-footer .elementor-element-bc58373 .elementor-widget-rt-site-menu a:hover { color: #fff !important; background-size: 100% 1px; }
.site-footer .elementor-element-58ca6c1, .site-footer .elementor-element-58ca6c1 * { font-size: .9375rem; line-height: 1.6; }
.site-footer .elementor-element-58ca6c1 a { color: rgba(255,255,255,.78) !important; transition: color var(--lc-dur-fast) var(--lc-ease); }
.site-footer .elementor-element-58ca6c1 a:hover { color: #fff !important; }
/* social: outlined circles that fill on hover */
.site-footer .elementor-element-cb1d6d6 a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 50% !important;
  color: #fff !important; transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease);
}
.site-footer .elementor-element-cb1d6d6 a:hover { background: #fff !important; color: var(--lc-ink) !important; border-color: #fff; }
.site-footer .elementor-element-cb1d6d6 a:hover i, .site-footer .elementor-element-cb1d6d6 a:hover svg { color: var(--lc-ink) !important; fill: currentColor; }
.site-footer .elementor-element-3ea45b5, .site-footer .elementor-element-3ea45b5 * { font-size: .8125rem !important; color: rgba(255,255,255,.5) !important; }

/* ---- Z9 Brands directory: compact A–Z ---------------------------------- */
/* One small card per full-width letter row made the page ~4000px of mostly
   empty space. Letter groups now sit side by side (letter in a narrow
   left column, cards beside it). */
@media (min-width: 900px) {
  .hs-brands-page .hs-brands-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr));
    column-gap: 48px; row-gap: 8px;
  }
  .hs-brands-page .hs-brands-group {
    display: grid; grid-template-columns: 44px 1fr; align-items: start; column-gap: 12px;
    margin: 0 !important; padding: 22px 0; border-top: 1px solid var(--lc-line);
  }
  .hs-brands-page .hs-brands-group__letter { margin: 0 !important; padding: 10px 0 0 !important; border: 0 !important; font-size: 1.75rem; line-height: 1; }
  .hs-brands-page .hs-brands-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
.hs-brands-page .hs-brand-card { border-radius: var(--lc-radius) !important; transition: background-color var(--lc-dur-fast) var(--lc-ease), translate var(--lc-dur) var(--lc-ease) !important; }
.hs-brands-page .hs-brand-card:hover { translate: none; } /* no x/y movement on hover (client, 14 Oct) */
/* search: ONE field (the §X input already carries the border) */
.hs-brands-search.hs-brands-search { position: relative; padding: 0 !important; border: 0 !important; background: none !important; }
.hs-brands-search > svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--lc-muted); }
html body :is(.hs-brands-search input, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { padding-left: 44px !important; width: 100%; background: #fff !important; }

/* ---- Z10 Account: remember-me sits on the button's baseline ------------- */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.woocommerce-form-login .woocommerce-form-login__rememberme { order: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; }
.woocommerce-form-login .woocommerce-form-login__submit { order: 1; margin: 0 !important; }
.woocommerce-account .content-area { padding-top: clamp(24px, 4vw, 64px) !important; }
/* hairline dividers must stay square (§M's blanket radius curves their ends) */
.single-product .summary .product_meta.product_meta,
.hs-brands-page .hs-brands-group.hs-brands-group,
.hs-brands-page .hs-brands-az.hs-brands-az { border-radius: 0 !important; }

/* Testimonials are a static grid (initTestimonialSizing destroys the
   Swiper); never let a late Swiper transform push the cards off-screen. */
.rtsb-testimonial-layout4 .rtsb-carousel-slider > .swiper-wrapper { transform: none !important; }

/* ---- Z11 Listing toolbar ------------------------------------------------ */
.hs-shop-title-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-result-count { font-size: .8125rem; letter-spacing: .04em; color: var(--lc-muted); }
.hs-result-count:empty { display: none; }
.hs-shop-bar__actions { display: flex; align-items: center; gap: 10px; }
.hs-shop-bar__actions .rtsb-archive-view-mode.hs-in-bar { display: flex !important; gap: 6px; margin: 0; }
.hs-shop-bar__actions .rtsb-archive-view-mode.hs-in-bar .rtsb-mode-switcher { width: var(--lc-ctl-md) !important; height: var(--lc-ctl-md) !important; }
@media (min-width: 1025px) { .hs-toolbar-emptied { display: none !important; } }

/* ---- Z12 Micro-interactions --------------------------------------------- */
@keyframes hsBump { 0% { scale: 1; } 35% { scale: 1.35; } 65% { scale: .92; } 100% { scale: 1; } }
.hs-bump { animation: hsBump .55s var(--lc-ease); }
.hs-img-fade { opacity: 0; transition: opacity .6s var(--lc-ease); }
.hs-img-fade.is-loaded { opacity: 1; }
::selection { background: var(--lc-tint-2); color: var(--lc-ink); }
/* cart CTA: theme forces display:block, so centre the label by line-height */
html body :is(.wc-proceed-to-checkout a.checkout-button, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { line-height: calc(var(--lc-ctl-lg) - 2px) !important; padding-block: 0 !important; }
/* footer subscribe: drop the stray <br> after the Turnstile widget */
.site-footer .cf-turnstile-br { display: none !important; }
@media (prefers-reduced-motion: reduce) { .hs-bump { animation: none !important; } .hs-img-fade { opacity: 1 !important; transition: none !important; } }
/* grid rhythm: the row-gap already spaces rows; the column's own 30px
   bottom margin doubled it to ~58px */
@media (min-width: 1025px) { .hs-content-col-main .rtsb-content-loader > .rtsb-col-grid { margin-bottom: 0 !important; } }
/* filter sidebar section dividers stay square */
.hs-filter-panel .rtsb-product-filters.rtsb-product-filters,
.hs-filter-panel .hs-filter-sidebar__head.hs-filter-sidebar__head,
.hs-filter-panel .product-filter-toggle.product-filter-toggle { border-radius: 0 !important; }

/* ---- Z13 Blog articles: bring embedded post styling onto the brand ------ */
/* Some posts ship their own <style> block (Georgia/Arial, #4965af blue,
   navy CTA box) whose bare body/h1/h2/p rules leak onto the whole page.
   Re-assert the site type + palette; keep the semantic undertone colours
   (warm/cool/neutral cards) since they carry meaning in the article. */
body.single-post, body.single-post p, body.single-post .entry-content :is(p, h1, h2, h3, .intro, .faq-a, .faq-q, .tip-label, .post-tag, .shop-label) { font-family: var(--lc-font) !important; }
body.single-post .entry-content :is(h1, h2, h3, .faq-q) { color: var(--lc-ink); }
body.single-post .entry-content :is(p, .faq-a) { color: var(--lc-body); }
body.single-post .entry-content .post-tag,
body.single-post .entry-content .tip-label { color: var(--lc-muted) !important; }
body.single-post .entry-content .intro { border-left-color: var(--lc-ink) !important; color: var(--lc-body) !important; }
body.single-post .entry-content .divider { background: var(--lc-line) !important; }
body.single-post .entry-content .tip-box { background: var(--lc-tint) !important; border-left: 3px solid var(--lc-ink) !important; border-radius: var(--lc-radius) !important; }
body.single-post .entry-content :is(.step, .mistake, .check-item) { background: var(--lc-tint) !important; border-radius: var(--lc-radius) !important; }
body.single-post .entry-content .mistake { border-left-color: var(--lc-tint-2) !important; }
body.single-post .entry-content :is(.step-num, .check-tick) { background: var(--lc-ink) !important; font-family: var(--lc-font) !important; }
body.single-post .entry-content .mistake-x { color: var(--lc-ink) !important; font-family: var(--lc-font) !important; }
body.single-post .entry-content .card { border-radius: var(--lc-radius) !important; }
body.single-post .entry-content .card-badge { border-radius: var(--lc-radius) !important; font-family: var(--lc-font) !important; }
body.single-post .entry-content .faq-item { border-color: var(--lc-line) !important; }
body.single-post .entry-content .shop-box { background: var(--lc-ink) !important; border-radius: var(--lc-radius) !important; }
body.single-post .entry-content .shop-box a {
  background: #fff !important; color: var(--lc-ink) !important; border-radius: var(--lc-radius) !important;
  font-family: var(--lc-font) !important; font-size: var(--lc-btn-fs) !important; letter-spacing: var(--lc-btn-ls) !important;
  text-transform: uppercase; min-height: var(--lc-ctl-lg); line-height: var(--lc-ctl-lg) !important; padding: 0 1.6rem !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease);
}
body.single-post .entry-content .shop-box a:hover { background: var(--lc-tint-2) !important; }

/* ---- Z14 Text is never rounded ----------------------------------------- */
/* §M's blanket radius reaches every element; on clamped titles (overflow:
   hidden) the 10px corner shaved the first capital — "ƬHALGO", "ꞵOSS" in
   the cards and the cart popup. Headings and product-name links stay square. */
html body :is(h1, h2, h3, h4, h5, h6, .product-title a, .rt-shop-title a, .mini_cart_item .product-title a,
  [class*="title"] > a, [class*="name"] > a, .woocommerce-LoopProduct-link:not(.rtsb-img-link)) { border-radius: 0 !important; }

/* ---- Z15 Product cards: one image only --------------------------------- */
/* ShopBuilder's hover swap showed a second image on only some products, and
   it slid in from the bottom-right. Cards keep the single image + the one
   shared hover (subtle zoom), consistent across the catalogue. */
.rtsb-product-img img.rtsb-img-hover, .rtsb-product-img .rtsb-img-hover { display: none !important; }
/* …and ShopBuilder fades the MAIN image to 0 on hover when a hover image
   exists — keep it visible (the lazy fade-in class is still respected). */
.rtsb-grid-item .rtsb-product-img img.rtsb-product-image:not(.rtsb-img-hover):not(.hs-img-fade:not(.is-loaded)) { opacity: 1 !important; visibility: visible !important; }

/* ==========================================================================
   §Z2  PREMIUM LAYOUT PASS (2026-09-24, round 2)
   Constraints honoured from the client sheet: centred section headings
   (row 12), card hover = subtle image zoom only (row 17), tiles slightly
   smaller (row 34), product page image smaller with more spacing (row 46).
   ========================================================================== */

/* ---- One page gutter everywhere (header, listing, homepage) ------------- */
:root { --hs-container-pad: clamp(16px, 3vw, 48px); }
@media (min-width: 1025px) {
  .home .elementor-4630 > .e-con.hs-prod-row,
  .home .elementor-4630 > .e-con.hs-brand-strip,
  .home .elementor-4630 > .e-con-full:not(.elementor-element-e602a94) { padding-inline: var(--hs-container-pad) !important; }
  .home .elementor-4630 > .e-con-boxed > .e-con-inner { padding-inline: var(--hs-container-pad) !important; max-width: none !important; }
}
@media (max-width: 767px) { :root { --hs-rail-pad: var(--hs-container-pad); } }

/* ---- Vertical rhythm: every homepage section breathes the same ---------- */
.home .elementor-4630 > .e-con.hs-prod-row { padding-block: var(--lc-section-y) !important; margin-block: 0 !important; }
.home .elementor-4630 > .e-con.hs-brand-strip { padding-block: calc(var(--lc-section-y) * .8) !important; }
.home .hs-row-head { row-gap: 18px !important; margin-bottom: clamp(24px, 3vw, 40px) !important; }
.home .hs-row-head .main-title { letter-spacing: -.01em !important; line-height: 1.1 !important; }

/* ---- Hero: copy eases in with each slide -------------------------------- */
.hs-hero-slide .hs-hero-card--text > * {
  opacity: 0; translate: 0 18px;
  transition: opacity .7s var(--lc-ease), translate .9s var(--lc-ease);
}
.hs-hero-slide.is-current .hs-hero-card--text > * { opacity: 1; translate: 0 0; }
.hs-hero-slide.is-current .hs-hero-card--text > :nth-child(2) { transition-delay: .08s; }
.hs-hero-slide.is-current .hs-hero-card--text > :nth-child(3) { transition-delay: .16s; }
.hs-hero-slide.is-current .hs-hero-card--text > :nth-child(4) { transition-delay: .24s; }
.hs-hero-instant .hs-hero-slide .hs-hero-card--text > * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hs-hero-slide .hs-hero-card--text > * { opacity: 1 !important; translate: none !important; transition: none !important; }
}

/* ---- Product page (client row 46): calmer, smaller image, more air ------ */
@media (min-width: 1025px) {
  .single-product div.product { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .single-product div.product > .rtwpvg-images { grid-column: 1; width: 100% !important; max-width: 520px; float: none !important; margin: 0 !important; justify-self: end; }
  .single-product div.product > .summary {
    grid-column: 2; width: 100% !important; max-width: 560px; float: none !important; margin: 0 !important;
    padding-top: 8px;
  }
  .single-product div.product > :not(.rtwpvg-images):not(.summary) { grid-column: 1 / -1; }
  .single-product div.product .rtwpvg-wrapper { max-width: 520px !important; }
  .single-product div.product > .woocommerce-tabs { margin-top: clamp(48px, 6vw, 88px) !important; }
}
/* the product itself sits inset in its well so tall bottles never dominate */
.single-product .rtwpvg-single-image-container img:not(.zoomImg) { padding: 12% !important; box-sizing: border-box; object-fit: contain; }
/* theme's body{overflow:hidden auto} breaks position:sticky (same as §H) */
@media (min-width: 1025px) { body.single-product:not(.hs-drawer-lock) { overflow-x: clip !important; overflow-y: visible !important; } }
/* contained carousels clip at the gutter (no sliver of the previous slide) */
@media (min-width: 768px) { .home .hs-prod-row .rtsb-carousel-slider.swiper, .home .hs-prod-row .swiper { overflow: hidden !important; } }
/* Mobile: the homepage blog section's content is hidden on phones, but its
   container kept 80px/56px padding → a ~176px white gap above the trust bar.
   Collapse the empty section, and use a smaller lead-in to the trust band. */
@media (max-width: 767px) {
  .home .elementor-element-e59bce5:not(:has(.elementor-element-30d7757 > :not(.elementor-hidden-mobile))) { display: none !important; }
  .site-footer .hs-trust { margin-top: 16px !important; }
}
@media (max-width: 767px) { .home .elementor-element-19ddd77 > .e-con-inner { padding-bottom: 0 !important; } }

/* Inner pages: the theme's .content-area ships 140px top AND bottom padding
   — a long empty band before the trust bar (blog, account, contact…).
   :where() keeps this below the product-page override. */
:where(body:not(.home)) .content-area { padding-top: clamp(32px, 4vw, 64px) !important; padding-bottom: clamp(32px, 4vw, 64px) !important; }
/* blog pagination (only visible if infinite scroll can't run): readable */
.pagination-area .pagination-list a { color: var(--lc-ink) !important; border: 1px solid var(--lc-line); border-radius: var(--lc-radius) !important; font-size: .9375rem !important; transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease); }
.pagination-area .pagination-list li.active a, .pagination-area .pagination-list a:hover { background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink); }
/* Blog archive: the theme's masonry positions every card absolutely, so
   posts appended by infinite scroll piled on top of page 1. Client row 42
   wants an even 3–4-per-row grid anyway — make it a real CSS grid. */
.blog .rt-masonry-grid, .archive .rt-masonry-grid, .page .rt-masonry-grid {
  display: grid !important; height: auto !important; margin: 0 !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
}
.rt-masonry-grid > .blusho-post-card {
  position: static !important; left: auto !important; top: auto !important; transform: none !important;
  width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important;
}
@media (min-width: 1400px) { .blog .rt-masonry-grid, .archive .rt-masonry-grid, .page .rt-masonry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Listing pages: hide the shop section until initShopDrawer() has moved the
   filters into the sidebar / drawer — the raw theme layout (wide filter
   column, 3-up grid) flashed first on every category/brand load. A 2.5s
   failsafe reveals it even if the script never runs. */
@keyframes hsFailsafeShow { to { opacity: 1; } }
/* (superseded 2026-10-01 by the site-wide html.hs-ready page fade below) */
@keyframes hsListingIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.hs-listing-ready .elementor-element-b975cad { animation: none; } }
.blusho-offcanvas-drawer.hs-drawer-v2.hs-drawer-init { transition: none !important; }

/* ---- Page-load stability (2026-09-29, client videos) -------------------- */
/* Home: reserve the hero's space until initHeroCarousel() has built it — the
   page used to paint without a hero, then the carousel dropped in on top
   and shoved every section down. */
.home .elementor-4630:not(:has(.hs-hero-carousel)) > .elementor-element-fed099e {
  display: block !important; visibility: hidden; overflow: hidden;
  height: clamp(420px, 52vw, 680px); margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem) !important; padding: 0 !important;
}
.home .elementor-4630:not(:has(.hs-hero-carousel)) > .elementor-element-fed099e > * { display: none !important; }
@media (max-width: 767px) { .home .elementor-4630:not(:has(.hs-hero-carousel)) > .elementor-element-fed099e { height: clamp(460px, 130vw, 620px); } }
/* Product gallery: no blurred placeholder / fade while the slider initialises */
.single-product .rtwpvg-preload-style-blur img, .single-product .rtwpvg-preload-style-blur .rtwpvg-gallery-image,
.single-product .rtwpvg-images .rtwpvg-wrapper, .single-product .rtwpvg-container { filter: none !important; opacity: 1 !important; }

/* ---- Smaller product cards on product & brand pages -------------------- */
/* Related / up-sells were 4 huge cards across; brand "Promotions" were 5-up
   at full width. Both now use the same tile size as the shop grid (client
   row 34: tiles slightly smaller). */
@media (min-width: 768px) {
  body.single-product .related ul.products, body.single-product .up-sells ul.products,
  body .hs-promo-row.hs-promo-row {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 28px 16px !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  body.single-product .related ul.products > li.product, body.single-product .up-sells ul.products > li.product {
    width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; flex: none !important;
  }
}

/* ---- Brand strip v3: continuous marquee (client rows 14/15/70) ---------- */
.hs-brand-row-wrap { overflow: hidden; padding-block: 4px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.hs-brand-marquee { display: flex; width: max-content; will-change: transform; }
.hs-brand-marquee__lane { display: flex; flex: none; gap: 16px; padding-right: 16px; }
.hs-brand-marquee .hs-brand-card { flex: 0 0 168px; width: 168px; }
.hs-brand-row-wrap:hover .hs-brand-marquee, .hs-brand-row-wrap:focus-within .hs-brand-marquee,
.hs-brand-row-wrap:active .hs-brand-marquee { animation-play-state: paused; }
@keyframes hsMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) { .hs-brand-marquee .hs-brand-card { flex-basis: 132px; width: 132px; } .hs-brand-marquee__lane { gap: 12px; padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .hs-brand-marquee { animation: none; }
  .hs-brand-row-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .hs-brand-marquee__lane[aria-hidden] { display: none; }
}

/* ---- Mobile forms: no sideways drift, no iOS zoom (client rows 72/76) --- */
@media (max-width: 767px) {
  /* select2 keeps the original <select> in the DOM (visually hidden) at its
     natural width — 444px on a 390px phone, so checkout scrolled sideways */
  select.select2-hidden-accessible { width: 1px !important; max-width: 1px !important; }
  html:has(body.woocommerce-checkout), html:has(body.woocommerce-cart), html:has(body.woocommerce-account),
  body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account { overflow-x: clip !important; }
  /* iOS Safari zooms the page when a field under 16px gains focus; once
     zoomed the page pans left/right. 16px on every field prevents it. */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea, .select2-selection__rendered, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { font-size: 16px !important; }
}

/* ==========================================================================
   §Z3  Client sheet round 2 (2026-09-30)
   ========================================================================== */
/* Row 4 — mobile: logo centred, menu button stays right */
@media (max-width: 1024px) {
  .header-mobile .navigation-menu-wrap.navigation-menu-wrap { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .header-mobile .navigation-menu-wrap::before { content: ""; }
  .header-mobile .navigation-menu-wrap > .site-branding { grid-column: 2; justify-self: center; }
  .header-mobile .navigation-menu-wrap > .menu-icon-action { grid-column: 3; justify-self: end; }
  .header-mobile .site-branding img { max-height: 34px; width: auto; }
}

/* Row 74 — mobile bottom bar in the product-tile cream, ink icons */
.mobile-action-button .menu-icon-action,
.mobile-action-button .menu-icon-action > *,
.mobile-action-button .rt-search-popup { background: var(--lc-tint-2) !important; }
.mobile-action-button .menu-icon-action { box-shadow: 0 -1px 0 var(--lc-line), 0 -8px 24px rgba(17,17,17,.06) !important; }
.mobile-action-button a, .mobile-action-button i, .mobile-action-button svg, .mobile-action-button button { color: var(--lc-ink) !important; fill: currentColor; }
.mobile-action-button svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.mobile-action-button .cart-count, .mobile-action-button [class*="count"] { background: var(--lc-ink) !important; color: #fff !important; }

/* Rows 72/73/65 — search: full-screen on phones, uniform result thumbs */
@media (max-width: 767px) {
  .hs-search-overlay { align-items: stretch; }
  .hs-search-overlay__panel {
    width: 100% !important; max-height: none !important; height: 100dvh; margin: 0 !important;
    border-radius: 0 !important; padding: 16px 16px 0 !important;
  }
  .hs-search-overlay .result-wrap { max-height: none !important; flex: 1 1 auto; padding-bottom: 96px !important; overscroll-behavior: contain; }
}
.hs-search-overlay .result-wrap li { display: flex !important; align-items: center; gap: 14px; }
.hs-search-overlay .result-wrap li .thumb { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; margin: 0 !important;
  border-radius: var(--lc-radius) !important; overflow: hidden; background: var(--lc-tint-2); display: flex; align-items: center; justify-content: center; }
.hs-search-overlay .result-wrap li .thumb a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.hs-search-overlay .result-wrap li .thumb img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; padding: 6px; border-radius: 0 !important; background: transparent; }
.hs-search-overlay .result-wrap li .content { min-width: 0; flex: 1 1 auto; }
.hs-search-brand-initial { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--lc-ink); color: #fff; font-weight: 600; font-size: 1.125rem; }
.hs-search-overlay .search-brand-item .title a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hs-search-kind { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-muted); flex-basis: 100%; }
.hs-search-count { font-size: .8125rem; color: var(--lc-muted); font-weight: 400; }

/* Row 61 — search within a brand page */
.hs-brand-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 0 22px; }
.hs-brand-search > svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--lc-muted); pointer-events: none; }
html body :is(.hs-brand-search input[type="search"], .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) { padding-left: 44px !important; width: 100%; background: #fff !important; }
.hs-brand-search__clear { flex: none; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Row 60 — tighter homepage rhythm on desktop */
@media (min-width: 1025px) {
  .home .elementor-4630 > .e-con.hs-prod-row { padding-block: clamp(28px, 3vw, 48px) !important; }
  .home .elementor-4630 > .e-con.hs-brand-strip { padding-block: clamp(24px, 2.4vw, 40px) !important; }
  .home .hs-row-head { margin-bottom: clamp(18px, 2vw, 28px) !important; }
  .home .hs-brand-head { margin-bottom: 20px !important; }
}
/* mobile listings: the native "Default sorting" select + view toggle row
   duplicated our Filter/Sort buttons */
@media (max-width: 1024px) { body.hs-listing-ready .elementor-element-180dd16 { display: none !important; } }
/* select2's hidden original <select> overflowed checkout sideways on
   desktop too (≈75px at 1280) — apply at every width */
select.select2-hidden-accessible { width: 1px !important; max-width: 1px !important; }

/* ---- Page-ready fade (2026-10-01, client video) ------------------------- */
/* The 600KB+ pages paint progressively, so shoppers saw the raw page-builder
   layout (cardless product rows, stray headings, half-built listings) for a
   moment before haystack-header.js (end of <body>) rearranged it. Content is
   now held invisible until init() finishes, then fades in; the header stays
   visible throughout. 3s failsafe if the script never runs. */
html:not(.hs-ready) .site-content, html:not(.hs-ready) .site-footer { opacity: 0; animation: hsFailsafeShow .01s linear 3s forwards; }
html.hs-ready .site-content, html.hs-ready .site-footer { animation: hsPageIn .32s var(--lc-ease) both; }
@keyframes hsPageIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.hs-ready .site-content, html.hs-ready .site-footer { animation: none; } }
/* Smooth cross-page fade where supported (Chrome/Edge 126+, Safari 18.2+) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Brand strip v4: draggable marquee + arrows */
.hs-brand-row-wrap { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hs-brand-row-wrap.is-dragging { cursor: grabbing; }
.hs-brand-row-wrap.is-dragging a { pointer-events: none; }
.hs-brand-row-wrap img { -webkit-user-drag: none; pointer-events: none; }
.hs-brand-row-wrap .hs-brand-row-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
@media (max-width: 767px) { .hs-brand-row-wrap .hs-brand-row-arrow { display: none; } }
.hs-brand-row-wrap.hs-brand-row-wrap { -webkit-mask-image: none; mask-image: none; position: relative; }
.hs-brand-row-wrap::before, .hs-brand-row-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 4vw, 64px); z-index: 1; pointer-events: none; border-radius: 0 !important;
}
.hs-brand-row-wrap::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.hs-brand-row-wrap::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* ==========================================================================
   §AC  MY ACCOUNT (2026-10-02) — header, icon menu, dashboard tiles, address
   cards, orders table, forms. Replaces the theme's olive active state.
   Markup: standard WooCommerce + initAccountUI() in haystack-header.js.
   ========================================================================== */
body.woocommerce-account.logged-in .content-area { padding-top: clamp(28px, 4vw, 56px) !important; padding-bottom: clamp(40px, 5vw, 80px) !important; }
body.woocommerce-account .woocommerce.hs-account {
  display: grid !important; grid-template-columns: 248px minmax(0, 1fr); grid-template-areas: "head head" "nav content";
  column-gap: clamp(32px, 4vw, 64px); row-gap: clamp(24px, 3vw, 36px);
  max-width: 1180px; margin: 0 auto;
}
body.woocommerce-account .woocommerce.hs-account::before, body.woocommerce-account .woocommerce.hs-account::after { display: none !important; }

/* Header */
.hs-ac-head.hs-ac-head { border-radius: 0 !important; }
.hs-ac-head { grid-area: head; display: flex; flex-direction: column; gap: 6px; padding-bottom: clamp(18px, 2vw, 24px); border-bottom: 1px solid var(--lc-line); border-radius: 0 !important; }
.hs-ac-eyebrow { margin: 0 !important; font-size: var(--lc-fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lc-muted); }
.hs-ac-title.hs-ac-title { margin: 0 !important; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem) !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: -.01em; color: var(--lc-ink) !important; text-transform: none !important; text-wrap: balance; }
.hs-ac-who { margin: 2px 0 0 !important; font-size: .875rem; color: var(--lc-muted); }
.hs-ac-who strong { color: var(--lc-ink); font-weight: 600; }
.hs-ac-who a { color: var(--lc-ink) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Menu */
body.woocommerce-account .hs-account > .woocommerce-MyAccount-navigation {
  grid-area: nav; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; align-self: start;
}
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; border-radius: 0 !important; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a {
  display: flex !important; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px !important; margin: 0 !important;
  border-radius: var(--lc-radius) !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--lc-font); font-size: .9375rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--lc-body) !important; text-decoration: none !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease) !important;
}
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a .hs-ac-icon { flex: none; color: var(--lc-muted); transition: color var(--lc-dur-fast) var(--lc-ease); border-radius: 0 !important; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a:hover { background: var(--lc-tint) !important; color: var(--lc-ink) !important; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a:hover .hs-ac-icon { color: var(--lc-ink); }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--lc-ink) !important; color: #fff !important; font-weight: 600 !important; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.is-active a .hs-ac-icon { color: #fff; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--lc-line) !important; border-radius: 0 !important; }
body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--lc-muted) !important; }

/* Content */
body.woocommerce-account .hs-account > .woocommerce-MyAccount-content {
  grid-area: content; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; min-width: 0; color: var(--lc-body);
}
.hs-account .woocommerce-MyAccount-content > p { font-size: .9375rem; line-height: 1.6; max-width: 62ch; }
.hs-account .woocommerce-MyAccount-content.hs-ac-dashboard > p { display: none; }

/* Dashboard tiles */
.hs-ac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hs-ac-tile {
  display: flex !important; align-items: center; gap: 16px; padding: 20px !important; min-height: 92px;
  background: var(--lc-tint) !important; border: 1px solid transparent; border-radius: var(--lc-radius) !important;
  color: var(--lc-ink) !important; text-decoration: none !important;
  transition: background-color var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease), translate var(--lc-dur) var(--lc-ease);
}
.hs-ac-tile:hover { background: #fff !important; border-color: var(--lc-line); translate: 0 -2px; box-shadow: var(--lc-shadow-sm); }
.hs-ac-tile__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% !important; background: #fff; color: var(--lc-ink); }
.hs-ac-tile:hover .hs-ac-tile__icon { background: var(--lc-tint-2); }
.hs-ac-tile__icon .hs-ac-icon { width: 22px; height: 22px; border-radius: 0 !important; }
.hs-ac-tile__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hs-ac-tile__text strong { font-size: 1rem; font-weight: 600; color: var(--lc-ink); }
.hs-ac-tile__text span { font-size: .8125rem; color: var(--lc-muted); }
.hs-ac-tile__arrow { flex: none; color: var(--lc-muted); transition: translate var(--lc-dur) var(--lc-ease), color var(--lc-dur-fast) var(--lc-ease); border-radius: 0 !important; }
.hs-ac-tile:hover .hs-ac-tile__arrow { translate: 4px 0; color: var(--lc-ink); }

/* Notices (no orders, verify email, no saved cards) */
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner,
.hs-account .woocommerce-MyAccount-content .woocommerce-info,
.hs-account .woocommerce-MyAccount-content .woocommerce-message {
  display: flex !important; align-items: center; gap: 16px; margin: 0 0 14px !important; padding: 18px 20px !important;
  background: var(--lc-tint) !important; border: 0 !important; border-radius: var(--lc-radius) !important; box-shadow: none !important;
  color: var(--lc-body) !important; font-size: .9375rem !important;
}
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner > svg,
.hs-account .woocommerce-MyAccount-content .woocommerce-info::before { display: none !important; }
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner,
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner * { outline: 0 !important; box-shadow: none !important; }
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; width: 100%; border: 0 !important; background: none !important; padding: 0 !important; }
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner__content .button { align-self: center; order: 2; margin: 0 0 0 auto !important; float: none !important; text-decoration: none !important; }
.hs-account .woocommerce-MyAccount-content .wc-block-components-notice-banner__content a:not(.button) { color: var(--lc-ink) !important; }

/* Addresses */
.hs-account .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 18px; }
.hs-account .woocommerce-Addresses::before, .hs-account .woocommerce-Addresses::after { display: none !important; }
.hs-account .woocommerce-Addresses .woocommerce-Address { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 22px !important; background: var(--lc-tint); border-radius: var(--lc-radius) !important; }
.hs-account .woocommerce-Address-title { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; }
.hs-account .woocommerce-Address-title::before, .hs-account .woocommerce-Address-title::after { display: none !important; }
.hs-account .woocommerce-Address-title h2 { margin: 0 !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--lc-ink) !important; float: none !important; }
.hs-account .woocommerce-Address-title .edit { float: none !important; font-size: .8125rem !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lc-ink) !important; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.hs-account .woocommerce-Address address { margin: 0 !important; font-style: normal; font-size: .9375rem; line-height: 1.65; color: var(--lc-body); }

/* Forms (account details, edit address) */
.hs-account .woocommerce-EditAccountForm, .hs-account .woocommerce-MyAccount-content form:not(.woocommerce-form-login) { max-width: 720px; }
.hs-account .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.hs-account .woocommerce-EditAccountForm > * { grid-column: 1 / -1; }
.hs-account .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; }
.hs-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; }
.hs-account .woocommerce-EditAccountForm .clear { display: none; }
.hs-account .woocommerce-MyAccount-content .form-row { float: none !important; width: auto !important; margin: 0 0 18px !important; padding: 0 !important; }
.hs-account .woocommerce-MyAccount-content .form-row label { display: block; margin: 0 0 6px !important; font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .04em; color: var(--lc-ink) !important; }
.hs-account .woocommerce-MyAccount-content .form-row em { display: block; margin-top: 6px; font-size: .8125rem; font-style: normal; color: var(--lc-muted); }
.hs-account .woocommerce-EditAccountForm fieldset { margin: 10px 0 22px !important; padding: 22px 22px 6px !important; border: 0 !important; background: var(--lc-tint); border-radius: var(--lc-radius) !important; }
.hs-account .woocommerce-EditAccountForm legend { float: left; width: 100%; margin: 0 0 16px !important; padding: 0 !important; font-family: var(--lc-font); font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--lc-ink) !important; }
.hs-account .woocommerce-EditAccountForm fieldset > .form-row { clear: both; }
.hs-account .woocommerce-EditAccountForm fieldset input { background: #fff !important; }

/* Orders table */
.hs-account .woocommerce-orders-table { width: 100%; border: 1px solid var(--lc-line) !important; border-radius: var(--lc-radius) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; font-size: .9375rem; }
.hs-account .woocommerce-orders-table th { background: var(--lc-tint) !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-muted) !important; padding: 12px 16px !important; border: 0 !important; text-align: left; }
.hs-account .woocommerce-orders-table td { padding: 14px 16px !important; border: 0 !important; border-top: 1px solid var(--lc-line) !important; vertical-align: middle; color: var(--lc-body); border-radius: 0 !important; }
.hs-account .woocommerce-orders-table__cell-order-number a { color: var(--lc-ink) !important; font-weight: 600; }
.hs-account .woocommerce-orders-table__cell-order-status { font-weight: 600; color: var(--lc-ink); }
.hs-account .woocommerce-orders-table .button { min-height: 34px !important; padding: 0 14px !important; margin: 2px 4px 2px 0 !important; }

/* Mobile: pill menu above the content */
@media (max-width: 767px) {
  body.woocommerce-account .woocommerce.hs-account { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "nav" "content"; row-gap: 18px; }
  .hs-ac-head { padding-bottom: 14px; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--hs-container-pad)) !important; padding: 2px var(--hs-container-pad) 6px !important; scroll-padding-inline: var(--hs-container-pad);
  }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li { flex: none; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a { min-height: 40px; padding: 0 14px !important; gap: 8px; font-size: .875rem !important; background: var(--lc-tint) !important; white-space: nowrap; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li a .hs-ac-icon { width: 18px; height: 18px; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  body.woocommerce-account .hs-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { background: transparent !important; border: 1px solid var(--lc-line) !important; }
  .hs-account .woocommerce-EditAccountForm { grid-template-columns: 1fr; }
  .hs-account .woocommerce-EditAccountForm > .form-row-first, .hs-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 1; }
  .hs-ac-tile { min-height: 76px; padding: 16px !important; }
  /* WooCommerce's responsive table: each order as a card */
  .hs-account .woocommerce-orders-table, .hs-account .woocommerce-orders-table tbody { border: 0 !important; display: block; }
  .hs-account .woocommerce-orders-table thead { display: none; }
  .hs-account .woocommerce-orders-table tr { display: block; margin-bottom: 12px; padding: 6px 16px; background: var(--lc-tint); border-radius: var(--lc-radius) !important; }
  .hs-account .woocommerce-orders-table td { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 0 !important; border-top: 1px solid var(--lc-line) !important; }
  .hs-account .woocommerce-orders-table tr td:first-child { border-top: 0 !important; }
  .hs-account .woocommerce-orders-table td::before { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lc-muted); }
}
@media (prefers-reduced-motion: reduce) { .hs-ac-tile, .hs-ac-tile__arrow { transition: none !important; } .hs-ac-tile:hover { translate: none; } }

/* ---- Loading placeholders (2026-10-05, client video) -------------------- */
/* 1. Homepage product rows: ShopBuilder starts each carousel up to ~1s after
   the page appears, and until then the raw slides (bare images, no cards)
   showed. Hold a cream card placeholder at the finished row height instead,
   then fade the real row in. */
@keyframes hsSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.hs-prod-row .rtsb-carousel-slider.slider-loading {
  min-height: 430px; border-radius: var(--lc-radius) !important;
  background: repeating-linear-gradient(90deg, var(--lc-tint-2) 0 calc(20% - 14px), transparent calc(20% - 14px) 20%);
  animation: hsSkelPulse 1.4s ease-in-out infinite;
}
.hs-prod-row .rtsb-carousel-slider.slider-loading > * { visibility: hidden !important; }
.hs-prod-row .rtsb-carousel-slider:not(.slider-loading) { animation: hsPageIn .35s var(--lc-ease) both; }
@media (min-width: 768px) and (max-width: 1099px) {
  .hs-prod-row .rtsb-carousel-slider.slider-loading { min-height: 640px; background: repeating-linear-gradient(90deg, var(--lc-tint-2) 0 calc(33.333% - 14px), transparent calc(33.333% - 14px) 33.333%); }
}
/* Phones: rows are native swipe rails (§Z5) that already look finished
   before ShopBuilder initialises them — no placeholder, never hide them. */
@media (max-width: 767px) {
  .hs-prod-row .rtsb-carousel-slider.slider-loading { min-height: 0; background: none; animation: none; }
  .hs-prod-row .rtsb-carousel-slider.slider-loading > * { visibility: visible !important; }
}

/* 2. Page transitions: while a page is still being arranged (content held
   back by html:not(.hs-ready)), show a calm cream placeholder under the
   header — a banner block and a row of cards — instead of a blank white
   page. It gives way the moment the page is ready (3s failsafe). */
@keyframes hsSkelOut { to { opacity: 0; visibility: hidden; } }
html:not(.hs-ready) #page.site::after {
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  left: var(--hs-container-pad); right: var(--hs-container-pad);
  top: calc(var(--hs-header-offset, 106px) + clamp(20px, 3vw, 40px)); height: min(70vh, 640px);
  border-radius: var(--lc-radius) !important;
  background:
    linear-gradient(var(--lc-tint) 0 0) top left / 100% 46% no-repeat,
    repeating-linear-gradient(90deg, var(--lc-tint-2) 0 calc(20% - 14px), transparent calc(20% - 14px) 20%) bottom left / 100% 44% no-repeat;
  animation: hsSkelPulse 1.4s ease-in-out infinite, hsSkelOut .2s linear 3s forwards;
}
@media (max-width: 767px) {
  html:not(.hs-ready) #page.site::after {
    top: calc(var(--hs-header-offset, 62px) + 16px);
    background:
      linear-gradient(var(--lc-tint) 0 0) top left / 100% 46% no-repeat,
      repeating-linear-gradient(90deg, var(--lc-tint-2) 0 calc(50% - 6px), transparent calc(50% - 6px) 50%) bottom left / 100% 44% no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-prod-row .rtsb-carousel-slider.slider-loading, html:not(.hs-ready) #page.site::after { animation: none; }
}

/* ==========================================================================
   §IMG  Client artwork (2026-10-09)
   The supplied images are light cream with the products to one side (and,
   for the hero, the headline baked in), so the dark-photo treatments above
   are swapped for ink-on-cream: no scrims, ink type, ink CTAs.
   ========================================================================== */
/* Hero: artwork slides show the whole image at its own ratio, no overlay copy. */
.hs-hero-slide--art { min-height: 0 !important; aspect-ratio: 2880 / 1360; }
.hs-hero-slide--art .hs-hero-card--image { position: absolute; inset: 0; background: var(--hs-art-bg, #f0e8e2); }
/* Height cap (client, 12 Oct: "visuals too big on web"): never taller than
   ~62% of the screen. When capped, the artwork is shown whole (contain) on
   its own backdrop colour, edges feathered so it blends into the sides. */
@media (min-width: 768px) {
  .hs-hero-slide--art { aspect-ratio: auto !important; height: min(47.22vw, 62vh); }
  /* img sized to the artwork itself (not the full-width box) so the edge
     feather lands on the picture's real edges */
  .hs-hero-slide--art .hs-hero-card--image { display: flex; justify-content: center; }
  .hs-hero-slide--art .hs-hero-card--image img {
    width: auto !important; height: 100% !important; max-width: 100%; aspect-ratio: 2560 / 1209; object-fit: cover !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  }
}
.hs-hero-slide--art .hs-hero-card--image::before { content: none; }
.hs-hero-slide--art .hs-hero-card--image img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
@media (max-width: 767px) {
  /* The artwork is 2.1:1 — keep it whole (cropping would cut the baked-in
     headline); a slightly taller box anchored left keeps the copy legible. */
  .hs-hero-slide--art { aspect-ratio: 2880 / 1360; }
  .hs-hero-carousel:has(.hs-hero-slide--art) .hs-hero-nav { bottom: .5rem; right: .5rem; padding: .25rem .35rem; }
  .hs-hero-carousel:has(.hs-hero-slide--art) .hs-hero-arrow { width: 24px !important; height: 24px !important; }
}

/* Promo bands: copy sits in the empty centre of the illustration. */
.hs-promo-band { background-color: #f1e9e3; }
.hs-promo-band__scrim { display: none; }
.hs-promo-band__eyebrow { color: var(--lc-ink); border-color: rgba(17,17,17,.55); }
.hs-promo-band__title { color: var(--lc-ink); text-shadow: none; max-width: 22ch; text-wrap: balance; }
.hs-promo-band__cta { background: var(--lc-ink); color: #fff; }
.hs-promo-band__inner:hover .hs-promo-band__cta { background: #fff; color: var(--lc-ink); }
.hs-promo-band__inner { max-width: min(520px, 46%); }
@media (max-width: 767px) {
  /* Illustrations are 2:1; on a phone the band is taller than wide, so the
     art crops to its middle — wash it back so the copy keeps contrast. */
  .hs-promo-band__scrim { display: block; background: rgba(241,233,227,.62); }
  .hs-promo-band__inner { max-width: 100%; }
}

/* Homepage cards (Gift Sets / Sale / SPF): product sits low on a podium,
   so the caption moves to the top, in ink, with no dark fade. */
.rt-image-box-layout-2 .rt-image-box.rt-image-box { justify-content: space-between !important; }
/* title top, CTA bottom on the plain podium — the product stays clear */
.rt-image-box-layout-2 .rt-image-box .rt-content { display: contents !important; }
.rt-image-box-layout-2 .rt-image-box.rt-image-box::after { content: none; }
.rt-image-box-layout-2 .rt-image-box .rt-title { color: var(--lc-ink) !important; text-shadow: none; }
html body :is(.rt-image-box-layout-2 .rt-button .btn.button-3, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx) {
  background: var(--lc-ink) !important; color: #fff !important; border-color: var(--lc-ink) !important; -webkit-text-fill-color: #fff;
}
html body :is(.rt-image-box-layout-2 .rt-button .btn.button-3, .lc-sx.lc-sx.lc-sx.lc-sx.lc-sx.lc-sx):hover {
  background: #fff !important; color: var(--lc-ink) !important; border-color: #fff !important; -webkit-text-fill-color: var(--lc-ink);
}

/* Brand hero: products are on the right, the left is open cream — the
   lockup sits there in ink, no scrim. */
.hs-brand-hero--image { background-color: #f1e9e3; background-position: right center !important; align-items: center; min-height: clamp(300px, 34.2vw, 560px); }
.hs-brand-hero--image .hs-brand-hero__scrim { display: none; }
.hs-brand-hero--image .hs-brand-hero__inner { max-width: min(560px, 46%); }
.hs-brand-hero--image .hs-brand-hero__logo { box-shadow: 0 10px 30px rgba(17,17,17,.08); }
.hs-brand-hero--image .hs-brand-hero__wordmark,
.hs-brand-hero--image .hs-brand-hero__promo,
.hs-brand-hero--image .hs-brand-hero__count { color: var(--lc-ink); text-shadow: none; }
@media (max-width: 767px) {
  .hs-brand-hero--image { min-height: 0; aspect-ratio: auto; flex-direction: column; align-items: stretch; background-size: 190% auto !important; background-position: 92% 0 !important; padding-top: 56vw !important; }
  .hs-brand-hero--image .hs-brand-hero__inner { max-width: none; padding: 1.25rem 1.25rem 1.5rem; background: #f1e9e3; }
}

/* Pinned Free Shipping band (12 Oct): wrapper gives the scroll distance,
   the band sticks under the header for it (initScrollScaleBands). Desktop
   only — on phones the band stays static (client row 71). */
/* Free Shipping parallax (12 Oct v3): full-screen window; the illustration
   is a position:fixed layer (.hs-band-fixed, added by initScrollScaleBands)
   that the band's clip-path crops, so the page scrolls over a still image.
   Composited, so no per-frame repaint (background-attachment:fixed was
   jittery) and no scroll-driven JS (that lagged). All widths since 12 Oct;
   these rules only apply once the JS has added .hs-band-fixed-on. */
.hs-promo-band--pin.hs-band-fixed-on.hs-band-fixed-on { background-image: none !important; clip-path: inset(0 round var(--lc-radius)); transition: none !important; }
.hs-band-fixed-on > .hs-band-fixed {
  position: fixed; left: 0; right: 0; top: var(--hs-header-h, 70px); height: var(--hs-band-h, calc(100vh - 70px));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
  pointer-events: none; z-index: 0;
}
.hs-band-hold { position: relative; }
.hs-band-hold > .hs-promo-band--pin.hs-band-fixed-on { position: sticky; }
.hs-band-fixed { display: none; }
.hs-band-fixed-on > .hs-band-fixed { display: block; }
@media (max-width: 767px) {
  /* Portrait screen, 2:1 illustration: show it whole along the bottom on a
     matching cream (cover would crop to its empty middle), copy above it. */
  .hs-band-fixed-on > .hs-band-fixed { background-color: #f0e8e2; background-size: 100% auto; background-position: center bottom; }
  .hs-promo-band--pin.hs-band-fixed-on .hs-promo-band__scrim { display: none; }
  /* centre the copy in the space above the illustration (≈ 50vw tall) */
  .hs-promo-band--pin.hs-band-fixed-on .hs-promo-band__inner { padding-bottom: calc(50vw + 1.5rem); }
  .hs-promo-band--pin.hs-band-fixed-on .hs-promo-band__title { font-size: clamp(1.6rem, 6.4vw, 2rem); }
}
/* Zoom-to-fit while locked (client 12 Oct): over the first 40% of the
   lock the band grows from a framed card to the full screen, and the
   illustration scales with it so it always fits the section. Driven by a
   CSS scroll timeline (runs with the scroll, no JS lag). Browsers without
   scroll timelines simply show the full band. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hs-band-hold { view-timeline: --hs-hold block; view-timeline-inset: var(--hs-hold-top, 70px) var(--hs-hold-bottom, 0px); }
    .hs-band-hold > .hs-promo-band--pin.hs-band-fixed-on {
      animation: hs-band-grow linear both; animation-timeline: --hs-hold; animation-range: contain 0% contain 40%;
    }
    .hs-band-hold .hs-band-fixed {
      transform-origin: 50% 50%;
      /* keeps zooming at the same rate after it's full screen, until the
         band has scrolled away (--hs-zoom-end set by initScrollScaleBands) */
      animation: hs-band-zoom linear both; animation-timeline: --hs-hold; animation-range: contain 0% exit 100%;
    }
  }
  @media (max-width: 767px) { .hs-band-hold .hs-band-fixed { transform-origin: 50% 100%; } }
}
@keyframes hs-band-grow { from { clip-path: inset(7% 7% round 18px); } to { clip-path: inset(0% 0% round var(--lc-radius)); } }
@keyframes hs-band-zoom { contain 0% { transform: scale(.86); } contain 40% { transform: scale(1); } contain 100% { transform: scale(1); } exit 100% { transform: scale(var(--hs-zoom-end, 1.3)); } }
.hs-promo-band--pin .hs-promo-band__title { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); }
/* position:sticky needs the window to be the scroller — html/body carry
   overflow-x:hidden (which makes body its own scroll box); clip trims the
   same sideways overflow without that side effect. Homepage only. */
html.hs-has-pin:not(.hs-mnav-lock), html.hs-has-pin body:not(.hs-drawer-lock) { overflow-x: visible !important; overflow-x: clip !important; overflow-y: visible !important; }


/* ==========================================================================
   §SEC  Homepage section rhythm (client doc "Works on homepage", 13 Oct)
   X = equal top/bottom padding of every standard section; Y = the gap
   between title, subheading, CTA and the content below. Inner wrappers
   carry no margins of their own, so every standard row is the same height.
   Classes are added by initHomeRhythm(). Special sections (brand strip,
   promo bands) keep their own height but use the same heading rhythm.
   ========================================================================== */
.home { --hs-sec-x: clamp(32px, 1.28rem + 1.92vw, 58px); --hs-sec-y: clamp(13px, .48rem + .72vw, 22px); } /* -20% (client, 14 Oct) */
html body.home .elementor-4630 > .e-con.hs-sec, html body.home .hs-sec { padding-top: var(--hs-sec-x) !important; padding-bottom: var(--hs-sec-x) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.home .hs-sec > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.home .hs-sec .e-con, .home .hs-sec .e-con-inner { row-gap: var(--hs-sec-y) !important; }
.home .hs-sec .elementor-widget-container { margin-top: 0 !important; margin-bottom: 0 !important; }
.home .hs-sec .hs-row-head { margin: 0 !important; gap: var(--hs-sec-y) !important; }
.home .hs-sec .hs-shop-now, .home .hs-sec-head-only .hs-view-all { margin: 0 !important; }
.home .hs-sec--row .rtsb-content-loader.rtsb-content-loader { padding-top: 0 !important; }
.home .hs-sec .section-title-wrapper { margin: 0 !important; }
html body.home .elementor-4630 > .e-con.hs-sec--blog, html body.home .hs-sec--blog { padding-bottom: calc(var(--hs-sec-x) * 1.5) !important; }
.home .hs-sec--cards .rt-image-box-layout { margin: 0 !important; }
.home .hs-sec--cards [data-id="09292ff"] { display: none !important; } /* empty divider under the middle card */
/* Brand strip: special height, same heading rhythm */
html body.home .elementor-4630 > .e-con.hs-sec-head-only { padding-top: var(--hs-sec-x) !important; padding-bottom: var(--hs-sec-x) !important; }
.home .hs-sec-head-only .hs-brand-head { margin: 0 0 var(--hs-sec-y) !important; gap: var(--hs-sec-y) !important; }
.home .hs-sec-head-only .hs-brand-head-text { gap: var(--hs-sec-y); }
.home .hs-sec-head-only .hs-brand-head-text p { margin: 0 !important; }

/* Ticker: same height as the menu bar, flush under the hero, nothing below */
.home .hs-hero-carousel { margin-bottom: 0 !important; }
.home .hs-ticker { padding: 0 !important; margin: 0 !important; height: var(--hs-menu-h, 70px); min-height: 0 !important; justify-content: center !important; }
.home .hs-ticker .elementor-widget, .home .hs-ticker .elementor-widget-container, .home .hs-ticker .rt-marquee-slider { margin: 0 !important; height: 100%; }
.home .hs-ticker .rt-marquee-slider { display: flex; align-items: center; overflow: hidden; }
.home .hs-ticker .rt-marquee { padding: 0 !important; height: auto; }
/* §SEC — remove the plugin/theme offsets inside the stack */
html body.home .hs-sec--row .rtsb-content-loader.rtsb-content-loader.rtsb-content-loader { padding-top: 0 !important; }
html body.home .hs-sec--row .rtsb-slide-item.rtsb-slide-item { margin-bottom: 0 !important; }
html body.home .hs-sec-head-only .hs-brand-row-wrap.hs-brand-row-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
html body.home .hs-sec .title-inner-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--hs-sec-y); }
html body.home .hs-sec .top-sub-title-wrap { padding: 0 !important; margin: 0 !important; }
html body.home .hs-sec .top-sub-title, html body.home .hs-sec .main-title { margin-top: 0 !important; margin-bottom: 0 !important; }
/* testimonial / post carousels keep a 30px shadow gutter above and below;
   cancel it on both sides so the visible cards sit on the X/Y rhythm */
html body.home .hs-sec .rtsb-carousel-slider.swiper { margin-bottom: -30px !important; }
html body.home .hs-sec--blog .rtsb-col-grid.rtsb-post-grid { margin-bottom: 0 !important; }
/* Phones (14 Oct): testimonials are a stacked grid there (no 30px shadow
   gutter), so the -30px above clipped the last card. Undo it and drop the
   last card's margin so the bottom padding equals the other sections. */
@media (max-width: 767px) {
  html body.home .hs-sec .rtsb-carousel-slider.swiper { margin-bottom: 0 !important; }
  html body.home .hs-sec--reviews .rtsb-slide-item:last-child { margin-bottom: 0 !important; }
}

/* Blog cards (14 Oct): the plugin's "zoom out" style parks images at 1.2×
   so our 1.06× hover read as zooming OUT. Rest at 1×, zoom in on hover. */
html body .rtsb-post-grid article img { transform: none !important; }

/* Promo band lock (14 Oct): the zoom pauses through the rest of the lock so
   it reads as stopped. (A scroll-snap "catch" was tried and removed: in
   Chrome ordinary mouse-wheel steps couldn't get past it.) */

/* ==========================================================================
   §MC  Mini-cart drawer (client, 14 Oct: "background is not solid")
   A blanket 10px radius reached every box in the drawer (the drawer itself,
   the totals panel, even table cells), so the dimmed page showed through
   at the corners. The drawer is one solid, square-edged panel now; full
   width on phones; and the totals line up (label left, amount right, VAT
   note under the amount).
   ========================================================================== */
html body .rtsb-minicart-drawer.rtsb-minicart-drawer,
html body .rtsb-minicart-drawer > div,
html body .rtsb-minicart-drawer .woocommerce-mini-cart,
html body .rtsb-minicart-drawer .mini-cart-bottom,
html body .rtsb-minicart-drawer .cart_totals,
html body .rtsb-minicart-drawer .cart_totals :is(table, tbody, tr, th, td),
html body .rtsb-minicart-drawer .woocommerce-mini-cart__buttons.buttons { border-radius: 0 !important; }
html body .rtsb-minicart-drawer .mini-cart-bottom { background: #f7f2ee !important; border-top: 1px solid var(--lc-line); }
html body .rtsb-minicart-drawer .mini-cart-bottom { padding: 0 !important; }
html body .rtsb-minicart-drawer .rtsb-apply-coupon-toggle { margin: 0 !important; padding: .9rem clamp(1.5rem, 1rem + 2vw, 2.25rem) !important; }
html body .rtsb-minicart-drawer .cart_totals table { display: table !important; }
html body .rtsb-minicart-drawer .cart_totals tbody { display: table-row-group !important; }
html body .rtsb-minicart-drawer .cart_totals tr { display: table-row !important; }
html body .rtsb-minicart-drawer .cart_totals { background: transparent !important; padding: .5rem clamp(1.5rem, 1rem + 2vw, 2.25rem) 1rem !important; }
html body .rtsb-minicart-drawer .cart_totals table { width: 100% !important; margin: 0 !important; border: 0 !important; }
html body .rtsb-minicart-drawer .cart_totals :is(th, td) {
  display: table-cell !important; vertical-align: top !important; padding: .35rem 0 !important; border: 0 !important; background: none !important;
}
html body .rtsb-minicart-drawer .cart_totals th { text-align: left !important; font-weight: 600; }
html body .rtsb-minicart-drawer .cart_totals td { text-align: right !important; }
html body .rtsb-minicart-drawer .cart_totals td::before { display: none !important; } /* responsive-table labels */
html body .rtsb-minicart-drawer .cart_totals .order-total :is(th, td) { padding-top: .6rem !important; border-top: 1px solid var(--lc-line) !important; }
html body .rtsb-minicart-drawer .cart_totals .includes_tax { display: block; margin-top: .2rem; font-size: .75rem; color: var(--lc-muted, #6b6560); white-space: nowrap; }
@media (max-width: 767px) {
  html body .rtsb-minicart-drawer.rtsb-minicart-drawer { width: 100vw !important; max-width: 100vw !important; }
}

/* Contact page (client, 14 Oct): address/details in the left column, map in
   a column beside them (it sat full-width underneath). Phones stack. */
@media (min-width: 900px) {
  .page-id-259 .elementor-259 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(32px, 4vw, 64px); align-items: stretch; }
  .page-id-259 .elementor-259 > [data-id="7722157e"] { grid-column: 1; grid-row: 1; }
  .page-id-259 .elementor-259 > [data-id="907f49a"] { grid-column: 1; grid-row: 2; }
  .page-id-259 .elementor-259 > [data-id="24fa912"] { grid-column: 2; grid-row: 1 / span 2; }
  .page-id-259 [data-id="24fa912"] > .e-con-inner, .page-id-259 [data-id="f0de0aa"], .page-id-259 [data-id="f0de0aa"] .elementor-custom-embed { height: 100%; }
  .page-id-259 [data-id="f0de0aa"] iframe { height: 100% !important; min-height: 420px; }
}
.page-id-259 [data-id="f0de0aa"] iframe { border-radius: var(--lc-radius); display: block; }

/* ==========================================================================
   §ABOUT  About us (page 20766) — client, 14 Oct: "needs a bit of TLC, no
   spacing". Same system as the homepage: side gutter, equal section
   padding (X), brand ink/cream instead of the theme's olive, no empty band.
   ========================================================================== */
.page-id-20766 { --ab-g: clamp(16px, 3.5vw, 50px); --ab-x: clamp(32px, 1.28rem + 1.92vw, 58px); --ab-y: clamp(13px, .48rem + .72vw, 22px); }
.page-id-20766 .elementor-20766 > .e-con:not([data-id="f809501"]) { padding: var(--ab-x) var(--ab-g) !important; margin: 0 !important; }
.page-id-20766 .elementor-20766 > .e-con > .e-con-inner { padding: 0 !important; max-width: none !important; }
.page-id-20766 .elementor-20766 > [data-id="d02cebc"] { padding-top: calc(var(--ab-x) * 1.4) !important; }
.page-id-20766 [data-id="d02cebc"] .section-title-wrapper { max-width: 72ch; margin: 0 auto !important; }
.page-id-20766 [data-id="d02cebc"] .title-inner-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--ab-y); }
.page-id-20766 [data-id="d02cebc"] .main-title { margin: 0 !important; }
/* image + history row */
.page-id-20766 .elementor-20766 > [data-id="f3b326a"] { padding-top: 0 !important; }
.page-id-20766 [data-id="f3b326a"] > .e-con-inner { gap: clamp(16px, 2vw, 28px) !important; align-items: stretch; }
.page-id-20766 [data-id="f3b326a"] .e-con-full { padding: 0 !important; }
.page-id-20766 [data-id="95480dd"] { background-color: #f7f2ee !important; border-radius: var(--lc-radius); overflow: hidden; }
.page-id-20766 [data-id="95480dd"] :is(h2, h3, p, .main-title, .elementor-heading-title) { color: var(--lc-ink) !important; }
.page-id-20766 [data-id="95480dd"] p { color: #4b4b4b !important; }
.page-id-20766 [data-id="e80e49d"] img { border-radius: var(--lc-radius); width: 100%; height: 100%; object-fit: cover; }
/* counters */
.page-id-20766 .rtsb-counter-number-wrap, .page-id-20766 .rtsb-count-number, .page-id-20766 .odometer, .page-id-20766 .odometer-inside { color: var(--lc-ink) !important; }
/* what makes us different */
.page-id-20766 [data-id="f7dcfe5"] > .e-con-inner { gap: clamp(24px, 4vw, 64px) !important; align-items: center; }
.page-id-20766 [data-id="c52b00a"] { padding: 0 !important; gap: var(--ab-x) !important; }
.page-id-20766 [data-id="b32f64a"] img { border-radius: var(--lc-radius); }
.page-id-20766 .main-title { color: var(--lc-ink) !important; }
/* marquee: full-bleed, equal padding, ink not olive */
.page-id-20766 .elementor-20766 > [data-id="f809501"] { padding: var(--ab-x) 0 !important; }
.page-id-20766 [data-id="f809501"] * { color: var(--lc-ink) !important; }
/* empty cream band before the trust bar */
.page-id-20766 .elementor-20766 > [data-id="2533094"] { display: none !important; }
@media (max-width: 767px) {
  .page-id-20766 [data-id="f3b326a"] > .e-con-inner, .page-id-20766 [data-id="f7dcfe5"] > .e-con-inner { flex-direction: column !important; }
}
.page-id-20766 .rtsb-counter-suffix { color: var(--lc-ink) !important; }
/* History badge: white PNGs (logo + circular text) were made for the old
   olive panel — render them in ink on the cream panel */
.page-id-20766 [data-id="95480dd"] img { filter: brightness(0); }

/* Global footer (client, 14 Oct): square corners — the blanket 10px radius
   reached the footer and the trust bar above it. */
html body :is(.site-footer, .site-footer .elementor, .site-footer .e-con, .site-footer .e-con-inner, .hs-trust) { border-radius: 0 !important; }

/* Brand hero logo (client, 14 Oct): logo panel ≈30% of the banner width,
   logo fills it, and the "XX PRODUCTS" count is centred under the logo. */
.hs-brand-hero--image .hs-brand-hero__inner.hs-brand-hero__inner { width: 30%; max-width: none; box-sizing: content-box; align-items: center; text-align: center; }
.hs-brand-hero--image .hs-brand-hero__logo { display: flex !important; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding: clamp(1rem, 1.6vw, 1.75rem) clamp(1.25rem, 2vw, 2.25rem) !important; }
.hs-brand-hero--image .hs-brand-hero__logo-img.hs-brand-hero__logo-img { width: 100%; height: auto; max-width: 100%; max-height: clamp(90px, 10vw, 150px); object-fit: contain; }
.hs-brand-hero--image .hs-brand-hero__meta { justify-content: center !important; width: 100%; }
.hs-brand-hero--image .hs-brand-hero__wordmark, .hs-brand-hero--image .hs-brand-hero__promo { text-align: center; }
@media (max-width: 767px) {
  .hs-brand-hero--image .hs-brand-hero__inner.hs-brand-hero__inner { width: auto; box-sizing: border-box; }
  .hs-brand-hero--image .hs-brand-hero__logo { width: min(75%, 320px); }
}
.page-id-20766 [data-id="6b206ae"] .elementor-widget-rt-title { margin-bottom: clamp(28px, 3vw, 44px) !important; }
/* Brand hero logo position (client, 15 Oct): centre the logo in the empty
   left part of the banner — the products start at ~51% of the width on every
   brand image — so the space before the logo equals the space between the
   logo and the products. Size = --hs-logo-pct % of the banner width. */
@media (min-width: 768px) {
  .hs-brand-hero--image { container-type: inline-size; --hs-logo-pct: 30; }
  .hs-brand-hero--image .hs-brand-hero__inner.hs-brand-hero__inner { width: 41%; box-sizing: border-box; padding: clamp(1.5rem, 3vw, 3rem) 2cqw; align-items: center; }
  .hs-brand-hero--image .hs-brand-hero__logo { width: calc(var(--hs-logo-pct) * 1cqw); }
}
/* Logo size (client, 15 Oct): original size + 5% (was a 250px panel with the
   logo capped at 210×74px) — supersedes the 30% sizing above. Position
   stays balanced via the 51% inner area. */
.hs-brand-hero--image .hs-brand-hero__logo.hs-brand-hero__logo { width: auto !important; display: inline-flex !important; padding: .9rem 1.3rem !important; }
.hs-brand-hero--image .hs-brand-hero__logo-img.hs-brand-hero__logo-img { width: auto; max-width: 221px; max-height: 78px; }
/* Closed mini-cart (15 Oct): the plugin parks it with a fixed translateX(400px);
   since it's full width on phones, any phone wider than ~400px showed a white
   strip on the right edge that also sat over the carousels. Push it fully off
   and hide it once the slide-out has finished. */
html body .rtsb-minicart-drawer:not(.show-sidebar) {
  transform: translateX(calc(100% + 60px)) !important; visibility: hidden;
  transition: transform .9s cubic-bezier(.55, 0, .1, 1), visibility 0s linear .9s !important;
}
html body .rtsb-minicart-drawer.show-sidebar { visibility: visible; transition: transform .9s cubic-bezier(.55, 0, .1, 1), visibility 0s !important; }
/* About › History panel (15 Oct): centred (its 12px side margins pushed it
   right of the image on phones) and breathing room above the heading. */
.page-id-20766 [data-id="f3b326a"] .e-con-full[data-id="95480dd"] { margin-left: 0 !important; margin-right: 0 !important; padding: var(--ab-x) clamp(16px, 3vw, 40px) !important; box-sizing: border-box; }

/* ==========================================================================
   §MOB-SQ  Phones: no corner radius on full-width sections (client, 15 Oct)
   Cards, buttons and images inside sections keep their radius.
   ========================================================================== */
@media (max-width: 767px) {
  html body :is(
    .hs-hero-carousel, .hs-hero-track, .hs-hero-slide, .hs-hero-card--image, .hs-hero-card--image img,
    .hs-band-bg, .hs-band-fixed, .hs-promo-band,
    .elementor-4630 > .e-con, .hs-sec, .hs-ticker, .hs-trust, .ele-gray-bg,
    .hs-brand-hero, .hs-brand-hero__inner, .hs-brands-hero__bg, .hs-brands-hero,
    .rtwpvg-wrapper .zoomImg, .site-footer
  ) { border-radius: 0 !important; }
  /* promo bands: the clip that grows card → full screen ends square on phones */
  .hs-band-hold > .hs-promo-band--pin.hs-band-fixed-on { animation-name: hs-band-grow-m !important; }
  .hs-promo-band:not(.hs-band-fixed-on) { clip-path: none !important; }
}
@keyframes hs-band-grow-m { from { clip-path: inset(7% 7% round 18px); } to { clip-path: inset(0% 0% round 0px); } }
@media (max-width: 767px) { .hs-promo-band--pin.hs-band-fixed-on.hs-band-fixed-on { clip-path: inset(0 round 0px); } }
/* Hero <picture> wrapper is layout-transparent; phones use the 3:2 mobile
   artwork's ratio when a slide has one. */
.hs-hero-slide--art picture { display: contents; }
@media (max-width: 767px) { .hs-hero-slide--art.hs-hero-slide--has-mobile { aspect-ratio: 3 / 2 !important; } }