/*
Theme Name: Sam Sweet Lab
Description: Negozio di ingredienti, accessori e macchine per gelateria, pasticceria e bar, con ticinoWEB CMS e WooCommerce.
Author: ticinoWEB
Author URI: https://ticinoweb.com
Template: ticinoweb-ai-theme
Version: 2.7.2
License: GPL-3.0-or-later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: samsweetlab-child-theme
*/

/* ===================================================================
   DIREZIONE «Il sito cambia gusto» (03.11.2026)

   THESIS: il sito è l'etichetta di un secchiello da 5 kg: il colore del gusto
   copre tutta la superficie, il nome è stampato a stampino, grande, e i dati
   (kg, CHF, codice) sono numeri grossi. Rifiuta la pagina crema con il serif
   elegante e la foto a sinistra che ogni negozio di gelateria mette.
   OWN-WORLD: sei campi di colore pieno (pistacchio, fragola, nocciola,
   cioccolato, limone, fior di latte) che cambiano a ogni sezione e al passaggio
   del mouse su un prodotto; titoli in Big Shoulders Stencil; testo in Sofia
   Sans; schede = etichette bianche con il bordo strappato a onde; adesivi
   rotondi e pillole inclinate; pulsanti a pillola in inchiostro cioccolato.
   STORY: il professionista capisce in un colpo d'occhio che qui si ordinano gli
   ingredienti, riconosce i gusti dai colori, mette nel carrello e paga.
   FIRST VIEWPORT: campo pistacchio a tutta pagina; a sinistra adesivo, titolo
   stampino su tre righe, frase, pulsante grande «Acquista gli ingredienti»; a
   destra la foto in un'etichetta inclinata con il bordo crema e un adesivo tondo.
   FORM: etichette dei fornitori, candidato 3 della lista ordinata (seme
   54a1643f); nessuna messa in scena dealt: la pagina scorre per campi di colore.
   =================================================================== */

/* ---------- Caratteri (assets/fonts, licenze OFL) ---------- */
/* Sweet Bean = BUTTER BEAN di JFFF (OFL, nome riservato): ritagliato al latino con gli accenti e
   quindi rinominato, come chiede la licenza (assets/fonts/OFL-butter-bean.txt). */
@font-face { font-family: 'Sweet Bean'; src: url('assets/fonts/sweet-bean.woff2') format('woff2'); font-weight: 100 900; font-display: swap }
/* Le lettere russe, che Butter Bean non ha: Alegreya Black (Huerta Tipográfica, OFL), il serif
   morbido più vicino. Solo cirillico: il browser lo scarica solo dove servono quelle lettere. */
@font-face { font-family: 'Sweet Bean Cyr'; src: url('assets/fonts/alegreya-black-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Sweet XC'; src: url('assets/fonts/sofia-sans-xc.woff2') format('woff2'); font-weight: 1 1000; font-display: swap }
@font-face { font-family: 'Sweet Sans'; src: url('assets/fonts/sofia-sans.woff2') format('woff2'); font-weight: 1 1000; font-display: swap }
@font-face { font-family: 'Sweet Sans'; src: url('assets/fonts/sofia-sans-italic.woff2') format('woff2'); font-weight: 1 1000; font-style: italic; font-display: swap }

/* ---------- Colori dei gusti e misure ---------- */
:root {
  --ink: #1f1510;
  --latte: #f6f0e4;
  --panna: #fffdf8;
  --pistacchio: #a3b86c;
  --fragola: #e8607a;
  --nocciola: #8a5a30;
  --cioccolato: #3b2218;
  --limone: #f2d44c;
  /* Il campo della sezione e il colore del testo sopra. */
  --field: var(--latte);
  --on: var(--ink);
  --on-soft: #1f151099;
  --line: #1f151026;
  /* Il colore della pagina segue la sezione in vista (lo aggiorna site.js). */
  --page: var(--pistacchio);
  --display: 'Sweet Bean', 'Sweet Bean Cyr', 'Sweet XC', 'Arial Black', sans-serif;
  --xc: 'Sweet XC', 'Arial Narrow', sans-serif;
  --sans: 'Sweet Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--xc);
  --gutter: clamp(20px, 4.5vw, 72px);
  --radius: 22px;
  --pill: 999px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* Il gusto di un prodotto (sulla scheda e sulla sua pagina): non cambia il campo
   della sezione, dà il colore all'adesivo della categoria e alla cornice della foto. */
.flavour-pistacchio { --flavour: var(--pistacchio); --flavour-on: var(--ink) }
.flavour-fragola    { --flavour: var(--fragola);    --flavour-on: #2a0e13 }
.flavour-nocciola   { --flavour: var(--nocciola);   --flavour-on: var(--latte) }
.flavour-cioccolato { --flavour: var(--cioccolato); --flavour-on: var(--latte) }
.flavour-limone     { --flavour: var(--limone);     --flavour-on: var(--ink) }
.flavour-latte      { --flavour: var(--latte);      --flavour-on: var(--ink) }
.catalog-card { --field: var(--flavour, var(--latte)); --on: var(--flavour-on, var(--ink)) }

/* ---------- Base ---------- */
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
/* Niente barra di scorrimento laterale: la pagina scorre lo stesso (rotella, trackpad, tastiera, dito). */
html { scrollbar-width: none }
html::-webkit-scrollbar { display: none }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; transition: background-color .7s ease }
body, h1, h2, h3, p { margin-top: 0 }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .94; letter-spacing: 0; text-transform: uppercase; overflow-wrap: break-word; hyphens: manual }
/* niente sillabazione nemmeno nei titoli piccoli: le parole vanno a capo intere */
h3 { hyphens: manual; -webkit-hyphens: manual }
h1 { font-size: clamp(34px, 6vw, 100px) }
h2 { font-size: clamp(30px, 4.4vw, 72px) }
h3 { font-size: clamp(26px, 2.4vw, 34px); font-family: var(--xc); font-weight: 800; line-height: .95; letter-spacing: .005em; text-transform: uppercase }
p { margin-bottom: 1.2em }
a { color: inherit; text-decoration: none }
button, input, select { font: inherit }
button, a, input, select { -webkit-tap-highlight-color: transparent }
img { max-width: 100%; height: auto; display: block }
figure { margin: 0 }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px }
.wrap { width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto }
/* WordPress annida i figli di un gruppo in un contenitore: lo si toglie dall'impaginazione. */
.wp-block-group > .wp-block-group__inner-container { display: contents }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px 18px; background: var(--ink); color: var(--latte); z-index: 100; border-radius: var(--pill) }
.skip-link:focus { top: 20px }
::selection { background: var(--ink); color: var(--limone) }

/* Ogni sezione è un campo di colore a tutta larghezza, anche quando il blocco è
   largo quanto .wrap: l'ombra riempie fino ai bordi dello schermo. */
