/** Shopify CDN: Minification failed

Line 13270:1 Expected identifier but found "."
Line 13275:1 Expected "}" to go with "{"

**/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');/**
 * Theme — Core CSS System (Base)
 * Global tokens + baseline element styles + typography helpers.
 *
 * Philosophy:
 * - Use CSS custom properties for all design decisions (spacing, radii, type scale).
 * - Sections/components consume tokens; sections only set/override tokens (ideally via scoped selectors).
 * - Keep class names section-agnostic and reusable across product/collection/blog/logo/testimonial layouts.
 */

:root {
  /* ---------------------------------------------
   * Tokens (design-agnostic defaults)
   * TODO(Theme): map more tokens to theme settings.
   * --------------------------------------------- */

  /* Spacing scale (4px base) */
  --space-unit: 4px;
  --space-0: 0px;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --space-20: calc(var(--space-unit) * 20);

  /* Borders */
  --border-width: 1px;
  --border-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.4);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.12);

  /* Motion */
  --motion-duration-fast: 180ms;
  --motion-duration-normal: 320ms;
  --motion-duration-slow: 520ms;
  --motion-delay-xs: 60ms;
  --motion-delay-sm: 90ms;
  --motion-delay-xl: 359ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-linear: linear;
  /* Sticky header motion. Tuned for "responsive but not floaty" — 300ms is
     long enough to feel premium on hide/show, short enough that the header
     feels glued to user intent. Easing is out-quint (decelerate) so the
     header arrives crisply rather than drifting in. */
  --motion-ease-sticky-header: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration-sticky-transform: 0.3s;
  --motion-duration-sticky-bg: 0.4s;
  --motion-opacity-dim: 0.62;
  --motion-opacity-muted: 0.78;
  --motion-overlay-rgb: var(--color-backdrop-base-rgb, 10 10 12);
  --motion-overlay-opacity: 0.48;
  --motion-overlay-blur: 6px;

  /* Compatibility aliases */
  --ease-out: var(--motion-ease);
  --duration-fast: var(--motion-duration-fast);
  --duration-base: var(--motion-duration-normal);
  --motion-duration-base: var(--motion-duration-normal);

  /* Icons */
  --icon-size: 16px;
  --icon-stroke-width: 1.2;
  --radius-badge: 999px;

  /* Typography (from settings: css-variables.liquid) */
  --font-size-base: clamp(.9375rem, calc(1rem * var(--font-scale-body-factor, 1)), 1.200rem);
  --line-height-body: var(--body-line-height, 1.55);
  --line-height-heading: var(--heading-line-height, 1.2);
  --letter-spacing-heading: var(--heading-letter-spacing, 0em);

  /* Text sizes */
  --text-body: var(--font-size-base);
  --text-large: clamp(1.05rem, calc(var(--font-size-base) * 1.08), 1.35rem);
  --text-small: clamp(0.8125rem, calc(var(--font-size-base) * 0.9), 0.98rem);
  --text-xs: clamp(0.6875rem, calc(var(--font-size-base) * 0.78), 0.86rem);

  /* Heading sizes: pre-balanced in css-variables.liquid (damped growth + max clamps). */
  --heading-h1: var(--heading-xl, 3rem);
  --heading-h2: var(--heading-lg, 2.25rem);
  --heading-h3: var(--heading-md, 1.5rem);
  /* h4/h5/h6 are derived from h5 on a fixed 1.26 : 1 : 0.84 ladder so every
     adjacent step stays visually distinct at any --heading-sm setting and any
     viewport. Independent clamps previously let h4 collapse to ~1.08× h5 (and
     h6 to float up to h5), which is what produced the "headings are identical"
     reports. Keep the ratios in sync with the mobile block below. */
  --heading-h5: var(--heading-sm, 1.125rem);
  --heading-h4: clamp(1.25rem, calc(var(--heading-h5) * 1.26), 2.35rem);
  --heading-h6: calc(var(--heading-h5) * 0.84);
  --type-scale-mobile: 0.86;

  /* Colors (semantic) — shorthand aliases built from scheme RGB tokens set in css-variables.liquid */
  --color-bg: rgb(var(--color-bg-main-rgb, var(--color-background-rgb)));
  --color-bg-secondary: rgb(var(--color-bg-secondary-rgb, var(--color-background-rgb)));
  --color-fg: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
  --color-fg-heading: rgb(var(--color-text-heading-rgb, var(--color-foreground-rgb)));
  --color-fg-muted: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95);
  --color-fg-subtle: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.78);
  --color-surface: rgb(var(--color-bg-main-rgb, var(--color-background-rgb)));
  --color-surface-elevated: rgb(var(--color-bg-secondary-rgb, var(--color-background-rgb)));
  --color-link: rgb(var(--color-link-rgb, var(--color-text-body-rgb, var(--color-foreground-rgb))));
  --color-link-hover: rgb(var(--color-link-hover-rgb, var(--color-link-rgb, var(--color-foreground-rgb))));
  /* Card overlay: solid bg for reveal/quick-add panels — matches scheme background */
  --color-card-overlay-bg: var(--color-bg);

  /* Interactive */
  --focus-ring-color: rgb(var(--color-input-focus-rgb, var(--color-foreground-rgb)) / 0.35);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --theme-scrollbar-compensation: 0px;
  --theme-scrollbar-space-color: transparent;
  --sticky-header-visible-offset: 0px;
  --theme-sticky-header-offset: 0px;
  --theme-header-safe-offset: 0px;
  --theme-header-lock-top: 0px;
}

@media (max-width: 699px) {
  :root {
    /* Global mobile typography contract:
       scale core heading/body tokens once so token-based sections adapt
       consistently without per-section font-size overrides. */
    --text-body: clamp(0.9rem, calc(var(--font-size-base) * var(--type-scale-mobile, 0.86)), 1rem);
    --text-large: clamp(1rem, calc(var(--text-body) * 1.08), 1.2rem);
    --text-small: clamp(0.78rem, calc(var(--text-body) * 0.9), 0.92rem);
    --text-xs: clamp(0.66rem, calc(var(--text-body) * 0.8), 0.8rem);

    /* h1–h3 step down harder than body text: the desktop display sizes scaled
       by 0.86 hit their caps on every preset (h2 = 44px on a 375px screen).
       These factors keep phone headings in the 24–40px range while still
       following the merchant's heading-size sliders. */
    --heading-h1: clamp(1.9rem, calc(var(--heading-xl, 3rem) * 0.55), 2.5rem);
    --heading-h2: clamp(1.5rem, calc(var(--heading-lg, 2.25rem) * 0.62), 2rem);
    --heading-h3: clamp(1.25rem, calc(var(--heading-md, 1.5rem) * 0.8), 1.625rem);
    /* Same 1.26 : 1 : 0.84 ladder as the desktop block — previously h4 and h5
       used separate mobile clamps that resolved to ~1.05× apart, making them
       look identical on small screens. */
    --heading-h5: clamp(1rem, calc(var(--heading-sm, 1.125rem) * var(--type-scale-mobile, 0.82)), 1.55rem);
    --heading-h4: clamp(1.12rem, calc(var(--heading-h5) * 1.26), 1.9rem);
    --heading-h6: calc(var(--heading-h5) * 0.84);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*
   * Reserve the scrollbar gutter at all times.
   * When scroll-lock applies overflow:hidden the classic scrollbar (15-17 px on
   * Windows) would otherwise vanish and widen every fixed/sticky element by that
   * amount.  "stable" keeps the gutter reserved so nothing shifts.
   * On macOS / iOS (overlay scrollbars) this property has zero visual effect.
   */
  scrollbar-gutter: stable;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Temporary horizontal gesture lock used while touch-dragging interactive media controls. */
html.theme-horizontal-pan-lock,
body.theme-horizontal-pan-lock {
  overscroll-behavior-x: none;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection {
  background-color: rgb(var(--color-foreground-rgb) / 0.2);
}

::-moz-selection {
  background-color: rgb(var(--color-foreground-rgb) / 0.2);
}


/* Internal scrollbars (drawers/modals/popups/overflow containers):
   - Keep page scrollbar native (html/body excluded).
   - Show thumb only on hover/focus-within for a minimal premium feel. */

:where(*):not(html):not(body) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

:where(*):not(html):not(body):hover,
:where(*):not(html):not(body):focus-within {
  scrollbar-color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.42) transparent;
}

:where(*):not(html):not(body)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:where(*):not(html):not(body)::-webkit-scrollbar-track {
  background: transparent;
}

:where(*):not(html):not(body)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background: transparent;
}

:where(*):not(html):not(body):hover::-webkit-scrollbar-thumb,
:where(*):not(html):not(body):focus-within::-webkit-scrollbar-thumb {
  background: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.42);
}

:where(*):not(html):not(body)::-webkit-scrollbar-corner {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html.theme-scroll-lock-active,
body.theme-scroll-lock-active {
  /* overflow: hidden; removex */ 
  overscroll-behavior: none;
}

/*
 * No padding-inline-end compensation needed here.
 * scrollbar-gutter:stable (set on html above) always reserves the scrollbar
 * gutter, so the layout width is identical with or without a visible scrollbar.
 * Adding padding-inline-end on top of the reserved gutter would double the
 * offset and shift content to the left — that is the bug being prevented.
 * The --theme-scrollbar-compensation variable is still set by JS scripts for
 * any custom usage, but no built-in CSS rule consumes it on the html/body elements.
 */
html.theme-scroll-lock-active::after {
  content: none;
}

/* Shared motion primitives */
.motion-overlay {
  opacity: 0;
  background: rgb(var(--motion-overlay-rgb) / var(--motion-overlay-opacity));
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    opacity var(--motion-duration-normal) linear,
    -webkit-backdrop-filter var(--motion-duration-normal) linear,
    backdrop-filter var(--motion-duration-normal) linear;
}

.drawer-menu.is-open .motion-overlay,
.localization-drawer.is-open .motion-overlay,
.theme-cart-drawer.is-open .motion-overlay {
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--motion-overlay-blur));
  backdrop-filter: blur(var(--motion-overlay-blur));
}

.motion-shell {
  transform: translateX(var(--motion-shell-translate, 100%));
  transition: transform var(--motion-duration-normal) linear;
  will-change: transform;
}

.drawer-menu.is-open .motion-shell,
.localization-drawer.is-open .motion-shell,
.theme-cart-drawer.is-open .motion-shell {
  transform: translateX(0);
}

/*
 * Reusable premium modal motion utility.
 * Use for centered modals (email signup, age gate, etc.), not side drawers.
 *
 * Expected markup:
 * <div class="theme-modal--perspective is-open|is-opening|is-closing">
 *   <button class="theme-modal__overlay"></button>
 *   <div class="theme-modal__panel">...</div>
 * </div>
 */
.theme-modal--perspective {
  --theme-modal-open-duration: 900ms;
  --theme-modal-close-duration: 520ms;
  --theme-modal-open-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --theme-modal-close-ease: cubic-bezier(0.4, 0, 1, 1);
  --theme-modal-overlay-blur: 10px;
  --theme-modal-overlay-opacity: 0.65;
  --theme-modal-tilt-open-x: 20deg;
  --theme-modal-tilt-open-y: -8deg;
  --theme-modal-tilt-close-x: -14deg;
  --theme-modal-tilt-close-y: 6deg;
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.theme-modal--perspective.is-open,
.theme-modal--perspective.is-opening,
.theme-modal--perspective.is-closing {
  visibility: visible;
}

.theme-modal--perspective.is-open {
  pointer-events: auto;
}

.theme-modal--perspective .theme-modal__overlay {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgb(0 0 0 / var(--theme-modal-overlay-opacity));
  opacity: 0;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    opacity var(--theme-modal-open-duration) var(--theme-modal-open-ease),
    -webkit-backdrop-filter var(--theme-modal-open-duration) var(--theme-modal-open-ease),
    backdrop-filter var(--theme-modal-open-duration) var(--theme-modal-open-ease);
}

.theme-modal--perspective .theme-modal__panel {
  position: relative;
  z-index: 1;
  max-inline-size: min(92vw, var(--theme-modal-max-width, 30rem));
  max-block-size: min(88vh, var(--theme-modal-max-height, 88vh));
  width: 100%;
  overflow: auto;
  will-change: transform, opacity, filter;
  opacity: 0;
  filter: blur(16px);
  transform:
    perspective(1100px)
    rotateX(var(--theme-modal-tilt-open-x))
    rotateY(var(--theme-modal-tilt-open-y))
    scale(0.94)
    translate3d(0, 28px, 0);
  transform-origin: top center;
  transition:
    opacity var(--theme-modal-open-duration) var(--theme-modal-open-ease),
    filter var(--theme-modal-open-duration) var(--theme-modal-open-ease),
    transform var(--theme-modal-open-duration) var(--theme-modal-open-ease);
}

[dir="rtl"] .theme-modal--perspective .theme-modal__panel {
  --theme-modal-tilt-open-y: 8deg;
  --theme-modal-tilt-close-y: -6deg;
}

.theme-modal--perspective.is-open .theme-modal__overlay {
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--theme-modal-overlay-blur));
  backdrop-filter: blur(var(--theme-modal-overlay-blur));
}

.theme-modal--perspective.is-open .theme-modal__panel {
  opacity: 1;
  filter: blur(0px);
  transform:
    perspective(1100px)
    rotateX(0deg)
    rotateY(0deg)
    scale(1)
    translate3d(0, 0, 0);
}

.theme-modal--perspective.is-closing .theme-modal__overlay {
  opacity: 0;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    opacity var(--theme-modal-close-duration) var(--theme-modal-close-ease),
    -webkit-backdrop-filter var(--theme-modal-close-duration) var(--theme-modal-close-ease),
    backdrop-filter var(--theme-modal-close-duration) var(--theme-modal-close-ease);
}

.theme-modal--perspective.is-closing .theme-modal__panel {
  opacity: 0;
  filter: blur(12px);
  transform:
    perspective(1100px)
    rotateX(var(--theme-modal-tilt-close-x))
    rotateY(var(--theme-modal-tilt-close-y))
    scale(0.9)
    translate3d(0, -20px, 0);
  transition:
    opacity var(--theme-modal-close-duration) var(--theme-modal-close-ease),
    filter var(--theme-modal-close-duration) var(--theme-modal-close-ease),
    transform var(--theme-modal-close-duration) var(--theme-modal-close-ease);
}

@media (prefers-reduced-motion: reduce) {
  .theme-modal--perspective .theme-modal__overlay,
  .theme-modal--perspective .theme-modal__panel {
    transition: none !important;
    animation: none !important;
  }

  .theme-modal--perspective .theme-modal__panel {
    filter: none !important;
    transform: none !important;
  }
}

/* Baseline */
body {
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: var(--font-size-base);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

button {
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

a {
  color: var(--color-link);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-link-hover);
}

:where(a, button):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:where(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Typography system */
.heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  color: rgb(var(--color-text-heading-rgb));
}

.heading--h1 {
  font-size: var(--heading-h1);
}

.heading--h2 {
  font-size: var(--heading-h2);
}

.heading--h3 {
  font-size: var(--heading-h3);
}

.heading--h4 {
  font-size: var(--heading-h4);
}

.heading--h5 {
  font-size: var(--heading-h5);
}

.heading--h6 {
  font-size: var(--heading-h6);
}

h1 {
  font-size: var(--heading-h1);
}

h2 {
  font-size: var(--heading-h2);
}

h3 {
  font-size: var(--heading-h3);
}

h4 {
  font-size: var(--heading-h4);
}

h5 {
  font-size: var(--heading-h5);
}

h6 {
  font-size: var(--heading-h6);
}

.text-body {
  font-size: var(--text-body);
}

.text-small {
  font-size: var(--text-small);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-muted {
  color: var(--color-fg-muted);
}

/* A pragmatic “content prose” helper (used by section headers, rich text, etc.) */
.prose {
  display: grid;
  gap: var(--space-3);
}

.prose :where(p, ul, ol) {
  color: var(--color-fg-muted);
}

.prose :where(ul, ol) {
  padding-inline-start: 1.2em;
}

.prose :where(li)+ :where(li) {
  margin-block-start: 0.3em;
}

.prose :where(strong, b) {
  color: var(--color-fg);
  font-weight: var(--font-body-weight-strong, 700);
}

/* ---------------------------------------------
 * Rich text system (global for RTE/prose content)
 * --------------------------------------------- */

.rte {
  width: 100%;
  overflow: visible;
  color: rgb(var(--color-text-body-rgb));
}

.rte::after {
  content: "";
  display: table;
  clear: both;
}

.rte> :first-child,
.rte> :first-child> :first-child {
  margin-top: 0 !important;
}

.rte> :last-child {
  margin-bottom: 0 !important;
}

.rte :where(p, ul, ol, blockquote, table, figure, pre, hr) {
  margin: 0;
}

.rte :where(* + p, * + ul, * + ol, * + blockquote, * + table, * + figure, * + pre, * + hr) {
  margin-block-start: var(--space-4);
}

.rte :where(h1, h2, h3, h4, h5, h6) {
  margin: var(--space-6) 0 var(--space-3);
  color: rgb(var(--color-text-heading-rgb));
}

.rte h1 {
  font-size: var(--heading-h2);
}

.rte h2 {
  font-size: var(--heading-h3);
}

.rte h3 {
  font-size: var(--heading-h4);
}

.rte h4 {
  font-size: var(--heading-h5);
}

.rte h5 {
  font-size: var(--heading-h6);
}

.rte h6 {
  font-size: calc(var(--heading-h6) * 0.84);
}

.rte :where(p, li) {
  color: rgb(var(--color-text-body-rgb));
}

.rte :where(strong, b) {
  color: rgb(var(--color-text-heading-rgb));
  font-weight: var(--font-body-weight-strong, 700);
}

.rte :where(h1, h2, h3, h4, h5, h6) :where(strong, b) {
  font-weight: var(--font-heading-weight-strong, 700);
}

.rte :where(ul, ol) {
  padding-inline-start: 1.25em;
}

.rte :where(li + li) {
  margin-block-start: var(--space-2);
}

/* Keep list items left-aligned so the marker stays attached to its text, even
   when the surrounding RTE / prose / policy section is centre-aligned. Without
   this, centred text detaches from the outside marker and produces large,
   uneven gaps between the bullet/number and the item text. */
.rte :where(ul, ol),
.prose :where(ul, ol),
.shopify-policy__body :where(ul, ol) {
  text-align: start;
}

/* Centred lists: with the default `outside` marker position a centred <li>
   leaves its bullet/number pinned to the list's left edge while the text
   centres, opening a large gap between the two. Shopify's rich-text editor
   centres by writing an inline `text-align: center` (which outranks the rule
   above), so match that as well as section-level centring, and move the marker
   inline so it always travels with its text. */
.rte :where(ul, ol)[style*="center"],
.prose :where(ul, ol)[style*="center"],
.shopify-policy__body :where(ul, ol)[style*="center"],
.page-section--align-center .prose :where(ul, ol) {
  list-style-position: inside;
  padding-inline-start: 0;
}

.rte a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rte a:hover,
.rte a:focus-visible {
  color: var(--color-link-hover);
}

.rte :where(img, video, iframe, svg) {
  max-width: 100%;
  height: auto;
}

.rte iframe[src*="youtube.com"],
.rte iframe[src*="vimeo.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.rte figure {
  display: grid;
  gap: var(--space-2);
}

.rte figcaption {
  color: rgb(var(--color-text-muted-rgb));
  font-size: var(--text-xs);
}

/* Blockquote treatment applies to every rich-text surface, not just `.rte`.
   Page/product/blog bodies render through `.prose` and policy pages through
   `.shopify-policy__body`, which previously inherited no quote styling at all
   (no rule, no indent) and rendered as plain paragraphs. */
.rte blockquote,
.prose blockquote,
.shopify-policy__body blockquote {
  margin-block: var(--space-5);
  margin-inline: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid rgb(var(--color-border-rgb) / 0.65);
  color: rgb(var(--color-text-body-rgb));
  text-align: start;
}

/* A quote is a block, not a run of centred text — keep the rule attached to the
   text even when the surrounding section (or an RTE inline style) centres it. */
.page-section--align-center .prose blockquote {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.rte pre {
  padding: var(--space-4);
  border: var(--border-width) solid rgb(var(--color-border-rgb) / 0.5);
  border-radius: var(--style-border-radius-inputs, var(--radius-form));
  background: rgb(var(--color-bg-secondary-rgb));
  overflow-x: auto;
}

.rte code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
}

.rte pre code {
  display: inline;
  border: 0;
  padding: 0;
  background: none;
}

.rte :where(table),
.prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  border: var(--border-width) solid var(--color-border);
  margin-block: var(--space-4);
}

.rte :where(table:not(.rte-reset-table) tbody tr:nth-child(odd) > th, table:not(.rte-reset-table) tbody tr:nth-child(odd) > td),
.prose :where(table:not(.rte-reset-table) tbody tr:nth-child(odd) > th, table:not(.rte-reset-table) tbody tr:nth-child(odd) > td) {
  background: var(--color-bg-secondary);
}

.rte :where(table:not(.rte-reset-table) tbody tr:nth-child(even) > th, table:not(.rte-reset-table) tbody tr:nth-child(even) > td),
.prose :where(table:not(.rte-reset-table) tbody tr:nth-child(even) > th, table:not(.rte-reset-table) tbody tr:nth-child(even) > td) {
  background: var(--color-bg);
}

.rte :where(th, td),
.prose :where(th, td) {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  color: inherit;
  font-size: var(--text-small);
}

.rte :where(th),
.prose :where(th) {
  color: var(--color-fg);
  font-weight: 500;
  background: var(--color-bg-secondary);
}

.rte :where(table.rte-reset-table),
.prose :where(table.rte-reset-table) {
  width: auto;
  border: 0;
  border-collapse: separate;
  margin-block: 0;
}

.rte :where(table.rte-reset-table th, table.rte-reset-table td),
.prose :where(table.rte-reset-table th, table.rte-reset-table td) {
  border: 0;
  padding: 0;
  background: none;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
}

@media (max-width: 699px) {

  .rte :where(table),
  .prose :where(table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------
 * Shopify policy pages (privacy, refund, terms, shipping)
 * Markup is Shopify-managed; style only.
 * --------------------------------------------- */

.shopify-policy__container {
  --policy-max-width: 52rem;
  width: min(100%, var(--policy-max-width));
  margin-inline: auto;
  padding-inline: var(--page-margin);
  padding-block: var(--space-10) var(--space-16);
}

@media (min-width: 750px) {
  .shopify-policy__container {
    padding-block: var(--space-12) var(--space-20);
  }
}

.shopify-policy__title {
  margin: 0 0 var(--space-6);
}

.shopify-policy__title h1 {
  margin: 0;
  text-align: start;
  font-size: var(--heading-h2);
  color: rgb(var(--color-text-heading-rgb));
}

.shopify-policy__body {
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-body);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.shopify-policy__body :where(p, ul, ol, blockquote, table, pre) {
  margin: 0;
}

.shopify-policy__body :where(* + p, * + ul, * + ol, * + blockquote, * + table, * + pre) {
  margin-block-start: var(--space-4);
}

.shopify-policy__body :where(h1, h2, h3, h4, h5, h6) {
  margin: var(--space-6) 0 var(--space-3);
  color: rgb(var(--color-text-heading-rgb));
}

.shopify-policy__body h1 {
  font-size: var(--heading-h2);
}

.shopify-policy__body h2 {
  font-size: var(--heading-h3);
}

.shopify-policy__body h3 {
  font-size: var(--heading-h4);
}

.shopify-policy__body h4 {
  font-size: var(--heading-h5);
}

.shopify-policy__body h5 {
  font-size: var(--heading-h6);
}

.shopify-policy__body h6 {
  font-size: calc(var(--heading-h6) * 0.82);
}

.shopify-policy__body :where(ul, ol) {
  padding-inline-start: 1.25em;
}

.shopify-policy__body :where(li + li) {
  margin-block-start: var(--space-2);
}

.shopify-policy__body a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.shopify-policy__body a:hover,
.shopify-policy__body a:focus-visible {
  color: var(--color-link-hover);
}

.shopify-policy__body blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width) solid rgb(var(--color-border-rgb) / 0.5);
  color: rgb(var(--color-text-body-rgb));
}

.shopify-policy__body table {
  width: 100%;
  border-collapse: collapse;
  border: var(--border-width) solid var(--color-border);
}

.shopify-policy__body table tbody tr:nth-child(odd)>th,
.shopify-policy__body table tbody tr:nth-child(odd)>td {
  background: var(--color-bg-secondary);
}

.shopify-policy__body table tbody tr:nth-child(even)>th,
.shopify-policy__body table tbody tr:nth-child(even)>td {
  background: var(--color-bg);
}

.shopify-policy__body :where(th, td) {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
}

.shopify-policy__body th {
  background: var(--color-bg-secondary);
  color: rgb(var(--color-text-heading-rgb));
}

.shopify-policy__body :where(img, iframe, video) {
  max-width: 100%;
  height: auto;
}

@media (max-width: 699px) {
  .shopify-policy__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/**
 * Theme — Core CSS System (Layout)
 * Containers, section shell, grid system, and grid→slider switching via data attributes.
 */

/* ---------------------------------------------
 * Container system
 * Driven by Theme settings → Layout → Page width (standard / narrow / wide).
 * css-variables.liquid outputs: --page-width, --page-margin.
 * --------------------------------------------- */

.container,
.section-inner {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.container--boxed,
.section-inner--boxed {
  max-width: var(--page-width);
}

.container--wide,
.section-inner--wide {
  max-width: var(--container-width-wide, 110rem);
}

.container--full,
.section-inner--full {
  padding-inline: var(--page-margin, 25px);
}

@media (max-width: 699px) {

  .container,
  .section-inner,
  .container--full,
  .section-inner--full {
    padding-inline: 1.2rem;
  }
}

/* Skeleton integration: `.shopify-section` constrains direct children by default. */
.shopify-section>.container--full,
.shopify-section>.section-inner--full {
  grid-column: 1 / -1;
}

/* ---------------------------------------------
 * Section shell (recommended wrapper inside sections)
 * --------------------------------------------- */

.section {
  padding-block: var(--section-padding-block, clamp(var(--space-12), 5vw, var(--space-20)));
}

/*
 * Section scheme surfaces
 * These sections use per-section color scheme controls and should render
 * scheme background/text directly on the section shell.
 */
.section-featured-blog.color-scheme,
.section-multicolumn.color-scheme,
.section-text-with-image.color-scheme,
.section-product-bundle.color-scheme,
.section-rich-text.color-scheme,
.section-shop-by-collection.color-scheme,
.section-collapsible-content.color-scheme,
.section-image-comparison.color-scheme {
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

.section__header {
  margin-block-end: var(--section-header-gap, clamp(var(--space-6), 2.5vw, var(--space-10)));
}

.section__content {
  min-width: 0;
}

.section--border-top {
  border-top: 1px solid var(--border-color);
}

.section--border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.eyebrow,
.section__subheading {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--text-small, 0.75rem);
  color: rgb(var(--color-text-muted-rgb));
  line-height: 1.4;
}

.section__heading {
  margin: 0;
}

.section__heading+.section__description {
  margin-block-start: var(--space-3, 0.75rem);
}

.section__description {
  margin: 0;
  color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.8);
  line-height: var(--line-height-body, var(--body-line-height, 1.6));
}

@media (max-width: 699px) {
  .section__header--stack-mobile.section__header--with-nav {
    display: block;
  }

  .section__header--stack-mobile .section__heading {
    max-inline-size: 100%;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }

  .section__header--stack-mobile .section__header-text {
    margin-block-end: var(--space-4);
  }

  .section__header--stack-mobile .section__header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
  }

  .section__header--stack-mobile .section__header-actions .btn {
    white-space: nowrap;
    flex: 0 1 auto;
  }

  .section__header--stack-mobile .section__header-actions .grid-slider__nav {
    margin-inline-start: auto;
  }
}

/* Optional vertical spacing helper (inspired by Impact/Prestige `section-stack`) */
.stack {
  display: grid;
  gap: var(--stack-gap, var(--space-8));
}

.stack--sm {
  --stack-gap: var(--space-4);
}

.stack--md {
  --stack-gap: var(--space-6);
}

.stack--lg {
  --stack-gap: var(--space-10);
}

/* ---------------------------------------------
 * Grid system
 * --------------------------------------------- */

.grid {
  --grid-gap: var(--space-4);
  --grid-cols-mobile: 1;
  --grid-cols-desktop: var(--grid-cols-mobile);

  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr));
}

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(var(--grid-cols-desktop), minmax(0, 1fr));
  }
}

.grid__item {
  min-width: 0;
}

.grid--2 {
  --grid-cols-mobile: 1;
  --grid-cols-desktop: 2;
}

.grid--3 {
  --grid-cols-mobile: 1;
  --grid-cols-desktop: 3;
}

