/*
Theme Name: Termoidraulica 2.0 — Negozio
Theme URI: https://termoidraulica.dgitalystage.net/
Template: forgepress-termoidraulica-2-0
Author: Dgitaly
Description: Tema figlio di Termoidraulica 2.0. Dal 2026-09-25 possiede le superfici del negozio (testata, pie' di pagina, home, categorie, scheda prodotto) disegnate su CORREZIONI.pdf e sulle bozze del cliente. Il tema PADRE resta generato da ForgePress e non si tocca a mano.
Version: 0.2.0
Requires at least: 6.9
Requires PHP: 8.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: termoidraulica-shop
*/

/* ==========================================================================
   PALETTE — marchio 2026 (INDICAZIONI SITO.pdf: blu #003EA1, arancione #FE5900)
   Ogni valore porta il rapporto MISURATO delle coppie in cui e' usato.
   ⚠ #FE5900 fa 3,16 col bianco in entrambi i versi: e' SUPERFICIE (campiture, icone, badge senza
   testo piccolo). Il cliente chiede «bottone arancione con scritta bianca» (punto 14): per il testo
   bianco si usa --accent-btn #CC4600 (4,73), ancora arancione a vista e sopra 4,5 con margine.
   ========================================================================== */
:root {
  --brand:       #003EA1;  /* testo su paper 9,53 · bianco sopra 9,53 */
  --brand-dark:  #002A6E;  /* barra alta e pie': bianco sopra 13,49 */
  --brand-mid:   #1B5FC4;  /* bianco sopra 6,03 */
  --brand-tint:  #EEF3FB;  /* fondi tenui della testata e dei riquadri */
  --accent:      #FE5900;  /* SUPERFICIE: mai testo piccolo, ne' sopra ne' sotto */
  --accent-btn:  #CC4600;  /* bottone con testo bianco: 4,73 */
  --accent-btn-h:#B03C00;  /* hover: 5,94 */
  --accent-ink:  #C04300;  /* arancione come TESTO su chiaro: 5,19 su paper */
  --accent-lt:   #FFA466;  /* arancione come TESTO sul pie': 4,88 sul capo CHIARO del gradiente (#003EA1), 6,91 sul profondo */
  --accent-tint: #FFF0E6;
  --on-dark:     #FFFFFF;
  --on-dark-muted: #CBDCF5; /* 9,70 sul blu profondo */
  --ok:          #1E8E3E;  /* pallino «pronta consegna» */
  --warn:        #F2B400;  /* pallino «su richiesta» */
  --ko:          #D93025;  /* pallino «non disponibile» */

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --larghezza: 1320px;
  --gutter: clamp(16px, 3vw, 32px);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --ombra-1: 0 1px 2px rgba(16, 32, 47, .06), 0 2px 8px rgba(16, 32, 47, .06);
  --ombra-2: 0 8px 28px rgba(16, 32, 47, .14);
  --testata-fissa-h: 76px;
}

body { font-family: var(--font-body); }

