/** Shopify CDN: Minification failed

Line 400:0 Unexpected "@media"

**/
/* ============================================================
   ZAMPE & CUORI — Foundations
   Design tokens (colors, type, spacing, radii, shadows, motion)
   Source of truth: design_handoff_shopify_theme/tokens/colors_and_type.css
   Playfair Display is loaded via <link> in layout/theme.liquid
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR PRIMITIVES ---------- */

  /* Neutrals — warm, milky, slightly chalky */
  --crema-50:  #FBF7F1;   /* page background, lightest */
  --crema-100: #F5EFE5;   /* card background warm */
  --crema-200: #EDE3D3;   /* hairline divider on crema */
  --tortora-300: #D9C9B6; /* soft tortora, badges */
  --tortora-400: #B89F86; /* tortora medium, secondary text on crema */
  --tortora-500: #8E725F; /* tortora deep, body text alternative */
  --tortora-600: #6F5747; /* darker tortora, anchors */
  --tortora-700: #4A3A30; /* near-text */

  /* Celeste — dusty pet-print blue */
  --celeste-100: #E6EEF1;
  --celeste-200: #C8D8DE;
  --celeste-300: #9FB8C2;
  --celeste-400: #7B97A4; /* link color core */
  --celeste-500: #5C7C8A;

  /* Petrolio — primary CTA, deep teal-blue */
  --petrolio-400: #2E5763;
  --petrolio-500: #1F4350; /* primary CTA */
  --petrolio-600: #163542;
  --petrolio-700: #0F2832;

  /* Accent warmth — used very sparingly (sale tags, hearts) */
  --terracotta-400: #C97A5C;
  --terracotta-500: #B5654A;

  /* Verde acquisto — CTA commerciali (add-to-cart, checkout, paga) */
  --verde-300: #7FA889;
  --verde-400: #5E8A6B;
  --verde-500: #4A7558;
  --verde-600: #385E44;

  /* Semantic */
  --success-500: #5E8A6B;
  --warning-500: #C99A4A;
  --danger-500:  #B0533F;
  --info-500:    var(--celeste-400);

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:          var(--crema-50);
  --bg-soft:     var(--crema-100);
  --bg-card:     #FFFFFF;
  --bg-inverse:  var(--petrolio-500);

  --fg:          var(--tortora-700);   /* primary text */
  --fg-muted:    var(--tortora-500);
  --fg-soft:     var(--tortora-400);
  --fg-on-dark:  var(--crema-50);

  --border:      var(--crema-200);
  --border-strong: var(--tortora-300);

  --link:        var(--celeste-500);
  --link-hover:  var(--petrolio-500);

  /* CTA commerciali (acquisto): VERDE.
     We use verde-500 (not verde-400) so cream foreground passes
     WCAG AA at 14px regular weight (≈5.3:1 vs 3.85:1 on verde-400). */
  --cta-buy:        var(--verde-500);
  --cta-buy-hover:  var(--verde-600);
  --cta-buy-press:  var(--verde-600);
  --cta-buy-fg:     #FBF7F1;

  /* CTA standard (tutti gli altri bottoni): CELESTE */
  --cta:         var(--celeste-400);
  --cta-hover:   var(--celeste-500);
  --cta-press:   #4A6874;
  --cta-fg:      #FFFFFF;

  /* Petrolio resta per footer / contrasti scuri, non per CTA */
  --cta-soft:        var(--celeste-400);
  --cta-soft-hover:  var(--celeste-500);

  /* Bundle/upsell — PETROLIO */
  --cta-bundle:        var(--petrolio-500);
  --cta-bundle-hover:  var(--petrolio-600);
  --cta-bundle-fg:     #FBF7F1;

  /* Sale / wishlist — TERRACOTTA */
  --cta-sale:        var(--terracotta-500);
  --cta-sale-hover:  var(--terracotta-400);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Safety net: alias Dawn font tokens → Zampe design system tokens.
     Pages residue Dawn-vanilla (account, customer, search results) cercano
     --font-heading-family / --font-body-family. Senza questi alias cadono
     su fallback browser invece di Playfair/Montserrat. Zero impatto sulle
     section Zampe — usano --font-display / --font-body direttamente. */
  --font-heading-family: var(--font-display);
  --font-body-family:    var(--font-body);

  --fs-display:  clamp(48px, 6vw, 72px);
  --fs-h1:       clamp(36px, 4.5vw, 52px);
  --fs-h2:       clamp(28px, 3.2vw, 38px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --ls-display:  -0.01em;
  --ls-eyebrow:  0.18em;
  --ls-button:   0.04em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-sm:  8px;
  --radius-md:  12px;   /* minimum per brand brief */
  --radius-lg:  18px;   /* cards */
  --radius-xl:  28px;   /* hero modules */
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, warm-tinted ---------- */
  --shadow-xs:  0 1px 2px rgba(74, 58, 48, 0.06);
  --shadow-sm:  0 2px 8px rgba(74, 58, 48, 0.06), 0 1px 2px rgba(74, 58, 48, 0.04);
  --shadow-md:  0 8px 24px rgba(74, 58, 48, 0.08), 0 2px 6px rgba(74, 58, 48, 0.04);
  --shadow-lg:  0 18px 40px rgba(74, 58, 48, 0.10), 0 4px 12px rgba(74, 58, 48, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- MOTION ---------- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-pad-desktop: 48px;
  --container-pad-tablet:  32px;
  --container-pad-mobile:  20px;

  /* ---------- SECTION SPACING (vertical) ----------
     Three-tier scale for top/bottom padding between sections.
     Tuned conservatively (~33% tighter than the first pass) to
     match premium-Italian benchmarks at 60–100px cumulative gap.
     Mobile values are defined here; desktop values are overridden
     in the @media (min-width: 1024px) :root block below. */
  --zc-section-spacing-tight:    20px;
  --zc-section-spacing-normal:   32px;
  --zc-section-spacing-generous: 48px;
}

@media (min-width: 1024px) {
  :root {
    --zc-section-spacing-tight:    24px;
    --zc-section-spacing-normal:   48px;
    --zc-section-spacing-generous: 72px;
  }
}

/* ============================================================
   Base elements — scoped under .zc-root.
   Element-level selectors are wrapped in :where() so their
   specificity is (0, 0, 1) instead of (0, 1, 1). This means
   any class-level rule from a section ( e.g. .zc-footer__copyright,
   .zc-hero__cta--primary ) wins automatically without needing
   chained selectors or !important. Without this, foundations'
   `.zc-root p { color: var(--fg) }` was beating every dark-band
   text style and causing illegible footer + CTA labels.
   ============================================================ */
.zc-root {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.zc-root) h1,
:where(.zc-root) h2,
:where(.zc-root) h3,
:where(.zc-root) h4,
:where(.zc-root) .display {
  font-family: var(--font-display);
  color: var(--tortora-700);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-weight: 500;
  text-wrap: balance;
}

:where(.zc-root) h1 { font-size: var(--fs-h1); }
:where(.zc-root) h2 { font-size: var(--fs-h2); }
:where(.zc-root) h3 { font-size: var(--fs-h3); }
:where(.zc-root) h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

:where(.zc-root) p     { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; }
:where(.zc-root) small { font-size: var(--fs-small); color: var(--fg-muted); }

:where(.zc-root) .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--tortora-400);
}

