/* ==========================================================================
   Ritocchi grafici e movimento — caricato per ultimo, sovrascrive le regole di base.
   Palette: verde del sito + arancio del logo (azioni) + azzurrino tenue (foto prodotto).
   ========================================================================== */
:root {
  --arancio: #F8B018;            /* azioni importanti (testo scuro sopra: contrasto > 6) */
  --arancio-scuro: #E49F0A;
  --arancio-chiaro: #FFF1CC;
  --azzurrino: #E8F1F8;          /* sfondo foto prodotto */
  --azzurrino-2: #D6E6F1;
  --inchiostro: #1F2D18;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --r: 4px;                      /* raggio unico: forme quasi squadrate */
  --cta: #D99A0B;                /* pulsanti: giallo del logo, tinta unita (testo bianco) */
  --cta-hover: #BE850A;
  /* due soli caratteri in tutto il sito: Gilda Display (titoli, prezzi) e Nunito Sans (tutto il resto) */
  --f-serif: var(--f-titoli);
  --f-testo: var(--f-ui);
}
input, textarea, select, button { font-family: var(--f-ui); }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-titoli); font-weight: 400; }

/* --- Movimento di base ---------------------------------------------------------------------------- */
@keyframes entra { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes zoom-lento { from { scale: 1.07; } to { scale: 1; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* comparsa a scorrimento (le classi le mette anima.js) */
.rv { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--rd, 0s); }
.rv.rv-ok { opacity: 1; translate: 0 0; }

/* --- Pulsanti: tinta unita, nessun effetto luce ----------------------------------------------------------------- */
.btn, .btn-contatti {
  border-radius: var(--r); background: var(--cta); border: 1px solid var(--cta); color: #fff; font-weight: 700; letter-spacing: .06em; box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover, .btn-contatti:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }
.btn:focus-visible, .btn-contatti:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.btn.btn--chiaro { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn.btn--chiaro:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
/* nella home, il secondo pulsante è «fantasma» */
.hero__azioni .btn:last-child { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .85); color: #fff; }
.hero__azioni .btn:last-child:hover { background: #fff; border-color: #fff; color: var(--inchiostro); }

/* --- Menu: sottolineatura che si disegna ---------------------------------------------------------- */
.menu > ul > li > a, .menu > ul > li > .voce {
  background: linear-gradient(var(--arancio), var(--arancio)) no-repeat 20px calc(100% - 1px) / 0 2px;
  transition: color .3s ease, background-size .4s var(--ease);
}
.menu > ul > li > a:hover, .menu > ul > li.attiva > a, .menu > ul > li:hover > .voce, .menu > ul > li.attiva > .voce { background-size: calc(100% - 40px) 2px; }
.menu-grande .colonna ul a { transition: color .3s ease, transform .3s var(--ease); }
.menu-grande .colonna ul a:hover { transform: translateX(5px); }

/* --- Home: apertura ----------------------------------------------------------------------------------- */
.hero__foto { transition: opacity 1.2s ease; }
.hero__foto.attiva { animation: zoom-lento 14s ease-out both; }
.hero__testo > h2, .hero__testo > h1 { animation: entra 1.1s var(--ease) .1s both; }
.hero__testo > p { animation: entra 1.1s var(--ease) .35s both; }
.hero__testo > .hero__azioni { animation: entra 1.1s var(--ease) .6s both; }
.banner h1 { animation: entra 1s var(--ease) .1s both; }

/* --- Home: card categoria ------------------------------------------------------------------------------ */
.cat-card { border-radius: var(--r); box-shadow: 0 10px 30px rgba(31, 45, 24, .12); transition: box-shadow .5s var(--ease); }
.cat-card:hover { box-shadow: 0 18px 44px rgba(31, 45, 24, .22); }
.cat-card::before { content: ""; position: absolute; inset: 0; background: inherit; transition: transform 1.2s var(--ease); }
.cat-card:hover::before { transform: scale(1.07); }
.cat-card::after, .cat-card:hover::after { z-index: 1; background: linear-gradient(180deg, rgba(16, 24, 12, 0) 30%, rgba(16, 24, 12, .82) 100%); }
.cat-card__box, .cat-card--alta .cat-card__box {
  top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-width: none; padding: 28px 34px 30px; text-align: left;
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
.cat-card__etichetta { display: inline-flex; align-items: center; gap: 10px; color: #FFD9A0; font-size: 12.5px; line-height: 18px; letter-spacing: .14em; text-align: left; }
.cat-card__etichetta::before { content: ""; width: 26px; height: 2px; background: var(--arancio); transition: width .5s var(--ease); }
.cat-card:hover .cat-card__etichetta::before { width: 46px; }
.cat-card h2 { font-size: 40px; line-height: 46px; margin-top: 8px; text-align: left; text-transform: none; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.cat-card__box::after {
  content: "Scopri →"; display: inline-block; margin-top: 16px; padding: 10px 20px; border-radius: var(--r); background: var(--cta); color: #fff;
  font: 700 13px/1 var(--f-ui); text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .5s var(--ease);
}
html[lang="en"] .cat-card__box::after { content: "Discover →"; }
.cat-card:hover .cat-card__box::after, .cat-card:focus-visible .cat-card__box::after { opacity: 1; transform: none; }
@media (hover: none) { .cat-card__box::after { opacity: 1; transform: none; } }

/* --- Card prodotto: bianca, foto pulita, filo giallo, titolo e prezzo con il carattere dei titoli ------------------------ */
:root { --foto-bg: linear-gradient(160deg, #FFF8E3 0%, #FFEDBD 100%); }
.prodotto, .prod-card {
  background: #fff; border: 1px solid rgba(79, 101, 59, .2); border-radius: var(--r); overflow: hidden; box-shadow: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s ease;
}
.prodotto:hover, .prod-card:hover { transform: translateY(-4px); border-color: var(--verde); box-shadow: 0 14px 30px rgba(31, 45, 24, .1); }
.prodotto__foto, .prod-card__img { position: relative; overflow: hidden; background: var(--foto-bg); border-bottom: 1px solid rgba(79, 101, 59, .12); }
.prodotto__foto img, .prod-card__img img { mix-blend-mode: normal; object-fit: contain; }
.prodotto__dettagli { background: #fff; border-top: 0; padding: 18px 14px 24px; }
.prodotto__titolo a, .prod-card h5 a { color: var(--titolo-scuro); }
.prodotto__titolo a:hover, .prod-card h5 a:hover { color: var(--verde); }
.prodotto__prezzo .prezzo, .prod-card .prezzo { display: block; margin: 0; padding: 0; background: none; border-radius: 0; color: var(--verde); font: 400 21px/28px var(--f-titoli); letter-spacing: .01em; }
.prodotto__prezzo .prezzo::before, .prod-card .prezzo::before { content: ""; display: block; width: 28px; height: 2px; margin: 12px auto 11px; background: var(--arancio); transition: width .45s var(--ease); }
.prodotto:hover .prezzo::before, .prod-card:hover .prezzo::before { width: 56px; }
.prodotti.elenco .prezzo::before { margin-left: 0; }
.prod-card { padding-bottom: 22px; }
.prodotti.elenco .prodotto__breve { color: var(--testo-2); }
.prodotto__cta {
  position: absolute; left: 0; right: 0; bottom: 0; translate: 0 101%; padding: 14px 10px; border-radius: 0; background: var(--cta); color: #fff; text-align: center;
  font: 700 13px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: translate .4s var(--ease);
}
.prodotto:hover .prodotto__cta, .prod-card:hover .prodotto__cta { translate: 0 0; }
@media (hover: none) { .prodotto__cta { display: none; } }
/* comparsa a cascata della griglia (anche dopo ricerca, ordinamento e filtri) */
.prodotti > .prodotto { animation: entra .7s var(--ease) both; animation-delay: calc(var(--n, 0) * 55ms); }
.prodotti > .prodotto:nth-child(1) { --n: 0; } .prodotti > .prodotto:nth-child(2) { --n: 1; } .prodotti > .prodotto:nth-child(3) { --n: 2; }
.prodotti > .prodotto:nth-child(4) { --n: 3; } .prodotti > .prodotto:nth-child(5) { --n: 4; } .prodotti > .prodotto:nth-child(6) { --n: 5; }
.prodotti > .prodotto:nth-child(7) { --n: 6; } .prodotti > .prodotto:nth-child(8) { --n: 7; } .prodotti > .prodotto:nth-child(9) { --n: 8; }
.prodotti > .prodotto:nth-child(10) { --n: 9; } .prodotti > .prodotto:nth-child(11) { --n: 10; } .prodotti > .prodotto:nth-child(12) { --n: 11; }

/* --- Barra laterale dei filtri ------------------------------------------------------------------------ */
.widget { padding: 24px 24px 22px; margin-bottom: 26px; background: #fff; border: 1px solid rgba(79, 101, 59, .16); border-radius: var(--r); box-shadow: 0 6px 20px rgba(31, 45, 24, .05); overflow: visible; }
.widget__titolo { position: relative; display: block; width: auto; margin: 0 0 18px; padding: 0 0 14px; background: none; border-radius: 0; font: 400 25px/30px var(--f-titoli); color: var(--titolo-scuro); }
.widget__titolo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: var(--r); background: var(--arancio); transition: width .5s var(--ease); }
.widget:hover .widget__titolo::after { width: 64px; }
.cerca { padding: 0; }
.cerca__campo { height: 52px; padding: 0 60px 0 22px; border-radius: var(--r); background: var(--sfondo); border: 1px solid rgba(79, 101, 59, .25); font-size: 16px; }
.cerca__campo:focus { border-color: var(--arancio); box-shadow: 0 0 0 4px rgba(248, 176, 24, .2); }
.cerca__invio { left: auto; right: 5px; top: 5px; width: 42px; height: 42px; border-radius: var(--r); background: var(--cta); color: #fff; transition: background-color .3s, transform .3s var(--ease); }
.cerca__invio:hover { background: var(--arancio-scuro); transform: scale(1.08); }
.cat-lista { padding: 0; }
.cat-lista li { display: flex; align-items: center; gap: 10px; padding: 0; border-bottom: 1px solid rgba(79, 101, 59, .12); color: inherit; font: inherit; }
.cat-lista li:last-child { border-bottom: 0; }
.cat-lista a { position: relative; display: block; flex: 1 1 auto; width: auto; padding: 11px 0; color: var(--testo); font: 400 16px/1.35 var(--f-testo); transition: color .3s, padding-left .35s var(--ease); }
html[lang="en"] .cat-lista a { padding-right: 0; }
.cat-lista a:hover, .cat-lista li.attiva a { color: var(--verde); }
.cat-lista a:hover { padding-left: 8px; }
.cat-lista li.attiva a { padding-left: 16px; font-weight: 700; }
.cat-lista li.attiva a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); translate: 0 -50%; }
.cat-lista .conta { position: static; flex: 0 0 auto; width: auto; height: auto; min-width: 30px; padding: 2px 9px; border-radius: var(--r); background: var(--verde-chiaro); color: var(--verde); font: 700 12px/18px var(--f-testo); text-align: center; transition: background-color .3s, color .3s; }
.cat-lista li:hover .conta, .cat-lista li.attiva .conta { background: var(--cta); color: #fff; }
.prezzo-filtro { padding: 0; }
.pf__barra { height: 6px; margin: 16px 14px 32px; background: #E3E8DC; }
.pf__intervallo { background: linear-gradient(90deg, var(--verde), var(--accento)); }
.pf__maniglia { top: -9px; width: 24px; height: 24px; margin-left: -12px; background: #fff; border: 3px solid var(--verde); box-shadow: 0 2px 8px rgba(31, 45, 24, .25); transition: transform .25s var(--ease), border-color .25s; }
.pf__maniglia:hover, .pf__maniglia:focus-visible { transform: scale(1.15); border-color: var(--arancio); outline: none; }
.pf__etichetta { font: 400 15px/1.2 var(--f-testo); color: var(--testo-2); }
.pf__invio { width: auto; height: 42px; padding: 0 24px; border: 1.5px solid var(--verde); border-radius: var(--r); background: transparent; color: var(--verde); font: 700 13px/1 var(--f-ui); }
.pf__invio:hover { background: var(--arancio); border-color: var(--cta); color: #fff; transform: translateY(-2px); }
.ordina { background: #fff; border-color: rgba(79, 101, 59, .25); border-radius: var(--r); transition: border-color .3s, box-shadow .3s; }
.ordina:hover { border-color: var(--verde); box-shadow: 0 6px 16px rgba(31, 45, 24, .08); }
.ordina select { border: 0; }
.vista span { border-radius: var(--r); }
.vista span:hover { border-color: var(--arancio); color: var(--arancio); }
.vista span.attiva { border-color: var(--arancio); color: var(--arancio); }

/* --- Moduli, link e dettagli ----------------------------------------------------------------------------------- */
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--arancio); box-shadow: 0 0 0 4px rgba(248, 176, 24, .2); }
.campo input, .campo textarea { transition: border-color .3s, box-shadow .3s; }
.modulo-scheda { border-radius: 4px; }
.paginazione .current, .paginazione .dots { border-bottom-color: var(--arancio); }
.paginazione a.page-numbers { transition: color .3s, border-color .3s, transform .3s var(--ease); }
.paginazione a.page-numbers:hover { border-bottom-color: var(--arancio); transform: translateY(-2px); }
.slider__freccia { border-radius: 50%; transition: background-color .3s, transform .3s var(--ease); }
.slider__freccia:hover { background: var(--arancio); transform: scale(1.1); }
.slider__freccia:hover img { filter: none; }
.slider__punti button { transition: background-color .3s, transform .3s; }
.slider__punti button.attivo { background: var(--arancio); transform: scale(1.25); }
.footer__link a, .footer a { transition: color .3s ease, transform .3s var(--ease); }
.lingua { transition: transform .35s var(--ease); }
.lingua:hover { transform: rotate(-8deg) scale(1.1); }
.pp-varianti button { transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease); }
.pp-varianti button:hover { transform: translateY(-2px); }
.pp-varianti button.scelto { border-color: var(--arancio); }

/* --- Telefono ------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .widget { margin-bottom: 18px; }
}
@media (max-width: 767px) {
  .cat-card { border-radius: var(--r); }
  .cat-card__box, .cat-card--alta .cat-card__box { left: 0; right: 0; top: auto; width: auto; height: auto; padding: 18px 20px 20px; border-radius: 0; background: none; border: 0; }
  .cat-card h2 { font-size: 30px; line-height: 35px; margin-top: 6px; }
  .cat-card__box::after { margin-top: 10px; padding: 8px 16px; font-size: 11px; }
  .prodotto, .prod-card { border-radius: var(--r); }
  .prodotto__dettagli { padding: 12px 8px 14px; }
  .prodotto__prezzo .prezzo, .prod-card .prezzo { font-size: 17px; line-height: 24px; }
  .hero__azioni .btn:last-child { backdrop-filter: none; }
}

/* contenitori a scorrimento orizzontale: niente scorrimento verticale interno (la rotella scorre la pagina) */
.rec-lista { overflow-y: hidden; padding: 28px 30px 34px; margin-top: 0; overscroll-behavior-x: contain; }
.slider__pista { overflow-y: hidden; overscroll-behavior-x: contain; }
.pp-immagini img { background: var(--foto-bg); }
.pp-prezzo { font: 400 clamp(1.6rem, 2.2vw, 2rem)/1.4 var(--f-titoli); color: var(--verde); }

/* --- Revisione del 27/10 sera: giallo del logo, card più piccole, frecce, Crisciù ------------------------------ */

/* freccia semplice (< >), senza cerchio né sfondo */
.slider__freccia { width: 44px; height: 44px; background: none; box-shadow: none; border-radius: 0; }
.slider__freccia img { display: none; }
.slider__freccia::before { content: ""; width: 15px; height: 15px; border: solid var(--verde); border-width: 0 0 3px 3px; rotate: 45deg; transition: border-color .3s, translate .35s var(--ease); }
.slider__freccia--dx::before { rotate: -135deg; }
.slider__freccia:hover { background: none; transform: none; }
.slider__freccia--sx:hover::before { border-color: var(--arancio-scuro); translate: -4px 0; }
.slider__freccia--dx:hover::before { border-color: var(--arancio-scuro); translate: 4px 0; }

@media (min-width: 768px) {
  /* carosello della home: card circa la metà */
  .evidenza { height: auto; padding: 100px 0 84px; }
  .slider__pista { gap: 24px; padding: 20px 64px 36px; scroll-padding-left: 64px; }
  .prod-card { flex: 0 0 250px; height: auto; }
  .prod-card__img { width: 100%; height: auto; aspect-ratio: 1; }
  .prod-card__img img { width: 100%; height: 100%; }
  .prod-card h5 { margin-top: 12px; padding: 0 10px; font-size: 19px; line-height: 24px; }
    .slider__freccia { top: 123px; }
  .slider__freccia--sx { left: 8px; } .slider__freccia--dx { right: 8px; }
  .slider__punti { margin-top: 8px; }
  /* sezione «storia familiare»: più aria sopra, titolo attaccato all'etichetta */
  .storia { height: 790px; }
  .storia__testo { top: 80px; }
  .storia__testo h2 { margin-top: 4px; }
  /* pagina Prodotti */
  .barra-negozio { height: 52px; padding-bottom: 16px; }
  .ordina { top: 2px; width: 230px; height: 50px; border-radius: var(--r); }
  .ordina select { width: 100%; height: 48px; padding: 0 44px 0 18px; font-size: 15px; line-height: 48px; background-position: right 18px center; }
  .vista { top: 6px; } .vista span { width: 40px; height: 40px; }
  .prodotti { gap: 22px; margin-top: 30px; }
  .prodotto__titolo h5 { font-size: 21px; line-height: 26px; }
}
@media (min-width: 1280px) { .prodotti { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  .slider__freccia { top: 72px; }
  .prodotto__prezzo .prezzo, .prod-card .prezzo { font-size: 16px; line-height: 22px; }
}

/* Schede sobrie (Crisciù, Milano, Contatti, Sardegna): bianco, filo giallo in alto a sinistra, bordo che si scurisce */
.sede__scheda, .ct-schede article, .ct-dove__testo, .sg-fascia, .sg-contatto__info, .sg-split {
  position: relative; background: #fff; border: 1px solid rgba(79, 101, 59, .2); border-radius: var(--r); box-shadow: none;
  transition: border-color .35s ease, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.sede__scheda::after, .ct-schede article::after, .ct-dove__testo::after, .sg-fascia::after, .sg-contatto__info::after, .sg-split::after {
  content: ""; position: absolute; left: -1px; top: -1px; z-index: 2; width: 48px; height: 3px; background: var(--arancio); transition: width .5s var(--ease); pointer-events: none;
}
.sede__scheda:hover, .ct-schede article:hover, .ct-dove__testo:hover, .sg-fascia:hover, .sg-contatto__info:hover, .sg-split:hover { border-color: var(--verde); box-shadow: 0 12px 26px rgba(31, 45, 24, .08); }
.sede__scheda:hover, .ct-schede article:hover { transform: translateY(-3px); }
.sede__scheda:hover::after, .ct-schede article:hover::after, .ct-dove__testo:hover::after, .sg-fascia:hover::after, .sg-contatto__info:hover::after, .sg-split:hover::after { width: calc(100% + 2px); }
.sede__scheda { padding: 30px 32px 32px; }
.sede__scheda h3, .ct-schede h3 { margin-bottom: 10px; font-size: 26px; line-height: 32px; color: var(--titolo-scuro); }
.sede__scheda p, .ct-schede p { font-weight: 400; color: var(--testo); }
.sd-pagina--cr .sede__schede { counter-reset: sc; }
.sd-pagina--cr .sede__scheda { counter-increment: sc; }
.sd-pagina--cr .sede__scheda h3::before { content: "0" counter(sc); display: block; margin-bottom: 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .22em; color: var(--cta); }
.sg-fascia { background: #fff; }
.sg-fascia__tag span { transition: border-color .3s, background-color .3s; }
.sg-fascia__tag span:hover { border-color: var(--arancio); background: #FFF8E3; }

/* Sardegna: «Scopri i prodotti» verde, «Chiama ora» giallo, entrambi tinta unita */
.sg-btn { border-radius: var(--r); letter-spacing: .06em; box-shadow: none; transition: background-color .25s ease, border-color .25s ease; }
.sg-btn::after { display: none; }
.sg-btn--primario { background: var(--verde); border-color: var(--verde); }
.sg-btn--primario:hover { background: #3D4936; border-color: #3D4936; }
.sg-btn--secondario { background: var(--cta); border-color: var(--cta); }
.sg-btn--secondario:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

.pp-cta { border-radius: var(--r); background: var(--cta); border-color: var(--cta); color: #fff; font-weight: 700; letter-spacing: .06em; transition: background-color .25s ease, border-color .25s ease; }
.pp-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }

/* Telefono: pulsanti che si adattano al testo, menu non attaccato al bordo */
@media (max-width: 767px) {
  .btn, .btn-contatti, .sg-btn, .pp-cta { letter-spacing: .03em; }
  .hero__azioni { flex-wrap: wrap; gap: 8px; padding: 0 14px; }
  .hero__azioni .btn { flex: 0 1 auto; width: auto; min-width: 0; padding: 0 16px; font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .hamburger { margin-right: 16px; }
}
@media (max-width: 380px) {
  .hero__azioni .btn { padding: 0 12px; font-size: 10.5px; }
}

/* chi preferisce meno movimento */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rv-ok { opacity: 1; translate: none; transition: none; }
  .prodotti > .prodotto, .hero__testo > *, .banner h1, .hero__foto.attiva { animation: none; }
  .btn::before, .btn-contatti::before { display: none; }
  .cat-card::before, .prodotto, .prod-card { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s; }
}