/* ==========================================================================
   IL GIRASOLE — DESIGN REFINEMENT LAYER  v1.0
   --------------------------------------------------------------------------
   Layer di raffinamento grafico caricato DOPO gli stili di pagina.
   Non modifica struttura né funzionalità: agisce solo su tipografia,
   spaziature, ombre, micro-interazioni e fluidità di navigazione.

   Caricare in ogni pagina appena prima di </head>:
     <link rel="stylesheet" href="refine.css">
   ========================================================================== */

:root{
  /* Curve di movimento — un'unica grammatica per tutto il sito */
  --ease-out:      cubic-bezier(.22,.61,.36,1);
  --ease-in-out:   cubic-bezier(.65,.05,.36,1);
  --ease-soft:     cubic-bezier(.25,.46,.45,.94);
  --dur-fast:      .22s;
  --dur-base:      .38s;
  --dur-slow:      .68s;

  /* Scala ombre a più livelli (luce morbida, mai dura) */
  --sh-xs: 0 1px 2px rgba(44,40,36,.04), 0 2px 6px rgba(44,40,36,.03);
  --sh-sm: 0 2px 4px rgba(44,40,36,.04), 0 6px 16px rgba(44,40,36,.05);
  --sh-md: 0 4px 10px rgba(44,40,36,.05), 0 14px 34px rgba(44,40,36,.07);
  --sh-lg: 0 8px 20px rgba(44,40,36,.06), 0 28px 60px rgba(44,40,36,.10);
  --sh-xl: 0 16px 40px rgba(44,40,36,.08), 0 44px 90px rgba(44,40,36,.13);
  --sh-sage: 0 10px 30px rgba(106,144,101,.22);

  /* Raggi coerenti */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Bordi tenui */
  --hairline: rgba(44,40,36,.08);
}

/* ==========================================================================
   1 · TIPOGRAFIA — Bodoni Moda + Manrope
   --------------------------------------------------------------------------
   Bodoni Moda (Indestructible Type): Didone ad altissimo contrasto. I filetti
   sono sottilissimi e le grazie sono trattini orizzontali netti. Vive nei
   grandi corpi e muore nei piccoli, dove i filetti si assottigliano fino a
   sparire. Per questo l'asse ottico `opsz` (6..96) è lasciato in automatico:
   ai corpi piccoli il carattere ispessisce da solo i filetti.
   Manrope (Mikhail Sharanda): geometrico-umanista con altezza-x generosa e
   terminali leggermente addolciti. Non chiede corpi maggiorati (a differenza
   di Jost) e le sue capitali sono larghe: basta poco tracking.
   ========================================================================== */

html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  letter-spacing:0;
}

/* --- DISPLAY: Bodoni. Asse ottico automatico, peso regolare --- */
h1,h2,h3,.sec-title,.hero-title,.pc-name,.corona-name,.dh-name,.oph-name,
.story-text .sec-title,.sec-head-center .sec-title,.amb-text h3,.filo-item h3,
.dh-extras h2,.dh-cta-block h2,.cta-banner h2,.newsletter h2,.ig-title,
.ord-block h2,.ord-hero h1,.dh-hero h1,.lh h1,.shop-hero h1,.cat-head h2,
.blog-hero h1,.doc-hero h1,.lcn-hero h1,.reviews-head h2,.ss-head h2,
.pay-progress h3,.next-steps h3,.dh-strip .pill h3,.dh-addons .item h4,
.footer-col h4,.pg-hero h1{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-optical-sizing:auto;
  font-weight:400;
  letter-spacing:0;
  text-wrap:balance;
  font-synthesis:none;
}
/* Titoloni: il Bodoni è già largo di suo, va stretto e mai alleggerito
   sotto il 400 — i filetti sparirebbero. Si guadagna eleganza col tracking. */
h1,.hero-title,.dh-hero h1,.lh h1,.shop-hero h1,.wh h1,.blog-hero h1,.lcn-hero h1{
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.012em;
}
h2,.sec-title{ line-height:1.12; letter-spacing:-.006em; }