.field, .section, .sweet-hero, .category-strip, .editorial-band, .contact-band, .page-heading, .page-content, .detail-main, .site-footer {
  background: var(--field); color: var(--on);
  box-shadow: 0 0 0 100vmax var(--field); clip-path: inset(0 -100vmax);
  transition: background-color .7s ease, box-shadow .7s ease, color .7s ease;
}

/* ---------- Adesivi e pillole: il lessico delle etichette ---------- */
.eyebrow {
  display: inline-block; padding: 7px 14px 6px; border-radius: var(--pill);
  background: var(--on); color: var(--field);
  font-family: var(--xc); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  rotate: -2deg; transform-origin: left center; margin-bottom: 22px;
}
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; font-family: var(--xc); font-size: 17px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1 }
.button, .wp-block-button__link, .woocommerce :is(a.button, button.button, input.button), .woocommerce #payment #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 60px; padding: 14px 30px; border: 3px solid var(--ink); border-radius: var(--pill);
  background: var(--ink); color: var(--latte);
  font-family: var(--xc); font-size: 19px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, translate .3s var(--ease);
}
.button:hover, .wp-block-button__link:hover, .button:focus-visible, .wp-block-button__link:focus-visible { background: var(--limone); color: var(--ink); border-color: var(--ink) }
.button span[aria-hidden], .wp-block-button__link span[aria-hidden], .text-link span[aria-hidden] { transition: translate .25s var(--ease) }
.button:hover span[aria-hidden], .wp-block-button__link:hover span[aria-hidden], .text-link:hover span[aria-hidden] { translate: 4px -4px }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--on); border-color: var(--on) }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--on); color: var(--field) }
.wp-block-buttons { margin: 0 }

/* ---------- Intestazione ---------- */
.site-header {
  width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto; height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative; z-index: 20; color: var(--ink);
}
.site-brand { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -.01em }
.site-brand { min-width: 0; flex: 0 1 auto }
/* il logo orizzontale: alto 62 px, e sul telefono si stringe se i pulsanti non ci stanno */
.site-brand img { display: block; width: auto; height: auto; max-height: 62px; max-width: 100% }
#site-navigation { order: 2; margin-left: auto; display: flex; align-items: center; gap: 6px }
.primary-menu { display: flex; align-items: center; list-style: none; gap: 4px; padding: 0; margin: 0 }
.primary-menu a { display: block; padding: 10px 14px; border-radius: var(--pill); font-family: var(--xc); font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background-color .2s, color .2s }
.primary-menu a:hover, .primary-menu .current-menu-item a { background: var(--ink); color: var(--latte) }
.primary-menu li:last-child a { border: 3px solid var(--ink); padding: 8px 18px }
.primary-menu li:last-child a:hover { background: var(--ink) }
.menu-toggle { display: none }
.shop-links { display: flex; align-items: center; gap: 2px; order: 3 }
.cart-link, .account-link, .search-open { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: color .2s, background-color .2s }
.cart-link:hover, .account-link:hover, .search-open:hover, .cart-link:focus-visible, .account-link:focus-visible, .search-open:focus-visible { background: var(--ink); color: var(--latte) }
.cart-count { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fragola); color: #2a0e13; font-family: var(--xc); font-size: 13px; font-weight: 800; line-height: 20px; text-align: center }
.cart-count[hidden] { display: none }
.search-open--bar { display: none }
.language-switcher { position: relative }
.language-switcher > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--pill); font-family: var(--xc); font-size: 17px; font-weight: 800; letter-spacing: .08em; cursor: pointer }
.language-switcher > summary::-webkit-details-marker { display: none }
.language-switcher > summary:hover, .language-switcher[open] > summary { background: var(--ink); color: var(--latte) }
.language-switcher ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; margin: 0; padding: 8px; list-style: none; background: var(--panna); color: var(--ink); border-radius: 18px; box-shadow: 0 18px 44px #1f151040, 0 2px 6px #1f151026; z-index: 30 }
.language-switcher li a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 600 }
.language-switcher li a:hover { background: var(--limone) }