.grid--4 {
  --grid-cols-mobile: 2;
  --grid-cols-desktop: 4;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit,
      minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

@media (min-width: 700px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit,
        minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
}

/* ---------------------------------------------
 * Grid → Slider (no markup changes)
 *
 * Contract:
 * - Add `data-slider="true"` to any `.grid` to make it a scroll-snap carousel.
 * - Optional data attributes act as hooks for future JS enhancement.
 * --------------------------------------------- */

.grid[data-slider="true"] {
  /* Slider defaults (can be overridden per section via scoped CSS variables) */
  --slider-gap: var(--grid-gap);
  --slider-padding-inline: 0px;
  --slider-item-width: clamp(14rem, 75vw, 22rem);

  display: flex;
  gap: var(--slider-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--slider-padding-inline);
  padding-inline: var(--slider-padding-inline);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.grid[data-slider="true"]>.grid__item {
  flex: 0 0 auto;
  width: var(--slider-item-width);
  scroll-snap-align: start;
}

@media (min-width: 700px) {
  .grid[data-slider="true"] {
    --slider-item-width: clamp(16rem, 40vw, 22rem);
  }
}

@media (min-width: 1000px) {
  .grid[data-slider="true"] {
    --slider-item-width: clamp(16rem, 25vw, 20rem);
  }
}

/* Optional: remove scrollbar while preserving scroll */
.grid[data-slider="true"][data-slider-scrollbar="hidden"] {
  scrollbar-width: none;
}

.grid[data-slider="true"][data-slider-scrollbar="hidden"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/**
 * Theme — Core CSS System (Components)
 * Buttons + cards that are intentionally generic and reusable.
 */

/* ---------------------------------------------
 * Icon system (premium theme pattern)
 * --------------------------------------------- */

.icon {
  --icon-height: var(--icon-size);

  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}

[dir="rtl"] .icon--direction-aware {
  scale: -1;
}

.offset-icon {
  --icon-baseline-distance: calc(1em * 1.6);
  --icon-offset: calc((var(--icon-baseline-distance) - var(--icon-height)) / 2);

  position: relative;
  top: var(--icon-offset);
}

/* ---------------------------------------------
 * Button system
 * --------------------------------------------- */

.btn {
  --btn-bg: var(--color-btn-primary-bg, rgb(var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))));
  --btn-bg-hover: var(--color-btn-primary-bg-hover, rgb(var(--color-btn-primary-bg-hover-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --btn-fg: var(--color-btn-primary-text, rgb(var(--color-btn-primary-text-rgb, var(--color-background-rgb))));
  --btn-fg-hover: var(--color-btn-primary-text-hover, rgb(var(--color-btn-primary-text-hover-rgb, var(--color-btn-primary-text-rgb, var(--color-background-rgb)))));
  --btn-border: var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --btn-border-hover: var(--btn-border);
  --btn-padding-y: var(--space-3);
  --btn-padding-x: var(--space-6);
  --btn-radius: max(1px, calc(var(--radius-form, var(--style-border-radius-inputs, 5px)) * 0.9));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.725rem;
  gap: var(--space-2);
  padding-block: var(--btn-padding-y);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: var(--border-width) solid var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  font-family: var(--font-button, var(--font-heading));
  font-style: var(--font-button-style, var(--font-heading-style));
  font-weight: var(--font-button-weight, var(--font-heading-weight));
  font-size: var(--button-font-size, var(--text-xs));
  line-height: var(--button-line-height, var(--heading-line-height));
  letter-spacing: var(--button-letter-spacing, var(--heading-letter-spacing));
  text-transform: var(--button-text-transform, var(--heading-text-transform));
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--motion-duration-fast) var(--motion-ease),
    box-shadow var(--motion-duration-fast) var(--motion-ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 rgb(0 0 0 / 0);
}

.btn:not(:where([disabled], [aria-disabled="true"])):hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}

.btn:not(.btn--text):not(.btn--tertiary):not(:where([disabled], [aria-disabled="true"])):hover {
  box-shadow: 0 8px 20px rgb(var(--color-shadow-rgb, 15 15 18) / 0.12);
}

.btn:not(.btn--text):not(.btn--tertiary):not(:where([disabled], [aria-disabled="true"])):active {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 2px 8px rgb(var(--color-shadow-rgb, 15 15 18) / 0.09);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:where([disabled], [aria-disabled="true"]) {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn[aria-busy="true"] {
  pointer-events: none;
}

.btn[aria-busy="true"]:not(.btn--text):not(.btn--tertiary) {
  cursor: progress;
}

.btn[aria-busy="true"]:not(.btn--text):not(.btn--tertiary) .btn__label,
.btn[aria-busy="true"]:not(.btn--text):not(.btn--tertiary) .btn__icon {
  opacity: 0;
}

.btn[aria-busy="true"]:not(.btn--text):not(.btn--tertiary)::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: btn-loader-spin 700ms linear infinite;
}

@keyframes btn-loader-spin {
  to {
    transform: rotate(1turn);
  }
}

a.btn[aria-disabled="true"] {
  pointer-events: none;
}

/* Disabled buttons (for example "Sold out") get a muted look so they never
   read as an available action, whatever the button colours are set to.
   Buttons that are only busy (aria-busy) keep their normal colours. */
.btn:disabled:not([aria-busy="true"]),
.btn[aria-disabled="true"]:not([aria-busy="true"]) {
  --btn-fg: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)) / 0.72);
  --btn-fg-hover: var(--btn-fg);
  cursor: not-allowed;
}

.btn:disabled:not([aria-busy="true"]):not(.btn--tertiary):not(.btn--text),
.btn[aria-disabled="true"]:not([aria-busy="true"]):not(.btn--tertiary):not(.btn--text) {
  --btn-bg: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)) / 0.08);
  --btn-bg-hover: var(--btn-bg);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn--primary {
  --btn-bg: var(--color-btn-primary-bg, rgb(var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))));
  --btn-bg-hover: var(--color-btn-primary-bg-hover, rgb(var(--color-btn-primary-bg-hover-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --btn-fg: var(--color-btn-primary-text, rgb(var(--color-btn-primary-text-rgb, var(--color-background-rgb))));
  --btn-fg-hover: var(--color-btn-primary-text-hover, rgb(var(--color-btn-primary-text-hover-rgb, var(--color-btn-primary-text-rgb, var(--color-background-rgb)))));
  --btn-border: var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --btn-border-hover: var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
}

.btn--secondary {
  --btn-bg: var(--color-btn-secondary-bg, rgb(var(--color-btn-secondary-bg-rgb, var(--color-bg-secondary-rgb))));
  --btn-bg-hover: var(--color-btn-secondary-bg-hover, rgb(var(--color-btn-secondary-bg-hover-rgb, var(--color-btn-secondary-bg-rgb, var(--color-bg-secondary-rgb)))));
  --btn-fg: var(--color-btn-secondary-text, rgb(var(--color-btn-secondary-text-rgb, var(--color-foreground-rgb))));
  --btn-fg-hover: var(--color-btn-secondary-text-hover, rgb(var(--color-btn-secondary-text-hover-rgb, var(--color-btn-secondary-text-rgb, var(--color-foreground-rgb)))));
  --btn-border: var(--color-btn-secondary-border, rgb(var(--color-btn-secondary-border-rgb, var(--color-border-rgb))));
  --btn-border-hover: var(--color-btn-secondary-border, rgb(var(--color-btn-secondary-border-rgb, var(--color-border-rgb))));
}

.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-btn-secondary-bg-hover, rgb(var(--color-btn-secondary-bg-hover-rgb, var(--color-btn-secondary-bg-rgb, var(--color-bg-secondary-rgb)))));
  --btn-fg: var(--color-btn-secondary-text, rgb(var(--color-btn-secondary-text-rgb, var(--color-foreground-rgb))));
  --btn-fg-hover: var(--color-btn-secondary-text-hover, rgb(var(--color-btn-secondary-text-hover-rgb, var(--color-btn-secondary-text-rgb, var(--color-foreground-rgb)))));
  --btn-border: var(--color-btn-secondary-border, rgb(var(--color-btn-secondary-border-rgb, var(--color-border-rgb))));
  --btn-border-hover: var(--color-btn-secondary-border, rgb(var(--color-btn-secondary-border-rgb, var(--color-border-rgb))));
}

.btn--text,
.btn--tertiary {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
  --btn-fg-hover: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
  --btn-border: transparent;
  --btn-border-hover: transparent;
  padding: 0;
  min-height: 1.5rem;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)) / 0.9);
  opacity: var(--motion-opacity-muted);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease);
}

.btn--text:not(:where([disabled], [aria-disabled="true"])):hover,
.btn--text:focus-visible,
.btn--tertiary:not(:where([disabled], [aria-disabled="true"])):hover,
.btn--tertiary:focus-visible {
  opacity: 1;
  border-bottom-color: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)) / 0.9);
}

.btn--text.btn--with-icon,
.btn--tertiary.btn--with-icon {
  gap: 0.4rem;
}


.btn--full {
  width: 100%;
}

.btn--sm {
  --btn-padding-y: var(--space-2);
  --btn-padding-x: var(--space-4);
  font-size: var(--text-small);
}

.btn--lg {
  --btn-padding-y: var(--space-4);
  --btn-padding-x: var(--space-6);
}

.btn__label {
  display: inline-flex;
  align-items: center;
}

.btn--label-slide .btn__label--slide {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: inherit;
  white-space: nowrap;
}

.btn--label-slide .btn__label-text {
  display: block;
  will-change: transform;
  transition: transform var(--motion-duration-slow) cubic-bezier(0.76, 0, 0.24, 1);
}

.btn--label-slide .btn__label-text--alt {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 100%, 0);
}

.btn--label-slide:not(:where([disabled], [aria-disabled="true"])):hover .btn__label-text--main,
.btn--label-slide:focus-visible .btn__label-text--main {
  transform: translate3d(0, -100%, 0);
}

.btn--label-slide:not(:where([disabled], [aria-disabled="true"])):hover .btn__label-text--alt,
.btn--label-slide:focus-visible .btn__label-text--alt {
  transform: translate3d(0, 0, 0);
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--motion-duration-normal) var(--motion-ease);
}

.btn--with-icon:not(:where([disabled], [aria-disabled="true"])):hover .btn__icon,
.btn--with-icon:focus-visible .btn__icon {
  transform: translate3d(0.24rem, 0, 0);
}

.btn__icon svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {

  .btn,
  .btn__label-text,
  .btn__icon {
    transition: none !important;
  }

  .btn:not(.btn--text):not(.btn--tertiary) {
    transform: none !important;
    box-shadow: none !important;
  }

  .btn--label-slide .btn__label-text--alt {
    position: static;
    transform: none;
    display: none;
  }

  .btn--label-slide .btn__label-text--main {
    transform: none !important;
  }

  .btn[aria-busy="true"]:not(.btn--text):not(.btn--tertiary)::after {
    animation: none;
    border-inline-end-color: currentColor;
    opacity: 0.8;
  }
}

/* ---------------------------------------------
 * Form system (shared field + checkbox)
 * --------------------------------------------- */

.field {
  --field-radius: var(--style-border-radius-inputs, var(--radius-form, 0.5rem));
  --field-bg: var(--color-input-bg, rgb(var(--color-input-bg-rgb)));
  --field-fg: var(--color-input-text, rgb(var(--color-input-text-rgb)));
  --field-border: rgb(var(--color-input-border-rgb) / 0.72);
  --field-placeholder: rgb(var(--color-text-muted-rgb, var(--color-input-text-rgb)) / 0.86);

  display: grid;
  gap: var(--space-2);
  width: 100%;
  position: relative;
}

.field__input {
  width: 100%;
  min-height: 2.875rem;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
  border: var(--border-width) solid var(--field-border, rgb(var(--color-input-border-rgb) / 0.72));
  border-radius: var(--field-radius, var(--style-border-radius-inputs, var(--radius-form, 0.5rem)));
  background: var(--field-bg, var(--color-input-bg, rgb(var(--color-input-bg-rgb))));
  color: var(--field-fg, var(--color-input-text, rgb(var(--color-input-text-rgb))));
  font: inherit;
  font-size: var(--text-small);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder {
  color: var(--field-placeholder, rgb(var(--color-text-muted-rgb, var(--color-input-text-rgb)) / 0.86));
}

.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border-color: rgb(var(--color-input-border-rgb, var(--color-foreground-rgb)));
}

.field__input:focus-visible {
  box-shadow: var(--focus-ring);
}

.field__input[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

.field__label {
  color: rgb(var(--color-text-muted-rgb, var(--color-input-text-rgb)) / 0.92);
  font-size: var(--text-small);
  line-height: 1.4;
}

.field--textarea .field__input {
  min-height: 6rem;
  resize: vertical;
}

.field--textarea {
  border-radius: min(var(--field-radius, var(--style-border-radius-inputs, var(--radius-form, 0.25rem))), 1rem);
}

.field--floating,
.field:not(.field--action):has(> .field__label) {
  gap: 0;
}

.field--floating .field__input,
.field:not(.field--action):has(> .field__label) .field__input {
  padding-block-start: 1.125rem;
  padding-block-end: 0.5rem;
}

.field--floating.field--textarea .field__input,
.field--textarea:not(.field--action):has(> .field__label) .field__input {
  padding-block-start: 1.35rem;
  padding-block-end: 0.875rem;
}

.field--floating .field__label,
.field:not(.field--action):has(> .field__label)>.field__label {
  position: absolute;
  inset-inline-start: 0.875rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: none;
  background: transparent;
  transition:
    inset-block-start var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    font-size var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease);
}

.field--floating.field--textarea .field__label,
.field--textarea:not(.field--action):has(> .field__label)>.field__label {
  inset-block-start: 1.125rem;
  transform: none;
}

.field--floating .field__input::placeholder {
  color: transparent;
}

.field--floating .field__input:-webkit-autofill {
  animation-name: theme-field-autofill;
  animation-duration: 0.01s;
  animation-iteration-count: 1;
}

.field--floating .field__input:focus+.field__label,
.field--floating:focus-within .field__label,
.field--floating.is-focused .field__label,
.field--floating.is-filled .field__label,
.field--floating .field__input[placeholder]:not(:placeholder-shown)+.field__label,
.field--floating .field__input:-webkit-autofill+.field__label,
.field:not(.field--action):has(>.field__input[placeholder]:not(:placeholder-shown))>.field__label,
.field:not(.field--action):has(>.field__input:-webkit-autofill)>.field__label,
.field:not(.field--action):has(>.field__label):focus-within>.field__label {
  inset-block-start: 0.4rem;
  transform: none;
  font-size: var(--text-xs);
  color: rgb(var(--color-input-focus-rgb));
  opacity: 1;
}

@keyframes theme-field-autofill {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

.field--action {
  position: relative;
  gap: 0;
}

.field--action .field__input {
  padding-inline-end: 3.1rem;
}

.field__action {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.375rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: max(0.25rem, calc(var(--field-radius) - 0.25rem));
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease);
}

.field__action:hover,
.field__action:focus-visible {
  color: rgb(var(--color-input-focus-rgb));
}

.field__action:hover {
  transform: translate3d(0.1875rem, -50%, 0);
}

.field__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  transform: translateY(-50%);
}

.field__action .icon {
  --icon-size: 1rem;
}

.check {
  --check-radius: 0.2rem;

  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  color: inherit;
}

.check__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.check__box {
  position: relative;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
  border-radius: var(--check-radius);
  border: var(--border-width) solid rgb(var(--color-input-border-rgb) / 0.82);
  background: var(--color-input-bg, rgb(var(--color-input-bg-rgb)));
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease),
    box-shadow var(--motion-duration-fast) var(--motion-ease);
}

.check__box::after {
  content: '';
  position: absolute;
  inset: 0.25rem;
  border-radius: 2px;
  background: rgb(var(--color-input-focus-rgb));
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--motion-duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check__text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: inherit;
}

.check__input:checked+.check__box {
  background: var(--color-input-bg, rgb(var(--color-input-bg-rgb)));
}

.check__input:checked+.check__box::after {
  transform: scale(1);
}

.check__input:focus-visible+.check__box {
  box-shadow: var(--focus-ring);
}

.check:hover .check__box {
  border-color: rgb(var(--color-input-border-rgb) / 0.55);
}

@media (prefers-reduced-motion: reduce) {

  .field__input,
  .field__label,
  .field__action,
  .check__box,
  .check__box::after {
    transition: none !important;
  }
}

/* Prevent iOS Safari auto-zoom when focusing small form fields. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 999px) and (hover: none) and (pointer: coarse) {
    :where(
      input[type='text'],
      input[type='email'],
      input[type='search'],
      input[type='tel'],
      input[type='url'],
      input[type='password'],
      input[type='number'],
      input[type='date'],
      input[type='datetime-local'],
      input[type='month'],
      input[type='week'],
      input[type='time'],
      textarea,
      select
    ) {
      font-size: 16px;
    }

    .field__input,
    .quantity-selector__input,
    .theme-cart-qty__input {
      font-size: 16px;
    }
  }
}

/* ---------------------------------------------
 * Card system
 * --------------------------------------------- */

.card {
  --card-radius: var(--radius-component);
  --card-bg: var(--color-surface);
  --card-border: var(--border-color);
  --card-padding: var(--space-5);
  --card-media-ratio: var(--media-ratio, 1 / 1);

  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  border: var(--border-width) solid var(--card-border);
  background: var(--card-bg);
  overflow: clip;
  min-width: 0;
}

.product-card {
  border-radius: var(--radius-component);
}

.welcome img {
  border-radius: var(--radius-component);
}

.card__media {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  background: rgb(var(--color-bg-secondary-rgb, var(--color-foreground-rgb)) / 0.35);
  overflow: hidden;
}

.card__media::before {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  background-color: #000;
  block-size: 100%;
  content: "";
  display: block;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: .03;
}

.card__media :where(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__content {
  display: grid;
  gap: var(--space-2);
  padding: var(--card-padding);
  min-width: 0;
}

.card__title {
  color: var(--color-fg);
  text-decoration: none;
}

.card__title:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.card__meta {
  color: var(--color-fg-muted);
  font-size: var(--text-small);
}

.card__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);

}

.card__price-compare {
  color: var(--color-fg-subtle);
  text-decoration: line-through;
}

.card--product .card__content {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.card--collection .card__meta {
  font-size: var(--text-body);
}

.card--article .card__meta {
  font-size: var(--text-xs);
}

/* Optional hover lift (use on links wrapping the card or on `.card` itself) */
.card--hover {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.6);
}

/* ---------------------------------------------
 * Hero banner
 * --------------------------------------------- */

.hero-section {
  padding-block: 0;
  margin-top: var(--section-margin-top, 0px);
  margin-bottom: var(--section-margin-bottom, 0px);
}

.hero-section>.container--full {
  max-width: none;
  padding-inline: 0;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

.hero__media-shell {
  position: relative;
  min-height: 0;
  display: grid;
}

.hero__media {
  position: relative;
  aspect-ratio: var(--hero-mobile-ratio, 16 / 9);
  min-height: var(--hero-mobile-min-height, 0px);
  overflow: hidden;
}

@media (min-width: 700px) {
  .hero__media {
    aspect-ratio: var(--hero-desktop-ratio, 16 / 9);
    min-height: var(--hero-desktop-min-height, 0px);
  }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)) / var(--hero-overlay-opacity, 0.35));
}

.hero__media,
.hero__content-wrap {
  grid-area: 1 / 1;
}

.hero__media-asset {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: center;
  transition: transform var(--motion-duration-normal) var(--motion-ease);
}

.hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__picture--poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image,
.hero__video,
.hero__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Force hero image centering even when Shopify injects focal-point inline styles. */
.hero__image {
  object-position: center !important;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.hero__video--mobile {
  display: none;
}

@media (max-width: 699px) {
  .hero__video--desktop {
    display: none;
  }

  .hero__video--mobile {
    display: block;
  }
}

.hero__placeholder {
  color: rgb(var(--color-bg-secondary-rgb) / 0.86);
}

.placeholder-svg {
  filter: grayscale(1);
}

/* Theme editor only: boost placeholder contrast so empty-state media stays visible
   against light color schemes inside the editor iframe. */
html.shopify-design-mode .placeholder-svg,
.shopify-design-mode .placeholder-svg {
  color: rgb(var(--color-foreground-rgb) / 0.22);
  opacity: 0.96;
  filter: grayscale(1) contrast(1.14);
}

html.shopify-design-mode .image-comparison__panel--after .placeholder-svg,
.shopify-design-mode .image-comparison__panel--after .placeholder-svg {
  color: rgb(var(--color-foreground-rgb) / 0.16);
}

html.shopify-design-mode .image-comparison__panel--before .placeholder-svg,
.shopify-design-mode .image-comparison__panel--before .placeholder-svg {
  color: rgb(var(--color-foreground-rgb) / 0.24);
}

/* Selection cards: storefront intentionally dims placeholder to /0.2 so it
   reads as background art beneath the overlay text. The global design-mode
   rule only lifts this to /0.22 and adds contrast(1.14), which pushes fills
   that are already near the card background toward white — making the SVG
   illustration invisible. Boost opacity here and drop the contrast boost. */
html.shopify-design-mode .selection-card__placeholder.placeholder-svg,
.shopify-design-mode .selection-card__placeholder.placeholder-svg {
  color: rgb(var(--color-foreground-rgb) / 0.5);
  filter: grayscale(1);
}

/* Slideshow slides: the section-slideshow__overlay gradient sits on top of
   the placeholder SVG, further washing it out. Same fix — more opacity,
   no contrast boost. */
html.shopify-design-mode .section-slideshow__media-placeholder.placeholder-svg,
.shopify-design-mode .section-slideshow__media-placeholder.placeholder-svg {
  color: rgb(var(--color-foreground-rgb) / 0.5);
  filter: grayscale(1);
}

.hero__content-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  width: 100%;
  padding-block: clamp(1.75rem, 6vw, 6.5rem);
  pointer-events: none;
}

.hero__content-wrap .container {
  width: 100%;
  display: flex;
}

.hero__content {
  pointer-events: auto;
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.35rem);
  max-width: min(100%, 64rem);
}

.hero__heading {
  margin: 0;
  max-width: min(100%, var(--hero-heading-max-width, 760px));
  color: rgb(var(--color-text-heading-rgb));
  text-wrap: balance;
}

.hero__heading--xl {
  font-size: var(--heading-xl, var(--heading-h1));
}

.hero__heading--l {
  font-size: var(--heading-lg, var(--heading-h2));
}

.hero__heading--m {
  font-size: var(--heading-md, var(--heading-h3));
}

.hero__heading--s {
  font-size: var(--heading-sm, var(--heading-h5));
}

.hero__description {
  margin: 0;
  max-width: min(100%, var(--hero-description-max-width, 760px));
  color: rgb(var(--color-text-body-rgb) / 0.94);
  text-wrap: pretty;
}

.hero__description>* {
  margin: 0;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__buttons .btn {
  min-width: 11.5rem;
  max-width: 100%;
  white-space: normal;
}

.hero__scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: max-content;
  margin-top: clamp(0.5rem, 1.8vw, 1.35rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-body-rgb) / 0.92);
  cursor: pointer;
}

.hero__scroll-indicator-text {
  font-size: var(--text-xs);
  line-height: 1;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight, 500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
}

.hero__scroll-indicator-line {
  width: 2px;
  height: 70px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center top;
  transform: scaleY(0.5714);
  transition:
    transform var(--motion-duration-normal) var(--motion-ease),
    opacity var(--motion-duration-normal) var(--motion-ease);
}

.hero--align-center .hero__scroll-indicator {
  margin-inline: auto;
}

.hero--align-right .hero__scroll-indicator {
  margin-inline-start: auto;
}

.hero__scroll-indicator:focus-visible {
  outline: 2px solid rgb(var(--color-text-heading-rgb) / 0.35);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

@media (hover: hover) and (pointer: fine) {
  .hero__scroll-indicator:hover .hero__scroll-indicator-line,
  .hero__scroll-indicator:focus-visible .hero__scroll-indicator-line {
    transform: scaleY(1);
  }
}

.hero--align-left .hero__content-wrap .container {
  justify-content: flex-start;
}

.hero--align-center .hero__content-wrap .container {
  justify-content: center;
}

.hero--align-right .hero__content-wrap .container {
  justify-content: flex-end;
}

.hero--content-sticky.hero--valign-top .hero__content-wrap .container {
  position: sticky;
  top: var(--page-margin, var(--space-4));
}

body.theme-header-sticky-visible .hero--content-sticky.hero--valign-top .hero__content-wrap .container {
  top: calc(var(--page-margin, var(--space-4)) + var(--theme-sticky-header-offset, var(--sticky-header-visible-offset, 0px)));
}

body.theme-header-sticky-active .hero--content-sticky.hero--valign-top .hero__content-wrap .container {
  transition: top var(--motion-duration-fast, 0.2s) var(--motion-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  body.theme-header-sticky-active .hero--content-sticky.hero--valign-top .hero__content-wrap .container {
    transition: none;
  }
}

/* text-align lives on .hero__content directly so it doesn't rely on
   cascading through the flex→grid boundary, which is unreliable */
.hero--align-left .hero__content {
  text-align: left;
  margin-inline: 0 auto;
}

.hero--align-center .hero__content {
  text-align: center;
  margin-inline: auto;
}

.hero--align-right .hero__content {
  text-align: right;
  margin-inline: auto 0;
}

.hero--align-center .hero__subheading,
.hero--align-center .hero__heading,
.hero--align-center .hero__description {
  margin-inline: auto;
}

.hero--align-right .hero__subheading,
.hero--align-right .hero__heading,
.hero--align-right .hero__description {
  margin-inline-start: auto;
}

.hero--align-center .hero__buttons {
  justify-content: center;
}

.hero--align-right .hero__buttons {
  justify-content: flex-end;
}

.hero--valign-top .hero__content-wrap {
  align-items: flex-start;
}

.hero--valign-center .hero__content-wrap {
  align-items: center;
}

.hero--valign-bottom .hero__content-wrap {
  align-items: flex-end;
}

@media (max-width: 699px) {
  .hero {
    /* Shared mobile typography scale pattern.
       Can be reused by other sections for consistent responsive downscaling. */
    --hero-mobile-type-scale: var(--type-scale-mobile, 0.82);
  }

  .hero__content-wrap {
    padding-block: clamp(1.5rem, 7vw, 3rem);
  }

  .hero__content {
    gap: clamp(0.625rem, 2.5vw, 1rem);
    max-width: min(100%, 34rem);
  }

  .hero__subheading {
    font-size: clamp(0.72rem, calc(var(--text-small) * var(--hero-mobile-type-scale)), 0.875rem);
  }

  .hero__heading--xl {
    font-size: clamp(1.9rem, calc(var(--heading-h1) * var(--hero-mobile-type-scale)), 3rem);
  }

  .hero__heading--l {
    font-size: clamp(1.7rem, calc(var(--heading-h2) * var(--hero-mobile-type-scale)), 2.5rem);
  }

  .hero__heading--m {
    font-size: clamp(1.35rem, calc(var(--heading-h3) * var(--hero-mobile-type-scale)), 2rem);
  }

  .hero__heading--s {
    font-size: clamp(1.05rem, calc(var(--heading-h5) * var(--hero-mobile-type-scale)), 1.5rem);
  }

  .hero__description {
    font-size: clamp(0.9rem, calc(var(--text-body) * var(--hero-mobile-type-scale)), 1rem);
    max-width: min(100%, 36ch);
    line-height: 1.55;
  }

  .hero__buttons .btn {
    min-width: 0;
  }

  .hero__scroll-indicator {
    gap: 0.75rem;
  }

  .hero__scroll-indicator-line {
    height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-indicator-line {
    transition: none;
  }
}

/* ---------------------------------------------
 * Editorial scroll section
 * --------------------------------------------- */

.editorial-scroll-section {
  padding-top: var(--section-padding-top, 0px);
  padding-bottom: var(--section-padding-bottom, 0px);
  margin-top: var(--section-margin-top, 0px);
  margin-bottom: var(--section-margin-bottom, 0px);
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

.editorial-scroll-section>.container--full {
  max-width: none;
  padding-inline: 0;
}

.editorial-scroll {
  position: relative;
  background: rgb(var(--color-bg-main-rgb));
  overflow: clip;
}

.editorial-scroll__stage {
  position: relative;
  min-height: calc(var(--editorial-scroll-height, 440) * 1vh);
}

.editorial-scroll__viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}

.editorial-scroll__heading-layer {
  --editorial-heading-opacity: 1;

  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1rem, 6vw, 4.5rem);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--editorial-heading-opacity);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.editorial-scroll--heading-behind .editorial-scroll__heading-layer {
  z-index: 20;
  mix-blend-mode: var(--editorial-heading-blend-mode, normal);
}

.editorial-scroll__heading {
  margin: 0;
  width: min(100%, 22ch);
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.5rem, calc(var(--editorial-heading-size, 80px) * var(--font-scale-heading-factor, 1)), 7.5rem);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  color: rgb(var(--color-text-heading-rgb));
  text-shadow: 0 0 1px rgb(var(--color-text-body-rgb) / 0.15);
}

.editorial-scroll__strip {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 10;
  will-change: transform;
}

.editorial-scroll__card {
  --editorial-card-top: 34%;
  --editorial-card-bottom: auto;

  position: absolute;
  width: var(--editorial-card-width, 280px);
  max-width: min(78vw, var(--editorial-card-width, 280px));
  top: var(--editorial-card-top);
  bottom: var(--editorial-card-bottom);
  transform: rotate(var(--card-rotation, 0deg));
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.editorial-scroll__card--top {
  --editorial-card-top: 5%;
  --editorial-card-bottom: auto;
}

.editorial-scroll__card--middle {
  --editorial-card-top: 25%;
  --editorial-card-bottom: auto;
}

.editorial-scroll__card--bottom {
  --editorial-card-bottom: 5%;
  --editorial-card-top: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
}

.editorial-scroll__card--bottom .editorial-scroll__caption {
  margin-top: 0;
}

.editorial-scroll__media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--editorial-card-ratio, 4 / 5);
  overflow: hidden;
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)) / 0.5);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--editorial-reveal-duration, 0.75s) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path;
}

.editorial-scroll__card.is-revealed .editorial-scroll__media-wrap,
.editorial-scroll[data-reveal-enabled="false"] .editorial-scroll__media-wrap {
  clip-path: inset(0 0 0 0);
}

.editorial-scroll__image,
.editorial-scroll__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card, var(--radius-component, 4px));
  /* Promote the image into its own compositor layer rasterized at full
     device pixel ratio. The parent .editorial-scroll__strip is animated
     via continuous sub-pixel translate3d() (toFixed(2) → up to 0.01px
     fractional offsets every frame). Without a dedicated child layer,
     the browser re-rasterizes the image *inside* the strip layer at the
     current sub-pixel offset each frame, and the resulting anti-aliased
     pixel grid reads as blur. With its own layer the image is rasterized
     once at DPR and the parent's transform just translates the already-
     crisp surface around — no per-frame re-rasterization, no blur.

     translateZ(0) + backface-visibility: hidden is the cheapest reliable
     way to opt into a dedicated layer across Chromium / Safari / Firefox.
     We deliberately do NOT add `will-change: transform` here — that would
     pin a layer permanently per image (8–10 layers in a typical
     editorial scroll). The transform alone is enough to promote on
     demand and lets the browser dispose the layer when offscreen. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.editorial-scroll__caption {
  margin-top: var(--space-3);
  max-inline-size: 30ch;
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-small);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--motion-duration-normal) var(--motion-ease),
    transform var(--motion-duration-normal) var(--motion-ease);
  transition-delay: var(--editorial-caption-delay, 0.8s);
  will-change: opacity, transform;
}

.editorial-scroll__card.is-revealed .editorial-scroll__caption,
.editorial-scroll[data-reveal-enabled="false"] .editorial-scroll__caption {
  opacity: 1;
  transform: translateY(0);
}

.editorial-scroll__card-title {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--color-text-body-rgb) / 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--motion-duration-fast) var(--motion-ease);
  text-wrap: balance;
  line-height: 1.3;
}

.editorial-scroll__card-title:hover {
  text-decoration-color: currentColor;
}

.editorial-scroll__card-description {
  margin: var(--space-1) 0 0;
  max-inline-size: 32ch;
  text-wrap: pretty;
}


@media (max-width: 1100px) {
  .editorial-scroll {
    padding-block: var(--space-7);
  }

  .editorial-scroll__stage {
    min-height: auto;
  }

  .editorial-scroll__viewport {
    position: relative;
    top: auto;
    height: auto;
    overflow: hidden;
    isolation: auto;
    padding-inline: var(--page-margin);
  }

  .editorial-scroll__heading-layer {
    position: relative;
    inset: auto;
    z-index: 2;
    display: block;
    max-inline-size: min(100%, 42rem);
    padding-inline: 0;
    margin-inline: auto;
    margin-block-end: var(--space-5);
    opacity: 1 !important;
    pointer-events: auto;
    transition: none;
  }

  .editorial-scroll--heading-behind .editorial-scroll__heading-layer {
    mix-blend-mode: normal;
  }

  /* Once the heading leaves the scroll stage it reads as a normal section
     title, so it is centred like every other section header. */
  .editorial-scroll__heading {
    width: auto;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
    font-size: clamp(1.6rem, calc(var(--editorial-heading-size, 80px) * 0.36), 3rem);
    text-shadow: none;
  }

  .editorial-scroll__strip {
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    width: auto;
    will-change: transform;
  }

  .editorial-scroll__card {
    position: relative;
    top: auto;
    left: auto !important;
    width: auto;
    max-width: none;
    flex: 0 0 min(19rem, 42vw);
    transform: none;
    transition: none;
  }

  .editorial-scroll__card--top,
  .editorial-scroll__card--middle,
  .editorial-scroll__card--bottom {
    --editorial-card-top: auto;
  }

  .editorial-scroll__card--bottom {
    display: block;
  }

  .editorial-scroll__media-wrap,
  .editorial-scroll__card.is-revealed .editorial-scroll__media-wrap,
  .editorial-scroll[data-reveal-enabled="false"] .editorial-scroll__media-wrap {
    clip-path: inset(0 0 0 0);
    transition: none;
  }

  .editorial-scroll__caption,
  .editorial-scroll__card.is-revealed .editorial-scroll__caption,
  .editorial-scroll[data-reveal-enabled="false"] .editorial-scroll__caption {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

@media (max-width: 699px) {
  .editorial-scroll {
    padding-block: var(--space-6);
  }

  .editorial-scroll__viewport {
    padding-inline: clamp(1rem, 4.5vw, 1.25rem);
  }

  .editorial-scroll__heading-layer {
    margin-block-end: var(--space-4);
  }

  /* Same size as other section titles (h2) on phones. */
  .editorial-scroll__heading {
    font-size: var(--heading-h2);
  }

  .editorial-scroll__strip {
    gap: var(--space-4);
  }

  .editorial-scroll__card {
    flex-basis: min(72vw, 16.5rem);
  }

  .editorial-scroll__caption {
    margin-top: var(--space-2);
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {

  .editorial-scroll__heading-layer,
  .editorial-scroll__strip,
  .editorial-scroll__media-wrap,
  .editorial-scroll__caption,
  .editorial-scroll__card {
    transition: none;
  }
}

/* ---------------------------------------------
 * Cart system (drawer + page)
 * --------------------------------------------- */

/* html.theme-cart-lock, removex
body.theme-cart-lock {
  overflow: hidden;
} */

.theme-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  pointer-events: none;
  /* overflow: hidden;
  transition: none; */
  --theme-cart-drawer-width-desktop: 707px;
  --theme-cart-drawer-main-width-desktop: 472px;
}

.theme-cart-drawer__overlay {
  position: absolute;
  inset: 0;
}

.theme-cart-drawer__panel {
  --drawer-panel-margin: var(--space-3);
  --motion-shell-translate: 100%;
  position: absolute;
  z-index: 80;
  inset-block: 0;
  inset-inline-end: 0;
  width: calc(100vw - (var(--drawer-panel-margin) * 2));
  max-width: calc(100vw - (var(--drawer-panel-margin) * 2));
  background: var(--color-bg);
  color: var(--color-fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-inline-start: 1px solid rgb(var(--color-border-rgb) / 0.35);
  /* Closed-state baseline */
  transform: translateX(var(--motion-shell-translate));
  will-change: transform;
  transition: transform var(--motion-duration-normal) linear;
  margin: var(--drawer-panel-margin);
  border-radius: .6rem;
}

/* Hold open state at position 0 */
.theme-cart-drawer.is-open .theme-cart-drawer__panel {
  transform: translateX(0);
}

@media (min-width: 600px) {
  .theme-cart-drawer.theme-cart-drawer--has-rail.is-rail-open .theme-cart-drawer__panel {
    width: min(calc(100vw - (var(--drawer-panel-margin) * 2)), var(--theme-cart-drawer-width-desktop));
  }
}

@media (min-width: 600px) {
  .theme-cart-drawer__panel {
    width: min(calc(100vw - (var(--drawer-panel-margin) * 2)), var(--theme-cart-drawer-main-width-desktop));
  }

  .theme-cart-drawer--has-rail .theme-cart-drawer__panel {
    width: min(calc(100vw - (var(--drawer-panel-margin) * 2)), var(--theme-cart-drawer-main-width-desktop));
  }
}

.theme-cart-drawer[dir="rtl"] .theme-cart-drawer__panel,
[dir="rtl"] .theme-cart-drawer__panel {
  --motion-shell-translate: -100%;
  inset-inline-end: auto;
  inset-inline-start: 0;
  border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.35);
  border-inline-start: 0;
}

.theme-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.theme-cart-drawer.is-opening {
  visibility: visible;
  pointer-events: none;
}

.theme-cart-drawer.is-open .motion-overlay {
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--motion-overlay-blur));
  backdrop-filter: blur(var(--motion-overlay-blur));
}