/* Titoli piccoli in serif: sotto i 20px il Bodoni si sgretola.
   Peso 600 + tracking positivo per tenere insieme i filetti. */
.pay-progress h3,.next-steps h3,.dh-strip .pill h3,.dh-addons .item h4,
.footer-col h4,.filo-item h3,.amb-text h3,.pc-name,.corona-name,.dh-name,
.oph-name{
  font-weight:600;
  letter-spacing:.01em;
}

/* --- ACCENTI CORSIVI: il corsivo del Bodoni è inclinato e calligrafico,
       l'unico punto in cui questo carattere si concede un gesto --- */
h1 em,h2 em,h3 em,.sec-title em,.ig-title em,.cat-head h2 em,.shop-hero h1 em,
.ord-hero h1 em,.ord-block h2 em,.dh-hero h1 em,.lh h1 em,.newsletter h2 em,
.cta-banner h2 em,.reviews-head h2 em,.sec-head-center .sec-title em,
.story-text .sec-title em,.ss-head h2 em,.dh-extras h2 em,.dh-cta-block h2 em,
.blog-hero h1 em,.doc-hero h1 em,.lcn-hero h1 em,.pg-hero h1 em,.lp-text h2 em,
.prenota-banner h2 em,.wh h1 em{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:.004em;
  font-synthesis:none;
}

/* --- OCCHIELLI E SOMMARI in corsivo. Il Bodoni ha altezza-x maggiore del
       Cormorant: basta un ritocco minimo di corpo, non il +12% di prima --- */
.lead,.story-lead,.visit-lead,.dh-lead,.dh-hero .dh-lead,.pg-hero .lead,
.sec-head-center .sec-sub,.shop-hero p,.ord-hero p,.blog-hero p,.doc-hero p,
.lcn-hero p,.footer-tagline,.dh-extras .lead,.dh-cta-block p,.rev-text,
.rc-text,.updated,.wh p{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:400;
  font-size:1.04em;
  line-height:1.68;
  letter-spacing:.008em;
}

/* --- PREZZI: Bodoni romano. Le cifre Didone sono il suo vanto —
       aste piene e filetti sottili, come su un'etichetta stampata --- */
.pc-price,.dh-price,.corona-price,.lh-price,.lp-price,.dc-price,.extra-price,
.pay-sum-amount,.oph-price,.pay-opt .pay-amount,.pay-progress .step .amt,
.pay-progress .total-row .amt,.about-num,.amb-num,.proof-num,.trust-score{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-optical-sizing:auto;
  font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:.004em;
}

/* --- CORPO E INTERFACCIA: Manrope --- */
body,p,li,td,th,label,input,select,textarea,button,
.pc-desc,.dh-desc,.corona-desc,.amb-text p,.story-body,.filo-item p,
.field-hint,.pay-desc,.pay-title,.btn-order,.dh-btn,.header-nav a,
.header-prenota,.eyebrow,.block-eyebrow,.pc-cat,.dh-cat,.corona-cat,
.rev-meta,.vi-lbl,.vi-val,.ck-trust .ck-t,.ck-trust .ck-s{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-synthesis:none;
}
/* Manrope ha altezza-x ampia e crenatura stretta di default:
   il 400 basta, ma serve un filo d'aria fra le lettere */
p,li,.pc-desc,.dh-desc,.corona-desc,.story-body,.amb-text p,.filo-item p,
.field-hint,.pay-desc{
  font-weight:400;
  letter-spacing:.002em;
}
/* Cifre tabellari nei riepiloghi e nei campi: colonne allineate */
input,select,td,th,.vi-val,.pay-progress .step,.pay-progress .total-row{
  font-variant-numeric:lining-nums tabular-nums;
}

/* --- MAIUSCOLETTI: le capitali di Manrope sono larghe e ben spaziate.
       Un tracking eccessivo le farebbe sfilacciare: .22em è il limite --- */
