/** Shopify CDN: Minification failed

Line 105:61 Expected ":"

**/
/*
 * Cautiva design tokens — single source of truth.
 *
 * Most semantic tokens route through Horizon's existing CSS custom properties
 * (declared in snippets/theme-styles-variables.liquid + per-color-scheme in
 * snippets/color-schemes.liquid) so merchant edits in the theme editor flow
 * through to Cautiva components. Placeholder *-base values are fallbacks for
 * surfaces outside a Horizon color-scheme context.
 *
 * Cautiva-specific scales (spacing, motion, container widths) intentionally
 * diverge from Horizon's — they're driven by docs/storefront-design-system.md
 * §2 (Sézane-tier visual language).
 *
 * Brand identity partner Phase 4j swap-in: update the four *-base hex values
 * below + Horizon's color-scheme settings; downstream components untouched.
 */

:root {
  /* — Color · base palette (Phase 4j placeholders — fallback only) — */
  --cautiva-color-foreground-base: #1a1814;
  --cautiva-color-background-base: #fbf8f4;
  --cautiva-color-accent-base: #b85c38;
  --cautiva-color-accent-hover-base: #964627;

  /*
   * — Color · semantic tokens (theme code reads ONLY these) —
   * Each prefers Horizon's color-scheme variable with a base fallback,
   * so editor changes flow through without touching component CSS.
   */
  --cautiva-color-foreground: var(--color-foreground, var(--cautiva-color-foreground-base));
  --cautiva-color-foreground-subtle: var(--color-foreground-muted, rgb(26 24 20 / 65%));
  --cautiva-color-background: var(--color-background, var(--cautiva-color-background-base));
  --cautiva-color-background-subtle: var(--color-input-background, #f4f0ea);
  --cautiva-color-border: var(--color-border, #d9d4ca);
  --cautiva-color-border-strong: var(--color-input-border, #a8a39b);

  /*
   * Accent passes WCAG 3:1 (large text + UI components). Borderline for 4.5:1
   * body-text AA — do not use the accent for small body text until Phase 4j
   * brand-identity values are re-tested with the partner's actual palette.
   */
  --cautiva-color-accent: var(--color-primary, var(--cautiva-color-accent-base));
  --cautiva-color-accent-hover: var(--color-primary-hover, var(--cautiva-color-accent-hover-base));

  /* — Color · state — uses Horizon's hardcoded error/success; muted bespoke warning/info — */
  --cautiva-color-success: var(--color-success, #006400);
  --cautiva-color-error: var(--color-error, #8b0000);
  --cautiva-color-warning: #a8782b;
  --cautiva-color-info: #4a5a73;

  /* — Color · interactive — */
  --cautiva-color-focus-ring: var(--cautiva-color-accent);
  --cautiva-color-overlay: rgb(26 24 20 / 60%);
  /*
   * Overlay foreground is intentionally not routed through a Horizon token —
   * text over a hero-image gradient must stay light regardless of the merchant's
   * color scheme. Horizon has no overlay-foreground equivalent.
   */
  --cautiva-color-overlay-foreground: #ffffff;

  /* — Typography · families wired to Horizon's merchant-editable font settings — */
  --cautiva-font-display: var(--font-heading--family);
  --cautiva-font-body: var(--font-body--family);

  /*
   * — Typography · size scale —
   * Mapped onto Horizon's `--font-size--*` ladder where values match.
   * `5xl` (72px) has no Horizon equivalent (Horizon caps at 56px) — bespoke fallback.
   */
  --cautiva-font-size-xs: var(--font-size--2xs);   /* 12px */
  --cautiva-font-size-sm: var(--font-size--sm);    /* 14px */
  --cautiva-font-size-base: var(--font-size--md);  /* 16px */
  --cautiva-font-size-md: var(--font-size--lg);    /* 18px */
  --cautiva-font-size-lg: var(--font-size--xl);    /* 20px */
  --cautiva-font-size-xl: var(--font-size--2xl);   /* 24px */
  --cautiva-font-size-2xl: var(--font-size--3xl);  /* 32px */
  --cautiva-font-size-3xl: var(--font-size--4xl);  /* 40px */
  --cautiva-font-size-4xl: var(--font-size--6xl);  /* 56px */
  --cautiva-font-size-5xl: 4.5rem;                 /* 72px — bespoke, no Horizon match */

  /* — Typography · weight, line-height, letter-spacing — Sézane spec, kept bespoke — */
  --cautiva-font-weight-light: 300;
  --cautiva-font-weight-regular: 400;
  --cautiva-font-weight-medium: 500;
  --cautiva-font-weight-semibold: 600;
  --cautiva-font-weight-bold: 700;

  --cautiva-line-height-tight: 1.1;
  --cautiva-line-height-snug: 1.3;
  --cautiva-line-height-normal: 1.5;
  --cautiva-line-height-relaxed: 1.65;

  --cautiva-letter-spacing-tight: -0.02em;
  --cautiva-letter-spacing-normal: 0;
  --cautiva-letter-spacing-wide: 0.04em;
  --cautiva-letter-spacing-caps: 0.08em;

  /*
   * — Spacing · 8-based scale, Sézane spec —
   * Intentionally diverges from Horizon's --padding-*/--gap-*/--margin-* scales
   * (which use irregular increments like 0.7rem / 0.8rem / 0.9rem). The Cautiva
   * scale is constrained on purpose so designers + engineers converge on one set.
   */
  --cautiva-space-1: 4px;
  --cautiva-space-2: 8px;
  --cautiva-space-3: 12px;
  --cautiva-space-4: 16px;
  --cautiva-space-6: 24px;
  --cautiva-space-8: 32px;
  --cautiva-space-12: 48px;
  --cautiva-space-16: 64px;
  --cautiva-space-24: 96px;

  /*
   * — Motion · Sézane spec, kept bespoke —
   * Horizon's --animation-speed-* values (62.5ms / 125ms / 150ms / 200ms) and
   * --ease-out-cubic (cubic-bezier(0.33, 1, 0.68, 1)) are designed for snappier
   * Shopify-template motion. Cautiva's slower, flatter ease-out matches Sézane's
   * deliberate restraint per docs/storefront-design-system.md §2.4.
   */
  --cautiva-duration-micro: 150ms;
  --cautiva-duration-default: 250ms;
  --cautiva-duration-long: 400ms;
  --cautiva-easing-default: cubic-bezier(0, 0, 0.2, 1);

  /*
   * Carousel crossfade is intentionally slower than --cautiva-duration-long.
   * 800ms reads as a deliberate editorial cut rather than a UI transition;
   * Lemaire + The Row sit in the 600-1000ms range for hero crossfades.
   * Reduced-motion zeroes durations above but the JS gate stops rotation
   * entirely under reduce, so the crossfade never fires in that mode.
   */
  --cautiva-carousel-transition-duration: 800ms;
  --cautiva-carousel-transition-easing: var(--ease-out-cubic, cubic-bezier(0.4, 0, 0.2, 1));

  /*
   * Film aspect ratios. 21:9 cinematic is the editorial default
   * (Aesop / Loewe / Bottega film inserts); 16:9 widescreen for the
   * broadcast-conventional moment; 100svh full-viewport remains opt-in
   * for true campaign-takeover moments only.
   */
  --cautiva-film-aspect-cinematic: 21 / 9;
  --cautiva-film-aspect-widescreen: 16 / 9;

  /* — Radius — wired to Horizon's merchant-editable border-radius scale — */
  --cautiva-radius-none: 0;
  --cautiva-radius-sm: var(--style-border-radius-xs);
  --cautiva-radius-md: var(--style-border-radius-sm);
  --cautiva-radius-pill: 999px;

  /* — Shadow — bespoke; Horizon's --shadow-button is too pronounced for Cautiva — */
  --cautiva-shadow-soft: 0 1px 2px rgb(26 24 20 / 6%), 0 4px 12px rgb(26 24 20 / 4%);
  --cautiva-shadow-medium: 0 4px 16px rgb(26 24 20 / 10%);
  /*
   * Text-shadow for white labels rendered directly over varied photography
   * (category-grid tiles, hero overlays). Subtle enough to preserve the
   * Sézane-restraint look while keeping AA contrast across both bright and
   * dark imagery without a per-tile gradient band.
   */
  --cautiva-shadow-label-text: 0 1px 2px rgb(0 0 0 / 35%);

  /*
   * — Layout · container widths —
   * Different use case from Horizon's --narrow-page-width (1440px) / --normal-page-width
   * (1920px) — those are outer page max-widths. Cautiva containers are content gutters
   * for prose, forms, and centered grids per the design-system spec.
   */
  --cautiva-container-narrow: 640px;
  --cautiva-container-default: 1200px;
  --cautiva-container-wide: 1600px;
  --cautiva-container-padding-inline: var(--cautiva-space-4);

  /* — Z-index ladder — wired to Horizon's --layer-* tokens for parity with stock UI — */
  --cautiva-z-base: var(--layer-base);
  --cautiva-z-sticky: var(--layer-sticky);
  --cautiva-z-overlay: var(--layer-overlay);
  --cautiva-z-drawer: var(--layer-menu-drawer);
  --cautiva-z-modal: var(--layer-temporary);
  --cautiva-z-toast: var(--layer-temporary);

  /* — Iconography — */
  --cautiva-icon-stroke-width: 1.5px;
  --cautiva-icon-size-inline: 16px;
  --cautiva-icon-size-standalone: 24px;
}

@media (min-width: 1024px) {
  :root {
    --cautiva-container-padding-inline: var(--cautiva-space-8);
  }
}

/*
 * B2B mode — cooler off-white background overrides the inherited color-scheme
 * background, signaling mayorista context. Applied via body class
 * `cautiva-mode-b2b` (snippets/cautiva-body-class.liquid).
 */
.cautiva-mode-b2b {
  --cautiva-color-background: #f1f2ee;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cautiva-duration-micro: 0ms;
    --cautiva-duration-default: 0ms;
    --cautiva-duration-long: 0ms;
  }
}