/* =========================================================================
   main.css — Bundle Philia (generato automaticamente da bundle.sh)
   ========================================================================= */

/* ===== TOKENS (root scope, no layer) ===== */
/* ==========================================================================
   01 — Design tokens Philia (scala allineata a riferimento di design)
   --------------------------------------------------------------------------
   Tutti i valori del design system vivono qui come custom properties.
   La scala tipografica e i container seguono il design system Philia; i
   font, la palette e l'identita' restano Philia.
   Nessun valore "magic" deve apparire nei componenti: tutto deriva da queste
   variabili.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Tipografia — famiglie (match
     ------------------------------------------------------------------------
     I font primari (IvyOra Display, Oatmeal Pro, System85 Pro, System85 Mono
     Pro) sono commerciali e richiedono licenza. Finche' i .woff2 non sono
     forniti dal cliente in /assets/fonts/, il rendering avviene tramite i
     fallback dichiarati. Una volta caricati i font via @font-face, il
     rendering si aggiornera' automaticamente senza modifiche al CSS. */
  /* Editorial fonts (Typekit-loaded). The first name in each stack is
     the Adobe Fonts slug Typekit registers the @font-face under — copy
     it verbatim from fonts.adobe.com → kit → Copia CSS. The quoted
     legacy name comes second so locally-installed families still work.
     System sans-serif as ultimate fallback. */
  --font-display: ivyora-display, "IvyOra Display",
                  "Spectral", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text:    ivyora-text,    "IvyOra Text",
                  "Spectral", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Oatmeal Pro", "Inter",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label:   "System85 Pro", "Inter",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "System85 Mono Pro", "JetBrains Mono",
                  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ------------------------------------------------------------------------
     Tipografia — scala numerica (corrisponde 1:1 a
     Convenzione: --fs-N dove N e' la dimensione in px.
     ------------------------------------------------------------------------ */
  --fs-10:   0.625rem;   /*  10px — meta minimo, micro-label */
  --fs-12:   0.75rem;    /*  12px — eyebrow, caption */
  --fs-14:   0.875rem;   /*  14px — meta, label, breadcrumb */
  --fs-16:   1rem;       /*  16px — body */
  --fs-18:   1.125rem;   /*  18px — body large, lead */
  --fs-24:   1.5rem;     /*  24px — h4 desktop, body XL */
  --fs-32:   2rem;       /*  32px — h3 desktop */
  --fs-40:   2.5rem;     /*  40px — h2 mobile */
  --fs-48:   3rem;       /*  48px — h3 hero, h2 desktop intermedio */
  --fs-56:   3.5rem;     /*  56px — h1 mobile, hero secondario */
  --fs-72:   4.5rem;     /*  72px — h1 desktop, h2 grande */
  --fs-80:   5rem;       /*  80px — hero display medio */
  --fs-100:  6.25rem;    /* 100px — hero display massimo */

  /* ------------------------------------------------------------------------
     Tipografia — pesi tipografici allineati al CSS standard (400 = regular).
     ------------------------------------------------------------------------ */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ------------------------------------------------------------------------
     Tipografia — line height generici
     ------------------------------------------------------------------------ */
  --lh-tight:    1.1;          /* heading h1 mobile */
  --lh-snug:     1.25;         /* heading h2-h4 */
  --lh-normal:   1.5;          /* body */
  --lh-relaxed:  1.7;          /* longform, manifesto */

  /* ------------------------------------------------------------------------
     Tipografia — line height esatti per le scale display
     (corrispondono 1:1 ai valori
     ------------------------------------------------------------------------ */
  --lh-h-18:   1.111;
  --lh-h-24:   0.917;
  --lh-h-32:   1.094;
  --lh-h-40:   1.0;
  --lh-h-48:   1.042;
  --lh-h-56:   0.982;
  --lh-h-72:   1.111;
  --lh-h-80:   1.125;
  --lh-h-100:  1.0;

  /* ------------------------------------------------------------------------
     Tipografia — line height per testo IvyOra Text (body copy serif)
     (corrispondono 1:1 ai valori
     ------------------------------------------------------------------------ */
  --lh-text-14: 1.5;     /* 21/14   */
  --lh-text-16: 1.375;   /* 22/16   */
  --lh-text-18: 1.333;   /* 24/18   */
  --lh-text-24: 1.292;   /* 31/24   */
  --lh-text-32: 1.25;    /* 40/32   */
  --lh-text-48: 1.146;   /* 55/48   */

  /* ------------------------------------------------------------------------
     Tipografia — letter spacing
     ------------------------------------------------------------------------ */
  --ls-tight:    -0.02em;    /* display */
  --ls-normal:   0;          /* body */
  --ls-wide:     0.04em;     /* eyebrow leggera */
  --ls-wider:    0.12em;     /* small caps, label, eyebrow forte */

  /* ------------------------------------------------------------------------
     Palette — foundation (bianco/nero puro)
     ------------------------------------------------------------------------ */
  --c-bg:           #FFFFFF;  /* bianco, base pagine */
  --c-bg-alt:       #F5F5F5;  /* grigio molto chiaro, sezioni alternate */
  --c-surface:      #FFFFFF;  /* card, modal, drawer */
  --c-text:         #000000;  /* nero, testo primario */
  --c-text-soft:    #000000;  /* testo soft (alias storico, ora nero pieno) */
  --c-text-muted:   #8A8A8A;  /* stati inattivi, placeholder, disabled */
  --c-border:       #D9D9D9;  /* separatori, bordi card */
  --c-border-soft:  #E7E7E7;  /* separatori sottili */
  --c-footer-bg:    #CBB6B0;  /* rosa cipria — sfondo footer */
  --c-footer-text:  #3A2521;  /* marrone caldo scuro: contrasto 7.5:1 su footer-bg (WCAG AA) */
  --c-hero-title:   #F1F1F1;  /* off-white "carta vintage" per H1 hero giganti */

  /* ------------------------------------------------------------------------
     Palette — funzionali (form, notice)
     ------------------------------------------------------------------------ */
  --c-success:      #4A6B3F;

  /* ------------------------------------------------------------------------
     Spaziatura — scala (allineato a scala Tailwind)
     ------------------------------------------------------------------------ */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-5:   1.5rem;    /*  24px */
  --sp-6:   2rem;      /*  32px */
  --sp-7:   3rem;      /*  48px */
  --sp-8:   4rem;      /*  64px */
  --sp-9:   6rem;      /*  96px */
  --sp-10:  8rem;      /* 128px */

  /* ------------------------------------------------------------------------
     Ritmo verticale fra sezioni
     ------------------------------------------------------------------------ */
  --section-py-mobile:   var(--sp-7);  /* 48px */
  --section-py-tablet:   var(--sp-8);  /* 64px */
  --section-py-desktop:  var(--sp-9);  /* 96px */

  /* ------------------------------------------------------------------------
     Container (tokens condivisi)
     ------------------------------------------------------------------------ */
  --container-max:        2200px;       /* contenitore largo (son-container) */
  --content-max:          1440px;       /* contenitore stretto blocchi testo (full-container) */
  --container-px-mobile:  var(--sp-4);  /* 16px */
  --container-px-tablet:  var(--sp-5);  /* 24px da 768px in su, costante */
  --container-px-desktop: var(--sp-5);  /* 24px */

  /* Larghezze tipografiche discrete (corrispondono ai max-w-[Npx]) */
  --measure-358: 358px;
  --measure-400: 400px;
  --measure-500: 500px;
  --measure-540: 540px;
  --measure-600: 600px;
  --measure-650: 650px;
  --measure-700: 700px;
  --measure-750: 750px;

  /* ------------------------------------------------------------------------
     Border radius
     ------------------------------------------------------------------------ */
  --r-none:  0;
  --r-sm:    2px;     /* input, badge, bottoni */
  --r-md:    4px;     /* card, image wrapper, bottoni.son-btn 0.25rem) */
  --r-lg:    8px;     /* drawer, modal */
  --r-pill:  999px;   /* tag, indicatore swatch */

  /* ------------------------------------------------------------------------
     Ombre — neutre, sottili
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px  2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* ------------------------------------------------------------------------
     Motion — easing e durate
     ------------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;

  /* ------------------------------------------------------------------------
     Layout — variabili di componente condivise
     ------------------------------------------------------------------------ */
  --header-h-mobile:  56px;
  --header-h-desktop: 72px;

  /* ------------------------------------------------------------------------
     Bottone — geometria esatta.son-btn)
     ------------------------------------------------------------------------ */
  --btn-h:        3.3rem;     /* min-height ~52.8px */
  --btn-w:        18rem;      /* width fisso bottoni primari (288px) */
  --btn-px:       1rem;       /* padding orizzontale */
  --btn-py:       0.5rem;     /* padding verticale */
  --btn-radius:   var(--r-md);

  /* Easing/durate specifiche bottoni e UI piccola */
  --ease-btn:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-btn:      150ms;
}

@layer reset, base, layout, components, pages, utilities;

/* ===== RESET ===== */
@layer reset {
/* ==========================================================================
   02 — Reset moderno
   --------------------------------------------------------------------------
   Reset minimale ispirato ad Andy Bell (modern CSS reset), adattato.
   Lo scopo e' azzerare i default browser dannosi, lasciando intatti i
   comportamenti utili. Niente regole applicative qui: typography, body
   colors e default tipografici vivono in 03-base.css.
   ========================================================================== */

/* Box-sizing e azzeramento margini/padding ereditati ----------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Root: smooth scroll attivo sempre (disattivato da prefers-reduced-motion) */
html {
  scroll-behavior: smooth;
}

/* Body: altezza minima e rendering fluido --------------------------------- */
body {
  min-height: 100vh;
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liste senza bullet quando hanno role/list esplicito --------------------- */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Heading e paragrafi: bilanciamento tipografico moderno ------------------ */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Link senza underline di default (ogni componente decide la propria
   strategia di hover/focus). Eredita il colore del contesto. -------------- */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  color: inherit;
}

/* Media: comportamento fluido --------------------------------------------- */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements: ereditano la tipografia del contesto --------------------- */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Bottoni: cursor coerente, niente background di default ------------------ */
button {
  background: none;
  border: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* Textarea: ridimensionamento solo verticale ------------------------------ */
textarea {
  resize: vertical;
}

/* Target di ancora con compensazione altezza header sticky ---------------- */
:target {
  scroll-margin-top: var(--header-h-mobile);
}

@media (min-width: 768px) {
  :target {
    scroll-margin-top: var(--header-h-desktop);
  }
}

/* Tabelle: collasso bordi di default + max-width per non eccedere viewport. */
table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
}

/* Pre/code: scrollabili orizzontalmente se contenuto troppo largo. */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
code, kbd, samp {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Hidden helper accessibile via attributo HTML standard ------------------- */
[hidden] {
  display: none !important;
}

/* Rispetto preferenze utente: motion ridotto ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}

/* ===== BASE ===== */
@layer base {
/* ==========================================================================
   03 — Base typography & defaults
   --------------------------------------------------------------------------
   Default applicativi degli elementi HTML: tipografia, colore, focus.
   Le classi e i componenti non vivono qui. Tutti i valori derivano dai
   token in 01-tokens.css.
   Scala di dimensioni allineata a riferimento di design.
   ========================================================================== */

/* Root: font-size base, scroll-padding per ancore con header sticky,
   rendering tipografico smussato (essenziale per i serif IvyOra su
   schermi Retina). NIENTE overflow su html: romperebbe position:sticky
   dell'header. Il safety net orizzontale e' sul body (riga ~30). */
html {
  font-size: 100%;            /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--header-h-mobile);
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: var(--header-h-desktop);
  }
}

/* Body: tipografia, colori di base, overflow-x bloccato e word-break
   globale per spezzare URL/parole lunghe che altrimenti uscirebbero
   dal viewport mobile. */
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--c-text);
  background-color: var(--c-bg);
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Headings: serif, line-height ridotta. Le dimensioni precise sono
   stabilite dai componenti per controllo del rapporto con il contesto.
   Mobile-first, con upscale a >=768px. ------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mobile-first con clamp(): scala in modo fluido tra phone piccolo (320px)
   e mobile largo (640px). I valori MAX coincidono con i token canonici
   (fs-56 = 3.5rem, fs-40 = 2.5rem ecc.) — il MIN garantisce leggibilita'
   su 320px senza overflow. */
h1 { font-size: clamp(2rem,    6.5vw, var(--fs-56)); line-height: var(--lh-h-56); }
h2 { font-size: clamp(1.625rem, 5vw,  var(--fs-40)); line-height: var(--lh-h-40); }
h3 { font-size: clamp(1.5rem,  4.5vw, var(--fs-32)); line-height: var(--lh-h-32); }
h4 { font-size: clamp(1.25rem, 4vw,   var(--fs-24)); line-height: var(--lh-h-24); }
h5 { font-size: clamp(1.125rem, 3vw,  var(--fs-18)); line-height: var(--lh-h-18); }
h6 { font-size: var(--fs-16); line-height: var(--lh-snug); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-100); line-height: var(--lh-h-100); }
  h2 { font-size: var(--fs-72);  line-height: var(--lh-h-72);  }
  h3 { font-size: var(--fs-48);  line-height: var(--lh-h-48);  }
  h4 { font-size: var(--fs-32);  line-height: var(--lh-h-32);  }
  h5 { font-size: var(--fs-24);  line-height: var(--lh-h-24);  }
  h6 { font-size: var(--fs-18);  line-height: var(--lh-h-18);  }
}

/* Paragrafi: ritmo verticale ereditato dai contesti. ---------------------- */
p {
  color: var(--c-text);
}

/* Strong/em: pesi e stili coerenti ---------------------------------------- */
strong, b {
  font-weight: var(--fw-medium);
}