/* ---------- Home: l'etichetta grande ---------- */
.sweet-hero { --field: var(--pistacchio); display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; min-height: calc(100svh - 96px); padding: 30px 0 70px; width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0 }
.hero-copy h1 { margin: 0 0 28px; max-width: none; font-size: clamp(48px, 5.8vw, 86px); text-transform: uppercase }
.hero-copy h1 em { font-style: normal; color: var(--panna) }
.hero-copy p:not(.eyebrow) { max-width: 42ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; margin-bottom: 34px; font-weight: 500 }
.hero-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap }
.hero-actions p { margin: 0 }
.hero-actions .wp-block-button__link { min-height: 72px; padding: 18px 36px; font-size: 22px }
.hero-visual { position: relative; align-self: stretch; min-height: 560px; display: grid; place-items: center }
.hero-visual .wp-block-image, .hero-visual figure {
  position: absolute; inset: 5% 2% 5% 6%; margin: 0; overflow: hidden;
  border: 14px solid var(--panna); border-radius: 46px; rotate: 3deg;
  box-shadow: 0 40px 80px -30px #1f151080, 0 4px 0 #1f151026;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center }
/* I prodotti del negozio al posto della foto: uno alla volta, su bianco come nel
   catalogo, con nome e categoria su un adesivo del colore del gusto (site.js li alterna). */
.hero-visual .hero-products { background: #fff }
.hero-products-track { position: absolute; inset: 0 }
.hero-product { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(84px, 14%, 140px) 4% 7% }
.hero-product:not(.is-on) { opacity: 0; visibility: hidden }
.hero-visual .hero-product img { width: 100%; height: 100%; object-fit: contain; object-position: center }
.hero-product-name { position: absolute; right: 30px; top: 34px; max-width: min(78%, 460px); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px 9px; border-radius: 18px; background: var(--flavour, var(--ink)); color: var(--flavour-on, var(--latte)); font-family: var(--xc); font-size: clamp(16px, 1.4vw, 21px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; text-align: right; text-wrap: balance; rotate: 2deg; transform-origin: right center; box-shadow: 0 3px 0 #1f151026 }
.hero-product-name small { font-size: .62em; letter-spacing: .12em; opacity: .8 }
.hero-product:hover .hero-product-name, .hero-product:focus-visible .hero-product-name { background: var(--ink); color: var(--limone) }
.hero-product:focus-visible { outline: 3px solid var(--ink); outline-offset: -10px }
/* L'adesivo tondo con la frase, sull'angolo dell'etichetta: un cerchio vero, a
   diametro fisso (il testo sta dentro, non lo allunga), con il bordino tratteggiato
   dei bollini stampati. */
.hero-label {
  position: absolute; left: -2%; bottom: 2%; width: 210px; height: 210px; flex: none; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  padding: 24px; background: var(--limone); color: var(--ink); rotate: -8deg;
  outline: 2px dashed #1f151066; outline-offset: -10px;
  box-shadow: 0 16px 30px -12px #1f151080;
}
.hero-label p { margin: 0 }
.hero-label p:first-child { font-family: var(--xc); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.hero-label .eyebrow { display: inline-block; max-width: 104px; margin: 0 0 8px; padding: 4px 9px 3px; border-radius: 9px; rotate: 0deg; background: var(--ink); color: var(--limone); font-size: 8.5px; letter-spacing: .12em; line-height: 1.2; text-wrap: balance }
.hero-label p:last-child, .hero-label strong { font-family: var(--display); font-size: 23px; line-height: .95; font-weight: 800; text-transform: uppercase }
.hero-label p:last-child { font-size: 20px; line-height: 1; margin-top: 2px }
.hero-label > span { display: none }

/* ---------- Nastro delle categorie: fascia d'inchiostro ---------- */
.category-strip { --field: var(--ink); --on: var(--latte); padding: 22px var(--gutter); display: flex; justify-content: space-between; gap: 20px; font-family: var(--xc); font-size: 22px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; overflow: clip }
.category-strip p { margin: 0 }
.category-strip p + p::before { content: '✳'; margin-right: 40px; color: var(--limone) }
.category-strip.is-marquee { justify-content: flex-start; gap: 0; flex-wrap: nowrap }
.strip-track { display: flex; width: max-content }
.strip-set { display: flex; flex: none; gap: 40px; padding-right: 40px }
.category-strip.is-marquee .strip-set p::before { content: '✳'; display: inline; margin-right: 40px; color: var(--limone) }

/* ---------- Sezioni ---------- */
.section { padding: clamp(70px, 9vw, 130px) 0 }
.section-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); min-width: 0 }
.section-heading > div { min-width: 0 }
.section-heading h2 { margin: 0; max-width: 14ch }
.section-heading p:not(.eyebrow) { max-width: 52ch; margin-bottom: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; font-weight: 500 }
.shop-section { --field: var(--fragola); --on: #2a0e13; --on-soft: #2a0e13b3; --line: #2a0e1333 }
.section:has(.world-grid) { --field: var(--nocciola); --on: var(--latte); --on-soft: #f6f0e4c2; --line: #f6f0e440 }
.catalog-section { --field: var(--latte) }
.editorial-band { --field: var(--cioccolato); --on: var(--latte); --on-soft: #f6f0e4b8 }
.contact-band { --field: var(--limone) }
.page-heading, .page-content, .detail-main { --field: var(--latte) }

/* Etichette inclinate che si sollevano al passaggio del mouse. Spostamento e rotazione
   sono la somma di tre parti: l'inclinazione di base (--base-r), l'entrata in scena
   mossa da GSAP allo scorrimento (--in-y, --in-r) e il sollevamento del mouse (--lift,
   --tilt, l'unica parte con la transizione). Così GSAP e il mouse non si pestano i piedi. */
@property --in-y { syntax: '<length>'; inherits: false; initial-value: 0px }
@property --in-r { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px }
@property --tilt { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@property --base-r { syntax: '<angle>'; inherits: false; initial-value: 0deg }
.catalog-card, .world-card, .contact-item {
  translate: 0 calc(var(--in-y, 0px) + var(--lift, 0px));
  rotate: calc(var(--base-r, 0deg) + var(--in-r, 0deg) + var(--tilt, 0deg));
}

/* I due mondi */
.world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px }
.world-grid > .wp-block-group__inner-container { display: contents }
.world-card { position: relative; display: flex; flex-direction: column; background: var(--panna); color: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px #1f151066; --base-r: -1deg; transition: --lift .4s var(--ease), --tilt .4s var(--ease) }
.world-card:nth-child(2), .world-grid > :nth-child(2) { --base-r: 1deg }
.world-card:hover { --tilt: calc(var(--base-r) * -1); --lift: -6px }
.world-card .wp-block-image, .world-card figure { margin: 0; height: 360px; background: #fff; overflow: hidden }
.world-card img { width: 100%; height: 100%; object-fit: cover }
.world-card.machine-world img { object-fit: contain; padding: 30px }
.world-card-copy { padding: 30px 32px 34px }
.world-card-copy .eyebrow { background: var(--ink); color: var(--latte) }
.world-card-copy h3 { font-family: var(--display); font-size: clamp(34px, 3vw, 46px); margin-bottom: 14px; letter-spacing: 0; line-height: 1 }
.world-card-copy p { font-size: 16px; max-width: 46ch }
.world-card-copy .text-link, .world-card-copy .wp-block-buttons { margin-top: 10px }

/* Fascia editoriale e fascia contatti */
.editorial-band { display: grid; grid-template-columns: 1fr 1fr; width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto; padding: clamp(60px, 7vw, 110px) 0 }
.editorial-band > .wp-block-group__inner-container { display: contents }
.editorial-band .wp-block-image, .editorial-band figure { position: relative; min-height: 480px; margin: 0; overflow: hidden; border-radius: var(--radius); border: 12px solid var(--latte); rotate: -2deg }
.editorial-band img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0 }
.editorial-copy { padding: 30px clamp(30px, 6vw, 100px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0 }
.editorial-copy h2 { margin-bottom: 24px }
.editorial-copy p:not(.eyebrow) { font-size: 17px; max-width: 46ch }
.editorial-copy .eyebrow { background: var(--limone); color: var(--ink) }
.editorial-copy .wp-block-buttons { margin-top: 14px }
.editorial-copy .wp-block-button.is-style-outline .wp-block-button__link { color: var(--latte); border-color: var(--latte) }
.editorial-copy .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--limone); color: var(--ink); border-color: var(--limone) }
.contact-band { text-align: center; padding: clamp(80px, 10vw, 150px) var(--gutter); display: flex; flex-direction: column; align-items: center }
.contact-band > .wp-block-group__inner-container { display: contents }
.contact-band .eyebrow { rotate: 2deg }
.contact-band h2 { font-size: clamp(48px, 6.6vw, 112px); max-width: 10ch; margin: 0 auto 26px }
.contact-band p:not(.eyebrow) { max-width: 50ch; margin: 0 auto 30px; font-size: 18px; font-weight: 500 }
.contact-band .wp-block-buttons { display: flex; justify-content: center }

/* ---------- Schede del catalogo: etichette strappate ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px }
.catalog-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--panna); color: var(--ink); border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: 14px;
  /* Il bordo inferiore strappato a onde, come un'etichetta staccata dal rotolo. */
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x;
  transition: --lift .35s var(--ease), --tilt .35s var(--ease);
}
.catalog-card:hover { --lift: -8px; --tilt: -.6deg }
.card-image { position: relative; display: flex; align-items: center; justify-content: center; height: 300px; padding: 30px; background: #fff; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden }
.card-image img { width: 100%; height: 100%; object-fit: contain; transition: scale .5s var(--ease) }
.catalog-card:hover .card-image img { scale: 1.05 }
.card-badge { position: absolute; top: 16px; left: 16px; z-index: 1; max-width: calc(100% - 32px); padding: 7px 13px 6px; border-radius: var(--pill); background: var(--field); color: var(--on); font-family: var(--xc); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; rotate: -3deg; transform-origin: left center; box-shadow: 0 3px 0 #1f151026 }
.card-arrow { position: absolute; bottom: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--latte); font-size: 18px; transition: translate .3s var(--ease), background-color .25s }
.catalog-card:hover .card-arrow { translate: 3px -3px; background: var(--limone); color: var(--ink) }
.card-copy { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 10px; min-width: 0 }
.card-copy h3 { margin: 0 0 14px; font-size: 24px; line-height: .98 }
.card-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.45; color: var(--on-soft); color: #1f1510a6; margin-bottom: 10px }
.card-copy .eyebrow { display: none }
.card-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 2px dashed #1f151033 }
.sweet-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink) }
.sweet-price-note { font-family: var(--xc); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f1510a6 }
.sweet-price--request { font-size: 20px; font-family: var(--xc) }
.woocommerce-Price-currencySymbol { font-size: .6em; margin-right: .1em }
.sweet-add { min-height: 48px; padding: 10px 18px; font-size: 16px; gap: 10px }
.sweet-add.loading { pointer-events: none }
.sweet-add.loading span[aria-hidden] { display: inline-block; animation: sweet-spin .7s linear infinite }
@keyframes sweet-spin { to { rotate: 1turn } }
.sweet-add.added span { visibility: hidden; position: relative }
.sweet-add.added span::after { content: '✓'; visibility: visible; position: absolute; left: 0 }
.added_to_cart.wc-forward { display: none }

/* I vantaggi: adesivi in fila */
.sweet-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--xc); font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1 }
.sweet-perks li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 11px; border-radius: var(--pill); background: var(--panna); color: var(--ink); box-shadow: 0 3px 0 #1f151026 }
.sweet-perks li:nth-child(odd) { rotate: -1.5deg } .sweet-perks li:nth-child(even) { rotate: 1.2deg }
.sweet-perks svg { flex: none; color: var(--fragola) }
.sweet-perks--band { margin-top: 56px }
.sweet-perks--heading { margin-top: 30px }
.sweet-perks--detail { margin-top: 6px; font-size: 14px }
.sweet-perks--detail li { padding: 9px 14px 8px; box-shadow: none; border: 2px solid #1f151026 }

/* ---------- Pagine interne ---------- */
.page-main { display: block }
.page-heading { padding: clamp(50px, 6vw, 90px) 0 clamp(36px, 4vw, 60px); width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto; --field: var(--pistacchio) }
.page-heading h1 { margin: 0 0 22px; max-width: 12ch }
.page-heading .eyebrow { rotate: -2deg }
.page-intro { max-width: 56ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; font-weight: 500; margin-bottom: 0 }
.page-content { padding: 50px 0 120px; width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto }
.page-content > h2 { font-size: clamp(34px, 3.6vw, 56px); margin: 50px 0 20px }
.page-content > p, .page-content > ul { max-width: 68ch; font-size: 17px }
body.woocommerce-cart .page-heading, body.woocommerce-checkout .page-heading, body.woocommerce-account .page-heading, .search-page .page-heading { --field: var(--limone) }
body.post-type-archive-macchina .page-heading, body.page-template .page-heading.page-heading--machines { --field: var(--nocciola); --on: var(--latte) }
.result-count { font-family: var(--xc); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 22px }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 60px }
.page-numbers { min-width: 46px; height: 46px; padding: 0 14px; display: grid; place-items: center; border-radius: var(--pill); border: 3px solid var(--ink); font-family: var(--xc); font-size: 17px; font-weight: 800 }
.page-numbers.current, a.page-numbers:hover { background: var(--ink); color: var(--latte) }
.empty-state { padding: 50px 0; font-size: 18px }

/* Filtri in riga (macchine, ricerca) */
.catalog-filters { display: flex; gap: 16px; align-items: flex-end; padding: 26px 0; margin-bottom: 10px; border-top: 3px solid var(--ink) }
.catalog-filters label { flex: 1; min-width: 0 }
.catalog-filters label span, .catalog-search label span, .sweet-qty > span, .price-inputs label > span:first-child { display: block; font-family: var(--xc); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px }
.catalog-filters input, .catalog-filters select, .catalog-search :is(input, select), .sweet-qty input, .search-again input {
  width: 100%; height: 52px; border: 3px solid var(--ink); border-radius: 14px; background: var(--panna); color: var(--ink); padding: 10px 16px; font-size: 16px; font-weight: 500 }
.catalog-filters .button, .catalog-search .button { height: 52px; min-height: 52px; padding-block: 0 }

/* Contatti: riquadri come etichette */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 50px 0 }
.contact-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.contact-item { background: var(--panna); color: var(--ink); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; min-height: 220px; overflow-wrap: anywhere; box-shadow: 0 20px 40px -24px #1f151066; transition: --lift .3s var(--ease) }
.contact-item:nth-child(odd) { --base-r: -1deg } .contact-item:nth-child(even) { --base-r: 1deg }
a.contact-item:hover { --lift: -6px }
.contact-item .eyebrow { margin: 0; background: var(--ink); color: var(--latte); align-self: flex-start }
.contact-item strong { font-family: var(--xc); font-size: 26px; font-weight: 800; line-height: 1.05; text-transform: uppercase }
.contact-item > span:last-child { margin-top: auto; font-size: 22px }
.contact-intro { max-width: 60ch; margin-bottom: 40px; font-size: 18px; line-height: 1.55 }
.contact-team-title { margin: 76px 0 28px; font-size: clamp(40px, 4vw, 64px) }
.contact-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px }
.contact-team > .wp-block-group__inner-container { display: contents }
.contact-person { padding: 26px; background: var(--panna); border-radius: 18px; box-shadow: 0 16px 30px -22px #1f151066 }
.contact-person p { margin: 0 }
.contact-person .eyebrow { margin-bottom: 12px; font-size: 11px }
.contact-person-name { margin-bottom: 12px !important; font-family: var(--xc); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.05 }
.contact-person a { font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; border-bottom: 2px solid transparent; transition: border-color .2s }
.contact-person a:hover { border-bottom-color: currentColor }
.contact-company { margin-top: 64px; padding-top: 30px; border-top: 3px solid var(--ink); font-size: 16px; line-height: 1.8 }
.contact-company .text-link { margin-top: 10px }

/* ---------- Scheda del prodotto ---------- */
.detail-main { padding: 40px 0 120px; width: min(1360px, calc(100% - var(--gutter) * 2)); margin-inline: auto }
body.single .detail-main { --field: var(--latte) }
.back-link { display: inline-flex; margin-bottom: 36px; font-size: 15px }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start }
.detail-image { position: sticky; top: 30px; min-height: 480px; padding: clamp(24px, 4vw, 60px); background: #fff; border-radius: 46px; border: 14px solid var(--flavour, var(--latte)); rotate: -2deg; box-shadow: 0 40px 80px -30px #1f151066 }
.detail-image img { width: 100%; height: 520px; object-fit: contain }
.detail-copy { min-width: 0 }
.detail-copy .eyebrow { background: var(--flavour, var(--ink)); color: var(--flavour-on, var(--latte)); box-shadow: 0 3px 0 #1f151026 }
.detail-copy h1 { font-size: clamp(36px, 3.8vw, 62px); margin-bottom: 26px; max-width: 16ch }
.entry-content { font-size: 17px; max-width: 60ch }
.entry-content h2 { font-size: 34px }
.entry-content img { max-height: 480px; object-fit: contain }
.entry-content a { text-decoration: underline; text-underline-offset: 3px }
.entry-content table { border-collapse: collapse; max-width: 100% }
.entry-content td, .entry-content th { padding: 8px; border: 1px solid #1f151033 }
.detail-copy .button { margin-top: 24px }
.download { display: inline-flex; max-width: fit-content; margin-top: 20px }
.woocommerce-notices-wrapper:empty { display: none }
/* Il riquadro d'acquisto: un'etichetta appesa alla scheda */
.sweet-purchase {
  margin-top: 36px; padding: 30px 30px 40px; display: grid; gap: 22px;
  background: var(--panna); color: var(--ink); border-radius: var(--radius) var(--radius) 0 0;
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x;
}
.sweet-purchase .sweet-price { font-size: clamp(44px, 4vw, 64px) }
.sweet-purchase .sweet-price-note { font-size: 13px }
.sweet-buy { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap }
.sweet-qty { display: grid; gap: 7px }
.sweet-qty input { width: 100px; text-align: center; font-family: var(--xc); font-size: 22px; font-weight: 800 }
.detail-copy .sweet-buy .button { margin-top: 0; height: 60px; flex: 1 1 240px }
.sweet-stock-out { margin: 0; font-family: var(--xc); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--fragola) }
.sweet-ask { margin-top: 26px }

/* ---------- Piè di pagina: inchiostro ---------- */
.site-footer { --field: var(--ink); --on: var(--latte); padding: 70px 0 24px }
.footer-top { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 50px; padding-bottom: 60px }
.footer-brand > a { font-family: var(--display); font-size: clamp(40px, 4.6vw, 76px); font-weight: 800; line-height: .98; display: block }
.footer-brand p { font-size: 15px; max-width: 32ch; color: #f6f0e4b8; margin-top: 18px }
/* il logo verticale senza fondo, con la scritta bianca per il piè di pagina scuro */
.footer-logo { display: block; width: min(250px, 100%) }
.footer-logo img { display: block; width: 100%; height: auto }
.site-footer .eyebrow { background: var(--limone); color: var(--ink); margin-bottom: 20px }
.footer-menu { padding: 0; list-style: none; margin: 0; font-family: var(--xc); font-size: 20px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.footer-menu li { margin: 8px 0 }
.footer-contacts { font-size: 15px }
.footer-contacts > a { display: block; margin-bottom: 6px; font-weight: 600 }
.footer-contacts > p:last-child { color: #f6f0e4b8; margin-top: 18px; max-width: 28ch }
.site-footer a:hover { color: var(--limone) }
.footer-bottom { border-top: 2px solid #f6f0e433; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: #f6f0e4b8 }
.site-footer a:focus-visible { outline-color: var(--latte) }

/* ===================================================================
   Ricerca
   =================================================================== */
.search-dialog {
  width: min(760px, calc(100% - 32px)); max-height: min(80dvh, 720px);
  margin: 9vh auto auto; padding: 0; border: 0; border-radius: 28px;
  background: var(--panna); color: var(--ink);
  box-shadow: 0 30px 90px #1f151066, 0 2px 8px #1f151026;
  overflow: hidden;
}
.search-dialog::backdrop { background: rgb(31 21 16 / .5); backdrop-filter: blur(6px) }
.search-dialog[open] { display: flex }
.search-form { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0 }
.search-field { display: flex; align-items: center; gap: 14px; padding: 20px 20px 20px 26px; border-bottom: 3px solid var(--ink); color: var(--ink) }
.search-field > svg { flex: none }
.search-field input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; outline: none; font-family: var(--xc); font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--ink) }
.search-field input::placeholder { color: #1f151080; text-transform: none; font-weight: 600 }
.search-field input::-webkit-search-cancel-button { display: none }
.search-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s }
.search-close svg { display: block }
.search-dialog [hidden] { display: none !important }
.search-close:hover, .search-close:focus-visible { background: var(--ink); color: var(--latte) }
.search-suggestions { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain }
.search-suggestions a { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; color: inherit }
.search-suggestions [aria-selected="true"] a { background: var(--limone) }
.search-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: #fff; border: 2px solid #1f151026 }
.search-thumb img { width: 100%; height: 100%; object-fit: contain }
.search-thumb:empty::before { content: ''; width: 16px; height: 20px; border: 2px solid #1f151066; border-radius: 2px }
.search-text { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.search-kind { font-family: var(--xc); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fragola) }
.search-title { font-family: var(--xc); font-size: 21px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.search-title mark { background: var(--limone); color: inherit }
.search-empty { padding: 26px 18px; font-size: 15px; color: #1f1510b3 }
.search-all { align-self: flex-start; margin: 4px 26px 22px }
@media (prefers-reduced-motion: no-preference) {
  .search-dialog { opacity: 0; translate: 0 -16px; transition: opacity .22s ease, translate .3s var(--ease), display .3s allow-discrete, overlay .3s allow-discrete }
  .search-dialog[open] { opacity: 1; translate: 0 0 }
  @starting-style { .search-dialog[open] { opacity: 0; translate: 0 -16px } }
  .search-dialog::backdrop { background: rgb(31 21 16 / 0); backdrop-filter: blur(0); transition: background-color .3s, backdrop-filter .3s, display .3s allow-discrete, overlay .3s allow-discrete }
  .search-dialog[open]::backdrop { background: rgb(31 21 16 / .5); backdrop-filter: blur(6px) }
  @starting-style { .search-dialog[open]::backdrop { background: rgb(31 21 16 / 0); backdrop-filter: blur(0) } }
}
.search-again { margin-bottom: 40px }
.search-pages { list-style: none; margin: 50px 0 0; padding: 30px 0 0; border-top: 3px solid var(--ink); display: flex; flex-wrap: wrap; gap: 14px 40px }

/* ===================================================================
   Negozio: carrello nell'intestazione, avviso, carrello, cassa, account
   =================================================================== */
.cart-link.is-filled svg { animation: sweet-cart-bump .45s var(--ease) }
@keyframes sweet-cart-bump { 40% { scale: 1.28 } }
.scoop-fly { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none }
.scoop-fly > span { display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--ink); background: var(--scoop, #b9c47c); box-shadow: inset -4px -5px 0 #1f151014, 0 6px 14px #1f151040 }

.cart-toast { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(400px, calc(100% - 32px)); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 22px 22px 22px 24px; background: var(--ink); color: var(--latte); border-radius: 22px; box-shadow: 0 18px 40px #1f151066; opacity: 0; translate: 0 12px; transition: opacity .25s, translate .25s }
.cart-toast.is-visible { opacity: 1; translate: 0 0 }
.cart-toast[hidden] { display: none }
.cart-toast-text { margin: 0; grid-column: 1 / -1; padding-right: 26px; font-size: 15px; line-height: 1.45; font-weight: 500 }
.cart-toast-link { justify-self: start; min-height: 48px; padding: 10px 20px; font-size: 16px; background: var(--limone); border-color: var(--limone); color: var(--ink) }
.cart-toast-link:hover { background: var(--fragola); border-color: var(--fragola); color: #2a0e13 }
.cart-toast-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--latte); cursor: pointer }
.cart-toast-close:hover { background: #ffffff1f }

.detail-main .woocommerce-notices-wrapper { margin-bottom: 26px }
.detail-main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error), .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 12px; padding: 16px 20px; background: var(--panna); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none }
.detail-main :is(.woocommerce-message, .woocommerce-info) .button { order: 2; min-height: 44px; padding: 8px 18px; font-size: 15px; margin-top: 0 }
.woocommerce-error { border-color: var(--fragola) !important }

.woocommerce-cart .page-content, .woocommerce-checkout .page-content, .woocommerce-account .page-content { font-size: 15px }
.woocommerce :is(a.button, button.button, input.button), .woocommerce :is(a.button, button.button, input.button).alt, .woocommerce #payment #place_order { min-height: 54px; padding: 12px 24px; font-size: 17px }
.woocommerce :is(a.button, button.button, input.button):hover, .woocommerce :is(a.button, button.button, input.button).alt:hover, .woocommerce #payment #place_order:hover { background: var(--limone); border-color: var(--ink); color: var(--ink) }
/* «Procedi con l'ordine» nel carrello: WooCommerce lo vuole viola e a blocco (scritta in alto);
   qui è un pulsante del sito come gli altri, con la scritta al centro. */
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; margin-bottom: 0; padding: 14px 24px; background: var(--ink); color: var(--latte); border: 3px solid var(--ink); font-size: 19px; line-height: 1 }
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible { background: var(--limone); color: var(--ink); border-color: var(--ink) }
.woocommerce :is(button.button, a.button):disabled, .woocommerce :is(button.button, a.button)[disabled] { background: #1f151022; border-color: transparent; color: #1f1510b3; opacity: 1 }
.woocommerce table.shop_table { border: 3px solid var(--ink); border-radius: 18px; background: var(--panna); overflow: hidden }
.woocommerce table.shop_table :is(th, td) { border-color: #1f151026; padding: 14px 16px }
.woocommerce table.shop_table th { font-family: var(--xc); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.woocommerce-cart table.cart img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 10px }
.woocommerce a.remove { color: var(--ink) !important; border: 2px solid var(--ink); width: 28px; height: 28px; line-height: 24px; font-weight: 700 }
.woocommerce a.remove:hover { background: var(--fragola); color: #2a0e13 !important }
.woocommerce .quantity .qty { width: 76px; height: 46px; border: 3px solid var(--ink); border-radius: 12px; background: var(--panna); font-weight: 700 }
.woocommerce :is(form .form-row input.input-text, form .form-row textarea, form .form-row select), .woocommerce-page form .form-row :is(input.input-text, textarea), #coupon_code, .select2-container .select2-selection--single {
  min-height: 50px; border: 3px solid var(--ink); border-radius: 12px; background: var(--panna); color: var(--ink); padding: 10px 14px; font-size: 15px }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 24px; padding-left: 0 }
.woocommerce form .form-row label { font-family: var(--xc); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px }
.woocommerce form .form-row .required { color: var(--fragola) }
.woocommerce-checkout #payment, .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout-review-order { background: var(--panna); border-radius: 22px }
.woocommerce-checkout #payment div.payment_box { background: var(--latte); color: var(--ink); border-radius: 12px }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--latte) }
.woocommerce .cart-collaterals .cart_totals { padding: 26px }
.woocommerce .cart-collaterals .cart_totals h2, .woocommerce-checkout h3, #order_review_heading { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 14px }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink) }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 0; border-bottom: 2px solid #1f151026; font-family: var(--xc); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--fragola) }
.woocommerce-shipping-methods li { margin-bottom: 6px }
.woocommerce-cart #coupon_code { width: 210px }

/* ===================================================================
   Negozio: colonna dei filtri a sinistra (resta in vista scorrendo)
   =================================================================== */
.catalog-wrap--shop { display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); align-items: start }
.catalog-sidebar { position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; gap: 26px; padding: 26px 24px 30px; background: var(--panna); color: var(--ink); border-radius: var(--radius) var(--radius) 0 0;
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #0000 7px, #000 7.5px) 0 100% / 18px 12px repeat-x }
.catalog-search { display: grid; gap: 16px }
.catalog-search .button { width: 100% }
.catalog-cats { border-top: 2px dashed #1f151055; padding-top: 18px }
.catalog-cats > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; margin-bottom: 10px }
.catalog-cats > summary::-webkit-details-marker { display: none }
.catalog-cats > summary .eyebrow { margin: 0; rotate: 0deg; background: var(--ink); color: var(--latte) }
.catalog-cats-toggle { display: none; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .2s }
.catalog-cats[open] .catalog-cats-toggle { rotate: 225deg; translate: 0 2px }
.catalog-cat-list { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.3 }
.catalog-cat-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; transition: color .15s }
.catalog-cat-list a:hover { color: var(--fragola) }
.catalog-cat-list a[aria-current="page"] { font-weight: 800 }
.catalog-cat-list a[aria-current="page"] > span:first-child { background: var(--limone); padding: 2px 8px; margin-left: -8px; border-radius: 8px }
.catalog-cat-count { flex: none; font-family: var(--xc); font-size: 13px; font-weight: 700; color: #1f151099; font-variant-numeric: tabular-nums }
.catalog-cat-list--0 > li { border-top: 2px dashed #1f151033 }
.catalog-cat-list--0 > li > a { font-family: var(--xc); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 11px 0 }
.catalog-cat-list--1, .catalog-cat-list--2, .catalog-cat-list--3 { padding-left: 14px; border-left: 3px solid #1f151026; margin: 0 0 8px 2px }
.catalog-cat-list--root a { font-weight: 700 }
.catalog-reset { justify-self: start; font-size: 14px }
.catalog-main .result-count { margin-top: 0 }
.catalog-wrap--shop .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px }

/* Filtro prezzo: istogramma, barra a due maniglie, caselle. */
.price-filter { border: 0; border-top: 2px dashed #1f151055; margin: 6px 0 0; padding: 18px 0 0; min-width: 0 }
.price-filter legend { float: left; width: 100%; margin-bottom: 14px; font-family: var(--xc); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.price-histogram { clear: both; display: flex; align-items: flex-end; gap: 2px; height: 52px; padding: 0 11px }
.price-histogram span { flex: 1; height: max(var(--h), 2px); background: #1f151026; border-radius: 2px 2px 0 0; transition: background-color .15s }
.price-histogram span.is-in { background: var(--fragola) }
.price-range { --lo: 0%; --hi: 100%; position: relative; height: 24px; margin: -12px 0 14px }
.price-range::before, .price-range::after { content: ''; position: absolute; top: 11px; height: 3px; border-radius: 2px }
.price-range::before { left: 11px; right: 11px; background: #1f151033 }
.price-range::after { left: calc(11px + (100% - 22px) * var(--lo) / 100%); width: calc((100% - 22px) * (var(--hi) - var(--lo)) / 100%); height: 4px; top: 10.5px; background: var(--ink) }
.catalog-search .price-range input { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; z-index: 1 }
.price-range input::-webkit-slider-runnable-track { height: 24px; background: none }
.price-range input::-moz-range-track { height: 24px; background: none }
.price-range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; background: var(--limone); border: 3px solid var(--ink); cursor: grab }
.price-range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--limone); border: 3px solid var(--ink); cursor: grab }
.price-range input:active::-webkit-slider-thumb { cursor: grabbing; scale: 1.08 }
.price-range input:focus-visible { outline: none }
.price-range input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--fragola); outline-offset: 2px }
.price-range input:focus-visible::-moz-range-thumb { outline: 3px solid var(--fragola); outline-offset: 2px }
.price-range[hidden] { display: none }
.price-range[hidden] + .price-inputs { margin-top: 14px }
.price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.catalog-search .price-input { display: flex; align-items: center; gap: 6px; margin: 0; height: 48px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--panna); font-weight: 400 }
.price-input:focus-within { outline: 3px solid var(--fragola); outline-offset: 2px }
.catalog-search .price-input > span { display: inline; margin: 0; font-family: var(--xc); font-size: 13px; font-weight: 800; letter-spacing: .06em }
.catalog-search .price-input input { flex: 1; width: 100%; border: 0; height: 100%; padding: 0; min-width: 0; font-size: 16px; font-weight: 700; outline: none; background: transparent; -moz-appearance: textfield }
.price-input input::-webkit-outer-spin-button, .price-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* ===================================================================
   Schermi medi e telefono
   =================================================================== */
@media (max-width: 1180px) {
  .catalog-wrap--shop .catalog-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .contact-grid, .contact-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1000px) {
  .primary-menu a { padding: 8px 10px; font-size: 15px }
  .sweet-hero { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding-bottom: 50px }
  .hero-copy h1 { font-size: clamp(40px, 8.8vw, 80px) }
  .hero-visual { min-height: 460px }
  .hero-visual .wp-block-image, .hero-visual figure { inset: 4% 3% 8% 3% }
  .footer-top { gap: 30px }
  .detail-grid { grid-template-columns: 1fr; gap: 30px }
  .detail-image { position: static; rotate: -1deg }
  .world-grid { grid-template-columns: 1fr }
}
@media (max-width: 900px) {
  .catalog-wrap--shop { grid-template-columns: 1fr }
  .catalog-sidebar { position: static; max-height: none; overflow: visible; margin-bottom: 30px }
  .catalog-search { grid-template-columns: 1fr 1fr; align-items: end }
  .catalog-search > label:first-child, .catalog-search > .button, .price-filter { grid-column: 1 / -1 }
  .catalog-cats-toggle { display: block }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 20px }
  .site-header { height: 76px; gap: 6px }
  .site-brand { font-size: 20px; white-space: nowrap }
  .site-brand img { max-height: 44px }
  .footer-logo { width: min(210px, 100%) }
  .menu-toggle { display: flex; gap: 10px; align-items: center; margin-left: 6px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: var(--pill); background: none; font-family: var(--xc); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink) }
  .menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--latte) }
  .shop-links { order: 0 }
  .search-open--nav { display: none }
  .search-open--bar { display: inline-flex; margin-left: auto }
  #site-navigation { display: none; position: absolute; top: 80px; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); padding: 18px var(--gutter) 26px; flex-direction: column; align-items: stretch; gap: 0; background: var(--panna); color: var(--ink); border-radius: 0 0 28px 28px; box-shadow: 0 24px 40px #1f151040; margin: 0 }
  #site-navigation.is-open { display: flex }
  .primary-menu { display: flex; flex-direction: column; align-items: stretch; gap: 4px }
  .primary-menu a { font-size: 22px; padding: 12px 14px }
  .primary-menu li:last-child { margin-top: 8px }
  .language-switcher { margin-top: 12px; border-top: 2px dashed #1f151033; padding-top: 8px }
  .language-switcher ul { position: static; box-shadow: none; padding: 4px 0; margin: 0; background: transparent }
  .language-switcher li a { padding: 8px 14px; font-size: 17px }
  .hero-copy h1 { font-size: clamp(28px, 8.4vw, 46px); margin-bottom: 22px }
  .hero-copy p:not(.eyebrow) { font-size: 16px; margin-bottom: 26px }
  .hero-actions { gap: 18px }
  .hero-actions .wp-block-button__link { min-height: 62px; padding: 14px 26px; font-size: 19px }
  .hero-visual { min-height: 380px }
  .hero-visual .wp-block-image, .hero-visual figure { border-width: 10px; border-radius: 32px }
  .hero-label { width: 156px; height: 156px; padding: 16px; left: 0; bottom: 0; outline-offset: -7px }
  .hero-label .eyebrow { max-width: 80px; font-size: 7px; padding: 3px 8px 2px; margin-bottom: 6px; letter-spacing: .1em; border-radius: 8px }
  .hero-label p:last-child, .hero-label strong { font-size: 17px }
  .hero-label p:last-child { font-size: 15px; margin-top: 1px }
  .hero-product-name { top: 22px; right: 20px; font-size: 14px; padding: 8px 12px 7px }
  .hero-product { padding: 70px 4% 6% }
  .category-strip { font-size: 16px; padding-block: 16px }
  .section { padding: 60px 0 }
  .section-heading { gap: 14px; margin-bottom: 30px }
  .world-card .wp-block-image, .world-card figure { height: 260px }
  .world-card-copy { padding: 24px }
  .catalog-wrap--shop .catalog-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px }
  .card-image { height: 200px; padding: 16px }
  .card-badge { top: 10px; left: 10px; font-size: 10px; padding: 5px 9px 4px; max-width: calc(100% - 20px) }
  .card-arrow { width: 34px; height: 34px; bottom: 10px; right: 10px }
  .card-copy { padding: 16px 14px 8px }
  .card-copy h3 { font-size: 19px }
  .sweet-price { font-size: 26px }
  .sweet-add { min-height: 42px; padding: 8px 14px; font-size: 14px }
  .sweet-perks { font-size: 13px; gap: 8px }
  .sweet-perks li { padding: 9px 13px 8px }
  .editorial-band { grid-template-columns: 1fr; padding: 50px 0 60px }
  .editorial-band .wp-block-image, .editorial-band figure { min-height: 320px; rotate: -1deg }
  .editorial-copy { padding: 36px 6px 0 }
  .contact-band { padding: 70px var(--gutter) }
  .footer-top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 36px }
  .footer-bottom { flex-wrap: wrap; font-size: 12px }
  .site-footer { padding-top: 50px }
  .page-heading { padding: 40px 0 28px }
  .page-content { padding: 36px 0 70px }
  .catalog-filters { flex-wrap: wrap; gap: 14px }
  .catalog-filters label { flex-basis: 100% }
  .catalog-filters .button { width: 100% }
  .detail-main { padding-bottom: 70px }
  .detail-image { min-height: 300px; padding: 20px; border-width: 10px; border-radius: 30px }
  .detail-image img { height: 320px }
  .detail-copy h1 { font-size: clamp(34px, 9.5vw, 50px) }
  .sweet-purchase { padding: 22px 22px 32px }
  .sweet-purchase .sweet-price { font-size: 40px }
  .contact-grid, .contact-grid:has(> :nth-child(4)) { grid-template-columns: 1fr }
  .contact-item { min-height: 170px }
  .contact-team-title { margin-top: 56px }
  .search-dialog { width: 100%; max-width: none; max-height: 100dvh; margin: 0 auto auto; border-radius: 0 0 28px 28px }
  .search-field { padding: 14px 14px 14px 18px; gap: 10px }
  .search-suggestions a { grid-template-columns: 48px 1fr; gap: 12px; padding: 9px 10px }
  .search-thumb { width: 48px; height: 48px }
  .search-title { font-size: 18px }
  .search-all { margin: 2px 18px 18px }
  .cart-toast { right: 16px; bottom: 16px }
  .woocommerce-cart #coupon_code { width: 100% }
}
@media (max-width: 420px) {
  .catalog-wrap--shop .catalog-grid, .catalog-grid { grid-template-columns: 1fr }
  .card-image { height: 260px }
  .card-copy h3 { font-size: 22px }
  .catalog-search { grid-template-columns: 1fr }
  .account-link { display: none }
  .hero-actions { gap: 14px }
}

/* ===================================================================
   Movimento
   Tutto decorativo: senza sostegno del browser il sito resta fermo e completo.
   WordPress annida i figli di un gruppo in .wp-block-group__inner-container:
   i selettori usano discendenti, non figli diretti.
   =================================================================== */
@view-transition { navigation: auto }
.site-header { view-transition-name: sweet-header }
.detail-image img { view-transition-name: sweet-scheda }
::view-transition-old(sweet-scheda), ::view-transition-new(sweet-scheda) { animation-duration: .45s }
@keyframes sweet-curtain-up { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0) } }
@keyframes sweet-page-back { to { translate: 0 -48px; opacity: .55 } }
::view-transition-old(root) { animation: sweet-page-back .62s cubic-bezier(.65,0,.35,1) both }
::view-transition-new(root) { animation: sweet-curtain-up .62s cubic-bezier(.65,0,.35,1) both }