.contenitore {
  inline-size: 100%;
  max-inline-size: calc(var(--larghezza) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.screen-reader-text {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.icona { inline-size: 1.25em; block-size: 1.25em; flex: 0 0 auto; stroke-width: 1.9; }

/* ==========================================================================
   TESTATA — punto 2 e bozza_header.png
   ⚠ Il `sticky` della riga principale (punto 10) si misura contro il BLOCCO CONTENITORE. Il template
   del padre avvolge la testata in `div.wp-block-template-part`, alto quanto la testata: lo sticky
   finirebbe appena la testata esce dallo schermo. `display: contents` toglie quel contenitore dal
   layout, e il blocco contenitore diventa `.wp-site-blocks`, cioe' la pagina intera.
   ========================================================================== */
.wp-block-template-part:has(> .testata) { display: contents; }
.testata { display: contents; }

.barra-alta { background: var(--brand-dark); color: var(--on-dark); font-size: .8125rem; }
.barra-alta__riga { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-block-size: 36px; }
.barra-alta__voce { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.barra-alta__voce .icona { inline-size: 16px; block-size: 16px; color: var(--accent-lt); }
.barra-alta__voce strong { font-weight: 600; }
a.barra-alta__voce:hover span { text-decoration: underline; }

.testata__principale {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60;
  background: #fff; border-block-end: 1px solid #E3E9F2;
  transition: box-shadow .2s ease;
}
.testata__principale[data-scorsa] { box-shadow: var(--ombra-2); }
.testata__riga { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); min-block-size: var(--testata-fissa-h); }

.marchio { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
/* ⚠ Due classi, non una: sulle pagine del negozio `.woocommerce img { height: auto }` (0,1,1) batte una
   regola a classe singola, e il simbolo esce alla sua misura intrinseca (128px). */
.marchio .marchio__simbolo { block-size: 46px; inline-size: auto; }
.marchio .marchio__scritta { block-size: 30px; inline-size: auto; }
.marchio:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 4px; }

.cerca { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; min-inline-size: 0; max-inline-size: 720px; }
.cerca__lente { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; translate: 0 -50%; color: #5A6B7D; pointer-events: none; }
.cerca__campo {
  flex: 1 1 auto; min-inline-size: 0; block-size: 48px; box-sizing: border-box;
  padding: 0 14px 0 44px; font: 400 1rem/1 var(--font-body); color: #10202F;
  background: #fff; border: 1.5px solid #C9D5E4; border-inline-end: 0; border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.cerca__campo::placeholder { color: #5A6B7D; }
.cerca__campo:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 62, 161, .18); }
.cerca__invia {
  inline-size: 56px; block-size: 48px; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: #fff; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cerca__invia:hover { background: var(--accent-btn); }
.cerca__invia:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cerca__invia .icona { inline-size: 22px; block-size: 22px; }

.testata__azioni { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); flex: 0 0 auto; }
.testata__azione { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; }
.testata__azione .icona { inline-size: 26px; block-size: 26px; }
.testata__azione:hover strong { text-decoration: underline; }
.testata__azione:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.testata__etichetta { display: flex; flex-direction: column; line-height: 1.15; }
.testata__etichetta strong { font-weight: 600; font-size: .9375rem; }
.testata__etichetta small { font-size: .75rem; color: #46586B; }
.testata__icona { position: relative; display: inline-flex; }
.testata__badge {
  position: absolute; inset-block-start: -8px; inset-inline-end: -10px;
  min-inline-size: 20px; block-size: 20px; padding-inline: 5px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-btn); color: #fff; font: 700 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.testata__badge[data-vuoto] { background: #E3E9F2; color: #46586B; }
/* Il cuore mostra il numero solo quando c'e' qualcosa: la bozza non ha il contatore sui preferiti. */
.testata__badge--preferiti[data-vuoto] { display: none; }

.testata__menu {
  display: none; inline-size: 44px; block-size: 44px; place-items: center; flex: 0 0 auto;
  background: transparent; color: var(--brand); border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.testata__menu .icona { inline-size: 28px; block-size: 28px; }
.testata__menu:focus-visible { outline: 3px solid var(--brand); }
/* Scorrendo, la barra delle categorie esce di scena: il suo «Tutte le categorie» ricompare come
   hamburger nella riga fissa, cosi' il menu resta raggiungibile da ogni punto della pagina. */
.testata__principale[data-scorsa] .testata__menu { display: inline-grid; }

.barra-categorie { background: var(--brand); color: #fff; position: relative; z-index: 50; }
.barra-categorie__riga { display: flex; align-items: center; gap: 8px; min-block-size: 52px; }
.barra-categorie__tutte, .barra-categorie__offerte {
  display: inline-flex; align-items: center; gap: 10px; block-size: 40px; padding-inline: 16px;
  background: var(--accent-btn); color: #fff; border: 0; border-radius: var(--r-sm);
  font: 600 .9375rem/1 var(--font-display); text-decoration: none; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.barra-categorie__tutte:hover, .barra-categorie__offerte:hover { background: var(--accent-btn-h); }
.barra-categorie__tutte:focus-visible, .barra-categorie__offerte:focus-visible,
.barra-categorie__voci a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.barra-categorie__offerte { margin-inline-start: auto; }
.barra-categorie__voci { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; margin: 0 0 0 12px; padding: 0; list-style: none; min-inline-size: 0; overflow: hidden; }
.barra-categorie__voci a {
  display: block; padding: 10px 12px; color: #fff; text-decoration: none; white-space: nowrap;
  font: 500 .9375rem/1 var(--font-display); border-radius: 6px;
}
.barra-categorie__voci a:hover { background: rgba(255, 255, 255, .14); }
.barra-categorie__separatore { inline-size: 1px; block-size: 22px; background: rgba(255, 255, 255, .45); margin-inline: 10px; }
.barra-categorie__pagina a { text-transform: uppercase; letter-spacing: .02em; }

/* --- Il menu di tutte le categorie: pannello sotto la barra (desktop), cassetto (telefono) --- */
.menu-categorie {
  /* z-index sopra la barra «Chiama/Preventivo» e il bottone WhatsApp del padre, che sul telefono
     coprivano il fondo del cassetto (misurato sullo staging a 390). */
  position: fixed; inset-inline: 0; inset-block-start: var(--menu-top, 164px); z-index: 1000;
  max-block-size: calc(100vh - var(--menu-top, 164px)); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; box-shadow: var(--ombra-2); border-block-start: 3px solid var(--accent);
}
.menu-categorie[hidden] { display: none; }
.menu-categorie__testa { display: none; }
.menu-categorie__griglia { columns: 4 220px; column-gap: 32px; padding-block: 28px 32px; }
/* Colonne a FLUSSO, non griglia: un reparto con 9 figli accanto a uno vuoto lascerebbe un buco alto
   quanto il piu' lungo della riga. `break-inside: avoid` tiene ogni gruppo intero in una colonna. */
.menu-categorie__gruppo { break-inside: avoid; margin-block-end: 26px; }
.menu-categorie__titolo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-categorie__titolo a { font: 700 1.0625rem/1.2 var(--font-display); color: var(--brand); text-decoration: none; }
.menu-categorie__titolo a:hover { text-decoration: underline; }
.menu-categorie__espandi { display: none; }
.menu-categorie__gruppo ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.menu-categorie__gruppo li a { color: #26394C; text-decoration: none; font-size: .9375rem; }
.menu-categorie__gruppo li a:hover { color: var(--accent-ink); text-decoration: underline; }
.menu-categorie__pagine { display: none; }
.menu-categorie__velo { position: fixed; inset: 0; z-index: 999; background: rgba(0, 20, 50, .45); }
.menu-categorie__velo[hidden] { display: none; }
.menu-categorie a:focus-visible, .menu-categorie button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- Larghezze intermedie: la barra delle categorie non entra piu' su una riga --- */
@media (max-width: 1180px) {
  .testata__etichetta small { display: none; }
  .barra-categorie__voci a { padding-inline: 9px; font-size: .875rem; }
}
@media (max-width: 1024px) {
  .testata__etichetta { display: none; }
}

/* --- Telefono e tablet stretto: hamburger + cassetto; la ricerca scende a tutta riga --- */
@media (max-width: 900px) {
  :root { --testata-fissa-h: 64px; }
  .barra-alta__riga { justify-content: center; gap: 16px; min-block-size: 32px; font-size: .75rem; }
  .barra-alta__spedizioni { display: none; }
  .testata__riga { flex-wrap: wrap; gap: 8px 12px; padding-block: 8px 10px; min-block-size: 0; }
  .testata__menu { display: inline-grid; order: 0; margin-inline-start: -8px; }
  .marchio { order: 1; }
  .marchio .marchio__simbolo { block-size: 36px; }
  .marchio .marchio__scritta { block-size: 22px; }
  .testata__azioni { order: 2; margin-inline-start: auto; gap: 14px; }
  .testata__azione--account { display: none; }
  .cerca { order: 3; flex: 1 0 100%; max-inline-size: none; }
  .cerca__campo, .cerca__invia { block-size: 44px; }
  .barra-categorie { display: none; }

  .menu-categorie {
    inset: 0 auto 0 0; inset-block-start: 0; inline-size: min(88vw, 400px); max-block-size: none; block-size: 100dvh;
    border-block-start: 0; box-shadow: var(--ombra-2);
  }
  .menu-categorie__testa {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--gutter); border-block-end: 1px solid #E3E9F2; position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .menu-categorie__chiudi { inline-size: 44px; block-size: 44px; display: grid; place-items: center; background: transparent; border: 0; color: var(--brand); cursor: pointer; }
  .menu-categorie__chiudi .icona { inline-size: 26px; block-size: 26px; }
  .menu-categorie__griglia { columns: auto; display: block; padding-block: 8px 24px; }
  .menu-categorie__gruppo { margin-block-end: 0; }
  .menu-categorie__gruppo { border-block-end: 1px solid #E3E9F2; }
  .menu-categorie__titolo a { display: block; flex: 1 1 auto; padding-block: 14px; }
  .menu-categorie__espandi {
    display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: 0 0 auto;
    background: transparent; border: 0; color: var(--brand); cursor: pointer;
  }
  .menu-categorie__espandi .icona { transition: rotate .2s ease; }
  .menu-categorie__espandi[aria-expanded="true"] .icona { rotate: 180deg; }
  .menu-categorie__gruppo ul { display: none; margin: 0 0 12px; padding-inline-start: 12px; gap: 0; }
  .menu-categorie__gruppo ul[data-aperto] { display: grid; }
  .menu-categorie__gruppo li a { display: block; padding-block: 10px; }
  .menu-categorie__pagine { display: grid; margin: 16px 0 0; padding: 0; list-style: none; gap: 4px; }
  .menu-categorie__pagine a { display: flex; align-items: center; gap: 8px; padding-block: 12px; font: 600 1rem/1.2 var(--font-display); color: var(--brand); text-decoration: none; }
  .menu-categorie__offerte { color: var(--accent-ink) !important; }
}
@media (max-width: 420px) {
  .barra-alta__orari { display: none; }
  /* A 390 hamburger, marchio, cuore e carrello devono stare su UNA riga: 36 + 225 + 58 + gap = 343 su 358. */
  .marchio { gap: 7px; }
  .marchio .marchio__simbolo { block-size: 30px; }
  .marchio .marchio__scritta { block-size: 18px; }
  .testata__azioni { gap: 10px; }
  .testata__azione .icona { inline-size: 24px; block-size: 24px; }
}

/* ==========================================================================
   PIE' DI PAGINA — punto 15 e bozza_footer.png
   ========================================================================== */
.piede { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 70%); color: var(--on-dark); margin-block-start: 64px; }
.piede a { color: var(--on-dark); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 3px; }
.piede__griglia {
  /* Prima e ultima colonna piu' larghe: la prima porta marchio e tre servizi, l'ultima l'e-mail (37 caratteri
     senza punti di a capo); le tre centrali hanno voci brevi. */
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.65fr);
  gap: 28px; padding-block: 56px 40px;
}
.piede__col + .piede__col { border-inline-start: 1px solid rgba(255, 255, 255, .16); padding-inline-start: 28px; }
/* ⚠ Il marchio del pie' deve stare DENTRO la sua colonna: a scritta fissa (26px = 276px di larghezza) superava
   la barretta di 7px a 1440 e di 31px a 1181-1280. La scritta si adatta alla colonna (mai oltre i 276px
   originali) e la colonna tiene a destra lo stesso respiro (28px) che le altre hanno a sinistra. */
.piede__col--marchio { padding-inline-end: 28px; min-inline-size: 0; }
.marchio.marchio--piede { display: flex; gap: 12px; max-inline-size: 100%; } /* a blocco: in inline-flex il 100% della scritta non ha una larghezza di riferimento */
.marchio.marchio--piede .marchio__simbolo { block-size: 64px; flex: 0 0 auto; }
.marchio.marchio--piede .marchio__scritta { block-size: auto; inline-size: 100%; max-inline-size: 276px; min-inline-size: 0; flex: 1 1 auto; }
.piede__descrizione { margin: 20px 0 24px; font-size: .9375rem; line-height: 1.6; color: var(--on-dark-muted); }
.piede__punti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 20px 0 0; list-style: none; border-block-start: 1px solid rgba(255, 255, 255, .16); }
.piede__punti li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-inline: 6px; }
.piede__punti li + li { border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.piede__punti .icona { inline-size: 30px; block-size: 30px; color: var(--accent-lt); margin-block-end: 4px; }
.piede__punti strong { font-weight: 600; font-size: .875rem; }
.piede__punti small { font-size: .75rem; color: var(--on-dark-muted); }
.piede__titolo { margin: 0 0 18px; font: 700 .875rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lt); }
.piede__titolo--orari { margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .16); }
.piede__voci { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: .9375rem; }
.piede__recapiti { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: .9375rem; }
.piede__recapiti li, .piede__orari { display: flex; gap: 12px; align-items: flex-start; }
.piede__recapiti .icona, .piede__orari .icona { inline-size: 20px; block-size: 20px; margin-block-start: 2px; color: var(--on-dark-muted); }
.piede__recapiti a { overflow-wrap: anywhere; }
.piede__recapiti a[href^="mailto"] { font-size: .875rem; }
.piede__orari dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .9375rem; }
.piede__orari dt { font-weight: 600; }
.piede__orari dd { margin: 0; color: var(--on-dark-muted); }

.piede__fiducia {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px 0;
  padding-block: 24px; border-block-start: 1px solid rgba(255, 255, 255, .16);
}
.piede__garanzia { display: flex; align-items: center; gap: 14px; padding-inline: 0 28px; margin-inline-end: 28px; border-inline-end: 1px solid rgba(255, 255, 255, .16); }
.piede__garanzia .icona { inline-size: 34px; block-size: 34px; color: var(--accent-lt); }
.piede__garanzia span { display: flex; flex-direction: column; line-height: 1.3; }
.piede__garanzia strong { font-weight: 600; font-size: .9375rem; }
.piede__garanzia small { font-size: .8125rem; color: var(--on-dark-muted); }
.piede__pagamenti { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.piede__pagamento {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-inline-size: 64px; block-size: 40px; padding-inline: 12px; box-sizing: border-box;
  background: #fff; color: #10202F; border-radius: 6px; font: 600 .875rem/1 var(--font-display);
}
.piede__pagamento svg { block-size: 24px; inline-size: auto; max-inline-size: 48px; }
.piede__pagamento .icona { color: var(--brand); }

.piede__legale { background: rgba(0, 12, 40, .35); }
.piede__legale-riga { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; min-block-size: 64px; font-size: .875rem; }
.piede__legale-riga p { margin: 0; }
.piede__legale-riga ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.piede__powered { display: inline-flex; align-items: center; gap: 6px; }
.piede__powered img { inline-size: 20px; block-size: 20px; }

/* Il pie' passa a 3 colonne sotto i 1340px: fra 1181 e 1339 le cinque colonne spezzavano l'e-mail e le voci. */
@media (max-width: 1339px) {
  .piede__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piede__col--marchio { padding-inline-end: 0; }
  .piede__col--marchio { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px 32px; align-items: start; }
  .piede__col--marchio .piede__descrizione { margin: 0; }
  .piede__col--marchio .piede__punti { grid-column: 1 / -1; }
  .piede__col--contatti { grid-column: 1 / -1; border-inline-start: 0 !important; padding-inline-start: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .piede__col--contatti .piede__titolo--orari { margin-block-start: 0; padding-block-start: 0; border: 0; grid-column: 2; grid-row: 1; }
  .piede__col--contatti .piede__orari { grid-column: 2; grid-row: 2; }
  .piede__col--marchio + .piede__col { border-inline-start: 0; padding-inline-start: 0; }
  .piede__pagamenti { margin-inline-start: 0; }
}
@media (max-width: 700px) {
  .piede__griglia { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 28px; }
  .piede__col--marchio { display: block; }
  .piede__col--marchio .piede__descrizione { margin: 16px 0 20px; }
  .piede__col + .piede__col { border-inline-start: 0; padding-inline-start: 0; }
  .piede__col--contatti { display: block; }
  .piede__col--contatti .piede__titolo--orari { margin-block-start: 24px; }
  .piede__garanzia { flex: 1 1 100%; border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
  .piede__legale-riga { flex-direction: column; align-items: flex-start; padding-block: 16px; }
}

/* ==========================================================================
   BOTTONI ED ETICHETTE COMUNI
   ========================================================================== */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 44px; padding: 10px 18px; box-sizing: border-box; border-radius: var(--r-sm);
  font: 600 .9375rem/1.1 var(--font-display); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.bottone .icona { inline-size: 18px; block-size: 18px; }
.bottone:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.bottone--arancio { background: var(--accent-btn); color: #fff; }
.bottone--arancio:hover { background: var(--accent-btn-h); }
.bottone--blu { background: var(--brand); color: #fff; }
.bottone--blu:hover { background: var(--brand-dark); }
.bottone--chiaro { background: #fff; color: var(--brand); }
.bottone--chiaro:hover { background: var(--brand-tint); }
.bottone--contorno { background: transparent; color: inherit; border-color: currentColor; }
.bottone--contorno-scuro { background: #fff; color: #10202F; border-color: #10202F; }
.bottone--contorno-scuro:hover { background: #10202F; color: #fff; }
.etichetta {
  display: inline-block; align-self: flex-start; justify-self: start; padding: 3px 10px; border: 1.5px solid var(--accent-ink); border-radius: 999px;
  color: var(--accent-ink); font: 700 .6875rem/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
}

/* ==========================================================================
   HOME — punti 3-9
   ========================================================================== */
.home__corpo { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: 24px 8px; }

/* --- Hero: punto 3. Piu' basso del precedente (che occupava lo schermo intero), una sola scritta,
       velo CHIARO solo dietro al testo: la foto resta leggibile per tutta la sua larghezza. --- */
.vetrina { position: relative; block-size: clamp(260px, 27vw, 440px); overflow: hidden; background: var(--brand-tint); }
.vetrina__binario { display: flex; block-size: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vetrina__binario::-webkit-scrollbar { display: none; }
.vetrina__slide { position: relative; flex: 0 0 100%; block-size: 100%; scroll-snap-align: start; overflow: hidden; }
.vetrina__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 50%; }
.vetrina__slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 28%, rgba(255,255,255,0) 58%);
}
.vetrina__testo { position: relative; z-index: 2; block-size: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.vetrina__titolo {
  margin: 0; max-inline-size: 15ch; color: #0B1F44;
  font: 800 clamp(1.75rem, 3.3vw, 3.25rem)/1.05 var(--font-display); letter-spacing: -.02em;
}
.vetrina__link { display: inline-flex; align-items: center; gap: 6px; color: #0B1F44; font: 600 1.0625rem/1 var(--font-display); text-decoration: none; }
.vetrina__link span { border-block-end: 2px solid var(--accent); padding-block-end: 4px; }
.vetrina__link .icona { color: var(--accent-ink); }
.vetrina__link:hover span { border-color: var(--brand); }
.vetrina__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.vetrina__freccia {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 3;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--brand); border: 0; box-shadow: var(--ombra-1); cursor: pointer;
}
.vetrina__freccia--prec { inset-inline-start: 12px; }
.vetrina__freccia--succ { inset-inline-end: 12px; }
.vetrina__freccia:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.vetrina__punti { position: absolute; inset-block-end: 14px; inset-inline: 0; z-index: 3; display: flex; justify-content: center; gap: 4px; }
.vetrina__punti button { inline-size: 28px; block-size: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.vetrina__punti button::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 42, 110, .55); transition: inline-size .2s ease; }
.vetrina__punti button[aria-selected="true"]::before { background: var(--accent); inline-size: 22px; border-radius: 6px; box-shadow: none; }
.vetrina__punti button:focus-visible { outline: 3px solid var(--brand); border-radius: 6px; }

/* --- Card promozionali (bozza_header.png) --- */
.promo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.promo__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-md); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--ombra-1); transition: box-shadow .2s ease, transform .2s ease; }
.promo__card:hover { box-shadow: var(--ombra-2); transform: translateY(-2px); }
.promo__card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.promo__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--brand-tint); }
.promo__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.promo__media--grafica { background: linear-gradient(120deg, var(--brand) 0%, var(--brand-mid) 60%, var(--brand) 100%); }
.promo__grafica { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; }
.promo__grafica .icona { inline-size: 64px; block-size: 64px; color: var(--accent); stroke-width: 2.4; }
.promo__grafica > span { display: flex; flex-direction: column; line-height: .95; transform: skewX(-8deg); }
.promo__grafica strong { font: 900 clamp(1.5rem, 2.6vw, 2.25rem)/.95 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.promo__grafica em { margin-block-start: 8px; padding: 3px 8px; background: var(--accent-btn); font: 700 .8125rem/1.2 var(--font-display); font-style: normal; text-transform: uppercase; align-self: flex-start; }
.promo__bollino { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--accent-btn); color: #fff; border-radius: 999px; font: 700 .8125rem/1 var(--font-display); text-transform: uppercase; }
.promo__bollino .icona { inline-size: 14px; block-size: 14px; fill: currentColor; }
.promo__corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.promo__etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.promo__etichette span { padding: 2px 9px; border: 1.5px solid var(--brand); border-radius: 999px; color: var(--brand); font: 600 .75rem/1.4 var(--font-display); }
.promo__titolo { font: 700 1.25rem/1.2 var(--font-display); color: #0B1F44; }
.promo__testo { font-size: .9375rem; color: #46586B; }
.promo__link { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; color: #0B1F44; font: 600 .9375rem/1 var(--font-display); }
.promo__link .icona { inline-size: 16px; block-size: 16px; color: var(--accent-ink); }

/* --- Moduli con riquadro-titolo accanto alle voci (punto 8) --- */
.modulo { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.modulo__titolo { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--r-md); background: var(--brand-tint); }
.modulo__titolo h2 { margin: 0; font: 800 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--font-display); color: #0B1F44; letter-spacing: -.01em; }
.modulo__indice { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.modulo__indice a { display: block; padding: 7px 0; color: #26394C; text-decoration: none; font-size: .9375rem; border-block-end: 1px solid rgba(0, 62, 161, .1); }
.modulo__indice a:hover { color: var(--accent-ink); }
.modulo__link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font: 600 .9375rem/1.2 var(--font-display); text-decoration: none; }
.modulo__link:hover { text-decoration: underline; }
.modulo__link .icona { inline-size: 18px; block-size: 18px; }
.modulo__titolo--pieno { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); }
.modulo__titolo--pieno h2 { color: #fff; }
.modulo__testo { margin: 0; flex: 1 1 auto; font-size: 1rem; line-height: 1.55; }
.modulo__titolo--pieno .modulo__testo { color: var(--on-dark-muted); }
.modulo__titolo--riquadro { background: #fff; border: 1px solid #E3E9F2; justify-content: flex-start; }
.modulo__titolo--riquadro p { margin: 0; color: #46586B; font-size: .9375rem; line-height: 1.55; }
.modulo__titolo--riquadro .bottone { margin-block-start: auto; align-self: flex-start; }

/* Tessere delle categorie: TUTTE UGUALI (punto 7), immagine sopra e parte bianca con poco testo. */
.tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tessera a { display: flex; flex-direction: column; block-size: 100%; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-md); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
.tessera a:hover { box-shadow: var(--ombra-2); border-color: #C9D5E4; }
.tessera a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.tessera__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.tessera .tessera__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: scale .35s ease; }
.tessera a:hover .tessera__img { scale: 1.04; }
.tessera .tessera__img--contieni { object-fit: contain; padding: 12px; box-sizing: border-box; }
.tessera__foto--icona { display: grid; place-items: center; background: linear-gradient(160deg, var(--brand-tint), #DCE7F7); color: var(--brand); }
.tessera__foto--icona .icona { inline-size: 56px; block-size: 56px; stroke-width: 1.5; }
.tessera__nome { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font: 600 1rem/1.2 var(--font-display); color: #0B1F44; }
.tessera__nome .icona { inline-size: 18px; block-size: 18px; color: var(--accent-ink); flex: 0 0 auto; }

/* --- Riga di prodotti: scorre di lato, come i caroselli di ManoMano/MediaWorld --- */
.griglia-prodotti { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.griglia-prodotti--riga { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: 8px; scrollbar-width: thin; scrollbar-color: #C9D5E4 transparent; }
.griglia-prodotti--riga > li { scroll-snap-align: start; }

/* --- Card prodotto (punto 14) --- */
.card-prodotto { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-md); padding: 12px 14px 14px; margin: 0; list-style: none; transition: box-shadow .2s ease, border-color .2s ease; }
.card-prodotto:hover { box-shadow: var(--ombra-2); border-color: #C9D5E4; }
.card-prodotto__link { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; color: inherit; text-decoration: none; }
.card-prodotto__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.card-prodotto__foto { display: block; aspect-ratio: 1 / 1; background: #fff; margin-block-end: 4px; overflow: hidden; } /* overflow: senza, una foto verticale allunga la card */
.card-prodotto .card-prodotto__foto img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; margin: 0 !important; }
.card-prodotto__marca { font: 700 .8125rem/1.2 var(--font-display); color: var(--brand); letter-spacing: .02em; }
.card-prodotto__titolo { margin: 0; font: 500 .9375rem/1.3 var(--font-body); color: #10202F; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-prodotto__prezzo { margin-block-start: auto; padding-block-start: 6px; font: 800 1.375rem/1.1 var(--font-display); color: var(--brand); }
.card-prodotto__prezzo del { font-size: .875rem; font-weight: 400; color: #5A6B7D; margin-inline-end: 6px; }
.card-prodotto__prezzo ins { text-decoration: none; }
.card-prodotto__prezzo .woocommerce-price-suffix { display: block; margin-block-start: 3px; font: 400 .75rem/1.3 var(--font-body); color: #5A6B7D; }
.card-prodotto__disp { display: flex; align-items: center; gap: 7px; margin: 8px 0 10px; font-size: .8125rem; color: #26394C; }
.pallino { inline-size: 10px; block-size: 10px; border-radius: 50%; flex: 0 0 auto; }
.card-prodotto__disp--ok .pallino { background: var(--ok); }
.card-prodotto__disp--attesa .pallino { background: var(--warn); }
.card-prodotto__disp--ko .pallino { background: var(--ko); }
.card-prodotto__cuore { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #E3E9F2; color: var(--brand); cursor: pointer; }
.card-prodotto__cuore[aria-pressed="true"] { color: var(--accent-btn); }
.card-prodotto__cuore[aria-pressed="true"] .icona { fill: currentColor; }
.card-prodotto__cuore:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.card-prodotto__azione .button, .card-prodotto__azione .added_to_cart {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 44px; box-sizing: border-box;
  padding: 10px 12px !important; margin: 0 !important; border-radius: var(--r-sm) !important;
  background: var(--accent-btn) !important; color: #fff !important; font: 600 .9375rem/1.1 var(--font-display) !important; text-decoration: none; border: 0 !important;
}
.card-prodotto__azione .button:hover { background: var(--accent-btn-h) !important; }
.card-prodotto__azione .button:focus-visible { outline: 3px solid var(--brand) !important; outline-offset: 2px; }
.card-prodotto__azione .button .icona { inline-size: 18px; block-size: 18px; }
.card-prodotto__azione .added_to_cart { margin-block-start: 8px !important; background: #fff !important; color: var(--brand) !important; border: 1.5px solid var(--brand) !important; }
.card-prodotto__azione .button.loading { opacity: .7; }

/* --- Due banner affiancati --- */
.banner-doppio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 36%); align-items: stretch; min-block-size: 220px; border-radius: var(--r-lg); overflow: hidden; }
.banner--chiaro { background: linear-gradient(120deg, #FFE7D4 0%, #FFD0AD 100%); color: #10202F; }
.banner--blu { background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; }
.banner__testo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; }
.banner__etichetta { padding: 3px 10px; background: var(--accent-btn); color: #fff; border-radius: 4px; font: 700 .75rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.banner__titolo { margin: 0; font: 800 clamp(1.375rem, 2.2vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.banner__testo p { margin: 0; font-size: 1rem; line-height: 1.5; }
.banner--blu .banner__testo p { color: var(--on-dark-muted); }
.banner__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: auto; padding-block-start: 6px; }
.banner--blu .bottone--contorno { color: #fff; }
.banner--blu .bottone:focus-visible { outline-color: #fff; }
.banner__media { display: block; position: relative; }
.banner__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.banner--blu .banner__media img { object-fit: contain; object-position: center bottom; padding: 16px 12px 0; box-sizing: border-box; }
.banner__bollino { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 92px; block-size: 92px; display: grid; place-items: center; padding: 10px; box-sizing: border-box; text-align: center; border-radius: 50%; background: var(--accent-btn); color: #fff; font: 800 .75rem/1.1 var(--font-display); text-transform: uppercase; rotate: 8deg; }

/* --- Marchi come MediaWorld (punto 9) --- */
.modulo--marchi { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.modulo--marchi h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.marchi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.marchi__voce { position: relative; aspect-ratio: 16 / 7; border-radius: var(--r-md); overflow: hidden; background: #0B1F44; }
.marchi__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.marchi__voce::after { content: ""; position: absolute; inset: 0; background: rgba(0, 18, 50, .55); }
/* Il logo in BIANCO come nella bozza di MediaWorld: sopra una foto un logo a colori si perde. */
.marchi__logo { position: absolute; inset: 0; z-index: 1; margin: auto; inline-size: 62%; max-block-size: 44%; object-fit: contain; filter: brightness(0) invert(1); }

/* --- Showroom: scopo secondario (punto 4), una fascia compatta --- */
.showroom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 36px; padding: 28px 32px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); }
.showroom__icona { inline-size: 88px; block-size: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); }
.showroom__icona .icona { inline-size: 42px; block-size: 42px; stroke-width: 1.6; }
.showroom h2 { margin: 0 0 6px; font: 800 1.5rem/1.15 var(--font-display); color: var(--brand); }
.showroom p { margin: 0 0 16px; color: #46586B; line-height: 1.55; }
.showroom__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.showroom__punti { margin: 0; padding: 0 0 0 32px; list-style: none; display: grid; gap: 14px; border-inline-start: 1px solid #E3E9F2; }
.showroom__punti li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: #10202F; white-space: nowrap; }
.showroom__punti .icona { inline-size: 24px; block-size: 24px; color: var(--brand); }

@media (max-width: 1100px) {
  .modulo, .modulo--marchi { grid-template-columns: minmax(0, 1fr); }
  .modulo__titolo { flex-direction: row; align-items: center; padding: 16px 20px; }
  .modulo__indice { display: none; }
  .modulo__titolo--riquadro { flex-direction: column; align-items: flex-start; }
  .tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .showroom { grid-template-columns: auto minmax(0, 1fr); }
  /* ⚠ Le tre voci NON restano su una riga fissa: fra 601 e 819px sbordavano di 49-165px (nowrap). Colonne
     che si adattano e testo che va a capo. */
  .showroom__punti { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 28px; padding: 18px 0 0; border-inline-start: 0; border-block-start: 1px solid #E3E9F2; }
  .showroom__punti li { white-space: normal; }
}
@media (max-width: 900px) {
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo__card { flex-direction: row; }
  .promo__media { flex: 0 0 40%; aspect-ratio: auto; min-block-size: 132px; }
  .banner-doppio { grid-template-columns: minmax(0, 1fr); }
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .vetrina { block-size: 240px; }
  .vetrina__slide::before { background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,.2) 100%); }
  .vetrina__titolo { font-size: 1.75rem; max-inline-size: 12ch; }
  .vetrina__freccia { display: none; }
  .promo__media { flex-basis: 36%; }
  .promo__grafica { gap: 6px; } .promo__grafica .icona { inline-size: 36px; block-size: 36px; }
  .promo__grafica strong { font-size: 1.125rem; } .promo__grafica em { font-size: .625rem; }
  .promo__corpo { padding: 12px 14px; }
  .promo__titolo { font-size: 1.0625rem; }
  .modulo__titolo { flex-direction: column; align-items: flex-start; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner__media { block-size: 170px; order: -1; }
  .banner__bollino { inline-size: 76px; block-size: 76px; font-size: .625rem; }
  .marchi { gap: 8px; }
  .showroom { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; text-align: left; }
  .showroom__icona { display: none; }
  .showroom__punti { grid-template-columns: minmax(0, 1fr); }
  .griglia-prodotti--riga { grid-auto-columns: minmax(200px, 72%); }
}
@media (prefers-reduced-motion: reduce) {
  .tessera__img, .promo__card, .vetrina__punti button::before { transition: none; }
  .tessera a:hover .tessera__img { scale: none; }
  .promo__card:hover { transform: none; }
}

/* ==========================================================================
   ARCHIVI: negozio, categoria, ricerca — punto 14 e bozze categoria/sottocategorie
   ========================================================================== */
.archivio { padding-block: 16px 8px; }
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: #46586B; margin-block-end: 12px; }
.briciole a { color: #26394C; text-decoration: none; display: inline-flex; }
.briciole a:hover { text-decoration: underline; }
.briciole .icona { inline-size: 16px; block-size: 16px; }
.briciole > .icona { inline-size: 14px; block-size: 14px; color: #8A9AAC; }
.archivio__testa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; margin-block-end: 24px; }
.archivio__titolo { margin: 0; font: 800 clamp(1.875rem, 3.2vw, 2.75rem)/1.05 var(--font-display); color: #0B1F44; letter-spacing: -.02em; }
.archivio__descrizione { margin: 0; color: #46586B; font-size: 1rem; line-height: 1.55; }
.consulenza { grid-column: 3; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--brand-tint); border-radius: var(--r-md); text-decoration: none; color: #10202F; max-inline-size: 340px; }
.consulenza > .icona { inline-size: 36px; block-size: 36px; color: var(--accent-ink); flex: 0 0 auto; }
.consulenza span { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.consulenza strong { font: 700 .9375rem/1.2 var(--font-display); color: #0B1F44; }
.consulenza small { font-size: .8125rem; color: #46586B; }
.consulenza em { font-style: normal; font: 600 .875rem/1.2 var(--font-display); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 2px; }
.consulenza em .icona { inline-size: 14px; block-size: 14px; }
.consulenza:hover strong { text-decoration: underline; }
.consulenza:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.archivio__corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.archivio__lato { position: sticky; top: calc(var(--testata-fissa-h) + 16px); padding: 18px 20px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-md); }
.archivio__lato-titolo { margin: 0 0 10px; font: 700 1.0625rem/1.2 var(--font-display); color: #0B1F44; }
.albero, .albero ul { list-style: none; margin: 0; padding: 0; }
.albero > li > a { display: block; padding: 7px 0; color: #26394C; text-decoration: none; font-size: .9375rem; }
.albero ul { padding: 2px 0 8px 12px; border-inline-start: 2px solid var(--brand-tint); }
.albero ul a { display: block; padding: 5px 0; color: #46586B; text-decoration: none; font-size: .875rem; }
.albero a:hover { color: var(--accent-ink); text-decoration: underline; }
.albero a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

.archivio__principale { display: grid; gap: 28px; min-inline-size: 0; }
.archivio__sezione { margin: 0 0 14px; font: 700 1.375rem/1.2 var(--font-display); color: #0B1F44; }
.sottocats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sottocat a { display: flex; flex-direction: column; block-size: 100%; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-md); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
.sottocat a:hover { box-shadow: var(--ombra-2); border-color: #C9D5E4; }
.sottocat a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* ⚠ `overflow: hidden` serve all'aspect-ratio: senza, il suo minimo e' il CONTENUTO e una foto verticale
   allunga il riquadro (misurato: tessere di altezze diverse nella stessa riga). */
.sottocat__foto { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.sottocat .sottocat__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sottocat .sottocat__img--contieni { object-fit: contain; padding: 14px; box-sizing: border-box; }
.sottocat__icona { display: grid; place-items: center; block-size: 100%; background: linear-gradient(160deg, var(--brand-tint), #DCE7F7); color: var(--brand); }
.sottocat__icona .icona { inline-size: 44px; block-size: 44px; stroke-width: 1.5; }
.sottocat__nome { padding: 12px 10px 14px; text-align: center; font: 600 .9375rem/1.25 var(--font-display); color: #0B1F44; }

.archivio__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.archivio__barra .woocommerce-result-count { margin: 0; color: #46586B; font-size: .9375rem; }
.archivio__barra .woocommerce-ordering { margin: 0; }
.archivio__barra select { min-block-size: 42px; padding: 0 36px 0 12px; border: 1.5px solid #C9D5E4; border-radius: var(--r-sm); font: 500 .9375rem/1 var(--font-body); color: #10202F; background-color: #fff; }
.griglia-prodotti--archivio { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.archivio__vuoto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 22px 24px; background: var(--brand-tint); border-radius: var(--r-md); }
.archivio__vuoto > .icona { inline-size: 32px; block-size: 32px; color: var(--brand); }
.archivio__vuoto p { margin: 0; color: #26394C; line-height: 1.5; }
.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 20px 0 0; border: 0 !important; }
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-inline-size: 42px; block-size: 42px; border-radius: var(--r-sm); border: 1.5px solid #C9D5E4; text-decoration: none; color: var(--brand); font-weight: 600; }
.woocommerce-pagination span.current { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 1100px) {
  .archivio__testa { grid-template-columns: minmax(0, 1fr) auto; }
  .archivio__descrizione { grid-column: 1 / -1; grid-row: 2; }
  .consulenza { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px) {
  .archivio__corpo { grid-template-columns: minmax(0, 1fr); }
  .archivio__lato { display: none; }
  .archivio__testa { grid-template-columns: minmax(0, 1fr); }
  .consulenza { grid-column: 1; grid-row: auto; max-inline-size: none; }
  .sottocats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .griglia-prodotti--archivio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .archivio__vuoto { grid-template-columns: auto minmax(0, 1fr); }
  .archivio__vuoto .bottone { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) {
  .card-prodotto { padding: 10px; }
  .card-prodotto__prezzo { font-size: 1.125rem; }
  .card-prodotto__azione .button { font-size: .8125rem !important; padding-inline: 8px !important; gap: 6px; }
  .card-prodotto__cuore { inline-size: 36px; block-size: 36px; }
}

/* ==========================================================================
   SCHEDA PRODOTTO — punto 13, stile MediaWorld
   ========================================================================== */
.scheda { padding-block: 16px 8px; }
.scheda__griglia { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
.scheda__titolo { margin: 0; font: 800 clamp(1.5rem, 2.4vw, 2.125rem)/1.15 var(--font-display); color: #0B1F44; letter-spacing: -.01em; }
.scheda__marca { margin: 6px 0 16px; font: 700 1rem/1.2 var(--font-display); color: var(--brand); }
.scheda__galleria .woocommerce-product-gallery { position: relative; inline-size: 100% !important; float: none !important; margin: 0 !important; }
.scheda__galleria .woocommerce-product-gallery__image img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.scheda__galleria .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 10px 0 0 !important; padding: 0; }
.scheda__galleria .flex-control-thumbs li { inline-size: auto !important; float: none !important; margin: 0 !important; }
.scheda__galleria .flex-control-thumbs img { border: 1.5px solid #E3E9F2; border-radius: 6px; aspect-ratio: 1; object-fit: contain; background: #fff; opacity: 1 !important; }
.scheda__galleria .flex-control-thumbs img.flex-active { border-color: var(--brand); }
.scheda__galleria .woocommerce-product-gallery__trigger { z-index: 2; }

.scheda__acquisto { position: sticky; top: calc(var(--testata-fissa-h) + 16px); display: grid; gap: 16px; padding: 22px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); box-shadow: var(--ombra-1); }
.scheda__riga-marca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scheda__marca-grande { font: 800 1.375rem/1 var(--font-display); color: var(--brand); }
.classe-energetica { position: relative; display: inline-grid; place-items: center; min-inline-size: 56px; block-size: 32px; padding: 0 16px 0 10px; background: #23742A; color: #fff; font: 800 1rem/1 var(--font-display); /* bianco sopra 5,83: #2E8B35 faceva 4,28 */ clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
/* Prezzo in ARANCIONE (punto 13): e' testo GRANDE e grassetto, per cui vale la soglia AA di 3:1 —
   #E85100 fa 3,74 sul bianco. Il suffisso piccolo resta in grigio scuro. */
.scheda__prezzo { font: 800 clamp(2rem, 3vw, 2.5rem)/1.05 var(--font-display); color: #E85100; }
.scheda__prezzo del { font-size: 1rem; font-weight: 400; color: #5A6B7D; }
.scheda__prezzo ins { text-decoration: none; }
.scheda__prezzo .woocommerce-price-suffix { display: block; margin-block-start: 6px; font: 400 .875rem/1.4 var(--font-body); color: #46586B; }
.scheda__breve { color: #26394C; line-height: 1.55; }
.scheda__breve p { margin: 0; }
.scheda__servizi { display: grid; gap: 12px; margin: 0; padding: 16px 0; list-style: none; border-block: 1px solid #E3E9F2; }
.scheda__servizi li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; }
.scheda__servizi li > .icona { inline-size: 22px; block-size: 22px; color: var(--brand); flex: 0 0 auto; }
.scheda__servizi span { display: flex; flex-direction: column; gap: 2px; }
.scheda__servizi small { color: #46586B; font-size: .8125rem; }
.scheda__disp { align-items: center !important; }
.scheda__disp--ok .pallino { background: var(--ok); }
.scheda__disp--attesa .pallino { background: var(--warn); }
.scheda__disp--ko .pallino { background: var(--ko); }
.scheda__disp--ok strong { color: #1B7A36; }

.scheda__carrello { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.scheda__carrello form.cart { display: grid; gap: 12px; margin: 0 !important; }
.scheda__carrello .variations { border: 0; margin: 0; }
.scheda__carrello .variations th, .scheda__carrello .variations td { display: block; padding: 0; text-align: start; border: 0; }
.scheda__carrello .variations label { font: 600 .9375rem/1.3 var(--font-display); color: #0B1F44; }
.scheda__carrello .variations select { min-block-size: 44px; inline-size: 100%; padding: 0 12px; border: 1.5px solid #C9D5E4; border-radius: var(--r-sm); font: 500 1rem/1 var(--font-body); }
.varianti-select-nascosto { position: absolute !important; opacity: 0; pointer-events: none; inline-size: 1px !important; min-block-size: 0 !important; block-size: 1px; }
.varianti-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.varianti-pulsanti button { min-block-size: 44px; padding: 0 16px; border: 1.5px solid #C9D5E4; border-radius: var(--r-sm); background: #fff; color: #10202F; font: 600 .9375rem/1 var(--font-display); cursor: pointer; }
.varianti-pulsanti button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.varianti-pulsanti button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.scheda__carrello .reset_variations { font-size: .8125rem; color: #46586B; }
.scheda__carrello .woocommerce-variation-price .price { font: 800 1.5rem/1.1 var(--font-display); color: #E85100; }
.scheda__carrello .quantity { display: inline-flex; }
.scheda__carrello .quantity input { inline-size: 72px; min-block-size: 48px; text-align: center; border: 1.5px solid #C9D5E4; border-radius: var(--r-sm); font: 600 1rem/1 var(--font-body); }
.scheda__carrello .single_add_to_cart_button, .scheda__carrello .woocommerce-variation-add-to-cart .button {
  min-block-size: 48px; padding: 0 22px !important; border-radius: var(--r-sm) !important; border: 0 !important;
  background: var(--accent-btn) !important; color: #fff !important; font: 700 1.0625rem/1 var(--font-display) !important;
}
.scheda__carrello .single_add_to_cart_button:hover { background: var(--accent-btn-h) !important; }
.scheda__carrello .single_add_to_cart_button.disabled { opacity: .55; }
.scheda__carrello form.cart:not(.variations_form), .scheda__carrello .woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.scheda__carrello .single_add_to_cart_button { flex: 1 1 auto; }
.scheda__cuore { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 1.5px solid #C9D5E4; border-radius: var(--r-sm); background: #fff; color: var(--brand); cursor: pointer; }
.scheda__cuore[aria-pressed="true"] { color: var(--accent-btn); border-color: var(--accent-btn); }
.scheda__cuore[aria-pressed="true"] .icona { fill: currentColor; }
.scheda__cuore:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.scheda__sotto { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-block-start: 40px; }
.scheda__blocco { padding: 24px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); }
.scheda__blocco h2 { margin: 0 0 12px; font: 700 1.25rem/1.2 var(--font-display); color: #0B1F44; }
.scheda__testo { color: #26394C; line-height: 1.65; }
.scheda__blocco .woocommerce-product-attributes { inline-size: 100%; border-collapse: collapse; }
.scheda__blocco .woocommerce-product-attributes th, .scheda__blocco .woocommerce-product-attributes td { padding: 10px 0; border-block-end: 1px solid #E3E9F2; text-align: start; font-size: .9375rem; }
.scheda__blocco .woocommerce-product-attributes th { inline-size: 42%; color: #46586B; font-weight: 500; }
.scheda__blocco .woocommerce-product-attributes td p { margin: 0; }
.scheda__correlati .related { margin-block-start: 40px; }
.scheda__correlati .related > h2 { font: 800 1.5rem/1.2 var(--font-display); color: #0B1F44; margin: 0 0 16px; }
.scheda__correlati ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.scheda__correlati ul.products::before, .scheda__correlati ul.products::after { display: none !important; }
.scheda__correlati ul.products li.card-prodotto { inline-size: auto !important; float: none !important; margin: 0 !important; }

@media (max-width: 900px) {
  .scheda__griglia { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .scheda__acquisto { position: static; }
  .scheda__correlati ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ==========================================================================
   PAGINE DI CONTENUTO: Chi siamo, Incentivi, Contatti, Marchi, Condizioni, Preferiti
   ⚠ Regola 5 dell'owner: il testo prende TUTTA la larghezza del suo blocco (niente misura di lettura
   sul contenitore, niente text-wrap: balance). I blocchi si affiancano invece di lasciare colonne vuote.
   ========================================================================== */
.pagina { padding-block: 16px 8px; }
.pagina .briciole a { text-decoration: none; }
.pagina__testa { display: grid; gap: 12px; margin-block-end: 28px; }
.pagina__titolo { margin: 0; font: 800 clamp(2rem, 3.4vw, 3rem)/1.05 var(--font-display); color: #0B1F44; letter-spacing: -.02em; }
.pagina__intro { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: #26394C; }
.pagina__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pagina__griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina__blocco { padding: 26px 28px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); }
.pagina__blocco h2 { margin: 0 0 10px; font: 700 1.375rem/1.2 var(--font-display); color: #0B1F44; }
.pagina__blocco p { margin: 0 0 10px; line-height: 1.65; color: #26394C; }
.pagina__blocco p:last-child { margin-block-end: 0; }
.pagina__blocco--evidenza { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); border: 0; }
.pagina__blocco--evidenza h2 { color: #fff; }
.pagina__blocco--evidenza p { color: var(--on-dark-muted); }
.pagina__marchi { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; }
.pagina__marchi li { padding: 6px 12px; border: 1.5px solid #C9D5E4; border-radius: 999px; font: 600 .9375rem/1.2 var(--font-display); color: #0B1F44; }
.pagina__link { color: var(--brand); font-weight: 600; }
.pagina__fascia { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; margin-block-start: 24px; padding: 28px 32px; background: var(--brand-tint); border-radius: var(--r-lg); }
.pagina__fascia h2 { margin: 0 0 8px; font: 800 1.5rem/1.2 var(--font-display); color: #0B1F44; }
.pagina__fascia p { margin: 0 0 8px; line-height: 1.6; color: #26394C; }
.pagina__azioni { display: flex; flex-direction: column; gap: 10px; min-inline-size: 240px; }
.pagina__recapito { margin-block-start: 12px !important; }
.pagina__elenco { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; color: #26394C; font-weight: 500; }
.pagina__nota { margin: 24px 0 0; font-size: .875rem; color: #46586B; line-height: 1.6; }
.pagina__nota a, .incentivo__fonte a { color: var(--brand); }
.pagina__segnaposto { display: inline-block; padding: 4px 10px; background: var(--accent-tint); color: var(--accent-ink) !important; border-radius: 6px; font-weight: 600; }

.incentivi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.incentivo { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); border-block-start: 5px solid var(--accent); }
.incentivo__cifra { margin: 0; font: 500 1.125rem/1 var(--font-display); color: #46586B; }
.incentivo__cifra strong { font-size: 2.5rem; font-weight: 800; color: var(--brand); }
.incentivo h2 { margin: 0; font: 800 1.5rem/1.15 var(--font-display); color: #0B1F44; }
.incentivo p { margin: 0; line-height: 1.6; color: #26394C; }
.incentivo__chi { padding-block-start: 10px; border-block-start: 1px solid #E3E9F2; }
.incentivo__fonte { margin-block-start: auto !important; font-size: .8125rem; color: #46586B !important; }
.pagina__fascia--calcolo strong { color: #0B1F44; }

.contatti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.contatto { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); text-decoration: none; color: #0B1F44; transition: box-shadow .2s ease, border-color .2s ease; }
.contatto:hover { box-shadow: var(--ombra-2); border-color: #C9D5E4; }
.contatto:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.contatto__tipo { font: 700 .75rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.contatto strong { font: 700 1.0625rem/1.35 var(--font-display); overflow-wrap: anywhere; }
.orari { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; }
.orari dt { font-weight: 700; color: #0B1F44; }
.orari dd { margin: 0; color: #26394C; }
.offerte-elenco { padding-block-end: 8px; }
/* auto-FIT e 200px: le 6 offerte stanno in UNA riga a 1320px, senza la card orfana e il vuoto a destra. */
.offerte-elenco .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.offerte-elenco .woocommerce ul.products::before, .offerte-elenco .woocommerce ul.products::after { display: none !important; }
.offerte-elenco .woocommerce ul.products li.card-prodotto { inline-size: auto !important; float: none !important; margin: 0 !important; }
.preferiti__vuoto { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; }
.preferiti__vuoto[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .contatti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina__griglia--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .pagina__griglia, .incentivi { grid-template-columns: minmax(0, 1fr); }
  .pagina__fascia { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .pagina__azioni { min-inline-size: 0; }
  .pagina__blocco, .incentivo { padding: 20px; }
  .offerte-elenco .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 520px) {
  .contatti { grid-template-columns: minmax(0, 1fr); }
  /* L'indirizzo e-mail (37 caratteri, nessun punto di a capo) a 17px sfora di poco la card a 390: si spezzava su «.co / m». */
  .contatto strong { font-size: .9375rem; }
}

/* ==========================================================================
   CARD dentro i contenitori `.woocommerce` (shortcode, archivi, correlati)
   ⚠ WooCommerce veste `.woocommerce ul.products li.product` con specificita' fino a (0,3,3): padding a
   zero, larghezze a percentuale, foto a `height:auto` con margine. Qui la card si riprende le sue misure
   con una specificita' MAGGIORE, invece di spargere !important. E il clearfix `::before/::after` della
   lista, dentro una griglia, diventerebbe una CELLA VUOTA in testa: si spegne.
   ========================================================================== */
ul.products.griglia-prodotti::before, ul.products.griglia-prodotti::after,
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product.card-prodotto,
ul.products li.product.card-prodotto {
  inline-size: auto; float: none; clear: none; margin: 0; padding: 12px 14px 14px; text-align: start;
}
.woocommerce ul.products li.product.card-prodotto .card-prodotto__foto img,
ul.products li.product.card-prodotto .card-prodotto__foto img {
  inline-size: 100%; block-size: 100%; object-fit: contain; margin: 0; box-shadow: none;
}
.woocommerce ul.products li.product.card-prodotto .card-prodotto__titolo { padding: 0; margin: 0; font-size: .9375rem; }
.woocommerce ul.products li.product.card-prodotto .card-prodotto__prezzo { color: var(--brand); font-size: 1.375rem; margin-block-end: 0; }
@media (max-width: 600px) {
  .woocommerce ul.products li.product.card-prodotto, ul.products li.product.card-prodotto { padding: 10px; }
  .woocommerce ul.products li.product.card-prodotto .card-prodotto__prezzo { font-size: 1.125rem; }
}

/* ==========================================================================
   SECONDO GIRO (2026-09-28): scostamenti corretti dopo il controllo alla lettera
   ========================================================================== */

/* --- Fasce delle bozze: scura in home (bozza_header), chiara altrove (bozze articolo/categoria) --- */
.fascia { font-size: .875rem; }
.fascia__riga { display: flex; align-items: center; justify-content: space-around; gap: 8px 24px; margin: 0 auto; list-style: none; min-block-size: 38px; }
.fascia a { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; text-decoration: none; }
.fascia--scura { background: #0B1F44; }
.fascia--scura a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fascia--chiara { background: var(--brand-tint); border-block-end: 1px solid #DCE5F2; }
.fascia--chiara a { color: #0B1F44; font-weight: 500; }
.fascia--chiara li + li { border-inline-start: 1px solid #C9D5E4; padding-inline-start: 24px; }
.fascia--chiara .icona { inline-size: 18px; block-size: 18px; color: var(--brand); }
.fascia a:hover span, .fascia--scura a:hover { color: var(--accent-ink); }
.fascia--scura a:hover { color: #FFD2B3; }
.fascia a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.fascia--scura a:focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
  /* Al telefono la fascia scorre di lato invece di andare a capo: resta una riga sola. */
  .fascia__riga { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .fascia__riga::-webkit-scrollbar { display: none; }
  .fascia--chiara li + li { padding-inline-start: 16px; }
}

/* --- Barra alta al telefono: le TRE voci del punto 2 (assistenza, orari, spedizioni) a rotazione in una
       riga. Senza animazione (prefers-reduced-motion) vanno a capo, tutte visibili. --- */
@media (max-width: 900px) {
  .barra-alta .barra-alta__orari, .barra-alta .barra-alta__spedizioni { display: inline-flex; }
  .barra-alta__riga { position: relative; display: grid; grid-template-areas: "v"; justify-items: center; min-block-size: 32px; }
  .barra-alta__voce { grid-area: v; align-self: center; font-size: .75rem; animation: termo-ruota 12s infinite; opacity: 0; }
  .barra-alta__voce:nth-child(1) { animation-delay: 0s; }
  .barra-alta__voce:nth-child(2) { animation-delay: 4s; }
  .barra-alta__voce:nth-child(3) { animation-delay: 8s; }
  .barra-alta__riga:hover .barra-alta__voce, .barra-alta__riga:focus-within .barra-alta__voce { animation-play-state: paused; }
}
@keyframes termo-ruota { 0% { opacity: 0; visibility: visible; } 3%, 30% { opacity: 1; visibility: visible; } 33%, 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .barra-alta__riga { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; padding-block: 4px; }
  .barra-alta__voce { animation: none; opacity: 1; }
}

/* --- Carosello: slide «prodotto» (prodotto scontornato su fondo chiaro, come i banner MediaWorld) --- */
.vetrina__slide--prodotto { background: linear-gradient(110deg, #FFFFFF 0%, #EEF3FB 45%, #DCE7F7 100%); }
.vetrina__slide--prodotto::before { display: none; }
.vetrina__slide--prodotto .vetrina__foto { inset: 6% 6% 6% auto; inline-size: min(46%, 520px); block-size: 88%; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
@media (max-width: 600px) { .vetrina__slide--prodotto .vetrina__foto { inline-size: 48%; inset-inline-end: 3%; } }

/* --- Riquadri delle categorie tutti UGUALI anche al telefono (punto 7): il nome occupa sempre due righe
       di spazio, cosi' «Trattamento acqua» che va a capo non allunga la sua riga di griglia. --- */
@media (max-width: 900px) {
  .tessera__nome { min-block-size: calc(2 * 1.2em + 28px); box-sizing: border-box; }
}

/* --- Logo del marchio nelle card e nella scheda (punto 14) --- */
.card-prodotto__marca { display: flex; align-items: center; min-block-size: 22px; }
.card-prodotto__marca .card-prodotto__marca__logo, .card-prodotto .card-prodotto__marca img { block-size: 20px !important; inline-size: auto !important; max-inline-size: 110px; object-fit: contain; margin: 0 !important; }
.scheda__marca-grande img, .scheda__marca-grande .scheda__marca-grande__logo { block-size: 30px !important; inline-size: auto !important; max-inline-size: 180px; object-fit: contain; }
.logo--inverti { filter: brightness(0) saturate(100%); }

/* --- Rate: presenti ma DISATTIVATE (decisione owner) --- */
.scheda__rate { margin: 0; padding: 14px 16px; border: 1.5px dashed #C9D5E4; border-radius: var(--r-md); }
.scheda__rate legend { padding-inline: 6px; font: 700 .9375rem/1.2 var(--font-display); color: #0B1F44; }
.scheda__rate-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scheda__rata { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid #E3E9F2; border-radius: var(--r-sm); background: #fff; }
.scheda__rata svg { block-size: 20px; inline-size: auto; max-inline-size: 90px; }
.scheda__rata-logo.logo--scuro svg { filter: invert(1); }
.scheda__rate--spente .scheda__rata { opacity: .6; cursor: not-allowed; }
.scheda__rate-avviso { margin: 10px 0 0; font-size: .8125rem; color: #46586B; line-height: 1.45; }

/* --- WhatsApp che PULSA (regola 7 dell'owner), fermo con prefers-reduced-motion --- */
.wa-float--pulsa { z-index: 95; }
.wa-float--pulsa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(31, 168, 85, .55); animation: termo-pulsa 2.2s ease-out infinite; }
@keyframes termo-pulsa { 0% { box-shadow: 0 0 0 0 rgba(31, 168, 85, .55); } 70% { box-shadow: 0 0 0 16px rgba(31, 168, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0); } }
@media (prefers-reduced-motion: reduce) { .wa-float--pulsa::after { animation: none; } }
@media (max-width: 780px) { .wa-float.wa-float--pulsa { inset-block-end: 1rem; } }

/* --- Modulo di contatto presente ma DISABILITATO (come negli altri siti) --- */
.modulo-contatto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 28px; background: #fff; border: 1px solid #E3E9F2; border-radius: var(--r-lg); margin-block-start: 24px; }
.modulo-contatto h2 { margin: 0; font: 800 1.5rem/1.2 var(--font-display); color: #0B1F44; }
.modulo-contatto .riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modulo-contatto label { display: grid; gap: 6px; font: 600 .9375rem/1.2 var(--font-display); color: #0B1F44; }
/* larghezza 100% e minimo 0: un input ha una larghezza intrinseca che a 360px allargava il modulo di 22px */
.modulo-contatto input:not([type=checkbox]), .modulo-contatto textarea { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.modulo-contatto label, .modulo-contatto { min-inline-size: 0; }
.modulo-contatto input, .modulo-contatto textarea { font: 400 1rem/1.4 var(--font-body); padding: 10px 12px; border: 1.5px solid #8A9AAC; border-radius: var(--r-sm); background: #F7F9FC; }
.modulo-contatto .consenso { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.modulo-contatto .form-note { margin: 0; padding: 12px 14px; background: var(--accent-tint); border-radius: var(--r-sm); color: #26394C; line-height: 1.5; }
.modulo-contatto .form-note a { color: var(--accent-ink); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 700px) { .modulo-contatto .riga { grid-template-columns: minmax(0, 1fr); } .modulo-contatto { padding: 20px; } }

/* ==========================================================================
   Resti della fase precedente, ancora in uso finche' home e negozio non sono rifatti
   ========================================================================== */
/* La griglia a blocchi di WooCommerce usa margini negativi laterali: a 390px diventa larga 406
   e il telefono scorre di lato. */
.wc-block-grid__products { margin-inline: 0; max-inline-size: 100%; }

/* Pie' ancorato in basso sulle pagine CORTE di WooCommerce (carrello, cassa, account). */
body.woocommerce .wp-site-blocks, body.woocommerce-page .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks, body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-account .wp-site-blocks { display: flex; flex-direction: column; min-block-size: 100vh; }
body.woocommerce .wp-site-blocks > main, body.woocommerce-page .wp-site-blocks > main,
body.woocommerce-cart .wp-site-blocks > main, body.woocommerce-checkout .wp-site-blocks > main,
body.woocommerce-account .wp-site-blocks > main { flex: 1 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .testata__principale, .menu-categorie__espandi .icona { transition: none; }
}