/* ==========================================================================
   Graphx Negozio — stile generale (header, footer, home, pagine).
   Il negozio vero e proprio (griglie prodotti, scheda, carrello, cassa, account) è in woocommerce.css.
   Scritto "mobile first": prima il telefono, poi i @media (min-width) per gli schermi larghi.
   Struttura: 1 token · 2 base · 3 componenti · 4 barra e header · 5 footer · 6 home · 7 pagine · 8 movimento
   ========================================================================== */

/* 1. TOKEN ------------------------------------------------------------------
   I quattro colori del marchio e i font arrivano dal Customizer (stampati in linea subito dopo
   questo file, vedi gn_css_variabili() in inc/customizer.php). Qui ci sono i valori di riserva
   e le sfumature ricavate con color-mix(), così un cambio di colore si porta dietro tutto. */
:root {
  --gn-primario: #22193f;
  --gn-su-primario: #ffffff;
  --gn-accento: #f3910a;
  --gn-su-accento: #14121f;
  --gn-testo: #1f1a33;
  --gn-sfondo: #ffffff;
  --gn-link: #22193f;
  --gn-fuoco: #f3910a;
  --gn-fuoco-scuro: #f3910a;
  --gn-font-titoli: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gn-font-testo: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* sfumature ricavate */
  --gn-chiaro: color-mix(in srgb, var(--gn-primario) 5%, var(--gn-sfondo));      /* fondi delle sezioni grigie */
  --gn-bordo: color-mix(in srgb, var(--gn-testo) 13%, var(--gn-sfondo));         /* righe e bordi leggeri */
  --gn-bordo-forte: color-mix(in srgb, var(--gn-testo) 45%, var(--gn-sfondo));   /* bordi dei campi (3:1 sullo sfondo) */
  --gn-testo-2: color-mix(in srgb, var(--gn-testo) 75%, var(--gn-sfondo));       /* testo secondario */
  --gn-su-primario-2: color-mix(in srgb, var(--gn-su-primario) 78%, var(--gn-primario)); /* testo secondario su primario */
  --gn-riga-primario: color-mix(in srgb, var(--gn-su-primario) 18%, var(--gn-primario));

  /* forme (dal tema graphx: foto con angoli 10px e ombra morbida) */
  --gn-r-foto: 10px;
  --gn-r-box: 14px;
  --gn-r-btn: 8px;
  --gn-ombra: 0 10px 24px color-mix(in srgb, var(--gn-primario) 16%, transparent);
  --gn-ombra-forte: 0 18px 32px color-mix(in srgb, var(--gn-primario) 24%, transparent);

  --gn-larghezza: 1280px;
  --gn-lato: 16px;   /* margine laterale: 16px sul telefono */
  --gn-sez: 48px;    /* spazio verticale delle sezioni */
}

/* header chiaro (predefinito) o scuro, scelto dal Customizer */
body.gn-header-chiaro { --gn-h-sfondo: var(--gn-sfondo); --gn-h-testo: var(--gn-testo); --gn-h-riga: var(--gn-bordo); --gn-h-fuoco: var(--gn-fuoco); }
body.gn-header-scuro  { --gn-h-sfondo: var(--gn-primario); --gn-h-testo: var(--gn-su-primario); --gn-h-riga: var(--gn-riga-primario); --gn-h-fuoco: var(--gn-fuoco-scuro); }

/* 2. BASE ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--gn-font-testo); font-size: 16px; line-height: 1.6; color: var(--gn-testo); background: var(--gn-sfondo); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--gn-link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--gn-font-titoli); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 700; color: inherit; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
address { font-style: normal; }

/* campi dei moduli (valgono anche per quelli classici di WooCommerce) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  max-width: 100%; min-height: 48px; padding: 10px 14px; background: var(--gn-sfondo); color: var(--gn-testo);
  border: 1.5px solid var(--gn-bordo-forte); border-radius: var(--gn-r-btn); line-height: 1.4;
}
textarea { min-height: 120px; }

/* fuoco da tastiera ben visibile */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gn-fuoco); outline-offset: 2px; }
.gn-header :focus-visible { outline-color: var(--gn-h-fuoco); }
.gn-footer :focus-visible { outline-color: var(--gn-fuoco-scuro); }
.gn-hero :focus-visible { outline-color: var(--gn-hero-fuoco, var(--gn-fuoco-scuro)); }
.gn-main:focus { outline: none; }