.theme-cart-drawer.is-closing {
  visibility: visible;
  pointer-events: none;
}

.theme-cart-drawer__shell {
  display: flex;
  height: 100%;
  min-height: 0;
}

@media (min-width: 1200px) {
  .theme-cart-drawer--has-rail .theme-cart-drawer__shell {
    position: relative;
    justify-content: flex-end;
    overflow: hidden;
  }

  .theme-cart-drawer--has-rail .theme-cart-drawer__main {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--theme-cart-drawer-main-width-desktop);
    width: min(100%, var(--theme-cart-drawer-main-width-desktop));
    max-width: var(--theme-cart-drawer-main-width-desktop);
    background: var(--color-bg);
  }
}

.theme-cart-featured {
  display: none;
  background: transparent;
  border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.35);
  min-width: 0;
  min-height: 0;
}

.theme-cart-drawer--has-rail .theme-cart-featured {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
}

@media (min-width: 1200px) {

  /* Featured collection: no entrance animation — appears instantly
     with the drawer panel. The panel slide carries all the motion. */
  .theme-cart-drawer--has-rail .theme-cart-featured {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1;
    width: 235px;
    max-width: 235px;
    overflow: hidden;
  }

  [dir="rtl"] .theme-cart-drawer--has-rail .theme-cart-featured,
  .theme-cart-drawer[dir="rtl"].theme-cart-drawer--has-rail .theme-cart-featured {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

.theme-cart-featured__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: .2rem 0 0;
  display: grid;
  gap: 1.8rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.theme-cart-featured__list::-webkit-scrollbar {
  display: none;
}

.theme-cart-featured__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 0;
}

.theme-cart-featured__eyebrow {
  padding: 1.2rem 0;
  font-size: var(--text-xs);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / .72);
}

.theme-cart-featured__item {
  display: block;
}

.theme-cart-featured__list .theme-cart-featured__item:last-child {
  margin-bottom: 1.5rem;
}

.theme-cart-featured__link {
  display: grid;
  gap: .625rem;
  color: inherit;
  text-decoration: none;
}

.theme-cart-featured__content {
  display: grid;
  gap: .4rem;
  padding: 0.55rem 0px;
}

.theme-cart-featured__title {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: clamp(0.9rem, 1.15vw, 0.12rem);
  line-height: 1.05;
}

.theme-cart-featured__image {
  background: rgb(var(--color-background-rgb));
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-component);
  overflow: hidden;
}

.theme-cart-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-cart-featured__image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(var(--color-foreground-rgb) / .05);
}

.theme-cart-featured__vendor {
  margin: 0;
  font-size: calc(var(--text-xs) * 0.92);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / .66);
}

.theme-cart-featured__vendor-link {
  color: inherit;
  text-decoration: none;
}

.theme-cart-featured__vendor-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.theme-cart-featured__price {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.2;
}

.theme-cart-featured__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.theme-cart-featured__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1875rem;
  border: 1px solid rgb(var(--color-text-body-rgb) / 0);
  border-radius: .22rem;
}

.theme-cart-featured__swatch-chip {
  inline-size: 0.83rem;
  block-size: 0.83rem;
  border-radius: .22rem;
  background: var(--swatch-bg, var(--color-bg-secondary));
  border: 1px solid rgb(var(--color-text-body-rgb) / 0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.theme-cart-featured__quick-add .card__quick-add-form {
  margin: 0;
}

.theme-cart-featured__quick-add .card__quick-add-btn,
.theme-cart-featured__quick-add .btn {
  width: 100%;
  --btn-padding-y: .62rem;
}

.theme-cart-drawer__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.theme-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.175rem 1.125rem;
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
}

.theme-cart-drawer__title {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-md);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
}

.theme-cart-drawer__title  .theme-cart-drawer__item-count{
  font-size: var(--text-small);
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-drawer__close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem;
}

.theme-cart-drawer__form {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.theme-cart-drawer__items {
  overflow: auto;
  padding: 0 1.175rem;
  flex: 1 1 auto;
}

.theme-cart-drawer__footer {
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.35);
  padding: 1.125rem 1.175rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.theme-cart-drawer__view-cart {
  display: block;
  text-align: center;
  min-height: 24px;
  padding: 2px 4px;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgb(var(--color-foreground-rgb));
}

.theme-cart-drawer__view-cart:hover,
.theme-cart-drawer__view-cart:focus-visible {
  text-decoration-thickness: 2px;
}

.theme-cart-drawer__totals {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.theme-cart-drawer__subtotal-label {
  font-family: var(--font-heading);
  font-size: var(--heading-md);
}

.theme-cart-drawer__subtotal-value {
  font-family: var(--font-heading);
  font-size: var(--heading-sm);
}

.theme-cart-summary {
  display: grid;
  gap: 0.55rem;
}

.theme-cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.theme-cart-summary__label {
  color: rgb(var(--color-text-muted-rgb));
  font-size: var(--text-small);
}

.theme-cart-summary__value {
  font-family: var(--font-heading);
  font-size: var(--heading-sm);
}

.theme-cart-summary__row--total .theme-cart-summary__label {
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-summary__row--total .theme-cart-summary__value {
  font-size: var(--heading-md);
}

.theme-cart-summary__row--discounts .theme-cart-summary__label,
.theme-cart-summary__row--discounts .theme-cart-summary__value {
  color: rgb(var(--color-price-sale-rgb, var(--color-text-body-rgb)));
}

.theme-cart-discounts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.theme-cart-discount {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: var(--text-small);
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-drawer__tax-text,
.theme-cart-page__tax-text {
  color: rgb(var(--color-text-muted-rgb));
  font-size: var(--text-small);
}

.theme-cart-empty {
  margin: auto;
  text-align: center;
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
}

.theme-cart-empty__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2rem);
  line-height: 1.1;
}

.theme-cart-empty__text {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.theme-cart-note {
  display: grid;
  gap: 0.5rem;
}

.theme-cart-note .field {
  gap: 0.4rem;
}

.theme-cart-note .field__label {
  font-size: var(--text-small);
}

.theme-cart-note .field__input {
  min-height: 4.2rem;
}

.theme-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.95rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.theme-cart-items--page .theme-cart-item {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.4rem 0;
}

.theme-cart-items--page .theme-cart-item:first-child {
  padding-top: 0;
}

.theme-cart-items--page .theme-cart-item:last-child {
  border-bottom: 0;
}

.theme-cart-items--page .theme-cart-item__price {
  font-family: var(--font-heading);
  font-size: var(--heading-sm);
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-item.is-updating {
  opacity: 0.55;
  pointer-events: none;
  cursor: progress;
}

.theme-cart-item.is-updating .theme-cart-item__remove,
.theme-cart-item.is-updating .theme-cart-qty__button,
.theme-cart-item.is-updating .theme-cart-qty__input {
  cursor: progress;
}

.theme-cart-item .theme-cart-qty__button:disabled,
.theme-cart-item .theme-cart-qty__input:disabled,
.theme-cart-item__remove:disabled {
  opacity: 0.7;
  cursor: progress;
}

.theme-cart-item__media {
  background: rgb(var(--color-bg-secondary-rgb) / 0.5);
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.theme-cart-item__media img {
  width: 100%;
  height: 100%;
  border-radius: max(1px, calc(var(--radius-component) * 0.5));
  object-fit: cover;
}

.theme-cart-item__content {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
}

.theme-cart-item__top,
.theme-cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.theme-cart-item__title {
  text-decoration: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  line-height: 1.35;
  min-width: 0;
}

.theme-cart-item__meta {
  color: rgb(var(--color-text-muted-rgb));
  font-size: var(--text-small);
}

.theme-cart-item__price {
  display: flex;
  align-items: center;
  gap: 0.425rem;
  font-size: var(--text-small);
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-item__price-compare {
  color: rgb(var(--color-text-muted-rgb));
  text-decoration: line-through;
}

.theme-cart-item__price-current {
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-item__remove {
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  cursor: pointer;
  padding: 0;
  font-size: var(--text-small);
  line-height: 1;
  text-decoration: none;
}

.theme-cart-item__meta-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.theme-cart-item__discounts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.theme-cart-item__discount {
  color: rgb(var(--color-price-sale-rgb, var(--color-text-muted-rgb)));
  font-size: var(--text-small);
}

.theme-cart-qty__button,
.theme-cart-qty__input {
  min-width: 0;
}

.quantity-selector__btn:hover, .theme-cart-qty__button:hover {
  background: rgb(var(--color-bg-secondary-rgb) / 0.6);
}

.theme-cart-items--drawer .theme-cart-item {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.9rem 0;
}

.theme-cart-items--drawer .theme-cart-item__media {
  aspect-ratio: 55 / 65;
}

.theme-cart-items--drawer .theme-cart-item__title {
  font-size: var(--text-small);
}

.theme-cart-items--drawer .theme-cart-item__meta {
  font-size: calc(var(--text-xs) * 0.9);
}

.theme-cart-items--drawer .theme-cart-item__price,
.theme-cart-items--drawer .theme-cart-item__remove {
  font-size: var(--text-xs);
}

@media (max-width: 799px) {
  .theme-cart-items--page .theme-cart-item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem 0;
  }
}

.theme-cart-page {
  display: grid;
  gap: 2rem;
}

.theme-cart-page__header {
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
  padding-bottom: 0.85rem;
}

.theme-cart-page__title {
  font-family: var(--font-heading);
  font-size: var(--heading-lg);
}

.theme-cart-page__summary {
  border: 1px solid rgb(var(--color-border-rgb) / 0.35);
  border-radius: var(--radius-component, 2px);
  padding: 1.5rem;
  display: grid;
  gap: 1.1rem;
  background: rgb(var(--color-bg-secondary-rgb) / 0.24);
}

@media (min-width: 1000px) {
  .theme-cart-page__summary {
    position: sticky;
    top: calc(var(--theme-sticky-header-offset, 0px) + var(--space-4));
  }
}

.theme-cart-page__subtotal {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.theme-cart-page__subtotal-label,
.theme-cart-page__subtotal-value {
  font-family: var(--font-heading);
  font-size: var(--heading-sm);
}

.theme-cart-drawer__footer .btn,
.theme-cart-page__summary .btn {
  min-height: 2.5rem;
}

/* ---------------------------------------------
 * Cart page (premium refresh)
 * --------------------------------------------- */

.section-main-cart.color-scheme {
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-page {
  display: grid;
  gap: clamp(1.8rem, 3.8vw, 3rem);
  padding-block: clamp(1.8rem, 3.8vw, 3.6rem);
}

.theme-cart-page__hero {
  display: grid;
  gap: var(--space-2);
}

.theme-cart-page__title-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: max-content;
}

.theme-cart-page__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page__count {
  margin: 0;
  font-size: var(--text-small);
  letter-spacing: 0.05em;
  color: rgb(var(--color-text-muted-rgb));
  text-transform: uppercase;
}

.theme-cart-page__form {
  margin: 0;
}

.theme-cart-page__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .theme-cart-page__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }
}

.theme-cart-page__items-column {
  min-width: 0;
}

.theme-cart-page__items-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.55);
  padding-bottom: var(--space-2);
}

.theme-cart-page__items-header-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page__items {
  margin-top: 0;
}

.theme-cart-page .theme-cart-items--page .theme-cart-item {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: clamp(1rem, 1.2vw, 1.4rem);
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
}

.theme-cart-page .theme-cart-items--page .theme-cart-item:first-child {
  padding-top: var(--space-5);
}

.theme-cart-page .theme-cart-items--page .theme-cart-item:last-child {
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
}

.theme-cart-page .theme-cart-item__media {
  aspect-ratio: 4 / 5;
  background: rgb(var(--color-bg-secondary-rgb) / 0.65);
}

.theme-cart-page .theme-cart-item__media img {
  border-radius: 0;
}

.theme-cart-page .theme-cart-item__content {
  gap: var(--space-2);
}

.theme-cart-page .theme-cart-item__top {
  align-items: flex-start;
  gap: var(--space-3);
}

.theme-cart-page .theme-cart-item__title-group {
  min-width: 0;
  flex: 1 1 auto;
}

.theme-cart-page .theme-cart-item__vendor {
  margin: 0 0 0.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page .theme-cart-item__title {
  display: inline-block;
  margin: 0;
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.25;
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page .theme-cart-item__options {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.24rem 0.35rem;
  font-size: var(--text-small);
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page .theme-cart-item__option-label {
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-page .theme-cart-item__option-separator {
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page .theme-cart-item__meta {
  margin-top: 0.26rem;
}

.theme-cart-page .theme-cart-item__line-pricing {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  text-align: right;
  white-space: nowrap;
}

.theme-cart-page .theme-cart-item__line-total {
  margin: 0;
}

.theme-cart-page .theme-cart-item__line-each {
  margin: 0;
  font-size: var(--text-xs);
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page .theme-cart-item__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.theme-cart-page .theme-cart-item__remove {
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.theme-cart-page .theme-cart-item .theme-cart-qty {
  --qty-button-size: 40px;
  --qty-input-width: 36px;
  --qty-height: 44px;
  border-radius: 0;
}

.theme-cart-page .theme-cart-item .theme-cart-qty__button {
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-page .theme-cart-item .theme-cart-qty__input {
  font-size: var(--text-small);
}

.theme-cart-page .theme-cart-item__discounts {
  margin-top: 0.2rem;
}

.theme-cart-page__notes {
  margin-top: clamp(1.1rem, 2vw, 1.8rem);
  padding-top: clamp(0.9rem, 1.4vw, 1.2rem);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.28);
}

.theme-cart-page__notes-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page__notes-hint {
  margin: 0 0 var(--space-3);
  max-width: 58ch;
  font-size: var(--text-small);
  color: rgb(var(--color-text-muted-rgb));
}

.theme-cart-page__notes-input {
  width: 100%;
  min-height: 7rem;
  border: 1px solid rgb(var(--color-border-rgb) / 0.55);
  border-radius: 0;
  padding: var(--space-4);
  background: transparent;
  color: rgb(var(--color-text-body-rgb));
  font: inherit;
  resize: vertical;
}

.theme-cart-page__notes-input:focus-visible {
  box-shadow: var(--focus-ring);
}

.theme-cart-page__utilities {
  margin-top: var(--space-6);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.28);
  padding-top: var(--space-4);
}

.theme-cart-page__continue-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgb(var(--color-text-muted-rgb));
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.theme-cart-page__summary {
  border: 1px solid rgb(var(--color-border-rgb) / 0.45);
  border-radius: 0;
  background: rgb(var(--color-bg-main-rgb));
  padding: 0;
}

.theme-cart-page__summary-inner {
  padding: clamp(1rem, 2vw, 1.7rem);
  display: grid;
  gap: var(--space-4);
}

.theme-cart-page__summary-title {
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.35);
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page__summary-rows {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.theme-cart-page__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-small);
}

.theme-cart-page__summary-row dt {
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-page__summary-row dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-heading);
  color: rgb(var(--color-text-heading-rgb));
  font-size: 1rem;
}

.theme-cart-page__summary-row--muted dt,
.theme-cart-page__summary-row--muted dd {
  color: rgb(var(--color-text-muted-rgb));
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.theme-cart-page__summary-row--discount dt,
.theme-cart-page__summary-row--discount dd {
  color: rgb(var(--color-price-sale-rgb, var(--color-text-body-rgb)));
}

.theme-cart-page__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.55);
}

.theme-cart-page__total-label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page__total-value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: rgb(var(--color-text-heading-rgb));
}

.theme-cart-page__tax-text {
  margin: 0;
}

.theme-cart-page__checkout-btn {
  margin-top: var(--space-1);
}

.theme-cart-page__accelerated-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: rgb(var(--color-text-muted-rgb));
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.theme-cart-page__accelerated-divider::before,
.theme-cart-page__accelerated-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(var(--color-border-rgb) / 0.35);
}

.theme-cart-page__accelerated-buttons {
  margin-top: calc(var(--space-1) * -1);
}

.theme-cart-page__trust {
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.3);
  display: grid;
  gap: var(--space-3);
}

.theme-cart-page__trust-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: rgb(var(--color-text-body-rgb));
}

.theme-cart-page__payment-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.theme-cart-page__payment-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 1.6rem;
  border: 1px solid rgb(var(--color-border-rgb) / 0.45);
  border-radius: 2px;
  background: rgb(var(--color-bg-main-rgb));
  padding: 0.15rem 0.25rem;
}

.theme-cart-page__payment-type svg {
  display: block;
  height: 1rem;
  width: auto;
}

.theme-cart-empty--page {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.theme-cart-empty--page .theme-cart-empty__eyebrow {
  margin: 0;
}

.theme-cart-empty--page .theme-cart-empty__text {
  max-width: 46ch;
  margin-inline: auto;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-body);
}

@media (max-width: 999px) {
  .theme-cart-page__summary {
    order: -1;
  }
}

@media (max-width: 699px) {
  .theme-cart-page {
    gap: var(--space-6);
    padding-block: var(--space-6) var(--space-8);
  }

  .theme-cart-page__title {
    font-size: clamp(1.9rem, 10vw, 2.4rem);
  }

  .theme-cart-page .theme-cart-items--page .theme-cart-item {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .theme-cart-page .theme-cart-item__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .theme-cart-page .theme-cart-item__line-pricing {
    justify-items: start;
    text-align: left;
  }

  .theme-cart-page__notes-input {
    min-height: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .theme-cart-drawer,
  .theme-cart-drawer__overlay,
  .theme-cart-drawer__shell,
  .theme-cart-item,
  .theme-cart-drawer .motion-overlay,
  .theme-cart-drawer .motion-shell {
    transition: none !important;
  }

  /* Snap closed immediately when reduced motion is preferred — spring also snaps in JS */
  .theme-cart-drawer:not(.is-open).is-closing {
    visibility: hidden;
  }
}

/* ---------------------------------------------
 * Footer section (footer.liquid)
 * --------------------------------------------- */

.footer {
  --footer-bg: rgb(var(--color-bg-main-rgb));
  --footer-fg: rgb(var(--color-text-body-rgb));
  --footer-link: rgb(var(--color-link-rgb));
  --footer-border: rgb(var(--color-border-rgb, var(--color-text-body-rgb)) / 0.35);

  display: block;
  width: 100%;
  margin-top: 0;
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: clamp(0.875rem, calc(var(--text-body) * 0.94), 1rem);
}

.footer__main-wrap,
.footer__bottom-wrap {
  width: 100%;
}

.footer :where(p, li, summary, label, button, input) {
  color: inherit;
}

.footer a {
  color: var(--footer-link);
}

.footer__edge-border,
.footer__middle-border {
  height: var(--border-width);
  background: var(--footer-border);
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22%);
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 3.125rem);
  row-gap: var(--space-8);
  padding-block: clamp(2.5rem, 4.2vw, 3.75rem);
}

.footer__column {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.footer__column--text {
  max-width: 100%;
}

.footer__column--menu {
  min-width: 0;
  max-width: 100%;
}

.footer__column--newsletter {
  max-width: 100%;
}

.footer__menus {
  display: grid;
  grid-template-columns: repeat(var(--footer-menu-columns, 4), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.875rem);
}

.footer__main--has-text.footer__main--has-newsletter {
  grid-template-columns: minmax(0, 23%) minmax(0, 1fr) minmax(0, 22%);
  column-gap: clamp(1.25rem, 2.2vw, 1.875rem);
}

.footer__main--has-text.footer__main--has-newsletter .footer__column--newsletter {
  padding-inline-start: 20px;
}

.footer__main--no-newsletter {
  grid-template-columns: minmax(0, 23%) minmax(0, 1fr);
  column-gap: 50px;
}

.footer__main--no-newsletter .footer__menus {
  grid-template-columns: repeat(var(--footer-menu-columns, 4), minmax(0, 1fr));
}

.footer__main--menu-only {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.footer__main--menu-only .footer__menus {
  grid-template-columns: repeat(var(--footer-menu-columns, 4), minmax(0, 1fr));
}

.footer__main:not(.footer__main--has-text).footer__main--has-newsletter {
  grid-template-columns: minmax(0, 1fr) minmax(0, 22%);
  column-gap: 50px;
}

.footer__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-h5);
  line-height: 1.4;
  letter-spacing: var(--heading-letter-spacing);
  color: rgb(var(--color-text-heading-rgb));
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.footer__richtext {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 52ch;
  font-size: calc(var(--font-size-base) * .9);
  line-height: var(--body-line-height);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.footer__richtext :where(p, ul, ol) {
  margin: 0;
}

.footer__menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3125rem;
}

.footer__menu-desktop {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.footer__menu-collapsible {
  display: none;
}

.footer__menu-collapsible.collapsible-row {
  border-bottom-color: var(--footer-border);
}

.footer__menu-collapsible .collapsible-row__summary {
  padding-block: var(--space-4);
}

.footer__menu-collapsible .collapsible-row__heading {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-h5);
  line-height: 1.4;
  letter-spacing: var(--heading-letter-spacing);
  color: rgb(var(--color-text-muted-rgb));
}

.footer__menu-collapsible .collapsible-row__toggle {
  color: rgb(var(--color-text-muted-rgb));
}

.footer__menu-collapsible .collapsible-row__content {
  padding-block-end: var(--space-4);
}

.footer__menu-link {
  text-decoration: none;
  font-size: calc(var(--font-size-base) * .9);
  line-height: 1.55;
  opacity: var(--motion-opacity-muted);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.footer__menu-list:has(> li > .footer__menu-link:focus-visible)>li>.footer__menu-link:not(:focus-visible) {
  opacity: var(--menu-hover-dim-opacity, 0.34);
}

.footer__menu-link:focus-visible,
.footer__menu-list>li:focus-within>.footer__menu-link {
  opacity: 1;
}

.footer__social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__social-list a {
  min-width: 1.5rem;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--text-small);
  text-decoration: none;
  border: 0;
}

.footer__social-link .icon {
  color: currentColor;
}

.footer__newsletter-form {
  display: grid;
  gap: var(--space-3);
}

.footer__newsletter-field {
  max-width: 100%;
}

.footer__newsletter-field.field--action .field__input {
  min-height: 2.875rem;
  border-color: var(--footer-border);
  border-radius: var(--style-border-radius-inputs, var(--radius-form));
  background: transparent;
  color: inherit;
}

.footer__newsletter-field .field__input::placeholder {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)) / 0.92);
}

.footer__newsletter-field .field__input:focus,
.footer__newsletter-field .field__input:focus-visible {
  border-color: rgb(var(--color-input-border-rgb, var(--color-foreground-rgb)));
}

.footer__newsletter-field .field__action {
  color: inherit;
}

.footer__privacy-text {
  font-size: var(--text-xs);
}

.footer__consent {
  font-size: var(--text-xs);
}

.footer__newsletter-message {
  margin: 0;
  font-size: var(--text-small);
  text-wrap: pretty;
}

.footer__newsletter-message--error {
  color: rgb(var(--color-error-rgb, 220 53 69));
}

.footer__newsletter-message[hidden] {
  display: none;
}

.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.footer__bottom-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.footer__bottom-group--legal {
  flex: 0 1 auto;
  gap: var(--space-3) var(--space-5);
  justify-self: start;
}

.footer__bottom-group--localization {
  justify-self: center;
}

.footer__bottom-group--payments {
  justify-self: end;
}

.footer__copyright {
  margin: 0;
  font-size: var(--text-small);
  text-wrap: pretty;
}

.footer__policies {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-small);
}

.footer__policies a {
  text-decoration: none;
  text-wrap: pretty;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.footer__policies>li>a:focus-visible {
  opacity: 1;
}

.footer__payments {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__payments svg {
  display: block;
}

.footer__bottom-wrap {
  --footer-bg: rgb(var(--color-bg-main-rgb));
  --footer-fg: rgb(var(--color-text-body-rgb));
  --footer-link: rgb(var(--color-link-rgb));
  --footer-border: rgb(var(--color-border-rgb, var(--color-text-body-rgb)) / 0.35);
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.footer__bottom-wrap a {
  color: var(--footer-link);
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: rgb(var(--color-link-hover-rgb, var(--color-link-rgb)));
  }

  .footer__menu-list:has(> li > .footer__menu-link:hover)>li>.footer__menu-link:not(:hover):not(:focus-visible) {
    opacity: var(--menu-hover-dim-opacity, 0.34);
  }

  .footer__menu-link:hover {
    opacity: 1;
  }

  .footer__social-list a:hover {
    opacity: 0.82;
  }

  .footer__policies:hover>li>a {
    opacity: 0.34;
  }

  .footer__policies>li>a:hover {
    opacity: 1;
  }

  .footer__bottom-wrap a:hover {
    color: rgb(var(--color-link-hover-rgb, var(--color-link-rgb)));
  }
}

@media (max-width: 999px) {
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-10);
  }

  .footer__main--has-text.footer__main--has-newsletter,
  .footer__main--no-newsletter,
  .footer__main:not(.footer__main--has-text).footer__main--has-newsletter {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .footer__main--has-text.footer__main--has-newsletter .footer__column--newsletter {
    padding-inline-start: 0;
  }

  .footer__menus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__menus--count-1 {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .footer__bottom-group {
    width: 100%;
  }

  .footer__bottom-group--legal {
    flex: 0 1 auto;
    justify-self: start;
  }

  .footer__bottom-group--localization,
  .footer__bottom-group--payments {
    justify-self: start;
  }
}

@media (max-width: 999px) {
  .footer__main {
    gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .footer__menus {
    gap: var(--space-5);
  }

  .footer__policies {
    gap: var(--space-2) var(--space-3);
  }

  .footer__payments {
    gap: var(--space-2);
  }
}

@media (max-width: 699px) {
  .footer__main {
    gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .footer__menus,
  .footer__main--menu-only .footer__menus,
  .footer__main--no-newsletter .footer__menus {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer__bottom-group {
    gap: var(--space-2);
  }

  .footer__copyright,
  .footer__policies {
    font-size: var(--text-xs);
  }

  .footer--mobile-accordion .footer__menus {
    gap: 0;
  }

  .footer--mobile-accordion .footer__column--menu {
    gap: 0;
  }

  .footer--mobile-accordion .footer__menu-desktop {
    display: none;
  }

  .footer--mobile-accordion .footer__menu-collapsible {
    display: block;
  }
}

@media (min-width: 700px) {
  .footer--mobile-accordion .footer__menu-desktop {
    display: grid !important;
  }

  .footer--mobile-accordion .footer__menu-collapsible {
    display: none !important;
  }
}

.header {
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  position: relative;
  z-index: 30;
  transition:
    transform var(--motion-duration-sticky-transform) var(--motion-ease-sticky-header),
    background-color var(--motion-duration-sticky-bg) var(--motion-ease-sticky-header),
    border-color var(--motion-duration-normal) var(--motion-ease),
    color var(--motion-duration-normal) var(--motion-ease);
  --menu-space-0: 0rem;
  --menu-space-1: 0.3rem;
  --menu-space-2: 0.55rem;
  --menu-space-3: 0.9rem;
  --menu-space-4: 1.2rem;
  --menu-space-5: 1.7rem;
  --menu-space-6: 2.25rem;
  --menu-space-7: 2.8rem;
  --mega-layer-duration: 470ms;
  --mega-layer-switch-duration: 280ms;
  --mega-panel-enter-delay: 90ms;
  --mega-content-enter-delay: 260ms;
  --mega-content-duration: 180ms;
  --header-mega-layer-height: 0px;
  --header-mega-layer-max-height: min(68vh, 40rem);
  --header-mega-layer-offset: 0px;
  --menu-hover-dim-opacity: 0.34;
  --menu-hover-cta-dim-opacity: 0.5;
}

/* Suppress all header transitions during initial page load.
   header--loading is added server-side (Liquid) and removed by JS via rAF
   after the first state sync, so the first paint is always correct with
   zero visible flash or transition artifacts. */
.header.header--loading {
  transition: none !important;
}

.header--with-border {
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.45);
}

.header--no-border {
  border-bottom: 0;
}

.shopify-section.section-header.header--sticky-always,
.shopify-section.section-header.header--sticky-scroll-up.header--sticky-active {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Keep sticky header visible above drawer backdrops while any drawer lock is active. */
html.theme-drawer-menu-lock .shopify-section.section-header,
html.theme-cart-lock .shopify-section.section-header,
html.theme-search-drawer-lock .shopify-section.section-header,
html.theme-scroll-lock-active .shopify-section.section-header {
  z-index: 3;
}

html.theme-pickup-drawer-open .shopify-section.section-header,
html.theme-pickup-drawer-open .announcement-bar {
  z-index: 0;
}

/* Collection filter drawer needs to paint above the sticky header AND the
   announcement bar (both sit at z-index: 3). Pushing these header elements
   to the back during the filter drawer's lifetime lets the drawer panel cover
   the full viewport, including its own title row. */
html.theme-collection-filter-open .shopify-section.section-header,
html.theme-collection-filter-open .announcement-bar {
  z-index: 0;
}


.shopify-section.section-header.header--sticky-always>.header,
.shopify-section.section-header.header--sticky-scroll-up.header--sticky-active>.header {
  will-change: transform;
}

.shopify-section.section-header.header--sticky-scroll-up.header--sticky-hidden>.header {
  transform: translate3d(0, calc(-100% - 2px), 0);
}


.header--overlay.header--overlay-ready {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  background: rgb(var(--color-bg-main-rgb));
}

.header--overlay.header--overlay-ready.header--overlay-active {
  --header-text-rgb: var(--header-overlay-text-rgb, var(--color-text-body-rgb));
  background: transparent;
  color: rgb(var(--header-text-rgb));
}

.header--overlay.header--overlay-ready.header--overlay-solid {
  background: rgb(var(--color-bg-main-rgb));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sticky state must always use the normal header scheme in overlay mode */
.header--overlay.header--overlay-ready.header--sticky-active,
.header--overlay.header--overlay-ready.header--sticky-active.header--overlay-active,
.header--overlay.header--overlay-ready.header--sticky-active.header--overlay-solid {
  --header-text-rgb: var(--color-text-body-rgb);
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header--overlay.header--overlay-ready.header--sticky-active.header--with-border {
  border-bottom-color: rgb(var(--color-border-rgb) / 0.45);
}

.header--overlay-blur.header--overlay-ready.header--overlay-active {
  background: rgb(10 10 12 / 0.40);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.header-mega-layer {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 45;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: height var(--mega-layer-duration) var(--motion-ease);
}

.header--overlay .header-mega-layer {
  top: 0;
}

.header--mega-layer-open .header-mega-layer {
  height: var(--header-mega-layer-height);
}

.header--mega-switching .header-mega-layer {
  transition-duration: var(--mega-layer-switch-duration);
}

.header-mega-layer__surface {
  height: 100%;
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.42);
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.42);
  background: rgb(var(--color-bg-main-rgb));
  box-shadow: 0 20px 45px rgb(var(--color-shadow-rgb) / 0.18);
}

.header--overlay .header-mega-layer__surface {
  border-top: 0;
}

.header-mega-layer__content {
  height: 100%;
  min-height: 0;
}

.header-interaction-backdrop {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 40;
  height: 100dvh;
  border: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgb(var(--motion-overlay-rgb) / 0.52);
  -webkit-backdrop-filter: blur(var(--motion-overlay-blur));
  backdrop-filter: blur(var(--motion-overlay-blur));
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    visibility 0ms linear var(--motion-duration-fast);
}

.header--mega-layer-open .header-interaction-backdrop,
.header--search-open .header-interaction-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0ms;
}

.header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(0.75rem, 2.0vw, 2.1rem);
  position: relative;
  z-index: 55;
}

.header--height-standard .header__inner {
  min-height: 3.75rem;
  --header-nav-row-height: 3.75rem;
}

.header--height-compact .header__inner {
  min-height: 3.4rem;
  --header-nav-row-height: 3.4rem;
}

.header__left,
.header__center,
.header__right {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
}

.header__left {
  gap: 1.5rem;
}

.header__left .header-nav {
  max-width: 100%;
}

.header-logo {
  display: inline-flex;
}

.header--logo-left .header__left {
  flex: 0 0 auto;
  gap: 1.5rem;
}

.header--logo-left .header__center {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.header--logo-center .header__left,
.header--logo-center .header__right {
  flex: 1 1 0;
}

.header--logo-center .header__left {
  justify-content: flex-start;
}

.header--logo-center .header__center {
  flex: 0 0 auto;
  justify-content: center;
}

.header--logo-center .header__right {
  justify-content: flex-end;
}

.header--logo-left.header--nav-center .header__left {
  flex: 1 1 0;
}

.header--logo-left.header--nav-center .header__center {
  flex: 0 1 auto;
  justify-content: center;
  max-width: 50rem;
}

.header--logo-left.header--nav-center .header__right {
  flex: 1 1 0;
  justify-content: flex-end;
}

.header-logo__link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.header-logo__image {
  display: inline-flex;
  align-items: center;
}

.header-logo__image--sticky {
  display: none;
}

.header-logo__image--overlay {
  display: none;
}

.header--sticky-active .header-logo--has-sticky-image .header-logo__image--default,
.header--sticky-active .header-logo--has-sticky-image .header-logo__text,
.header--overlay.header--overlay-ready.header--overlay-solid .header-logo--has-sticky-image .header-logo__image--default,
.header--overlay.header--overlay-ready.header--overlay-solid .header-logo--has-sticky-image .header-logo__text {
  display: none;
}

.header--sticky-active .header-logo--has-sticky-image .header-logo__image--sticky,
.header--overlay.header--overlay-ready.header--overlay-solid .header-logo--has-sticky-image .header-logo__image--sticky {
  display: inline-flex;
}

.header--overlay.header--overlay-ready.header--overlay-active .header-logo--has-overlay-image .header-logo__image--default,
.header--overlay.header--overlay-ready.header--overlay-active .header-logo--has-overlay-image .header-logo__text {
  display: none;
}

.header--overlay.header--overlay-ready.header--overlay-active .header-logo--has-overlay-image .header-logo__image--overlay {
  display: inline-flex;
}

.header-logo__text {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-sm);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
}

.header-logo__img {
  width: var(--header-logo-width);
  height: auto;
  display: block;
}

.header-nav,
.header__nav {
  min-width: 0;
  width: 100%;
  height: auto;
  display: flex;
  align-items: stretch;
}

.header-nav__list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: center;
  column-gap: clamp(0.55rem, 0.95vw, 1.4rem);
  row-gap: 0;
  white-space: normal;
  min-width: 0;
  width: 100%;
  min-height: var(--header-nav-row-height, 2.75rem);
  height: auto;
}

.header--logo-left.header--nav-center .header__center .header-nav__list {
  justify-content: center;
}

.header-nav__item,
.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
  height: auto;
  min-height: var(--header-nav-row-height, 2.75rem);
  flex: 0 0 auto;
}

.header-nav__item--has-mega,
.dropdown--mega {
  position: static;
}

.header-nav__details,
.dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
  height: auto;
  min-height: var(--header-nav-row-height, 2.75rem);
}

.header-nav__details--mega {
  position: static;
}

.header-nav__details>summary,
.dropdown>summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-self: center;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 0;
}