.eyebrow,.block-eyebrow,.reviews-eyebrow,.pg-eyebrow,.dh-eyebrow,
.ss-head .eyebrow,.sec-head-center .eyebrow,.vi-lbl,.pc-cat,.dh-cat,
.corona-cat,.lh-eyebrow,.wh-eyebrow{
  letter-spacing:.22em !important;
  font-weight:500;
}
.btn-order,.dh-btn,.header-prenota,.btn-wa,.wh-btn,.dh-cta,
.btn-visit-wa,.btn-visit-shop,.pay-opt .pay-title,.form-submit{
  letter-spacing:.13em;
  font-weight:600;
}
.header-nav a{ letter-spacing:.12em; font-weight:500; }
/* ==========================================================================
   2 · CARD PRODOTTO — profondità e movimento raffinati
   ========================================================================== */

.product-card,.dh-card,.corona,.xcard{
  border-color:var(--hairline) !important;
  box-shadow:var(--sh-xs);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  will-change:transform;
}
.product-card:hover,.dh-card:hover,.corona:hover,.xcard:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-lg);
  border-color:rgba(143,175,138,.38) !important;
}

/* Immagine: zoom lento e cinematografico + velatura calda in hover */
.pc-img,.dh-card .ph,.corona-img,.amb-photo,.story-photo,.visit-map{
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#F7F4EF 0%,#EFEAE2 100%);
}
.pc-img img,.dh-card .ph img,.corona-img img{
  transition:transform 1.05s var(--ease-soft), filter var(--dur-slow) var(--ease-out);
  will-change:transform;
}
.product-card:hover .pc-img img,
.dh-card:hover .ph img,
.corona:hover .corona-img img{
  transform:scale(1.055);
  filter:saturate(1.04) contrast(1.02);
}
/* Vignettatura sottile in basso: stacca il prodotto dal fondo */
.pc-img::after,.dh-card .ph::after,.corona-img::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(44,40,36,.10),transparent);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);pointer-events:none;
}
.product-card:hover .pc-img::after,
.dh-card:hover .ph::after,
.corona:hover .corona-img::after{ opacity:1; }

/* Badge: pill morbida con vetro */
.pc-badge,.dh-tag,.corona-badge{
  border-radius:999px !important;
  backdrop-filter:saturate(1.2) blur(6px);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 2px 10px rgba(44,40,36,.16);
  letter-spacing:.14em !important;
}

/* ==========================================================================
   3 · BOTTONI — peso, sheen e feedback tattile
   ========================================================================== */

.btn-order,.dh-btn,.header-prenota,.form-submit,.pay-opt,
.btn-visit-wa,.btn-visit-shop,.dh-cta,.btn-stripe,.btn-primary,.btn-ghost,
.gi-upsell-accept,.gi-upsell-skip{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-sm);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
/* Riflesso che attraversa il bottone al passaggio */
.btn-order::before,.dh-btn::before,.header-prenota::before,.dh-cta.primary::before{
  content:"";position:absolute;top:0;left:-120%;width:65%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease-out);pointer-events:none;
}
.btn-order:hover::before,.dh-btn:hover::before,
.header-prenota:hover::before,.dh-cta.primary:hover::before{ left:135%; }

.btn-order:hover,.dh-btn:hover,.header-prenota:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(44,40,36,.26);
}
.btn-order:active,.dh-btn:active,.header-prenota:active,.pay-opt:active{
  transform:translateY(0) scale(.985);
  transition-duration:.08s;
}

/* Metodi di pagamento: card cliccabili, non bottoni piatti */
.pay-opt{ border-color:var(--hairline) !important; box-shadow:var(--sh-xs); }
.pay-opt:hover:not(:disabled):not(.is-locked){
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
  border-color:rgba(143,175,138,.5) !important;
}

/* ==========================================================================
   4 · HEADER — vetro e presenza allo scroll
   ========================================================================== */

header#siteHeader{
  background:rgba(250,248,244,.72) !important;
  -webkit-backdrop-filter:saturate(1.5) blur(18px);
  backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
header#siteHeader.is-scrolled{
  background:rgba(250,248,244,.93) !important;
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(44,40,36,.04), 0 10px 30px rgba(44,40,36,.06);
}
.site-logo img{ transition:transform var(--dur-base) var(--ease-out); }
.site-logo:hover img{ transform:scale(1.04); }