/* Il resto del movimento è di GSAP (assets/motion, guidato da site.js): apertura della
   home, comparse e foto legate allo scorrimento, nastro, pulsanti calamitati, pallina
   nel carrello. Qui solo il punto di partenza dell'apertura: la classe sweet-motion la
   mette una riga in <head> quando le animazioni sono ammesse, e si toglie da sola se
   GSAP non arriva, così senza JavaScript la pagina è ferma e completa. */
.sweet-motion .hero-copy h1 { visibility: hidden }
.sweet-motion :is(.hero-copy .eyebrow, .hero-copy p:not(.eyebrow), .hero-actions, .hero-visual figure, .hero-visual .wp-block-image, .hero-label) { opacity: 0 }
/* La fascia che nasconde le righe del titolo prima che salgano: abbastanza alta da
   non tagliare le lettere che scendono sotto la riga (p, g, q, accenti). */
.sweet-line { display: block; overflow: hidden; padding: .06em 0 .26em; margin: -.06em 0 -.26em }
.sweet-line > span { display: block }
.hero-copy h1 em { display: inline-block }
/* Parole del titolo una sopra l'altra: lo spazio è quello della più lunga (site.js). */
.hero-copy h1 em.is-rotating { display: inline-grid; justify-items: start }
.hero-copy h1 em.is-rotating > span { grid-area: 1 / 1; white-space: nowrap }
.is-magnetic { will-change: transform }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important }
  .sweet-add.loading span[aria-hidden] { animation: none; opacity: .5 }
  body, .field, .section, .sweet-hero, .category-strip, .editorial-band, .contact-band, .page-heading, .page-content, .detail-main, .site-footer { transition: none }
}