.header-nav__details>summary::-webkit-details-marker,
.dropdown>summary::-webkit-details-marker {
  display: none;
}

.header-nav__link,
.nav-item__link {
  display: inline-flex;
  align-self: center;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 0;
  white-space: nowrap;
  font-family: var(--font-header-menu, var(--font-body));
  font-style: var(--font-header-menu-style, var(--font-body-style));
  font-weight: var(--font-header-menu-weight, var(--font-body-weight));
  font-size: var(--header-menu-font-size, calc(var(--font-size-base) * 0.8));
  line-height: var(--header-menu-line-height, var(--body-line-height));
  letter-spacing: var(--header-menu-letter-spacing, var(--body-letter-spacing));
  text-transform: var(--header-menu-text-transform, var(--body-text-transform));
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  text-decoration: none;
  opacity: var(--motion-opacity-muted);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.header-nav__list:has(.header-nav__item > .header-nav__link:hover, .header-nav__item > .header-nav__details > .header-nav__link:hover)>.header-nav__item>.header-nav__link:not(:hover):not(:focus-visible),
.header-nav__list:has(.header-nav__item > .header-nav__link:hover, .header-nav__item > .header-nav__details > .header-nav__link:hover)>.header-nav__item>.header-nav__details>.header-nav__link:not(:hover):not(:focus-visible) {
  opacity: var(--menu-hover-dim-opacity);
}

.header-nav__link:hover,
.header-nav__link:focus-visible,
.header-nav__item:focus-within>.header-nav__details>.header-nav__link,
.header-nav__item:focus-within>.header-nav__link,
.header-nav__details[open]>.header-nav__link {
  opacity: 1;
}

.header-nav__link[aria-current="page"] {
  opacity: 1;
  border-bottom: 1px solid currentColor;
}

.dropdown__panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    visibility 0ms linear var(--motion-duration-fast);
}

.mega-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    visibility 0ms linear var(--motion-duration-fast);
}

.dropdown__panel,
.submenu__list--nested {
  min-width: clamp(16rem, 20vw, 21.5rem);
  max-width: min(32rem, calc(100vw - (var(--page-margin) * 2)));
  background: rgb(var(--color-bg-main-rgb));
}

.dropdown__panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% - 0px);
  z-index: 55;
  overflow: visible;
}

.dropdown[open]>.dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0ms;
}

.dropdown[open]>.dropdown__panel {
  transform: translateY(0);
}

.dropdown--mega[open]>.mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Opacity keeps the staggered fade-in; visibility flips immediately (0ms) so
     the panel's links enter the keyboard tab order the instant the menu opens
     on focus — otherwise a fast Tab skips the whole dropdown. */
  transition-delay: var(--mega-panel-enter-delay), 0ms;
}

.submenu__list {
  display: grid;
  gap: var(--menu-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown__panel>.dropdown__inner>.submenu__list {
  max-height: none;
  overflow: visible;
  padding-inline-end: 0;
}

.submenu__item {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: start;
}

.submenu__item--has-children {
  position: relative;
}

.submenu__item--has-children::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 100%;
  width: var(--menu-space-2);
}

.submenu__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight:  var(--font-body-weight);
  font-size:  calc(var(--font-size-base) * 0.9);
  line-height:  var(--body-line-height);
  letter-spacing:  var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: rgb( var(--color-text-body-rgb));
  text-decoration: none;
  opacity: var(--motion-opacity-muted);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.header-nav__dropdown-link.submenu__link, .header-nav__submenu-link.submenu__link {
  font-family: var(--font-header-menu, var(--font-body));
  font-style: var(--font-header-menu-style, var(--font-body-style));
  font-weight: var(--font-header-menu-weight, var(--font-body-weight));
  font-size: var(--header-menu-font-size, calc(var(--font-size-base) * 0.8));
  line-height: var(--header-menu-line-height, var(--body-line-height));
  letter-spacing: var(--header-menu-letter-spacing, var(--body-letter-spacing));
  text-transform: var(--header-menu-text-transform, var(--body-text-transform));
}

.submenu__list:has(> .submenu__item > .submenu__link:hover)>.submenu__item>.submenu__link:not(:hover):not(:focus-visible),
.submenu__list:has(> .submenu__item > .submenu__link:focus-visible)>.submenu__item>.submenu__link:not(:focus-visible):not(:hover),
.mega-menu__links:has(> .submenu__item > .submenu__link:hover)>.submenu__item>.submenu__link:not(:hover):not(:focus-visible) {
  opacity: var(--menu-hover-dim-opacity);
}

.mega-menu__links:has(> .submenu__item > .submenu__link:focus-visible)>.submenu__item>.submenu__link:not(:focus-visible):not(:hover) {
  opacity: var(--menu-hover-dim-opacity);
}

.submenu__link:hover,
.submenu__link:focus-visible,
.submenu__item:focus-within>.submenu__link {
  opacity: 1;
}

.submenu__item--has-children>.submenu__link {
  opacity: 0.92;
}

.submenu__item--nested {
  padding-inline-start: var(--menu-space-1);
}

.submenu__list--nested {
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0.28rem);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    visibility 0ms linear var(--motion-duration-fast);
  gap: var(--menu-space-1);
}

.dropdown__panel.submenu .submenu__list {
  gap: 0;
}

.dropdown__panel.submenu .submenu__item {
  width: 100%;
}

.dropdown__panel.submenu .submenu__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  padding: var(--menu-space-2) var(--menu-space-4);
  border-radius: 0.35rem;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease);
}

.dropdown__panel.submenu .submenu__item--has-children>.submenu__link::after {
  content: '';
  inline-size: 0.32rem;
  block-size: 0.32rem;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.8;
  margin-inline-start: 0.4rem;
}

.dropdown__panel.submenu .submenu__item--has-children::after {
  inset-block: -0.5rem;
  inset-inline-start: calc(100% - 1px);
  width: clamp(0.8rem, 1.2vw, 1.15rem);
}

.dropdown__panel.submenu .submenu__list--nested {
  inset-inline-start: calc(100% - 0px);
  min-inline-size: clamp(13rem, 18vw, 16rem);
}

.dropdown__panel.submenu .submenu__item--nested {
  padding: 0 0;
}

.dropdown__panel.submenu .submenu__item--nested .submenu__link{

}

.submenu__item--has-children:focus-within>.submenu__list--nested,
.submenu__item--has-children>.submenu__link:hover+.submenu__list--nested,
.dropdown__panel.submenu .submenu__item--has-children:hover>.submenu__list--nested,
.submenu__item--has-children>.submenu__list--nested:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.mega-menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 1px);
  z-index: 50;
  border: 0;
  background: transparent;
}

.mega-menu__inner {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--menu-space-6) 0 var(--menu-space-7);
  max-height: var(--header-mega-layer-max-height);
  overflow-x: hidden;
  overflow-y: hidden;
  min-height: 0;
}

.mega-menu__inner.mega-menu__inner--scrollable {
  overflow-y: hidden;
}

.mega-menu__layout {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: start;
  gap: var(--menu-space-6);
  opacity: 0;
  transform: translateY(6px);
}

.mega-menu__layout--columns {
  grid-template-columns: 1fr;
}

.mega-menu__layout--submenu {
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
}

.mega-menu__cols {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--menu-space-1);
  align-items: stretch;
}

.mega-menu__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--menu-space-3);
}

.mega-menu__col--featured .mega-menu__card {
  height: 100%;
}

.mega-menu__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-sm);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
}

.mega-menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--menu-space-1);
}

.mega-menu__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.84);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.9);
  opacity: var(--motion-opacity-muted);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.mega-menu__cta-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  white-space: nowrap;
}

.mega-menu__cta-text {
  display: block;
  will-change: transform;
  transition: transform var(--motion-duration-slow) cubic-bezier(0.76, 0, 0.24, 1);
}

.mega-menu__card-heading {
  margin: 0;
}

.mega-menu__cta-text--alt {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 100%, 0);
}

.mega-menu__featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--menu-space-5);
}

.mega-menu__card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--menu-space-3);
}

.mega-menu__card--overlay-title {
  grid-template-rows: auto;
  gap: 0;
}

.mega-menu__card-media {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: var(--mega-menu-card-media-height, 22rem);
  aspect-ratio: auto;
  overflow: hidden;
  background: rgb(var(--color-bg-secondary-rgb));
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card, var(--radius-component, 4px)) var(--radius-card, var(--radius-component, 4px));
}

.mega-menu__promo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mega-menu__card-media:hover .mega-menu__promo-image {
  transform: scale(1.055) translateZ(0);
}

.mega-menu__card-cta {
  display: inline-flex;
  justify-self: start;
  align-self: flex-start;
  padding: 0;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.84);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.9);
  opacity: var(--motion-opacity-muted);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.mega-menu__cols:has(.mega-menu__cta:hover) .mega-menu__cta:not(:hover):not(:focus-visible),
.mega-menu__featured:has(.mega-menu__card-cta:hover) .mega-menu__card-cta:not(:hover):not(:focus-visible) {
  opacity: var(--menu-hover-cta-dim-opacity);
}

.mega-menu__cta:hover,
.mega-menu__cta:focus-visible,
.mega-menu__card-cta:hover,
.mega-menu__card-cta:focus-visible {
  opacity: 1;
}
.mega-menu__card:hover .mega-menu__cta-text--main,
.mega-menu__cta:hover .mega-menu__cta-text--main,
.mega-menu__cta:focus-visible .mega-menu__cta-text--main,
.mega-menu__card-cta:hover .mega-menu__cta-text--main,
.mega-menu__card-cta:focus-visible .mega-menu__cta-text--main {
  transform: translate3d(0, -100%, 0);
}

.mega-menu__card:hover .mega-menu__cta-text--alt,
.mega-menu__cta:hover .mega-menu__cta-text--alt,
.mega-menu__cta:focus-visible .mega-menu__cta-text--alt,
.mega-menu__card-cta:hover .mega-menu__cta-text--alt,
.mega-menu__card-cta:focus-visible .mega-menu__cta-text--alt {
  transform: translate3d(0, 0, 0);
}

.mega-menu__collection-title {
  position: absolute;
  inset-inline: var(--menu-space-2);
  inset-block-end: var(--menu-space-2);
  z-index: 1;
  margin: 0;
  color: var(--mega-menu-overlay-title-color, rgb(var(--color-text-heading-rgb)));
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  pointer-events: none;
}

.mega-menu__collection-title--blur {
  background: rgb(var(--color-bg-main-rgb) / 0.78);
  color: rgb(var(--color-text-heading-rgb));
  border: 1px solid rgb(var(--color-border-rgb) / 0.5);
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  display: inline-flex;
  width: max-content;
}

.header__right {
  flex: 0 0 auto;
  gap: 0.45rem;
  align-self: stretch;
}

.header-localization {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  opacity: 1;
  transition: 0.3s ease;
}

.header--search-results-open .header-localization { opacity: 0; }

.localization-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  padding: 0;
  min-height: 100%;
  text-decoration: none;
  cursor: pointer;
  opacity: var(--motion-opacity-muted);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease),
    border-color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease);
}

.localization-switcher:focus-visible,
.localization-switcher[aria-expanded="true"] {
  opacity: 1;
}

.localization-switcher__flag {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.localization-switcher__label {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.8);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.localization-switcher__label-primary {
  font-weight: inherit;
}

.localization-switcher__label-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.74;
}

.localization-switcher__label-secondary::before {
  content: '•';
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.52;
}

.localization-switcher__caret {
  width: 0.42rem;
  height: 0.42rem;
  margin-inline-start: 0.02rem;
  border-inline-end: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: center;
  opacity: 0.72;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease),
    opacity var(--motion-duration-fast) var(--motion-ease);
}

.localization-switcher[aria-expanded="true"] .localization-switcher__caret {
  transform: rotate(-135deg) translateY(1px);
  opacity: 1;
}

.header-localization__trigger {
  align-self: stretch;
}

.localization-switcher--pill.localization-switcher {
  min-height: 2.1rem;
  padding: 0.34rem 0.62rem 0.34rem 0.44rem;
  border-radius: 24px;
  background:
    linear-gradient(
      155deg,
      rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.09),
      rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.03)
    );
  opacity: 1;
}

.localization-switcher--pill.localization-switcher:focus-visible,
.localization-switcher--pill.localization-switcher[aria-expanded="true"] {
  background:
    linear-gradient(
      155deg,
      rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.13),
      rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.06)
    );
}

.localization-switcher--pill .localization-switcher__flag {
  width: 1.06rem;
  height: 1.06rem;
  box-shadow: 0 0 0 1px rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.22);
}

.localization-switcher--pill .localization-switcher__label {
  font-family: var(--font-header-menu, var(--font-body));
  font-style: var(--font-header-menu-style, var(--font-body-style));
  font-weight: var(--font-header-menu-weight, var(--font-body-weight));
  font-size: var(--header-menu-font-size, calc(var(--font-size-base) * 0.8));
  line-height: var(--header-menu-line-height, var(--body-line-height));
  letter-spacing: var(--header-menu-letter-spacing, var(--body-letter-spacing));
  text-transform: none;
}

.localization-switcher--pill .localization-switcher__label-secondary {
  font-size: 0.73em;
  letter-spacing: 0.1em;
  opacity: 0.68;
}

@media (max-width: 1340px) {
  .localization-switcher--pill .localization-switcher__label-secondary {
    display: none;
  }
}

.header-search-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: .325rem;
}

/* FINAL LOCK: Desktop search UX is approved.
   Keep this desktop pattern unchanged:
   1) inline header search field controls (.header-search-toggle/.header-search-panel)
   2) full-width open layer for predictive results (.header-search-layer/.header-search-results)
   Mobile responsiveness can evolve via search drawer rules only. */

.header-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-size: 0.69rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--motion-duration-normal, 320ms) var(--motion-ease-out, ease);
}

.header-search-toggle__label {
  display: inline-flex;
}

.header-search-toggle::after {
  content: '';
  width: 1px;
  height: 0.875rem;
  background: currentColor;
  opacity: 0.9;
  animation: header-search-caret-blink 1.6s steps(2, end) infinite;
}

.header-search-toggle:focus-visible,
.header--search-open .header-search-toggle {
  opacity: 0.56;
}

.header-search-toggle:focus-visible::after,
.header--search-open .header-search-toggle::after {
  animation: none;
  opacity: 1;
}

.header-search-toggle--icon {
  font-size: 0;
  gap: 0;
  padding: 0;
  min-height: auto;
}

.header-search-toggle--icon .header-icons__icon {
  width: 24px;
  height: 24px;
}

.header-search-toggle--icon::after {
  display: none;
}

.header--search-open .header-search-toggle--icon {
  opacity: 0;
  pointer-events: none;
}

@keyframes header-search-caret-blink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0.24;
  }
}

.header-search-panel {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: 0;
  margin-inline-start: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    width var(--motion-duration-normal, 320ms) var(--motion-ease-out, ease),
    margin-inline-start var(--motion-duration-normal, 320ms) var(--motion-ease-out, ease),
    opacity var(--motion-duration-fast) var(--motion-ease);
}

.header--search-open .header-search-panel {
  width: min(17.5rem, max(13rem, calc(100vw - 51rem)));
  margin-inline-start: 0.75rem;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0ms;
  overflow: visible;
}

.header-search-layer {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 46;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -0.45rem, 0);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    visibility 0ms linear var(--motion-duration-fast);
}

.header--search-open .header-search-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0ms;
}

.header-search-layer__surface {
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.42);
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.42);
  background: rgb(var(--color-bg-main-rgb));
  box-shadow: 0 20px 45px rgb(var(--color-shadow-rgb) / 0.18);
}

.header-search-layer__inner {
  display: grid;
  gap: 0.82rem;
  padding-block: clamp(0.85rem, 1.4vw, 1.15rem);
}

.header-search-panel__form {
  width: 100%;
}

.header-search-panel__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.15rem;
  border-bottom: 1px solid rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.62);
}

.header-search-panel__input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  padding: 0 0 2px;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 0.875rem;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: rgb(var(--header-text-rgb, var(--color-text-heading-rgb)));
  caret-color: rgb(var(--color-accent-rgb, var(--header-text-rgb, var(--color-text-heading-rgb))));
}

.header-search-panel__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.header-search-panel__field-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline-start: 0.25rem;
}

.header-search-panel__close,
.header-search-panel__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  border-radius: var(--radius-xs, 4px);
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease), opacity var(--motion-duration-fast) var(--motion-ease);
}

.header-search-panel__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  cursor: pointer;
  padding: 0 0.18rem;
  min-height: 1.5rem;
  transition: color var(--motion-duration-fast) var(--motion-ease), opacity var(--motion-duration-fast) var(--motion-ease);
}

.header-search-panel__clear-label {
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
}

.header-search-panel__submit {
  color: rgb(var(--header-text-rgb, var(--color-text-heading-rgb)));
}

.header-search-panel__close {
  color: rgb(var(--color-text-muted-rgb));
}

.header-search-panel__clear:focus-visible,
.header-search-panel__close:focus-visible,
.header-search-panel__submit:focus-visible {
  outline: 2px solid rgb(var(--header-text-rgb, var(--color-text-heading-rgb)));
  outline-offset: 1px;
}

.header-search-results {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: auto;
  overscroll-behavior-y: contain;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.4rem);
  transition: opacity var(--motion-duration-fast) var(--motion-ease), transform var(--motion-duration-fast) var(--motion-ease), visibility 0ms linear var(--motion-duration-fast);
}

.header-search-results__inner {
  max-width: none;
  margin: 0;
  opacity: 1;
  transform: none;
}

.header--search-open.header--search-results-open .header-search-results {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.header-icons {
  --icon-size: 24px;
  --icon-stroke-width: 1.15;

  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgb(var(--header-text-rgb, var(--color-text-body-rgb)));
  margin-left: 0;
}

.header-icons .icon {
  color: inherit;
}

.header-icons .icon [stroke] {
  stroke-width: var(--icon-stroke-width, 1.75);
}

.header-icons__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  flex-shrink: 0;
}

.header-icons__button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: auto;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-icons__button:hover{
  color: inherit;
}

.header-icons__button--cart {
  --cart-bag-active: currentColor;
  --cart-bag-active-contrast: rgb(var(--color-bg-main-rgb));

  isolation: isolate;
  padding: 0.625rem;
  padding-inline: .325rem;
  margin-left: 0;
}

.header-icons__button--cart .header-icons__icon {
  position: relative;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.header-icons__button--cart .icon-cart__body,
.header-icons__button--cart .icon-cart__handle {
  transition: fill 0.2s ease, stroke 0.2s ease, transform 0.4s ease, opacity 0.2s ease;
  transform-origin: center;
}

.header-icons__button--cart .icon-cart__body {
  fill: none;
}

.header-icons__button--cart .icon-cart__handle {
  fill: none;
  transform: rotateX(0);
  transform-origin: 50% 35.5%;
}

.header-icons__button--cart.has-items .icon-cart__handle,
.header-icons__button--cart[data-cart-item-count]:not([data-cart-item-count='0']) .icon-cart__handle {
  stroke: var(--cart-bag-active);
}

.header-icons__button--cart.bag-animate .header-icons__icon {
  animation: cart-bag-bounce 200ms ease;
}

.header-icons__count {
  position: absolute;
  top: .1rem;
  left: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: .18rem;
  border-radius: 999px;
  background: rgb(var(--color-btn-primary-bg-rgb));
  color: rgb(var(--color-btn-primary-text-rgb));
  font-size: .62rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.header-icons__count.count-animate {
  animation: cart-count-pop 220ms ease;
}

.header-icons__count[hidden] {
  display: none;
}

.header-icons__account {
  position: relative;
  display: inline-flex;
  padding-inline: .325rem;
}

.header-icons__button--account-component {
  --shopify-account-font-heading: var(--font-heading);
  --shopify-account-font-heading-weight: var(--font-heading-weight);
  --shopify-account-font-body: var(--font-body);
  --shopify-account-font-body-weight: var(--font-body-weight);
  --shopify-account-radius-base: var(--radius-md);
  --shopify-account-radius-button: var(--radius-md);
  --shopify-account-radius-button-small: var(--radius-sm);
  --shopify-account-radius-input: var(--radius-sm);
  --shopify-account-color-background: rgb(var(--color-bg-main-rgb));
  --shopify-account-color-text: rgb(var(--color-text-body-rgb));
  --shopify-account-color-accent: rgb(var(--color-text-body-rgb));
  --shopify-account-color-accent-text: rgb(var(--color-bg-main-rgb));
  --shopify-account-dialog-position-top: var(--header-height, 0px);
  --shopify-account-avatar-size: 24px;
  color: inherit;
  line-height: normal;
}

.header-icons__button--account-component:not(:defined) {
  display: none;
}

.header-icons__button--account-component:defined + .header-icons__button--account-fallback {
  display: none;
}

.header-icons__button--account-component:not(:defined) + .header-icons__button--account-fallback {
  display: inline-flex;
}

.header-icons__button--account-component::part(signed-out-avatar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
}

.header-icons__account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

@keyframes cart-bag-bounce {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes cart-count-pop {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-icons__button--cart .icon-cart__body,
  .header-icons__button--cart .icon-cart__handle {
    transition: none !important;
  }

  .header-icons__button--cart.bag-animate .header-icons__icon {
    animation: none !important;
  }

  .header-icons__count.count-animate {
    animation: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .localization-switcher:hover {
    opacity: 1;
  }

  .localization-switcher--pill.localization-switcher:hover {
    background:
      linear-gradient(
        155deg,
        rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.13),
        rgb(var(--header-text-rgb, var(--color-text-body-rgb)) / 0.06)
      );
  }

  .header-search-toggle:hover {
    opacity: 1;
  }

  .header-search-toggle:hover::after {
    opacity: 1;
  }

  .header-search-panel__submit:hover {
    opacity: 0.8;
  }

  .header-search-panel__clear:hover,
  .header-search-panel__close:hover {
    color: rgb(var(--header-text-rgb, var(--color-text-heading-rgb)));
  }

  .header-icons__button:hover {
    color: inherit;
  }
}

.header-burger {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.header-burger__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border: 0;
  background: transparent;
  color: inherit;
  min-width: 2.3rem;
  padding: 0 0.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-burger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.header-burger__icon-svg {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.header-nav__list,
.header-burger__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {

  .header,
  .shopify-section.section-header.header--sticky-scroll-up>.header,
  .shopify-section.section-header.header--sticky-always>.header {
    transition: none !important;
  }

  .header-mega-layer,
  .header-interaction-backdrop,
  .header-nav__link,
  .header-search-toggle,
  .header-search-panel,
  .header-search-layer,
  .header-search-panel__form,
  .header-search-results,
  .header-search-results__inner,
  .header-search-panel__input,
  .header-search-panel__clear,
  .header-search-panel__close,
  .header-search-panel__submit,
  .dropdown__panel,
  .mega-menu,
  .submenu__list--nested,
  .mega-menu__layout,
  .mega-menu__cta,
  .mega-menu__card-cta,
  .mega-menu__inner,
  .mega-menu__cta-text {
    transition: none !important;
    animation: none !important;
  }

  .header-search-toggle::after {
    animation: none !important;
    opacity: 1;
  }

  .header--search-open.header--search-results-open .header-search-results {
    animation: none !important;
  }

  .header-nav__details--mega[open]>.mega-menu .mega-menu__layout {
    opacity: 1;
    transform: translateY(0);
  }

  .mega-menu__cta-text--alt {
    position: static;
    transform: none;
    display: none;
  }
}

@media (max-width: 1199px) {
  .mega-menu__layout--submenu {
    grid-template-columns: 1fr;
    gap: var(--menu-space-5);
  }

  .mega-menu__cols {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--menu-space-4);
  }

  .mega-menu__featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--menu-space-4);
  }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .header__inner {
    gap: 1rem;
  }

  .header__left {
    gap: 1rem;
  }

  .header--logo-left .header__left {
    gap: 1rem;
  }

  .header-nav__list {
    column-gap: 0.85rem;
  }

  .header__right {
    gap: 0.55rem;
  }

  .header-localization {
    margin-right: 0.25rem;
  }

}

@media (max-width: 999px) {
  .header-burger--mobile-disabled {
    display: none;
  }

  .header-localization {
    display: none;
  }

  .header-search-toggle,
  .header-search-panel,
  .header-search-layer,
  .header-search-results,
  .header-interaction-backdrop {
    display: none;
  }

  .header__inner {
    gap: 0.6rem;
  }

  .header-nav {
    display: none;
  }

  .header-burger__toggle--mobile {
    display: inline-flex;
  }

  .header-icons {
    margin-left: 0;
    gap: 0;
  }

  .header-icons__button {
    min-height: 2.75rem;
    padding: 0 0.45rem;
    margin-left: 0;
  }
  .header-icons__button .header-icons__count {
    left: 25px;
  }
}

@media (min-width: 1000px) {
  .header-burger--desktop-disabled {
    display: none;
  }

  .header-burger__toggle--desktop {
    display: inline-flex;
  }
}

/**
 * Header drawer menu (desktop + mobile)
 * Single shared component for SHOP / EXPLORE tabbed navigation.
 */

/* html.theme-drawer-menu-lock, removex
body.theme-drawer-menu-lock {
  overflow: hidden;
}

html.theme-header-interaction-lock,
body.theme-header-interaction-lock {
  overflow: hidden;
} */

.drawer-menu {
  --drawer-menu-width: 400px;

  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: none;
}

.drawer-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer-menu.is-opening {
  visibility: visible;
  pointer-events: none;
}

.drawer-menu.is-closing {
  visibility: visible;
  pointer-events: none;
}

.drawer-menu__overlay {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.drawer-menu__panel {
  --drawer-panel-margin: var(--space-3);
  --motion-shell-translate: -100%;

  position: absolute;
  z-index: 80;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(calc(100vw - (var(--drawer-panel-margin) * 2)), var(--drawer-menu-width));
  max-width: calc(100vw - (var(--drawer-panel-margin) * 2));
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.42);
  overflow: hidden;
  transform: translateX(var(--motion-shell-translate));
  transition: transform var(--motion-duration-normal) linear;
  will-change: transform;
  margin: var(--drawer-panel-margin);
  border-radius: .6rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Drawer motion refinements
   Content renders normally inside drawers — the panel slide carries the
   motion. No opacity / translateY animation on the inner content.
   ───────────────────────────────────────────────────────────────────────── */
.theme-cart-drawer .motion-content,
.drawer-menu .motion-content {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0ms;
}

[dir="rtl"] .drawer-menu__panel {
  --motion-shell-translate: 100%;

  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-start: 1px solid rgb(var(--color-border-rgb) / 0.42);
  border-inline-end: 0;
}

.drawer-menu__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.drawer-menu.is-open .drawer-menu__panel {
  transform: translateX(0);
}

.drawer-menu.is-opening .drawer-menu__panel {
  transform: translateX(var(--motion-shell-translate));
}

.drawer-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-menu__brand {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: .95rem 1.25rem .95rem;
  /* Line the logo up with the left edge of the tab and menu-item pills
     below it (their container inset is .98rem). */
  padding-inline-start: .98rem;
  min-height: 2rem;
  min-width: 0;
}

/* Match the header logo: sized by the header's Logo width setting, shrinking
   only when the drawer is narrower than the logo. */
.drawer-menu__brand-image {
  display: block;
  width: var(--drawer-logo-width, auto);
  max-width: 100%;
  height: auto;
}

.drawer-menu__brand-text {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-sm);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
}

.drawer-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 1.25rem 0;
}

.drawer-menu__close-icon {
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.drawer-menu__close:hover .drawer-menu__close-icon{
  transform: rotate(90deg);
}

.drawer-menu__tabs {
  display: flex;
  padding-inline: .98rem;
  margin-block: 0.4rem;
}

.theme-tablist--with-indicator {
  position: relative;
}

.theme-tablist--with-indicator .drawer-menu__tab::after {
  content: none;
}

.theme-tablist--with-indicator .localization-drawer__tab::after {
  content: none;
}

.theme-tab-indicator {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0px;
  width: 0;
  height: 96%;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-text-body-rgb));
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  transition: transform var(--motion-duration-slow) var(--motion-ease), width var(--motion-duration-slow) var(--motion-ease), opacity var(--motion-duration-slow) var(--motion-ease);
  will-change: transform, width, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .theme-tab-indicator {
    transition: none;
  }
}

.drawer-menu__tab {
  position: relative;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  padding-block: .45rem;
  padding-inline: .98rem;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.95);
  letter-spacing: var(--body-letter-spacing);
  line-height: initial;
  cursor: pointer;
}

.drawer-menu__tab::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.1rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