/* salta al contenuto e testo solo per i lettori di schermo */
.gn-salta { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 12px 18px; background: var(--gn-primario); color: var(--gn-su-primario); font-weight: 700; border-radius: var(--gn-r-btn); text-decoration: none; }
.gn-salta:focus { top: 8px; }
.gn-nascosto, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.gn-wrap { width: 100%; max-width: var(--gn-larghezza); margin: 0 auto; padding-left: var(--gn-lato); padding-right: var(--gn-lato); }

/* 3. COMPONENTI ------------------------------------------------------------- */
.gn-h1 { font-size: clamp(28px, 6vw, 44px); font-weight: 800; margin: 0; }
.gn-h2 { font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; margin: 0; }

.gn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--gn-r-btn); font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; transition: transform .15s, box-shadow .15s, filter .15s, background-color .15s, color .15s; }
.gn-btn-accento { background: var(--gn-accento); color: var(--gn-su-accento); }
.gn-btn-primario { background: var(--gn-primario); color: var(--gn-su-primario); }
.gn-btn-bordo { border-color: currentColor; color: var(--gn-testo); background: transparent; }
.gn-btn-accento:hover, .gn-btn-primario:hover { color: inherit; filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--gn-ombra); }
.gn-btn-accento:hover { color: var(--gn-su-accento); }
.gn-btn-primario:hover { color: var(--gn-su-primario); }
.gn-btn-bordo:hover { background: var(--gn-testo); color: var(--gn-sfondo); border-color: var(--gn-testo); }
.gn-btn .gn-icona { flex: none; }

.gn-link-freccia { font-weight: 700; color: var(--gn-testo); text-decoration: none; border-bottom: 2px solid var(--gn-accento); padding-bottom: 2px; white-space: nowrap; }
.gn-link-freccia:hover { color: var(--gn-link); }

/* foto: angoli 10px e ombra morbida, come nel tema graphx */
.gn-fig { position: relative; overflow: hidden; border-radius: var(--gn-r-foto); box-shadow: var(--gn-ombra); background: var(--gn-chiaro); transition: box-shadow .3s cubic-bezier(.16,.8,.24,1); }
.gn-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gn-fig-vuota { display: block; width: 100%; height: 100%; min-height: 120px; background: linear-gradient(135deg, var(--gn-chiaro), var(--gn-bordo)); }

.gn-griglia-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 20px; }

/* testo lungo dell'editor */
/* colonna di lettura allineata a sinistra con il titolo della pagina */
.gn-prosa > * { max-width: 760px; }
.gn-prosa > .alignwide { max-width: 1100px; }
.gn-prosa > .alignfull { max-width: none; }
.gn-prosa h2 { font-size: 26px; margin-top: 1.5em; }
.gn-prosa h3 { font-size: 21px; margin-top: 1.3em; }
.gn-prosa ul, .gn-prosa ol { padding-left: 1.3em; margin: 0 0 1em; }
.gn-prosa img { border-radius: var(--gn-r-foto); }
.gn-prosa blockquote { margin: 0 0 1em; padding-left: 16px; border-left: 3px solid var(--gn-accento); color: var(--gn-testo-2); }
.gn-prosa table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.gn-prosa th, .gn-prosa td { padding: 8px 10px; border-bottom: 1px solid var(--gn-bordo); text-align: left; }
/* domande e risposte: il blocco «Dettagli» dell'editor (si apre anche senza JavaScript) */
.gn-prosa details { border-bottom: 1px solid var(--gn-bordo); }
.gn-prosa h2 + details { border-top: 1px solid var(--gn-bordo); }
.gn-prosa details > summary { position: relative; display: block; min-height: 48px; padding: 14px 40px 14px 0; font-weight: 700; font-size: 17px; line-height: 1.35; cursor: pointer; list-style: none; }
.gn-prosa details > summary::-webkit-details-marker { display: none; }
.gn-prosa details > summary::after { content: "+"; position: absolute; right: 6px; top: 8px; font-size: 26px; font-weight: 400; line-height: 1.2; color: var(--gn-testo-2); }
.gn-prosa details[open] > summary::after { content: "\2212"; }
.gn-prosa details > :not(summary) { color: var(--gn-testo-2); }
.gn-prosa details > :last-child:not(summary) { margin-bottom: 18px; }

