/** Shopify CDN: Minification failed

Line 1417:26 Unexpected "`"

**/
/* ==========================================================================
   I Fontanini — Custom CSS Overrides
   Loaded via custom.globals snippet after Horizon's color-schemes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY OVERRIDES
   Self-hosted fonts (OFL, GDPR-friendly — no external Google request):
   Palanquin Dark (bold sans) for headings/accent, Palanquin for body. Sans-serif
   to match the sans logo/packaging + product photography. url() is relative to
   custom.css, which sits in /assets/. The font_picker in settings_data.json is
   set to assistant (lightweight) so Shopify does not preload its own font.
   -------------------------------------------------------------------------- */

/* Palanquin Dark (bold, headings/accent) + Palanquin (body). Sans-serif to stay
   coherent with the sans logo + packaging and the product photography. */
@font-face { font-family: 'Palanquin Dark'; font-style: normal; font-weight: 500; font-display: swap; src: url('palanquin-dark-500.woff2') format('woff2'); }
@font-face { font-family: 'Palanquin Dark'; font-style: normal; font-weight: 600; font-display: swap; src: url('palanquin-dark-600.woff2') format('woff2'); }
@font-face { font-family: 'Palanquin Dark'; font-style: normal; font-weight: 700; font-display: swap; src: url('palanquin-dark-700.woff2') format('woff2'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 400; font-display: swap; src: url('palanquin-400.woff2') format('woff2'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 500; font-display: swap; src: url('palanquin-500.woff2') format('woff2'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 600; font-display: swap; src: url('palanquin-600.woff2') format('woff2'); }

:root {
  --font-heading--family: 'Palanquin Dark', 'Palanquin', system-ui, sans-serif;
  --font-accent--family: 'Palanquin Dark', system-ui, sans-serif;
  --font-body--family: 'Palanquin', system-ui, sans-serif;
  --font-subheading--family: 'Palanquin', system-ui, sans-serif;
  /* Brand body signature: medium (500) body copy for character. The paragraph
     preset is hardcoded to 400 in theme-styles-variables.liquid; custom.css
     loads after it (see theme.liquid), so this :root override wins and cascades
     to body/.paragraph/.rte via base.css. Palanquin 500 is already loaded. */
  --font-paragraph--weight: 500;

  /* Shared "section title" scale (feedback 2026-08-27): the six homepage
     section headings — Da non perdere, scroll-story intro + collection
     chapters, Judge.me reviews, trust band, FAQ, story strip — previously each
     hardcoded their own size/weight and ranged from 26px to 74px. One token
     pair, referenced by all of them, keeps future edits in sync. */
  --section-heading-size: clamp(32px, 4.6vw, 68px);
  --section-heading-weight: 600;
}

/* Consistent primary CTA across the whole site (incl. over the hero image):
   DEFAULT = cream fill + terracotta stroke + terracotta label.
   HOVER   = terracotta fill + cream label (no drop shadow). Uses
   .button.button--primary (specificity 0,2,0) to win over Horizon's base
   .button--primary and any section-scoped override. */
.button.button--primary {
  background-color: #FBF7F0;
  color: #C4704B;
  border: 2px solid #C4704B;
  border-radius: var(--border-radius-button, 14px);
  box-shadow: none;
  text-transform: uppercase;
  font-weight: 600; /* semibold — Palanquin 600 is loaded */
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}
.button.button--primary:hover,
.button.button--primary:focus-visible {
  background-color: #C4704B;
  color: #FBF7F0;
  border-color: #C4704B;
  box-shadow: none;
}

/* Shopify native hCaptcha challenge page. The challenge is platform-rendered,
   but the surrounding layout still needs theme-level spacing and button styling. */
.shopify-challenge__container {
  width: min(100% - 32px, 560px) !important;
  max-width: 560px !important;
  margin: clamp(72px, 12vh, 140px) auto clamp(96px, 16vh, 180px) !important;
  padding: 0 16px;
  text-align: center;
}

.shopify-challenge__message {
  margin: 0 auto 28px;
  max-width: 520px;
  font-family: var(--font-body--family);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  color: #4C4740;
}

.shopify-challenge__container form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.shopify-challenge__container iframe {
  max-width: 100%;
}

.shopify-challenge__button,
.shopify-challenge__container input[type="submit"] {
  appearance: none;
  min-width: 132px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid #C4704B;
  border-radius: var(--border-radius-button, 14px);
  background: #C4704B;
  color: #FFFFFF;
  font-family: var(--font-body--family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.shopify-challenge__button:hover,
.shopify-challenge__button:focus-visible,
.shopify-challenge__container input[type="submit"]:hover,
.shopify-challenge__container input[type="submit"]:focus-visible {
  background: #B5603D;
  border-color: #B5603D;
  color: #FFFFFF;
}

@media screen and (max-width: 749px) {
  .shopify-challenge__container {
    width: min(100% - 24px, 420px) !important;
    margin: 56px auto 88px !important;
    padding: 0;
  }

  .shopify-challenge__message {
    font-size: 19px;
  }
}

/* Quantity selector (cart + PDP): Horizon's own hover darkens the fill
   (base.css). feedback 2026-08-28: fill stays white, only the stroke turns
   terracotta — same interaction language as the cart note field above.
   Faded to 35% (feedback: initial solid terracotta read as too strong) —
   a hint, not a highlight. */
.quantity-selector:hover {
  background-color: var(--color-input-background);
  border-color: rgba(196, 112, 75, 0.35);
}

/* Outline CTA variants from the Figma Component Library (node 309-187).
   Shared geometry: 1px stroke, 14px radius, 12/28 padding, medium label, no
   drop shadow. Adapted to the brand font (Palanquin) instead of the file's
   DM Sans. */
.button.button--stroke-white,
.button.button--stroke-black,
.button.button--fill {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--border-radius-button, 14px);
  padding: 12px 28px;
  font-family: var(--font-body--family);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

/* Stroke White — over dark imagery (hero). */
.button.button--stroke-white {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.button.button--stroke-white:hover,
.button.button--stroke-white:focus-visible {
  background-color: var(--color-terracotta-hover, #B5603D);
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: none;
}

/* Stroke Black — over light/pastel surfaces (homepage collections). Default is
   a near-black outline; on hover it fills terracotta with a white label +
   border (per updated Figma). */
.button.button--stroke-black {
  color: #1A1A1A;
  border-color: #1A1A1A;
}
.button.button--stroke-black:hover,
.button.button--stroke-black:focus-visible {
  background-color: var(--color-terracotta, #C4704B);
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: none;
}

/* Fill — solid terracotta CTA (Figma "Fill" variant). Default terracotta fill +
   white label; hover darkens to the terracotta-hover tone. No drop shadow. */
.button.button--fill {
  background-color: var(--color-terracotta, #C4704B);
  color: #FFFFFF;
  border-color: var(--color-terracotta, #C4704B);
}
.button.button--fill:hover,
.button.button--fill:focus-visible {
  background-color: var(--color-terracotta-hover, #B5603D);
  color: #FFFFFF;
  border-color: var(--color-terracotta-hover, #B5603D);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. DIALECT NAME STYLING (per D-03)
   The signature typographic treatment for artisanal product names.
   Usage: <span class="dialect-name">Ra Lavanda</span>
   -------------------------------------------------------------------------- */

.dialect-name {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   3. SHADOW SYSTEM (adapted from Clay per D-10)
   -------------------------------------------------------------------------- */

:root {
  --shadow-sm: 0px 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0px 2px 4px rgba(26, 26, 26, 0.08),
               0px 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0px 4px 12px rgba(26, 26, 26, 0.10),
               0px 2px 4px rgba(26, 26, 26, 0.06);
  --shadow-card: 0px 1px 3px rgba(26, 26, 26, 0.08),
                 -1px -1px 2px rgba(26, 26, 26, 0.03) inset;
  --shadow-hover-hard: -7px 7px rgb(0, 0, 0);
  /* Brand surface signature: a bottom-weighted shadow so every card reads with a
     "deeper stroke at the bottom". Three downward layers pool along the lower
     edge; used with the warm hairline via .surface-card and the components in §
     PRODUCT CARD / menus / editorial panels. Tunable in one place. */
  --shadow-signature: 0 2px 4px rgba(26, 26, 26, 0.06),
                      0 6px 16px rgba(26, 26, 26, 0.10),
                      0 12px 28px rgba(26, 26, 26, 0.05);
}

/* --------------------------------------------------------------------------
   SURFACE SIGNATURE
   Single shared card surface: warm hairline + bottom-weighted shadow. This is
   the one place the "deep-bottom" treatment is defined; components either use
   this class or reference --shadow-signature + --color-border-warm directly.
   -------------------------------------------------------------------------- */
.surface-card {
  background: var(--surface-card-bg, #ffffff);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-signature);
}

/* --------------------------------------------------------------------------
   HOMEPAGE — rounded panels su fondo fisso
   Le sezioni hanno gli angoli superiori arrotondati e siedono in flusso
   normale sul crema fisso del body (§ sotto, body { background }): gli
   angoli "scoperti" mostrano il fondo pagina, non la sezione precedente.
   STORICO: prima ogni pannello si tirava su di --border-radius-section
   sopra il precedente (tuck stile carte impilate); il margine negativo
   mangiava 40px di ogni sezione e rendeva incoerenti le distanze visive
   tra sezioni (2026-08-20, richiesta esplicita: spaziatura consistente,
   niente sbordi). Il primo pannello (hero) resta flush sotto l'header.
   -------------------------------------------------------------------------- */
/* The hero and any flush-top ticker are EXCLUDED here (not layered on afterward):
   a separate `:has()` opt-out rule loses on specificity to this multi-`:not()`
   selector, which is why the hero was picking up a stray top radius. Excluding
   them inline keeps them reliably flush. */
.template-index .shopify-section:not([class*="-group-header"]):not([class*="-group-footer"]):not(:has(> .custom-hero)):not(:has(> .ticker)) {
  position: relative;
  border-start-start-radius: var(--border-radius-section);
  border-start-end-radius: var(--border-radius-section);
  overflow: clip;
}
/* Hero = first panel: flush top, no lift, no clip (keeps its own overflow). */
.template-index .shopify-section:has(> .custom-hero) {
  margin-top: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  overflow: visible;
}
/* Scroll-story: chiusa anche in basso. La sezione che la segue (carosello
   recensioni, sfondo trasparente) non le si sovrappone col tuck dei pannelli,
   quindi il suo fondo restava una linea dritta zafferano→crema. I raggi
   inferiori la chiudono come una card completa; l'overflow: clip che li fa
   mordere è già nella regola sopra (sticky-safe). Il fallback dell'ultimo
   capitolo ha già 40px di clearance in fondo (nati per il vecchio tuck). */
.template-index .shopify-section:has(> .scroll-story) {
  border-end-start-radius: var(--border-radius-section);
  border-end-end-radius: var(--border-radius-section);
}

/* Banda badge + FAQ (2026-08-25): angoli vivi, richiesti espressamente. Il
   lift da 40px del tema arrotonderebbe l'attacco della banda bianca e quello
   della FAQ sotto; su due sezioni consecutive l'arrotondamento cade anche in
   mezzo alla sequenza.
   Il selettore ripete per intero quello della regola qui sopra e vi aggiunge
   :has(): un opt-out :has() da solo perderebbe sulla specificità, come già
   annotato in cima a questa sezione. Ripetendolo restano intatti anche
   position: relative e overflow: clip, da cui dipende .section-background. */
.template-index .shopify-section:not([class*="-group-header"]):not([class*="-group-footer"]):not(:has(> .custom-hero)):not(:has(> .ticker)):has(.faq--home, .trust-band) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Home "In Evidenza" grid — match the shop collection grid's card spacing so
   cards sit at a consistent distance. The section uses resource-list, the shop
   uses product-grid, so their gap systems differ; force the same values here.
   Desktop 32/24 = shop columns_gap_vertical/horizontal; mobile 16/8 = shop §25
   density (keeps the same badge clearance: 12px top padding + 16px row = 28px). */
.template-index .resource-list--grid {
  gap: 32px 24px;
}
/* Ritmo titoli home: "In Evidenza" a 112px dall'inizio sezione come
   "Cosa dicono di noi" e l'intro scroll-story. Qui e non nelle settings:
   lo schema della sezione ha max 100 per padding-block-* (112 in
   index.json manda il rendering in errore 500 — provato 2026-08-20). */
.template-index .ui-test-product-list .section {
  padding-block-start: 112px;
  padding-block-end: 112px;
}
@media (max-width: 749px) {
  .template-index .resource-list--grid {
    gap: 16px 8px;
  }
  /* 72px su mobile, come recensioni e intro scroll-story */
  .template-index .ui-test-product-list .section {
    padding-block-start: 72px;
    padding-block-end: 72px;
  }
}

/* --------------------------------------------------------------------------
   4. PLAYFUL HOVER INTERACTIONS (per D-10)
   Buttons cast a hard shadow + a barely-there tilt on hover. Kept very subtle
   (max 2deg, small lift, gentle easing — no spring overshoot) per request.
   -------------------------------------------------------------------------- */

/* (Retired 2026-08: the -2deg tilt-on-hover for primary buttons. No CTA uses
   rotation any more — hover is the flat colour swap in §"Consistent primary
   CTA" above.) */

/* Card hover: subtle lift */
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   5. BORDER RADIUS OVERRIDES (per D-12)
   Generous, rounded, never sharp or corporate.
   -------------------------------------------------------------------------- */

:root {
  --border-radius-card: 24px;
  --border-radius-section: 40px;
  --border-radius-button: 14px;
  --border-radius-input: 4px;
  --border-radius-pill: 100px;
}

/* --------------------------------------------------------------------------
   6. SPACING SCALE (8px base)
   -------------------------------------------------------------------------- */

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
}

/* --------------------------------------------------------------------------
   7. INGREDIENT SECTION COLORS (per D-08)
   Used as CSS custom properties for full-width immersive sections.
   -------------------------------------------------------------------------- */

:root {
  --color-lavanda: #E8DFF0;
  --color-lavanda-border: #C8B8D8;
  --color-zafferano: #F5E6C8;
  --color-zafferano-border: #E0CBA8;
  --color-menta: #D8E8D8;
  --color-menta-border: #B8D0B8;
  --color-zagara: #D9E1F2; /* pastel blue — zagara (citrus blossom: limone / arancia-dolce) */

  /* Ingredient hover accents (saturated, legible on cream) — Product Card v3 */
  --accent-lavanda: #6E5AA0;
  --accent-menta: #3F8A5B;
  --accent-zafferano: #B5801C;
  --accent-vaniglia: #A9814E;
  --accent-limone: #7F9420;
  --accent-arancia-dolce: #CF6A1F;
  --color-dark-hero: #1A1A1A;
  --color-cream: #FDF8F0;
  --color-terracotta: #C4704B;
  --color-terracotta-hover: #B5603D;
  --color-border-warm: #dad4c8;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: rgba(26, 26, 26, 0.81);
}

/* Uniform page background: match the sections' cream (scheme-1). The custom-hero
   is inset with margins, so the area around it and the gaps between sections
   show the body background — keep it identical to the sections to avoid
   off-colour borders around the hero card. */
body {
  background-color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   8. HEADER OVERRIDES (Phase 2)
   -------------------------------------------------------------------------- */

/* Transparent header on homepage: remove border when transparent */
header-component[transparent] .header__row--top {
  --color-border: transparent;
}

/* New style: navbar sits transparent OVER the hero image (no fill, no bottom
   round-edges, no border). The cream fill is suppressed by Horizon's transparent
   header (--closed-underlay-height: 0). Kill any leftover bottom border so the
   nav reads as pure overlay; on scroll the sticky solid state paints its own bg. */
.header__underlay-closed {
  border: 0;
  border-radius: 0;
}
.header__row--top {
  border-bottom: none !important;
}

/* Mobile/tablet header (≤749px, incl. iPad Mini portrait at 744px): Horizon's
   mobile layout leaves the actions column ~2px from the viewport edge, so the
   cart icon hugs the border and its count bubble clips outside. Give the row
   symmetric side breathing room. */
@media screen and (max-width: 749px) {
  .header__row--top .header__columns {
    padding-inline: 12px;
  }
}

/* Navbar logo = "I FONTANINI / Bobbio" wordmark (Logotype.svg). Painted as a
   CSS mask so we can tint it per header state: cream while the nav is a
   transparent overlay on the hero (inverse variant), dark when the nav turns
   solid on scroll (original variant). url() is relative to custom.css. */
.header-logo__image-container--original,
.header-logo__image-container--inverse {
  width: clamp(112px, 12vw, 148px);
  aspect-ratio: 84 / 24; /* Logotype.svg viewBox */
  -webkit-mask: url("logo-wordmark.svg") center / contain no-repeat;
  mask: url("logo-wordmark.svg") center / contain no-repeat;
  font-size: 0; /* hide the shop.name text fallback (rendered as raw text) */
  color: transparent;
  overflow: hidden;
}
.header-logo__image-container--original > *,
.header-logo__image-container--inverse > * {
  display: none !important;
}
.header-logo__image-container--original { background-color: #1A1A1A; }
.header-logo__image-container--inverse { background-color: #FDF8F0; }

@media screen and (max-width: 749px) {
  .header-logo__image-container--original,
  .header-logo__image-container--inverse {
    width: 120px;
  }
}

/* --------------------------------------------------------------------------
   9. MEGA-MENU OVERRIDES (Phase 2)
   Per D-03: 3-column text-only layout
   -------------------------------------------------------------------------- */

/* Column headings: uppercase DM Sans per UI-SPEC */
.mega-menu__link--parent {
  font-family: var(--font-subheading--family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.40;
}

/* Collection links inside mega-menu */
.mega-menu__link:not(.mega-menu__link--parent) {
  font-family: var(--font-body--family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.50;
  transition: color 0.2s ease;
}

.mega-menu__link:not(.mega-menu__link--parent):hover {
  color: var(--color-terracotta);
}

/* Mega-menu container polish */
.mega-menu__content {
  background: var(--color-cream);
  border: 1px solid var(--color-border-warm);
  box-shadow: var(--shadow-signature);
  border-radius: 0 0 16px 16px;
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION PREFERENCES (Phase 2)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mega-menu__link:not(.mega-menu__link--parent) {
    transition: none;
  }
  header-component {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   11. FOOTER OVERRIDES (Phase 2)
   Per D-14 through D-16: newsletter, social, tagline, collection links, legal links
   -------------------------------------------------------------------------- */

/* 40px top border-radius on footer per UI-SPEC */
.footer .section-background,
.footer-content,
footer .section-background {
  border-radius: var(--border-radius-section) var(--border-radius-section) 0 0;
  overflow: hidden;
}

/* Footer top border */
.footer,
footer[class*="footer"] {
  border-top: 1px solid var(--color-border-warm);
}

/* Footer column headings: DM Serif Display 20px per UI-SPEC */
.footer h3,
.footer .type-preset--h4 h3,
.footer [class*="heading"] {
  font-family: var(--font-heading--family);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Footer links: DM Sans 14px, secondary color, terracotta hover */
.footer a:not([class*="button"]),
.footer .menu__item a {
  font-family: var(--font-body--family);
  font-size: 14px;
  font-weight: 400;
  color: #55534e;
  transition: color 0.2s ease;
}

.footer a:not([class*="button"]):hover,
.footer .menu__item a:hover {
  color: var(--color-terracotta);
}

/* Footer tagline: italic serif centered per UI-SPEC */
.footer-tagline,
.footer [style*="text-align: center"] em,
.footer .rte em {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: 16px;
  color: #9f9b93;
}

/* Footer newsletter subtitle */
.footer .newsletter-subtitle,
.footer .rte p {
  font-size: 14px;
  color: #55534e;
}

/* Social icons: 24px with 44px touch target, terracotta hover per UI-SPEC */
.footer-utilities .social-links a,
.footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}

.footer-utilities .social-links a:hover,
.footer .social-links a:hover {
  color: var(--color-terracotta);
}

.footer-utilities .social-links svg,
.footer .social-links svg {
  width: 24px;
  height: 24px;
}

/* Footer copyright */
.footer-utilities .footer-copyright {
  font-size: 12px;
  color: #9f9b93;
}

/* Responsive: mobile stacked layout */
@media screen and (max-width: 749px) {
  .footer h3,
  .footer .type-preset--h4 h3 {
    font-size: 18px;
  }

  .footer .section-background,
  .footer-content,
  footer .section-background {
    border-radius: 24px 24px 0 0;
  }
}

/* Reduced motion for footer links */
@media (prefers-reduced-motion: reduce) {
  .footer a,
  .footer .social-links a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   12. INGREDIENT PILL FILTERS (Phase 2)
   Per D-08, D-22: horizontal pill row above product grid
   -------------------------------------------------------------------------- */

.ingredient-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
}

.ingredient-pill {
  font-family: var(--font-body--family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.30;
  padding: 8px 16px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-border-warm);
  background: var(--color-cream);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.ingredient-pill:visited { color: var(--color-text-primary); }
.ingredient-pill.active:visited { color: #ffffff; }

.ingredient-pill:hover {
  border-color: var(--color-terracotta);
}

.ingredient-pill.active,
.ingredient-pill[aria-pressed="true"] {
  background: var(--color-terracotta);
  color: #ffffff;
  border-color: var(--color-terracotta);
}

/* --------------------------------------------------------------------------
   13. PRODUCT CARD OVERRIDES (Phase 2)
   Per D-21: dialect name serif italic, subtitle sans, price terracotta, quick-add hover
   -------------------------------------------------------------------------- */

/* Card container styling */
.product-grid__item .card,
.collection .card {
  border: 1px solid var(--color-border-warm);
  border-radius: var(--border-radius-card);
  background: #ffffff;
  box-shadow: var(--shadow-signature);
  overflow: hidden;
}

/* Card hover: lift + shadow (inherits from Phase 1 .card:hover) */

/* Product card image: square aspect ratio, uniform height (Phase 3 — Bug 5 fix) */
/* Horizon uses <product-card class="product-card">; earlier .card selectors
   did not match. Target the product-card component directly. */
.product-card .media,
.product-card .product-media-container,
.product-grid .product-card .media,
.collection .product-card .media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-card .media img,
.product-card .product-media-container img,
.product-grid .product-card img,
.collection .product-card img,
.product-grid__item .card .media img,
.collection .card .media img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Product card text area padding */
.product-grid__item .card__text,
.collection .card__text {
  padding: var(--space-md);
}

/* Dialect name on product cards: serif italic per D-21 */
.product-grid__item .card .product-title,
.collection .card .product-title,
.product-grid__item .card [class*="product-title"] {
  font-family: var(--font-heading--family);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* Uniform 2-line title on grid cards so prices align across a row.
   Titles wrap to 1-3 lines; the rendered block is `…product_title…` (underscore)
   holding a <p>. Reserve exactly 2 lines (min-height) and clamp longer ones,
   so the price baseline is identical for every card. Scoped to the grid only —
   does not touch the PDP title. (P3 follow-up: text-row alignment) */
.product-grid__item [class*="product_title"] > p,
.product-grid__item [class*="product-title"] > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2lh;          /* reserve exactly 2 text lines (lh = 1 line-height) */
  margin: 0;
}

/* Price: DM Sans 16px weight 500 terracotta per UI-SPEC */
.product-grid__item .card .price,
.collection .card .price {
  font-family: var(--font-body--family);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-terracotta);
  margin-top: var(--space-xs);
}

/* Quick-add button: terracotta pill at bottom-right of card per D-21.
   Horizon's {% stylesheet %} loads after custom.css — need !important to win. */
.quick-add__button {
  background: linear-gradient(var(--color-terracotta) 0 100%) padding-box !important;
  border-color: var(--color-terracotta) !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
}

.quick-add__button .add-to-cart-text {
  background: var(--color-terracotta) !important;
  color: #ffffff !important;
}

.quick-add__button .add-to-cart-icon {
  color: #ffffff !important;
}

.quick-add__button .add-to-cart-text__content span span {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   13b. PRODUCT CARD V2 — Phase 1.5 redesign
   Audit fixes from Figma component set "Product Card v2" (54:145).
   Token alignment: image radius 16, overline #55534e, ingredient scheme tinting.
   Structural Liquid changes (wash element, hover flower swap, dropdown selector)
   are wired in snippets/product-card.liquid; the CSS below assumes that markup
   and degrades gracefully when not present.
   -------------------------------------------------------------------------- */

:root {
  --border-radius-image: 16px;
  --product-card-wash-bg: var(--color-cream);
  --product-card-wash-border: transparent;
}

/* Ingredient color schemes — applied at the section/grid level on
   ingredient-specific collection pages. NOT applied per-card on mixed grids
   (DESIGN.md §4 "Card height parity" + §2 "section owns its color"). */
.scheme-lavanda {
  --product-card-wash-bg: var(--color-lavanda);
  --product-card-wash-border: var(--color-lavanda-border);
}
.scheme-zafferano {
  --product-card-wash-bg: var(--color-zafferano);
  --product-card-wash-border: var(--color-zafferano-border);
}
.scheme-menta {
  --product-card-wash-bg: var(--color-menta);
  --product-card-wash-border: var(--color-menta-border);
}
.scheme-acque {
  --product-card-wash-bg: #F5E8E0;
  --product-card-wash-border: #E0CDB8;
}

/* Image radius for the product media container (wash inset visual). */
.product-card .product-media-container,
.product-card .media,
.product-grid__item .card .media {
  border-radius: var(--border-radius-image);
  background: var(--product-card-wash-bg);
}

/* Card content overline — DESIGN.md §4 mandates text-secondary (#55534e)
   for WCAG AA. Targets Horizon's text block when used as an overline inside
   the card, plus the explicit class for new markup. */
.product-card .card__overline,
.product-card [class*="card__subtitle"],
.product-grid__item .card .text-block--overline {
  color: #55534e;
  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Dropdown selector beside cart — sits in the card price row.
   40px tall to match the quick-add button. */
.product-card__variant-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--border-radius-button);
  background: #ffffff;
  color: var(--color-text-primary);
  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.product-card__variant-selector:hover {
  border-color: var(--color-terracotta);
}
.product-card__variant-selector:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Mobile: no hover state — card sits flat, flower never appears,
   selector + quick-add stay always visible (already inline by default). */
@media (hover: none) {
  .product-card:hover {
    transform: none;
    box-shadow: var(--shadow-signature);
  }
}

/* Reduced motion — kill the hover transform but keep the shadow change
   (shadow change is informational, not motion). */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. COLLECTION PAGE OVERRIDES (Phase 2)
   Per UI-SPEC: centered title, breadcrumb, grid columns
   -------------------------------------------------------------------------- */

/* Collection title: centered DM Serif Display per UI-SPEC */
.collection-heading h1,
.template-collection h1 {
  font-family: var(--font-heading--family);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}

/* Collection description: centered, max-width */
.collection-heading .rte,
.template-collection .collection-description {
  font-family: var(--font-body--family);
  font-size: 16px;
  color: #55534e;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Responsive collection title */
@media screen and (max-width: 749px) {
  .collection-heading h1,
  .template-collection h1 {
    font-size: 32px;
  }

  /* Responsive product card typography */
  .product-grid__item .card .product-title,
  .collection .card .product-title,
  .product-grid__item .card [class*="product-title"] {
    font-size: 18px;
  }

  .ingredient-pill {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION: COLLECTION & CARDS (Phase 2)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ingredient-pill {
    transition: none;
  }
  .product-grid__item .quick-add {
    transition: none;
  }
  .button--primary:hover,
  button[class*="button--primary"]:hover,
  .shopify-challenge__button:hover {
    transform: none;
  }
  .card:hover {
    transform: none;
  }
}

/* 09 — Phase 3 Product Page ===================================== */

/* 09.1 Product Title (PROD-01) */
.product-title {
  font-family: var(--font-heading--family);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.20;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 8px;
}
@media (max-width: 749px) {
  .product-title { font-size: 24px; }
}
.product-title .dialect-name {
  font-style: normal;
  font-weight: 700;
}
.product-title__separator {
  color: #1A1A1A;
  font-style: normal;
  font-family: var(--font-body--family);
  font-weight: 400;
}
.product-title__italiano {
  font-family: var(--font-body--family);
  font-weight: 400;
}
.product-title__volume {
  font-family: var(--font-body--family);
  font-size: 14px;
  font-weight: 400;
  color: #55534e;
  margin: 0 0 16px;
}


/* 09.3 Accordion Overrides (PROD-04) */
accordion-custom .details,
.accordion .details {
  border-radius: 0;
  border-color: #dad4c8;
}
accordion-custom .details__header,
.accordion .details__header {
  padding: 16px 20px;
  color: #1A1A1A;
  font-family: var(--font-body--family);
  font-weight: 500;
  font-size: 16px;
  min-height: 44px;
}
accordion-custom .details__header:hover,
.accordion .details__header:hover { background: #FDF8F0; }
/* PDP accordion row titles: bumped up from the shared 16px for readability —
   scoped to .accordion (product page only) so menu/cart/filter accordions
   (bare accordion-custom, no .accordion class) keep the shared size. */
.accordion .details__header {
  font-size: 18px;
}
/* PDP accordion (descrizione/ingredienti/modalità d'uso/spedizione): caret
   turns terracotta on hover, matching the FAQ's hover treatment (§17, below).
   Scoped to .accordion — the "accordion" block type used only on the product
   page — so menu/cart/filter accordions (bare accordion-custom, no .accordion
   class) are unaffected. */
.accordion .details__header:hover .svg-wrapper {
  color: var(--color-terracotta, #C4704B);
}
accordion-custom .details[open],
.accordion .details[open] { border-bottom: 2px solid #C4704B; }
accordion-custom .details-content,
.accordion .details-content {
  padding: 0 20px 20px;
  font-family: var(--font-body--family);
  font-size: 15px;
  line-height: 1.60;
  color: #1A1A1A;
}

/* 09.4 Trust Stats band (PROD-05 redesign, 2026-08-31) — card unica, colonne
   separate da divisori sottili, icona in cerchio terracotta + headline +
   descrizione. Sostituisce i badge a bordo unico (rif. mockup utente: card
   con 4 colonne, icona cerchiata, numero/headline, sottotitolo). */
.trust-stats {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--color-terracotta) 20%, #ffffff);
  border-radius: 20px;
  padding: 8px;
}
.trust-stats__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;            /* mobile: stacked, one column */
  margin: 0;
  padding: 0;
}
.trust-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-terracotta) 14%, #ffffff);
}
.trust-stats__item:last-child {
  border-bottom: 0;
}
.trust-stats__icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-terracotta) 16%, #ffffff);
  margin-block-end: 4px;
}
.trust-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terracotta);
  width: 20px;
  height: 20px;
}
.trust-stats__icon-svg {
  width: 20px;
  height: 20px;
  color: var(--color-terracotta);
}
.trust-stats__label {
  font-family: var(--font-heading--family);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: #1A1A1A;
  text-wrap: balance;
}
.trust-stats__text {
  font-family: var(--font-body--family);
  font-size: 13px;
  line-height: 1.4;
  color: #6B6357;
  max-width: 26ch;
  text-wrap: balance;
}
@media (min-width: 750px) {
  .trust-stats {
    padding: 12px;
  }
  .trust-stats__list {
    grid-template-columns: repeat(4, 1fr); /* 4 colonne affiancate */
  }
  .trust-stats__item {
    padding: 28px 20px;
    border-bottom: 0;
    border-right: 1px solid color-mix(in srgb, var(--color-terracotta) 14%, #ffffff);
  }
  .trust-stats__item:last-child {
    border-right: 0;
  }
  .trust-stats__icon-circle {
    width: 56px;
    height: 56px;
  }
}

/* 09.5 Risparmia Section (D-04) */
/* .upsell-card — shared by .risparmia-section (§09.5) e .packaging-link (§36):
   eyebrow (icona cerchiata + etichetta) / titolo / sottotitolo / CTA a link
   con freccia, ispirato al mockup "webinar card" fornito dall'utente
   (2026-08-31). Le due varianti differiscono solo per margin-block esterno. */
.upsell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--color-terracotta) 20%, #ffffff);
  border-radius: 16px;
  padding: 24px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* Tutta la card è cliccabile: lo ::after della CTA si stende su tutta la
   superficie (pattern "stretched link"), così il tap è comodo anche da
   mobile senza dover colpire la sola scritta con la freccia. L'hover sulla
   card intera (non solo sul link) accentua l'affordance su desktop. */
.upsell-card__cta::after {
  content: '';
  position: absolute;
  inset: 0;
}
.upsell-card:hover {
  background: color-mix(in srgb, var(--color-terracotta) 1.5%, #ffffff);
  border-color: color-mix(in srgb, var(--color-terracotta) 40%, #ffffff);
}
.risparmia-section {
  margin-block: 32px 0;
}
.upsell-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upsell-card__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-terracotta) 16%, #ffffff);
  color: var(--color-terracotta);
}
.upsell-card__eyebrow-icon svg {
  width: 14px;
  height: 14px;
}
.upsell-card__eyebrow-label {
  font-family: var(--font-body--family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6357;
}
.upsell-card__heading {
  font-family: var(--font-heading--family);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0;
}
@media (max-width: 749px) { .upsell-card__heading { font-size: 20px; } }
.upsell-card__body {
  font-family: var(--font-body--family);
  font-size: 16px;
  line-height: 1.50;
  color: #55534e;
  margin: 0;
}
.upsell-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 4px;
  color: var(--color-terracotta);
  font-family: var(--font-body--family);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.upsell-card__cta-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.upsell-card__cta:hover .upsell-card__cta-arrow,
.upsell-card__cta:focus-visible .upsell-card__cta-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .upsell-card__cta-arrow { transition: none; }
}

/* 09.6 Sticky Add-to-Cart Restyle (PROD-08) */
@media (min-width: 750px) {
  sticky-add-to-cart { display: none; }
}
@media (max-width: 749px) {
  .sticky-add-to-cart__bar {
    background: #FDF8F0 !important;
    height: 60px;
    padding: 8px 16px;
    border-top: 1px solid #dad4c8;
    box-shadow: 0 -2px 8px rgba(26,26,26,0.08);
    border-radius: 0;
    bottom: 0;
    width: 100%;
  }
  .sticky-add-to-cart__price { color: #C4704B; font-weight: 500; }
  .sticky-add-to-cart__button {
    background: #C4704B;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 500;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-add-to-cart__bar { transition: none !important; }
}

/* 10 — Phase 3 Collection Pages ================================ */

/* 10.1 Collection hero image clamp (SHOP-01) */
.collection-hero,
.collection-hero-image,
.main-collection .section-background img {
  max-height: 240px;
  object-fit: cover;
  border-radius: 0 0 16px 16px;
}
@media (max-width: 749px) {
  .collection-hero,
  .collection-hero-image,
  .main-collection .section-background img {
    max-height: 160px;
  }
}

/* 10.2 All Products denser grid at >= 1280px (SHOP-02) */
.collection-title--all {
  font-family: var(--font-heading--family);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  text-align: center;
  margin-block: 48px 24px;
}
@media (max-width: 749px) {
  .collection-title--all { font-size: 32px; margin-block: 24px 16px; }
}
/* 10.3 Collection grid column caps (SHOP-01, tuned per Baymard 4-6 cols on
   >1024px desktops for visually-driven products).
   NOTE: earlier selectors here (.main-collection, body.template-collection-all)
   never matched Horizon's DOM — the grid is ul.product-grid.product-grid--grid
   inside .product-grid-container, with the density toggle stamping
   [product-grid-view='zoom-out']. Horizon's own column vars live in a body
   {%- style -%} block at (0,2,0) specificity; these (0,4,0) selectors win
   regardless of order. Mobile (<750px) keeps Horizon's native 2-column flow.
   Default view: 3 cols → 4 on large. Dense view: 4 → 5 → 6 (was minmax(100px)
   auto-fill: 11 thumbnail columns on wide monitors). */
@media (min-width: 750px) {
  .product-grid-container .product-grid.product-grid--grid:not([product-grid-view='zoom-out']) {
    --product-grid-columns-desktop: repeat(3, 1fr);
  }
  .product-grid-container .product-grid.product-grid--grid[product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .product-grid-container .product-grid.product-grid--grid:not([product-grid-view='zoom-out']) {
    --product-grid-columns-desktop: repeat(4, 1fr);
  }
  .product-grid-container .product-grid.product-grid--grid[product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(5, 1fr);
  }
}
@media (min-width: 1280px) {
  .product-grid-container .product-grid.product-grid--grid[product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(6, 1fr);
  }
}

/* 11 — Phase 3 Related Products (PROD-07) ================================= */
/* "Ti potrebbe piacere anche" — cross-type carousel on every PDP. */

.related-products {
  padding-block: 64px 48px;
  /* Stessi token della pagina shop (assets/base.css §page-width), non un
     max-width/padding fisso a sé: prima la sezione era ~1200px con 24px di
     gutter — più stretta e più rientrata della griglia collezione (1440px,
     40px), quindi le card sembravano compresse con parecchio spazio vuoto
     ai lati. */
  max-width: var(--narrow-page-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--page-margin, 16px);
  box-sizing: border-box;
}
@media (max-width: 749px) {
  .related-products {
    padding-block: 48px 32px;
  }
}
@media (min-width: 750px) {
  .related-products {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: clamp(24px, 4vw, 64px);
  }
}

.related-products__heading {
  font-family: var(--font-heading--family, "DM Serif Display", serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  text-align: center;
  margin: 0 0 32px;
}
@media (max-width: 749px) {
  .related-products__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
}

.related-products__grid {
  display: grid;
  /* minmax esplicito (non "1fr" puro = minmax(auto, 1fr)): senza un minimo
     fisso, la larghezza di colonna dipende dal min-content del contenuto —
     esattamente ciò che container-type:inline-size su .product-card__content
     azzera, facendo collassare le colonne. Stesso principio di
     --product-grid-columns-desktop (base.css), che usa minmax con un valore
     esplicito invece di un 1fr nudo. */
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 16px;
}
@media (min-width: 750px) {
  .related-products__grid {
    /* repeat(4, ...) esplicito, non auto-fit/auto-fill: con
       container-type:inline-size su .product-card__content (§ automatismo
       bottone compatto) più giù, l'auto-fit sui browser risolve il conteggio
       colonne in modo inconsistente e le card collassano su una colonna
       sola. 4 fisse è sicuro perché gli item sono sempre al massimo 4
       (for rec in recs limit: 4). Il respiro in più rispetto a prima viene
       dal container più largo qui sopra (var(--narrow-page-width)), non
       dal cambiare quante colonne ci sono. */
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 24px;
  }
}

/* Card frame + interior now come from the shared Product Card V4 rules
   (§14/§18): each related card wrapper carries `product-grid__item`, and its
   inner <product-card> + card-dialect/card-details/card-cutout reuse the exact
   shop-grid card. The bespoke `.related-products__card/__link/__media/__image/
   __info/__title*/__price` styling was removed here to stop it fighting V4.
   Only the media-box sizing needs restating, because the related markup uses a
   minimal `.card-gallery` (featured image) instead of the vendor slideshow. */
.related-products__card .card-gallery {
  aspect-ratio: 1 / 1;
}
.related-products__card .card-gallery .product-media-container {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.related-products__card .card-gallery .product-media-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cutout reveal on hover: the related markup has no slideshow-component to
   hide (the grid does), so hide the featured image directly on hover so the
   2nd-image cutout floats on the pastel veil — matching the shop grid. */
@media (hover: hover) and (pointer: fine) {
  .related-products__card .product-card[data-cutout]:hover .card-gallery .product-media-container {
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   16. FOOTER LAYOUT (Phase 3 — Bug 3 fix)
   Forces a clean 4-column grid on desktop (Newsletter | Collezioni |
   Informazioni | Contatti) and centers the tagline on its own row.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .footer-content {
    align-items: start;
    gap: 48px;
  }
  .footer-content > * {
    min-width: 0;
  }
}

/* Tagline row — centered, italic, subtle */
.footer-content > :last-child {
  text-align: center;
}
.footer-content > :last-child em {
  font-family: var(--font-heading--family);
  font-style: italic;
  color: #55534e;
}

/* Newsletter group — email input should fill column width */
.footer-content email-signup-component,
.footer-content .email-signup {
  width: 100%;
  max-width: 360px;
}

/* --------------------------------------------------------------------------
   17. PDP ACCORDION BODY TYPOGRAPHY (Phase 3 — Bug 4 fix)
   Ensures consistent body type within accordion rows, smaller than headings.
   -------------------------------------------------------------------------- */
.pdp-accordion-body,
.pdp-accordion-body p,
.pdp-accordion-body li {
  font-family: var(--font-body--family);
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 0 0 10px;
}
.pdp-accordion-body h3 {
  font-family: var(--font-heading--family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 14px 0 6px;
}
.pdp-accordion-body h3:first-child { margin-top: 0; }
.pdp-accordion-body a {
  color: var(--color-terracotta);
  text-decoration: underline;
}

/* Shipping returns snippet uses h3s — inherit accordion-body treatment */
.shipping-returns h3 {
  font-family: var(--font-heading--family);
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  margin: 14px 0 6px;
}
.shipping-returns h3:first-child { margin-top: 0; }
.shipping-returns p {
  font-family: var(--font-body--family);
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 0 0 10px;
}

/* Retailers page — readable static list with light separators. */
.retailers-page {
  max-width: 720px;
  margin-inline: auto;
}
body:has(.retailers-page) .section-content-wrapper {
  --padding-block-end: 0px !important;
}
body:has(.retailers-page) .text-block:has(> h1) {
  --text-align: center !important;
  text-align: center;
}
.retailers-page__intro {
  font-family: var(--font-body--family);
  font-size: 17px;
  line-height: 1.6;
  color: #55534e;
  margin: 0 0 32px;
}
.retailers-list {
  display: grid;
  gap: 32px;
  max-width: 720px;
}
.retailers-list__item {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border-warm, #dad4c8);
}
.retailers-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.retailers-list__city {
  font-family: var(--font-heading--family);
  font-size: 20px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 8px;
}
.retailers-list__shop {
  font-family: var(--font-body--family);
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 4px;
}
.retailers-list__address,
.retailers-list__products {
  font-family: var(--font-body--family);
  font-size: 15px;
  line-height: 1.5;
  color: #55534e;
  margin: 0 0 6px;
}
.retailers-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-family: var(--font-body--family);
  font-size: 15px;
  margin: 0 0 6px;
}
.retailers-list__meta a {
  color: var(--color-terracotta);
  text-decoration: underline;
}
.retailers-list__sep {
  color: #a8a094;
}

/* --------------------------------------------------------------------------
   14. PRODUCT CARD V3 — editorial redesign (spec: docs/superpowers/specs/2026-07-05)
   Card = [dialect] / [image] / [italiano + price + action], rendered via
   custom-liquid blocks (custom.card-dialect / custom.card-details) inside the
   native _product-card. Overrides the Phase 1.5 v2 grid card styling.
   -------------------------------------------------------------------------- */
.product-grid__item .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--border-radius-card, 16px);
  background: var(--color-cream, #faf7f1);
  box-shadow: var(--shadow-signature);
  padding: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* v3 = product floats on the card bg — neutralise Phase 1.5 ingredient wash.
   Scoped to .product-media-container only: .card-gallery must stay paintable
   for the v4 pastel hover (§18). */
.product-grid__item .product-media-container {
  background: transparent !important;
  border: none !important;
}
.product-grid__item .card-gallery img {
  object-fit: contain !important;
}

/* Hide Horizon's native quick-add overlay on the image — v3 uses its own
   bottom-right action in the details row instead. */
.product-grid__item quick-add-component,
.product-grid__item .card-gallery .quick-add {
  display: none !important;
}

/* Top dialect name (1 line, serif italic) */
.pcard__dialect-link { text-decoration: none; display: block; }
.pcard__dialect {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-heading--family);
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  min-height: 1.2em;
  margin: 12px 0 2px;
  transition: color 0.25s ease;
}

/* Below-image details: italiano (2-line clamp) + price + action.
   Anchored to the bottom of the card so the price row aligns across the row
   (editorial/reference look); the whitespace lives between image and text, not
   between the descriptor and the price. */
.product-card__content > div:has(> .pcard__details) { margin-top: auto; }
.pcard__details { display: flex; flex-direction: column; }
/* Reserve 2 lines for the descriptor, but bottom-align it so short/absent
   descriptors push the empty space UP (between image and text), keeping card
   heights uniform and the descriptor tight to the price. */
.pcard__italiano-slot {
  min-height: 2lh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pcard__italiano-link { text-decoration: none; display: block; }
.pcard__italiano {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body--family);
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text-secondary, #55534e);
  margin: 0;
  transition: color 0.25s ease;
}
.pcard__price-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pcard__price {
  font-family: var(--font-body--family);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-terracotta);
}

/* Buy action — terracotta (single = cart button, multi = "Scegli" pill) */
.pcard__form { margin: 0; display: flex; }
.pcard__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-terracotta);
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.pcard__action:hover { filter: brightness(1.06); }
.pcard__action:active { transform: translateY(1px); }
.pcard__action--add { width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto; }
.pcard__action--add[disabled] { opacity: 0.4; cursor: not-allowed; }
.pcard__cart-icon { display: block; }
.pcard__action--choose {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-body--family);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Buy area wrapper (product-form-component + form) must not disturb layout */
.pcard__buy,
.pcard__buy .shopify-product-form { margin: 0; display: block; }
.pcard__buy [hidden] { display: none !important; }
.pcard__buy-controls { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; margin-left: auto; }

/* Inline variant select (multi-variant). Mobile: the controls wrap to a
   full-width row below the price. Desktop: they sit inline beside the price so
   multi-variant cards match single-card height. */
.pcard__variant-select {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
  border: 1px solid var(--color-terracotta);
  border-radius: 999px;
  padding: 0 30px 0 14px;
  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  /* custom select: own chevron with breathing room instead of the UA arrow
     glued to the right edge */
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* Subtle fill feedback: the pill tints toward terracotta on hover, signalling
   it's clickable */
.pcard__variant-select:hover {
  border-color: var(--color-terracotta);
  background-color: color-mix(in srgb, var(--color-terracotta) 8%, #ffffff);
}
/* Replace Horizon's near-black focus outline (which the card content box
   clipped flat) with a brand-colored ring. Mouse picks don't linger: the
   change handler in custom.js §3 blurs the field once a format is chosen,
   so the ring shows only while actually interacting (or via keyboard). */
.pcard__variant-select:focus {
  outline: none;
  border-color: var(--color-terracotta);
}
.pcard__variant-select:focus-visible {
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terracotta) 22%, transparent);
}
@media (min-width: 750px) {
  .pcard__buy-controls { flex: 0 0 auto; }
  .pcard__variant-select { flex: 0 1 auto; max-width: 150px; }
}

/* Mobile: price and buy control share ONE row (price left, control right).
   Multi-variant cards fuse the format select and the cart button into a
   single segmented control: [formato ▾ | 🛒]. */
@media (max-width: 749px) {
  .pcard__price-row { flex-wrap: nowrap; gap: 6px; }
  .pcard__price { flex: 0 0 auto; font-size: 13px; }
  .pcard__buy-controls { flex: 0 1 auto; gap: 0; min-width: 0; }
  /* Multi-format on mobile: the inline select is hidden — every card shows
     only the cart button, which opens the format bottom sheet (custom.js §5).
     The price row can no longer overflow at any width. */
  .pcard__variant-select { display: none; }
  .pcard__buy-controls .pcard__atc {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* Add-to-cart = Horizon's add-to-cart-button snippet styled as a terracotta
   icon-only circle. Horizon's native [data-added] checkmark-burst animation is
   kept (defined in base.css). */
.pcard__buy-controls .pcard__atc {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  flex: 0 0 auto;
  border: none;
  border-radius: 4px;
  background: var(--color-terracotta);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
}
.pcard__buy-controls .pcard__atc:hover { filter: brightness(1.06); }
.pcard__atc .add-to-cart-text__content { display: none !important; }
.pcard__atc .add-to-cart-icon { color: #ffffff; }
.pcard__atc .add-to-cart-icon,
.pcard__atc .add-to-cart-icon svg { width: 18px; height: 18px; }

/* Desktop: wider label button instead of the icon-only 40px circle, matching
   the mobile "+ Carrello" treatment exactly (same 8px radius, text-only —
   the icon is redundant once the "+" is already in the label). */
@media (min-width: 750px) {
  .pcard__buy-controls .pcard__atc {
    width: auto;
    min-width: 0;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
  }
  .pcard__atc .add-to-cart-text__content {
    display: inline !important;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  .pcard__atc .add-to-cart-icon { display: none !important; }
}

/* Automatismo: su desktop, se la griglia ha molte colonne (o, sui
   consigliati PDP, con sole 4 colonne fisse) e la card scende sotto i 300px
   di larghezza propria, il bottone "+ Carrello" etichettato andrebbe a capo
   — torna alla versione icona-quadrata (stessi valori del default icon-only
   qui sopra). container-type/-name dichiarati su .product-card__content,
   l'antenato comune di card-gallery e .pcard__buy-controls (stessa
   convenzione di product-grid.liquid). Scoped a ".product-grid" (griglia
   collezione + consigliati, che riusa la stessa classe — vedi
   custom.related-products.liquid:47) e non alla classe globale
   .product-card__content per non toccare il carosello nativo dei
   "prodotti correlati" (blocks/product-recommendations.liquid), che vive
   già dentro due container inline-size annidati.

   Nota: i consigliati PDP (.related-products__grid) inizialmente
   collassavano con questa regola perché le loro colonne erano "1fr" pure
   (= minmax(auto, 1fr), minimo dipendente dal min-content) — esattamente
   ciò che container-type:inline-size azzera. Il fix è a monte: le colonne
   ora hanno un minimo esplicito (vedi .related-products__grid sopra, §11),
   come fa già --product-grid-columns-desktop in base.css. */
.product-grid .product-card__content {
  container-type: inline-size;
  container-name: product-card;
}

@media (min-width: 750px) {
  @container product-card (max-width: 300px) {
    .pcard__buy-controls .pcard__atc {
      width: 40px;
      min-width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 4px;
    }
    .pcard__atc .add-to-cart-text__content { display: none !important; }
    .pcard__atc .add-to-cart-icon { display: inline-flex !important; }
  }
}

/* --------------------------------------------------------------------------
   18. PRODUCT CARD V4 — borderless restyle + logo-weave hover
   Borderless cards, title below the image. Desktop hover: the native 2nd-image swap shows
   the cutout PNG floating on the ingredient pastel while the logo weave
   pattern drifts tone-on-tone behind it, ringed by a subtle stroke.
   Per-card colors resolve from data-ing on <product-card>; the effect gates
   on data-cutout (only products with a 2nd gallery image).
   -------------------------------------------------------------------------- */
:root {
  /* Pastel + stroke pairs for the three ingredients that lacked them */
  --color-vaniglia: #F1E6D4;
  --color-vaniglia-border: #DCC6A4;
  --color-limone: #EDEFCF;
  --color-limone-border: #D3D9A2;
  --color-arancia-dolce: #F9E2D0;
  --color-arancia-dolce-border: #EBC5A5;
  /* Products with no ingrediente:* tag */
  --pcard-pastel-neutro: #F2ECE1;
}

/* White surface at rest; on hover the radial veil tints the WHOLE card and
   a soft-edged ingredient stroke appears. isolation + overflow clip the
   oversized veil pseudo-element; constant padding so nothing shifts. */
.product-grid__item .product-card {
  position: relative;
  isolation: isolate;
  /* overflow was hidden to clip the veil pseudo; the veil now self-clips
     (inset: 0 + border-radius + background-position drift), freeing the card
     so the Evidenza badge (§23) can straddle the top border. Children never
     reach the 16px corners (12-14px padding), so nothing else needs clipping. */
  overflow: visible;
  /* at-rest: a very subtle terracotta hairline — the same tint as the
     Bestseller/Novità badge fill (terracotta 20% on white) — over the
     bottom-weighted surface shadow. Consistent terracotta on every card. */
  border: 1px solid color-mix(in srgb, var(--color-terracotta) 20%, #ffffff);
  border-radius: 16px;
  padding: 12px 14px 16px;
  background-color: #ffffff;
  box-shadow: var(--shadow-signature);
  /* exit (hover-out) is 2x faster than enter — enter duration lives in :hover */
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
/* The vendor content box clips flush with the buy row — let focus rings and
   the select glow breathe (the card itself still clips the veil) */
.product-grid__item .product-card .product-card__content {
  overflow: visible;
}

/* Per-card palette from the primary ingrediente tag (server-rendered) */
.product-card[data-ing="lavanda"]       { --pcard-pastel: var(--color-lavanda);       --pcard-stroke: var(--color-lavanda-border);       --pcard-accent: var(--accent-lavanda); }
.product-card[data-ing="menta"]         { --pcard-pastel: var(--color-menta);         --pcard-stroke: var(--color-menta-border);         --pcard-accent: var(--accent-menta); }
.product-card[data-ing="zafferano"]     { --pcard-pastel: var(--color-zafferano);     --pcard-stroke: var(--color-zafferano-border);     --pcard-accent: var(--accent-zafferano); }
.product-card[data-ing="vaniglia"]      { --pcard-pastel: var(--color-vaniglia);      --pcard-stroke: var(--color-vaniglia-border);      --pcard-accent: var(--accent-vaniglia); }
.product-card[data-ing="limone"]        { --pcard-pastel: var(--color-limone);        --pcard-stroke: var(--color-limone-border);        --pcard-accent: var(--accent-limone); }
.product-card[data-ing="arancia-dolce"] { --pcard-pastel: var(--color-arancia-dolce); --pcard-stroke: var(--color-arancia-dolce-border); --pcard-accent: var(--accent-arancia-dolce); }

/* Image zone = the effect surface (vendor .card-gallery already clips via
   overflow: hidden) */
.product-grid__item .card-gallery {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Vendor slideshow-container paints var(--color-background) (opaque cream)
   over the gallery — clear it inside cards so the pastel + weave show through */
.product-grid__item .card-gallery slideshow-container {
  background-color: transparent;
}

/* Gradient veil (tuned in Figma): radial, deepened tone weighted toward the
   image zone, fading to white at the edges, whole layer at 40% opacity over
   the white card — now covering the ENTIRE card. Pure pseudo-element (no
   extra DOM); oversized and animated via transform only (GPU-composited). */
.product-grid__item .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  /* Corner-anchored linear washes: tint enters from opposite corners and
     dissolves to white well before the center, so product and texts sit on
     white. Oversized via background-size (not element size) so the pseudo can
     self-clip with border-radius — the drift animates background-position
     instead of transform (runs only on the hovered card). */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pcard-pastel, var(--pcard-pastel-neutro)) 70%, #ffffff) 0%, rgba(255, 255, 255, 0) 42%) 0% 0% / 120% 120% no-repeat,
    linear-gradient(315deg, color-mix(in srgb, var(--pcard-pastel, var(--pcard-pastel-neutro)) 55%, #ffffff) 0%, rgba(255, 255, 255, 0) 38%) 100% 100% / 120% 120% no-repeat,
    #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease; /* exit — enter duration lives in :hover */
  animation: pcard-veil-drift 8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes pcard-veil-drift {
  from { background-position: 0% 0%, 100% 100%; }
  to   { background-position: 25% 25%, 75% 75%; }
}
/* Near-imperceptible grain over the veil — a ~300B inline SVG turbulence
   tile, static (never animated) so it costs one rasterization only. */
.product-grid__item .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease; /* exit — enter duration lives in :hover */
}

/* Mobile flacone overlay img — inert unless the view toggle activates it */
.pcard-cutout { display: none; }

/* Desktop hover: keyed to .card-gallery (same element that drives Horizon's
   native 2nd-image swap) so pastel and swap always fire together */
@media (hover: hover) and (pointer: fine) {
  /* Hover: soft-edged ingredient stroke (1px ring + blurred halo in the
     card's tint) over the whisper elevation shadow; minimal lift. */
  .product-grid__item .product-card:hover {
    /* per-ingredient accent stroke + halo, layered over a deepened surface
       signature so the "deep-bottom" reads even stronger on hover while the
       ingredient identity (accent hue + veil) is preserved. */
    border-color: color-mix(in srgb, var(--pcard-accent, var(--color-terracotta)) 45%, var(--color-border-warm));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--pcard-accent, var(--color-terracotta)) 40%, transparent),
      0 0 10px 1px color-mix(in srgb, var(--pcard-accent, var(--color-terracotta)) 12%, transparent),
      0 4px 10px rgba(26, 26, 26, 0.08),
      0 12px 28px rgba(26, 26, 26, 0.08);
    transform: translateY(-1px);
    z-index: 2;
    transition-duration: 0.3s; /* enter — exit (base) is 0.15s */
  }
  /* Radial veil + grain across the whole card */
  .product-grid__item .product-card:hover::before {
    opacity: 0.3;
    animation-play-state: running;
    transition-duration: 0.35s;
  }
  .product-grid__item .product-card:hover::after {
    opacity: 0.05;
    transition-duration: 0.35s;
  }
  /* The vendor slideshow is clipped by the gallery, so the bleed uses the
     .pcard-cutout overlay (child of <product-card>, free to overflow) */
  .product-card[data-cutout]:hover slideshow-component { visibility: hidden; }
  /* Cutout centered in the colored zone (no bleed), gentle scale-in/out */
  .product-card[data-cutout] .pcard-cutout {
    display: block;
    position: absolute;
    top: 12px;
    left: 50%;
    width: calc(100% - 28px);
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    z-index: 2;
    opacity: 0;
    transform: translate(-50%, 0) scale(0.94);
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); /* exit */
  }
  .product-card[data-cutout]:hover .pcard-cutout {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    transition-duration: 0.35s; /* enter */
  }
  .product-grid__item .product-card:hover .pcard__dialect {
    color: var(--pcard-accent, var(--color-text-primary));
  }
}

/* (The cesto/flacone card-view toggle and its html.card-view-flacone rules
   were retired — column density is handled by Horizon's grid-density
   switcher alone.) */
@media (max-width: 749px) {
  /* Dialect title: card padding narrows the column — keep one clean line */
  .pcard__dialect { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-grid__item .product-card::before {
    transition: none;
    animation: none;
  }
  .product-grid__item .product-card::after { transition: none; }
  .product-grid__item .product-card:hover { transform: none; }
  .product-card[data-cutout] .pcard-cutout {
    transition: none;
    transform: translate(-50%, 0);
  }
}

/* --------------------------------------------------------------------------
   19. FORMAT BOTTOM SHEET (mobile) — custom.js §5
   Opened by the cart button on multi-format cards under 750px: lists the
   formats with prices; tapping one adds it straight to the cart.
   -------------------------------------------------------------------------- */
.pcard-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}
/* display:flex above would defeat the hidden attribute, leaving an invisible
   full-viewport overlay that swallows every click after the first close */
.pcard-sheet[hidden] { display: none; }
.pcard-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pcard-sheet__panel {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -8px 30px rgba(26, 26, 26, 0.12);
}
.pcard-sheet.is-open .pcard-sheet__backdrop { opacity: 1; }
.pcard-sheet.is-open .pcard-sheet__panel { transform: translateY(0); }
.pcard-sheet__title {
  font-family: var(--font-heading--family);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}
.pcard-sheet__product {
  font-family: var(--font-body--family);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}
.pcard-sheet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  margin-top: 8px;
  border: 1px solid var(--color-border-warm);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body--family);
  font-size: 15px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pcard-sheet__option:hover,
.pcard-sheet__option:focus-visible {
  border-color: var(--color-terracotta);
  outline: none;
}
.pcard-sheet__option:active {
  background: color-mix(in srgb, var(--color-terracotta) 8%, #ffffff);
}
.pcard-sheet__option[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.pcard-sheet__option-price { font-weight: 600; }
.pcard-sheet__option-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--color-cream);
}
.pcard-sheet__option-name {
  flex: 1 1 auto;
  text-align: left;
}
.pcard-sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
html.pcard-sheet-open { overflow: hidden; }
.pcard-sheet__option--selected {
  border-color: var(--color-terracotta);
  background: color-mix(in srgb, var(--color-terracotta) 6%, #ffffff);
}
@media (prefers-reduced-motion: reduce) {
  .pcard-sheet__backdrop,
  .pcard-sheet__panel,
  .pcard-sheet__option { transition: none; }
}

/* --------------------------------------------------------------------------
   20. MOBILE BUY REDESIGN — frosted format chip + full-width CTA
   Multi-format cards float a frosted chip over the image (opens the §19
   sheet, which now SELECTS: chip label, price and image update; the CTA
   adds). Every card's cart button becomes a full-width labeled CTA.
   -------------------------------------------------------------------------- */
/* Chip (all breakpoints): pill silhouette, format left of the price on
   every card. On desktop the interactive control is the chip-styled
   <select>; the button chip is the mobile-only bottom-sheet trigger. */
.pcard__format-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-terracotta);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Same fill feedback on the mobile trigger chip (hover where available,
   :active for touch) */
.pcard__format-chip[data-pcard-chip]:hover,
.pcard__format-chip[data-pcard-chip]:active {
  background-color: color-mix(in srgb, var(--color-terracotta) 8%, #ffffff);
}
.pcard__format-chip::after {
  content: "";
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pcard__format-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-terracotta) 22%, transparent);
}
/* Static variant for single-format products: same silhouette, 20%
   terracotta fill, no stroke, no chevron, not interactive */
.pcard__format-chip--static {
  border: none;
  background: color-mix(in srgb, var(--color-terracotta) 20%, transparent);
  color: var(--color-terracotta);
  pointer-events: none;
}
.pcard__format-chip--static::after { display: none; }
@media (min-width: 750px) {
  .pcard__format-chip[data-pcard-chip] { display: none; }
}
@media (max-width: 749px) {
  /* Price joins the chip line, right-aligned and in the brand accent; the
     CTA drops to its own full-width row below */
  .pcard__price-row { flex-wrap: wrap; gap: 10px 8px; }
  .pcard__price {
    margin-left: auto;
    font-size: 15px;
    color: var(--color-terracotta);
  }
  .pcard__buy-controls { flex: 1 1 100%; }
  .pcard__buy-controls add-to-cart-component {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  .pcard__buy-controls .pcard__atc {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    border-radius: 8px;
  }
  .pcard__atc .add-to-cart-text__content {
    display: inline !important;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }
  .pcard__atc .add-to-cart-icon { display: none !important; }
}

/* --------------------------------------------------------------------------
   21. PDP MEDIA GALLERY — carousel + terracotta active thumbnail (quick-260804-pje)
   The gallery is now a single square carousel (contain fit) with a vertical
   thumbnail rail on the LEFT (templates/product.json, thumbnail_width 72).
   Horizon marks the active thumbnail with a currentcolor outline + gray border;
   we replace both with a terracotta box-shadow ring so the stroke can animate
   (outline: none → color is not transitionable). Inactive thumbs sit slightly
   dimmed and carry a transparent ring, so selection changes cross-fade the
   stroke and opacity together. Scoped to .product-information__media so the
   accent never leaks to other slideshows on the page.
   -------------------------------------------------------------------------- */
.product-information__media .slideshow-controls__thumbnail {
  border-radius: var(--thumbnail-radius, var(--media-radius));
  box-shadow: 0 0 0 1.5px transparent;
  opacity: 0.7;
  transition:
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.product-information__media .slideshow-controls__thumbnail:hover {
  opacity: 1;
}
/* Specificity note: the vendor outline lives in a {% style %} block rendered
   in the body (after custom.css) at (0,3,0) — .slideshow-controls__thumbnails
   .slideshow-control:is([aria-selected]). We need (0,4,0) to beat it. */
.product-information__media
  .slideshow-controls__thumbnails
  .slideshow-control.slideshow-controls__thumbnail[aria-selected="true"] {
  outline: none;
  border: none;
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--color-terracotta);
}
/* Keyboard focus must stay visible even though the vendor outline is removed
   on the selected thumb. */
.product-information__media .slideshow-controls__thumbnail:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--color-terracotta);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .product-information__media .slideshow-controls__thumbnail {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   22. PDP STICKY MEDIA (quick-260804-pje)
   The details column is NOT sticky (templates/product.json ›
   product-details.sticky_details_desktop = false — resolves the pending todo).
   Since §21 makes the media column compact (single square carousel + rail),
   the details column is now typically the taller one, so make the MEDIA column
   follow the scroll on desktop (premium pattern). `align-self: start` is
   required for sticky to engage inside the product-information grid row; sticky
   only kicks in when the media column is shorter than the row, so this is safe
   even for products with tall media. Mobile stacks normally (rule is ≥750px).
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .product-information__media {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   23. NAV PLAN A — "Tipo" collection chips + Evidenza card badge (quick-260804-vwp)
   The Shop mega-menu is retired: type selection lives on the shop page as a
   chips row above the ingredient chips (both reuse .ingredient-pill). The
   empty bestseller/nuovi-arrivi collections are replaced by a merchant-managed
   badge (metafield custom.evidenza) rendered as a terracotta outline pill on
   the card's top-right corner, per the approved mockup.
   -------------------------------------------------------------------------- */
/* Ingredient chips were unwired from the collection templates (16-product
   catalog: one filter dimension is enough — see quick-260804-vwp). The
   custom.ingredient-filters snippet stays for phase-4 editorial deep links;
   .ingredient-pill styles are shared by these Tipo chips. */
.collection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
}

/* The vendor card wrapper clips its children (base.css .product-grid__card
   overflow: hidden) — that would slice any pill straddling the card border.
   Free it: nothing inside needs wrapper-level clipping (the card and media
   boxes clip themselves). */
.product-grid-container .product-grid .product-grid__card.product-grid__card {
  overflow: visible;
}

/* Evidenza badge — straddles the card's top border, right-aligned with the
   add-to-cart button. Containing block is the VENDOR .product-card__content
   (position: relative, base.css:151), which is inset by the card's 12px top /
   14px side padding — so the card border sits at top: -12px and the ATC
   right edge at right: 0 of the content box.
   Style: static (non-interactive) chip grammar — light terracotta fill, no
   stroke — matching .pcard__format-chip--static; the outline grammar is
   reserved for selectable controls. Fill is the OPAQUE mix (white base, not
   transparent) so no seam shows where the pill crosses card edge onto the
   page background. */
.pcard-badge {
  position: absolute;
  top: -12px;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-terracotta) 20%, #ffffff);
  color: var(--color-terracotta);
  pointer-events: none;
}
.product-grid__item .product-card:has(.pcard-badge) .product-badges {
  display: none;
}
@media (max-width: 749px) {
  .pcard-badge {
    font-size: 12px;
    padding: 7px 12px;
  }
}

/* Sold-out state of the same chip: neutral grey instead of terracotta so it
   reads as a status, not a merchandising callout like Bestseller/Novità. */
.pcard-badge--sold-out {
  background: color-mix(in srgb, #000000 8%, #ffffff);
  color: rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   25. MOBILE GRID DENSITY (quick-260805-3uk, ref. ASOS mobile PLP)
   Three moves, all ≤749px:
   a) 2-col view: vendor stacks --product-grid-gap 16 + wrapper padding-block
      24 on top of §14's card padding — halve all three so images/text win.
   b) Tipo chips become a single horizontally scrollable row.
   c) mobile-single view: the full-width card adopts the DESKTOP grammar —
      format chip + accent price + square icon CTA on one line (the full-width
      "+ Carrello" row is a narrow-card pattern). Bottom-sheet trigger stays:
      it is the right touch interaction regardless of column count.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  /* a — tighter 2-col. Row gap and top padding are sized so the straddling
     Evidenza badge (~13px above the card border) never overlaps the card
     above: clearance = padding-block-start + row gap = 28px. Columns stay
     tight at 8px. */
  .product-grid-container .product-grid[product-grid-view='default'] {
    gap: 16px 8px;
    --padding-block-start: 12px;
    --padding-block-end: 8px;
  }
  .product-grid-container .product-grid[product-grid-view='default'] .product-card {
    padding: 8px 10px 12px;
    border-radius: 12px;
  }
  .product-grid-container .product-grid[product-grid-view='default'] .product-card::before,
  .product-grid-container .product-grid[product-grid-view='default'] .product-card::after {
    border-radius: 12px;
  }
  /* badge straddle follows the reduced top padding */
  .product-grid-container .product-grid[product-grid-view='default'] .pcard-badge {
    top: -8px;
  }

  /* b — chips: one scrollable row (pills never wrap). Bleeds to the viewport
     edge (negative margin + matching padding) so a partially visible pill is
     cut by the screen — a scroll affordance — instead of mid-page. */
  .collection-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 12px;
    margin-inline: calc(-1 * var(--padding-lg, 20px));
    padding-inline: var(--padding-lg, 20px);
    scroll-padding-inline: var(--padding-lg, 20px);
  }
  .collection-chips::-webkit-scrollbar { display: none; }
  /* Edge-fade scroll affordance; .is-scrollable è messa da custom.js §6 solo
     quando la riga trabocca davvero, at-start/at-end tolgono il fade sul
     bordo che non ha contenuto oltre (fade fisso a fine corsa = pill
     "tagliata"). */
  .collection-chips.is-scrollable {
    --chips-fade-l: 16px;
    --chips-fade-r: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade-l), #000 calc(100% - var(--chips-fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade-l), #000 calc(100% - var(--chips-fade-r)), transparent);
  }
  .collection-chips.is-scrollable.at-start { --chips-fade-l: 0px; }
  .collection-chips.is-scrollable.at-end { --chips-fade-r: 0px; }
  .collection-chips .ingredient-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* c — mobile-single: desktop card grammar on one line. Explicit gap +
     wrapper padding (the vendor only defines them for the 'default' view)
     with the same badge-clearance rule as (a): 14 + 20 = 34px ≥ badge 25px. */
  .product-grid[product-grid-view='mobile-single'] {
    gap: 20px;
    --padding-block-start: 14px;
    --padding-block-end: 8px;
  }
  .product-grid[product-grid-view='mobile-single'] .pcard__price-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
  .product-grid[product-grid-view='mobile-single'] .pcard__price {
    margin-left: 0;
  }
  .product-grid[product-grid-view='mobile-single'] .pcard__buy-controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .product-grid[product-grid-view='mobile-single'] .pcard__buy-controls add-to-cart-component {
    display: inline-flex;
    width: auto;
  }
  /* CTA keeps the 2-col "+ Carrello" text treatment, sized to content
     (not full-width) and right-aligned on the line */
  .product-grid[product-grid-view='mobile-single'] .pcard__buy-controls .pcard__atc {
    width: auto;
    min-width: 150px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
  }
  /* wide card, breathe: desktop-scale dialect title */
  .product-grid[product-grid-view='mobile-single'] .pcard__dialect {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   26 — PHASE 4 FOUNDATION (fonts served in globals; acque tokens, global reveal, footer fix) ===
   Shared foundation for every Phase 4 plan: acque ingredient scheme tokens,
   the single global [data-reveal] scroll-reveal mechanism (UX-04 base), and the
   footer column-title alignment fix (folded todo 2026-07-05).
   -------------------------------------------------------------------------- */

/* Acque (fragrant waters) ingredient scheme tokens — completes the ingredient
   palette alongside lavanda / zafferano / menta (see §7). */
:root {
  --color-acque: #F5E8E0;
  --color-acque-border: #E0CDB8;
}

/* Global scroll-reveal (UX-04 base). Every Phase 4 animation reuses [data-reveal].
   Content is ALWAYS visible by default; the fade only applies when motion is allowed,
   so reduced-motion users AND no-JS users always see fully opaque content. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Folded todo (2026-07-05): footer column titles not top-aligned.
   The nested newsletter (email-signup) group offsets the "Resta aggiornato" column
   title from its sibling column titles. Force every footer column to top-align in its
   grid cell and zero the leading heading margin so all column titles share one baseline. */
.footer-content > *,
.footer .footer-block {
  align-self: start;
}
.footer-content > * > :first-child,
.footer .footer-block__heading,
.footer-content h3:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   27 — PHASE 4 BLOG (article prose restyle) ===
   Restyles the native main-blog-post article surface: terracotta inline
   links, a constrained ~68ch reading measure and styled article prose
   (lists, blockquotes, warm dividers). The LISTING half of this section was
   removed 2026-08-14 when main-blog was replaced by custom-main-blog (§31).

   NOTE (updated 2026-08): --blog-serif resolves to --font-heading--family,
   which custom.globals now maps to self-hosted Palanquin Dark — the original
   DM Serif Display comments below are historical.
   -------------------------------------------------------------------------- */

:root {
  --blog-serif: var(--font-heading--family), Georgia, serif;
}

/* === BLOG LISTING: removed 2026-08-14 — the vendor main-blog section was
   replaced by custom-main-blog (see §31); the .blog-posts / .blog-post-item /
   .blog-post-card__* selectors no longer exist on any template. === */

/* === ARTICLE (main-blog-post) =============================================== */

/* Article title → DM Serif Display, scoped to the article section via :has()
   (no template body class exists in this theme). */
.section:has(.blog-post-content) header :is(h1, h2, .h2) {
  font-family: var(--blog-serif);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Readable measure + prose rhythm for the article body.
   2026-08-14: 16px/68ch → 18px/70ch — same ~68-char measure, physically
   wider column (~700px), the Medium/Substack editorial pattern. */
.blog-post-content.rte {
  max-width: 70ch;
  margin-inline: auto;
  color: var(--color-text-secondary);
  font-family: var(--font-body--family);
  font-size: 18px;
  line-height: 1.6;
}

.blog-post-content.rte :is(h2, h3, h4) {
  color: var(--color-text-primary);
}

/* H2 → DM Serif Display, fluid 32 → 48 (UI-SPEC Heading row) */
.blog-post-content.rte h2 {
  font-family: var(--blog-serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-block: var(--space-2xl) var(--space-md);
}

/* H3 → DM Sans 16px / 500 (UI-SPEC folds article H3 emphasis into Body/500) */
.blog-post-content.rte h3 {
  font-family: var(--font-body--family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  margin-block: var(--space-xl) var(--space-xs);
}

.blog-post-content.rte p {
  margin-block: 0 var(--space-md);
}

/* Inline links → terracotta */
.blog-post-content.rte a {
  color: var(--color-terracotta);
  text-underline-offset: 2px;
}
.blog-post-content.rte a:hover {
  color: var(--color-terracotta-hover);
}

/* Lists */
.blog-post-content.rte :is(ul, ol) {
  margin-block: 0 var(--space-md);
  padding-inline-start: var(--space-lg);
}
.blog-post-content.rte li {
  margin-block: var(--space-xxs);
}

/* Blockquote → terracotta left rule, serif italic pull-quote */
.blog-post-content.rte blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-inline-start: 3px solid var(--color-terracotta);
  color: var(--color-text-primary);
  font-family: var(--blog-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Warm oat dividers */
.blog-post-content.rte hr {
  margin-block: var(--space-2xl);
  border: 0;
  border-top: 1px solid var(--color-border-warm);
}

/* Comments block: warm framing + serif heading */
.blog-post-comments-container {
  border-top: 1px solid var(--color-border-warm);
  padding-block-start: var(--space-2xl);
}
.blog-post-comments-container .h3 {
  font-family: var(--blog-serif);
}

/* Mobile body step-down */
@media screen and (max-width: 749px) {
  .blog-post-content.rte {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   29 — MOBILE FEATURED CAROUSEL (home "In Evidenza" carousel_on_mobile) ===
   The carousel scroller (slideshow-slides, overflow-x: scroll) also clips
   vertical overflow at its padding box. base.css compensates 16px each side —
   sized for the vendor hover effects, not for our card grammar: the Evidenza
   badge straddles the card's top border (~15px proud of it) and
   --shadow-signature pools up to 40px below the bottom edge. Enlarge the
   negative-margin/padding trick (net layout height unchanged) so both paint.
   -------------------------------------------------------------------------- */
.resource-list__carousel slideshow-slides {
  margin-block: -28px -44px;
  padding-block: 28px 44px;
}

/* The slide element itself clips too: base sets overflow: hidden AND
   content-visibility: auto on slideshow-slide — the latter implies paint
   containment, which clips at the padding box regardless of overflow. Both
   must be lifted or the badge/shadow are cut at the slide edge. Perf cost is
   negligible at ≤16 product cards per carousel.
   Selector includes slideshow-slides to reach (0,2,2): base.css:4081 re-applies
   content-visibility: auto to the slides ADJACENT to the visible one (the
   peeking card) at (0,2,2), so anything weaker loses exactly on that card. */
.resource-list__carousel slideshow-slides slideshow-slide.resource-list__slide {
  overflow: visible;
  content-visibility: visible;
}

/* Wider slides: base clamps to min(--mobile-card-size 60cqw, 300px). 72cqw
   with a raised cap ≈ 280px on a 390px phone — bigger card, next one still
   peeking. Same @container query as base.css:4416; this file loads later,
   so equal specificity resolves in our favour. */
@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: min(72cqw, 340px);
  }
}

/* Tablet (750–989px): the vendor flips carousel→grid at 750px, but 4 columns
   on an iPad Mini (768px) yields ~160px cards. Keep the carousel through the
   tablet range: the hidden--mobile / hidden--desktop helpers are !important
   (base.css:544-558), so these scoped overrides must be too.
   Desktop (>=990px) intentionally stays a plain grid: "Da non perdere" is
   capped at max_products:4 (templates/index.json) so it never wraps to a
   second row, and a horizontal-scroll desktop carousel was tried and reverted
   (2026-08-30, kept simple per request) in favour of a "Scopri tutti i
   prodotti" button below the grid instead. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .section-resource-list .resource-list.hidden--mobile {
    display: none !important;
  }
  .section-resource-list .resource-list.hidden--desktop {
    display: block !important;
  }
}

/* Slide width in the same range: base derives it from --column-count (4) —
   the same too-narrow math as the grid. ~2.5 cards in view instead. */
@container resource-list-carousel (min-width: 750px) and (max-width: 989px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: min(38cqw, 360px);
  }
}

/* --------------------------------------------------------------------------
   30 — RELATED PRODUCTS: mobile horizontal scroller ===
   "Ti potrebbe piacere anche" (custom.related-products) mirrors the homepage
   featured-row interaction on phones: one native scroll-snap row of big
   cards, next one peeking as the swipe affordance. No JS — browser momentum.
   Full-bleed against the section's 16px mobile gutter so a partially visible
   card is cut by the SCREEN edge (same rationale as the §25b chips row).
   Vertical margin/padding compensation keeps --shadow-signature (pools up to
   ~40px below the card) inside the scroller's paint area — same trick as
   §29; no badge here, so the top needs only a small allowance.
   Desktop (>=750px) keeps the 4-column grid. */
@media (max-width: 749px) {
  /* the section is a grid item (vendor .section wrapper is display:grid)
     whose margin-inline:auto makes it FIT-CONTENT sized: with the old grid
     inside, it inflated to the cards' total width (pushing the page
     sideways); with the scroller's zeroed contribution it would shrink to
     the heading's width. width:100% pins it to its 358px track instead. */
  .related-products {
    min-width: 0;
    width: 100%;
  }
  .related-products__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* same rhythm as the homepage featured carousel */
    gap: 8px;
    /* width:0 + min-width: the section's fit-content sizing would otherwise
       inflate to the row's full card total and push the whole page sideways
       (the vendor .section wrapper adds its own gutter, so viewport-based
       widths overflowed too). width:0 zeroes the max-content contribution;
       min-width then stretches to the resolved size. The ±16px
       margin/padding pair keeps the first card ON the section's grid line
       while giving the scroller's padding box room to PAINT the card
       shadows, which its overflow would otherwise clip at both ends. */
    width: 0;
    /* -32px each side = the section's own 16px padding + the vendor
       .section grid's 16px gutter track: measured against the homepage
       carousel, whose scroller spans the full viewport [0, 100vw] with the
       first card at x=16. This row now matches exactly — cards clip at the
       TRUE screen edges, first card on the same x=16 line as the homepage. */
    min-width: calc(100% + 64px);
    margin-inline: -32px;
    padding-inline: 16px;
    scroll-padding-inline-start: 16px;
    margin-block: -16px -44px;
    padding-block: 16px 44px;
  }
  .related-products__grid::-webkit-scrollbar { display: none; }
  .related-products__card {
    flex: 0 0 auto;
    /* matches the homepage carousel's 72cqw/340px slide sizing */
    width: min(72vw, 340px);
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   26 · Firefox Android scrollbar
   base.css sets `html { scrollbar-width: thin }` (a Firefox-only rule): on
   Firefox for Android any custom scrollbar style opts the page out of the
   default overlay scrollbar, so the bar becomes a layout gutter that eats a
   strip on the right of EVERY page. Touch devices get the overlay default
   back; desktop pointers keep the thin styled bar.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  html {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  /* Verified on-device: even with scrollbar-width back to auto, Firefox
     Android keeps a NON-overlay scrollbar lane (~6px) that narrows the visual
     viewport (probe: layout 378 vs visible 372) and leaves a stripe on the
     right of every page. Hiding the bar removes the lane. Gecko-only guard
     (-moz-appearance) so Chrome Android keeps its overlay scroll indicator. */
  @supports (-moz-appearance: none) {
    html {
      scrollbar-width: none;
    }
  }
}

/* --------------------------------------------------------------------------
   27 · Mobile header: account nel drawer, search al suo posto
   Il vendor nasconde la search di colonna destra sotto i 750px quando i
   customer accounts sono attivi (snippets/search.liquid) e ne mostra un
   duplicato a sinistra (drawer_search). Flippiamo entrambe così il mobile
   legge: hamburger | logo | search + cart. Il bottone account della navbar è
   mobile:hidden (header-actions.liquid); un link account semplice + i social
   vivono in fondo al drawer (header-drawer.liquid,
   .menu-drawer__utility-links).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* (0,2,0) batte le regole vendor a classe singola, niente !important */
  .header .search-action--hidden-on-drawer {
    display: flex;
  }
  .header .search-action--hidden-on-menu {
    display: none;
  }
  /* Il grid mobile dell'header piazza .search-action in leftB (accanto
     all'hamburger) e la sposta in rightA solo se <shopify-account> non
     esiste (header.liquid, :has). Il nostro account esiste ma è
     mobile:hidden, quindi forziamo rightA: search accanto al cart.
     Serve (1,4,0), da cui la classe ripetuta: sui device touch
     theme.liquid setta data-menu-style='drawer' e attiva la variante
     vendor senza media query (header.liquid, nested "& .search-action"
     sotto "#header-component[data-menu-style='drawer'] .header__columns"),
     che vale (1,3,0) perché & eredita la specificità dell'intero genitore.
     A pari (1,3,0) vincerebbe styles.css per ordine dei fogli — è il caso
     "inspector ok, telefono vero no" (l'emulatore senza touch resta su
     data-menu-style='menu' e il blocco vendor non matcha). */
  #header-component .header__columns .search-action.search-action--hidden-on-drawer.search-action--hidden-on-drawer {
    grid-area: rightA;
  }
}

/* Gli stili di account/social nel drawer vivono in §29 (redesign completo
   del pannello). */

/* --------------------------------------------------------------------------
   29 · Burger menu: pannello terracotta, testi grandi in zona pollice
   Redesign del drawer mobile (riusato anche dal fallback desktop): fondo
   terracotta #C4704B con testo crema (override delle variabili --color-* che
   la classe color-scheme imposta sul pannello, specificità 0,2,0 > 0,1,0),
   voci menu in Palanquin Dark 700 grandi. X tonda in alto a sinistra, nello
   stesso punto dell'hamburger che ha aperto il pannello (feedback cliente:
   aprire in alto e chiudere in basso era scomodo), menu subito sotto; in
   fondo l'entry point account piccolo (icona a misura navbar), una hairline
   e le social centrate.
   -------------------------------------------------------------------------- */
.header-drawer .menu-drawer {
  --color-background: #c4704b;
  --color-background-rgb: 196, 112, 75;
  --color-foreground: #fdf8f0;
  --color-foreground-rgb: 253, 248, 240;
  --color-foreground-heading: #fdf8f0;
  --color-border: rgb(253 248 240 / 0.3);

  /* Lato destro arrotondato. 40px = raggio sezioni del brand E raccordo
     concentrico con la X: bottone 44px (r=22) a 18px dai bordi → il centro
     del bottone coincide col centro dell'arco (40,40), gap costante 18px.
     Stroke crema sottile attorno al pannello (non sul lato sinistro, che
     coincide col bordo dello schermo). */
  border: 1px solid rgb(253 248 240 / 0.4);
  border-inline-start: 0;
  border-radius: 0 40px 40px 0;
}

/* Backdrop: solo velo scuro, NIENTE blur (scelta cliente). Il vendor usava
   `backdrop-filter: brightness(0.75)` senza background: su alcuni browser
   mobile il backdrop-filter dentro l'header campiona solo l'area dell'header
   (boundary del backdrop root), e il blur per-elemento via filter sul
   contenuto produce bordi/aloni visibili per ogni blocco — un blur omogeneo
   non è ottenibile in modo affidabile, quindi il velo lavora da solo. */
.header-drawer .menu-drawer__backdrop {
  background-color: rgb(26 26 26 / 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Voci di primo livello: font titoli, bold, grandi */
.header-drawer .menu-drawer__menu-item--mainlist {
  font-family: var(--font-heading--family);
  font-weight: 700;
  font-size: clamp(3rem, 8.5vw, 3.6rem);
  line-height: 1.2;
}

/* Il vendor scrive background-color: rgb(var(--color-foreground) 0.03) —
   sintassi invalida che computa a transparent; esplicitiamo. Il margine
   auto in alto (vendor) ancora il blocco in fondo al pannello. */
.header-drawer .menu-drawer__utility-links {
  background-color: transparent;
  row-gap: 4px;
  margin-block: auto calc(var(--padding-lg) + env(safe-area-inset-bottom, 0px));
  margin-inline: var(--padding-xl);
}

/* Account: entry point piccolo, riga 44px, icona a misura navbar (la regola
   vendor `color: rgb(var(--color-foreground))` è invalida e cade
   sull'inherit) */
.header-drawer .menu-drawer__account {
  color: var(--color-foreground);
  font-size: 1.4rem;
}

.header-drawer .menu-drawer__account svg {
  width: 15px;
  height: 17px;
}

.header-drawer .menu-drawer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  border-block-start: 1px solid rgb(253 248 240 / 0.3);
}

.header-drawer .menu-drawer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-foreground);
}

/* batte il sizing vendor `.menu-drawer svg` (icon-size-xs) */
.header-drawer .menu-drawer .menu-drawer__social svg {
  width: 20px;
  height: 20px;
}

/* X di chiusura: cerchio crema con icona terracotta, in alto a destra */
.header-drawer .menu-drawer > .menu-drawer__close-button {
  align-self: flex-end;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fdf8f0;
  color: #c4704b;
  /* 18px = 40px (raggio contenitore) - 22px (raggio bottone): curva
     concentrica perfetta con l'angolo in alto a destra */
  margin: 18px 18px var(--padding-xs) 0;
  flex-shrink: 0;
}

.header-drawer .menu-drawer > .menu-drawer__close-button .header-drawer-icon {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   28 · Ricerca predittiva: preview prodotto come la griglia
   Le card prodotto nell'overlay di ricerca ora hanno box 1:1 (vedi
   predictive-search-products-list.liquid) + contain, come la convenzione
   della griglia (§ .product-grid__item .card-gallery img). Scopato via
   data-resource-type: i caroselli di collezioni/pagine/articoli restano
   cover 4/5. Copre anche l'immagine hover secondaria (stessa classe).
   -------------------------------------------------------------------------- */
.predictive-search-results__card .resource-card[data-resource-type='product'] .resource-card__image {
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   31 — DIARIO EDITORIALE (custom-main-blog + blog-chips + bcard + article)
   Numbering note: the file's real maximum is §30 (two legacy §14s and a
   parallel 26–29 series exist above) — new sections restart from 31.
   Fylla-style editorial listing: open cards (no box/border/shadow — the
   deliberate inverse of the boxed product cards §18) on the cream canvas,
   separated by warm oat hairlines drawn as inner borders on grid children
   (column-gap 0 + cell padding), so no outer edges are ever stroked.
   Category chip = flat pastel fill, no stroke (theme grammar: outline =
   selectable control, flat fill = static chip); colours reuse the §7/§18
   ingredient tokens via --bcard-chip-bg / --bcard-accent set inline by
   snippets/custom.blog-card.liquid. Pills reuse .ingredient-pill (§12).
   Zero JS: filtering is native /tagged/ navigation (custom.blog-chips).
   -------------------------------------------------------------------------- */

/* 31.1 — Masthead */
.diario__wrapper {
  width: 100%;
}
.diario__masthead {
  padding-block: var(--space-xl) var(--space-sm);
}
.diario__title {
  font-family: var(--font-heading--family);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.diario__tagline {
  margin: var(--space-xs) 0 0;
  font-size: 17px;
  color: var(--color-text-secondary);
  max-width: 55ch;
}
.diario__empty {
  padding-block: var(--space-3xl);
  color: var(--color-text-secondary);
}
.diario__empty a {
  color: var(--color-terracotta);
}

/* 31.2 — Chips row (pills themselves are .ingredient-pill from §12) */
.diario-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-block: var(--space-md) var(--space-sm);
}

/* 31.3 — Featured pair: 2 columns, centre hairline */
.diario__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block-start: 1px solid var(--color-border-warm);
}
.diario__featured > * {
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}
.diario__featured > :first-child {
  padding-inline-start: 0;
}
.diario__featured > :last-child {
  padding-inline-end: 0;
}
.diario__featured > * + * {
  border-inline-start: 1px solid var(--color-border-warm);
}

/* 31.4 — Grid: 3 columns desktop, hairlines between cells only */
.diario__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.diario__grid > * {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-block-start: 1px solid var(--color-border-warm);
}
.diario__grid > :nth-child(3n + 1) {
  padding-inline-start: 0;
}
.diario__grid > :nth-child(3n) {
  padding-inline-end: 0;
}
.diario__grid > :nth-child(3n + 2),
.diario__grid > :nth-child(3n) {
  border-inline-start: 1px solid var(--color-border-warm);
}

/* Tablet: grid drops to 2 columns — recompute hairline/padding children */
@media (min-width: 750px) and (max-width: 989px) {
  .diario__grid {
    grid-template-columns: 1fr 1fr;
  }
  .diario__grid > :nth-child(3n + 1),
  .diario__grid > :nth-child(3n) {
    padding-inline: var(--space-lg);
  }
  .diario__grid > :nth-child(3n + 2),
  .diario__grid > :nth-child(3n) {
    border-inline-start: 0;
  }
  .diario__grid > :nth-child(odd) {
    padding-inline-start: 0;
  }
  .diario__grid > :nth-child(even) {
    padding-inline-end: 0;
    border-inline-start: 1px solid var(--color-border-warm);
  }
}

/* 31.5 — Card (open, editorial) */
.bcard {
  min-width: 0;
}
.bcard__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bcard__media {
  border-radius: 16px;
  overflow: hidden;
  /* Fixed cross-card height (not aspect-ratio): edge cells drop their outer
     padding for the flush hairline layout, so column content widths differ —
     a ratio box would give each card in a row a different image height.
     Viewport-scaled height keeps every row perfectly level. */
  height: clamp(260px, 30vw, 430px);
  background: var(--pcard-pastel-neutro, #f2ece1);
}
.bcard--grid .bcard__media {
  height: clamp(180px, 21vw, 300px);
}
.bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.bcard__body {
  padding-block-start: var(--space-md);
}
.bcard__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.bcard__chip {
  background: var(--bcard-chip-bg, var(--color-border-warm));
  color: var(--color-text-primary);
  border-radius: var(--border-radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.bcard__title {
  font-family: var(--font-heading--family);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: var(--space-xs) 0 0;
  transition: color 0.2s ease;
}
.bcard--featured .bcard__title {
  font-size: clamp(24px, 1.1rem + 1.4vw, 32px);
}
.bcard--grid .bcard__title {
  font-size: 20px;
}
.bcard__excerpt {
  margin: var(--space-xs) 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard__more {
  display: inline-block;
  margin-block-start: var(--space-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-terracotta);
}
@media (hover: hover) and (pointer: fine) {
  .bcard__link:hover .bcard__media img,
  .bcard__link:focus-visible .bcard__media img {
    transform: scale(1.03);
  }
  .bcard__link:hover .bcard__title,
  .bcard__link:focus-visible .bcard__title {
    color: var(--bcard-accent, var(--color-terracotta));
  }
}

/* 31.6 — Mobile ≤749px: single column, horizontal hairlines only;
   chips become the §25b scrollable edge-bleed row. */
@media (max-width: 749px) {
  .diario__title {
    font-size: 32px;
  }
  .diario__tagline {
    font-size: 15px;
  }
  .diario-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 12px;
    margin-inline: calc(-1 * var(--padding-lg, 20px));
    padding-inline: var(--padding-lg, 20px);
    scroll-padding-inline: var(--padding-lg, 20px);
  }
  .diario-chips::-webkit-scrollbar {
    display: none;
  }
  /* Edge-fade scroll affordance; .is-scrollable è messa da custom.js §6 solo
     quando la riga trabocca davvero, at-start/at-end tolgono il fade sul
     bordo che non ha contenuto oltre (fade fisso a fine corsa = pill
     "tagliata"). */
  .diario-chips.is-scrollable {
    --chips-fade-l: 16px;
    --chips-fade-r: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade-l), #000 calc(100% - var(--chips-fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade-l), #000 calc(100% - var(--chips-fade-r)), transparent);
  }
  .diario-chips.is-scrollable.at-start { --chips-fade-l: 0px; }
  .diario-chips.is-scrollable.at-end { --chips-fade-r: 0px; }
  .diario-chips .ingredient-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .diario__featured {
    grid-template-columns: 1fr;
  }
  .diario__featured > * {
    padding: var(--space-lg) 0 var(--space-xl);
  }
  .diario__featured > * + * {
    border-inline-start: 0;
  }
  .diario__grid {
    grid-template-columns: 1fr;
  }
  .diario__grid > * {
    padding: var(--space-lg) 0 var(--space-xl);
    border-inline-start: 0 !important;
  }
  /* Single column: widths are equal again, so the ratio box is the better
     fit (taller images on small screens than a vw-scaled height). */
  .bcard__media {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .bcard--grid .bcard__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .bcard--featured .bcard__title {
    font-size: 24px;
  }
}

/* 31.7 — Article page extras: category chip above the title (a LINK, so it
   keeps the pastel fill but earns a hover), related strip, back link.
   .article-related sits outside .blog-post-content so it does NOT inherit
   the 68ch prose measure of §27 — width is pinned explicitly. */
.article-cat-chip {
  display: inline-block;
  background: var(--bcard-chip-bg, var(--color-border-warm));
  color: var(--color-text-primary);
  border-radius: var(--border-radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-block-end: var(--space-xs);
  transition: filter 0.2s ease;
}
.article-cat-chip:hover {
  filter: brightness(0.94);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The article header centres its text blocks; centre the chip line too */
.section:has(.blog-post-content) header {
  text-align: center;
}
.article-related {
  width: 100%;
  border-block-start: 1px solid var(--color-border-warm);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-xl);
}
.article-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-sm);
}
.article-related__title {
  font-family: var(--font-heading--family);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.article-back {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-terracotta);
  text-decoration: none;
}
.article-back:hover {
  color: var(--color-terracotta-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-related .diario__grid > * {
  border-block-start: 0;
}
/* Featured image of the article: the vendor block runs it full content width
   (16/9, square corners) — oversized next to the ~700px prose column and
   off-brand vs the 16px-radius imagery used everywhere else. Contain it to
   ~1.25× the prose measure and round it like the blog cards. */
.blog-post-featured-image {
  max-width: 880px;
  margin-inline: auto;
}
.blog-post-featured-image__image {
  border-radius: 16px;
}

/* 31.8 — Reduced motion (mirrors §10/§15) */
@media (prefers-reduced-motion: reduce) {
  .bcard__media img,
  .bcard__title,
  .article-cat-chip {
    transition: none;
  }
  .bcard__link:hover .bcard__media img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   32 — RECENSIONI (Judge.me restyle: badge PDP, widget v3, carosello home)
   Branch judgeme-test / tema dev. I blocchi ufficiali Judge.me ereditano già
   Palanquin dal tema; qui allineiamo colori (stelle terracotta al posto del
   verde Judge.me #108474), bottoni (coerenti con .button--primary) e card.
   Il widget PDP nuovo usa classi jm-*, badge e carosello le legacy jdgm-*:
   servono entrambe le famiglie. NON nascondere il branding "Powered by
   Judge.me": violerebbe i ToS del piano Free.
   -------------------------------------------------------------------------- */

/* 32.1 — Stelle: terracotta ovunque (badge sotto il titolo, widget, istogramma).
   Le stelle legacy sono font-icon (color), quelle v3 SVG in currentColor. */
.jdgm-preview-badge .jdgm-star,
.jdgm-widget .jdgm-star,
.jm-star-rating,
.jm-star-rating__font-icon,
.jm-star-rating svg,
.jm-average-rating-display {
  color: var(--color-terracotta) !important;
  fill: currentColor;
}

/* Testo "N recensioni" del badge: torna al colore testo del tema. */
.jdgm-preview-badge .jdgm-prev-badge__text {
  color: var(--color-text-secondary);
}

/* 32.2 — Widget PDP (v3, classi jm-*) */

/* I colori del widget v3 arrivano come custom properties INLINE sul suo
   root (verificato 2026-08-24: --jm-review-widget-button-color e
   --jm-widget-primary-color = #108474, il verde Judge.me) e da lì
   derivano filtri/chip selezionati, tag keyword (color-mix), link, form
   e focus. L'!important qui vince sull'inline style e riconduce TUTTO
   alla palette brand in un colpo, senza rincorrere i selettori. */
.jm-review-widget,
.jm-widget {
  --jm-review-widget-button-color: var(--color-terracotta) !important;
  --jm-review-widget-star-and-histogram-color: var(--color-terracotta) !important;
  --jm-review-widget-form-button-color: var(--color-terracotta) !important;
  --jm-widget-primary-color: var(--color-terracotta) !important;
}

.jm-review-widget-minimal-header__title {
  font-family: var(--font-heading--family) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  color: var(--color-text-primary) !important;
}

/* NB: Judge.me marca TUTTE le pagine della paginazione come --primary e
   distingue la corrente solo con aria-current="page": il bottone pieno va
   limitato a CTA e pagina corrente, altrimenti "1" e "2" sono indistinguibili. */
.jm-button--primary:not(.jm-pagination-controls__button) {
  background: var(--color-terracotta) !important;
  border-color: var(--color-terracotta) !important;
  color: #fff !important;
  border-radius: var(--border-radius-button) !important;
  font-family: var(--font-body--family) !important;
  /* geometria del pattern .button--fill (feedback 2026-08-24: "Scrivi
     una recensione" era più piccolo dei bottoni sito) */
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.jm-button--primary:not(.jm-pagination-controls__button):hover {
  background: var(--color-terracotta-hover) !important;
  border-color: var(--color-terracotta-hover) !important;
}

/* Paginazione: solo la pagina corrente è piena terracotta; le altre neutre. */
.jm-pagination-controls__button--page {
  background: transparent !important;
  border: 1px solid var(--color-border-warm) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body--family) !important;
}
.jm-pagination-controls__button--page:hover {
  background: var(--color-acque) !important;
}
.jm-pagination-controls__button--page[aria-current="page"] {
  background: var(--color-terracotta) !important;
  border-color: var(--color-terracotta) !important;
  color: #fff !important;
}

.jm-button--secondary {
  border-radius: var(--border-radius-button) !important;
  border-color: var(--color-border-warm) !important;
  font-family: var(--font-body--family) !important;
}

/* Avatar iniziale del recensore: pastello lavanda al posto del teal. */
.jm-reviewer-avatar--with-initial {
  background: var(--color-lavanda) !important;
  color: var(--accent-lavanda) !important;
}

/* Barre istogramma (fallback legacy e v3) in terracotta. */
.jdgm-histogram__bar-content,
.jm-rating-distribution__bar-fill {
  background: var(--color-terracotta) !important;
}

/* 32.3 — Carosello home (legacy jdgm-*): card in stile .surface-card;
   colori stelle/heading già impostati dalle settings del blocco. */
.jdgm-cards-carousel .jdgm-card {
  border: 1px solid var(--color-border-warm) !important;
  border-radius: var(--border-radius-card) !important;
  box-shadow: var(--shadow-signature) !important;
}

/* Le ombre venivano croppate dal viewport dello slider (.jdgm-cards-wrapper).
   Il JS di Judge.me riallinea il nastro a filo del bordo del wrapper a ogni
   slide (qualsiasi padding sul wrapper viene "consumato" al primo click —
   verificato empiricamente), quindi il clipping è spostato sul genitore
   .jdgm-content: le card a riposo finiscono ~60px prima del bordo di taglio
   (la gronda delle frecce) e l'ombra respira su tutti i lati. Nei canaletti
   stanno veli-gradiente FISSI color crema (--color-cream = sfondo sezione):
   nessuna transizione, quindi zero delay all'avvio dello scorrimento. A
   riposo i veli coprono solo i cloni fantasma dell'infinite scroll (voluto:
   il bordo sfumato del clone suggerisce lo scorrimento); in movimento
   sfumano le card in transito. Frecce sopra i veli via z-index. */
.jdgm-cards-carousel .jdgm-content {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}
.jdgm-cards-carousel .jdgm-cards-wrapper {
  overflow: visible !important;
}
.jdgm-cards-carousel .jdgm-content::before,
.jdgm-cards-carousel .jdgm-content::after {
  content: "";
  position: absolute;
  top: -24px;
  bottom: -36px;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.jdgm-cards-carousel .jdgm-content::before {
  left: 0;
  background: linear-gradient(to right, var(--color-cream) 35%, rgba(253, 248, 240, 0));
}
.jdgm-cards-carousel .jdgm-content::after {
  right: 0;
  background: linear-gradient(to left, var(--color-cream) 35%, rgba(253, 248, 240, 0));
}
/* Frecce laterali Judge.me spente (scelta utente 2026-08-23: si naviga
   solo dalle frecce custom .rev-nav sotto il carosello, §32.5).
   !important: jdgmHideArrows del loro bundle riscrive display inline. */
.jdgm-cards-carousel .jdgm-arrow {
  display: none !important;
}
@media screen and (max-width: 749px) {
  .jdgm-cards-carousel .jdgm-content::before,
  .jdgm-cards-carousel .jdgm-content::after {
    width: 32px;
  }
}
.jdgm-cards-carousel .jdgm-title {
  font-family: var(--font-heading--family) !important;
  font-weight: var(--section-heading-weight) !important;
  /* !important: overriding Judge.me's own inline widget styles, not a theme rule. */
  font-size: var(--section-heading-size) !important;
}

/* "Da non perdere" block (product_list_text_YFtzcL) renders via Horizon's
   generic text block on the native h4 preset; !important overrides that
   preset so this heading matches the shared section-title scale. */
.text-block--product_list_text_YFtzcL h3 {
  font-family: var(--font-heading--family) !important;
  font-weight: var(--section-heading-weight) !important;
  font-size: var(--section-heading-size) !important;
}

/* Ritmo titoli home (2026-08-20, ripristinato dopo il merge 3130402 che
   aveva riportato lo stato pre-spacing): titolo a 112px visivi dal bordo
   della scroll-story (92px di margine + 20px di padding del widget) e
   112px tra il fondo delle card e la story strip — 72px visivi su
   mobile. Dal 2026-08-23 nel franco inferiore vive la riga frecce
   .rev-nav (44px, §32.5): i 112px si ricompongono come 28px sopra le
   frecce (i 40px di margin-bottom che il CSS Judge.me dà a
   .jdgm-content, meno il margin-top -12px della .rev-nav) + 44px di
   frecce + 40px di padding; su mobile (feedback 2026-08-24: le frecce
   erano appiccicate alla story strip) i 72px visivi partono DOPO le
   frecce: 20px sopra (margin-top -20px) + 44px + 72px di padding.
   !important sul padding: il CSS del CDN Judge.me carica DOPO custom.css e
   riporterebbe il padding del widget a 20px. Con i pannelli senza più
   tuck (vedi HOMEPAGE — rounded panels su fondo fisso) non c'è alcun
   margine negativo da compensare; l'ombra firmata delle card (~40px)
   si esaurisce sul crema dentro il franco inferiore. */
.jdgm-cards-carousel .jdgm-header {
  margin-top: 92px;
}
.jdgm-cards-carousel {
  /* 2026-08-25: erano 40px, che componevano i 112px del franco INSIEME alla
     riga frecce (28 + 44 + 40). Visivamente però si legge lo spazio SOTTO le
     frecce, e 40px contro i 112px sopra il titolo sbilanciavano il blocco.
     Ora il franco inferiore vale 112px pieni sotto le frecce, come sopra il
     titolo e come la sezione FAQ che segue (§35). */
  padding-bottom: 112px !important;
}
@media screen and (max-width: 749px) {
  .jdgm-cards-carousel .jdgm-header {
    margin-top: 52px; /* 72px visivi */
  }
  .jdgm-cards-carousel {
    /* su mobile il valore era già corretto: 72px sotto le frecce, gli stessi
       che la sezione FAQ mette sopra e sotto (§35). */
    padding-bottom: 72px !important;
  }
}

/* 32.5 — REV-NAV: frecce custom sotto il carosello, centrate (JS §7).
   Bottoni rotondi sul linguaggio delle card: fondo bianco, bordo warm,
   hover crema + terracotta come la × della modal. La freccia "next" è
   il glifo prev specchiato via scaleX. */
.rev-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: -12px;
  position: relative;
  z-index: 3; /* sopra i veli-gradiente dei canaletti */
}
.rev-nav__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-warm);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}
.rev-nav__btn svg {
  display: block; /* niente offset da baseline inline */
}
/* Hover sobrio (feedback utente 2026-08-24): il fondo resta bianco —
   crema qui "svuotava" il bottone sul crema della sezione — cambia
   solo il colore del glifo. */
.rev-nav__btn:hover,
.rev-nav__btn:focus-visible {
  color: var(--color-terracotta);
}
.rev-nav__btn--next svg {
  transform: scaleX(-1);
}
@media screen and (max-width: 749px) {
  .rev-nav {
    margin-top: -20px; /* 20px sopra le frecce, 72px sotto (vedi ritmo §32) */
  }
}

/* 32.4 — Reduced motion (mirrors §31.8) */
@media (prefers-reduced-motion: reduce) {
  .jdgm-cards-carousel .jdgm-carousel-item,
  .jm-review-widget * {
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   33 — REV-CARD: card recensione in stile Figma dentro lo slider Judge.me
   (custom.js §7). Design dal componente "Review Card" (nodo 2001:27):
   stelle+freccia ↗ in alto, testo tra doppie virgolette, avatar iniziale
   + nome + prodotto in basso, cluster foto 60px in basso a destra con 4
   varianti (0 foto → immagine prodotto · 1 → singola · 2 → coppia
   sfalsata -15° · 3+ → ventaglio prime 3, -15°/-30°). La larghezza card
   resta quella dello slider (vars --width-* di Judge.me): il contenuto è
   fluido. Bordo/raggio/ombra della card arrivano da §32.3; qui layout e
   tipografia. !important sulle geometrie di immagini e padding: il CSS
   del CDN Judge.me tocca .jdgm-card e i suoi img con regole proprie.
   Palette: terracotta (token) per stelle e virgolette; avatar lavanda
   Figma #b4a8d5 (nessun token esatto nel tema, var locale); nome
   prodotto grigio caldo #9f9b93. Le foto ruotate sporgono a sinistra
   del box 60px (centri x=20/x=10 dai bounding box Figma). */
.jdgm-cards-carousel .jdgm-card.rev-card {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px 12px !important;
  background: #fff !important;
  text-align: left;
  font-family: var(--font-body--family);
  cursor: pointer; /* la card apre la modal recensione (§34) */
  transition: border-color 0.2s ease;
}

/* Hover/focus: bordo terracotta tenue (il bordo warm base arriva da
   §32.3 con !important → serve !important anche qui) + freccia piena. */
.jdgm-cards-carousel .jdgm-card.rev-card:hover,
.jdgm-cards-carousel .jdgm-card.rev-card:focus-visible {
  border-color: rgba(196, 112, 75, 0.45) !important;
}
.rev-card:hover .rev-card__arrow,
.rev-card:focus-visible .rev-card__arrow {
  color: var(--color-terracotta);
}

.rev-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rev-card__stars {
  display: flex;
  gap: 4px;
  color: var(--color-terracotta);
}
.rev-card__stars svg,
.rev-card__mark svg,
.rev-card__arrow svg {
  display: block;
}
.rev-card__arrow {
  color: #9f9b93;
  transition: color 0.2s ease;
}
.rev-card__arrow:hover,
.rev-card__arrow:focus-visible {
  color: var(--color-terracotta);
}

/* Citazione: virgolette aperta/chiusa (stesso glifo, la seconda ruotata),
   testo clampato a 4 righe — il blocco flessibile spinge il footer al
   fondo così le card affiancate si pareggiano. */
.rev-card__quote {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-card__mark {
  line-height: 0;
  color: var(--color-terracotta);
  opacity: 0.4;
}
.rev-card__mark--close {
  align-self: flex-end;
  transform: rotate(180deg);
}
.rev-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.rev-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.rev-card__who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rev-card__avatar {
  --lavanda-figma: #b4a8d5;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(180, 168, 213, 0.2);
  color: var(--lavanda-figma);
  font-size: 14px;
}
.rev-card__names {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rev-card__name,
.rev-card__product {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-card__name {
  font-size: 11px; /* Figma 10px, +1 per leggibilità */
  color: var(--color-text-secondary);
}
.rev-card__product {
  font-size: 9px; /* Figma 8px, +1 per leggibilità */
  color: #9f9b93;
  text-decoration: none;
}
.rev-card__product:hover,
.rev-card__product:focus-visible {
  text-decoration: underline;
}

/* Cluster foto: box 60px; la front piena, le altre dietro ruotate coi
   centri spostati a sinistra. mid = opacità .8 e bordo warm, back e
   front bordo oat chiaro. */
.rev-card__pics {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
}
.rev-card__pic {
  box-sizing: border-box;
  position: absolute;
  object-fit: cover;
  border-radius: 16px !important;
  border: 1.4px solid #eee9df;
  background: #fff;
  max-width: none !important;
}
.rev-card__pic--front {
  left: 0;
  top: 0;
  width: 60px !important;
  height: 60px !important;
}
.rev-card__pic--mid {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14.4px !important;
  border-color: var(--color-border-warm);
  opacity: 0.8;
  left: -7px;
  top: 3px;
  transform: rotate(-15deg);
}
.rev-card__pic--back {
  width: 48.6px !important;
  height: 48.6px !important;
  left: -14.3px;
  top: 8.7px;
  transform: rotate(-30deg);
}

/* --------------------------------------------------------------------------
   34 — REV-MODAL: recensione integrale, design dal mockup utente
   (2026-08-21) — UNICO stile per ogni caso (via il lightbox Judge.me).
   Pannello bianco r24 a due colonne: a sinistra immagine grande (foto
   cliente con thumbnails-galleria, o immagine prodotto se non ce ne
   sono; niente colonna se manca tutto), a destra stelle + nome prodotto
   in alto, testo integrale tra le virgolette, footer avatar + nome +
   data e CTA terracotta piena "Vai al prodotto". Markup in custom.js
   §7; scroll lock via classe su <html> (pattern pcard-sheet §19).
   Su mobile il pannello sale dal basso e le colonne si impilano. */
html.rev-modal-open {
  overflow: hidden;
}

.rev-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rev-modal[hidden] {
  display: none;
}
.rev-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.rev-modal__panel {
  position: relative;
  width: min(780px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-signature);
  padding: 20px;
  font-family: var(--font-body--family);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* focus programmatico del dialog all'apertura: nessun ring sul pannello */
.rev-modal__panel:focus,
.rev-modal__panel:focus-visible {
  outline: none;
}
.rev-modal.is-open .rev-modal__backdrop {
  opacity: 1;
}
.rev-modal.is-open .rev-modal__panel {
  opacity: 1;
  transform: none;
}

.rev-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rev-modal__close:hover,
.rev-modal__close:focus-visible {
  background: var(--color-cream);
  color: var(--color-terracotta);
}

.rev-modal__layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* colonna immagine: quadrata, angoli morbidi; thumbnails a galleria */
.rev-modal__media {
  flex: 0 0 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rev-modal__main {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-cream);
}
.rev-modal__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rev-modal__thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.rev-modal__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rev-modal__thumb:hover,
.rev-modal__thumb:focus-visible,
.rev-modal__thumb.is-active {
  opacity: 1;
}
.rev-modal__thumb.is-active {
  box-shadow: 0 0 0 2px var(--color-terracotta);
}

.rev-modal__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Gerarchia (2026-08-23): nome prodotto promosso a titolo in alto,
   stelle sotto, impilati — l'angolo in alto a destra resta alla sola ×. */
.rev-modal__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-right: 40px; /* franco per la × del pannello */
}
.rev-modal__prodname {
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading--family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}
.rev-modal__quote {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-modal__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.rev-modal__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.rev-modal__foot .rev-card__avatar {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.rev-modal__names {
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.rev-modal__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-modal__date {
  font-size: 12px;
  color: #9f9b93;
}
/* Il CTA è un .button.button--fill (stesso pattern del CTA della story
   strip): geometria, font e hover arrivano dalle regole globali dei
   bottoni; qui solo il layout dentro il footer della modal. */
.rev-modal__cta {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
}

/* Su mobile la modal è un vero bottom sheet (scelta utente 2026-08-23,
   ridisegnato 2026-08-24 su feedback): pannello edge-to-edge che scivola
   dal basso (translateY 100% → 0 sulla transition del pannello, chiusura
   in sync col timeout 250ms di closeModal), angoli arrotondati solo
   sopra. Best practice sheet: TESTATA sticky (pill + ×) e FOOTER sticky
   (autore + CTA) sopra fade bianchi — all'apertura si vedono subito
   maniglia, immagine, titolo e CTA; scorre solo il contenuto lungo, e
   maniglia/×/CTA non scompaiono mai. L'immagine resta quadrata ma col
   lato limitato a 42dvh per lasciare spazio al resto sugli schermi
   bassi. */
@media screen and (max-width: 749px) {
  .rev-modal {
    padding: 0;
    align-items: flex-end;
  }
  .rev-modal__panel {
    width: 100%;
    max-height: 88dvh;
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
    padding: 0 20px; /* testata e footer sticky portano i franchi verticali */
    transform: translateY(100%);
    overscroll-behavior: contain; /* niente scroll-chaining nel drag */
  }
  .rev-modal.is-open .rev-modal__panel {
    transform: none;
  }

  .rev-modal__sheetbar {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 36px;
    margin: 0 -20px 6px; /* full-bleed sul padding orizzontale del panel */
    background: linear-gradient(to bottom, #fff 62%, rgba(255, 255, 255, 0));
  }
  .rev-modal__sheetbar::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-warm);
  }
  /* la barra sticky è positioned: la × si aggancia a lei, non al panel */
  .rev-modal__sheetbar .rev-modal__close {
    top: 4px;
    right: 10px;
  }

  .rev-modal__layout {
    flex-direction: column;
    gap: 16px;
  }
  .rev-modal__media {
    flex: none;
    width: 100%;
  }
  .rev-modal__main {
    width: min(100%, 42dvh); /* quadrata (aspect-ratio base), lato capped */
    margin-inline: auto;
  }

  .rev-modal__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-wrap: wrap;
    background: #fff;
    margin: 0 -20px;
    padding: 8px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .rev-modal__foot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
  .rev-modal__cta {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
}


/* --------------------------------------------------------------------------
   35 — FAQ (FAQ-01, 2026-08-24; righe a card 2026-08-25)
   Markup in snippets/custom.faq.liquid, copy in custom.faq-data.liquid.
   Le righe usano il contratto DOM di <accordion-custom>, quindi il target da
   44px e la rotazione del caret arrivano già da §09.3 e da assets/base.css.
   Qui sopra ci mettiamo il trattamento a CARD: ogni domanda è un riquadro
   bianco con bordo e raggio 16px (lo stesso della card badge del PDP, §09.4),
   staccato dai vicini, sul crema della pagina. La riga aperta si distingue
   portando il bordo a terracotta — linguaggio "outline", non riempimento.
   §09.3 vestiva le righe come un elenco a filo continuo: gli override qui
   sotto sono più specifici (.faq__list davanti) e la sovrascrivono.
   -------------------------------------------------------------------------- */
.faq {
  /* The parent .section--page-width is a grid whose items are not stretched,
     so without an explicit width the block collapses to fit-content and the
     measure ends up depending on the longest question. Pin it instead. */
  width: 100%;
  justify-self: center;
  margin-inline: auto;
  max-width: 760px;
}
.faq__heading {
  font-family: var(--font-heading--family);
  font-size: var(--section-heading-size);
  font-weight: var(--section-heading-weight);
  line-height: 1.15;
  color: var(--color-text-primary, #1A1A1A);
  margin: 0 0 var(--space-lg, 24px);
  text-align: center;
}
.faq__group-title {
  font-family: var(--font-heading--family);
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-terracotta, #C4704B);
  /* sotto il titolo lo stesso passo che separa le card (12px), sopra il doppio
     abbondante perché il gruppo si stacchi da quello precedente */
  margin: 40px 0 12px;
}
.faq__group-title:first-of-type {
  margin-top: 0;
}
.faq__list {
  /* Filo divisorio: una versione schiarita di --color-border-warm (#dad4c8).
     Serve a separare, non a disegnare un riquadro — il tratto pieno era troppo
     presente una volta caduta la card. */
  --faq-rule: #E9E3D8;
  /* Testo risposta: più chiaro del secondary di sistema (0.81), perché con lo
     stesso peso della domanda è il colore a dover portare la gerarchia da solo.
     Su crema #FDF8F0 rende ~#636159 → contrasto 5.8:1, sopra la soglia AA. */
  --faq-answer: rgba(26, 26, 26, 0.68);
  display: flex;
  flex-direction: column;
  /* abilita l'animazione verso block-size: auto in §35.2 (proprietà ereditata,
     tenuta locale per non cambiare il comportamento del resto del tema) */
  interpolate-size: allow-keywords;
}
.faq__list accordion-custom {
  display: block;
}
.faq__list accordion-custom .details {
  /* Righe piatte: nessun fondo, nessun raggio, nessuna ombra. Solo un filo
     inferiore, come l'AccordionItem del riferimento. Il trattamento a card
     (bianco + raggio + ombra) è stato provato e scartato il 2026-08-25: su
     righe da ~64px ripetute in verticale leggeva come una pila di riquadri
     che galleggiano invece che come un elenco. */
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--faq-rule);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.faq__list accordion-custom .details[open] {
  /* §09.3 porta il filo inferiore a 2px terracotta sulle righe aperte: qui il
     divisorio resta uguale per tutte, il segnale di apertura è il testo. */
  border-block-end: 1px solid var(--faq-rule);
}

/* Gerarchia portata dal COLORE, non dal peso: domanda e risposta condividono
   il peso 500 (--font-paragraph--weight, lo stesso del corpo testo del sito) e
   si distinguono per tono — domanda nera, risposta schiarita.

   Il titolo NON cambia mai colore (2026-08-25): la terracotta sulla riga aperta
   la confondeva con i link dentro la risposta, che sono terracotta e
   sottolineati (§17). E siccome la riga aperta era già terracotta, l'hover non
   produceva alcun effetto su di essa: il gesto valeva solo da chiusa.
   Ora l'unico elemento che reagisce all'hover è il caret, identico nei due
   stati; l'apertura la segnalano la rotazione del caret e la risposta. */
.faq__list accordion-custom .details__header {
  padding: 20px 0;
  gap: 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary, #1A1A1A);
  background: transparent;
}
.faq__list accordion-custom .details__header:hover {
  /* niente velo di fondo (§09.3): in hover si accende solo il caret, lo stesso
     gesto della freccia sulle review card (§32.3) */
  background: transparent;
}
.faq__list accordion-custom .details__header:hover .svg-wrapper {
  color: var(--color-terracotta, #C4704B);
}
.faq__list accordion-custom .details-content {
  /* il padding destro tiene la misura lontana dalla colonna del caret */
  padding: 0 40px 24px 0;
}
.faq__list .pdp-accordion-body,
.faq__list .pdp-accordion-body p,
.faq__list .pdp-accordion-body li {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--faq-answer);
}
.faq__list .pdp-accordion-body > :last-child {
  margin-bottom: 0;
}

/* Every context is now a standalone section and carries its own vertical
   rhythm; the section wrapper only supplies page width. All four sit on the
   page cream with no fill of their own (2026-08-25): the FAQ should read as
   part of the page, not as a tinted panel. Only the badge strip above it on
   the homepage gets a colour, and that colour is white (§28). */
.faq--home,
.faq--page,
.faq--packaging,
.faq--product {
  /* 112px matches the space the Judge.me widget puts above "Cosa dicono di
     noi", so the two blocks share one vertical rhythm on the homepage and the
     FAQ never reads as the cramped one (2026-08-25). */
  padding-block: 112px;
  padding-inline: var(--space-md, 16px);
}

/* No .details-content .faq overrides here any more: the PDP FAQ was lifted out
   of the accordion into its own section on 2026-08-25, so nothing nests. If it
   ever goes back inside a <details>, restore them AND drop data-reveal — see
   the comment in snippets/custom.faq.liquid. */

@media (max-width: 749px) {
  .faq--home,
  .faq--page,
  .faq--packaging,
  .faq--product {
    padding-block: 72px;
  }
}

/* 35.2 — Apertura animata (2026-08-25)
   assets/accordion-custom.js si limita a togglare details.open: nativamente
   il pannello scatta aperto senza transizione. ::details-content permette di
   animare l'altezza in CSS puro, senza toccare il componente né aggiungere
   peso a custom.js (che è già oltre il budget dichiarato di 16KB).
   Sotto @supports: dove il pseudo-elemento non esiste la riga si apre a
   scatto, cioè il comportamento di oggi. Niente regressioni.
   Ambito .faq__list: gli accordion del PDP, del drawer, del carrello e dei
   filtri restano quelli di prima. */
@supports selector(::details-content) {
  .faq__list .details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 280ms cubic-bezier(0.4, 0, 0.2, 1),
                content-visibility 280ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-behavior: allow-discrete;
  }
  .faq__list .details[open]::details-content {
    block-size: auto;
  }
}

/* 35.3 — Reduced motion (rispecchia §10/§15/§31.8) */
@media (prefers-reduced-motion: reduce) {
  .faq__list accordion-custom .details,
  .faq__list .details::details-content {
    transition: none;
  }
}

/* 35.1 — Empty accordion rows (replaces the pre-2026-08-24 hack)
   row-ingredienti / row-modalita in templates/product.json used to hide
   themselves with an inline script that ran document.querySelectorAll on
   EVERY 'details summary' in the page and matched on heading text — so any
   new row starting with "Ingredienti" or "Modalit" anywhere on the PDP would
   have been hidden too. The rows now emit a [data-accordion-empty] marker and
   :has() removes only their own row. No JS, no text matching, and it survives
   theme-editor re-renders. */
accordion-custom:has([data-accordion-empty]) {
  display: none;
}


/* --------------------------------------------------------------------------
   36 — PACKAGING ENTRY POINT + NEWSLETTER SUCCESS (PACK-01, 2026-08-24)
   The packaging service is quoted per request, so the PDP only carries a
   quiet pointer to /pages/packaging-personalizzato — never a configurator
   inside the buy flow. The service page itself is self-contained
   (sections/custom-packaging.liquid carries its own {% style %}), so only
   the PDP line lives here. Visual style: .upsell-card, §09.5.
   -------------------------------------------------------------------------- */
.packaging-link {
  margin-block: 16px 0;
}