[dir="rtl"] .drawer-menu__tab::after {
  transform-origin: right center;
}

.drawer-menu__tab.is-active {
  color: rgb(var(--color-text-body-rgb));
}

.drawer-menu__tab.is-active::after {
  transform: scaleX(1);
}

.drawer-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: block;
}

.drawer-menu__tab-panel {
  position: relative;
  isolation: isolate;
  height: 100%;
  /* padding: 1rem 1.25rem 1.15rem; */
  overflow-y: auto;
  overflow-x: hidden;
}

.drawer-menu__tab-panel[hidden] {
  display: none;
}

.drawer-menu__tab-panel.is-active {
  animation: drawerMenuPanelIn var(--motion-duration-normal) var(--motion-ease);
}

@keyframes drawerMenuPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.is-tabs-enhanced .drawer-menu__tab-panel.is-active {
  animation: none;
}

.is-tabs-enhanced .drawer-menu__tab-panel.is-tab-entering,
.is-tabs-enhanced .drawer-menu__tab-panel.is-tab-enter-active {
  transform-origin: center top;
  will-change: opacity, transform, filter;
}

.is-tabs-enhanced .drawer-menu__tab-panel.is-tab-entering {
  opacity: 0;
  transform: scale(0.985);
  filter: blur(2px);
}

.is-tabs-enhanced .drawer-menu__tab-panel.is-tab-enter-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .is-tabs-enhanced .drawer-menu__tab-panel.is-tab-entering,
  .is-tabs-enhanced .drawer-menu__tab-panel.is-tab-enter-active {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.drawer-menu__nav {
  display: block;
}

.drawer-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.drawer-menu__list--level-1 {
  gap: .45rem;
  margin: .58rem 0;
  padding: 0 0.98rem;
}

.drawer-menu__tab-panel.is-list-reveal-active .drawer-menu__list--level-1 > .drawer-menu__item {
  animation: drawerMenuItemIn 420ms var(--motion-ease) backwards;
  animation-delay: calc(var(--drawer-menu-item-stagger-index, 0) * 36ms);
}

@keyframes drawerMenuItemIn {
  from {
    opacity: 0;
    transform: translateX(var(--drawer-menu-item-enter-x, -14px));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

[dir="rtl"] .drawer-menu__tab-panel.is-list-reveal-active .drawer-menu__list--level-1 > .drawer-menu__item {
  --drawer-menu-item-enter-x: 14px;
}

.drawer-menu__list--level-2,
.drawer-menu__list--level-3 {
  gap: .45rem;
}

.drawer-menu__item {
  min-width: 0;
}

.drawer-menu__item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgb(var(--color-border-rgb) / .24);
  border-radius: 999px;
}

.drawer-menu__item-row:hover {
  border-color: rgb(var(--color-border-rgb) / .95);
}

.drawer-menu__link {
  display: inline-block;
  text-decoration: none;
  color: rgb(var(--color-text-body-rgb));
  opacity: 0.95;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease);
}

.drawer-menu__link:hover,
.drawer-menu__item:focus-within>.drawer-menu__item-row>.drawer-menu__link,
.drawer-menu__link.is-current {
  opacity: 1;
}

.drawer-menu__link--level-1 {
  padding: .68rem .98rem;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 1);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.drawer-menu__link--level-2,
.drawer-menu__link--level-3 {
  padding: .68rem .98rem;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 1);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.drawer-menu__link--level-3 {
  font-size: calc(var(--font-size-base) * 1);
}

.drawer-menu__toggle {
  width: 2.55rem;
  height: auto;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.drawer-menu__toggle-icon {
  --icon-size: 14px;
  --icon-stroke-width: 1.1;
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

.drawer-menu__toggle:hover,
.drawer-menu__toggle:focus-visible,
.drawer-menu__item.is-open>.drawer-menu__item-row>.drawer-menu__toggle {
  color: rgb(var(--color-text-body-rgb));
}

.drawer-menu__subpanel {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0 0.98rem;
  background: rgb(var(--color-bg-main-rgb));
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease),
    opacity var(--motion-duration-fast) var(--motion-ease),
    visibility var(--motion-duration-fast) var(--motion-ease);
}

[dir="rtl"] .drawer-menu__subpanel {
  transform: translateX(-100%);
}

.drawer-menu__subpanel[hidden] {
  display: none;
}

.drawer-menu__subpanel.is-active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer-menu__subpanel-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgb(var(--color-bg-main-rgb));
}

.drawer-menu__back {
  width: 100%;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-body-rgb));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .55rem;
  text-align: left;
  cursor: pointer;
}

[dir="rtl"] .drawer-menu__back {
  text-align: right;
}

.drawer-menu__back-icon {
  --icon-size: 14px;
  --icon-stroke-width: 1.1;
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

.drawer-menu__back-label {
  display: block;
  color: rgb(var(--color-text-muted-rgb));
  font-size: calc(var(--font-size-base) * 0.72);
  letter-spacing: var(--body-letter-spacing);
  text-transform: uppercase;
}

.drawer-menu__back-current {
  display: block;
  color: rgb(var(--color-text-body-rgb));
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.95);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

.drawer-menu__subpanel .drawer-menu__list {
  padding-top: 0.35rem;
}

.drawer-menu__footer {
  margin-top: auto;
  padding: .98rem;
  border-top: 1px solid rgb(var(--color-border-rgb) / .35);
  display: grid;
  gap: .88rem;
}

.drawer-menu__account-link {
  --drawer-account-bg: var(--color-btn-primary-bg, rgb(var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))));
  --drawer-account-bg-hover: var(--color-btn-primary-bg-hover, rgb(var(--color-btn-primary-bg-hover-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --drawer-account-fg: var(--color-btn-primary-text, rgb(var(--color-btn-primary-text-rgb, var(--color-background-rgb))));
  --drawer-account-fg-hover: var(--color-btn-primary-text-hover, rgb(var(--color-btn-primary-text-hover-rgb, var(--color-btn-primary-text-rgb, var(--color-background-rgb)))));
  --drawer-account-border: var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))));
  --drawer-account-border-hover: var(--drawer-account-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 3.235rem;
  text-decoration: none;
  border-radius: max(1px, calc(var(--radius-form, var(--style-border-radius-inputs, 5px)) * .9));
  border: var(--border-width) solid var(--drawer-account-border);
  background: var(--drawer-account-bg);
  color: var(--drawer-account-fg);
  overflow: hidden;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--motion-duration-fast) var(--motion-ease);
}

.drawer-menu__account-link:hover {
  background: var(--drawer-account-bg-hover);
  color: var(--drawer-account-fg-hover);
  border-color: var(--drawer-account-border-hover);
}

.drawer-menu__account-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.drawer-menu__account-icon {
  --icon-size: 24px;
  --icon-stroke-width: 1.15;
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  flex-shrink: 0;
}

.drawer-menu__account-link-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  font-family: var(--font-button, var(--font-heading));
  font-style: var(--font-button-style, var(--font-heading-style));
  font-weight: var(--font-button-weight, var(--font-heading-weight));
  font-size: var(--button-font-size, var(--text-xs));
  line-height: var(--button-line-height, var(--heading-line-height));
  letter-spacing: var(--button-letter-spacing, var(--heading-letter-spacing));
  text-transform: var(--button-text-transform, var(--heading-text-transform));
}

@media (max-width: 999px) {

  .drawer-menu__tab--desktop-only,
  .drawer-menu__tab-panel--desktop-only {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .drawer-menu,
  .drawer-menu__overlay,
  .drawer-menu__panel,
  .drawer-menu__content,
  .drawer-menu__tab::after,
  .drawer-menu__toggle,
  .drawer-menu__subpanel,
  .drawer-menu__tab-panel.is-active,
  .drawer-menu__tab-panel.is-list-reveal-active .drawer-menu__list--level-1 > .drawer-menu__item,
  .drawer-menu .motion-overlay,
  .drawer-menu .motion-shell {
    transition: none !important;
    animation: none !important;
  }

  /* Snap closed immediately when reduced motion is preferred */
  .drawer-menu:not(.is-open).is-closing {
    visibility: hidden;
  }
}

/**
 * Localization drawer (shared by header, announcement bar, footer)
 */

.localization-drawer {
  --localization-drawer-width: 400px;
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}

.localization-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.localization-drawer.is-opening {
  visibility: visible;
  pointer-events: none;
}

.localization-drawer.is-closing {
  visibility: visible;
  pointer-events: none;
}

.localization-drawer__overlay {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.localization-drawer__panel {
  --drawer-panel-margin: var(--space-3);
  --motion-shell-translate: 100%;
  position: absolute;
  z-index: 80;
  width: min(calc(100vw - (var(--drawer-panel-margin) * 2)), var(--localization-drawer-width));
  max-width: calc(100vw - (var(--drawer-panel-margin) * 2));
  inset-block: 0;
  inset-inline-end: 0;
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  border-inline-start: 1px solid rgb(var(--color-border-rgb) / 0.42);
  overflow: hidden;
  transform: translateX(var(--motion-shell-translate));
  transition: transform var(--motion-duration-normal) linear;
  margin: var(--drawer-panel-margin);
  border-radius: 0.6rem;
}

[dir="rtl"] .localization-drawer__panel,
.localization-drawer[dir="rtl"] .localization-drawer__panel {
  --motion-shell-translate: -100%;
  inset-inline-end: auto;
  inset-inline-start: 0;
  border-inline-start: 0;
  border-inline-end: 1px solid rgb(var(--color-border-rgb) / 0.42);
}

.localization-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.localization-drawer.is-open .localization-drawer__panel {
  transform: translateX(0);
}

.localization-drawer.is-open .motion-overlay {
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--motion-overlay-blur));
  backdrop-filter: blur(var(--motion-overlay-blur));
}

.localization-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.localization-drawer__title {
  margin: 0;
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: var(--heading-sm);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  color: rgb(var(--color-text-heading-rgb));
  padding: 0.95rem 1.25rem 0.95rem;
}

.localization-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 1.25rem;
}

.localization-drawer__close-icon {
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.localization-drawer__close:hover .localization-drawer__close-icon{
  transform: rotate(90deg);
}

.localization-drawer__tabs {
  display: flex;
  padding-inline: .98rem;
  margin-block: 0.4rem;
}

.localization-drawer__tab {
  position: relative;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-muted-rgb));
  padding: 0.45rem 0.98rem;
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * .95);
  line-height: initial;
  letter-spacing: var(--body-letter-spacing);
  cursor: pointer;
}

.localization-drawer__tab::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.1rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

[dir="rtl"] .localization-drawer__tab::after {
  transform-origin: right center;
}

.localization-drawer__tab.is-active {
  color: rgb(var(--color-text-body-rgb));
}

.localization-drawer__tab.is-active::after {
  transform: scaleX(1);
}

.localization-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.localization-drawer__tab-panel {
  height: 100%;
  padding: 0.2rem 0 1.15rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.localization-drawer__tab-panel[hidden] {
  display: none;
}

.localization-drawer__tab-panel.is-active {
  animation: drawerMenuPanelIn var(--motion-duration-fast) var(--motion-ease);
}

.is-tabs-enhanced .localization-drawer__tab-panel.is-active {
  animation: none;
}

.is-tabs-enhanced .localization-drawer__tab-panel.is-tab-entering,
.is-tabs-enhanced .localization-drawer__tab-panel.is-tab-enter-active {
  transform-origin: center top;
  will-change: opacity, transform, filter;
}

.is-tabs-enhanced .localization-drawer__tab-panel.is-tab-entering {
  opacity: 0;
  transform: scale(0.985);
  filter: blur(2px);
}

.is-tabs-enhanced .localization-drawer__tab-panel.is-tab-enter-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--tab-panel-transition-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .is-tabs-enhanced .localization-drawer__tab-panel.is-tab-entering,
  .is-tabs-enhanced .localization-drawer__tab-panel.is-tab-enter-active {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.localization-drawer__form {
  margin: 0;
}

.localization-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
  padding: 0 .98rem;  
}

.localization-drawer__tab-panel.is-list-reveal-active .localization-drawer__list > .localization-drawer__item {
  animation: localizationDrawerItemIn 400ms var(--motion-ease) backwards;
  animation-delay: calc(var(--localization-item-stagger-index, 0) * 32ms);
}

@keyframes localizationDrawerItemIn {
  from {
    opacity: 0;
    transform: translateX(var(--localization-item-enter-x, -12px));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

[dir="rtl"] .localization-drawer__tab-panel.is-list-reveal-active .localization-drawer__list > .localization-drawer__item {
  --localization-item-enter-x: 12px;
}

.localization-drawer__option {
  width: 100%;
  border: none;
  height: 2.5rem;
  border: 1px solid rgb(var(--color-border-rgb) / 0.35);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: .45rem .92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.62rem;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease);
}
.localization-drawer__option--info{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .62rem;
  text-align: left;
}

.localization-drawer__option:hover,
.localization-drawer__option:focus-visible,
.localization-drawer__option.is-selected {
  border-color: rgb(var(--color-border-rgb) / 0.62);
  background: rgb(var(--color-bg-secondary-rgb));
}

.localization-drawer__option--selected-icon{
  display: none;
}

.localization-drawer__option.is-selected .localization-drawer__option--selected-icon {
  display: block;
}

.localization-drawer__flag {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.localization-drawer--hide-flags .localization-drawer__flag {
  display: none;
}

.localization-drawer--hide-flags .localization-drawer__option {
  grid-template-columns: 1fr;
}

.localization-drawer__option-text {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.localization-drawer__option-name,
.localization-drawer__option-meta {
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: calc(var(--font-size-base) * 0.88);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.localization-drawer__option-meta {
  color: rgb(var(--color-text-muted-rgb));
  font-size: calc(var(--text-xs) * 0.9);
  padding: 0.33rem .33rem;
  border-radius: 12px;
  border-color: rgb(var(--color-border-rgb) / .62);
}

@media (prefers-reduced-motion: reduce) {

  .localization-drawer,
  .localization-drawer__overlay,
  .localization-drawer__panel,
  .localization-drawer__tab::after,
  .localization-drawer__option,
  .localization-drawer__tab-panel.is-active,
  .localization-drawer__tab-panel.is-list-reveal-active .localization-drawer__list > .localization-drawer__item,
  .localization-drawer .motion-overlay,
  .localization-drawer .motion-shell {
    transition: none !important;
    animation: none !important;
  }

  .localization-drawer:not(.is-open).is-closing {
    visibility: hidden;
  }
}

html.theme-search-drawer-lock,
body.theme-search-drawer-lock {
  overflow: hidden;
}

/**
 * Mobile Search Drawer
 * Full-width panel that slides down from the top on mobile (≤999px).
 * Shares the global motion-overlay primitive for the backdrop.
 * Trigger: .header-icons__button--search-mobile (hidden on desktop).
 */

/* ─── Mobile search trigger in header-icons ─────────────────────────────── */

.header-icons__button--search-mobile {
  display: none;
  /* shown only on mobile via responsive rule below */
}

/* ─── Search drawer wrapper ──────────────────────────────────────────────── */

.search-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.search-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.search-drawer.is-opening,
.search-drawer.is-closing {
  visibility: visible;
  pointer-events: none;
}

/* Wire the shared motion-overlay into the search drawer's open state */
.search-drawer.is-open .motion-overlay {
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--motion-overlay-blur));
  backdrop-filter: blur(var(--motion-overlay-blur));
}

/* ─── Overlay (backdrop) ─────────────────────────────────────────────────── */

.search-drawer__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: default;
}

/* ─── Panel (slides down from top) ──────────────────────────────────────── */

.search-drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  /* Cap height so internal scroll works on small/landscape devices */
  max-height: 100svh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.2);
  transform: translateY(-110%);
  transition: transform var(--motion-duration-normal, 360ms) var(--motion-ease, ease);
  will-change: transform;
  /* Respect notches/safe areas on iOS */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.search-drawer.is-open .search-drawer__panel {
  transform: translateY(0);
}

/* ─── Inner layout ───────────────────────────────────────────────────────── */

.search-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.search-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
  flex-shrink: 0;
}

.search-drawer__title {
  font-family: var(--font-heading, var(--font-body));
  font-style: var(--font-heading-style, normal);
  font-weight: var(--font-heading-weight, 600);
  font-size: var(--heading-sm, 1rem);
  line-height: var(--heading-line-height, 1.2);
  letter-spacing: var(--heading-letter-spacing, 0);
  text-transform: var(--heading-text-transform, none);
  color: rgb(var(--color-text-heading-rgb));
  margin: 0;
}

.search-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;
  padding: 0;
  border-radius: var(--radius-sm);
  opacity: var(--motion-opacity-muted, 0.6);
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.search-drawer__close:hover,
.search-drawer__close:focus-visible {
  opacity: 1;
}

.search-drawer__close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ─── Drawer content ─────────────────────────────────────────────────────── */

.search-drawer__content {
  padding: var(--space-2) var(--space-4) var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.search-drawer__note {
  margin: 0;
  color: rgb(var(--color-text-muted-rgb));
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: var(--text-small);
  line-height: var(--body-line-height);
}

/* ─── Mobile search form (real predictive search) ────────────────────────── */

/*
 * The drawer hosts a full predictive-search form on mobile. Rules are scoped
 * to the drawer (NOT shared with the desktop .header-search-panel block) so
 * desktop search remains exactly as-is.
 */

.search-drawer__form {
  flex-shrink: 0;
  padding: var(--space-2) clamp(var(--space-3), 4vw, var(--space-4)) var(--space-3);
  /* Prevent overflowing children from pushing horizontal scroll on 320px */
  min-width: 0;
}

.search-drawer__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-component, 12px);
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)) / 0.7);
  border: 1px solid rgb(var(--color-border-rgb) / 0.45);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease),
    background var(--motion-duration-fast) var(--motion-ease);
}

.search-drawer__field:focus-within {
  border-color: rgb(var(--color-text-heading-rgb) / 0.5);
  background: rgb(var(--color-bg-main-rgb));
}

.search-drawer__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: rgb(var(--color-text-heading-rgb));
  font-family: var(--font-body);
  /* Use 16px+ font-size to prevent iOS auto-zoom on focus */
  font-size: max(16px, var(--text-base, 1rem));
  line-height: 1.4;
  padding: 0.875rem 0.5rem 0.875rem 1rem;
  border-radius: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.search-drawer__input::placeholder {
  color: rgb(var(--color-text-muted-rgb) / 0.7);
}

.search-drawer__input::-webkit-search-cancel-button,
.search-drawer__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-drawer__label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgb(var(--color-text-muted-rgb) / 0.8);
  font-family: var(--font-body);
  font-size: max(16px, var(--text-base, 1rem));
  line-height: 1;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.search-drawer__input:focus ~ .search-drawer__label,
.search-drawer__input:not(:placeholder-shown) ~ .search-drawer__label {
  opacity: 0;
}

.search-drawer__field-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-right: 0.4rem;
  flex-shrink: 0;
}

.search-drawer__clear,
.search-drawer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--color-text-heading-rgb));
  cursor: pointer;
  border-radius: var(--radius-sm, 8px);
  opacity: 0.78;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    background var(--motion-duration-fast) var(--motion-ease);
}

.search-drawer__clear:hover,
.search-drawer__submit:hover,
.search-drawer__clear:focus-visible,
.search-drawer__submit:focus-visible {
  opacity: 1;
  background: rgb(var(--color-text-heading-rgb) / 0.08);
}

.search-drawer__clear[hidden] {
  display: none;
}

.search-drawer__clear-icon {
  width: 1rem;
  height: 1rem;
}

/* ─── Predictive results inside the drawer ──────────────────────────────── */

.search-drawer__results {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 clamp(var(--space-3), 4vw, var(--space-4))
           calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

.search-drawer__results-inner {
  display: block;
  width: 100%;
  min-width: 0;
}

/* Constrain anything the predictive component injects so it can't blow out
   horizontally at 320–360px. Anything inside results is clamped to the
   container's content box. */
.search-drawer__results img,
.search-drawer__results picture,
.search-drawer__results svg {
  max-width: 100%;
  height: auto;
}

.search-drawer__results .predictive-search-empty,
.search-drawer__results .predictive-search-empty__collections {
  /* Empty-state collapses to a single column inside the drawer */
  display: block;
}

.search-drawer__results .predictive-search-empty__collections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.search-drawer__results .predictive-search-empty__sidebar {
  display: grid;
  gap: var(--space-3);
}

/* ─── Narrow-width safety (320–430px) ───────────────────────────────────── */

@media (max-width: 430px) {
  .search-drawer__header {
    padding: var(--space-3) var(--space-3) var(--space-1);
  }

  .search-drawer__form {
    padding: var(--space-1) var(--space-3) var(--space-3);
  }

  .search-drawer__results {
    padding-inline: var(--space-3);
  }

  .search-drawer__input {
    padding: 0.78rem 0.4rem 0.78rem 0.85rem;
  }

  .search-drawer__label {
    left: 0.85rem;
  }

  /* Predictive product cards inside the drawer use a single-column row */
  .search-drawer__results .predictive-search-results__list,
  .search-drawer__results .predictive-search-results__groups {
    display: block;
    width: 100%;
    min-width: 0;
  }
}

/* ─── Responsive visibility ──────────────────────────────────────────────── */

@media (max-width: 999px) {

  /* Hide account icon — account link lives in the drawer-menu footer */
  .header-icons__button--account {
    display: none;
  }

  /* Show mobile search trigger */
  .header-icons__button--search-mobile {
    display: inline-flex;
  }
}

@media (min-width: 1000px) {

  /* Desktop never shows the mobile search drawer */
  .search-drawer {
    display: none;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .search-drawer__panel,
  .search-drawer__close,
  .search-drawer__field,
  .search-drawer__label,
  .search-drawer__clear,
  .search-drawer__submit {
    transition: none;
  }
}

/*
 * Note: focus indicators are intentionally NOT suppressed on touch/coarse
 * pointers. :focus-visible already only matches keyboard/programmatic focus
 * (not taps), so keyboard users on touch-capable devices keep a visible focus
 * ring. Suppress sticky tap "ghost" states via :focus:not(:focus-visible)
 * on the affected controls only, never :focus-visible.
 */
:where(.drawer-menu__close, .localization-drawer__close, .search-drawer__close, .drawer-menu__tab, .localization-drawer__tab, .drawer-menu__toggle, .search-drawer__clear, .search-drawer__submit, .drawer-menu__account-link, .localization-drawer__option):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/**
 * Theme Announcement Bar
 * Static, ticker, and vertical rotator modes.
 */

.announcement-bar {
  --announcement-min-height: 44px;
  --announcement-speed: 20s;
  --announcement-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  --announcement-border: rgb(var(--color-border-rgb) / 0.32);
  --announcement-text-size: clamp(12px, calc(var(--font-size-base, 0.6rem) * .72), 1.025rem);
  --announcement-text-size-mobile: clamp(12px, calc(var(--font-size-base, 1rem) * .6), 1rem);
  --announcement-line-height: var(--body-line-height, 1.6);
  --announcement-letter-spacing: var(--body-letter-spacing, 0px);

  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  border-bottom: 1px solid var(--announcement-border);
  position: relative;
  z-index: 3;
}

.announcement-bar__inner {
  min-height: var(--announcement-min-height);
  display: flex;
  align-items: center;
  padding-block: 0.35rem;
}

.announcement-bar__inner--ticker {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.announcement-bar__utility {
  min-height: var(--announcement-min-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.35rem;
  position: relative;
  z-index: 2;
}

.announcement-bar__utility-center {
  min-width: 0;
}

.announcement-bar__utility-message {
  margin: 0;
  text-align: center;
  font-size: var(--announcement-text-size);
  line-height: var(--announcement-line-height);
  letter-spacing: var(--announcement-letter-spacing);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-bar__utility-side {
  display: flex;
  align-items: center;
  gap: .95rem;
  min-width: 0;
}

.announcement-bar__utility-side--end {
  justify-content: flex-end;
}

.announcement-bar__localization-trigger {
  min-height: auto;
}

.announcement-bar__localization-trigger .localization-switcher__label {
  font-size: var(--text-xs);
}

.announcement-bar__countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.announcement-bar__countdown-label {
  font-size: calc(var(--text-xs) * 0.97);
  letter-spacing: 0.09em;
}

.announcement-bar__countdown-grid {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.announcement-bar__countdown-item {
  min-width: 2.2rem;
  border: 1px solid rgb(var(--color-border-rgb) / 0.45);
  background: rgb(var(--color-bg-secondary-rgb));
  padding: 0.2rem 0.3rem;
  text-align: center;
}

.announcement-bar__countdown-item>span {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.1;
}

.announcement-bar__countdown-item>small {
  display: block;
  font-size: calc(var(--text-xs) * 0.69);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.announcement-bar__rotator {
  width: 100%;
  min-height: 1.35rem;
  display: grid;
  align-items: center;
  text-align: center;
}

.announcement-bar__rotator-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
  pointer-events: none;
  max-inline-size: min(100%, 52ch);
  margin-inline: auto;
  text-wrap: pretty;
}

.announcement-bar__rotator-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.announcement-bar__rotator-link {
  text-decoration: none;
}

.announcement-bar__rotator--utility {
  min-height: 1.45rem;
}

.announcement-bar__rotator--utility .announcement-bar__text,
.announcement-bar__rotator--utility .announcement-bar__rotator-link {
  font-size: var(--announcement-text-size);
  line-height: var(--announcement-line-height);
  text-transform: uppercase;
  letter-spacing: var(--announcement-letter-spacing);
}

.announcement-bar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.announcement-bar__list--inline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 0.35rem;
}

.announcement-bar__item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.announcement-bar__list--ticker .announcement-bar__item {
  white-space: nowrap;
}

.announcement-bar__list--ticker .announcement-bar__item + .announcement-bar__item::before {
  display: none;
}

.announcement-bar__list--inline .announcement-bar__item {
  white-space: normal;
  text-align: center;
}

.announcement-bar__item+.announcement-bar__item::before {
  content: "";
  width: 0.0625rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgb(var(--color-text-body-rgb) / 0.68);
  margin-inline: var(--announcement-gap);
  flex: 0 0 auto;
}

.announcement-bar__text {
  font-size: var(--announcement-text-size);
  line-height: var(--announcement-line-height);
  letter-spacing: var(--announcement-letter-spacing);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.announcement-bar__text p {
  display: inline;
  margin: 0;
}

.announcement-bar__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.announcement-bar__ticker {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.announcement-bar__ticker-track {
  width: max-content;
  display: flex;
  align-items: center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.announcement-bar__list--ticker {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  gap: var(--ticker-item-gap, 40px);
  padding-inline-end: var(--ticker-item-gap, 40px);
}

/* Inter-segment spacing is now handled by padding-inline-end on the
   segment itself, so the leading-dot pseudo is no longer needed. */
.announcement-bar__ticker-track>.announcement-bar__list--ticker::before {
  content: none;
}

.announcement-bar__list[aria-hidden="true"] {
  pointer-events: none;
}

@media (max-width: 699px) {
  .announcement-bar__inner {
    min-height: auto;
    padding-block: 0.35rem;
  }

  .announcement-bar__utility {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    justify-items: center;
    text-align: center;
  }

  .announcement-bar__utility-center {
    width: 100%;
    order: 2;
  }

  .announcement-bar__utility-side,
  .announcement-bar__utility-side--end {
    justify-content: center;
    flex-wrap: wrap;
  }

  .announcement-bar__utility-side--start {
    order: 1;
  }

  .announcement-bar__utility-side--end {
    order: 3;
  }

  .announcement-bar__item+.announcement-bar__item::before {
    margin-inline: clamp(0.85rem, 3vw, 1.15rem);
  }

  .announcement-bar__text,
  .announcement-bar__rotator--utility .announcement-bar__text,
  .announcement-bar__rotator--utility .announcement-bar__rotator-link {
    font-size: var(--announcement-text-size-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__ticker-track {
    animation: none !important;
    transform: none !important;
  }

  .announcement-bar__rotator-item {
    transition: none;
  }

  .announcement-bar__list[aria-hidden="true"] {
    display: none;
  }
}

/**
 * Theme — Core CSS System (Utilities)
 * Small, curated utility set to avoid inline styles in sections.
 */

/* ---------------------------------------------
 * Accessibility helpers
 * --------------------------------------------- */

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

.skip-to-content-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10000;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid rgb(var(--color-border-rgb) / 0.5);
  border-radius: var(--radius-form, var(--style-border-radius-inputs, 0.25rem));
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}

.skip-to-content-link:focus-visible {
  transform: translateY(0);
}

/* Skeleton integration: make element span full-width grid column */
.shopify-section>.u-full-width {
  grid-column: 1 / -1;
}

/* ---------------------------------------------
 * Main product section
 * --------------------------------------------- */

.main-product {
  padding-top: var(--section-padding-top, var(--space-8));
  padding-bottom: var(--section-padding-bottom, var(--space-8));
  margin-top: var(--section-margin-top, 0px);
  margin-bottom: var(--section-margin-bottom, 0px);
  background: var(--color-bg, rgb(var(--color-background-rgb)));
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
}

.main-product__layout {
  display: grid;
  gap: var(--space-8);
}

.main-product__media {
  min-width: 0;
  padding-inline: 0;
}

.main-product__content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .main-product--media-size-large .container--full {
    padding-inline: 0;
  }
}

.main-product--section-width-full .main-product__layout {
  gap: 0;
}

.main-product--section-width-full .main-product__content {
  padding-inline: var(--space-6);
}

.main-product__title {
  margin: 0;
  text-wrap: balance;
}

.main-product__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.main-product__price-current {
  font-size: var(--heading-h4);
  color: var(--color-fg-heading);
}

.main-product__price-compare {
  color: var(--color-fg-muted);
}

.main-product__description {
  color: var(--color-fg-muted);
}

.main-product__form {
  display: grid;
  gap: var(--space-3);
}

/* Keep accordion stacks visually connected: cancel only the inter-item grid gap
   when two collapsible product blocks are consecutive. */
.main-product__form > .product-block--is-collapsible + .product-block--is-collapsible {
  margin-top: calc(var(--space-3) * -1);
}

.main-product__field {
  display: grid;
  gap: var(--space-2);
}

.main-product__field--quantity {
  max-width: 9rem;
}

.main-product__label {
  color: var(--color-fg-muted);
}

.main-product__variant-select,
.main-product__quantity {
  width: 100%;
}

.main-product__form .shopify-payment-button,
.main-product__form .shopify-payment-button__button {
  width: 100%;
}

@media (min-width: 1000px) {
  .main-product__layout {
    grid-template-columns: minmax(0, var(--main-product-media-column, 50%)) minmax(0, var(--main-product-content-column, 50%));
    align-items: start;
  }

  .main-product--media-size-normal {
    --main-product-content-max-width: 42rem;
  }

  .main-product--media-size-large {
    --main-product-content-max-width: 45rem;
  }

  .section-main-product .main-product {
    --main-product-chrome-offset: 0px;
    --main-product-media-target-height: calc(100svh - var(--main-product-chrome-offset, 0px));
  }

  .section-main-product .main-product .main-product__media .product-gallery {
    height: 100%;
    min-height: 0;
  }

  .section-main-product .main-product .main-product__media .product-gallery__main {
    min-height: 0;
  }

  .section-main-product .main-product .main-product__media .product-gallery__swiper,
  .section-main-product .main-product .main-product__media .product-gallery__swiper .swiper-wrapper,
  .section-main-product .main-product .main-product__media .product-gallery__swiper .product-gallery__slide {
    height: 100%;
  }

  .section-main-product .main-product .main-product__media .product-gallery--desktop-freeview .product-gallery__swiper .product-gallery__slide {
    width: auto;
    max-width: none;
  }

  .section-main-product .main-product .main-product__media .product-gallery--desktop-freeview .product-media__image-wrap,
  .section-main-product .main-product .main-product__media .product-gallery--desktop-freeview .product-media__deferred {
    width: auto;
    height: 100%;
    aspect-ratio: var(--media-ratio, 4 / 5);
  }

  .main-product--layout-classic .main-product__media {
    padding-inline-start: 0;
    padding-inline-end: 0;
    position: sticky;
    top: 0;
    align-self: start;
    transition: top var(--motion-duration-sticky-transform) var(--motion-ease-sticky-header);
  }

  body.theme-header-sticky-visible .main-product--layout-classic .main-product__media {
    top: var(--theme-sticky-header-offset, var(--sticky-header-visible-offset, 0px));
  }

  .main-product__content {
    position: sticky;
    top: var(--page-margin);
  }

  .main-product--section-width-full .main-product__content {
    margin: 0 auto;
    width: 100%;
    padding-left: var(--space-20);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    padding-right: var(--space-20);
    max-width: var(--main-product-content-max-width, 48rem);
  }
}

/* Layout: Media Right */
@media (min-width: 1000px) {
  .main-product--layout-media_right .main-product__layout {
    grid-template-columns: minmax(0, var(--main-product-content-column, 50%)) minmax(0, var(--main-product-media-column, 50%));
  }

  .main-product--layout-media_right .main-product__media {
    order: 2;
    padding-inline-start: var(--space-12);
    padding-inline-end: 0;
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--space-4));
    align-self: start;
  }

  .main-product--layout-media_right .main-product__content {
    order: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Layout: Cinematic Ticker
   Mobile: standard stacked flow, no padding override.
   Desktop: media spans full container width; content panel overlaps
   in the right column of the same grid row via z-index stacking.
   position:sticky and top offset are inherited from the base desktop rule.
   ───────────────────────────────────────────────────────────────────────── */

/* Reset the base .main-product__media right-padding on all viewports */
.main-product--layout-cinematic_ticker .main-product__media,
.main-product--layout-ticker .main-product__media {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1000px) {

  /* Two-column grid: 1fr for media + a clamped right panel for content.
     Both elements sit in row 1 — media spans all columns, content only col 2.
     Panel width tracks 33% of the container (≈ reference ~634 px at 1920 px),
     clamped to a minimum of 22 rem so narrow viewports still get readable text. */
  .main-product--layout-cinematic_ticker .main-product__layout,
  .main-product--layout-ticker .main-product__layout {
    grid-template-columns: 1fr clamp(22rem, 33%, 40rem);
    gap: 0;
  }

  .main-product--layout-cinematic_ticker .main-product__media,
  .main-product--layout-ticker .main-product__media {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--space-4));
  }

  /* Content panel overlays the right portion of the media stage.
     Keep natural height in cinematic mode (no inner scrollbar). */
  .main-product--layout-cinematic_ticker .main-product__content,
  .main-product--layout-ticker .main-product__content {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    background: var(--color-bg);
    padding: var(--space-6) var(--space-8);
    max-height: none;
    overflow: visible;
  }
}

/* Content alignment */
.main-product--align-center .main-product__content {
  justify-items: center;
  text-align: center;
}

.main-product--align-center .main-product__breadcrumbs,
.main-product--align-center .main-product__price {
  justify-content: center;
}

.main-product--align-center .main-product__form,
.main-product--align-center .product-block {
  width: 100%;
}

.main-product--align-center .variant-picker__label,
.main-product--align-center .variant-picker__pills,
.main-product--align-center .variant-picker__swatches {
  justify-content: center;
}

.main-product--align-center .main-product__field--quantity,
.main-product--align-center .quantity-selector__wrap {
  margin-inline: auto;
}

/* Breadcrumbs */
.main-product__breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 48rem;
}

.main-product__breadcrumbs a,
.main-product__breadcrumbs span {
  font-size: var(--text-xs);
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.6));
  text-decoration: none;
  text-transform: var(--body-text-transform);
  letter-spacing: var(--body-letter-spacing);
}

.main-product__breadcrumbs a:hover {
  color: var(--color-fg, var(--color-foreground));
}

.main-product__breadcrumbs .breadcrumb-separator {
  font-size: var(--text-xs);
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.4));
  user-select: none;
}

/* Global breadcrumb bar (all pages except home and product). */
.theme-breadcrumbs {
  border-bottom: var(--border-width, 1px) solid rgb(var(--color-border-rgb) / 0.35);
}

.theme-breadcrumbs__list {
  margin: 0;
  padding: var(--space-3, 0.75rem) 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.theme-breadcrumbs__item,
.theme-breadcrumbs__link,
.theme-breadcrumbs__current {
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.2;
  color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.92);
}

.theme-breadcrumbs__link {
  color: inherit;
  text-decoration: none;
}

.theme-breadcrumbs__link:hover {
  color: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
}

.theme-breadcrumbs__item--sep {
  opacity: 0.45;
  user-select: none;
}

.theme-breadcrumbs__current {
  color: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
}

/* Generic badge system */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-badge, 999px);
  font-size: var(--text-xs);
  font-weight: var(--font-body-weight, 400);
  line-height: 1.2;
  letter-spacing: 0.02em;
  background: rgb(var(--color-text-body-rgb) / 0.08);
  color: rgb(var(--color-text-body-rgb));
}