/* Voci nav: underline che cresce dal centro */
.header-nav a{ position:relative; padding-bottom:3px; }
.header-nav a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;
  background:currentColor;opacity:.55;
  transform:translateX(-50%);
  transition:width var(--dur-base) var(--ease-out);
}
.header-nav a:hover::after{ width:100%; }
.header-nav a[aria-current]::after{ width:100%; opacity:.9; }

/* Barra di avanzamento lettura */
.gi-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--sage-d,#6A9065),var(--sage,#8FAF8A));
  transition:width .1s linear;pointer-events:none;
}

/* ==========================================================================
   5 · CAMPI FORM — precisione e stato
   ========================================================================== */

.field input,.field select,.field textarea{
  border-color:var(--hairline) !important;
  border-radius:var(--r-sm);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.field input:hover,.field select:hover,.field textarea:hover{
  border-color:rgba(143,175,138,.45) !important;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sage-d,#6A9065) !important;
  box-shadow:0 0 0 4px rgba(143,175,138,.16);
  background:#fff !important;
}
.field label{ transition:color var(--dur-fast) var(--ease-out); }
.field:focus-within label{ color:var(--sage-d,#6A9065); }

/* Blocchi del form: separazione più morbida */
.ord-form{ border-color:var(--hairline) !important; box-shadow:var(--sh-md); border-radius:var(--r-lg); }
.ord-block{ border-bottom-color:var(--hairline) !important; }

/* Riepilogo: pannello, non riquadro */
.pay-summary{ border-color:rgba(143,175,138,.32) !important; border-radius:var(--r-md); box-shadow:var(--sh-xs); }
.ck-trust .ck-item{ border-color:var(--hairline) !important; box-shadow:var(--sh-xs); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ck-trust .ck-item:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); }

/* Accessibilità: focus visibile ma elegante */
:focus-visible{
  outline:2px solid var(--sage-d,#6A9065) !important;
  outline-offset:3px !important;
  border-radius:4px;
}

/* ==========================================================================
   6 · REVEAL & PAGE TRANSITION — ingresso scenico
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.visible{ opacity:1; transform:none; }

/* Cascata: card della stessa griglia entrano in sequenza */
.shop-grid .reveal:nth-child(1),.dh-grid .reveal:nth-child(1),.corone .reveal:nth-child(1){ transition-delay:.00s }
.shop-grid .reveal:nth-child(2),.dh-grid .reveal:nth-child(2),.corone .reveal:nth-child(2){ transition-delay:.07s }
.shop-grid .reveal:nth-child(3),.dh-grid .reveal:nth-child(3),.corone .reveal:nth-child(3){ transition-delay:.14s }
.shop-grid .reveal:nth-child(4),.dh-grid .reveal:nth-child(4){ transition-delay:.21s }
.shop-grid .reveal:nth-child(5){ transition-delay:.26s }
.shop-grid .reveal:nth-child(6){ transition-delay:.31s }
.shop-grid .reveal:nth-child(7){ transition-delay:.35s }
.shop-grid .reveal:nth-child(8){ transition-delay:.39s }

/* Dissolvenza d'ingresso pagina */
body{ animation:gi-page-in .55s var(--ease-out) both; }
@keyframes gi-page-in{ from{opacity:0} to{opacity:1} }

/* Uscita in dissolvenza sui link interni (gestita da refine.js) */
body.gi-leaving{ opacity:0; transition:opacity .28s var(--ease-in-out); }

/* ==========================================================================
   7 · SEZIONI — ritmo verticale e dettagli editoriali
   ========================================================================== */

.cat-head,.sec-head,.sec-head-center,.reviews-head{ }
.cat-head h2,.sec-head h2,.sec-head-center h2{ margin-bottom:.15em; }

/* Filo decorativo sotto i titoli di sezione */
.sec-rule{ background:linear-gradient(to bottom,var(--tort,#C4B5A3),transparent) !important; }

/* Carosello recensioni: pannello morbido */
.reviews-carousel{ border-color:var(--hairline) !important; border-radius:var(--r-xl); box-shadow:var(--sh-sm); }
.rev-text{ text-wrap:pretty; }
.rev-dot{ transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out); }
.rev-dot.active{ width:26px; border-radius:999px; }

/* Trust strip: rialzo al passaggio */
.trust-inner{ border-color:var(--hairline) !important; box-shadow:var(--sh-sm); border-radius:var(--r-lg); }
a.trust-item{ transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
a.trust-item:hover{ transform:translateY(-2px); }

/* Ambienti (home): numerazione più scenica */
.amb-num{ opacity:.55; letter-spacing:-.02em; }
.amb-photo img,.story-photo img,.visit-map img{
  transition:transform 1.1s var(--ease-soft);
}
.amb-photo:hover img,.story-photo:hover img{ transform:scale(1.03); }

/* Pop-up upsell: vetro più profondo */
.gi-upsell-backdrop{ background:rgba(38,30,26,.5) !important; -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); }
.gi-upsell-card{ border-radius:var(--r-xl) !important; box-shadow:var(--sh-xl) !important; }

/* ==========================================================================
   8 · SCROLLBAR & SELEZIONE — dettagli che si notano
   ========================================================================== */

::selection{ background:rgba(143,175,138,.28); color:var(--dark,#2C2824); }

@media (pointer:fine){
  html{ scrollbar-width:thin; scrollbar-color:rgba(143,175,138,.5) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:rgba(143,175,138,.45);
    border-radius:99px;
    border:3px solid var(--cream,#FAF8F4);
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(106,144,101,.65); }
}

/* Immagini: mai "salto" durante il caricamento */
img{ background-color:#F3EFE9; }

/* ==========================================================================
   9 · RESPONSIVE — densità corretta sul piccolo
   ========================================================================== */

@media(max-width:768px){
  h1,.hero-title{ letter-spacing:-.02em; }
  .eyebrow,.block-eyebrow,.reviews-eyebrow{ letter-spacing:.22em !important; }
  /* Su touch il hover non serve: evita stati "appiccicati" */
  .product-card:hover,.dh-card:hover,.corona:hover{ transform:none; box-shadow:var(--sh-sm); }
  .product-card:hover .pc-img img,.dh-card:hover .ph img{ transform:none; }
  .gi-progress{ height:2px; }
}

/* ==========================================================================
   10 · MOTION SAFETY
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  body{ animation:none !important; }
  .gi-progress{ display:none; }
}


/* ==========================================================================
   11 · CORREZIONI DI CONTRASTO — conformità WCAG 2.1 AA
   --------------------------------------------------------------------------
   Audit del 22.08.2026. Tre colori del sistema non raggiungevano il rapporto
   minimo 4.5:1 richiesto per il testo corrente:

     --sage-d  #6A9065  →  3.42:1 su crema   (119 usi come colore di testo)
     --gold    #B89A72  →  2.51:1 su crema
     --dusty   #C9917E  →  2.53:1 su crema

   Più grave: le CTA primarie (Ordina ora, WhatsApp, Prenota) hanno testo
   bianco su --sage #8FAF8A, cioè 2.42:1 — meno della metà del minimo.
   Chi legge con poca luce, su schermo riflettente o con vista ridotta non
   distingue la scritta dal fondo. Su un pulsante d'acquisto è denaro perso.

   Questo blocco ridefinisce i tre colori scurendoli a parità di tinta e
   saturazione, e sposta i fondi delle CTA sul verde scuro. Il :root qui
   sovrascrive quello di pagina perché refine.css è caricato per ultimo.
   ========================================================================== */

:root{
  --sage-d: #557551;   /* era #6A9065 · ora 4.89:1 su crema, 5.19:1 col bianco */
  --gold:   #8B6D46;   /* era #B89A72 · ora 4.53:1 su crema */
  --dusty:  #A85F46;   /* era #C9917E · ora 4.51:1 su crema */
  --cta:    #557551;
  --cta-h:  #41603C;   /* stato hover: un gradino più cupo, resta leggibile */
  --sage-line: #8FAF8A;/* il verde chiaro sopravvive dove è solo decorativo:
                          filetti, bordi, riempimenti, mai sotto una scritta */
}

/* --- CTA PRIMARIE: fondo verde scuro, non più il verde chiaro --- */
.btn-wa,.header-prenota,.btn-order,.dh-btn,.form-submit,.btn-visit-wa,
.cta-banner .btn,.prenota-banner .btn,.newsletter button,.lp-btn,
.pay-opt.selected,.btn-primary,.dh-cta,.corona-btn,.pc-btn{
  background:var(--cta) !important;
  color:#fff !important;
}
.btn-wa:hover,.header-prenota:hover,.btn-order:hover,.dh-btn:hover,
.form-submit:hover,.btn-visit-wa:hover,.cta-banner .btn:hover,
.prenota-banner .btn:hover,.newsletter button:hover,.lp-btn:hover,
.btn-primary:hover,.dh-cta:hover,.corona-btn:hover,.pc-btn:hover{
  background:var(--cta-h) !important;
}
/* .wh-btn è chiaro su foto scura: va nella direzione opposta */
.wh-btn:hover{ background:var(--cta) !important; color:#fff !important; }

/* --- Il filetto decorativo degli occhielli resta verde chiaro:
       è una linea, non un testo, e lì il contrasto non si applica --- */
.eyebrow::before,.lh-eyebrow::before,.block-eyebrow::before,
.sec-head .eyebrow::before{ background:var(--sage-line) !important; }


/* ==========================================================================
   12 · BODONI AI CORPI PICCOLI — dove la Didone non arriva
   --------------------------------------------------------------------------
   Il Bodoni ha filetti che a 15px con peso 300 semplicemente non vengono
   disegnati: il browser li arrotonda a zero e la lettera si spezza. L'audit
   ha trovato 96 punti a rischio. Due rimedi, a seconda del caso:

   a) Testi di servizio (footer, note legali, date): passano al Manrope.
      Un elenco di link non è prosa, non guadagna nulla dal carattere con
      le grazie e perde molto in leggibilità. Tutti i riferimenti del settore
      — Le Fleuriste, Hannun, Veld & Vaas — tengono il footer in lineare.

   b) Titoletti e prezzi che restano in Bodoni: peso alzato e tracking
      positivo, così i filetti hanno abbastanza materia per esistere.
   ========================================================================== */

/* --- a) Il footer torna al lineare --- */
.footer-col a,.footer-col span,.footer-col p,.footer-col li,
footer ul li a,footer ul li span,.footer-tagline,.footer-bottom,
.footer-seo-delivery p,.footer-seo-delivery a,footer .f-inner,
footer address,footer small,.updated,.doc-footer,.legal-h .logo{
  font-family:'Manrope',system-ui,-apple-system,sans-serif !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:.9rem;
  letter-spacing:.004em;
  line-height:1.7;
}
.footer-bottom,.updated,footer small,footer .f-inner{ font-size:.82rem; }

/* I titoli di colonna del footer restano in Bodoni ma con peso pieno:
   sono corti, isolati e reggono bene la Didone se non sono esili */
.footer-col h4,footer h4{
  font-family:'Bodoni Moda',Didot,Georgia,serif !important;
  font-weight:600 !important;
  font-size:1.02rem;
  letter-spacing:.012em;
}

/* --- b) Titoletti serif: peso pieno sotto i 22px --- */
.post h2,.xc-b h3,.pg-recap h2,.pg-error h2,.prof-t,.dz-title,.fs-name,
.pb-name,.dc-name,.prod-name,.rc-avatar,.story-sign,.doc-header a.logo,
header .brand,header.site .brand,.legal-h .logo,.ss-name,.rev-author,
.blog .post h3,.trust-score,.dh-strip .pill h3,.dh-addons .item h4,
.pay-progress h3,.next-steps h3{
  font-weight:600 !important;
  letter-spacing:.012em;
}
/* Le note in corsivo a peso 300 sono il caso peggiore: corsivo + sottile
   + Didone. Riportate al 400, che è il minimo praticabile. */
.rc-text,.wh p,.lcn-hero p,.blog-hero p,.story-lead,.visit-lead,
.dh-lead,.lead,.pg-hero .lead,.doc-hero p{
  font-weight:400 !important;
}

/* --- c) Bodoni sopra le fotografie: i filetti sottili si perdono nel
         rumore dell'immagine. Peso e un'ombra impercettibile li staccano --- */
.wh h1,.wh p,.wh-eyebrow,.hero-overlay h1,.hero-overlay p,
.amb-photo figcaption,.lh-img .caption{
  text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 22px rgba(0,0,0,.18);
}
.wh h1{ font-weight:500 !important; }

/* --- d) Le cifre dei prezzi non scendono mai sotto il 500 --- */
.pc-price,.dh-price,.corona-price,.lh-price,.lp-price,.dc-price,.extra-price,
.pay-sum-amount,.oph-price,.pay-opt .pay-amount,.ship-summary .ship-cost,
.pay-progress .step .amt,.pay-progress .total-row .amt{
  font-weight:500 !important;
}


/* ==========================================================================
   13 · GRIGLIA DI PAGINA DESKTOP — un solo margine per tutto il sito
   --------------------------------------------------------------------------
   Misurato in Chrome a 1280 / 1440 / 1920 px. Il sito non andava in overflow,
   ma i blocchi non erano allineati fra loro perché ognuno aveva il suo
   margine interno. A 1440px il bordo sinistro del contenuto cadeva in tre
   punti diversi:

       .header-inner   →  110px   (max-width 1300 + padding 40)
       .shop-grid      →  102px   (max-width 1300 + padding 32)
       .trust-inner    →  102px   ma con larghezza 1236 anziché 1300
       .footer-inner   →   70px   (max-width 1300, nessun padding)

   Sono 40px di scarto fra il logo e la prima card: l'occhio lo legge come
   "non allineato" anche senza saper dire perché. Peggio a 1280px, dove la
   griglia prodotti aveva margine ZERO e le card toccavano il bordo della
   finestra mentre il resto della pagina respirava.

   Qui si impone un'unica gabbia: stessa larghezza massima, stesso margine
   laterale, stesso centraggio. Solo da 1025px in su — sotto quella soglia i
   layout mobile e tablet restano come sono.
   ========================================================================== */

@media (min-width:1025px){

  :root{ --gutter:32px; }

  .header-inner,.footer-inner,.shop-grid,.products-grid,.trust-inner,
  .xsell-inner,.reviews-inner,.gal-grid,.offer-grid,.perso-inner,.del-inner,
  .ig-inner,.filosofia-inner,.lp-inner,.dh-extras-inner,.dh-grid,.cat-grid,
  .corone-grid,.amb-grid,.filo-grid,.ord-grid,.sec-head,.sec-head-center,
  .story-inner,.visit-inner,.blog-grid,.prof-grid,.dh-strip,.dh-addons{
    max-width:var(--container,1300px) !important;
    margin-inline:auto !important;
    padding-inline:var(--gutter) !important;
    box-sizing:border-box;
  }

  /* Su schermi molto larghi il margine cresce: 32px accanto a 300px di vuoto
     sembra una svista, 48px sembra una scelta */
  @media (min-width:1600px){ :root{ --gutter:48px; } }

  /* Il banner fiducia aveva larghezza propria: ora segue la gabbia comune */
  .trust-inner{ width:auto !important; }

  /* Gli occhielli e i titoli di sezione centrati non devono ereditare il
     padding due volte quando sono già dentro un contenitore normalizzato */
  .shop-grid .sec-head,.products-grid .sec-head{ padding-inline:0 !important; }
}

/* Sotto i 1025px il margine resta quello di prima, ma non meno di 20px:
   su alcuni tablet la griglia arrivava a filo dello schermo */
@media (max-width:1024px){
  .shop-grid,.products-grid,.dh-grid,.cat-grid,.corone-grid,.trust-inner,
  .footer-inner,.gal-grid{
    padding-inline:max(20px,var(--gutter,20px));
    box-sizing:border-box;
  }
}