em, i {
  font-style: italic;
}

/* Small caps / meta: uso di font-body con peso normale -------------------- */
small {
  font-size: var(--fs-14);
  color: var(--c-text-soft);
}

/* Selezione testo: avorio scuro su nero caldo ----------------------------- */
::selection {
  background-color: var(--c-text);
  color: var(--c-bg);
}

/* Focus visibile globale (componenti possono sovrascrivere) --------------- */
:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Placeholder colore unificato -------------------------------------------- */
::placeholder {
  color: var(--c-text-muted);
  opacity: 1;
}

/* Tabelle: tipografia coerente -------------------------------------------- */
table {
  font-size: var(--fs-14);
}

th {
  font-weight: var(--fw-medium);
  text-align: left;
}

th, td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-soft);
}

/* HR: separatore sottile -------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin-block: var(--sp-6);
}

/* Citazioni inline -------------------------------------------------------- */
blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--c-text-soft);
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--c-border);
}

/* Code/mono: usata raramente, riservato a tabelle tecniche ---------------- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* =========================================================================
   Reveal-on-scroll — sistema di apparizioni morbido, editoriale.
   --------------------------------------------------------------------------
   Tutte le regole sono scopate sotto .js per garantire fallback no-JS:
   se reveal.js non gira (o e' bloccato), niente viene mai nascosto.
   Lo script inline in header.php aggiunge `js` a <html> immediatamente,
   prima del CSS, evitando flash visivi.

   Tempi pensati MOBILE-FIRST: distanze piccole (8px) e durate brevi
   (900ms) per non causare jank su device meno potenti. Su desktop
   crescono leggermente per dare ritmo editoriale (12px / 1100ms).

   GPU-accelerated: solo opacity + transform (no width/height/margin).
   ========================================================================= */

/* Default: fade-up morbido (mobile-first) ----------------------------- */
.js [data-reveal] > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal][data-revealed="true"] > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Desktop: distanze + durate piu' ampie per ritmo editoriale ---------- */
@media (min-width: 1024px) {
  .js [data-reveal] > * {
    transform: translate3d(0, 12px, 0);
    transition-duration: 1100ms;
  }
}

/* Mode: "fade" — solo opacity, per hero e immagini grandi -------------- */
.js [data-reveal="fade"] > * {
  transform: none;
}

/* Mode: "slide-up" — translateY piu' ampio (per CTA enfatiche) -------- */
.js [data-reveal="slide-up"] > * {
  transform: translate3d(0, 16px, 0);
  transition-duration: 1000ms;
}
@media (min-width: 1024px) {
  .js [data-reveal="slide-up"] > * {
    transform: translate3d(0, 24px, 0);
    transition-duration: 1200ms;
  }
}

/* Mode: "slide-left" — translateX da destra (elementi laterali) ------- */
.js [data-reveal="slide-left"] > * {
  transform: translate3d(12px, 0, 0);
  transition-duration: 1000ms;
}

/* Mode: "scale-in" — opacity + scale leggero (SOLO desktop) ----------- */
@media (min-width: 1024px) {
  .js [data-reveal="scale-in"] > * {
    transform: scale(0.97);
    transform-origin: center center;
    transition-duration: 1300ms;
  }
  .js [data-reveal="scale-in"][data-revealed="true"] > * {
    transform: scale(1);
  }
}

/* Mode: "blur-in" — filter blur (SOLO desktop, mobile = fade puro) ---- */
@media (min-width: 1024px) {
  .js [data-reveal="blur-in"] > * {
    filter: blur(6px);
    transition: opacity 1300ms var(--ease-out),
                transform 1300ms var(--ease-out),
                filter 1300ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js [data-reveal="blur-in"][data-revealed="true"] > * {
    filter: blur(0);
  }
}

/* Stagger nested per wrapper editoriali ricorrenti -------------------- */
.js [data-reveal] :is(.narrative__sticky,
                      .narrative__col,
                      .colorway-section__intro,
                      .closing-thought,
                      .home-feature__top,
                      .home-feature__bottom) > * {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out);
}

.js [data-reveal][data-revealed="true"] :is(.narrative__sticky,
                                            .narrative__col,
                                            .colorway-section__intro,
                                            .closing-thought,
                                            .home-feature__top,
                                            .home-feature__bottom) > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js [data-reveal][data-revealed="true"] :is(.narrative__sticky, .narrative__col, .colorway-section__intro, .closing-thought) > *:nth-child(2) { transition-delay: 120ms; }
.js [data-reveal][data-revealed="true"] :is(.narrative__sticky, .narrative__col, .colorway-section__intro, .closing-thought) > *:nth-child(3) { transition-delay: 240ms; }
.js [data-reveal][data-revealed="true"] :is(.narrative__sticky, .narrative__col, .colorway-section__intro, .closing-thought) > *:nth-child(4) { transition-delay: 360ms; }
.js [data-reveal][data-revealed="true"] :is(.narrative__sticky, .narrative__col, .colorway-section__intro, .closing-thought) > *:nth-child(5) { transition-delay: 480ms; }

/* Home feature: cascata fissa title -> body -> cta -------------------- */
.js [data-reveal] :is(.home-feature__title, .home-feature__body, .home-feature__cta) {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out);
}

.js [data-reveal][data-revealed="true"] .home-feature__title { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 100ms; }
.js [data-reveal][data-revealed="true"] .home-feature__body  { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 240ms; }
.js [data-reveal][data-revealed="true"] .home-feature__cta   { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 380ms; }

/* Immagini editoriali: durata maggiore, atterrano dopo il testo ------- */
.js [data-reveal] > :is(picture, img, .narrative__media,
                       .home-feature__media, .pdp-detail__media,
                       .colorway-grid, .philia-real-life__media,
                       .philia-related__media) {
  transition-duration: 1300ms;
}

/* Accessibility: stop totale animazioni se utente preferisce ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] *,
  .js [data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
}

/* ===== LAYOUT ===== */
@layer layout {
/* ==========================================================================
   04 — Layout primitives
   --------------------------------------------------------------------------
   Container, content wrapper, sezioni, griglia 12 colonne, larghezze
   tipografiche. Nessun componente specifico qui — solo blocchi
   riutilizzabili.
   Allineato a.son-container), content
   1440px (.full-container), padding 16/24px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .container — wrapper largo 2200px.
   NON ha padding orizzontale: il padding e' gestito dai blocchi interni
   (.section, .manifesto, .narrative--sticky, ecc.).
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   .content — wrapper stretto 1440px (corrisponde a .full-container).
   Per griglie multi-card e blocchi testuali principali. Si usa o standalone
   o nidificato dentro .container per immagini full-bleed esterne.
   -------------------------------------------------------------------------- */
.content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   .measure-N — larghezze tipografiche discrete per blocchi testo.
   Valori 1:1 con.
   -------------------------------------------------------------------------- */
.measure-358 { max-width: var(--measure-358); margin-inline: auto; }
.measure-400 { max-width: var(--measure-400); margin-inline: auto; }
.measure-500 { max-width: var(--measure-500); margin-inline: auto; }
.measure-540 { max-width: var(--measure-540); margin-inline: auto; }
.measure-600 { max-width: var(--measure-600); margin-inline: auto; }
.measure-650 { max-width: var(--measure-650); margin-inline: auto; }
.measure-700 { max-width: var(--measure-700); margin-inline: auto; }
.measure-750 { max-width: var(--measure-750); margin-inline: auto; }

/* --------------------------------------------------------------------------
   .section — ritmo verticale fra blocchi.
   Mobile 48px / tablet 64px / desktop 96px (token --section-py-*).
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-py-mobile);
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-py-tablet);
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-py-desktop);
  }
}

.section--alt   { background-color: var(--c-bg-alt); }
.section--dark  { background-color: var(--c-text); color: var(--c-bg); }
.section--bleed { padding-block: 0; padding-inline: 0; }

/* Border-bottom su tutte le sezioni (escluso .section--bleed che e' hero
   full-bleed). Linea sottile rgb(231,231,231) — pattern. */
.section:not(.section--bleed) {
  border-bottom: 1px solid var(--c-border-soft);
}

/* --------------------------------------------------------------------------
   Griglia 12 colonne con CSS Grid — gutter responsivo.
   -------------------------------------------------------------------------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .grid-12 { gap: var(--sp-5); }
}

@media (min-width: 1024px) {
  .grid-12 { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Stack — flex column con gap fisso. Pattern ricorrente per impilare
   eyebrow + h + p + CTA senza margini espliciti.
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.stack--xs { gap: var(--sp-1); }
.stack--sm { gap: var(--sp-2); }
.stack--md { gap: var(--sp-5); }
.stack--lg { gap: var(--sp-7); }
.stack--xl { gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   Cluster — flex wrap orizzontale con gap.
   -------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Split — 50/50 desktop, stack mobile. Modificatori per asimmetrie.
   Pattern: hero serif (Custom Fit), narrative-section, PDP top.
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
  }

  .split--60-40 { grid-template-columns: 6fr 4fr; }
  .split--40-60 { grid-template-columns: 4fr 6fr; }
}

/* --------------------------------------------------------------------------
   Aspect-ratio helpers — per wrapper immagine con dimensioni note.
   -------------------------------------------------------------------------- */
.aspect-4-5  { aspect-ratio: 4 / 5; }
.aspect-3-4  { aspect-ratio: 3 / 4; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-9-16 { aspect-ratio: 9 / 16; }

.aspect-4-5 > img,
.aspect-3-4 > img,
.aspect-1-1 > img,
.aspect-16-9 > img,
.aspect-9-16 > img,
.aspect-4-5 > picture > img,
.aspect-3-4 > picture > img,
.aspect-1-1 > picture > img,
.aspect-16-9 > picture > img,
.aspect-9-16 > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}

/* ===== COMPONENTS ===== */
@layer components {

/* --- components/header.css --- */
/* ==========================================================================
   Header — sticky, hide-on-scroll, mobile drawer accessibile
   --------------------------------------------------------------------------
   Pattern: logo centrato su mobile, allineato a sinistra su desktop.
   3 colonne grid: hamburger | logo | utility (mobile),
                   logo      | nav  | utility (desktop).
   Stati gestiti via data-attribute (data-scrolled, data-hidden).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header bar
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h-mobile);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    transform        var(--dur-base) var(--ease-out);
}

@media (min-width: 768px) {
  .site-header { height: var(--header-h-desktop); }
}

/* Stato post-scroll: fondo pieno avorio + bordo soft */
.site-header[data-scrolled="true"] {
  background-color: var(--c-bg);
  border-bottom-color: var(--c-border-soft);
}

/* Hide-on-scroll-down */
.site-header[data-hidden="true"] {
  transform: translateY(-100%);
}

/* Inner: 3 colonne, padding-inline per non incollarsi ai bordi viewport.
   Mobile: 1fr auto 1fr — le due colonne laterali hanno la STESSA larghezza,
   quindi il logo (colonna centrale, auto) resta otticamente al centro della
   pagina qualunque cosa ci sia ai lati (e anche se a destra non c'e' nulla).
   Con "auto 1fr auto" il logo si centrava dentro la sua colonna, non nella
   pagina: essendo hamburger e utility di larghezze diverse, risultava spostato. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
  padding-inline: var(--container-px-mobile);
  max-width: 100%;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-inline: var(--container-px-tablet);
    gap: var(--sp-4);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    /* Da qui compare la nav: logo a sinistra, nav al centro, utility a destra. */
    grid-template-columns: auto 1fr auto;
    padding-inline: var(--container-px-desktop);
  }
}

/* Ancoraggio delle colonne laterali ai bordi (mobile/tablet). */
.site-header__menu-toggle { justify-self: start; }
.site-header__utility     { justify-self: end; }

/* --------------------------------------------------------------------------
   Logo — serif. Centrato su mobile (column 2), sinistra su desktop.
   -------------------------------------------------------------------------- */
.site-header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  text-decoration: none;
  justify-self: center;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .site-header__logo {
    justify-self: start;
    font-size: var(--fs-32);
  }
}

/* Custom logo image — slightly smaller than the header container so the
   logo "breathes" with consistent space above & below.
   Header: 72px (mobile) / 96px (desktop) → logo ~60% / 65% of that. */
.site-header__logo-img {
  display: block;
  height: 40px;                   /* header mobile 56px: restano 8px sopra/sotto */
  width: auto;
  max-width: min(68vw, 260px);    /* mai oltre 68% viewport */
  object-fit: contain;
}

@media (min-width: 768px) {
  .site-header__logo-img {
    height: 48px;                 /* header 72px */
    max-width: 280px;
  }
}

@media (min-width: 1024px) {
  .site-header__logo-img {
    height: 60px;
    max-width: 380px;
  }
}

/* Belt-and-suspenders: hide WP core's default `.custom-logo-link` markup
   that some plugins re-inject after the theme has already rendered our
   own logo anchor. */
.site-header .custom-logo-link {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Hamburger toggle (visibile <1024)
   -------------------------------------------------------------------------- */
.site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-start: calc(var(--sp-2) * -1);
  color: var(--c-text);
}