.badge--primary {
  background: var(--color-fg, rgb(var(--color-text-body-rgb)));
  color: var(--color-bg, rgb(var(--color-bg-main-rgb)));
}

.badge--sold-out {
  background: var(--color-badge-sold-out-bg, rgb(var(--color-badge-sold-bg-rgb)));
  color: var(--color-badge-sold-out-fg, rgb(var(--color-badge-sold-text-rgb)));
  border: 1px solid rgb(var(--color-border-rgb) / 0.4);
}

.badge--on-sale {
  background: var(--color-badge-sale-bg, rgb(var(--color-badge-sale-bg-rgb)));
  color: var(--color-badge-sale-fg, rgb(var(--color-badge-sale-text-rgb)));
}

.badge[hidden] {
  display: none;
}

/* Price adjustments */
.main-product__price-compare {
  text-decoration: line-through;
  font-size: var(--heading-h4);
}

.product-block__price {
  display: grid;
  gap: var(--space-2);
}

.product-block__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-block__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-block__price-main {
  color: rgb(var(--color-price-regular-rgb, var(--color-text-body-rgb, var(--color-foreground-rgb))));
}

.product-block__price-compare {
  color: rgb(var(--color-price-compare-rgb, var(--color-text-muted-rgb, var(--color-foreground-rgb))));
  text-decoration: line-through;
}

.product-block__price-row--on-sale .product-block__price-main,
.product-block__price-row:has(.product-block__price-compare:not([style*='display:none'])) .product-block__price-main {
  color: rgb(var(--color-price-sale-rgb, var(--color-price-regular-rgb, var(--color-text-body-rgb))));
}

.product-block__price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-badge, 999px);
  background: var(--color-badge-sale-bg, rgb(var(--color-badge-sale-bg-rgb, var(--color-link-rgb))));
  color: var(--color-badge-sale-fg, rgb(var(--color-badge-sale-text-rgb, 255 255 255)));
  font-size: var(--text-xs);
  font-weight: var(--font-body-weight, 400);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.product-block__price-tax {
  margin: 0;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  font-size: var(--text-xs);
}

.product-block__price--font-heading .product-block__price-main {
  font-family: var(--font-heading);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
}

.product-block__price--font-body .product-block__price-main {
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

.product-block__price--size-recommended .product-block__price-main {
  font-size: var(--heading-h4);
}

.product-block__price--size-small .product-block__price-main {
  font-size: var(--text-large);
}

.product-block__price--size-medium .product-block__price-main {
  font-size: var(--heading-h5);
}

.product-block__price--size-large .product-block__price-main {
  font-size: var(--heading-h3);
}

.product-block__installments {
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.68));
}

.product-collapsible__summary-custom-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  object-fit: contain;
}

/* Description */
.main-product__description {
  line-height: 1.7;
  font-size: var(--text-small);
}

/* ---------------------------------------------
 * Variant picker
 * --------------------------------------------- */

.variant-picker {
  display: block;
}

.variant-picker__option {
  border: 0;
  min-inline-size: 0;
  padding: 0;
  margin-bottom: var(--space-6);
}

.variant-picker__option:last-child {
  margin-bottom: 0;
}

.variant-picker__option>legend.variant-picker__label {
  padding: 0;
}

.variant-picker__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--font-body-weight);
  text-transform: var(--body-text-transform);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-fg, var(--color-foreground));
}

.variant-picker__label-value {
  font-weight: 500;
}

/* Pills (size, material, etc.) */
.variant-picker__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.variant-picker__pills input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.variant-picker__pills label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 40px;
  padding: 0 var(--space-5);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-form, 5px);
  font-size: var(--text-small);
  color: var(--color-fg, var(--color-foreground));
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease),
    border-color var(--motion-duration-fast) var(--motion-ease);
}

.variant-picker__pills label:hover {
  border-color: var(--color-fg, var(--color-foreground));
}

.variant-picker__pills input[type="radio"]:checked+label {
  background-color: var(--color-fg, var(--color-foreground));
  color: var(--color-bg, var(--color-background));
  border-color: var(--color-fg, var(--color-foreground));
}

.variant-picker__pills input[type="radio"]:focus-visible+label {
  box-shadow: var(--focus-ring);
  border-color: var(--color-fg, var(--color-foreground));
}

/* Pill disabled / unavailable */
.variant-picker__pills input[type="radio"]:disabled+label,
.variant-picker__pills input[type="radio"].is-unavailable+label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Strikethrough diagonal for unavailable */
.variant-picker__pills input[type="radio"].is-unavailable--strikethrough+label {
  opacity: 1;
  position: relative;
}

.variant-picker__pills input[type="radio"].is-unavailable--strikethrough+label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom left,
      transparent calc(50% - 0.5px),
      var(--border-color) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)) no-repeat;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Color swatches */
.variant-picker__swatches {
  --swatch-size: 3.4rem;
  --swatch-radius: .22rem;
  --swatch-inner-radius: .22rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.variant-picker__swatches input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.variant-picker__swatch-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--swatch-size);
  height: var(--swatch-size);
  padding: 3px;
  border: var(--border-width) solid transparent;
  border-radius: var(--swatch-radius);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}

.variant-picker__swatch-label:hover {
  border-color: var(--border-color);
}

.variant-picker__swatches input[type="radio"]:checked+.variant-picker__swatch-label {
  border-color: var(--color-fg, var(--color-foreground));
}

.variant-picker__swatches input[type="radio"]:focus-visible+.variant-picker__swatch-label {
  box-shadow: var(--focus-ring);
  border-color: var(--color-fg, var(--color-foreground));
}

.variant-picker__swatch-color {
  width: 100%;
  height: 100%;
  border-radius: var(--swatch-inner-radius);
  background: var(--swatch-background, #D1D5DB);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0.5px solid rgb(0 0 0 / 0.08);
}

/* Swatch disabled */
.variant-picker__swatches input[type="radio"]:disabled+.variant-picker__swatch-label,
.variant-picker__swatches input[type="radio"].is-unavailable+.variant-picker__swatch-label {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Image swatches use larger preview tiles */
.variant-picker__swatches--image {
  --swatch-size: 4.3rem;
  --swatch-image-ratio: 1 / 1;
}

.variant-picker__swatches--image .variant-picker__swatch-label {
  width: var(--swatch-size);
  height: auto;
  aspect-ratio: var(--swatch-image-ratio);
}

.variant-picker__swatches--image .variant-picker__swatch-color {
  border-radius: var(--swatch-inner-radius);
}

.variant-picker__swatches--image-3_4 {
  --swatch-image-ratio: 3 / 4;
}

.variant-picker__swatches--image-1_1 {
  --swatch-image-ratio: 1 / 1;
}

.variant-picker__swatches--image-4_3 {
  --swatch-image-ratio: 4 / 3;
}

/* Dropdown variant */
.variant-picker__dropdown {
  width: 100%;
}

.variant-picker__dropdown .field__input {
  width: 100%;
}

/* ---------------------------------------------
 * Quantity selector (stepper)
 * --------------------------------------------- */

.quantity-selector__wrap,
.theme-cart-qty {
  --qty-button-size: 40px;
  --qty-input-width: 32px;
  --qty-height: 48px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgb(var(--color-border-rgb) / 0.65);
  background: transparent;
  border-radius: var(--style-border-radius-inputs);
  min-height: var(--qty-height);
  overflow: hidden;
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}

.quantity-selector__wrap--compact,
.theme-cart-item .quantity-selector__wrap,
.theme-cart-item .theme-cart-qty {
  --qty-button-size: 32px;
  --qty-input-width: 28px;
  --qty-height: 40px;
}

.theme-cart-items--drawer .theme-cart-qty,
.theme-cart-items--drawer .quantity-selector__wrap {
  --qty-button-size: 24px;
  --qty-input-width: 24px;
  --qty-height: 34px;
}

.theme-cart-items--page .theme-cart-qty,
.theme-cart-items--page .quantity-selector__wrap {
  --qty-button-size: 30px;
  --qty-input-width: 24px;
  --qty-height: 36px;
}

.quantity-selector__wrap:hover,
.theme-cart-qty:hover {
    border-color: rgb(var(--color-text-body-rgb) / 0.48);
}

.quantity-selector__btn,
.theme-cart-qty__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qty-button-size);
  height: var(--qty-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.6));
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.quantity-selector__btn:hover,
.theme-cart-qty__button:hover {
  color: var(--color-fg, var(--color-foreground));
}

.quantity-selector__btn:focus-visible,
.theme-cart-qty__button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
  position: relative;
  z-index: 1;
}

.quantity-selector__wrap:focus-within,
.theme-cart-qty:focus-within {
  border-color: rgb(var(--color-input-border-rgb, var(--color-foreground-rgb)));
}

.quantity-selector__btn svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.quantity-selector__input,
.theme-cart-qty__input {
  width: var(--qty-input-width);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-fg, var(--color-foreground));
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-selector__input::-webkit-outer-spin-button,
.quantity-selector__input::-webkit-inner-spin-button,
.theme-cart-qty__input::-webkit-outer-spin-button,
.theme-cart-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-selector__input:focus-visible,
.theme-cart-qty__input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}

/* ---------------------------------------------
 * Buy buttons (design match)
 * --------------------------------------------- */

.main-product__buy-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.main-product__buy-primary {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
}

.main-product__buy-primary .main-product__atc-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.main-product__quantity-inline {
  flex: 0 0 auto;
}

.main-product__quantity-inline .quantity-selector__wrap {
  --qty-button-size: 34px;
  --qty-input-width: 30px;
  --qty-height: 3rem;
  min-height: 3rem;
}

.main-product__buy-buttons .btn {
  width: 100%;
  min-height: 3.00rem;
}

.main-product__buy-buttons .shopify-payment-button {
  width: 100%;
}

.main-product__buy-buttons .shopify-payment-button__button,
.main-product__buy-buttons .shopify-payment-button__button--unbranded {
  width: 100%;
  min-height: 3.00rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-3) !important;
  padding-inline: var(--space-5) !important;
  border-radius: var(--radius-form, var(--style-border-radius-inputs));
  border: var(--border-width) solid var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))))) !important;
  background: var(--color-btn-primary-bg, rgb(var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb)))) !important;
  color: var(--color-btn-primary-text, rgb(var(--color-btn-primary-text-rgb, var(--color-background-rgb)))) !important;
  font-family: var(--font-button, var(--font-heading));
  font-style: var(--font-button-style, var(--font-heading-style));
  font-weight: var(--font-button-weight, var(--font-heading-weight));
  font-size: var(--button-font-size, var(--text-xs));
  line-height: var(--body-line-height) !important;
  letter-spacing: var(--body-letter-spacing) !important;
  text-transform: var(--button-text-transform, var(--heading-text-transform));
  box-shadow: none !important;
  transition: none !important;
}

.main-product__buy-buttons .shopify-payment-button__button:hover,
.main-product__buy-buttons .shopify-payment-button__button:focus-visible,
.main-product__buy-buttons .shopify-payment-button__button--unbranded:hover,
.main-product__buy-buttons .shopify-payment-button__button--unbranded:focus-visible {
  border-color: var(--color-btn-primary-border, rgb(var(--color-btn-primary-border-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))))) !important;
  background: var(--color-btn-primary-bg-hover, rgb(var(--color-btn-primary-bg-hover-rgb, var(--color-btn-primary-bg-rgb, var(--color-foreground-rgb))))) !important;
  color: var(--color-btn-primary-text-hover, rgb(var(--color-btn-primary-text-hover-rgb, var(--color-btn-primary-text-rgb, var(--color-background-rgb))))) !important;
  box-shadow: none !important;
  outline: none;
}

@media (max-width: 699px) {
  .main-product__layout {
    gap: var(--space-6);
  }

  .main-product--section-width-full .main-product__content {
    padding-inline: var(--space-0);
    margin-top: var(--space-8);
  }

  .main-product__content {
    gap: var(--space-3);
  }

  .main-product__breadcrumbs {
    margin-bottom: var(--space-3);
  }

  .main-product__quantity-inline {
    width: auto;
    flex: 0 0 auto;
  }

  .main-product__quantity-inline .quantity-selector__wrap {
    width: auto;
    justify-content: initial;
  }
}

@media (max-width: 349px) {
  .main-product__buy-primary {
    flex-direction: column;
  }
}

/* Product block spacing (within content column) */
.product-block {
  min-width: 0;
}

/* ---------------------------------------------
 * Complementary products block (Search & Discovery)
 * Hidden until component-complementary-products.js finds results; the
 * wrapper is hidden too so it doesn't add an empty grid gap to the form.
 * --------------------------------------------- */

.product-block--complementary_products:has(> .product-complementary[hidden]) {
  display: none;
}

.product-complementary {
  display: grid;
  gap: var(--space-3);
}

.product-complementary[hidden] {
  display: none;
}

.product-complementary__heading {
  margin: 0;
}

.product-complementary__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-complementary__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: var(--border-width) solid rgb(var(--color-border-rgb));
}

.product-complementary__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.product-complementary__item:last-child {
  padding-block-end: 0;
}

.product-complementary__media {
  display: block;
  aspect-ratio: var(--cp-ratio, 1 / 1);
  overflow: hidden;
  border-radius: var(--radius-component);
  background: rgb(var(--color-border-rgb) / 0.08);
}

.product-complementary__media img,
.product-complementary__media .placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-complementary__info {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.product-complementary__title {
  margin: 0;
  font-size: var(--heading-h6);
  font-weight: var(--font-heading-weight);
  line-height: 1.35;
}

.product-complementary__title-link {
  color: inherit;
  text-decoration: none;
}

.product-complementary__title-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 699px) {
  .product-complementary__item {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .product-complementary__action {
    grid-column: 2;
  }
}

/* ---------------------------------------------
 * Contact Form section
 * --------------------------------------------- */

.contact-form-wrap {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: var(--space-8);
}

.section-contact-form.color-scheme {
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

.contact-form-wrap--center {
  margin-inline: auto;
}

.contact-form-wrap--right {
  margin-inline-start: auto;
}

.contact-form__header {
  display: grid;
  gap: var(--space-2);
  max-width: min(100%, 42rem);
}

.contact-form__header--left {
  text-align: left;
}

.contact-form__header--center {
  text-align: center;
}

.contact-form__header--right {
  text-align: right;
}

.contact-form__heading {
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.contact-form__description {
  max-width: 42ch;
  color: rgb(var(--color-text-muted-rgb));
  text-wrap: pretty;
}

.contact-form__header--center {
  margin-inline: auto;
}

.contact-form__header--center .contact-form__heading,
.contact-form__header--center .contact-form__description {
  margin-inline: auto;
}

.contact-form__header--right {
  margin-inline-start: auto;
}

.contact-form__header--right .contact-form__heading,
.contact-form__header--right .contact-form__description {
  margin-inline-start: auto;
}

.contact-form {
  display: grid;
  gap: var(--space-3);
}

.contact-form__fields {
  display: grid;
  gap: var(--space-3);
}

.contact-form__footer {
  display: grid;
  gap: var(--space-2);
}

.contact-form__note {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-text-muted-rgb));
  text-align: center;
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .contact-form__header {
    gap: var(--space-3);
  }

  .contact-form {
    gap: var(--space-4);
  }

  .contact-form__fields {
    gap: var(--space-1);
  }

  .contact-form__footer {
    gap: var(--space-3);
  }
}

.contact-form__success {
  padding: var(--space-4);
  border: var(--border-width) solid rgb(var(--color-border-rgb) / 0.4);
  border-radius: var(--radius-sm);
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-small);
}

.contact-form__errors {
  padding: var(--space-4);
  border: var(--border-width) solid rgb(var(--color-error-rgb, 220 53 69) / 0.45);
  border-radius: var(--radius-sm);
  color: rgb(var(--color-error-rgb, 220 53 69));
  font-size: var(--text-small);
}

.contact-form__errors-title {
  margin: 0 0 var(--space-2);
  font-weight: 500;
}

.contact-form__errors-list {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.contact-form__errors-list li+li {
  margin-top: var(--space-1);
}

/* End Contact Form section */

/* ---------------------------------------------
 * Email Signup section
 * --------------------------------------------- */

.section-email-signup.color-scheme {
  background: rgb(var(--color-bg-main-rgb));
  color: rgb(var(--color-text-body-rgb));
}

/* ── Layout shell ────────────────────────────── */

.email-signup {
  position: relative;
}

.email-signup--centered {
  position: relative;
  min-height: var(--email-signup-section-height, 520px);
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
}

.email-signup--centered .email-signup__content {
  position: relative;
  z-index: 2;
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
}

@media (min-width: 700px) {
  .email-signup--centered .email-signup__content {
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1000px) {
  .email-signup--centered .email-signup__content {
    padding-inline: var(--space-10);
  }
}

.email-signup--centered .email-signup__content--left {
  justify-self: start;
  margin-inline: 0;
}

.email-signup--background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)) / var(--email-signup-overlay-opacity, 0.35));
}

.email-signup__background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.email-signup__background-media picture,
.email-signup__background-media .email-signup__media {
  display: block;
  width: 100%;
  height: 100%;
}

.email-signup__background-media .email-signup__img {
  height: 100%;
  object-fit: cover;
}

.email-signup--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 699px) {
  .email-signup--split.email-signup--mobile-text-first .email-signup__content {
    order: -1;
  }
}

@media (min-width: 700px) {
  .email-signup--split.email-signup--with-media {
    flex-direction: row;
    align-items: var(--email-signup-valign, center);
    gap: var(--space-10);
  }

  .email-signup--split.email-signup--with-media.email-signup--image-right {
    flex-direction: row-reverse;
  }

  .email-signup--split.email-signup--with-media .email-signup__media-wrap {
    flex: 0 0 var(--email-signup-media-width, 50%);
    width: var(--email-signup-media-width, 50%);
    max-width: var(--email-signup-media-width, 50%);
  }

  .email-signup--split.email-signup--with-media .email-signup__content {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 1000px) {
  .email-signup--split.email-signup--with-media {
    gap: var(--space-16);
  }
}

/* ── Media panel ─────────────────────────────── */

.email-signup__media-wrap {
  position: relative;
  overflow: visible;
}

.email-signup__media {
  width: 100%;
  aspect-ratio: var(--email-signup-media-ratio, auto);
  height: auto;
  overflow: hidden;
  border-radius: var(--email-signup-media-radius, var(--radius-component, 0px));
  background: rgb(var(--color-foreground-rgb) / 0.05);
}

@media (min-width: 700px) {
  .email-signup--split.email-signup--with-media .email-signup__media {
    min-height: 0;
  }
}

.email-signup__media picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.email-signup__img {
  display: block;
  width: 100%;
  height: var(--email-signup-image-height, 100%);
  object-fit: var(--email-signup-image-fit, cover);
  object-position: center;
  border-radius: inherit;
}

.email-signup__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-foreground-rgb) / 0.05);
  min-height: 0;
  height: auto;
  aspect-ratio: var(--email-signup-media-ratio, auto);
  line-height: 0;
  border-radius: inherit;
}

.email-signup__placeholder-svg {
  display: block;
  width: 100%;
  height: var(--email-signup-image-height, 100%);
  border-radius: inherit;
}

.email-signup__placeholder-svg svg {
  display: block;
  width: 100%;
  height: var(--email-signup-image-height, 100%);
  border-radius: inherit;
}

/* ── Content panel ───────────────────────────── */

.email-signup__content {
  display: flex;
  flex-direction: column;
  align-items: var(--email-signup-content-items, flex-start);
  text-align: var(--email-signup-content-align, left);
  gap: var(--space-4);
  width: 100%;
}

.email-signup--split .email-signup__content {
  padding: 0;
}

.email-signup__content--center {
  text-align: center;
  align-items: center;
}

.email-signup__content--left {
  text-align: left;
  align-items: flex-start;
}

.email-signup__content--right {
  text-align: right;
  align-items: flex-end;
}

/* ── Text block ──────────────────────────────── */

.email-signup__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(100%, 42rem);
  width: 100%;
}

.email-signup__subheading {
  margin: 0;
}

.email-signup__heading {
  margin: 0;
  max-width: 20ch;
  color: rgb(var(--color-text-heading-rgb));
  text-wrap: balance;
}

.email-signup__description {
  margin: 0;
  color: rgb(var(--color-text-body-rgb));
  line-height: var(--line-height-body, var(--body-line-height, 1.6));
  text-wrap: pretty;
}

/* ── Form ────────────────────────────────────── */

.email-signup__form {
  display: grid;
  gap: var(--space-3);
  max-width: min(100%, 32rem);
  width: 100%;
}

.email-signup__fields {
  display: grid;
  gap: var(--space-2);
  width: 100%;
}

.email-signup__field-action {
  max-width: 100%;
}

.email-signup__field-action .field__input::placeholder {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)) / 0.92);
}

.email-signup__field-action .field__input:focus,
.email-signup__field-action .field__input:focus-visible {
  border-color: rgb(var(--color-input-border-rgb, var(--color-foreground-rgb)));
}

.email-signup__field-action .field__action {
  color: inherit;
}

/* ── State messages ──────────────────────────── */

.email-signup__success {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width, 1px) solid rgb(var(--color-border-rgb) / 0.35);
  border-radius: var(--radius-sm, var(--style-border-radius-inputs, 0.25rem));
  font-size: var(--text-small);
}

.email-signup__error {
  margin: 0;
  font-size: var(--text-small);
  color: rgb(var(--color-error-rgb, 220 53 69));
}

/* ── Supplementary text ──────────────────────── */

.email-signup__note {
  margin: 0;
  font-size: var(--text-xs);
  color: rgb(var(--color-text-body-rgb));
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.email-signup__consent {
  font-size: var(--text-xs);
  max-width: min(100%, 32rem);
}

.email-signup__content--center .email-signup__text,
.email-signup__content--center .email-signup__form,
.email-signup__content--center .email-signup__note,
.email-signup__content--center .email-signup__consent {
  margin-inline: auto;
}

.email-signup__content--center .email-signup__heading,
.email-signup__content--center .email-signup__description {
  margin-inline: auto;
}

.email-signup__content--right .email-signup__text,
.email-signup__content--right .email-signup__form,
.email-signup__content--right .email-signup__note,
.email-signup__content--right .email-signup__consent,
.email-signup__content--right .email-signup__heading,
.email-signup__content--right .email-signup__description {
  margin-inline-start: auto;
}

@media (max-width: 699px) {
  .email-signup--centered {
    min-height: min(var(--email-signup-section-height, 520px), 32rem);
  }

  .email-signup--split.email-signup--with-media {
    gap: var(--space-5);
  }

  .email-signup__content {
    gap: var(--space-4);
  }

  .email-signup__fields {
    gap: var(--space-3);
  }
}

@media (min-width: 700px) {
  .email-signup__content {
    gap: var(--space-5);
  }
}

/* End Email Signup section */

.product-block__separator {
  border: none;
  border-top: var(--border-width) solid var(--border-color);
  margin: var(--space-2) 0;
}

/* ── Back To Top ────────────────────────────────────────────────────────── */

.theme-back-to-top {
  --backtop-size: 3.5rem;
  --backtop-icon-size: 1.25rem;
  --backtop-border: rgb(var(--color-text-body-rgb, var(--color-foreground-rgb)));
  --backtop-bg: rgb(var(--color-bg-main-rgb, var(--color-background-rgb)) / 0.88);
  --backtop-ring-track: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.2);
  --backtop-ring-fill: rgb(var(--color-text-heading-rgb, var(--color-foreground-rgb)));
  --backtop-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  --backtop-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset-inline-end: var(--page-margin, 24px);
  inset-block-end: var(--space-6, 1.5rem);
  z-index: 40;
  inline-size: var(--backtop-size);
  block-size: var(--backtop-size);
  color: var(--backtop-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 0.35s var(--backtop-ease),
    transform 0.35s var(--backtop-ease),
    visibility 0.35s var(--backtop-ease);
  -webkit-tap-highlight-color: transparent;
}

.theme-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-back-to-top__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.theme-back-to-top__pulse::before,
.theme-back-to-top__pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.2);
  opacity: 0;
  transform: scale(0.88);
}

.theme-back-to-top.is-visible .theme-back-to-top__pulse::before {
  animation: themeBackTopPulse 2.4s ease-out infinite;
}

.theme-back-to-top.is-visible .theme-back-to-top__pulse::after {
  animation: themeBackTopPulse 2.4s ease-out infinite 1.2s;
}

.theme-back-to-top__button {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: 50%;
  background: var(--backtop-bg);
  color: inherit;
  cursor: pointer;
  box-shadow: var(--backtop-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.25s var(--backtop-ease),
    box-shadow 0.25s var(--backtop-ease),
    background 0.25s var(--backtop-ease);
}

.theme-back-to-top__button::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  pointer-events: none;
}

.theme-back-to-top__button:hover {
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}

.theme-back-to-top__button:active {
  transform: scale(0.96);
}

.theme-back-to-top:focus-visible {
  outline: none;
}

.theme-back-to-top__button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--backtop-shadow);
}

.theme-back-to-top__progress {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.theme-back-to-top__progress-track,
.theme-back-to-top__progress-bar {
  fill: none;
  stroke-linecap: round;
}

.theme-back-to-top__progress-track {
  stroke: var(--backtop-ring-track);
  stroke-width: 2;
}

.theme-back-to-top__progress-bar {
  stroke: var(--backtop-ring-fill);
  stroke-width: 2;
  stroke-dasharray: 207.35;
  stroke-dashoffset: 207.35;
  transition: stroke-dashoffset 0.16s linear;
}

.theme-back-to-top__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.theme-back-to-top__icon {
  inline-size: var(--backtop-icon-size);
  block-size: var(--backtop-icon-size);
  transform: rotate(-90deg);
  transition: transform 0.25s var(--backtop-ease);
}

.theme-back-to-top__button:hover .theme-back-to-top__icon {
  transform: rotate(-90deg) translateX(1px) translateY(-1px);
}

html.theme-scroll-lock-active .theme-back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.92);
  pointer-events: none;
}

@media (max-width: 699px) {
  .theme-back-to-top {
    --backtop-size: 4rem;
    --backtop-icon-size: 1.125rem;
    inset-inline-end: var(--page-margin, 12px);
    inset-block-end: var(--space-6, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-back-to-top,
  .theme-back-to-top__button,
  .theme-back-to-top__icon,
  .theme-back-to-top__progress-bar {
    transition: none;
  }

  .theme-back-to-top__pulse::before,
  .theme-back-to-top__pulse::after {
    animation: none !important;
  }
}

@keyframes themeBackTopPulse {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  18% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: scale(1.26);
  }
}


/* ==========================================================================
   Phase 1 Shared CSS Consolidation
   Migrated shared reusable component styles from standalone asset files into
   the global theme stylesheet to reduce repeated section-level includes.
   ========================================================================== */


/* --- Migrated from assets/component-card-product.css --- */

/**
 * Theme — Product Card  (component-card-product.css)
 *
 * Styles for card-product.liquid and the card-price__ class contract.
 * Loaded once per section that renders product cards.
 *
 * ──────────────────────────────────────────────────────────────────
 * CSS VARIABLE CONTRACT
 * ──────────────────────────────────────────────────────────────────
 *   --media-ratio   Aspect ratio for card media (e.g. 1/1, 3/4, 4/3).
 *   --media-fit     object-fit value for card images (cover | contain).
 *
 * SECTION SPACING CONTRACT (injected via per-section {% style %} block)
 * ──────────────────────────────────────────────────────────────────
 *   Padding and margin are output as CSS values directly on each section
 *   via a scoped {% style %} block.
 */

/* ─────────────────────────────────────────────────────────────────
   BASE CARD
   ───────────────────────────────────────────────────────────────── */

.card--product {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-card-bg, var(--color-bg));
  border: 0;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   MEDIA SHELL
   ───────────────────────────────────────────────────────────────── */

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 1/1);
  background: transparent;
  border-radius: var(--radius-card, var(--radius-component, 4px)) var(--radius-card, var(--radius-component, 4px));
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.card__media-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Primary image */
.card__media-primary,
.card__media-secondary {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.card__media-primary picture,
.card__media-secondary picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit, cover);
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* ─────────────────────────────────────────────────────────────────
   HOVER SECOND IMAGE
   ───────────────────────────────────────────────────────────────── */

.card--has-hover .card__media-secondary {
  z-index: 2;
  opacity: 0;
  will-change: opacity;
  transition: opacity 160ms ease;
}