/* modulo di contatto (Contact Form 7, se il negozio lo usa: il tema non lo porta con sé) */
.wpcf7 form { display: grid; gap: 18px; max-width: 560px; margin: 0 0 2em; }
.wpcf7 form p { margin: 0; }
.wpcf7 label { display: block; font-weight: 600; font-size: 15px; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; }
.wpcf7 input[type="file"] { max-width: 100%; font-size: 15px; font-weight: 400; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.wpcf7 .wpcf7-list-item input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gn-primario); }
.wpcf7 input[type="submit"] { min-height: 48px; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--gn-r-btn); background: var(--gn-accento); color: var(--gn-su-accento); font-weight: 700; font-size: 16px; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; }
.wpcf7 input[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--gn-ombra); }
.wpcf7 input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #b3261e; }
.wpcf7 .wpcf7-not-valid { border-color: #b3261e; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 16px; border: 1.5px solid var(--gn-bordo-forte); border-radius: var(--gn-r-btn); font-weight: 600; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #1a7f37; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #b3261e; }

.wp-block-image img { border-radius: var(--gn-r-foto); }
.wp-element-button, .wp-block-button__link { min-height: 48px; padding: 12px 24px; font-weight: 700; }

/* ricerca */
.gn-ricerca { display: flex; gap: 8px; width: 100%; max-width: 560px; }
.gn-ricerca input[type="search"] { flex: 1; min-width: 0; }
.gn-ricerca .gn-btn { padding: 10px 18px; flex: none; }

/* 4. BARRA E HEADER --------------------------------------------------------- */
.gn-barra { background: var(--gn-accento); color: var(--gn-su-accento); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.35; }
.gn-barra .gn-wrap { padding-top: 8px; padding-bottom: 8px; }

.gn-header { position: sticky; top: 0; z-index: 50; background: var(--gn-h-sfondo); color: var(--gn-h-testo); border-bottom: 1px solid var(--gn-h-riga); }
.admin-bar .gn-header { top: 46px; }
/* sotto i 600 px la barra nera di WordPress (solo per chi è collegato) scorre via con la pagina: la barra
   del negozio si attacca al bordo, sennò resta ferma 46 px più in basso */
@media (max-width: 600px) { .admin-bar .gn-header { top: 0; } }
.gn-header-in { display: flex; align-items: center; gap: 8px; min-height: 64px; }

.gn-logo { display: flex; align-items: center; min-width: 0; margin-right: auto; color: inherit; text-decoration: none; }
.gn-logo-img { display: block; width: auto; max-height: 38px; max-width: 150px; object-fit: contain; }
.gn-logo-testo { font-family: var(--gn-font-titoli); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gn-burger, .gn-icona-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--gn-r-btn); background: transparent; color: inherit; position: relative; flex: none; }
.gn-icona-link:hover, .gn-burger:hover { background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; }
.gn-burger .gn-icona-chiudi { display: none; }
.gn-burger[aria-expanded="true"] .gn-icona-menu { display: none; }
.gn-burger[aria-expanded="true"] .gn-icona-chiudi { display: block; }

.gn-azioni { display: flex; align-items: center; gap: 2px; flex: none; }

/* pallino col numero dei pezzi nel carrello */
.gn-carrello-conta { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--gn-accento); color: var(--gn-su-accento); font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; }
.gn-carrello-conta[data-conta="0"] { display: none; }

/* ricerca a tendina (funziona anche senza JavaScript: è un <details>) */
.gn-cerca > summary { list-style: none; cursor: pointer; }
.gn-cerca > summary::-webkit-details-marker { display: none; }
.gn-cerca-pannello { position: absolute; left: 0; right: 0; top: 100%; padding: 16px var(--gn-lato); background: var(--gn-h-sfondo); border-bottom: 1px solid var(--gn-h-riga); box-shadow: 0 16px 24px color-mix(in srgb, var(--gn-primario) 12%, transparent); display: flex; justify-content: center; }
.gn-cerca-pannello .gn-ricerca input[type="search"] { background: var(--gn-sfondo); color: var(--gn-testo); }
.gn-cerca[open] > summary { background: color-mix(in srgb, currentColor 10%, transparent); }