/* ===================================================================
   Cono e palline: il cursore è un cono gelato, una pallina per articolo nel
   carrello (fino a tre; site.js scrive <html data-scoops>). Solo con mouse.
   =================================================================== */
@media (hover: hover) and (pointer: fine) {
  html { --cono: url("assets/cursor/cono-0.svg") 3 3; --cono-link: url("assets/cursor/cono-link-0.svg") 3 3 }
  html[data-scoops="1"] { --cono: url("assets/cursor/cono-1.svg") 3 3; --cono-link: url("assets/cursor/cono-link-1.svg") 3 3 }
  html[data-scoops="2"] { --cono: url("assets/cursor/cono-2.svg") 3 3; --cono-link: url("assets/cursor/cono-link-2.svg") 3 3 }
  html[data-scoops="3"] { --cono: url("assets/cursor/cono-3.svg") 3 3; --cono-link: url("assets/cursor/cono-link-3.svg") 3 3 }
  html, body { cursor: var(--cono), auto }
  :is(a[href], button:not(:disabled), summary, select, label[for], [role="button"], input:is([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="range"])) { cursor: var(--cono-link), pointer }
  :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="range"]), textarea, [contenteditable="true"]) { cursor: text }
  :is(button, input, select):disabled { cursor: not-allowed }
}

/* Scorrimento morbido (Lenis, caricato da site.js solo con la rotella del mouse). */
html.lenis, html.lenis body { height: auto }
html.lenis.lenis-smooth { scroll-behavior: auto }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip }
.lenis [data-lenis-prevent], .lenis dialog { overscroll-behavior: contain }
.lenis.lenis-smooth iframe { pointer-events: none }