:where(.zc-root) .italic-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

:where(.zc-root) a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
:where(.zc-root) a:hover { color: var(--link-hover); }

:where(.zc-root) ::selection {
  background: var(--celeste-200);
  color: var(--petrolio-700);
}

/* Neutralizza il bg dei Dawn color-scheme wrappers dentro .zc-root.
   Sections con markup interno tipo <div class="color-scheme-X gradient">
   (es. contact-form.liquid) applicano un bg opaco bianco/scheme-X che
   copre il crema-50 ereditato da .zc-root. Qui azzeriamo solo il
   background; gli altri token --color-* del scheme restano disponibili
   per gli elementi figli che li usano (text color, button bg, ecc.). */
:where(.zc-root) [class*="color-scheme"] {
  background: transparent;
}

/* ============================================================
   .zc-on-dark — text-on-dark utility.
   Apply to any container that sits on a dark background
   (footer petrolio-700, editorial petrolio band, hero overlays).
   Switches the inherited element defaults to cream-on-dark with
   WCAG AA-passing alphas. Class-level (0, 1, 0) beats the base
   :where() rules (0, 0, 1), so the override is automatic.
   ============================================================ */
.zc-on-dark,
.zc-on-dark h1,
.zc-on-dark h2,
.zc-on-dark h3,
.zc-on-dark h4,
.zc-on-dark .display { color: var(--crema-50); }