.site-header__menu-toggle svg {
  width: 1.375rem;
  height: 1.375rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* --------------------------------------------------------------------------
   Desktop nav (centrale, visibile >=1024)
   -------------------------------------------------------------------------- */
.site-header__nav { justify-self: center; }

.site-header__nav ul {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
}

.site-header__nav a {
  font-family: var(--font-label);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.71;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-variant-numeric: slashed-zero;
  text-decoration: none;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Utility (Aiuto / Account / Carrello)
   -------------------------------------------------------------------------- */
.site-header__utility {
  justify-self: end;
}

.site-header__utility ul {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .site-header__utility ul { gap: var(--sp-5); }
}

.site-header__utility a {
  font-family: var(--font-label);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.71;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-variant-numeric: slashed-zero;
  text-decoration: none;
  color: var(--c-text);
}

.site-header__basket {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-header__basket svg {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.site-header__basket-count {
  font-size: var(--fs-12);
  color: var(--c-text-soft);
}

/* ==========================================================================
   Mobile drawer
   --------------------------------------------------------------------------
   Drawer da sinistra, full-height, focus trap gestito in JS. Backdrop
   opaco semi-trasparente, animazione slide-in sul pannello.
   ========================================================================== */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(28, 24, 22, 0.4);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mobile-drawer[data-open="true"] .mobile-drawer__backdrop { opacity: 1; }

.mobile-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(80vw, 22.5rem);
  background-color: var(--c-bg);
  padding: var(--sp-5);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.mobile-drawer[data-open="true"] .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-6);
}

.mobile-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-end: calc(var(--sp-2) * -1);
  color: var(--c-text);
}

.mobile-drawer__close svg {
  width: 1.375rem;
  height: 1.375rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.mobile-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  list-style: none;
}

.mobile-drawer__nav a {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  text-decoration: none;
  color: var(--c-text);
}

/* Body lock quando il drawer e' aperto (data-attribute toggled da JS).
   touch-action: none e overscroll-behavior bloccano il rubber-banding di
   iOS Safari dove "overflow: hidden" da solo non basta. */
body[data-drawer-open="true"] {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

/* Drawer — voci di servizio (FAQ/Aiuto), staccate dal menu principale.
   Su mobile la utility sparisce dall'header: qui restano raggiungibili, ma
   con un peso tipografico minore per non competere con la navigazione. */
.mobile-drawer__utility {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-soft);
}

.mobile-drawer__utility ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
}

.mobile-drawer__utility a {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text-soft);
  transition: color var(--dur-fast) var(--ease-out);
}

.mobile-drawer__utility a:hover,
.mobile-drawer__utility a:focus-visible {
  color: var(--c-text);
}

/* La utility sta in fondo al pannello, staccata dalla navigazione. */
.mobile-drawer__nav { flex: 1 0 auto; }

/* --- components/footer.css --- */
/* ==========================================================================
   Footer — rosa cipria con testi scuri caldi e logo gigante full-width
   --------------------------------------------------------------------------
   Accessibilita': il bianco su #cbb6b0 dava contrasto 1.93 (WCAG richiede
   4.5 per testo normale, 3.0 per titoli grandi). Usiamo un marrone caldo
   scuro #3a2521 che resta dentro la palette brand e raggiunge ~7.5:1.
   ========================================================================== */

.site-footer {
  background-color: var(--c-footer-bg);
  color: var(--c-footer-text, #3a2521);
  padding-block-start: var(--section-py-mobile);
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .site-footer {
    padding-block-start: var(--section-py-tablet);
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-block-start: var(--section-py-desktop);
    padding-inline: var(--container-px-desktop);
  }
}

/* 1. Certificazioni placeholder ------------------------------------------ */
.site-footer__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  padding-block-end: var(--sp-7);
  border-bottom: 1px solid rgba(58, 37, 33, 0.25);
}

.site-footer__cert {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-footer-text, #3a2521);
}

/* 2. 4 colonne link ------------------------------------------------------ */
.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}

@media (min-width: 768px)  { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .site-footer__columns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .site-footer__columns { grid-template-columns: repeat(4, 1fr); } }

.site-footer__col-title {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: 900 !important;
  line-height: 1.333;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-footer-text, #3a2521);
  margin-bottom: var(--sp-4);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
}

.site-footer__col a {
  color: var(--c-footer-text, #3a2521);
  text-decoration: none;
  font-size: var(--fs-16);
  line-height: 1.375;
  text-underline-offset: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  text-decoration: underline;
}

/* 3. Logo gigante PHILIA ------------------------------------------------- */
.site-footer__logo {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  color: #f1f1f1;
  text-align: center;
  display: block;
  text-decoration: none;
  padding-block-start: var(--sp-7);
  border-block-start: 1px solid rgba(58, 37, 33, 0.25);
  display: none !important;
}

/* 3-bis. Link social — iconcina prima del testo -------------------------
   Agganciata all'URL, non al testo: non serve toccare il widget e l'icona
   resta anche se domani cambi l'etichetta del link.
   E' una maschera CSS colorata con currentColor, quindi segue da sola il
   colore del footer e lo stato hover. Essendo generata dal CSS non viene
   letta dagli screen reader: l'etichetta accessibile resta la parola. */
.site-footer a[href*="instagram.com"] {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer a[href*="instagram.com"]::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Ccircle%20cx='17.2'%20cy='6.8'%20r='1.1'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Ccircle%20cx='17.2'%20cy='6.8'%20r='1.1'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- components/back-to-top.css --- */
/* ==========================================================================
   Back to top — pulsante minimale coerente col sistema bottoni Philia.
   Compare dopo lo scroll (classe .is-visible aggiunta da JS) e riporta in
   cima con scroll morbido. Sta sotto header/drawer (z-index 100).
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;

  /* Nascosto finché non si scrolla: opacity + visibility per toglierlo dal
     tab order quando non visibile. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 14px rgba(29, 35, 39, 0.10);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--c-text);
  color: var(--c-bg);
  border-color: var(--c-text);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

.back-to-top__icon {
  width: 18px;
  height: 18px;
  display: block;
}

@media (min-width: 768px) {
  .back-to-top {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
}

/* --- components/button.css --- */
/* ==========================================================================
   Buttons — 3 varianti (primary, secondary, text) + inverted per footer/dark
   --------------------------------------------------------------------------
   Geometria standard del tema: min-height 3.3rem, width
   18rem (override possibile con .btn--auto e .btn--full), radius 4px,
   transizione cubic-bezier(.4,0,.2,1) 150ms.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  width: var(--btn-w);
  max-width: 100%;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-label);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    color var(--dur-btn) var(--ease-btn),
    background-color var(--dur-btn) var(--ease-btn),
    border-color var(--dur-btn) var(--ease-btn);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Override geometria ----------------------------------------------------- */
.btn--auto { width: auto; }
.btn--full { width: 100%; }

/* Primary: nero pieno ---------------------------------------------------- */
.btn--primary {
  background-color: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--c-text-muted);
}

.btn--primary:active {
  background-color: rgba(0, 0, 0, 0.85);
}

/* Secondary: solo bordo -------------------------------------------------- */
.btn--secondary {
  background-color: transparent;
  border-color: var(--c-text);
  color: var(--c-text);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--c-text);
  color: var(--c-bg);
}

/* Text: solo testo + freccia (.btn--text non eredita width fisso) -------- */
.btn--text {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-label);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-variant-numeric: slashed-zero;
  text-decoration: none;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--dur-base) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.btn--text::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn--text:hover,
.btn--text:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--c-text);
}

.btn--text:hover::after,
.btn--text:focus-visible::after {
  transform: translateX(0.25rem);
}

/* Inverted (per footer/sezioni scure) ------------------------------------ */
.btn--primary-inverted {
  background-color: var(--c-bg);
  border-color: var(--c-bg);
  color: var(--c-text);
}

.btn--primary-inverted:hover,
.btn--primary-inverted:focus-visible {
  opacity: 0.85;
}

.btn--secondary-inverted {
  background-color: transparent;
  border-color: var(--c-bg);
  color: var(--c-bg);
}

.btn--secondary-inverted:hover,
.btn--secondary-inverted:focus-visible {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* --- components/breadcrumb.css --- */
/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
  padding-block: var(--sp-4);
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .breadcrumb {
    padding-inline: var(--container-px-tablet);
  }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--c-text-muted);
}

.breadcrumb a {
  color: var(--c-text-soft);
  text-decoration: none;
  text-underline-offset: 2px;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
  color: var(--c-text);
}

.breadcrumb [aria-current="page"] {
  color: var(--c-text);
}

/* --- components/product-card.css --- */
/* ==========================================================================
   Product card — niente prezzo (prezzo solo in PDP), tutta la card cliccabile
   ========================================================================== */

.product-card {
  display: block;
  position: relative;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
}

.product-card__image-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

.product-card__image-wrap img,
.product-card__image-wrap picture {
  width: 100%;
  height: 100%;
}

.product-card__image-wrap img {
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.product-card__link:hover .product-card__image-wrap img,
.product-card__link:focus-visible .product-card__image-wrap img {
  transform: scale(1.02);
  opacity: 0.92;
}

/* Info inline: titolo | separatore verticale | CTA "Scopri".
   Pattern minimal: tutto su una riga con flex-wrap (su mobile stretto
   il CTA va a capo). Font-body 14px, niente uppercase, niente eyebrow. */
.product-card__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-4);
}

.product-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.429;
  letter-spacing: var(--ls-normal);
  color: var(--c-text);
  margin: 0;
  text-transform: none;
}

.product-card__sep {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background-color: var(--c-text);
  align-self: center;
}

.product-card__cta {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.429;
  color: var(--c-text);
  text-transform: capitalize;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-card__link:hover .product-card__cta,
.product-card__link:focus-visible .product-card__cta {
  text-decoration: none;
}

/* Variant featured (card editoriale grande, due colonne immagine+testo) */
.product-card--featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .product-card--featured {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.product-card--featured .product-card__image-wrap {
  aspect-ratio: 4 / 5;
}

.product-card--featured .product-card__info {
  gap: var(--sp-4);
}

.product-card--featured .product-card__title {
  font-size: var(--fs-32);
  line-height: var(--lh-h-32);
}

@media (min-width: 768px) {
  .product-card--featured .product-card__title {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
  }
}

.product-card--featured .product-card__description {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-text-soft);
  max-width: var(--measure-500);
}

.product-card--featured .product-card__actions {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

/* Badge saldi ("On Sale") ------------------------------------------------
   WooCommerce lo stampa dentro .product-card__image-wrap, prima dell'immagine.
   Senza stile stava nel flusso e spingeva giù la foto (lo "scalino"): lo
   togliamo dal flusso e lo sovrapponiamo in alto a sinistra sull'immagine.
   Colori del footer per coerenza col brand. pointer-events:none così non
   intercetta il clic sulla card (tutta la card è un link). */
.product-card__image-wrap {
  position: relative; /* àncora per il badge in posizione assoluta */
}

.product-card__image-wrap .onsale {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  margin: 0;
  padding: 6px 13px;
  background-color: var(--c-footer-bg);
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 2px;
  pointer-events: none;
}

/* --- components/hero.css --- */
/* ==========================================================================
   Hero — split (home) + overlay (about/PDP)
   --------------------------------------------------------------------------
   Variante --split: titolo grande sinistra + immagine destra (home).
   Variante --overlay: pattern editoriale sticky. Immagine grande
   in alto, titolo serif enorme in basso che esce parzialmente dall'immagine
   sul bordo inferiore.
   ========================================================================== */

.hero {
  padding-block-start: var(--sp-7);
  padding-block-end: var(--sp-7);
}

@media (min-width: 1024px) {
  .hero { padding-block-start: var(--sp-9); padding-block-end: var(--sp-9); }
}

/* --------------------------------------------------------------------------
   Variante "split" (home — invariata)
   -------------------------------------------------------------------------- */
.hero--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: end;
}

@media (min-width: 1024px) {
  .hero--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.hero__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  line-height: var(--lh-h-72);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--fs-100);
    line-height: var(--lh-h-100);
  }
}

.hero__lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--c-text-soft);
  max-width: var(--measure-540);
}

.hero__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hero__media { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   Variante "overlay" (about — pattern editoriale sticky)
   --------------------------------------------------------------------------
   Struttura:
     .hero--overlay (relative, padding-bottom 0)
       .hero__media-wrap   (immagine, ~85vh)
       .hero__title-bottom (titolo gigante, posizionato in basso, traboccante)

   Il titolo "La nostra filosofia" e' enorme (8-13rem desktop), in serif
   bianco, posizionato in basso a tutta larghezza. Una parte e' sopra
   l'immagine, una parte sotto, cosi' la "O"/"L" iniziale buca il bordo.
   -------------------------------------------------------------------------- */
.hero--overlay {
  position: relative;
  padding-block: 0;
}

.hero__media-wrap {
  position: relative;
  width: 100%;
  height: 75svh;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

@media (min-width: 768px) { .hero__media-wrap { height: 85svh; } }
@media (min-width: 1024px) { .hero__media-wrap { height: 92svh; } }

.hero__media-wrap img,
.hero__media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* Dark overlay sopra immagine/video di OGNI hero — pseudo-elemento
   automatico. Colore + intensita' arrivano dalle CSS variables
   --hero-overlay-top e --hero-overlay-bottom, iniettate da PHP
   (vedi inc/admin/theme-settings.php → philia_hero_overlay_inline_css).
   L'editor controlla colore + intensita' da Philia → Impostazioni tema.

   Per disabilitare l'overlay su un singolo hero, basta aggiungere la
   classe .hero--no-overlay al contenitore .hero. */
.hero__media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--hero-overlay-top, rgba(0, 0, 0, 0.15)) 0%,
    var(--hero-overlay-bottom, rgba(0, 0, 0, 0.40)) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero--no-overlay .hero__media-wrap::after { display: none; }

/* Backward-compat: il vecchio elemento .hero__overlay esiste ancora nella
   home come <div>, ma e' ridondante col pseudo-elemento. Lo nascondiamo
   per evitare doppio overlay finche' il markup non viene ripulito. */
.hero__overlay { display: none; }

/* Container flex per eyebrow + titolo. Posizionato in fondo all'hero con
   gap dal bordo. */
.hero__title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 6%, 4rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-3);
  pointer-events: none;
}