/* menu principale: sul telefono è un pannello che si apre col burger */
.gn-menu { list-style: none; margin: 0; padding: 0; }
.gn-menu a { color: inherit; text-decoration: none; font-weight: 600; }
.gn-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; }

.gn-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); overflow-y: auto; padding: 8px var(--gn-lato) 20px; background: var(--gn-h-sfondo); border-bottom: 1px solid var(--gn-h-riga); box-shadow: 0 16px 24px color-mix(in srgb, var(--gn-primario) 12%, transparent); }
.gn-nav.is-aperto { display: block; }
.gn-nav .gn-menu a { display: block; padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--gn-h-riga); }
.gn-nav .current-menu-item > a, .gn-nav .current-menu-ancestor > a { color: inherit; box-shadow: inset 4px 0 0 var(--gn-accento); padding-left: 12px; }
/* senza JavaScript il menu resta aperto sotto l'header, così si naviga lo stesso */
html:not(.gn-js) .gn-nav { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 8px; width: 100%; }
html:not(.gn-js) .gn-header-in { flex-wrap: wrap; }
html:not(.gn-js) .gn-burger { display: none; }

/* 5. FOOTER ---------------------------------------------------------------- */
.gn-footer { background: var(--gn-primario); color: var(--gn-su-primario-2); font-size: 15px; line-height: 1.6; margin-top: var(--gn-sez); }
.gn-footer a { color: var(--gn-su-primario); text-decoration: none; }
.gn-footer a:hover { text-decoration: underline; }
.gn-footer-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; padding-bottom: 32px; }
.gn-footer-h { font-family: var(--gn-font-titoli); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gn-su-primario); margin: 0 0 14px; }
.gn-dati { display: flex; flex-direction: column; gap: 3px; }
.gn-dati-nome { color: var(--gn-su-primario); }
.gn-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gn-footer-menu a { display: inline-block; padding: 4px 0; }
.gn-social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 6px; }
.gn-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid var(--gn-riga-primario); border-radius: 999px; }
.gn-social a:hover { border-color: var(--gn-su-primario); }
.gn-footer-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--gn-riga-primario); font-size: 13px; }
.gn-firma a { text-decoration: underline; }
.gn-home .gn-footer, .gn-pagina-woo .gn-footer { margin-top: 0; }