.card--has-hover .card__media-primary {
  z-index: 1;
  opacity: 1;
  will-change: opacity;
  transition: opacity 160ms ease;
}

@media (hover: hover) and (pointer: fine) {

  .card--has-hover:hover .card__media-secondary,
  .card--has-hover:focus-within .card__media-secondary {
    opacity: 1;
  }

  .card--has-hover:hover .card__media-primary,
  .card--has-hover:focus-within .card__media-primary {
    opacity: 0;
  }
}

.card--has-hover.card--swatch-selected .card__media-secondary,
.card--has-hover.card--swatch-selected:hover .card__media-secondary,
.card--has-hover.card--swatch-selected:focus-within .card__media-secondary {
  opacity: 0;
}

.card--has-hover.card--swatch-selected .card__media-primary,
.card--has-hover.card--swatch-selected:hover .card__media-primary,
.card--has-hover.card--swatch-selected:focus-within .card__media-primary {
  opacity: 1;
}

@media (hover: none),
(pointer: coarse) {
  .card--has-hover .card__media-secondary {
    opacity: 0;
    transition: none;
  }

  .card--has-hover .card__media-primary {
    opacity: 1;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   MEDIA PLACEHOLDER
   ───────────────────────────────────────────────────────────────── */

.card__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  color: rgb(var(--color-border-rgb) / 0.5);
}

.card__media-placeholder .icon {
  --icon-size: 3rem;
}

/* ─────────────────────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────────────────────── */

.card__badges {
  position: absolute;
  top: var(--space-3, 0.75rem);
  inset-inline-start: var(--space-3, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  z-index: 2;
  pointer-events: none;
}

.card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  padding-inline: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-body-weight, 400);
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: var(--radius-badge, 999px);
  white-space: nowrap;
}

.card__badge--sale {
  background: var(--color-badge-sale-bg, var(--color-fg));
  color: var(--color-badge-sale-fg, var(--color-bg));
}

.card__badge--sold-out {
  background: var(--color-badge-sold-out-bg, var(--color-bg-secondary));
  color: var(--color-badge-sold-out-fg, var(--color-fg));
  border: 1px solid rgb(var(--color-border-rgb) / 0.4);
}

.card__badge--highlight {
  background: var(--color-badge-highlight-bg, var(--color-fg));
  color: var(--color-badge-highlight-fg, var(--color-bg));
}

.card__badge--custom {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* ─────────────────────────────────────────────────────────────────
   INFO AREA — static mode
   ───────────────────────────────────────────────────────────────── */

.card__info {
  display: flex;
  flex-direction: column;
  padding: var(--space-3, .75rem) var(--space-4) var(--space-4, 1rem);
  flex: 1 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   REVEAL GROUP — reveal mode
   Wraps card__info (z-index 2) + button (z-index 1).
   Anchored to the card bottom; overflow clips translateY animations.
   card__info slides first → button slides from behind with delay.
   ───────────────────────────────────────────────────────────────── */

.card__reveal-group {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  padding-bottom: 0.125rem;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: var(--color-card-overlay-bg, var(--color-bg));
  transform: translateY(calc(100% + var(--space-2, 0.5rem)));
  transition:
    transform var(--motion-duration-base, 300ms) var(--motion-ease, ease),
    opacity var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    visibility 0s linear var(--motion-duration-fast, 180ms);
  /* pointer-events off until revealed so underlying card links stay clickable */
  pointer-events: none;
}

/* card__info inside reveal group */
.card--reveal-info {
  --card-reveal-media-scale: 1;
  --card-reveal-media-scale-active: 0.60;
  --card-reveal-media-fit: cover;
  --card-reveal-media-bg: var(--color-card-overlay-bg, var(--color-bg));
  overflow: hidden;
}

.card--reveal-info .card__info {
  position: relative;
  z-index: 2;
  flex: none;
  padding: var(--space-3, .75rem) var(--space-3, .75rem) var(--space-3, .75rem);
  background: transparent;
  pointer-events: auto;
  align-items: center;
}

/* Reveal mode: shrink media proportionally so details can appear
   without hard-covering the image area. */
.card--reveal-info .card__media {
  background: var(--card-reveal-media-bg);
  transform: scale(var(--card-reveal-media-scale)) translateZ(0);
  transform-origin: center top;
  transition: transform var(--motion-duration-base, 300ms) var(--motion-ease, ease);
  will-change: transform;
}

.card--reveal-info .card__img {
  object-fit: var(--card-reveal-media-fit);
  object-position: center top;
}

.card--reveal-info .card__media-primary,
.card--reveal-info .card__media-secondary {
  inset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .card--reveal-info:hover,
  .card--reveal-info:focus-within {
    --card-reveal-media-scale: var(--card-reveal-media-scale-active);
  }
}

/* button inside reveal group — behind card__info (z-index 1) */
.card__quick-add--reveal {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  max-height: none;
  padding-inline: var(--space-3, 0.75rem);
  padding-block-end: var(--space-3, 0.75rem);
}

/* Re-enable pointer-events on the whole group when hovered */
.card--reveal-info:hover .card__reveal-group,
.card--reveal-info:focus-within .card__reveal-group {
  opacity: 1;
  visibility: visible;
  transform: translateY(2px);
  transition-delay: 0s;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────
   TOUCH / TABLET / SMALL SCREEN — unified static product-card layout
   Applied globally so card "reveal" + "static" behave the same on
   mobile and tablet:
     (hover: none)       → touch-first devices
     (pointer: coarse)   → coarse pointer environments
     (max-width: 999px)  → tablet and below by viewport width
   No section scoping — every context gets the fix automatically.
   ───────────────────────────────────────────────────────────────── */

@media (hover: none),
(pointer: coarse),
(max-width: 999px) {

  /* Un-position the group so it flows in the card's normal layout */
  .card__reveal-group {
    position: static;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: auto;
  }

  /* Reset ALL hidden-state properties so info is fully visible.
     Original block only set transform: none and missed opacity +
     visibility — content was invisible even after the override. */
  .card--reveal-info .card__info {
    pointer-events: auto;
    padding: var(--space-3, .75rem) var(--space-4) var(--space-4, 1rem);
    padding-inline: 0;
    background: transparent;
  }

  .card--reveal-info {
    --card-reveal-media-scale: 1;
    --card-reveal-media-scale-active: 1;
  }

  .card--reveal-info .card__media {
    background: transparent;
    transform: none;
  }

  .card--reveal-info .card__img {
    object-fit: var(--media-fit, cover);
    object-position: center;
  }

  .card--reveal-info .card__media-primary,
  .card--reveal-info .card__media-secondary {
    inset: 0;
  }

  /* Static info mode on touch/small screens:
     keep full media visible when details + CTA are shown below. */
  .card--product.card--with-below-quick-add .card__media,
  .card--product:has(.card__quick-add--below) .card__media {
    background: transparent;
    transform: none;
  }

  .card--product.card--with-below-quick-add .card__img,
  .card--product:has(.card__quick-add--below) .card__img {
    object-fit: var(--media-fit, cover);
    object-position: center;
  }

  .card--product.card--with-below-quick-add .card__media-primary,
  .card--product.card--with-below-quick-add .card__media-secondary,
  .card--product:has(.card__quick-add--below) .card__media-primary,
  .card--product:has(.card__quick-add--below) .card__media-secondary {
    inset: 0;
  }

  /* Reset reveal button — show it so users can tap on mobile */
  .card__quick-add--reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    padding-inline: 0;
    padding-block-end: var(--space-3, 0.75rem);
    transition: none;
  }

  /* Static mode: hide the overlay (inside image) and show the below-content
     button instead — both modes now look identical on mobile/touch. */
  .card__quick-add--overlay {
    display: none;
  }

  .card__quick-add.card__quick-add--below {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────────
   VENDOR
   Uses --text-xs theme token; no manual uppercase — vendor text is
   left as-is so merchant copy is respected.
   ───────────────────────────────────────────────────────────────── */

.card__vendor {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}

.card__vendor-link {
  color: inherit;
  text-decoration: none;
}

.card__vendor-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ─────────────────────────────────────────────────────────────────
   TITLE
   ───────────────────────────────────────────────────────────────── */

.card__title {
  margin: 0;
  font-size: var(--heading-h6);
  font-weight: var(--font-heading-weight);
  line-height: 1.35;
}

.card__title-link {
  color: inherit;
  text-decoration: none;
  line-height: 1.12;
}

.card__title-link::after {
  /* Expand click area to entire card top half */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--media-ratio-height, 60%));
  pointer-events: auto;
}

.card.card--product:hover .card__title-link::after{
  z-index: -1;
}

.card__title-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ─────────────────────────────────────────────────────────────────
   PRICE  (card-price__ class contract)
   Font sizes use theme tokens --text-small / --text-xs.
   ───────────────────────────────────────────────────────────────── */

.card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0;
}

.card-price__main {
  font-size: var(--text-xs);
  font-weight: var(--font-body-weight);
  color: rgb(var(--color-price-regular-rgb, var(--color-text-body-rgb, var(--color-foreground-rgb))));
}

.card-price__compare {
  font-size: var(--text-xs);
  color: rgb(var(--color-price-compare-rgb, var(--color-text-muted-rgb, var(--color-foreground-rgb))));
  text-decoration: line-through;
}

.card-price--on-sale .card-price__main {
  color: rgb(var(--color-price-sale-rgb, var(--color-price-regular-rgb, var(--color-text-body-rgb))));
}

/* ─────────────────────────────────────────────────────────────────
   SWATCHES
   ───────────────────────────────────────────────────────────────── */

.card__swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--space-2);
}

.card__swatches--full {
  gap: 0.4rem;
}

.card__swatches--compact {
  gap: 0.25rem;
}

.card__swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-fg-muted);
  white-space: nowrap;
  inline-size: 1.83rem;
  block-size: 1.83rem;
  border: 1px dashed rgb(var(--color-border-rgb));
  padding: .1875rem;
  border-radius: 999px;
  pointer-events: none;
}

.card__swatch {
  display: inline-flex;
  position: relative;
  border: 1px solid rgb(var(--color-text-body-rgb) / 0);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0.1875rem;
  text-decoration: none;
  transition:
    border-color var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    box-shadow var(--motion-duration-fast, 180ms) var(--motion-ease, ease);
}

.card__swatch-chip {
  inline-size: 1.23rem;
  block-size: 1.23rem;
  border-radius: 999px;
  background: var(--swatch-bg, var(--color-bg-secondary));
  border: 1px solid rgb(var(--color-text-body-rgb) / .08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  transition: box-shadow var(--motion-duration-fast, .18s) var(--motion-ease, ease), transform var(--motion-duration-fast, .18s) var(--motion-ease, ease);
}

.card__swatches--compact .card__swatch {
  padding: 0.1875rem;
}

.card__swatches--full .card__swatch {
  padding: 0.1875rem;
}

.card__swatch:hover,
.card__swatch:focus-visible {
  border-color: rgb(var(--color-text-body-rgb) / 0.5);
  outline: none;
}

.card__swatch:focus-visible {
  border-color: rgb(var(--color-text-body-rgb) / 0.7);
  box-shadow: 0 0 0 3px rgb(var(--color-text-body-rgb) / 0.2);
}

.card__swatch.is-active {
  border-color: rgb(var(--color-text-body-rgb) / 0.5);
}

.card__swatch.is-sold-out::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -22%;
  width: 144%;
  border-top: 1px solid rgb(var(--color-text-body-rgb) / 0.4);
  transform: rotate(-30deg);
  transform-origin: center;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   QUICK ADD
   ───────────────────────────────────────────────────────────────── */

.card__quick-add-form {
  margin: 0;
}

.card__quick-add-btn,
.card__quick-add .btn {
  width: 100%;
  /* Slightly taller than btn--sm, not as tall as default — fits the overlay bar */
  --btn-padding-y: var(--space-3, 0.75rem);
}

/* ── Static mode: overlay inside card__media, slides up on card hover ── *
 * Desktop only — on touch/mobile this is hidden; card__quick-add--below
 * takes over so the button appears below content, not overlaid on the image.
 * ─────────────────────────────────────────────────────────────────────── */

.card__quick-add--overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-3, .75rem) var(--space-3, .75rem);
  transform: translateY(100%);
  pointer-events: none;
  transition:
    transform 280ms var(--motion-ease, ease),
    opacity 200ms var(--motion-ease, ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

@media (hover: hover) {

  .card--product:hover .card__quick-add--overlay,
  .card--product:focus-within .card__quick-add--overlay {
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ── Static mode: below-content button (mobile replacement for overlay) ── *
 * Hidden on desktop — card__quick-add--overlay handles hover interaction.
 * Shown on touch/mobile — see the (hover: none), (max-width: 699px) block.
 * ─────────────────────────────────────────────────────────────────────── */

.card__quick-add--below {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .card--reveal-info .card__media {
    transition: none;
    transform: scale(var(--card-reveal-media-scale)) translateZ(0);
  }

  .card--has-hover .card__media-secondary,
  .card--has-hover .card__media-primary,
  .card__reveal-group,
  .card__quick-add--overlay,
  .card--reveal-info .card__info,
  .card__quick-add--reveal {
    transition: none;
  }

  .card__quick-add--overlay {
    opacity: 1;
  }

  .card--has-hover .card__media-secondary {
    opacity: 0;
  }

  .card--has-hover .card__media-primary {
    opacity: 1;
  }
}

/* --- Migrated from assets/component-grid-slider.css --- */

/**
 * Theme — Grid Slider  (component-grid-slider.css)
 *
 * Shared CSS contract for every card-grid section.
 * Sections that use <grid-slider> must load this file.
 *
 * ──────────────────────────────────────────────────────────────────
 * LAYERING / SPECIFICITY NOTES
 * ──────────────────────────────────────────────────────────────────
 *   1. Base state  — no Swiper active, CSS grid fallback applies.
 *   2. Swiper live — .swiper-initialized is present on .grid-slider__swiper,
 *                    Swiper owns layout; CSS defers to Swiper.
 *   3. Nav/pagination styles are always present but visually hidden
 *      until Swiper shows them (buttons start hidden="true" in HTML).
 *
 * ──────────────────────────────────────────────────────────────────
 * CSS VARIABLE CONTRACT  (set per-section via scoped {% style %} block)
 * ──────────────────────────────────────────────────────────────────
 *   --grid-slider-cols-mobile   Number of columns in fallback grid (mobile).
 *   --grid-slider-cols-desktop  Number of columns in fallback grid (desktop).
 *   --grid-slider-gap           Gap between items (defaults to --space-5).
 */

/* ─────────────────────────────────────────────────────────────────
   OUTER SHELL
   ───────────────────────────────────────────────────────────────── */

grid-slider,
.grid-slider {
  display: block;
  position: relative;
}

/* Premium slider bleed: remove section-inner side gutter only while Swiper is active. */
grid-slider[data-edge-bleed="true"].is-swiper-active,
.grid-slider[data-edge-bleed="true"].is-swiper-active {
  --grid-slider-edge-gutter: var(--page-margin, 1.5rem);
  margin-inline: calc(var(--grid-slider-edge-gutter) * -1.0);
}

/* ─────────────────────────────────────────────────────────────────
   SWIPER HOST  (.grid-slider__swiper)
   Holds overflow so Swiper can clip slides.
   Before Swiper init: overflow is visible (grid lays out normally).
   After Swiper init: .swiper-initialized triggers overflow: hidden.
   ───────────────────────────────────────────────────────────────── */

/* Progressive: no overflow clip until Swiper takes over */

.grid-slider__swiper.swiper-initialized {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   TRACK  (.grid-slider__track)
   CSS fallback: multi-column grid.
   Swiper live: flex row (Swiper's own layout).
   ───────────────────────────────────────────────────────────────── */

/* Fallback grid — no Swiper */
.grid-slider__swiper:not(.swiper-initialized) .grid-slider__track {
  display: grid;
  gap: var(--grid-slider-gap, var(--space-5, 1.25rem));
  list-style: none;
  padding-left: 0;
  grid-template-columns: repeat(var(--grid-slider-cols-mobile, 2),
      minmax(0, 1fr));
}

@media (min-width: 700px) {
  .grid-slider__swiper:not(.swiper-initialized) .grid-slider__track {
    grid-template-columns: repeat(var(--grid-slider-cols-desktop, 4),
        minmax(0, 1fr));
  }
}

/* Swiper live — flex track */
.grid-slider__swiper.swiper-initialized .grid-slider__track {
  display: flex;
  box-sizing: content-box;
  will-change: transform;
  list-style: none;
  padding-left: 0;
}

/* Drag UX guard: prevent native image/link dragging from hijacking desktop
   swipe gestures inside Swiper card sliders. */
.grid-slider__swiper.swiper-initialized .card__media-link,
.grid-slider__swiper.swiper-initialized .card__img,
.grid-slider__swiper.swiper-initialized img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Slideshow-like motion profile for selected merchandising sliders */
.grid-slider[data-transition-profile="slideshow"].is-swiper-active .grid-slider__track {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}

/* ─────────────────────────────────────────────────────────────────
   ITEMS  (.grid-slider__item)
   Fallback: grid cell (width driven by grid template).
   Swiper live: flex item (width set by Swiper inline style).
   ───────────────────────────────────────────────────────────────── */

.grid-slider__item {
  min-width: 0;
  /* Flex properties matter only while Swiper is active. */
  flex-shrink: 0;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────
   SECTION HEADER WITH INLINE NAV
   Used when the section header row contains the slider nav group.
   ───────────────────────────────────────────────────────────────── */

.section__header--with-nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
  flex-wrap: wrap;
}

.section__header--with-nav .section__header-text {
  flex: 1 1 0;
  min-width: 0;
  max-inline-size: min(100%, 52rem);
}

.section__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   NAV WRAPPER  (.grid-slider__nav)
   Visually grouping the prev/next buttons.
   ───────────────────────────────────────────────────────────────── */

.grid-slider__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  flex-shrink: 0;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────
   BUTTONS  (.grid-slider__btn)
   Circular paired arrows — prev is outlined, next is filled dark.
   Matches the testimonial pager pattern across all slider sections.
   ───────────────────────────────────────────────────────────────── */

.grid-slider__btn {
  --btn-slider-size: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-slider-size);
  height: var(--btn-slider-size);
  padding: 0;
  border: 1px solid rgb(var(--color-border-rgb));
  border-radius: 50%;
  background: transparent;
  color: rgb(var(--color-text-heading-rgb));
  line-height: 0;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    border-color var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    color var(--motion-duration-fast, 180ms) var(--motion-ease, ease);
}

.grid-slider__btn--next {
  background: rgb(var(--color-text-heading-rgb));
  border-color: rgb(var(--color-text-heading-rgb));
  color: rgb(var(--color-bg-main-rgb));
}

.grid-slider__btn[hidden] {
  display: none !important;
}

.grid-slider__btn:active {
  transform: scale(0.96);
}

.grid-slider__btn:focus-visible {
  outline: 2px solid rgb(var(--color-text-heading-rgb) / 0.6);
  outline-offset: -2px;
}

.grid-slider__btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.grid-slider__btn .icon {
  --icon-size: 0.875rem;
  --icon-stroke-width: 1.7;
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

[dir="rtl"] .grid-slider__btn--prev .icon {
  transform: rotate(180deg);
}

[dir="rtl"] .grid-slider__btn--next .icon {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .grid-slider__btn--prev:hover {
    background: rgb(var(--color-text-heading-rgb) / 0.05);
  }

  .grid-slider__btn--next:hover {
    background: rgb(var(--color-text-heading-rgb) / 0.85);
    border-color: rgb(var(--color-text-heading-rgb) / 0.85);
  }
}

/* ─────────────────────────────────────────────────────────────────
   PAGINATION  (.grid-slider__pagination)
   ───────────────────────────────────────────────────────────────── */

.grid-slider__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: var(--space-4, 1rem);
  min-height: 0.875rem;
  /* Reserve space so layout doesn't shift on init */
}

.grid-slider__pagination .swiper-pagination-bullet {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: rgb(var(--color-border-rgb) / 0.55);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    width var(--motion-duration-fast, 180ms) var(--motion-ease, ease),
    border-radius var(--motion-duration-fast, 180ms) var(--motion-ease, ease);
}

.grid-slider__pagination .swiper-pagination-bullet-active {
  background: var(--color-fg);
  width: 1rem;
  border-radius: 0.25rem;
}

.grid-slider__pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   SLIDER PROGRESS  (.slider-progress-wrap)
   Current/total indicator + animated fill track.
   Shared by merchandising grid sliders (featured products/collections).
   ───────────────────────────────────────────────────────────────── */

grid-slider .slider-progress-wrap {
  width: min(100px, 100%);
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Author CSS overrides the UA-only [hidden] display:none — re-assert it here. */
grid-slider .slider-progress-wrap[hidden] {
  display: none;
}

grid-slider .slider-progress-top {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading-family, sans-serif);
  font-size: var(--text-small);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / .75);
}

grid-slider .slider-progress-current,
grid-slider .slider-progress-total {
  min-width: 24px;
  text-align: center;
}

grid-slider .slider-progress-divider {
  opacity: .45;
  font-size: 20px;
}

grid-slider .slider-progress-track {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: rgb(var(--color-foreground-rgb) / .12);
  overflow: hidden;
}

grid-slider .slider-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--color-foreground-rgb));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media screen and (max-width: 699px) {
  grid-slider .slider-progress-wrap {
    width: min(220px, 100%);
    margin-top: 24px;
    gap: 10px;
  }

  grid-slider .slider-progress-top {
    font-size: var(--text-xs);
  }
}

/* ─────────────────────────────────────────────────────────────────
   DIVIDER MODE  (.grid-slider--divider on <grid-slider>)
   Replaces gap with vertical hairline separators between items.
   Active only in static-grid (no Swiper); Swiper mode keeps its gap.
   Technique: items carry border-inline-end; -1px right margin on
   the track hides the trailing border of the last column without
   clipping card shadows.
   ───────────────────────────────────────────────────────────────── */

.grid-slider--divider .grid-slider__swiper:not(.swiper-initialized) .grid-slider__track {
  gap: 0;
  margin-inline-end: -1px;
  /* absorb trailing border of last column */
}

.grid-slider--divider .grid-slider__swiper:not(.swiper-initialized) .grid-slider__item {
  border-inline-end: 1px solid var(--border-color);
  padding-inline: var(--grid-slider-gap, var(--space-5, 1.25rem));
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
   Disable all transitions; Swiper speed is handled in JS (set to 0).
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .grid-slider__swiper.swiper-initialized .grid-slider__track,
  .grid-slider__btn,
  .grid-slider__pagination .swiper-pagination-bullet,
  .slider-progress-fill {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE BEHAVIOR overrides
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  /* Hide arrows on mobile for specific sections */
  .section-collection-list .grid-slider__nav,
  .section-featured-products .grid-slider__nav,
  .section-featured-collection .grid-slider__nav,
  .section-product-recommendations .grid-slider__nav,
  .section-recently-viewed-products .grid-slider__nav,
  .section-featured-blog .grid-slider__nav {
    display: none !important;
  }
}


/* --- Migrated from assets/component-page-header.css --- */

/* ── Page Header ──────────────────────────────────────────────────────────── *
 * Shared inner-page section header used by: collections list, blog, page,
 * and cart. Provides a consistent breadcrumb / eyebrow / title / description
 * block with a bottom divider that separates the header from section content.
 * ──────────────────────────────────────────────────────────────────────────── */

.page-header {
  display: grid;
  gap: var(--space-2, 0.5rem);
  padding-block-end: var(--space-8, 2rem);
  margin-block-end: var(--space-10, 2.5rem);
  max-inline-size: min(72rem, 100%);
  margin-inline: 0;
}

/* ── Alignment modifier ──────────────────────────────────────────────────── */

.page-header--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.page-header__breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.page-header__breadcrumb-link,
.page-header__breadcrumb-current,
.page-header__breadcrumb-sep {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.6));
  text-decoration: none;
  text-transform: var(--body-text-transform);
  letter-spacing: var(--body-letter-spacing);
}

.page-header__breadcrumb-link {
  transition: color var(--motion-duration-fast, 180ms) var(--motion-ease, ease);
}

.page-header__breadcrumb-link:hover {
  color: var(--color-fg, var(--color-foreground));
}

.page-header__breadcrumb-sep {
  opacity: 0.4;
  user-select: none;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.page-header__eyebrow {
  margin: 0;
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.page-header__title {
  margin: 0;
  text-wrap: balance;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.page-header__description {
  margin: 0;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb)));
  max-inline-size: min(100%, 60ch);
}

.page-header--center .page-header__description {
  margin-inline: auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 700px) {
  .page-header {
    padding-block-end: var(--space-10, 2.5rem);
    gap: var(--space-3, 0.75rem);
  }
}

@media (min-width: 1000px) {
  .page-header {
    margin-block-end: var(--space-12, 3rem);
  }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .page-header__breadcrumb-link {
    transition: none;
  }
}


/* =============================================================================
   Page hero — image-backed inner-page header
   Full-bleed banner that hosts the shared page-header text over a background
   image. Exposes [data-header-overlay-anchor] so the main nav goes transparent,
   mirroring collection pages with a cover image.
   ============================================================================= */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  min-height: clamp(16rem, 38vw, 24rem);
  background: var(--color-bg-secondary, var(--color-bg));
  color: var(--color-fg);
  margin-bottom: var(--space-10);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(var(--color-bg-main-rgb) / var(--page-hero-overlay-alpha, 0.4));
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.page-hero--center .page-hero__inner {
  align-items: center;
  justify-content: center;
}

/* The reused page-header drops its own bottom spacing inside the hero. */
.page-hero .page-header {
  padding-block-end: 0;
  margin-block-end: 0;
  max-inline-size: min(60rem, 100%);
}

@media (max-width: 699px) {
  .page-hero {
    min-height: clamp(13rem, 52vw, 18rem);
  }
}


/* --- Migrated from assets/theme-collapsible-row.css --- */

/* =============================================================================
   Theme — Universal Collapsible Row
   Shared by section collapsible content, product information rows, and future
   collapsible interfaces.
   ============================================================================= */

.collapsible-row {
  border: none;
  border-bottom: 1px solid rgb(var(--color-border-rgb) / .45);
  background: transparent;
  display: block;
}

.collapsible-row + .collapsible-row {
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.45);
}

.collapsible-row__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: rgb(var(--color-text-heading-rgb, var(--color-text-body-rgb)));
  transition:
    color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease);
}

.collapsible-row__summary::-webkit-details-marker {
  display: none;
}

.collapsible-row__summary::marker {
  display: none;
}

.collapsible-row__summary:hover {
  color: rgb(var(--color-text-body-rgb));
}

.collapsible-row__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.collapsible-row__summary-main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.collapsible-row__summary-icon {
  width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)) / 0.9);
  flex-shrink: 0;
  transition:
    color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-fast) var(--motion-ease),
    background-color var(--motion-duration-fast) var(--motion-ease),
    border-color var(--motion-duration-fast) var(--motion-ease);
}

.collapsible-row__summary-custom-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collapsible-row__heading {
  margin: 0;
  min-width: 0;
  color: rgb(var(--color-text-heading-rgb, var(--color-text-body-rgb)));
}

.collapsible-row__toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-text-heading-rgb, var(--color-text-body-rgb)));
  flex-shrink: 0;
}

.collapsible-row__toggle-plus,
.collapsible-row__toggle-minus,
.collapsible-row__toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    color var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-normal) var(--motion-ease);
}

.collapsible-row__toggle-minus {
  opacity: 0;
  transform: scale(0.84);
  position: absolute;
}

.collapsible-row[open] .collapsible-row__toggle-plus {
  opacity: 0;
  transform: scale(0.84);
}

.collapsible-row[open] .collapsible-row__toggle-minus {
  opacity: 1;
  transform: scale(1);
}

.collapsible-row[open] .collapsible-row__toggle-chevron {
  transform: rotate(180deg);
}

.collapsible-row__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--motion-duration-slow) var(--motion-ease),
    opacity var(--motion-duration-fast) var(--motion-ease);
}

.collapsible-row[open] .collapsible-row__body {
  max-height: var(--collapsible-row-content-height, 0px);
  opacity: 1;
}

.collapsible-row[data-collapsible-closing='true'] .collapsible-row__body {
  max-height: 0;
  opacity: 0;
}

.collapsible-row__body-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(var(--space-unit) * -1));
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    transform var(--motion-duration-normal) var(--motion-ease);
}

.collapsible-row[open] .collapsible-row__body-inner {
  opacity: 1;
  transform: translateY(0);
}

.collapsible-row[data-collapsible-closing='true'] .collapsible-row__body-inner {
  opacity: 0;
  transform: translateY(calc(var(--space-unit) * -1));
}

.collapsible-row[data-collapsible-closing='true'] .collapsible-row__toggle-chevron {
  transform: rotate(0deg);
}

.collapsible-row[data-collapsible-closing='true'] .collapsible-row__toggle-plus {
  opacity: 1;
  transform: scale(1);
}

.collapsible-row[data-collapsible-closing='true'] .collapsible-row__toggle-minus {
  opacity: 0;
  transform: scale(0.84);
}

.collapsible-row__content {
  padding-block-end: var(--space-5);
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-small, 0.875rem);
  line-height: var(--line-height-body, 1.6);
  text-align: left;
}

.collapsible-row__content :last-child {
  margin-bottom: 0;
}

.collapsible-row__cta {
  padding-block-end: var(--space-5);
  text-align: left;
}

/* Product variant mirrors Collapsible Content section styling */
.collapsible-row--product .collapsible-row__summary {
  min-height: 4.15rem;
  padding-block: var(--space-5);
  column-gap: var(--space-4);
}

.collapsible-row--product .collapsible-row__summary-main {
  column-gap: var(--space-4);
}

.collapsible-row--product .collapsible-row__summary-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-border-rgb) / 0.55);
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)));
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)) / 0.88);
}

.collapsible-row--product .collapsible-row__summary-icon--image {
  border: none;
  background: transparent;
  border-radius: var(--radius-component, 0);
}

.collapsible-row--product .collapsible-row__summary-icon--image .collapsible-row__summary-custom-icon {
  border-radius: var(--radius-component, 0);
}

.collapsible-row--product[open] .collapsible-row__summary-icon:not(.collapsible-row__summary-icon--image) {
  background: rgb(var(--color-text-heading-rgb));
  border-color: rgb(var(--color-text-heading-rgb));
  color: rgb(var(--color-bg-main-rgb));
}

.collapsible-row--product .collapsible-row__toggle-chevron {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)) / 0.75);
}

.collapsible-row--product[open] .collapsible-row__toggle-chevron {
  color: rgb(var(--color-text-heading-rgb));
}

.collapsible-row--product .collapsible-row__heading {
  font-family: var(--font-body);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: var(--text-small);
  line-height: var(--line-height-body, 1.6);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: rgb(var(--color-text-body-rgb));
}

.collapsible-row--product .collapsible-row__content {
  max-width: 58ch;
}

@media (max-width: 699px) {
  .collapsible-row--product .collapsible-row__summary {
    min-height: 3.5rem;
    padding-block: var(--space-4);
  }

  .collapsible-row--product .collapsible-row__summary-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-row__body,
  .collapsible-row__body-inner,
  .collapsible-row__toggle-plus,
  .collapsible-row__toggle-minus,
  .collapsible-row__toggle-chevron {
    transition: none;
  }
}


/* --- Customer Auth (login, register, activate, reset) --- */

.customer-auth {
  max-width: min(100%, 28rem);
  margin-inline: auto;
  display: grid;
  gap: var(--space-8);
}

.customer-auth__panel {
  display: grid;
  gap: var(--space-6);
  animation: customerFadeUp var(--motion-duration-normal) var(--motion-ease) both;
}

.customer-auth__panel--recover {
  display: none;
}

#recover.customer-auth__panel--recover:target {
  display: grid;
}

#recover.customer-auth__panel--recover:target + .customer-auth__panel--login {
  display: none;
}

.customer-auth__heading {
  margin: 0;
  text-align: center;
  letter-spacing: -0.015em;
}

.customer-auth__subtext {
  margin: 0;
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
  text-align: center;
  font-size: var(--text-small);
  line-height: 1.6;
}

.customer-auth__form {
  display: grid;
  gap: var(--space-5);
}

.customer-auth__errors {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--style-border-radius-inputs, var(--radius-form, 0.5rem));
  background: rgb(220 38 38 / 0.06);
  border: 1px solid rgb(220 38 38 / 0.15);
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-small);
  line-height: 1.5;
}