/* Eyebrow — piccola scritta sopra il titolo gigante. Stile label uppercase,
   stesso color off-white del titolo cosi' i due elementi "vivono insieme". */
.hero__title-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-hero-title, #f1f1f1);
  text-align: center;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero__title-eyebrow { font-size: var(--fs-14); }
}

.hero__title-bottom {
  /* Off-white #f1f1f1 = tono "carta vintage", piu' morbido del bianco puro
     su sfondo fotografico. */
  color: var(--c-hero-title, #f1f1f1);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  /* Font-size proporzionale alla LUNGHEZZA del testo (non al solo viewport).
     PHP popola --char-count via philia_hero_title(). Risultato:
     - "Bag"             (3ch)  → ~46vw (gigante)
     - "The Bag"         (7ch)  → ~20vw (grande)
     - "Our Story"       (9ch)  → ~15vw
     - "Our Mission"     (11ch) → ~12vw
     - "The Walking Set" (15ch) → ~9vw  (medio)
     Sempre una riga, sempre il piu' grande possibile.
     Costante 140 = ~70vw di larghezza testo media nel font display serif. */
  font-size: clamp(2.5rem, calc(140vw / var(--char-count, 10)), 18rem);
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
  text-align: center;
  white-space: nowrap;
  /* width: 100% perche' siamo dentro il flex container .hero__title-bar:
     l'H1 prende tutta la larghezza disponibile e text-align centra. */
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Scritta "promo" dell'hero
   --------------------------------------------------------------------------
   Frase serif in basso a SINISTRA con i due link mostrati inline sulla
   stessa riga di base della frase. Alternativa, gestita da backend, al
   titolo gigante centrato (.hero__title-bar): quando attiva, PHP
   renderizza questo blocco al suo posto.

   Markup (vedi philia_hero_promo() in inc/helpers/template-tags.php):
     .hero__promo
       .hero__promo-text   (la frase)
       .hero__promo-links
         a.hero__promo-link (1-2, sempre inline tra loro)
   -------------------------------------------------------------------------- */
.hero__promo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 6%, 4rem);
  z-index: 2;
  /* Frase + link sulla STESSA riga di base, allineati a sinistra. I link
     vanno a capo (restando inline tra loro) solo se lo spazio non basta. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  row-gap: var(--sp-2);
  padding-inline: clamp(var(--sp-3), 5vw, var(--sp-7));
  text-align: left;
}

.hero__promo-text {
  margin: 0;
  color: var(--c-hero-title, #f1f1f1);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  /* Dimensione moderata, allineata all'esempio di riferimento del cliente:
     ~28px su mobile, ~44px su desktop. Non gigante come il titolo centrato. */
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}

.hero__promo-links {
  /* I due link sono SEMPRE inline tra loro: nessun wrap interno. */
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(var(--sp-3), 2vw, var(--sp-4));
}

.hero__promo-link {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  white-space: nowrap;
  color: var(--c-hero-title, #f1f1f1);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: opacity var(--dur-fast, 0.2s) ease;
}

@media (min-width: 768px) {
  .hero__promo-link { font-size: var(--fs-14); }
}

.hero__promo-link:hover,
.hero__promo-link:focus-visible {
  opacity: 0.7;
}

/* --- components/manifesto.css --- */
/* ==========================================================================
   Manifesto — blocco testo serif respirato, centrato, scala fluida
   --------------------------------------------------------------------------
   Markup atteso in page-brand.php / page-la-borsa.php / page-il-set.php:

     <section class="manifesto" data-reveal>
       <?php echo wp_kses_post( wpautop( philia_field(...) ) ); ?>
     </section>

   wpautop() produce <p> generici (no class) — quindi le regole devono
   coprire SIA il pattern .manifesto__text (esplicito, usato in home)
   SIA .manifesto > p (generato da wpautop, usato in brand/borsa/set).

   Markup variante home:
     <section class="manifesto manifesto--hero">
       <p class="manifesto__text">...</p>
       <div class="manifesto__cta"><a class="btn--text">...</a></div>
     </section>
     <h1 class="home-display">...</h1>
   ========================================================================== */

/* Blocco a piena larghezza, allineato a sinistra, padding interno
   generoso che cresce con il viewport. Border-bottom 1px per chiudere
   visivamente la sezione. */
.manifesto {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);

  padding-block: var(--sp-8);                /* 64px */
  padding-inline: var(--container-px-mobile);

  border-bottom: 1px solid var(--c-border-soft);
}

@media (min-width: 768px) {
  .manifesto {
    padding-block: 10rem;                    /* 160px */
    padding-inline: var(--sp-6);             /* 32px */
  }
}

@media (min-width: 1024px) {
  .manifesto {
    padding-block: 14rem;                    /* 224px */
    padding-inline: 3.5rem;                  /* 56px */
  }
}

.manifesto__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

/* Body text del manifesto. Scala 24/32/48px responsive (mobile/tablet/desktop).
   Copre 2 markup: <p class="manifesto__text"> (home, esplicito) e <p>
   generico generato da wpautop() (brand/borsa/set, da editor WYSIWYG). */
.manifesto__text,
.manifesto > p {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-text-24);
  letter-spacing: var(--ls-normal);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .manifesto__text,
  .manifesto > p {
    font-size: var(--fs-32);
    line-height: var(--lh-text-32);
  }
}

@media (min-width: 1024px) {
  .manifesto__text,
  .manifesto > p {
    font-size: var(--fs-48);
    line-height: var(--lh-text-48);
  }
}

/* Spacing fra paragrafi consecutivi del manifesto (3rem / 3.5rem desktop). */
.manifesto__text + .manifesto__text,
.manifesto > p + p {
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .manifesto__text + .manifesto__text,
  .manifesto > p + p {
    margin-top: 3.5rem;
  }
}

.manifesto__cta {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Variante --hero (home): identica al manifesto standard (stesso padding,
   stesso font scale 24/32/48px, allineato a sinistra). UNICA differenza:
   niente border-bottom — la home chiude con il blocco .home-display
   gigante sottostante, una linea sotto stonerebbe.
   -------------------------------------------------------------------------- */
.manifesto--hero {
  border-bottom: 0;
}

/* Solo in homepage: il manifesto hero è centrato e con larghezza massima
   contenuta (~700px sugli schermi grandi). La larghezza è fluida in
   percentuale (90% del contenitore) ma cappata a --measure-700 (700px),
   così resta intorno ai 700px sui monitor grandi e si adatta sui piccoli.
   Il padding laterale generoso del manifesto full-bleed qui non serve più:
   lo riduciamo così il testo riempie meglio il blocco centrato.
   Vincolato a body.home (front page) e al template home assegnato a mano. */
body.home .manifesto--hero,
body.page-template-page-home .manifesto--hero {
  max-width: min(90%, 700px);
  margin-inline: auto;
  padding-inline: var(--sp-4);
  text-align: center;
}

body.home .manifesto--hero .manifesto__cta,
body.page-template-page-home .manifesto--hero .manifesto__cta {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Home display — titolo serif gigante full-bleed sotto il manifesto.
   Il glifo riempie la
   larghezza viewport, riga unica, line-height schiacciato. Funge da h1
   della home.
   -------------------------------------------------------------------------- */
.home-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.75rem, 8vw, 9rem);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  text-align: center;
  color: var(--c-text);
  overflow-wrap: break-word;
  word-break: break-word;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--c-border-soft);
  margin: 0;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .home-display { padding-block: var(--sp-9); }
}

/* --- components/narrative-section.css --- */
/* ==========================================================================
   Narrative section — varianti per about/home
   --------------------------------------------------------------------------
   Variante .narrative (default): immagine 40% + testo 60%, image LEFT.
   Variante .narrative--columns: 1 immagine (1 col) + 3 colonne paragrafo
     (blocchi
     successivi). Su mobile: stack verticale.
   Variante .narrative--image-right: ribalta sinistra/destra.
   ========================================================================== */

.narrative {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .narrative {
    grid-template-columns: 4fr 6fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .narrative--image-right { grid-template-columns: 6fr 4fr; }
  .narrative--image-right .narrative__media { order: 2; }
}

.narrative__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

.narrative__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.narrative__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--measure-650);
}

@media (min-width: 1024px) {
  .narrative__content {
    padding-block-start: var(--sp-6);
  }
}

.narrative__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

.narrative__title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-h-32);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

@media (min-width: 768px) {
  .narrative__title {
    font-size: var(--fs-40);
    line-height: var(--lh-h-40);
  }
}

@media (min-width: 1024px) {
  .narrative__title {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
  }
}

.narrative__body {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-text);
}

@media (min-width: 768px) {
  .narrative__body {
    font-size: var(--fs-18);
    line-height: 1.6;
  }
}

.narrative__cta { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Variante --columns: 1 immagine (sinistra) + 3 colonne paragrafo testuali.
   Pattern usato sotto il
   manifesto. Stack mobile, 4 colonne desktop.
   --------------------------------------------------------------------------
   Markup atteso:
     <section class="narrative narrative--columns">
       <div class="narrative__media">…</div>
       <div class="narrative__col"><p/><p/></div>
       <div class="narrative__col"><p/><p/></div>
       <div class="narrative__col"><p/></div>
     </section>
   -------------------------------------------------------------------------- */
.narrative--columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-inline: var(--container-px-mobile);
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .narrative--columns {
    padding-inline: var(--container-px-tablet);
    padding-block: var(--section-py-tablet);
  }
}

@media (min-width: 1024px) {
  .narrative--columns {
    padding-block: var(--section-py-desktop);
  }
}

@media (min-width: 768px) {
  .narrative--columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }
}

@media (min-width: 1024px) {
  .narrative--columns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
}

.narrative--columns .narrative__media {
  aspect-ratio: 4 / 5;
}

@media (min-width: 1024px) {
  .narrative--columns .narrative__media {
    aspect-ratio: 4 / 5;
  }
}

.narrative__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.narrative__col p {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .narrative__col p {
    font-size: var(--fs-16);
    line-height: 1.55;
  }
}

/* --------------------------------------------------------------------------
   Variante --sticky: image LEFT (col 1) + testo RIGHT con sticky position
   (col 2). Pattern pattern editoriale sticky .
   --------------------------------------------------------------------------
   Markup atteso:
     <article class="narrative narrative--sticky">
       <div class="narrative__content">      // text in HTML order, order-last visivo
         <div class="narrative__sticky">
           <h2 class="narrative__title">…</h2>
           <p class="narrative__body">…</p>
         </div>
       </div>
       <div class="narrative__media">
         <img …>
       </div>
     </article>

   Mobile: stack (image visivamente sopra, text sotto).
   Desktop: 2 colonne 1fr 1fr, image left, text right sticky.
   Padding desktop: 3.5rem tutti i lati.
   Aspect ratio immagine: 78/100.
   -------------------------------------------------------------------------- */
.narrative--sticky {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  padding-inline: var(--sp-4);
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .narrative--sticky {
    padding-inline: var(--sp-6);
  }
}

.narrative--sticky {
  border-bottom: 1px solid var(--c-border-soft);
}

@media (min-width: 1024px) {
  .narrative--sticky {
    grid-template-columns: 1fr 1fr;
    padding: 3.5rem;
    gap: 3.5rem;
  }
}

/* HTML order: text first (per accessibilita'), image second.
   order-last sul .narrative__content fa apparire l'immagine prima
   visivamente (top mobile / left desktop). */
.narrative--sticky .narrative__content {
  order: 9999;
  height: 100%;
  max-width: none;
  padding-block-start: 0;
}

/* Modifier --reverse: testo LEFT, immagine RIGHT su desktop.
   Su mobile resta lo stack standard (image sopra, text sotto). */
@media (min-width: 1024px) {
  .narrative--sticky.narrative--sticky-reverse .narrative__content {
    order: 0;
  }
  .narrative--sticky.narrative--sticky-reverse .narrative__media {
    order: 9999;
  }
}

.narrative--sticky .narrative__sticky {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__sticky {
    position: sticky;
    top: 4rem;
  }
}

.narrative--sticky .narrative__media {
  aspect-ratio: 78 / 100;
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__media {
    aspect-ratio: 78 / 100;
  }
}

/* Title: text-ivyora-h-24 mobile / -h-32 tablet / -h-48 desktop
   con mb-6 mobile / lg:mb-12 desktop, pt-4 mobile */
.narrative--sticky .narrative__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  letter-spacing: var(--ls-tight);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-5);
}

@media (min-width: 768px) {
  .narrative--sticky .narrative__title {
    font-size: var(--fs-32);
    line-height: var(--lh-h-32);
  }
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__title {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
    margin-bottom: 3rem;
  }
}

/* Body: text-ivyora-copy-16 / -18 / -24 con mb-4 / lg:mb-8 — copre
   sia la classe esplicita .narrative__body sia i <p> generici generati
   da wpautop() che il template usa dentro .narrative__sticky. */
.narrative--sticky .narrative__body,
.narrative--sticky .narrative__sticky > p {
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: var(--lh-text-16);
  color: var(--c-text);
  margin: 0 0 1rem 0;
}

@media (min-width: 768px) {
  .narrative--sticky .narrative__body,
  .narrative--sticky .narrative__sticky > p {
    font-size: var(--fs-18);
    line-height: var(--lh-text-18);
  }
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__body,
  .narrative--sticky .narrative__sticky > p {
    font-size: var(--fs-24);
    line-height: var(--lh-text-24);
    margin-bottom: 2rem;
  }
}

.narrative--sticky .narrative__body:last-child,
.narrative--sticky .narrative__sticky > p:last-child {
  margin-bottom: 0;
}