/* 6. HOME ------------------------------------------------------------------ */
.gn-sez { padding-top: var(--gn-sez); padding-bottom: var(--gn-sez); }
.gn-sez-testata { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.gn-sez-prodotti { background: var(--gn-chiaro); }

/* prima schermata: fondo primario o di accento (gn_css_variabili() calcola il colore del testo) */
.gn-hero { position: relative; overflow: hidden; background: var(--gn-hero-sfondo, var(--gn-primario)); color: var(--gn-hero-testo, var(--gn-su-primario)); }
.gn-hero-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 44px; align-items: center; }
.gn-hero-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gn-hero-testo > * { margin: 0; }
.gn-hero-h1 { font-size: clamp(32px, 8vw, 58px); line-height: 1.05; font-weight: 800; text-wrap: balance; }
.gn-hero-p { font-size: 17px; line-height: 1.55; color: var(--gn-hero-testo-2, var(--gn-su-primario-2)); max-width: 540px; font-weight: 500; }
.gn-hero-fig { aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.gn-hero-etichetta { padding: 5px 12px; border-radius: 4px; background: var(--gn-hero-testo); color: var(--gn-hero-sfondo); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.gn-hero-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.gn-hero .gn-btn-bordo { color: var(--gn-hero-testo); }
.gn-hero .gn-btn-bordo:hover { background: var(--gn-hero-testo); color: var(--gn-hero-sfondo); border-color: var(--gn-hero-testo); }
.gn-hero-decori .gn-hero-griglia { padding-bottom: 12px; }
.gn-hero-onda { display: block; width: 100%; height: clamp(28px, 5vw, 72px); margin-top: -1px; fill: var(--gn-sfondo); }

/* prodotto animato (gn_hero_scena): entra da destra, si ferma, cambia grafica. Le classi le mette il JS:
   senza JS (o se il JS non parte entro 5 s) il prodotto è fermo al suo posto, con la prima grafica. */
.gn-hero-scena { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gn-veicolo { position: relative; width: 100%; }
.gn-veicolo img { position: absolute; display: block; max-width: none; height: auto; }
.gn-veicolo .gn-veicolo-base { position: relative; width: 100%; }
.gn-veicolo-ombra { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)); }
.gn-strati { position: absolute; }
.gn-strati img { inset: 0; width: 100%; height: 100%; visibility: hidden; }
.gn-strati img.is-sotto { visibility: visible; z-index: 1; }
.gn-strati img.is-sopra { visibility: visible; z-index: 2; animation: gn-stampa .75s cubic-bezier(.65, 0, .35, 1) both; }
.gn-ruota { z-index: 3; }
.gn-scena-piede { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; min-height: 44px; padding: 0 52px; text-align: center; }
.gn-scena-nome { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-family: var(--gn-font-titoli); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid currentColor; padding: 4px 0 2px; }
.gn-scena-nome:hover { color: inherit; }
.gn-scena-pausa { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--gn-primario); color: var(--gn-su-primario, #fff); font-size: 0; cursor: pointer; box-shadow: none; }
.gn-scena-piede .gn-scena-pausa { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.gn-scena-pausa:hover { opacity: .85; }
/* icona: due barre (Pausa) o triangolo (Riprendi, aria-pressed="true"); la scritta del bottone la leggono i lettori di schermo */
.gn-scena-pausa::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 13px; border-radius: 1px; background: currentColor; box-shadow: 7px 0 0 currentColor; translate: -5.5px -6.5px; }
.gn-scena-pausa[aria-pressed="true"]::before { width: 0; height: 0; background: none; box-shadow: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; border-radius: 0; translate: -4px -7px; }

html.gn-js .gn-hero-scena:not(.gn-via):not(.gn-ferma) .gn-veicolo { visibility: hidden; animation: gn-riserva 0s 5s forwards; }
.gn-via .gn-veicolo { animation: gn-entra 2.4s cubic-bezier(.2, .7, .25, 1) both, gn-frena .9s 1.55s ease-out both; transform-origin: 30% 100%; }
.gn-via .gn-ruota { animation: gn-rotola 2.4s cubic-bezier(.2, .7, .25, 1) both; }
@keyframes gn-riserva { to { visibility: visible; } }
@keyframes gn-entra { from { translate: var(--gn-da, 100vw) 0; } to { translate: 0 0; } }
@keyframes gn-rotola { from { rotate: var(--gn-giri, 1080deg); } to { rotate: 0deg; } }
@keyframes gn-frena { 0% { rotate: 0deg; } 35% { rotate: -1.1deg; } 70% { rotate: .3deg; } 100% { rotate: 0deg; } }
@keyframes gn-stampa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* collezione in evidenza: nastro di foto che scorre da solo. La lista è doppia e si sposta di metà:
   il padding al posto del gap fa cadere il -50% esatto sulla stessa card, senza salto. Si ferma col mouse,
   con la tastiera dentro, col bottone (is-fermo) e con "riduci animazioni" (lì scorre a mano). */
.gn-sez-collezione { padding-bottom: 0; }
.gn-sez-intro { display: flex; flex-direction: column; gap: 6px; }
.gn-sez-intro > * { margin: 0; }
.gn-sez-etichetta { align-self: flex-start; padding: 4px 10px; border-radius: 4px; background: var(--gn-accento); color: var(--gn-su-accento, var(--gn-su-primario)); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.gn-sez-p { font-size: 16px; color: var(--gn-testo-2); max-width: 560px; }
.gn-nastro { position: relative; overflow: hidden; padding-bottom: var(--gn-sez); }
.gn-nastro-lista { list-style: none; margin: 0; padding: 0 0 8px; display: flex; width: max-content; animation: gn-nastro var(--gn-nastro-durata, 60s) linear infinite; will-change: transform; }
.gn-nastro-lista > li { flex: 0 0 auto; width: min(78vw, 400px); padding-right: 16px; }
.gn-nastro:hover .gn-nastro-lista, .gn-nastro:focus-within .gn-nastro-lista, .gn-nastro.is-fermo .gn-nastro-lista { animation-play-state: paused; }
.gn-card-nastro { gap: 4px; }
.gn-card-nastro .gn-fig { aspect-ratio: 3 / 2; margin-bottom: 6px; } /* le foto dei kit sono 3:2 */
.gn-card-nastro-nome { font-family: var(--gn-font-titoli); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.gn-card-nastro-prezzo { font-size: 15px; color: var(--gn-testo-2); }
.gn-card-nastro-prezzo ins { text-decoration: none; }
.gn-nastro-pausa { position: absolute; right: var(--gn-lato); bottom: calc(var(--gn-sez) - 44px - 4px); background: var(--gn-sfondo); color: var(--gn-testo); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
@keyframes gn-nastro { to { transform: translateX(-50%); } }

/* categorie */
.gn-griglia-cat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.gn-card-cat { display: flex; flex-direction: column; gap: 4px; color: var(--gn-testo); text-decoration: none; }
.gn-card-cat .gn-fig { aspect-ratio: 4 / 3; margin-bottom: 8px; }
.gn-card-cat-nome { font-family: var(--gn-font-titoli); font-weight: 700; font-size: 17px; line-height: 1.25; }
.gn-card-cat-conta { font-size: 14px; color: var(--gn-testo-2); }
.gn-card-cat:hover { color: var(--gn-testo); }
.gn-card-cat:hover .gn-fig { box-shadow: var(--gn-ombra-forte); }
.gn-card-cat:hover .gn-fig img { transform: scale(1.04); }

/* punti di forza */
.gn-fiducia { border-top: 1px solid var(--gn-bordo); border-bottom: 1px solid var(--gn-bordo); }
.gn-fiducia-lista { list-style: none; margin: 0; padding: 28px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gn-fiducia-voce { display: flex; gap: 14px; align-items: flex-start; }
.gn-fiducia-voce .gn-icona { flex: none; color: var(--gn-primario); padding: 8px; width: 48px; height: 48px; border-radius: 999px; background: color-mix(in srgb, var(--gn-accento) 22%, var(--gn-sfondo)); }
.gn-fiducia-voce strong { display: block; font-family: var(--gn-font-titoli); font-size: 17px; }
.gn-fiducia-voce span { display: block; font-size: 15px; color: var(--gn-testo-2); line-height: 1.45; }

/* 7. PAGINE ---------------------------------------------------------------- */
.gn-intestazione { background: var(--gn-chiaro); padding: 32px 0 28px; border-bottom: 1px solid var(--gn-bordo); }
.gn-intestazione-testo { margin-top: 10px; color: var(--gn-testo-2); max-width: 720px; }
.gn-intestazione-testo > :last-child { margin-bottom: 0; }
.gn-sez-pagina { padding-top: 32px; padding-bottom: var(--gn-sez); }
.gn-pagina-foto { margin-bottom: 28px; }

.gn-card-link { display: flex; flex-direction: column; gap: 8px; color: var(--gn-testo); text-decoration: none; }
.gn-card-link:hover { color: var(--gn-testo); }
.gn-card-link:hover .gn-fig img { transform: scale(1.04); }
.gn-card-articolo .gn-fig { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.gn-card-meta { font-size: 13px; color: var(--gn-testo-2); }
.gn-card-titolo { font-size: 20px; margin: 0; }
.gn-card-p { font-size: 15px; color: var(--gn-testo-2); margin: 0; }

.gn-paginazione { margin-top: 40px; }
.gn-paginazione .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gn-paginazione .page-numbers { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px; border: 1.5px solid var(--gn-bordo); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--gn-testo); }
.gn-paginazione .page-numbers.current { background: var(--gn-primario); border-color: var(--gn-primario); color: var(--gn-su-primario); }

.gn-ricerca-in-pagina { margin-bottom: 32px; }
.gn-404 { display: flex; flex-direction: column; gap: 24px; }
.gn-404-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* 8. MOVIMENTO -------------------------------------------------------------
   Comparsa leggera allo scorrimento (solo in home). Le classi le mette il JS: senza JS resta tutto visibile.
   Con "riduci animazioni" del sistema non si muove niente. */
.gn-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1); transition-delay: var(--gn-d, 0ms); }
.gn-reveal.gn-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .gn-reveal { opacity: 1; transform: none; }
  .gn-veicolo { visibility: visible !important; animation: none !important; }
  .gn-btn:hover, .gn-card-cat:hover .gn-fig img, .gn-card-link:hover .gn-fig img { transform: none; }
  /* nastro della collezione: fermo, una sola copia, si scorre col dito o con la rotella */
  .gn-nastro { overflow-x: auto; scroll-snap-type: x proximity; }
  .gn-nastro-lista { animation: none !important; padding-left: var(--gn-lato); }
  .gn-nastro-lista > li { scroll-snap-align: start; }
  .gn-nastro-doppio, .gn-nastro-pausa { display: none; }
}

/* SCHERMI PIÙ LARGHI ------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --gn-lato: 24px; }
  .gn-griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gn-griglia-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (min-width: 783px) {
  .admin-bar .gn-header { top: 32px; }
}
@media (min-width: 800px) {
  :root { --gn-sez: 72px; --gn-lato: 32px; }
  .gn-fiducia-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 36px 0; }
  .gn-footer-griglia { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-top: 56px; }
  .gn-hero-con-foto .gn-hero-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .gn-hero-griglia { padding-top: 64px; padding-bottom: 72px; min-height: 480px; }
  .gn-hero-p { font-size: 19px; }
  .gn-hero-con-foto .gn-hero-griglia:has(.gn-hero-scena) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .gn-intestazione { padding: 48px 0 40px; }
  .gn-sez-pagina { padding-top: 48px; }
  .gn-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  :root { --gn-lato: 48px; }
  .gn-griglia-cat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gn-header-in { min-height: 76px; gap: 28px; }
  .gn-logo { margin-right: 0; }
  .gn-logo-img { max-height: 48px; max-width: 220px; }
  .gn-burger { display: none; }
  .gn-nav, html:not(.gn-js) .gn-nav { display: block; position: static; flex: 1; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; width: auto; }
  html:not(.gn-js) .gn-header-in { flex-wrap: nowrap; }
  .gn-nav > .gn-menu { display: flex; flex-wrap: wrap; gap: 4px 26px; }
  .gn-nav .gn-menu a { padding: 8px 0; font-size: 15px; border-bottom: 2px solid transparent; }
  .gn-nav .gn-menu > li > a:hover { border-bottom-color: currentColor; }
  .gn-nav .current-menu-item > a, .gn-nav .current-menu-ancestor > a { box-shadow: none; padding-left: 0; border-bottom-color: var(--gn-accento); }
  /* sottomenu a tendina (al passaggio del mouse e col tasto Tab) */
  .gn-nav .gn-menu > li { position: relative; }
  .gn-nav .sub-menu { display: none; position: absolute; left: -16px; top: 100%; min-width: 220px; padding: 8px 16px; background: var(--gn-h-sfondo); border: 1px solid var(--gn-h-riga); border-radius: var(--gn-r-btn); box-shadow: var(--gn-ombra); z-index: 5; }
  .gn-nav li:hover > .sub-menu, .gn-nav li:focus-within > .sub-menu { display: block; }
  .gn-nav .sub-menu a { border-bottom: 0; padding: 8px 0; }
  .gn-cerca-pannello { left: auto; right: var(--gn-lato); width: 460px; top: calc(100% - 6px); border: 1px solid var(--gn-h-riga); border-radius: var(--gn-r-box); }
}

/* pagine di WooCommerce (carrello, cassa, account) aperte con page.php: larghe come il negozio */
.gn-contenuto-largo { max-width: var(--gn-larghezza); }
.gn-contenuto-largo > .alignwide, .gn-contenuto-largo > .alignfull { max-width: none; margin-left: 0; margin-right: 0; }