.customer-auth__success {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--style-border-radius-inputs, var(--radius-form, 0.5rem));
  background: rgb(22 163 74 / 0.06);
  border: 1px solid rgb(22 163 74 / 0.15);
  color: rgb(var(--color-text-body-rgb));
  font-size: var(--text-small);
  line-height: 1.5;
}

.customer-auth__links {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.customer-auth__links--center {
  justify-items: center;
}

.customer-auth__link {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
  text-decoration: none;
  font-size: var(--text-small);
  position: relative;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.customer-auth__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.customer-auth__link:hover,
.customer-auth__link:focus-visible {
  color: rgb(var(--color-text-heading-rgb, var(--color-link-rgb)));
}

.customer-auth__link:hover::after,
.customer-auth__link:focus-visible::after {
  opacity: 0.8;
}

.customer-auth__divider {
  border: 0;
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.25);
  margin: var(--space-4) 0 0;
}

.customer-auth__actions {
  display: grid;
  gap: var(--space-3);
}

.customer-auth__name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 479px) {
  .customer-auth__name-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes customerFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- Customer Pages (account, order, addresses) --- */

.customer-page {
  max-width: min(100%, 72rem);
  margin-inline: auto;
  display: grid;
  gap: var(--space-10);
  animation: customerFadeUp var(--motion-duration-normal) var(--motion-ease) both;
}

.customer-page__header {
  display: grid;
  gap: var(--space-4);
}

.customer-page__title {
  margin: 0;
  letter-spacing: -0.015em;
}

.customer-page__subtext {
  margin: 0;
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
  font-size: var(--text-small);
  line-height: 1.6;
}

.customer-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-1);
}

.customer-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
}

.customer-page__meta .customer-page__subtext {
  position: relative;
}

.customer-page__meta .customer-page__subtext + .customer-page__subtext::before {
  content: '';
  position: absolute;
  left: calc(var(--space-5) / -2 - 0.5px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: rgb(var(--color-border-rgb) / 0.5);
}

.customer-page__card {
  border: 1px solid rgb(var(--color-border-rgb) / 0.3);
  border-radius: var(--style-border-radius-inputs, var(--radius-form, 0.625rem));
  padding: var(--space-6);
  background: rgb(var(--color-bg-main-rgb));
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .customer-page__card {
    padding: var(--space-8);
  }
}

/* --- Orders Table --- */

.customer-table-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--space-6) * -1);
  padding: 0 var(--space-6);
}

@media (min-width: 700px) {
  .customer-table-wrap {
    margin: 0 calc(var(--space-8) * -1);
    padding: 0 var(--space-8);
  }
}

.customer-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 36rem;
}

.customer-table thead {
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.3);
}

.customer-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  color: rgb(var(--color-text-muted-rgb, var(--color-text-heading-rgb)));
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 0;
  vertical-align: top;
}

.customer-table th:first-child {
  padding-left: var(--space-1);
}

.customer-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.15);
  font-size: var(--text-small);
  vertical-align: top;
}

.customer-table td:first-child {
  padding-left: var(--space-1);
}

.customer-table tbody tr {
  transition: background var(--motion-duration-fast) var(--motion-ease);
}

.customer-table tbody tr:hover {
  background: rgb(var(--color-border-rgb) / 0.04);
}

.customer-table tbody tr:last-child td {
  border-bottom: 0;
}

.customer-table td a {
  color: rgb(var(--color-text-heading-rgb));
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.customer-table td a:hover {
  opacity: 0.7;
}

/* --- Status Badges --- */

.customer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  background: rgb(var(--color-border-rgb) / 0.1);
  color: rgb(var(--color-text-body-rgb));
}

.customer-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

.customer-status-badge--paid,
.customer-status-badge--fulfilled {
  background: rgb(22 163 74 / 0.08);
  color: rgb(22 130 60);
}

.customer-status-badge--paid::before,
.customer-status-badge--fulfilled::before {
  opacity: 0.7;
}

.customer-status-badge--pending,
.customer-status-badge--partial {
  background: rgb(234 179 8 / 0.1);
  color: rgb(161 121 0);
}

.customer-status-badge--unfulfilled {
  background: rgb(var(--color-border-rgb) / 0.08);
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
}

/* --- Addresses --- */

.customer-addresses__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .customer-addresses__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.customer-addresses__item {
  border: 1px solid rgb(var(--color-border-rgb) / 0.3);
  border-radius: var(--style-border-radius-inputs, var(--radius-form, 0.625rem));
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  transition: border-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease);
}

.customer-addresses__item:hover {
  border-color: rgb(var(--color-border-rgb) / 0.55);
}

.customer-addresses__default {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-text-heading-rgb));
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(var(--color-border-rgb) / 0.1);
  justify-self: start;
}

.customer-addresses__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: rgb(var(--color-text-heading-rgb));
  font-size: var(--text-small);
  font-weight: 500;
  padding: var(--space-3) 0;
  list-style: none;
  user-select: none;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.customer-addresses__toggle::-webkit-details-marker {
  display: none;
}

.customer-addresses__toggle::marker {
  content: '';
}

.customer-addresses__toggle-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(var(--color-border-rgb) / 0.1);
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              background var(--motion-duration-fast) var(--motion-ease);
  flex-shrink: 0;
}

.customer-addresses__toggle-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

details[open] > .customer-addresses__toggle .customer-addresses__toggle-icon {
  transform: rotate(180deg);
  background: rgb(var(--color-border-rgb) / 0.18);
}

.customer-addresses__toggle:hover {
  color: rgb(var(--color-link-rgb, var(--color-text-heading-rgb)));
}

.customer-addresses__toggle:hover .customer-addresses__toggle-icon {
  background: rgb(var(--color-border-rgb) / 0.18);
}

.customer-addresses__form {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.2);
  animation: customerFadeUp var(--motion-duration-fast) var(--motion-ease) both;
}

.customer-addresses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .customer-addresses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.customer-addresses__item-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
}

.customer-addresses__checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.customer-addresses__checkbox-row label {
  font-size: var(--text-small);
  cursor: pointer;
}

.customer-addresses__add-card {
  list-style: none;
}

.customer-addresses__add-card > summary {
  list-style: none;
}

.customer-addresses__add-card > summary::-webkit-details-marker {
  display: none;
}

.customer-addresses__add-card > summary::marker {
  content: '';
}

/* --- Order Detail --- */

.customer-order__totals {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  padding-top: var(--space-5);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.3);
}

.customer-order__totals-row {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  font-size: var(--text-small);
  min-width: 200px;
  justify-content: space-between;
}

.customer-order__totals-row:last-child {
  padding-top: var(--space-3);
  border-top: 1px solid rgb(var(--color-border-rgb) / 0.2);
  margin-top: var(--space-1);
  font-size: var(--text-body);
}

.customer-order__totals-row span {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
}

.customer-order__totals-row:last-child span {
  color: rgb(var(--color-text-heading-rgb));
}

.customer-order__price-compare {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
  opacity: 0.65;
}

.customer-order__price-current {
  font-weight: 500;
}

.customer-order__discounts {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0;
}

.customer-order__status-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .customer-order__status-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.customer-order__status-title {
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.customer-order__status-copy {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
}

/* --- Pagination --- */

.customer-pagination {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

.customer-pagination .pagination {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.customer-pagination a,
.customer-pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--style-border-radius-inputs, var(--radius-form, 0.375rem));
  font-size: var(--text-small);
  text-decoration: none;
  color: rgb(var(--color-text-body-rgb));
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}

.customer-pagination a:hover {
  background: rgb(var(--color-border-rgb) / 0.1);
}

.customer-pagination span.current {
  background: rgb(var(--color-text-heading-rgb));
  color: rgb(var(--color-bg-main-rgb));
  font-weight: 500;
}

/* --- Empty State --- */

.customer-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
}

.customer-empty-state__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  opacity: 0.25;
}

.customer-empty-state__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-empty-state__text {
  color: rgb(var(--color-text-muted-rgb, var(--color-text-body-rgb)));
  font-size: var(--text-small);
  margin: 0;
}


/* --- Migrated from assets/component-card-collection.css --- */

/**
 * Theme — Collection Card  (component-card-collection.css)
 *
 * Styles for card-collection.liquid.
 * Load once per section that renders collection cards.
 *
 * ──────────────────────────────────────────────────────────────────
 * CSS VARIABLE CONTRACT  (set per-instance via inline style)
 * ──────────────────────────────────────────────────────────────────
 *   --card-collection-ratio   Aspect ratio (e.g. 3/4, 1/1, 4/3).
 *   --card-collection-fit     object-fit value (cover | contain).
 *   --overlay-text-color      Text color for overlaid info block.
 *
 * Shared section helpers (border/eyebrow/subheading) are defined globally
 * in theme.css and intentionally not duplicated in component styles.
 */

/* ─────────────────────────────────────────────────────────────────
   SECTION HEADER ALIGNMENT MODIFIERS
   Applied by the collection-list section when heading_alignment
   is set by the merchant.
   ───────────────────────────────────────────────────────────────── */

.section__header-text--center {
  text-align: center;
}

.section__header-text--right {
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────
   CARD BASE
   The entire card is an <a> — no inner link needed.
   ───────────────────────────────────────────────────────────────── */

.card-collection {
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 100%;
  border-radius: var(--radius-card, var(--radius-component, 4px));
  overflow: hidden;
  background: var(--color-card-bg, var(--color-bg));
}

.card-collection:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   MEDIA SHELL
   ───────────────────────────────────────────────────────────────── */

.card-collection__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--card-collection-ratio, 3 / 4);
  background: var(--color-bg-secondary);
  border-radius: inherit;
  flex-shrink: 0;
}

.card-collection__img {
  width: 100%;
  height: 100%;
  object-fit: var(--card-collection-fit, cover);
  display: block;
  transform: scale(1) translateZ(0);
  transition: transform 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .card-collection__img {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PLACEHOLDER
   ───────────────────────────────────────────────────────────────── */

.card-collection__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
}

.card-collection__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────
   OVERLAY TINT
   Absolutely positioned over the image; opacity injected inline.
   ───────────────────────────────────────────────────────────────── */

.card-collection__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   INFO BLOCK — below-image variant (.card-collection--image)
   ───────────────────────────────────────────────────────────────── */

.card-collection__info {
  padding: var(--space-3, .75rem) var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────
   INFO BLOCK — overlaid variant (.card-collection--image_overlay)
   Sits at the bottom of the media shell, above the tint overlay.
   ───────────────────────────────────────────────────────────────── */

.card-collection__info--overlaid {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  color: var(--overlay-text-color, #fff);
  /* Gradient ensures legibility when enable_overlay is off */
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.55) 0%,
    rgb(0 0 0 / 0) 100%
  );
  border-radius: 0 0 var(--radius-card, var(--radius-component, 4px))
                 var(--radius-card, var(--radius-component, 4px));
}

/* ─────────────────────────────────────────────────────────────────
   INFO ELEMENTS
   ───────────────────────────────────────────────────────────────── */

.card-collection__title {
  margin: 0;
  color: inherit;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.card-collection__count {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.7);
  line-height: 1.4;
}

.card-collection__description {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.7);
  line-height: 1.4;
}

/* When overlaid, count + description inherit the custom text color */
.card-collection__info--overlaid .card-collection__count,
.card-collection__info--overlaid .card-collection__description {
  color: inherit;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────
   TEXT ALIGNMENT MODIFIERS
   Applied via .card-collection--left / .card-collection--center
   ───────────────────────────────────────────────────────────────── */

.card-collection--center .card-collection__info {
  text-align: center;
}

.card-collection--center .card-collection__info--overlaid {
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
   OVERLAY CARD: media fills full card height
   ───────────────────────────────────────────────────────────────── */

.card-collection--image_overlay {
  overflow: hidden;
}

.card-collection--image_overlay .card-collection__media {
  /* In overlay mode the media IS the card — fill all available height */
  flex: 1 1 auto;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .card-collection:hover .card-collection__img {
    transform: scale(1.055) translateZ(0);
  }
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION — card image scale
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card-collection:hover .card-collection__img {
    transform: none;
  }
}


/* --- Migrated from assets/component-card-article.css --- */

/**
 * Theme — Article Card  (component-card-article.css)
 *
 * Styles for card-article.liquid and the section-featured-blog shell.
 * Load once per section that renders article cards.
 *
 * ──────────────────────────────────────────────────────────────────
 * CSS VARIABLE CONTRACT  (set via per-section {% style %} block)
 * ──────────────────────────────────────────────────────────────────
 *   --ca-ratio      Aspect ratio for the card media (e.g. 4/3, none).
 *   --ca-img-h      Image height: 100% for fixed ratio, auto for adapt.
 *   --ca-fit        object-fit value (cover | contain).
 *
 * Shared section helpers (border/eyebrow/subheading) are defined globally
 * in theme.css and intentionally not duplicated here.
 */

/* ─────────────────────────────────────────────────────────────────
   CARD ARTICLE — ROOT
   Full-card anchor: single interactive surface, no inner link needed.
   ───────────────────────────────────────────────────────────────── */

.card-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0; /* prevent flex overflow in slider mode */
  text-decoration: none;
  color: inherit;
  position: relative;
}

.card-article:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-component, 0);
}

/* ─────────────────────────────────────────────────────────────────
   MEDIA BLOCK
   ───────────────────────────────────────────────────────────────── */

.card-article__media {
  aspect-ratio: var(--ca-ratio, 4/3);
  overflow: hidden;
  border-radius: var(--radius-component, 0);
  margin-block-end: var(--space-4, 1rem);
  background-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.08);
  flex-shrink: 0;
}

.card-article__media--placeholder {
  aspect-ratio: var(--ca-placeholder-ratio, 4/3);
}

.card-article__img {
  display: block;
  width: 100%;
  height: var(--ca-img-h, 100%);
  object-fit: var(--ca-fit, cover);
  transform: scale(1) translateZ(0);
  transition: transform 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

@media (pointer: fine) {
  .card-article:hover .card-article__img {
    transform: scale(1.055) translateZ(0);
  }
}

/* No-image placeholder */
.card-article__img--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-fg-subtle, rgb(var(--color-foreground-rgb) / 0.35));
  background-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.06);
}

/* ─────────────────────────────────────────────────────────────────
   CONTENT BLOCK
   ───────────────────────────────────────────────────────────────── */

.card-article__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 var(--space-4) var(--space-4);
  gap: var(--space-2, 0.5rem);
}

@media (min-width: 700px) {
  .card-article__content {
    gap: var(--space-3, 0.75rem);
  }
}

/* ─────────────────────────────────────────────────────────────────
   META ROW  (date · read time)
   ───────────────────────────────────────────────────────────────── */

.card-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-3, 0.75rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.55));
  margin-block-end: var(--space-1, 0.25rem);
  line-height: 1.4;
}

.card-article__meta > * + *::before {
  content: '\2014'; /* em dash */
  margin-inline-end: var(--space-3, 0.75rem);
  opacity: 0.45;
}

/* ─────────────────────────────────────────────────────────────────
   TITLE
   ───────────────────────────────────────────────────────────────── */

.card-article__title {
  margin: 0;
  /* Override .heading display so line-clamp works */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-fg-heading, var(--color-fg));
}

.card-article__title-text {
  background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-block-end: 1px;
  transition: background-size 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ─────────────────────────────────────────────────────────────────
   EXCERPT
   ───────────────────────────────────────────────────────────────── */

.card-article__excerpt {
  margin: 0;
  font-size: var(--text-small, 0.875rem);
  line-height: 1.6;
  color: var(--color-fg-muted, rgb(var(--color-foreground-rgb) / 0.55));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────
   CTA LINK
   ───────────────────────────────────────────────────────────────── */

.card-article__cta {
  justify-content: flex-start;
  gap: var(--space-2, 0.5rem);
  margin-block-start: var(--space-3, 0.75rem);
  align-self: flex-start;
}

.card-article__cta .icon {
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease, ease);
}

@media (pointer: fine) {
  .card-article:hover .card-article__cta .icon {
    transform: translateX(3px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   PLACEHOLDER STATE  (no blog selected in editor)
   ───────────────────────────────────────────────────────────────── */

.card-article--placeholder {
  pointer-events: none;
}

.card-article--placeholder .card-article__media {
  background-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.1);
}

.card-article--placeholder .card-article__title,
.card-article--placeholder .card-article__excerpt,
.card-article--placeholder .card-article__meta,
.card-article--placeholder .card-article__cta {
  color: var(--color-fg-heading, var(--color-fg));
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card-article__img,
  .card-article__title-text,
  .card-article__cta .icon {
    transition: none !important;
    animation: none !important;
  }
}


/* --- Migrated from assets/theme-product-content-blocks.css --- */

/* =============================================================================
   Theme Theme — Product Content Blocks
   File: assets/theme-product-content-blocks.css
   Loaded by: snippets/product-price.liquid (shared; always loaded)
   Covers: description, rating, sku, vendor, text
   ============================================================================= */

/* ─── DESCRIPTION ────────────────────────────────────────────────────────── */
.product-block__description {
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  font-weight: 300;
  letter-spacing: 0.2px;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Clamped variant — line count driven by Liquid via CSS var */
.product-block__description--clamped {
  display: -webkit-box;
  -webkit-line-clamp: var(--clamp-lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-block__description--clamped.is-open {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Show more / Show less button */
.product-block__show-more {
  background: none;
  border: none;
  font-family: var(--font-body-family);
  font-size: calc(var(--text-xs) * 0.92);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s var(--motion-ease);
}

.product-block__show-more:hover { color: var(--color-link-hover, rgb(var(--color-link-hover-rgb, var(--color-link-rgb)))); }
.product-block__show-more:focus-visible {
  outline: 2px solid var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  outline-offset: 2px;
}

/* Arrow indicator */
.product-block__show-more::after {
  content: '↓';
  display: inline-block;
  transition: transform 0.3s var(--motion-ease);
}

.product-block__show-more[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ─── RATING ─────────────────────────────────────────────────────────────── */
.product-block__rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-block__stars {
  display: flex;
  gap: 2px;
}

.product-block__star {
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  font-size: var(--text-small);
  line-height: 1;
}

.product-block__star--empty {
  color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
}

.product-block__rating-value {
  font-size: var(--text-xs);
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  font-weight: 500;
  letter-spacing: 0.2px;
}

.product-block__rating-count {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
}

/* ─── META TEXT (SKU, Vendor) ────────────────────────────────────────────── */
.product-block__meta {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  letter-spacing: 0.5px;
  margin: 0;
}

.product-block__meta strong {
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  font-weight: 400;
}

/* ─── TEXT BLOCK ─────────────────────────────────────────────────────────── */
.product-block__text--body {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  font-weight: 300;
  max-width: 42ch;
  text-wrap: pretty;
}

.product-block__text--subtitle {
  font-size: var(--text-xs);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  letter-spacing: 0.5px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 42ch;
  text-wrap: pretty;
}

.product-block__text--caption {
  font-size: calc(var(--text-xs) * 0.84);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-block__show-more::after {
    transition: none;
  }
}


/* --- Migrated from assets/theme-product-trust-blocks.css --- */

/* =============================================================================
   Theme Theme — Trust Blocks
   File: assets/theme-product-trust-blocks.css
   Loaded by: snippets/product-share.liquid (covers both trust + share)
   ============================================================================= */

/* ─── TRUST BADGES ───────────────────────────────────────────────────────── */
.product-block__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  padding: 0 0;
}

.product-block__trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-block__trust-icon {
  width: 16px;
  height: 16px;
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  flex-shrink: 0;
}

.product-block__trust-text {
  font-size: calc(var(--text-xs) * 0.84);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
}

/* ─── SHARE BUTTONS ──────────────────────────────────────────────────────── */
.product-block__share {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-block__share-label {
  font-size: calc(var(--text-xs) * 0.76);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  margin-right: 8px;
}

.product-block__share-btn {
  width: 32px;
  height: 32px;
  min-width: 32px; /* ensure tap target is consistent */
  border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
  border-radius: 999px;
  background: transparent;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--motion-ease),
              color 0.25s var(--motion-ease);
  padding: 0;
}

.product-block__share-btn:hover {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

.product-block__share-btn:focus-visible {
  outline: 2px solid var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  outline-offset: 2px;
}

.product-block__share-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Copy feedback state */
.product-block__share-btn[data-copied="true"] {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-block__share-btn { transition: none; }
}


/* --- Migrated from assets/theme-product-advanced-blocks.css --- */

/* =============================================================================
   Theme Theme — Advanced Blocks
   File: assets/theme-product-advanced-blocks.css
   Loaded by: sections/main-product.liquid
   Covers: inventory, size guide, pickup, complementary, variations, selling plan, gift wrap
   ============================================================================= */

/* ─── INVENTORY STATUS ───────────────────────────────────────────────────── */
.product-block__inventory {
  --inventory-color-in: #639922;
  --inventory-color-low: #BA7517;
  --inventory-color-out: #E24B4A;
}

.product-block__inventory-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.product-block__inventory-dot--in {
  background: var(--inventory-color-in);
}

.product-block__inventory-dot--low {
  background: var(--inventory-color-low);
  position: relative;
}

.product-block__inventory-dot--low::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--inventory-color-low);
  animation: inv-pulse 1.8s ease-out infinite;
  opacity: 0;
}

@keyframes inv-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.product-block__inventory-dot--out {
  background: var(--inventory-color-out);
}

.product-block__inventory-text {
  color: inherit;
}

/* Style 1 — Inline text */
.product-block__inventory--inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: calc(var(--text-small) * 1.08);
  font-weight: 500;
  line-height: 1;
  overflow: visible;
}

.product-block__inventory--inline .product-block__inventory-dot {
  overflow: visible;
}

.product-block__inventory--inline .product-block__inventory-dot--low::after {
  inset: -4px;
  border-width: 1.5px;
  animation: inv-pulse 1.6s ease-out infinite;
}

.product-block__inventory--inline[data-inventory-status="in"] {
  color: #3B6D11;
}

.product-block__inventory--inline[data-inventory-status="low"] {
  color: #854F0B;
}

.product-block__inventory--inline[data-inventory-status="out"] {
  color: #A32D2D;
}

/* Style 2 — Bar indicator */
.product-block__inventory--bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-small);
  font-weight: 500;
  min-width: 120px;
}

.product-block__inventory--bar .product-block__inventory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.product-block__inventory--bar .product-block__inventory-text {
  color: rgb(var(--color-foreground-rgb));
}

.product-block__inventory--bar .product-block__inventory-count {
  font-size: calc(var(--text-xs) * 0.92);
  font-weight: 400;
  color: rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)));
}

.product-block__inventory--bar .product-block__inventory-track {
  height: 4px;
  border-radius: 100px;
  background: rgb(var(--color-foreground-rgb) / 0.1);
  overflow: hidden;
}

.product-block__inventory--bar .product-block__inventory-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
  display: block;
}

.product-block__inventory--bar[data-inventory-status="in"] .product-block__inventory-fill {
  background: var(--inventory-color-in);
  width: 90%;
}

.product-block__inventory--bar[data-inventory-status="low"] .product-block__inventory-fill {
  background: var(--inventory-color-low);
  width: 20%;
}

.product-block__inventory--bar[data-inventory-status="out"] .product-block__inventory-fill {
  background: var(--inventory-color-out);
  width: 0%;
}

@media (prefers-reduced-motion: reduce) {
  .product-block__inventory-dot--low::after {
    animation: none;
  }
}

/* ─── SIZE GUIDE TRIGGER ─────────────────────────────────────────────────── */
.product-block__size-guide {
  background: none;
  border: none;
  font-family: var(--font-body-family);
  font-size: calc(var(--text-xs) * 0.92);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.25s var(--motion-ease);
}

/* Partial-width underline that grows to full on hover */
.product-block__size-guide::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  transform: scaleX(0.3);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.4s var(--motion-ease),
              opacity 0.3s var(--motion-ease);
}

.product-block__size-guide:hover {
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
}

.product-block__size-guide:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.product-block__size-guide:focus-visible {
  outline: 2px solid var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  outline-offset: 3px;
}

.product-block__size-guide svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* ─── PICKUP AVAILABILITY ────────────────────────────────────────────────── */
/* Styles moved to component-pickup-availability.css (lazy-loaded). */

/* ─── COMPLEMENTARY PRODUCTS ─────────────────────────────────────────────── */
.product-block__comp-heading {
  font-size: calc(var(--text-xs) * 0.84);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  margin: 0 0 14px;
}

.product-block__comp-grid {
  display: grid;
  grid-template-columns: repeat(var(--comp-cols, 2), 1fr);
  gap: 10px;
}

.product-block__comp-card {
  background: var(--color-bg-secondary, rgb(var(--color-bg-secondary-rgb, var(--color-background-rgb))));
  border: 1px solid var(--border-color);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s var(--motion-ease);
}

.product-block__comp-card:hover {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

.product-block__comp-image {
  width: 44px;
  height: 52px;
  background: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
  flex-shrink: 0;
  overflow: hidden;
}

.product-block__comp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-block__comp-name {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  line-height: 1.4;
  margin: 0;
}

.product-block__comp-price {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  margin: 3px 0 0;
}

/* ─── PRODUCT VARIATIONS ─────────────────────────────────────────────────── */
.product-block__variations-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.product-block__variations-scroll::-webkit-scrollbar {
  display: none;
}

.product-block__variation-card {
  flex-shrink: 0;
  width: 72px;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: start;
}

.product-block__variation-image {
  width: 72px;
  height: 86px;
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.25s var(--motion-ease);
  background: var(--color-bg-secondary, rgb(var(--color-bg-secondary-rgb, var(--color-background-rgb))));
}

.product-block__variation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-block__variation-card:hover .product-block__variation-image,
.product-block__variation-card[aria-current="true"] .product-block__variation-image {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

.product-block__variation-name {
  font-size: calc(var(--text-xs) * 0.76);
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  text-align: center;
  letter-spacing: 0.5px;
  display: block;
}

/* ─── SELLING PLAN ───────────────────────────────────────────────────────── */
.product-block__plans-heading {
  font-family: var(--font-body-family);
  font-size: calc(var(--text-xs) * 0.84);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-fg-muted, rgb(var(--color-text-muted-rgb, var(--color-foreground-rgb)) / 0.95));
  margin: 0 0 10px;
}

.product-block__plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Plan row label */
.product-block__plan-label-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
  cursor: pointer;
  transition: border-color 0.25s var(--motion-ease);
}

.product-block__plan-label-wrap:hover {
  border-color: var(--color-fg, rgb(var(--color-foreground-rgb)));
}

/* Hide native radio */
.product-block__plan-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-block__plan-input:checked + .product-block__plan-label-wrap {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

/* Custom radio indicator */
.product-block__plan-radio {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--motion-ease);
}

.product-block__plan-input:checked + .product-block__plan-label-wrap .product-block__plan-radio {
  border-color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
}

.product-block__plan-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  border-radius: 1px;
  transform: scale(0);
  transition: transform 0.25s var(--motion-ease);
}

.product-block__plan-input:checked + .product-block__plan-label-wrap .product-block__plan-radio::after {
  transform: scale(1);
}

.product-block__plan-input:focus-visible + .product-block__plan-label-wrap {
  outline: 2px solid var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  outline-offset: 2px;
}

.product-block__plan-name {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-fg, rgb(var(--color-foreground-rgb)));
  flex: 1;
}

.product-block__plan-price {
  font-size: calc(var(--text-xs) * 0.92);
  color: var(--color-link-hover, rgb(var(--color-link-hover-rgb, var(--color-link-rgb))));
}

.product-block__plan-save {
  font-size: calc(var(--text-xs) * 0.76);
  background: rgb(var(--color-link-rgb, var(--color-foreground-rgb)) / 0.12);
  color: var(--color-link, rgb(var(--color-link-rgb, var(--color-foreground-rgb))));
  padding: 2px 7px;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ─── GIFT WRAP ──────────────────────────────────────────────────────────── */
/* ─── Gift wrap toggle ───────────────────────────────────────────────────── */

/* Hidden form checkbox — keeps its value for cart line properties */
.product-block__gift-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card wrapper */
.product-block__gift-card {
  --gift-green: #639922;
  --gift-green-dark: #3B6D11;
  --gift-green-bg: #EAF3DE;
  --gift-green-icon-bg: rgba(99, 153, 34, 0.15);
  --gift-border: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.75);
  --gift-border-hover: rgb(var(--color-border-rgb, var(--color-foreground-rgb)));
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgb(var(--color-bg-main-rgb));
  border: 0.5px solid var(--gift-border);
  border-radius: var(--border-radius-lg, 8px);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: border-color 0.18s var(--motion-ease, ease), box-shadow 0.18s var(--motion-ease, ease);
}

/* Green tint overlay — fades in when active */
.product-block__gift-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gift-green-bg);
  opacity: 0;
  transition: opacity 0.22s var(--motion-ease, ease);
  pointer-events: none;
}

.product-block__gift-card:hover:not(.is-active) {
  border-color: var(--gift-border-hover);
}

.product-block__gift-card.is-active {
  border-color: var(--gift-green);
}

.product-block__gift-card.is-active::before {
  opacity: 1;
}

/* Icon circle */
.product-block__gift-icon-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(var(--color-bg-secondary-rgb, var(--color-bg-main-rgb)));
  display: grid;
  place-items: center;
  transition: background 0.22s var(--motion-ease, ease);
}

.product-block__gift-icon {
  color: rgb(var(--color-text-secondary-rgb, var(--color-foreground-rgb)) / 0.75);
  transition: color 0.22s var(--motion-ease, ease);
}

.product-block__gift-card.is-active .product-block__gift-icon-wrap {
  background: var(--gift-green-icon-bg);
}

.product-block__gift-card.is-active .product-block__gift-icon {
  color: var(--gift-green-dark);
}

/* Text copy */
.product-block__gift-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.product-block__gift-title {
  font-size: var(--text-small, 14px);
  font-weight: 500;
  line-height: 1.35;
  color: rgb(var(--color-text-primary-rgb, var(--color-foreground-rgb)));
  transition: color 0.18s var(--motion-ease, ease);
}

.product-block__gift-card.is-active .product-block__gift-title {
  color: var(--gift-green-dark);
}

.product-block__gift-sub {
  font-size: var(--text-xs, 12px);
  line-height: 1.35;
  color: rgb(var(--color-text-secondary-rgb, var(--color-foreground-rgb)) / 0.75);
}

.product-block__gift-title-selected {
  display: none;
}

.product-block__gift-card.is-active .product-block__gift-title-default {
  display: none;
}

.product-block__gift-card.is-active .product-block__gift-title-selected {
  display: inline;
}

/* Pill toggle */
.product-block__gift-pill {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
}

.product-block__gift-pill-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.4);
  transition: background 0.22s var(--motion-ease, ease);
}

.product-block__gift-pill-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-block__gift-card.is-active .product-block__gift-pill-track {
  background: var(--gift-green);
}

.product-block__gift-card.is-active .product-block__gift-pill-thumb {
  transform: translateX(16px);
}

/* Focus ring on the hidden input surfaces on the card */
.product-block__gift-input:focus-visible ~ .product-block__gift-card {
  outline: 2px solid var(--gift-green);
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-block__size-guide::after,
  .product-block__comp-card,
  .product-block__variation-image,
  .product-block__plan-label-wrap,
  .product-block__plan-radio::after,
  .product-block__gift-card,
  .product-block__gift-card::before,
  .product-block__gift-icon-wrap,
  .product-block__gift-icon,
  .product-block__gift-title,
  .product-block__gift-sub,
  .product-block__gift-pill-track,
  .product-block__gift-pill-thumb {
    transition: none;
  }
  .product-block__plan-radio::after {
    transition: none;
  }
}

/* --- Card press micro-interaction (safe) --- */
.card.card--product,
.card-collection {
  transform-origin: center top;
  backface-visibility: hidden;
  transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .card.card--product,
  .card-collection {
    transition: none !important;
  }

  .card.card--product.is-card-press-releasing,
  .card-collection.is-card-press-releasing {
    animation: none !important;
  }
}

/* Add-to-cart / cart inventory error messages (visible, not just aria-live) */
.main-product__cart-error,
.main-product__selling-plan-error,
.quick-add-drawer__error,
.quick-add-product__error,
.theme-cart-item__error {
  margin-top: 0.5rem;
  color: rgb(var(--color-error-rgb, 220 53 69));
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Quick-add error sits with the buy buttons, centered like the footer actions. */
.quick-add-product__error {
  margin-top: 0.75rem;
  text-align: center;
}

.main-product__cart-error[hidden],
.main-product__selling-plan-error[hidden],
.quick-add-drawer__error[hidden],
.quick-add-product__error[hidden],
.theme-cart-item__error[hidden] {
  display: none;

..card__title,
.card__title a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}