/* H2 dentro narrative__sticky.
   Il template usa <h2 class="h2"> e la utility globale .h2 imporrebbe
   font-size 40px (poco adatto al pattern sticky). Qui forziamo la
   scala 24/32/48px e un margin-bottom generoso per separare il
   titolo dal body sotto. !important sui margin perche' la specificita'
   della utility .h2 globale e' uguale e vincerebbe per cascade order. */
.narrative--sticky .narrative__sticky .h2,
.narrative--sticky .narrative__sticky h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  padding-top: var(--sp-4);                  /* 16px sopra */
  margin: 0 0 var(--sp-6) !important;        /* 32px sotto — mobile */
}

@media (min-width: 768px) {
  .narrative--sticky .narrative__sticky .h2,
  .narrative--sticky .narrative__sticky h2 {
    font-size: var(--fs-32);
    line-height: var(--lh-h-32);
    margin-bottom: var(--sp-7) !important;   /* 48px — tablet */
  }
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__sticky .h2,
  .narrative--sticky .narrative__sticky h2 {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
    margin-bottom: 4rem !important;          /* 64px — desktop */
  }
}

/* Optical leading trim solo sopra l'h2 (::before): toglie lo spazio
   extra naturale che il serif lascia sopra il glifo, cosi' il
   padding-top di 16px non viene "ingoiato". Niente ::after: il
   margin-bottom sotto deve restare pieno e visibile. */
.narrative--sticky .narrative__sticky .h2::before,
.narrative--sticky .narrative__sticky h2::before {
  content: "";
  display: table;
  margin-bottom: -0.25em;
}

@media (min-width: 768px) {
  .narrative--sticky .narrative__sticky .h2::before,
  .narrative--sticky .narrative__sticky h2::before {
    margin-bottom: -0.2725em;
  }
}

@media (min-width: 1024px) {
  .narrative--sticky .narrative__sticky .h2::before,
  .narrative--sticky .narrative__sticky h2::before {
    margin-bottom: -0.2465em;
  }
}

/* --- components/editorial.css --- */
/* ==========================================================================
   Editorial — pattern grid editoriali
   --------------------------------------------------------------------------
   1. editorial-entries : grid card "punti d'ingresso" (3x2 desktop / 1x6 mobile)
   2. editorial-duo     : 2 immagini side-by-side (pattern "New arrivals" home)
   3. section-label     : eyebrow editoriale a sinistra prima di una sezione
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Entry-point grid (3x2 desktop / 1x6 mobile)
   -------------------------------------------------------------------------- */
.editorial-entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .editorial-entries { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .editorial-entries { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

/* 2 prodotti: griglia 2 col anche su desktop */
.editorial-entries--2col {
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .editorial-entries--2col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .editorial-entries--2col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
}

/* PLP standard: 1 / 2 / 4 colonne */
.editorial-entries--4col {
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .editorial-entries--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .editorial-entries--4col {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

.editorial-entry {
  display: block;
  text-decoration: none;
  color: inherit;
}

.editorial-entry__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  background-color: var(--c-bg-alt);
}

.editorial-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.editorial-entry:hover .editorial-entry__media img,
.editorial-entry:focus-visible .editorial-entry__media img {
  transform: scale(1.02);
}

.editorial-entry__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  margin-bottom: var(--sp-1);
}

@media (min-width: 768px) {
  .editorial-entry__title { font-size: var(--fs-32); line-height: var(--lh-h-32); }
}

.editorial-entry__sub {
  font-size: var(--fs-14);
  color: var(--c-text-soft);
}

/* --------------------------------------------------------------------------
   2. Editorial duo — 2 immagini side-by-side full-bleed
   -------------------------------------------------------------------------- */
.editorial-duo {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--c-border-soft);
}

.editorial-duo__subtitle {
  display: block;
  margin: 0;
  padding: var(--sp-7) var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  max-width: var(--measure-650);
}

@media (min-width: 768px) {
  .editorial-duo__subtitle {
    font-size: var(--fs-32);
    line-height: var(--lh-snug);
  }
}

@media (min-width: 1024px) {
  .editorial-duo__subtitle {
    padding: var(--sp-8) var(--sp-4) var(--sp-5);
    font-size: var(--fs-40);
    line-height: var(--lh-tight);
  }
}

.editorial-duo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .editorial-duo__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.125rem;
  }
}

.editorial-duo__item {
  display: block;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.editorial-duo__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background-color: var(--c-bg-alt);
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) {
  .editorial-duo__item:hover img,
  .editorial-duo__item:focus-visible img {
    transform: scale(1.03);
  }
}

@media (min-width: 768px) {
  .editorial-duo__item img { aspect-ratio: 1 / 1; }
}

.editorial-duo__caption {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: 1.429;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .editorial-duo__caption {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   3. Section label — eyebrow allineato a sinistra che apre una sezione
   -------------------------------------------------------------------------- */
.section-label {
  display: block;
  padding: var(--sp-7) var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.429;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text);
}

@media (min-width: 1024px) {
  .section-label {
    padding: var(--sp-9) var(--sp-4) var(--sp-5);
  }
}

/* --- components/pdp-gallery.css --- */
/* ==========================================================================
   PDP gallery — pattern pattern PDP standard
   --------------------------------------------------------------------------
   Desktop: 2 immagini side-by-side che riempiono la colonna gallery (60%
   del pdp-top). Niente thumbnail strip — le 2 immagini sono visibili
   insieme, quindi le miniature sono ridondanti.
   Mobile: flex orizzontale con scroll-snap + dot indicator (invariato).
   --------------------------------------------------------------------------
   Markup atteso (intatto per compatibilita' JS):
     <div class="pdp-gallery" data-pdp-gallery>
       <ul class="pdp-gallery__thumbs">  <- nascosto su desktop
       <div class="pdp-gallery__main" data-pdp-main>
         <figure class="pdp-gallery__image" data-image-idx="0">…
         <figure class="pdp-gallery__image" data-image-idx="1">…
       <ul class="pdp-gallery__dots">    <- visibile solo mobile
   ========================================================================== */

.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Thumbnail strip — solo per compatibilita' markup, sempre nascosta in CSS */
.pdp-gallery__thumbs {
  display: none;
}

.pdp-gallery__thumb {
  width: 5rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  padding: 0;
  border: 1px solid var(--c-border);
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery__thumb[aria-selected="true"] {
  opacity: 1;
  border-color: var(--c-text);
}

.pdp-gallery__thumb:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Main: mobile scroll-snap orizzontale, desktop grid 2 colonne
   -------------------------------------------------------------------------- */
.pdp-gallery__main {
  display: flex;
  flex-direction: row;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pdp-gallery__main::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .pdp-gallery__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    overflow-x: visible;
  }
}

.pdp-gallery__image {
  flex: 0 0 100%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  background-color: var(--c-bg-alt);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .pdp-gallery__image {
    flex: 1 1 auto;
  }
}

.pdp-gallery__image img,
.pdp-gallery__image button {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.pdp-gallery__image img { object-fit: cover; }

/* Dot indicator (mobile only) ------------------------------------------ */
.pdp-gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  list-style: none;
  margin-top: var(--sp-3);
}

@media (min-width: 1024px) {
  .pdp-gallery__dots { display: none; }
}

.pdp-gallery__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-pill);
  background-color: var(--c-border);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.pdp-gallery__dot[aria-current="true"] {
  background-color: var(--c-text);
  transform: scale(1.5);
}

/* Lightbox -------------------------------------------------------------- */
.pdp-lightbox {
  border: 0;
  padding: 0;
  /* Bianco semi-trasparente con backdrop blur: effetto "vetro smerigliato"
     editoriale, lascia trasparire vagamente la pagina sotto senza distrarre. */
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-text);
  width: 100%;
  max-width: 100dvw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
}

/* Backdrop nativo del <dialog>: anche lui con blur leggero per coerenza
   visiva quando il dialog non occupa il 100% (alcuni browser). */
.pdp-lightbox::backdrop {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pdp-lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

.pdp-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
}

@media (min-width: 768px) {
  .pdp-lightbox img { max-width: 80%; max-height: 88vh; }
}

/* Bottoni: minimal cerchio sottile nero, hover rosa cipria del footer
   (coerente con i bottoni del carousel correlati). */
.pdp-lightbox__close,
.pdp-lightbox__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-text);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--c-text);
  cursor: pointer;
  font-family: var(--font-display);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}

.pdp-lightbox__close:hover,
.pdp-lightbox__close:focus-visible,
.pdp-lightbox__nav:hover,
.pdp-lightbox__nav:focus-visible {
  background-color: var(--c-footer-bg);
  border-color: var(--c-footer-bg);
  color: var(--c-bg);
  outline: none;
  transform: scale(1.06);
}

.pdp-lightbox__close {
  top: var(--sp-4);
  right: var(--sp-4);
  font-size: 22px;
}

.pdp-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.pdp-lightbox__nav:hover,
.pdp-lightbox__nav:focus-visible {
  transform: translateY(-50%) scale(1.06);
}

.pdp-lightbox__nav--prev { left: var(--sp-3); }
.pdp-lightbox__nav--next { right: var(--sp-3); }

/* SVG chevron: dimensione fissa, perfettamente centrato dal flex parent. */
.pdp-lightbox__nav svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (min-width: 768px) {
  .pdp-lightbox__nav--prev { left: var(--sp-5); }
  .pdp-lightbox__nav--next { right: var(--sp-5); }
}

/* --- components/pdp-info.css --- */
/* ==========================================================================
   PDP info column — sticky a destra (40%), contiene tutto: titolo, prezzo,
   variant selector, CTA, tab/accordion, riga sicurezza
   ========================================================================== */

.pdp-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .pdp-top {
    grid-template-columns: 6fr 4fr;
    gap: var(--sp-8);
    align-items: start;
    padding-inline: var(--container-px-desktop);
  }
}

.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-inline: var(--container-px-mobile);
}

/* CTA "Acquista su Amazon" in PDP: rosa cipria invece di nero per
   richiamare il footer e differenziarsi dai bottoni primari generici
   del resto del sito. Hover: bianco testo nero (massimo contrasto). */
.pdp-info .btn--primary {
  background-color: var(--c-footer-bg);
  border-color: var(--c-footer-bg);
  color: var(--c-bg);
}

/* Hover: stesso rosa schiarito (+ 30% bianco). Fallback hardcoded per
   browser senza color-mix(). */
.pdp-info .btn--primary:hover,
.pdp-info .btn--primary:focus-visible {
  background-color: #dccbc7;
  background-color: color-mix(in srgb, var(--c-footer-bg) 70%, #fff);
  border-color: #dccbc7;
  border-color: color-mix(in srgb, var(--c-footer-bg) 70%, #fff);
  color: var(--c-bg);
}

@media (min-width: 768px) {
  .pdp-info {
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1024px) {
  .pdp-info {
    padding-inline: 0;
  }
}

@media (min-width: 1024px) {
  .pdp-info {
    position: sticky;
    top: calc(var(--header-h-desktop) + var(--sp-5));
    max-height: calc(100vh - var(--header-h-desktop) - var(--sp-7));
    overflow-y: auto;
    padding-right: var(--sp-3);
  }
}

.pdp-info__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, var(--fs-40));
  line-height: var(--lh-h-40);
  letter-spacing: var(--ls-tight);
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 768px) {
  .pdp-info__title { font-size: var(--fs-56); line-height: var(--lh-h-56); }
}

.pdp-info__variant-name {
  font-size: var(--fs-18);
  color: var(--c-text-soft);
  font-style: italic;
  font-family: var(--font-display);
}

.pdp-info__price {
  font-family: var(--font-body);
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

.pdp-info__availability {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-success);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.pdp-info__availability::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background-color: var(--c-success);
}

/* Riga sicurezza (Reso · Garanzia · Spedizione) ------------------------ */
.pdp-trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--c-border-soft);
}

@media (min-width: 640px) {
  .pdp-trust { flex-direction: row; gap: var(--sp-5); }
}

.pdp-trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

.pdp-trust__icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

/* --- components/pdp-tabs.css --- */
/* ==========================================================================
   PDP tabs/accordion responsive — tab orizzontali >=768px, accordion mobile
   --------------------------------------------------------------------------
   Una sola implementazione HTML. Il CSS swappa presentazione.
   ========================================================================== */

.pdp-tabs {
  border-top: 1px solid var(--c-border);
}

/* Mobile: nessuna regola serve. .pdp-tabs__item impila pulsante + pannello,
   quindi il contenuto esce sotto al titolo che l'ha aperto (fisarmonica vera). */

@media (min-width: 768px) {
  /* Desktop: display:contents scioglie .pdp-tabs__item, cosi' pulsanti e
     pannelli diventano figli diretti del flex e possono essere riordinati:
     tutti i pulsanti in riga, il pannello aperto sotto a tutta larghezza. */
  .pdp-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .pdp-tabs__item  { display: contents; }
  .pdp-tabs__tab   { order: 1; }
  .pdp-tabs__panel { order: 2; width: 100%; }

  /* Linea sotto la riga dei tab: prima la dava il bordo della <ul>. Essendo
     l'ultimo elemento di ordine 1 e largo 100%, forza l'a capo e disegna la
     riga esattamente sotto ai pulsanti. */
  .pdp-tabs::after {
    content: "";
    order: 1;
    width: 100%;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-5);
  }
}

.pdp-tabs__tab {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

@media (min-width: 768px) {
  .pdp-tabs__tab {
    width: auto;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 0;
    margin-right: var(--sp-2);
    border-bottom: 2px solid transparent;
  }
}

.pdp-tabs__tab[aria-expanded="true"] {
  color: var(--c-text);
}

@media (min-width: 768px) {
  .pdp-tabs__tab[aria-expanded="true"] {
    border-bottom-color: var(--c-text);
  }
}

.pdp-tabs__icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  flex-shrink: 0;
}