.zc-on-dark p,
.zc-on-dark li,
.zc-on-dark small {
  /* ≈10:1 on petrolio-700 — AAA. */
  color: rgba(251, 247, 241, 0.88);
}

.zc-on-dark .eyebrow {
  /* Eyebrows on dark want a cooler hue than tortora-400. */
  color: var(--celeste-300);
}

.zc-on-dark a {
  color: var(--celeste-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zc-on-dark a:hover { color: #fff; }

.zc-on-dark hr { border-color: rgba(255, 255, 255, 0.12); }

/* ============================================================
   Container helper
   ============================================================ */
.zc-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px)  { .zc-container { padding-inline: var(--container-pad-tablet); } }
@media (min-width: 1024px) { .zc-container { padding-inline: var(--container-pad-desktop); } }

/* ============================================================
   Accessibility — visually hidden, focus visible
   ============================================================ */
.zc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.zc-root :focus-visible {
  outline: 2px solid var(--celeste-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zc-root *,
  .zc-root *::before,
  .zc-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Body bg crema-50 (opt-out homepage).
   Layer base che chiude ogni gap residuo fra section: il body Dawn
   è bianco di default (theme.liquid:250+ non setta bg) → qualsiasi
   margin/padding fra sections mostra striscia bianca. Settare il
   body a crema-50 trasforma il bg di default in crema, così anche
   se main, wrapper, section hanno bg trasparente il colore di
   fondo è quello del design system.
   Homepage esclusa: hero gestisce bg full-bleed da sé.
   Specificity (0,1,1) vince su body {...} Dawn (0,0,1). */
body {
  background-color: var(--crema-50);
}

/* ============================================================
   Header-group + footer-group wrappers — bg crema-50 globale
   (opt-out su homepage).
   Strategia: applichiamo bg crema a tutti i wrapper section-group
   tranne quelli su homepage (template-index), che ha un hero
   full-bleed con bg proprio e non vuole una striscia crema sotto
   l'announcement bar.
   Il body Dawn è bianco (theme.liquid:250+ non setta bg) → senza
   questo bg, i wrapper trasparenti lasciano una striscia bianca
   visibile tra header celeste e prima section sotto, e tra
   ultima section e footer petrolio. Con bg crema-50: gli elementi
   opachi interni (announcement bar petrolio, header crema
   translucido, .zc-footer petrolio-700) coprono il bg dove sono;
   il bg crema riempie solo il gap → continuità visuale.
   Specificity (0,2,1) — più che sufficiente. */
body:not(.template-index) .shopify-section-group-header-group,
body:not(.template-index) .shopify-section-group-footer-group {
  background-color: var(--crema-50);
}
css/* Solleva la bolla Tidio sopra la sticky ATC bar su mobile */
@media screen and (max-width: 749px) {
  #tidio-chat {
    bottom: 80px !important;
    height: calc(100% - 80px) !important;
  }
}