.pdp-tabs__icon::before,
.pdp-tabs__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.pdp-tabs__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.pdp-tabs__icon::after  { left: 50%; top: 0;  height: 100%; width: 1px; transform: translateX(-50%); }

.pdp-tabs__tab[aria-expanded="true"] .pdp-tabs__icon::after {
  transform: translateX(-50%) scaleY(0);
}

@media (min-width: 768px) {
  .pdp-tabs__icon { display: none; }
}

/* Pannelli ------------------------------------------------------------ */
.pdp-tabs__panel {
  display: none;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-block: 0 var(--sp-5);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-text-soft);
}

.pdp-tabs__panel[data-open="true"] { display: block; }

@media (min-width: 768px) {
  .pdp-tabs__panel { padding-block: var(--sp-4) var(--sp-5); }
}

/* --- components/pdp-details.css --- */
/* ==========================================================================
   PDP details — sezioni narrative dopo info panel
   --------------------------------------------------------------------------
   Pattern: heading h2 + 3-4 sotto-blocchi con immagine + h3 + paragrafo.
   Usato per "Pensato in ogni dettaglio", "Il Kit", "Produzione".
   ========================================================================== */

.pdp-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}

.pdp-details__heading {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: var(--lh-h-40);
  letter-spacing: var(--ls-tight);
  max-width: var(--measure-650);
}

@media (min-width: 768px) {
  .pdp-details__heading { font-size: var(--fs-72); line-height: var(--lh-h-72); }
}

.pdp-details__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .pdp-details__items--2 { grid-template-columns: repeat(2, 1fr); }
  .pdp-details__items--3 { grid-template-columns: repeat(3, 1fr); }
  .pdp-details__items--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pdp-details__items--4 { grid-template-columns: repeat(4, 1fr); }
}

.pdp-detail__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  background-color: var(--c-bg-alt);
}

.pdp-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  margin-bottom: var(--sp-3);
}

@media (min-width: 768px) {
  .pdp-detail__title { font-size: var(--fs-32); line-height: var(--lh-h-32); }
}

.pdp-detail__body {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-text-soft);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* wpautop() crea <p> dentro: ereditano stile, reset margini. */
.pdp-detail__body p {
  font: inherit;
  color: inherit;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.pdp-detail__body p:last-child { margin-bottom: 0; }

/* Tabella tecnica materiali ------------------------------------------- */
.pdp-spec-table {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-label);
  font-size: var(--fs-12);                /* compatto su mobile */
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  word-break: break-word;
  table-layout: fixed;
}

@media (min-width: 640px) {
  .pdp-spec-table { font-size: var(--fs-14); }
}

.pdp-spec-table th,
.pdp-spec-table td {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.pdp-spec-table th {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  width: 40%;
}

.pdp-spec-table td {
  text-align: right;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-family: var(--font-body);
}
}

/* ===== PAGES ===== */
@layer pages {

/* --- pages/home.css --- */
/* ==========================================================================
   Home — pattern editoriale 2-col
   --------------------------------------------------------------------------
   
   Una "feature row" per sezione (donna-philia, pepe, ecc.):
     - Mobile: stack 1 colonna
     - Desktop: 2 colonne 50/50, gap orizzontale 0.25rem (4px), py 1.5rem
     - Tipografia: display IvyOra (Spectral fallback), copy IvyOra Text fallback
   --------------------------------------------------------------------------
   Markup:
     <article class="home-feature [home-feature--reverse]">
       <div class="home-feature__media"><img></div>
       <div class="home-feature__content">
         <h2 class="home-feature__title">…</h2>
         <p class="home-feature__body">…</p>
         <a class="btn--text home-feature__cta">…</a>
       </div>
     </article>
   ========================================================================== */

.home-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-block: var(--sp-7);
}

.home-feature + .home-feature {
  border-top: 1px solid var(--c-border-soft);
}

@media (min-width: 1024px) {
  .home-feature {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.25rem;
  }
}

@media (min-width: 1024px) {
  .home-feature--reverse .home-feature__media   { order: 2; }
  .home-feature--reverse .home-feature__content { order: 1; }
}

.home-feature__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

@media (min-width: 1024px) {
  .home-feature__media { aspect-ratio: 3 / 4; }
}

.home-feature__media img,
.home-feature__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-feature__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-3);
}

@media (min-width: 768px) {
  .home-feature__content {
    padding: var(--sp-7) var(--sp-5);
    gap: var(--sp-7);
  }
}

@media (min-width: 1024px) {
  .home-feature__content {
    padding: 0 var(--sp-6);
  }
}

.home-feature__top {
  position: relative;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

@media (min-width: 1024px) {
  .home-feature__top {
    flex: 1 1 auto;
    gap: var(--sp-4);
  }
}

.home-feature__bottom {
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .home-feature__bottom { gap: var(--sp-5); }
}

.home-feature__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-40), 14vw, var(--fs-56));
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-4);
}

@media (min-width: 768px) {
  .home-feature__title {
    font-size: var(--fs-80);
    line-height: 1;
    padding-bottom: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .home-feature__title {
    font-size: var(--fs-100);
    line-height: 1;
    /* Sticky solo desktop: su mobile/tablet le sezioni sono troppo corte. */
    position: sticky;
    top: calc(var(--header-h-desktop) + var(--sp-3));
  }
}

.home-feature__body {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-text-18);
  color: var(--c-text);
  width: 100%;
  margin: 0;
}

@media (min-width: 1024px) {
  .home-feature__body {
    font-size: var(--fs-24);
    line-height: var(--lh-text-24);
  }
}

/* wpautop() genera <p> generici dentro .home-feature__body — ereditano
   il font-family/size dal wrapper, qui resettiamo solo i margini di WP. */
.home-feature__body p {
  font: inherit;
  color: inherit;
  margin: 0 0 1rem;
}
.home-feature__body p:last-child { margin-bottom: 0; }

.home-feature__cta {
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Home intro — manifesto + titolo gigante uniti, con animazione di sfondo
   --------------------------------------------------------------------------
   Wrapper unico che racchiude .manifesto--hero e .home-display, con un
   layer SVG decorativo dietro: tracce fluide della passeggiata + una
   cucitura sartoriale sottile che avanza. Astratto ed elegante, tratto
   appena percepibile. Animazioni CSS-only, disattivate con
   prefers-reduced-motion.
   ========================================================================== */
.home-intro {
  position: relative;
  overflow: hidden;
  /* Tinte molto tenui: l'animazione resta un dettaglio appena percepibile,
     elegante e non invadente. Alza/abbassa l'alpha per regolarne la presenza. */
  --home-intro-ink: rgba(125, 94, 88, 0.09);
  --home-intro-ink-stitch: rgba(125, 94, 88, 0.13);
}

.home-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.home-intro__svg {
  width: 100%;
  height: 100%;
}

.home-intro__content {
  position: relative;
  z-index: 1;
}

/* Tracce della passeggiata: linee fluide in line-art che si disegnano. */
.home-intro__line {
  stroke: var(--home-intro-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: home-intro-draw 3.4s ease forwards;
  animation-delay: 0.3s;
}
.home-intro__line--soft {
  opacity: 0.6;
  animation-delay: 0s;
}
@keyframes home-intro-draw {
  to { stroke-dashoffset: 0; }
}

/* Cucitura sartoriale sottile che avanza lentamente lungo la traccia. */
.home-intro__stitch {
  stroke: var(--home-intro-ink-stitch);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 11;
  animation: home-intro-stitch 2.6s linear 0.7s forwards;
}
@keyframes home-intro-stitch {
  to { stroke-dashoffset: -14; }
}

/* Le animazioni dell'intro partono quando la sezione entra nel viewport
   (data-reveal del tema), non al load: così la grafica si vede disegnarsi
   mentre scrolli lì. In pausa finché non rivelata, poi running. Senza JS
   partono comunque (nessun blocco). */
.js [data-reveal] .home-intro__line,
.js [data-reveal] .home-intro__stitch {
  animation-play-state: paused;
}
.js [data-reveal][data-revealed="true"] .home-intro__line,
.js [data-reveal][data-revealed="true"] .home-intro__stitch {
  animation-play-state: running;
}

/* Ogni elemento dell'intro ha i suoi tempi. Il wrapper bg/content è visibile
   subito (annulliamo il fade reveal generico, qui in @layer pages vince), poi
   testo e CTA entrano in sequenza. La grafica SVG ha i propri delay sopra.
   Sequenza dal reveal: 0s traccia soft · 0.3s traccia · 0.4s frase ·
   0.65s CTA · 0.7s cucitura · 0.9s titolo gigante. */
.js .home-intro > .home-intro__bg,
.js .home-intro > .home-intro__content {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .home-intro .manifesto__text,
.js .home-intro .manifesto__cta,
.js .home-intro .home-display {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.js .home-intro[data-revealed="true"] .manifesto__text { opacity: 1; transform: none; transition-delay: 400ms; }
.js .home-intro[data-revealed="true"] .manifesto__cta  { opacity: 1; transform: none; transition-delay: 650ms; }
.js .home-intro[data-revealed="true"] .home-display    { opacity: 1; transform: none; transition-delay: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .js .home-intro .manifesto__text,
  .js .home-intro .manifesto__cta,
  .js .home-intro .home-display {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro__line,
  .home-intro__stitch {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Banner emozionale full-width — immagine che spezza il ritmo della home
   (prima del blocco "Il mondo Philia"). Solo immagine, nessun testo.
   ========================================================================== */
.home-banner {
  position: relative;
  width: 100%;
  /* Stesso respiro sopra (al posto della vecchia section-label) e ripetuto
     sotto, così il banner "galleggia" staccato dalle sezioni adiacenti. */
  margin-block: var(--sp-7);
}

@media (min-width: 1024px) {
  .home-banner { margin-block: var(--sp-9); }
}

/* Titolo sovrapposto al banner, in stile hero (chiaro sopra l'overlay). */
.home-banner__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 6%, 4rem);
  z-index: 2;
  margin: 0;
  padding-inline: var(--sp-3);
  text-align: center;
  color: var(--c-hero-title, #f1f1f1);
  /* Titolo grande e d'impatto, serif display: font-size proporzionale alla
     LUNGHEZZA del testo (come .hero__title-bottom). PHP popola --char-count. */
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.5rem, calc(140vw / var(--char-count, 10)), 18rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}

/* Comparsa "particolare" del titolo: emerge dal basso (clip-path) salendo,
   da sfocato a nitido, con il tracking che si chiude. Parte quando il banner
   entra nel viewport (data-reveal del tema mette data-revealed="true").
   Vince sull'effetto reveal generico grazie alla maggiore specificità. */
.js [data-reveal] .home-banner__label {
  opacity: 0;
}
.js [data-reveal][data-revealed="true"] .home-banner__label {
  opacity: 1;
  animation: home-banner-label-in 1.2s var(--ease-out) 0.15s both;
}
@keyframes home-banner-label-in {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 0.35em, 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .home-banner__label,
  .js [data-reveal][data-revealed="true"] .home-banner__label {
    opacity: 1;
    animation: none;
    clip-path: none;
    filter: none;
    transform: none;
  }
}
.home-banner__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

/* Overlay coerente con gli hero: stesse variabili iniettate da
   Philia → Impostazioni tema (colore + intensità; off = trasparente). */
.home-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--hero-overlay-top, rgba(0, 0, 0, 0.15)) 0%,
    var(--hero-overlay-bottom, rgba(0, 0, 0, 0.40)) 100%
  );
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 768px) {
  .home-banner__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .home-banner__media { aspect-ratio: 2.4 / 1; }
}
.home-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Parallax (attivato da JS: aggiunge .is-parallax). L'immagine è più alta del
   contenitore e viene traslata dolcemente. Senza JS resta full e statica. */
.home-banner__media.is-parallax .home-banner__img {
  height: 120%;
  top: -10%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .home-banner__media.is-parallax .home-banner__img {
    height: 100%;
    top: 0;
    transform: none !important;
  }
}

/* --- pages/plp.css --- */
/* ==========================================================================
   pages/plp.css — Override per la pagina archivio prodotti (Shop)
   --------------------------------------------------------------------------
   Pattern pattern PLP standard: category nav serif large, view toggle
   piccolo all-caps, page header con h1 ridotto (32-40px non 100px) e
   description Inter 14-16px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Category nav — full-width, serif Spectral, large
   -------------------------------------------------------------------------- */
.plp-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  padding-inline: var(--container-px-mobile);
  border-bottom: 1px solid var(--c-border-soft);
  list-style: none;
  margin: 0;
}

@media (min-width: 768px) {
  .plp-categories {
    gap: var(--sp-6);
    padding-inline: var(--container-px-tablet);
  }
}

.plp-categories__link {
  display: inline-flex;
  align-items: center;
  /* Garantisce tap target ≥ 44px su mobile anche con font piccolo (WCAG 2.5.5). */
  min-height: 44px;
  padding-block: var(--sp-1);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .plp-categories__link {
    font-size: var(--fs-32);
    line-height: var(--lh-h-32);
  }
}

.plp-categories__link:hover,
.plp-categories__link:focus-visible,
.plp-categories__link--active {
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   2. View toggle — riga sottile all-caps
   -------------------------------------------------------------------------- */
.plp-view {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  padding-inline: var(--container-px-mobile);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
  border-bottom: 1px solid var(--c-border-soft);
}

@media (min-width: 768px) {
  .plp-view {
    padding-inline: var(--container-px-tablet);
  }
}

.plp-view__options {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.plp-view__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  /* Tap target ≥ 44×44 con padding orizzontale generoso (WCAG 2.5.5). */
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--sp-2);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.plp-view__option:hover,
.plp-view__option--active {
  color: var(--c-text);
}

/* Iconcine (vista grande / griglia compatta) al posto dei numeri. */
.plp-view__icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   3. Page header — h1 ridotto, description piccola
   -------------------------------------------------------------------------- */
.plp-header {
  padding-block: var(--sp-7);
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .plp-header {
    padding-block: var(--sp-8);
    padding-inline: var(--container-px-tablet);
  }
}

.plp-header__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-h-24);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}

@media (min-width: 768px) {
  .plp-header__title {
    font-size: var(--fs-32);
    line-height: var(--lh-h-32);
  }
}

@media (min-width: 1024px) {
  .plp-header__title {
    font-size: var(--fs-40);
    line-height: var(--lh-h-40);
  }
}

.plp-header__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
  max-width: var(--measure-540);
}

@media (min-width: 768px) {
  .plp-header__lead {
    font-size: var(--fs-16);
    max-width: 30%;
    margin-top: 30px;
  }
}

/* --------------------------------------------------------------------------
   5. Griglia prodotti PLP — 1 col mobile, 2 tablet, 3 desktop.
   Gap orizzontale piccolo (2px) cosi' le foto quasi si toccano (pattern
   editoriale "muro di immagini" tipico shop fashion). Margin-bottom 5rem
   tra righe su desktop solo (su mobile lo stack ha gia respiro naturale).
   -------------------------------------------------------------------------- */
.philia-products-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-4);
}

@media (min-width: 640px) {
  .philia-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6) 2px;
  }
}

@media (min-width: 1024px) {
  .philia-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem 2px;
  }
}

/* Selettore colonne "2 / 4" (gestito da assets/js/plp.js, che imposta
   data-plp-view sulla griglia). Override del default responsive solo da
   ≥768px: su mobile la griglia resta come da impostazione di base. */
@media (min-width: 768px) {
  .philia-products-grid[data-plp-view="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .philia-products-grid[data-plp-view="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .philia-products-grid[data-plp-view="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .philia-products-grid[data-plp-view="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Vista "2" → 2 prodotti per riga, card ORIZZONTALE: immagine a sinistra (in
   formato orizzontale 3/2) e info affiancata a destra. Solo da ≥1024px, dove
   c'è spazio per immagine + testo affiancati. L'immagine occupa ~58% della
   colonna: la sorgente da 800px resta nitida anche su retina. */
@media (min-width: 1024px) {
  .philia-products-grid[data-plp-view="2"] .product-card__link {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }
  .philia-products-grid[data-plp-view="2"] .product-card__image-wrap {
    flex: 0 0 58%;
    aspect-ratio: 3 / 2; /* orizzontale invece del 4/5 verticale */
  }
  .philia-products-grid[data-plp-view="2"] .product-card__info {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .philia-products-grid[data-plp-view="2"] .product-card__sep {
    display: none; /* separatore verticale inutile quando titolo e CTA sono impilati */
  }
}

.philia-products-grid > li.product {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- pages/pdp.css --- */
/* ==========================================================================
   pages/pdp.css — Override per la pagina PDP (la-borsa.html)
   --------------------------------------------------------------------------
   Sezione "Cinque colorway, una sola borsa": testo centrato in alto,
   griglia con le 5 immagini reali delle borse sotto, CTA price + Amazon
   in fondo. Un blocco editoriale-commerciale alternativo al pattern
   narrative--sticky.
   ========================================================================== */

.colorway-section {
  padding-block: var(--section-py-mobile);
  padding-inline: var(--container-px-mobile);
  text-align: center;
}

@media (min-width: 768px) {
  .colorway-section {
    padding-block: var(--section-py-tablet);
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1024px) {
  .colorway-section { padding-block: var(--section-py-desktop); }
}

/* Header centrato (eyebrow + h2 + lead) ---------------------------------- */
.colorway-section__intro {
  max-width: var(--measure-750);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
}

@media (min-width: 1024px) {
  .colorway-section__intro { margin-bottom: var(--sp-9); }
}

/* Griglia 5 immagini colorway: 2 col mobile / 3 tablet / 5 desktop -------- */
.colorway-grid {
  list-style: none;
  margin: 0 0 var(--sp-8) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .colorway-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}

@media (min-width: 900px) {
  .colorway-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }
}

@media (min-width: 1100px) {
  .colorway-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-5);
    margin-bottom: var(--sp-9);
  }
}

.colorway-card {
  text-align: center;
}

.colorway-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background-color: var(--c-bg-alt);
}

.colorway-grid--landscape .colorway-card__media {
  aspect-ratio: 4 / 3;
}

.colorway-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.colorway-card__name {
  font-family: var(--font-label);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: 1.429;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text);
}

/* CTA finale centrato (price + button + note) ---------------------------- */
.colorway-cta {
  max-width: var(--measure-500);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.colorway-cta__note {
  font-family: var(--font-label);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Closing thought — sezione editoriale centrata (chiusura PDP)
   -------------------------------------------------------------------------- */
.closing-thought {
  max-width: var(--measure-750);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.closing-thought__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text);
}

.closing-thought__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-h-32);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin-block: var(--sp-3);
}

@media (min-width: 768px) {
  .closing-thought__title {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
  }
}

.closing-thought__body {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-text-18);
  color: var(--c-text);
}

@media (min-width: 768px) {
  .closing-thought__body {
    font-size: var(--fs-24);
    line-height: var(--lh-text-24);
  }
}

/* wpautop() crea <p> dentro il wrapper — ereditano font/dimensione,
   resettiamo solo i margini di WP. */
.closing-thought__body p {
  font: inherit;
  color: inherit;
  margin: 0 0 1rem;
}
.closing-thought__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Set gallery — editorial 12-col asymmetric grid (page-il-set.php).
   --------------------------------------------------------------------------
   6 slot:
     Row 1: slot 1 full width  (landscape ~21:9)
     Row 2: slot 2 (7/12, ~7:5)  +  slot 3 (5/12, ~4:5 portrait)
     Row 3: slot 4 (5/12, ~4:5)  +  slot 5 (7/12, ~7:5)
     Row 4: slot 6 full width  (landscape ~21:9)
   Su mobile (< 768px) stack 1 colonna.
   ========================================================================== */
.set-gallery__intro {
  max-width: var(--measure-700);
  margin: 0 auto var(--sp-7);
  text-align: center;
}

.set-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.set-gallery__item {
  margin: 0;
  position: relative;
}

.set-gallery__media {
  width: 100%;
  background-color: var(--c-bg-alt);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.set-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.set-gallery__caption {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
  margin-top: var(--sp-3);
}

@media (min-width: 768px) {
  .set-gallery {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-5);
  }

  .set-gallery__item[data-slot="1"] { grid-column: 1 / -1; }
  .set-gallery__item[data-slot="2"] { grid-column: 1 / span 7; }
  .set-gallery__item[data-slot="3"] { grid-column: 8 / -1; }
  .set-gallery__item[data-slot="4"] { grid-column: 1 / span 5; }
  .set-gallery__item[data-slot="5"] { grid-column: 6 / -1; }
  .set-gallery__item[data-slot="6"] { grid-column: 1 / -1; }

  .set-gallery__item[data-slot="1"] .set-gallery__media,
  .set-gallery__item[data-slot="6"] .set-gallery__media { aspect-ratio: 21 / 9; }
  .set-gallery__item[data-slot="2"] .set-gallery__media,
  .set-gallery__item[data-slot="5"] .set-gallery__media { aspect-ratio: 7 / 5; }
  .set-gallery__item[data-slot="3"] .set-gallery__media,
  .set-gallery__item[data-slot="4"] .set-gallery__media { aspect-ratio: 4 / 5; }
}

/* --- pages/faq.css --- */
/* ==========================================================================
   pages/faq.css — Pagina FAQ (template page-faq.php)
   --------------------------------------------------------------------------
   Stili scopati esclusivamente sotto .faq-page* per non interferire con
   altre pagine. Il template usa <section class="section faq-page"> e
   <div class="container faq-page__inner">: il padding verticale e i
   container max-width arrivano da .section e .container del layout
   globale; qui aggiungiamo solo la colonna centrata, la tipografia e il
   layout delle sezioni Q&A.

   Markup (page-faq.php):
     <section class="section faq-page">
       <div class="container faq-page__inner">
         <header class="faq-page__header">
           <h1 class="faq-page__title">…</h1>
           <p class="faq-page__intro">…</p>
         </header>
         <div class="faq-page__body">
           <section class="faq-section">
             <h2 class="faq-section__title">…</h2>
             <div class="faq-section__items">
               <article class="faq-item">
                 <h3 class="faq-item__question">…</h3>
                 <div class="faq-item__answer"><p>…</p></div>
               </article>
             </div>
           </section>
         </div>
       </div>
     </section>
   ========================================================================== */

/* Wrapper centrato — colonna unica, larghezza editoriale (~750px). */
.faq-page__inner {
  max-width: var(--measure-750);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Header — titolo centrato + intro
   -------------------------------------------------------------------------- */
.faq-page__header {
  text-align: center;
  margin-bottom: var(--sp-8);
}

@media (min-width: 768px) {
  .faq-page__header { margin-bottom: var(--sp-9); }
}

.faq-page__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-h-40);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .faq-page__title {
    font-size: var(--fs-56);
    line-height: var(--lh-h-56);
  }
}

@media (min-width: 1024px) {
  .faq-page__title {
    font-size: var(--fs-72);
    line-height: var(--lh-h-72);
  }
}

.faq-page__intro {
  max-width: var(--measure-540);
  margin: var(--sp-4) auto 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

@media (min-width: 768px) {
  .faq-page__intro { font-size: var(--fs-16); }
}

/* --------------------------------------------------------------------------
   Body — lista verticale di sezioni
   -------------------------------------------------------------------------- */
.faq-page__body {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Sezione — h2 serif large + lista Q&A. Linea sottile tra sezioni
   consecutive (non sulla prima per evitare doppio bordo col titolo).
   -------------------------------------------------------------------------- */
.faq-page .faq-section {
  padding-block: var(--sp-7);
}

.faq-page .faq-section + .faq-section {
  border-top: 1px solid var(--c-border-soft);
}

.faq-page .faq-section:first-child { padding-top: 0; }

@media (min-width: 768px) {
  .faq-page .faq-section { padding-block: var(--sp-8); }
  .faq-page .faq-section:first-child { padding-top: 0; }
}

.faq-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-h-32);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
}

@media (min-width: 768px) {
  .faq-section__title {
    font-size: var(--fs-40);
    line-height: var(--lh-h-40);
    margin-bottom: var(--sp-6);
  }
}

.faq-section__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

@media (min-width: 768px) {
  .faq-section__items { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Item — domanda bold sans + risposta regular
   -------------------------------------------------------------------------- */
.faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.faq-item__question {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-text);
  margin: 0;
}

.faq-item__answer {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

@media (min-width: 768px) {
  .faq-item__answer { font-size: var(--fs-16); }
}

.faq-item__answer p { margin: 0; }
.faq-item__answer p + p { margin-top: var(--sp-3); }

.faq-item__answer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.faq-item__answer a:hover,
.faq-item__answer a:focus-visible { opacity: 0.7; }

.faq-item__answer ul,
.faq-item__answer ol {
  margin: var(--sp-3) 0;
  padding-inline-start: var(--sp-5);
}

.faq-item__answer li + li { margin-top: var(--sp-2); }

.faq-item__answer strong { font-weight: var(--fw-medium); }
.faq-item__answer em     { font-style: italic; }

/* --- pages/single-product.css --- */
/* ==========================================================================
   pages/single-product.css — Sezioni finali della PDP
   --------------------------------------------------------------------------
   1. .philia-real-life  : gallery "Philia in Real Life" editoriale
   2. .philia-related    : carousel orizzontale dei prodotti correlati

   Stili pensati per essere scoped sotto i selettori .philia-real-life* e
   .philia-related* in modo da non sovrascrivere altri componenti.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Common spacing — entrambe le sezioni respirano in modo coerente con il
   resto della PDP. Titolo lontano dal contenuto (richiesta dell'editor) e
   container max-width allineato al resto del sito.
   -------------------------------------------------------------------------- */
.philia-real-life,
.philia-related {
  padding-block: var(--section-py-mobile);
  padding-inline: var(--container-px-mobile);
  margin-inline: auto;
  max-width: var(--container-max);
}

@media (min-width: 768px) {
  .philia-real-life,
  .philia-related {
    padding-block: var(--section-py-tablet);
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1024px) {
  .philia-real-life,
  .philia-related {
    padding-block: var(--section-py-desktop);
  }
}

/* Linea separatrice tra le 2 sezioni (e tra real-life e quello che precede). */
.philia-real-life {
  border-top: 1px solid var(--c-border-soft);
}

.philia-real-life + .philia-related {
  border-top: 1px solid var(--c-border-soft);
}

/* Header comune: eyebrow + h2, allineato a sinistra, GENEROSO spazio sotto
   prima del contenuto (come le altre sezioni del sito). */
.philia-real-life__header,
.philia-related__header {
  margin-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 768px) {
  .philia-real-life__header,
  .philia-related__header {
    margin-bottom: var(--sp-8);
  }
}

@media (min-width: 1024px) {
  .philia-real-life__header,
  .philia-related__header {
    margin-bottom: var(--sp-9);
  }
}

.philia-real-life__eyebrow,
.philia-related__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

.philia-real-life__title,
.philia-related__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-h-32);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .philia-real-life__title,
  .philia-related__title {
    font-size: var(--fs-48);
    line-height: var(--lh-h-48);
  }
}

@media (min-width: 1024px) {
  .philia-real-life__title,
  .philia-related__title {
    font-size: var(--fs-72);
    line-height: var(--lh-h-72);
  }
}

/* ==========================================================================
   1. GALLERY "Philia in Real Life" — layout editoriale asimmetrico 12-col
   --------------------------------------------------------------------------
   Stessa filosofia di .set-gallery (riga grande + half-row alternate),
   ma con gap leggermente piu' arioso per dare un mood "instagram editoriale".
   Pattern slot 1..6 ripetuto se l'editor carica piu' di 6 foto.
   ========================================================================== */

/* MOBILE (< 640px): slider orizzontale con scroll-snap.
   Le foto vengono croppate a 4/5 portrait per coerenza altezza del
   carousel, sennò il flex avrebbe altezze irregolari (le foto hanno
   ratio naturale diverso). Su mobile l'esperienza swipe e' superiore
   al masonry verticale che richiedeva scroll lungo. */
.philia-real-life__grid {
  list-style: none;
  margin: 0 calc( var(--container-px-mobile) * -1 );  /* full-bleed mobile */
  padding: 0 var(--container-px-mobile);
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-px-mobile);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.philia-real-life__grid::-webkit-scrollbar { display: none; }

.philia-real-life__item {
  flex: 0 0 auto;
  width: 78vw;                          /* peek della successiva */
  margin: 0;
  scroll-snap-align: start;
}

.philia-real-life__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;                  /* crop uniforme mobile */
  background-color: var(--c-bg-alt);
  overflow: hidden;
}

.philia-real-life__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* crop mobile */
  display: block;
  transition: transform 700ms var(--ease-out);
}

/* TABLET (>= 640px): masonry CSS columns con aspect-ratio naturale.
   break-inside: avoid evita che una foto sia spezzata in fondo colonna.
   height: auto sull'immagine ripristina il ratio originale (no crop). */
@media (min-width: 640px) {
  .philia-real-life__grid {
    margin: 0;
    padding: 0;
    display: block;
    column-count: 2;
    column-gap: var(--sp-4);
    overflow: visible;
    scroll-snap-type: none;
  }

  .philia-real-life__item {
    width: auto;
    display: block;
    margin: 0 0 var(--sp-4);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    scroll-snap-align: none;
  }

  .philia-real-life__media {
    aspect-ratio: auto;                 /* ratio naturale tablet/desktop */
  }

  .philia-real-life__media img {
    height: auto;
    object-fit: initial;
  }
}

@media (min-width: 1024px) {
  .philia-real-life__grid { column-count: 3; column-gap: var(--sp-5); }
  .philia-real-life__item { margin-bottom: var(--sp-5); }

  /* Override numero colonne: classe applicata sulla sezione genitore
     (.philia-real-life--cols-3 / .philia-real-life--cols-4) dal meta
     box "Sezione finale PDP". */
  .philia-real-life--cols-3 .philia-real-life__grid { column-count: 3; }
  .philia-real-life--cols-4 .philia-real-life__grid {
    column-count: 4;
    column-gap: var(--sp-4);
  }
}

@media (hover: hover) {
  .philia-real-life__item:hover .philia-real-life__media img {
    transform: scale(1.03);
  }
}

/* ==========================================================================
   2. CAROUSEL "Prodotti correlati" — scroll-snap orizzontale + frecce
   ========================================================================== */

.philia-related__carousel {
  position: relative;
  /* Permette alle frecce di sporgere oltre il bordo del container. */
  margin-inline: calc( var(--sp-3) * -1 );
}

@media (min-width: 1024px) {
  .philia-related__carousel { margin-inline: 0; }
}

.philia-related__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--sp-3);
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sp-3);
  -webkit-overflow-scrolling: touch;
  /* Scrollbar nascosta su tutti i browser — la navigazione avviene
     tramite swipe (mobile/touchpad) o frecce (desktop). */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge legacy / IE */
}

.philia-related__track::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Opera */
}

@media (min-width: 768px) {
  .philia-related__track { gap: var(--sp-5); padding-inline: 0; }
}

/* Card singola: larghezza fissa per consentire il carousel orizzontale.
   Mobile: ~70vw → si vede sbirciare la successiva (UX swipe).
   Tablet: ~38vw.
   Desktop: 22% (4 card visibili senza gap). */
.philia-related__card {
  flex: 0 0 auto;
  width: 70vw;
  scroll-snap-align: start;
  margin: 0;
}

@media (min-width: 640px) {
  .philia-related__card { width: 42vw; }
}

@media (min-width: 1024px) {
  .philia-related__card { width: calc((100% - (var(--sp-5) * 3)) / 4); }
}

.philia-related__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.philia-related__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
  margin-bottom: var(--sp-4);
}

.philia-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) {
  .philia-related__link:hover .philia-related__media img,
  .philia-related__link:focus-visible .philia-related__media img {
    transform: scale(1.03);
  }
}

.philia-related__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.philia-related__eyebrow-sm {
  font-family: var(--font-label);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .philia-related__eyebrow-sm { font-size: var(--fs-12); }
}

.philia-related__name {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-h-18);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .philia-related__name {
    font-size: var(--fs-24);
    line-height: var(--lh-h-24);
  }
}

.philia-related__variant {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--c-text-soft);
}

/* Frecce prev/next — ultra-minimal: niente bordo, solo chevron nero
   leggero in un piccolo cerchio bianco semi-trasparente che fluttua
   sopra l'immagine. Hover: rosa cipria pieno.
   Visibili solo da tablet in su (sotto si fa swipe). */
.philia-related__nav {
  display: none;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              opacity 200ms var(--ease-out);
}

@media (min-width: 1024px) {
  .philia-related__nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.philia-related__nav--prev { left: var(--sp-3); }
.philia-related__nav--next { right: var(--sp-3); }

/* Allineamento ottico del chevron */
.philia-related__nav--prev > span { transform: translateX(-1px); }
.philia-related__nav--next > span { transform: translateX(1px); }

.philia-related__nav:hover,
.philia-related__nav:focus-visible {
  background-color: var(--c-footer-bg);     /* #CBB6B0 rosa cipria */
  color: var(--c-bg);                       /* chevron bianco */
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

.philia-related__nav[disabled] {
  opacity: 0;                /* spariscono completamente quando al bordo */
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
}

/* Quando .philia-related precede il footer (ultima sezione PDP), aggiunge
   un margin-bottom di respiro per non incollarsi alla footer rosa. */
.philia-related:last-of-type {
  padding-bottom: calc( var(--section-py-desktop) + var(--sp-4) );
}

/* --- pages/404.css --- */
/* ==========================================================================
   404 — Page not found (layout editoriale centrato Philia)
   --------------------------------------------------------------------------
   Blocco centrato verticalmente: eyebrow label + titolo serif display +
   testo soft + azione primaria. Stesso linguaggio della closing-thought,
   ma a tutta altezza per dare presenza alla pagina d'errore.
   ========================================================================== */
.error-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-4);
  max-width: var(--measure-750);
  margin-inline: auto;
  padding-block: var(--sp-8);
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .error-404 {
    min-height: 70vh;
    padding-inline: var(--container-px-tablet);
  }
}

.error-404__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text-soft);
}

.error-404__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-h-40);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .error-404__title {
    font-size: var(--fs-72);
    line-height: var(--lh-h-72);
  }
}

.error-404__body {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-text-18);
  color: var(--c-text-soft);
  max-width: var(--measure-540);
  margin: 0 auto;
}

.error-404__actions {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* --- pages/contact.css --- */
/* ==========================================================================
   Contatti — testo a sinistra, immagine a destra (full-bleed lato destro
   da desktop). Coerente con il linguaggio editoriale del tema.
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.contact__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-inline: var(--container-px-mobile);
  padding-block: var(--sp-7);
  order: 2; /* su mobile: testo sotto l'immagine */
}

.contact__media {
  order: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-alt);
}

.contact__media img,
.contact__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .contact__text {
    order: 1;
    justify-content: center;
    padding-inline: clamp(var(--sp-6), 6vw, 6rem);
    padding-block: var(--sp-9);
  }
  .contact__media {
    order: 2;
    aspect-ratio: auto;
    min-height: 70vh;
  }
}

.contact__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-h-40);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

@media (min-width: 768px) {
  .contact__title {
    font-size: var(--fs-56);
    line-height: 1.05;
  }
}

.contact__intro,
.contact__note {
  font-family: var(--font-text);
  font-size: var(--fs-18);
  line-height: var(--lh-text-18);
  color: var(--c-text-soft);
  max-width: var(--measure-540);
  margin: 0;
}

.contact__intro p {
  margin: 0 0 1rem;
}
.contact__intro p:last-child {
  margin-bottom: 0;
}

.contact__intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact__email {
  font-family: var(--font-text);
  font-size: var(--fs-18);
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact__email:hover,
.contact__email:focus-visible {
  color: var(--c-text-soft);
}
}

/* ===== UTILITIES ===== */
@layer utilities {
/* ==========================================================================
   05 — Utilities
   --------------------------------------------------------------------------
   Solo le utility realmente usate dai componenti. Non vogliamo replicare
   Tailwind: vogliamo un set ristretto e intenzionale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibilita': nascondi visivamente ma esponi a screen reader.
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Variante che torna visibile al focus (skip-link). ----------------------- */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link: appare al focus, sopra tutto, contrasto alto. ---------------- */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-text);
  color: var(--c-bg);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Tipografia — eyebrow uppercase con slashed zero.
   Pattern ricorrente: KIT COMPLETO, PRIMA COLLEZIONE, MADE IN ITALY.
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.333;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: var(--c-text);
}

.eyebrow--soft  { color: var(--c-text-soft); }
.eyebrow--muted { color: var(--c-text-muted); }
.eyebrow--14    { font-size: var(--fs-14); }

/* --------------------------------------------------------------------------
   Tipografia — scala dei titoli (.h1 -> .h6). Classi riusabili per
   applicare lo stile di un titolo a qualsiasi tag, mantenendo coerenza
   visiva. Pattern: i titoli di sezione restano <h2> semantici, la
   dimensione si controlla con .h2 (default) o .h3 per sotto-blocchi.
   -------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

.h1 { font-size: var(--fs-56); line-height: var(--lh-h-56); }
.h2 { font-size: var(--fs-40); line-height: var(--lh-h-40); }
.h3 { font-size: var(--fs-32); line-height: var(--lh-h-32); }
.h4 { font-size: var(--fs-24); line-height: var(--lh-h-24); }
.h5 { font-size: var(--fs-18); line-height: var(--lh-h-18); }
.h6 { font-size: var(--fs-16); line-height: var(--lh-snug); }

@media (min-width: 768px) {
  .h1 { font-size: var(--fs-80); line-height: var(--lh-h-80); }
  .h2 { font-size: var(--fs-48); line-height: var(--lh-h-48); }
  .h3 { font-size: var(--fs-40); line-height: var(--lh-h-40); }
  .h4 { font-size: var(--fs-32); line-height: var(--lh-h-32); }
  .h5 { font-size: var(--fs-24); line-height: var(--lh-h-24); }
  .h6 { font-size: var(--fs-18); line-height: var(--lh-h-18); }
}

@media (min-width: 1024px) {
  .h1 { font-size: var(--fs-100); line-height: var(--lh-h-100); }
  .h2 { font-size: var(--fs-56); line-height: var(--lh-h-56); }
  .h3 { font-size: var(--fs-48); line-height: var(--lh-h-48); }
}

/* --------------------------------------------------------------------------
   Tipografia — lead (paragrafo introduttivo, manifesto, hero copy).
   -------------------------------------------------------------------------- */
.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
}

@media (min-width: 768px) {
  .lead { font-size: var(--fs-24); }
}

/* --------------------------------------------------------------------------
   Tipografia — meta (testo secondario piccolo: breadcrumb, prezzi, label).
   -------------------------------------------------------------------------- */
.meta {
  font-size: var(--fs-14);
  color: var(--c-text-soft);
}

.meta--small { font-size: var(--fs-12); }

/* --------------------------------------------------------------------------
   Link soft: pattern.son-underline). Underline solo su hover,
   offset 1px. Per Philia decoration-color = --c-text.
   -------------------------------------------------------------------------- */
.link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.link:hover,
.link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--c-text);
}

.link--soft { color: var(--c-text-soft); }

/* --------------------------------------------------------------------------
   Visibilita' responsive (mobile/desktop only).
   -------------------------------------------------------------------------- */
.hide-desktop { display: initial; }
.hide-mobile  { display: none; }

@media (min-width: 1024px) {
  .hide-desktop { display: none; }
  .hide-mobile  { display: initial; }
}

/* --------------------------------------------------------------------------
   Allineamento testo.
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   Flow — distanza verticale fra elementi adiacenti (alternativa a .stack
   quando non vogliamo flex). Configurabile con --flow-space sul wrapper.
   -------------------------------------------------------------------------- */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--sp-4));
}

.flow--sm { --flow-space: var(--sp-2); }
.flow--md { --flow-space: var(--sp-5); }
.flow--lg { --flow-space: var(--sp-7); }

/* --------------------------------------------------------------------------
   Full-bleed — esce dal wrapper genitore fino ai bordi viewport.
   Tecnica con margine negativo su 100vw. Richiede overflow-x: hidden a
   livello body per evitare scrollbar orizzontale.
   -------------------------------------------------------------------------- */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Surface — sfondo card neutro su sfondo avorio.
   -------------------------------------------------------------------------- */
.surface {
  background-color: var(--c-surface);
}

/* --------------------------------------------------------------------------
   Border helpers — separatori sottili (footer).
   -------------------------------------------------------------------------- */
.border-top    { border-top: 1px solid var(--c-border); }
.border-bottom { border-bottom: 1px solid var(--c-border); }
}