/* ══════════════════════════════════════════════════════════
   1. SCHEDE PRODOTTO — pulsanti allineati
   Le schede erano gia' alte uguali, ma prezzo e pulsante seguivano
   subito il titolo: con titoli da 2 o 3 righe le CTA finivano a
   altezze diverse (misurato: 904 / 872 / 904 px nella stessa riga).
   Il corpo diventa una colonna flessibile e l'ultimo blocco viene
   spinto in fondo, cosi' le CTA formano una riga pulita.
══════════════════════════════════════════════════════════ */
.inox-sg-grid .inox-product-card { display: flex; flex-direction: column; }
.inox-sg-grid .inox-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* !important solo qui, e per un motivo preciso: il CSS del widget scopa le sue
   regole con un selettore di ID generato (#inox-sg-xxxx ...), che vince sempre
   per specificita' su qualunque selettore di classe. L'ID cambia a ogni istanza,
   quindi non e' agganciabile. E' l'unica dichiarazione forzata del file. */
.inox-sg-grid .inox-card-body > *:last-child { margin-top: auto !important; }

/* ══════════════════════════════════════════════════════════
   1-bis. SCHEDA CLICCABILE TUTTA, senza il pulsante "Vedi prodotto"
   Prima: la scheda non era cliccabile (cursore normale), lo era solo
   il titolo, e sopra l'immagine compariva un pulsante "Vedi prodotto"
   (classe .inox-quick-add, nome fuorviante: non aggiunge nulla).
   Ora: il link del titolo si estende a coprire l'intera scheda con uno
   pseudo-elemento. Nessun JavaScript, e il link resta un vero <a>, quindi
   funziona da tastiera, col tasto centrale e col "apri in nuova scheda".
   "Aggiungi" e il cuore stanno su un piano superiore e restano cliccabili.
══════════════════════════════════════════════════════════ */
.inox-sg-grid .inox-quick-add { display: none !important; }
.inox-sg-grid .inox-product-card { position: relative; cursor: pointer; }
.inox-sg-grid .inox-product-card .inox-card-body a[href*="/prodotto/"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* I comandi veri devono restare sopra la superficie cliccabile.
   ATTENZIONE: NON mettere "position: relative" su tutti indistintamente.
   Il cuore dei preferiti e' gia' "position: absolute" in alto a destra
   sull'immagine: forzandolo a relative perdeva l'ancoraggio, finiva a -11px
   dal bordo sinistro e 289px piu' in basso, e veniva tagliato a meta' dal
   overflow:hidden della scheda. Serve solo lo z-index, che su un elemento
   gia' posizionato funziona da solo. */
.inox-sg-grid .inox-product-card .inox-wishlist-btn { z-index: 2; }
/* questo invece e' un <a> statico: senza position lo z-index non farebbe effetto */
.inox-sg-grid .inox-product-card .inox-btn-primary { position: relative; z-index: 2; }

/* ── Sollevamento al passaggio: la scheda era completamente piatta ── */
.inox-product-card {
  transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.inox-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(31, 20, 16, 0.12);
}

/* ══════════════════════════════════════════════════════════
   2. COMANDI — stato premuto
   Nessun pulsante del sito reagiva alla pressione: manca la
   sensazione fisica del click. Si anima transform, mai le misure.
══════════════════════════════════════════════════════════ */
.inox-btn-primary, .inox-btn-secondary, .ico-btn-primary, .ico-btn-secondary,
.inox-quick-add, .inox-wishlist-btn, .inox-sg-sort {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform 140ms ease;
}
.inox-btn-primary:hover, .ico-btn-primary:hover { box-shadow: 0 6px 18px rgba(220, 57, 53, 0.28); }
.inox-btn-primary:active, .inox-btn-secondary:active,
.ico-btn-primary:active, .ico-btn-secondary:active { transform: scale(0.97); }
.inox-quick-add:active, .inox-wishlist-btn:active { transform: scale(0.90); }

/* ══════════════════════════════════════════════════════════
   3. MENU A TENDINA
   Erano il controllo grezzo del browser. Qui si rifinisce la parte
   che il CSS puo' davvero toccare: il campo chiuso, la freccia, il
   passaggio del mouse e il focus.
   NOTA ONESTA: l'elenco che si apre e' disegnato dal sistema
   operativo e NON e' animabile via CSS. Per animarlo servirebbe
   sostituire il <select> con un componente scritto a mano.
══════════════════════════════════════════════════════════ */
select.inox-input, .inox-sg-sort {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23221816' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
select.inox-input:hover, .inox-sg-sort:hover { border-color: var(--inox-primary-action, #dc3935); }

/* ══════════════════════════════════════════════════════════
   3-bis. NIENTE SCORRIMENTO ORIZZONTALE
   Il pannello categorie (.inox-sidebar), da chiuso, resta parcheggiato a
   x=-560 e continua a contare nell'area scorrevole: a 1024px produceva
   71px di scorrimento laterale sulla scheda prodotto e 107px sulla home.
   Difetto preesistente, su tutte le pagine.
   Si usa "clip" e non "hidden" di proposito: "hidden" creerebbe un
   contenitore di scorrimento e romperebbe gli elementi in "position: sticky"
   (fra cui la scheda riepilogo della descrizione). "clip" taglia e basta.
══════════════════════════════════════════════════════════ */
html, body { overflow-x: clip; }

/* ...ma "clip" non basta per il pannello categorie, ed e' un difetto che si
   vedeva su OGNI pagina del sito. Da chiuso il pannello resta parcheggiato a
   x=-560 in "position: fixed", e gli elementi fissi sfuggono al ritaglio di un
   antenato che non ha ne' transform ne' filter. La sua ombra
   (24px 0 60px rgba(0,0,0,.45)) sporgeva quindi oltre il bordo sinistro dello
   schermo: una velatura scura permanente sui primi ~60px di ogni pagina, che
   si notava soprattutto sulle sezioni chiare.
   L'ombra ha senso solo quando il pannello e' aperto e deve staccarsi dalla
   pagina sotto: si accende con lo stato "is-open". */
.inox-sidebar { box-shadow: none !important; }
.inox-sidebar.is-open { box-shadow: 24px 0 60px rgba(0, 0, 0, .45) !important; }

/* La barra in alto non ci stava piu' fra i 900 e i 1150px: con le icone
   ingrandite, burger + logo + menu + ricerca da 380px + azioni superavano la
   larghezza disponibile e i pulsanti Account/Carrello finivano oltre il bordo
   (misurato: a 1024px arrivavano a 1131, 107px di troppo).
   Sotto i 1150 il menu principale si nasconde — le stesse voci sono nel
   pannello del burger — e la ricerca puo' restringersi. */
@media (max-width: 1150px) {
  .inox-main-nav { display: none; }
  .inox-search-wrap { flex: 1 1 200px; min-width: 120px; }
}

/* Sui telefoni stretti (misurato a 360px, iPhone SE) il gruppo dei comandi in
   alto a destra usciva dallo schermo: con "overflow-x: clip" non compariva
   alcuna barra di scorrimento, ma il carrello finiva tagliato fuori.
   La causa non erano le icone: .inox-header-inner porta 32px di rientro per
   lato anche qui, e su 360px lasciano 266px utili a un contenuto che ne chiede
   320 (burger 40 + logo 118 + ricerca 40 + comandi 86, piu' tre spazi da 12).
   !important perche' l'header ha un foglio di stile suo (headinox.css,
   inlineato su ogni pagina) di cui non controllo l'ordine di caricamento:
   misurato, senza forzare il rientro restava a 32px. */
@media (max-width: 420px) {
  .inox-header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* Con 6px la riga si impacchettava a sinistra e restavano 42px di vuoto a
       destra, contro i 25 a sinistra: sembrava spostata. 12px distribuiscono
       quel vuoto fra gli elementi e pareggiano i due margini. */
    gap: 12px !important;
  }
  /* (il logo si accorcia a 96px: la regola sta accanto a quella che ne fissa la
     misura, piu' in alto nel file, per una questione di ordine fra !important) */
  /* Account e carrello erano finiti a 2px l'uno dall'altro: nel far rientrare
     la riga avevo stretto molto piu' del necessario, e sembravano un blocco
     unico. Con il logo accorciato lo spazio c'e' — misurato, avanza comunque
     margine sulla pagina piu' affollata (shop a 360px), dove la riga e' piu'
     piena che sulla home. */
  .inox-actions-group { gap: 10px !important; }
  .inox-action-btn { padding: 3px 9px !important; }
}

/* ══════════════════════════════════════════════════════════
   4. FOCUS DA TASTIERA
   Requisito di accessibilita', non un vezzo: chi naviga da tastiera
   deve vedere dove si trova. :focus-visible non disturba chi usa il mouse.
══════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--inox-primary-action, #dc3935);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════
   5. LARGHEZZA — meno vuoto ai lati
   Misurato: l'header era bloccato a 1440px, quindi su uno schermo
   da 1920 restavano 240px vuoti per lato. Il contenuto sale a
   1720px e i margini laterali scendono da 240 a 100px.
══════════════════════════════════════════════════════════ */
.inox-header-inner { max-width: 1720px !important; padding-left: 32px; padding-right: 32px; }
.ico-section, .ico-cred-inner, .inox-sg-wrap { max-width: 1720px; }
/* .fnx-wrap era fermo a 1300px e comanda il contenuto di 7 pagine (categoria,
   chi siamo, contatti, marchi, spedizioni, privacy, termini): 310px vuoti per
   lato su uno schermo da 1920, e per di piu' disallineato con l'header.
   Portato alla stessa larghezza dell'header, cosi' le colonne coincidono. */
.fnx-wrap, .fnx-grid.fnx-wrap { max-width: 1720px !important; }
.ico-page, .ico-page-hero { max-width: 1720px; margin-left: auto; margin-right: auto; }

/* ── BARRA PIU' SOTTILE ──
   Era alta 143px. Misurato cosa la determinava: il logo occupava 82px di altezza
   (l'avevo fissato io per riservargli lo spazio), piu' 32px di spaziatura interna
   e 28 esterna. Qui il logo scende a 118x60 — proporzione esatta dell'originale
   1999x1023, quindi non si deforma e lo spazio resta comunque riservato — e le
   spaziature si stringono. Le icone restano piu' grandi di com'erano in origine. */
.inox-header-main { padding-top: 8px !important; padding-bottom: 8px !important; }
.inox-header-inner { padding-top: 10px !important; padding-bottom: 10px !important; }
.inox-action-btn i { font-size: 21px !important; }
.inox-action-btn { padding: 3px 10px; gap: 2px; }
.inox-action-label { font-size: 11px; }
.inox-search-input { padding-top: 9px !important; padding-bottom: 9px !important; }
/* Il bottone e' una colonna flessibile senza align-items: le barre si allineavano
   al bordo sinistro. Con la larghezza portata da 38 a 44px lo scarto e' diventato
   evidente e l'evidenziazione al passaggio del mouse sembrava storta:
   centro barre 16px contro centro bottone 22px, 6px fuori asse. */
.inox-burger-btn {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.inox-burger-btn span { width: 23px; }
.inox-search-btn i { font-size: 17px; }
.inox-search-mobile-btn { font-size: 21px; width: 40px; height: 40px; }
.inox-cart-count { min-width: 18px; height: 18px; font-size: 10.5px; }
.inox-logo img { width: 118px !important; height: 60px !important; object-fit: contain; }
/* Sui telefoni stretti questa misura non ci sta: a 360px la riga dell'header
   chiede piu' spazio di quanto ce ne sia, e il logo e' l'elemento meno denso di
   informazione — e' una scritta, resta leggibile a 96px. L'altezza non cambia,
   quindi la riga non si alza ne' si abbassa: con "contain" il logo si limita a
   centrarsi nel riquadro, senza deformarsi.
   Sta QUI e non nella media query dei telefoni piu' in fondo al file: la regola
   sopra e' "!important", e fra due dichiarazioni forzate di pari specificita'
   vince l'ultima scritta. Messa in fondo perdeva, e il logo restava a 118px
   mentre i comandi si stringevano per fargli posto. */
@media (max-width: 420px) {
  .inox-logo img { width: 96px !important; }
}

/* ══════════════════════════════════════════════════════════
   6. VOCI DEL MENU — la sottolineatura nasce dal centro
   e la parola si solleva.
   La riga sta sul <li>, che non si muove: cosi' il testo puo'
   salire mentre la sottolineatura resta ferma in basso.
   Si anima transform, mai width: nessun ricalcolo di layout.
══════════════════════════════════════════════════════════ */
.inox-main-nav-menu a::after { content: none; }   /* annulla la versione precedente */
.inox-main-nav-menu li { position: relative; padding-bottom: 10px; }
.inox-main-nav-menu li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px;
  /* NON currentColor: la riga sta sul <li>, che non eredita il bianco del link
     (quello e' forzato con !important sull'<a>). Con currentColor usciva
     rgb(28,25,23), cioe' quasi nera su header scuro: invisibile.
     Il rosso del marchio si vede sia sull'header scuro sia su quello
     trasparente sopra l'hero. */
  background: var(--inox-primary-action, #dc3935);
  transform: scaleX(0);
  transform-origin: center;          /* ← nasce dal centro e si apre ai lati */
  /* 420ms con curva simmetrica: prima erano 300ms con una curva che al 40%
     del tempo era gia' al 59% del percorso, e l'occhio la leggeva come istantanea. */
  transition: transform 420ms cubic-bezier(.65, 0, .35, 1);
}
.inox-main-nav-menu li:hover::after,
.inox-main-nav-menu li:focus-within::after { transform: scaleX(1); }
.inox-main-nav-menu a {
  display: inline-block;
  /* lo spostamento era di 3px: impercettibile. Portato a 6px con una curva
     leggermente elastica, cosi' il sollevamento si vede davvero. */
  transition: transform 320ms cubic-bezier(.34, 1.4, .64, 1), color .25s ease;
}
.inox-main-nav-menu li:hover a,
.inox-main-nav-menu li:focus-within a { transform: translateY(-6px); }
.inox-main-nav-menu li:has(a[aria-current="page"])::after {
  transform: scaleX(1);
  background: var(--inox-primary-action, #dc3935);
}

/* ══════════════════════════════════════════════════════════
   7. SCHEDE "COME LAVORIAMO" — entrata animata e sfondo decorato
   Erano quattro riquadri piatti su fondo pieno.
══════════════════════════════════════════════════════════ */
.ico-cred {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(1100px 460px at 12% -10%, rgba(220, 57, 53, 0.16), transparent 62%),
    radial-gradient(760px 380px at 96% 108%, rgba(0, 109, 158, 0.14), transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
}
/* velatura granulosa: toglie l'effetto "vettoriale piatto" */
.ico-cred::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.ico-cred-inner { position: relative; z-index: 1; }
.ico-cred-item {
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, background-color .28s;
  border-radius: 14px;
}
.ico-cred-item:hover {
  transform: translateY(-5px);
  background-color: rgba(255,255,255,.045);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
/* Entrata a cascata. Prima erano 26px di scorrimento e si leggeva solo come una
   dissolvenza. Ora la scheda arriva da 56px piu' in basso, leggermente rimpicciolita
   e inclinata: si vede che ENTRA, non che "compare".
   La curva ha un piccolo rimbalzo finale, cosi' si posa invece di fermarsi di colpo. */
.ico-cred-item.inox-entra {
  opacity: 0;
  transform: translateY(56px) scale(.94);
}
.ico-cred-item.inox-entrato {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .55s ease-out,
              transform .78s cubic-bezier(.22, 1.15, .36, 1);
}

/* ══════════════════════════════════════════════════════════
   9. DESCRIZIONE COMPLETA della scheda prodotto
   La sezione la stampa catpro; qui c'e' solo il suo aspetto, cosi'
   resta modificabile senza rimettere le mani nel PHP del widget.
══════════════════════════════════════════════════════════ */
/* Allineamento: misurato, galleria e correlati partono da x=40 (padding 40px del
   loro contenitore) mentre la descrizione partiva da x=0 — 40px fuori asse, si
   vedeva incollata al bordo. E su schermo largo la scheda prodotto andava da
   bordo a bordo mentre l'header e' a 1720 centrato: ora coincidono. */
.inox-pd-inner, .inox-rp-inner, .inox-pd-full {
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
}
/* Dentro la griglia non serve piu' ne' il rientro laterale (ce l'ha gia' la
   colonna) ne' la larghezza massima propria. */
.inox-pd-full {
  margin-top: 26px;
  /* lo spazio in fondo mancava del tutto: il pulsante finiva a filo del blocco */
  padding: 26px 0 10px;
  max-width: none;
  border-top: 1px solid var(--inox-outline-variant, #e7e5e4);
}
.inox-pd-full-body { max-width: none; }

/* ══════════════════════════════════════════════════════════
   10. SCHEDA PRODOTTO A TRE COLONNE
   galleria · contenuto · riquadro d'acquisto
   .inox-pd-info diventa "display: contents": sparisce come scatola e i suoi
   figli diventano celle della griglia esterna. Cosi' il riquadro d'acquisto
   puo' andare in terza colonna e il resto del testo in seconda, senza dover
   spostare altro markup.
   !important sulle colonne perche' il widget le scopa con un selettore di ID.
══════════════════════════════════════════════════════════ */
/* ── Immagine prodotto piu' grande ──
   Le foto dei fornitori sono quadrate (misurato: 1024x1024) ma la cornice era in
   formato 4:3: con l'adattamento "contieni" la foto si rimpiccioliva fino a
   starci in altezza e restava 314x314 dentro un riquadro largo 418, con bande
   bianche ai lati. Cornice quadrata + colonna piu' larga: la foto passa da
   314px a 500px di lato, oltre il 50% in piu'.
   Resta "contain", quindi le foto non quadrate non si deformano. */
.inox-pd-gallery img { aspect-ratio: 1 / 1 !important; object-fit: contain; }
.inox-pd-main-wrap { aspect-ratio: 1 / 1; }

.inox-pd-inner {
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr) 340px !important;
  /* SOLO spazio fra le colonne. Con "gap" pieno lo spazio valeva anche fra le
     righe: galleria e riquadro ne attraversano 24, e 23 intervalli da 44px
     aggiungevano oltre 1000px di vuoto sotto la scheda. */
  column-gap: 44px !important;
  row-gap: 0 !important;
  align-items: start;
}
/* !important obbligatorio: il widget imposta "#uid .inox-pd-info { display: flex }"
   con un selettore di ID, che vince su qualunque classe. Senza forzare, .inox-pd-info
   resta un contenitore flessibile, i suoi figli non diventano celle della griglia
   esterna e il riquadro d'acquisto finisce in seconda colonna invece che in terza
   (verificato: grid-column risultava "3 / auto" ma inerte). */
.inox-pd-info { display: contents !important; }
/* galleria e riquadro occupano tutta l'altezza: "span 24" e' un numero
   volutamente alto, tante piu' righe di quante ne servano al centro */
.inox-pd-gallery { grid-column: 1; grid-row: 1 / span 24; }
.inox-pd-buybox  { grid-column: 3; grid-row: 1 / span 24; position: sticky; top: 104px; }
.inox-pd-info > *:not(.inox-pd-buybox) { grid-column: 2; }
/* La descrizione ora sta DENTRO la griglia, in colonna centrale: e' l'unico
   contenuto presente su tutti i 4.250 prodotti, e senza di lei quella colonna
   restava vuota sotto i punti elenco. (Le specifiche tecniche strutturate non
   esistono in catalogo: verificato su 500 prodotti, solo la Marca e' compilata.) */
.inox-pd-full { grid-column: 2; }

.inox-pd-buybox {
  background: var(--inox-white, #fff);
  border: 1px solid var(--inox-outline-variant, #e7e5e4);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 12px rgba(31, 20, 16, .06);
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* dentro il riquadro i margini di fondo dei singoli blocchi creavano buchi
   irregolari: qui li governa un unico ritmo verticale */
.inox-pd-buybox > * { margin-bottom: 14px !important; }
.inox-pd-buybox > *:last-child { margin-bottom: 0 !important; }
.inox-pd-buybox .inox-pd-price-main { font-size: clamp(30px, 3vw, 40px); }

/* La scheda "In sintesi" sotto la descrizione ora sarebbe un doppione del
   riquadro d'acquisto: si toglie e la descrizione prende tutta la larghezza. */
.inox-pd-full-aside { display: none; }
.inox-pd-full-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.inox-pd-full-main { min-width: 0; }
.inox-pd-full-aside { position: sticky; top: 104px; }
.inox-pd-aside-card {
  background: var(--inox-white, #fff);
  border: 1px solid var(--inox-outline-variant, #e7e5e4);
  border-radius: 14px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 10px rgba(31, 20, 16, .05);
}
.inox-pd-aside-tit {
  font-family: var(--inox-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--inox-text-muted, #78716c);
  margin: 0 0 16px;
}
.inox-pd-aside-list { margin: 0; font-family: var(--inox-font-body); font-size: 14px; }
.inox-pd-aside-list dt {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--inox-text-muted, #78716c);
  margin-top: 14px;
}
.inox-pd-aside-list dt:first-child { margin-top: 0; }
.inox-pd-aside-list dd {
  margin: 3px 0 0;
  font-weight: 600;
  color: var(--inox-text, #37322f);
  line-height: 1.45;
}
.inox-pd-aside-prezzo {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--inox-outline-variant, #e7e5e4);
  font-family: var(--inox-font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--inox-text, #37322f);
  line-height: 1.15;
}
.inox-pd-aside-prezzo del { font-size: 16px; font-weight: 400; opacity: .55; margin-right: 8px; }
.inox-pd-aside-cta {
  display: block;
  margin-top: 16px;
  text-align: center;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--inox-primary-action, #dc3935);
  color: #fff;
  font-family: var(--inox-font-body);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .14s ease;
}
.inox-pd-aside-cta:hover { box-shadow: 0 6px 18px rgba(220, 57, 53, .3); }
.inox-pd-aside-cta:active { transform: scale(.97); }

/* Fra 1024 e 1280 la colonna centrale diventerebbe troppo stretta con la
   galleria a 500: qui le tre colonne si restringono in proporzione. */
@media (max-width: 1280px) {
  .inox-pd-inner { grid-template-columns: minmax(0, 380px) minmax(0, 1fr) 300px !important; column-gap: 32px !important; }
}

/* Sotto i 1024px il riquadro d'acquisto smette di essere agganciato (su schermo
   stretto darebbe fastidio) e la descrizione perde il rientro laterale
   aggiuntivo: quello lo da' gia' la colonna, e sommandosi la faceva partire
   24px piu' dentro di immagine e titolo. */
@media (max-width: 1024px) {
  .inox-pd-buybox { position: static; }
  .inox-pd-full { padding-left: 0; padding-right: 0; }
}

/* ── Tablet: 641-1024px, due colonne ──
   Impilare tutto a colonna unica anche qui era sbagliato: la cornice della foto
   e' quadrata, quindi a tutta larghezza diventava un quadrato di 768 o 1024px di
   lato — una sola immagine piu' alta dello schermo, e il prezzo spinto sotto la
   piega. Con due colonne la foto resta proporzionata e il prezzo si vede subito. */
@media (max-width: 1024px) and (min-width: 641px) {
  .inox-pd-inner {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr) !important;
    column-gap: 32px !important;
    row-gap: 20px !important;
    /* Misurato a 768px: rientro laterale ZERO, la foto toccava il bordo dello
       schermo mentre i prodotti correlati poco sotto ne avevano 24. Il valore
       arriva dall'istanza salvata in _elementor_data, che vince sui default
       dichiarati nel PHP del widget (40 desktop / 24 tablet / 16 telefono):
       per la fascia tablet qualcuno l'ha salvato a 0. Elementor lo scrive con
       un selettore di ID, da cui !important. 24px per pareggiare i correlati. */
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .inox-pd-gallery { grid-column: 1 !important; grid-row: 1 / span 24 !important; }
  .inox-pd-inner > *:not(.inox-pd-gallery),
  .inox-pd-info > * { grid-column: 2 !important; grid-row: auto !important; }
}

/* ── Telefono: fino a 640px, colonna unica ── */
@media (max-width: 640px) {
  .inox-pd-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    /* separati: con "gap" pieno lo spazio valeva anche fra le colonne, che qui
       non esistono piu', e rubava larghezza alla traccia unica */
    column-gap: 0 !important;
    row-gap: 26px !important;
  }
  /* Selettore volutamente onnicomprensivo. Bastava che UN figlio restasse in
     "grid-column: 2" — era il caso di .inox-pd-full — perche' il browser
     creasse una seconda colonna IMPLICITA di tipo auto: quella si prendeva 332
     dei 358px disponibili e la traccia esplicita "1fr" collassava a ZERO
     (misurato a 390px: grid-template-columns risultava "0px 332px").
     Immagine, titolo, descrizione breve e riquadro d'acquisto stavano tutti in
     quella colonna larga zero: il titolo andava a capo su ogni parola, il
     pulsante d'acquisto era largo 46px e i blocchi si sovrapponevano.
     Riportando ogni figlio in colonna 1 il guasto non si ripresenta, nemmeno
     se domani si aggiunge un blocco alla scheda.
     !important necessario e misurato: "*" non pesa nulla nel calcolo della
     specificita', mentre ":not(.inox-pd-buybox)" pesa come una classe. Senza
     forzare, ".inox-pd-info > *" (una classe) perde contro
     ".inox-pd-info > *:not(.inox-pd-buybox)" (due classi) e titolo e
     descrizione restavano in colonna 2 — la malattia identica, a specchio. */
  .inox-pd-inner > *,
  .inox-pd-info > * { grid-column: 1 !important; grid-row: auto !important; }

  /* Ordine di lettura da telefono: percorso, foto, titolo, prezzo e acquisto,
     poi il testo. Il prezzo prima della descrizione e non dopo — impilando la
     scheda cosi' com'era finiva sotto 577px di elenco puntato. */
  .inox-pd-breadcrumb { order: 1; }
  .inox-pd-gallery    { order: 2; }
  .inox-pd-title      { order: 3; }
  .inox-pd-buybox     { order: 4; }
  .inox-pd-desc       { order: 5; }
  .inox-pd-full       { order: 6; }
}

/* ── Telefono, misure ──
   Impilare non basta: le proporzioni pensate per il desktop restano
   sproporzionate su 390px di larghezza. */
@media (max-width: 640px) {
  .inox-pd-inner { row-gap: 20px !important; }
  .inox-pd-title { font-size: clamp(21px, 5.6vw, 27px); line-height: 1.24; }
  .inox-pd-full-tit { font-size: 20px; }
  .inox-pd-buybox { padding: 18px 16px; border-radius: 12px; }
  .inox-pd-buybox .inox-pd-price-main { font-size: 32px; }
  .inox-pd-full { margin-top: 20px; padding-top: 22px; }
  .inox-pd-full-body { font-size: 15px; }
  /* Misurato: 11px in maiuscoletto spaziato, sotto la soglia in cui il testo
     resta leggibile a distanza di braccio. !important perche' catpro lo
     dichiara come "#uid .inox-pd-avail-label": selettore di ID, vince sempre
     per specificita' e l'ID cambia a ogni istanza, quindi non e' agganciabile. */
  .inox-pd-avail-label { font-size: 12.5px !important; letter-spacing: .05em !important; }
  /* Bersagli tattili: sotto i ~44px il dito manca il comando. */
  .inox-pd-btn-cart,
  .inox-pd-btn-quote,
  .inox-pd-full-toggle { min-height: 48px; }
  /* Su schermo stretto un comando a tutta larghezza si prende meno di quanto
     costi al pollice raggiungerlo di lato. */
  .inox-pd-full-toggle { width: 100%; justify-content: center; }
  .inox-pd-thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.inox-pd-full-tit {
  font-family: var(--inox-font-head);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.inox-pd-full-body {
  font-family: var(--inox-font-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--inox-text, #37322f);
  /* misura di lettura: oltre i ~75 caratteri per riga l'occhio perde la riga */
  max-width: 78ch;
}
.inox-pd-full-body h2,
.inox-pd-full-body h3 {
  font-family: var(--inox-font-head);
  font-size: 18px;
  font-weight: 700;
  margin: 26px 0 10px;
}
.inox-pd-full-body h2:first-child,
.inox-pd-full-body h3:first-child { margin-top: 0; }
.inox-pd-full-body p { margin: 0 0 14px; }
.inox-pd-full-body ul,
.inox-pd-full-body ol { margin: 0 0 16px; padding-left: 22px; }
.inox-pd-full-body li { margin-bottom: 7px; }
.inox-pd-full-body strong { font-weight: 700; color: var(--inox-text, #37322f); }
.inox-pd-full-body img { max-width: 100%; height: auto; }
.inox-pd-full-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.inox-pd-full-body td, .inox-pd-full-body th { padding: 8px 10px; border-bottom: 1px solid var(--inox-outline-variant, #e7e5e4); text-align: left; }

/* Taglio visivo: il testo e' TUTTO nel documento (quindi indicizzabile),
   qui viene solo nascosto finche' non lo si chiede. */
.inox-pd-full-body.inox-troncata {
  max-height: 360px;
  overflow: hidden;
  position: relative;
  /* La dissolvenza partiva al 62%: circa 130px, tre o quattro righe fantasma
     semitrasparenti prima del pulsante, che sembravano un errore di stampa.
     All'88% sfuma solo l'ultima riga, quel tanto che basta a far capire che
     il testo continua. */
  -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
          mask-image: linear-gradient(#000 88%, transparent 100%);
}
/* Il pulsante era a 14px dal testo sbiadito e con zero spazio sotto: sembrava
   appiccicato alla fine del paragrafo invece di essere un comando.
   Ora e' staccato, con una cornice che lo rende riconoscibile come tale. */
.inox-pd-full-toggle {
  margin-top: 22px;
  background: var(--inox-white, #fff);
  border: 1px solid var(--inox-outline-variant, #e7e5e4);
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-family: var(--inox-font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--inox-primary-action, #dc3935);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: gap .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.inox-pd-full-toggle:hover {
  gap: 13px;
  border-color: var(--inox-primary-action, #dc3935);
  box-shadow: 0 4px 14px rgba(220, 57, 53, .14);
}
.inox-pd-full-toggle::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.inox-pd-full-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

/* ══════════════════════════════════════════════════════════
   10-bis. GLI ELENCHI DELLA DESCRIZIONE
   Misurato sui forni a convezione: 30 voci di elenco di mediana per scheda
   (le altre famiglie stanno fra 2 e 5), e su un telefono da 390px la
   descrizione era alta 2.171px — 5,7 schermate, il 58% della pagina.
   Ogni voce occupava 34px: 27 di riga piu' 7 di margine.

   Qui si tocca solo l'IMPAGINAZIONE: nessuna parola viene aggiunta o tolta,
   e le voci nascoste restano tutte nel documento — quindi indicizzabili,
   come il testo dietro al «Leggi tutto».

   La regola scatta sul NUMERO DI VOCI, non sulla categoria: si applica da
   sola dove serve e lascia in pace gli elenchi da tre righe.
══════════════════════════════════════════════════════════ */

.igs-product-description ul { list-style: none; margin: 0 0 18px; padding: 0; }
.igs-product-description ul li {
  position: relative;
  padding-left: 16px;
  margin: 0 0 2px;
  line-height: 1.5;
}
/* Il segno e' ancorato alla PRIMA RIGA di testo (top in em), non centrato sul
   blocco: su una voce che va a capo un quadratino a meta' altezza sembra
   fuori posto. */
.igs-product-description ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--inox-primary-action, #b3121b);
  opacity: .55;
}

/* Elenchi lunghi: se ne mostrano sei, il resto si apre con un tocco. */
.igs-product-description ul[data-lungo] li[hidden] { display: none; }
.igs-product-description .igs-altre {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 0; padding: 7px 14px;
  font-family: var(--inox-font-body);
  font-size: 14px; font-weight: 500; line-height: 1;
  /* NON var(--inox-primary-action): quel token vale #dc3935, che su fondo
     bianco da' 4,30:1 — sotto la soglia di 4,5. Il rosso «luce» del sito
     (#b3121b, quello del pulsante fantasma) sta a 6,96:1. Misurato, non
     dedotto: un contrasto che manca per due decimi resta un contrasto che
     manca. */
  color: #b3121b;
  background: transparent;
  border: 1px solid rgba(179, 18, 27, .35);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}
.igs-product-description .igs-altre:hover {
  background: rgba(179, 18, 27, .06);
  border-color: rgba(179, 18, 27, .6);
}
.igs-product-description .igs-altre:active { transform: translateY(1px); }
.igs-product-description .igs-altre::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.igs-product-description .igs-altre[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-1px);
}

/* La chiusa del blocco optional e' un commento sull'intero elenco, non una
   voce: nel catalogo e' lunga 186 caratteri contro i 40 di mediana. */
.igs-product-description p.igs-nota {
  margin: 12px 0 0;
  font-size: .94em; line-height: 1.5; font-style: italic;
  color: var(--inox-text-muted, #5b6469);
}

/* Da tablet in su lo spazio c'e': due colonne invece del collasso. Su un
   telefono due colonne da 170px sarebbero illeggibili. */
@media (min-width: 640px) {
  .igs-product-description ul[data-lungo] { columns: 2; column-gap: 36px; }
  .igs-product-description ul[data-lungo] li {
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
  .igs-product-description ul[data-lungo] li[hidden] { display: list-item; }
  .igs-product-description .igs-altre { display: none; }
}
/* Su telefono il comando dev'essere premibile col pollice, come il
   «Leggi tutto» qui sopra. */
@media (max-width: 639px) {
  .igs-product-description .igs-altre { min-height: 44px; padding: 0 16px; }
}

/* ══════════════════════════════════════════════════════════
   11. CHECKOUT — riquadro di pagamento Stripe
   Arrivava con lo sfondo lilla di WooCommerce (rgb(220,215,226)) e una
   cornice annidata: sembrava un pezzo incollato da un altro sito.
   Qui prende le superfici e i raggi del resto del negozio.
══════════════════════════════════════════════════════════ */
.woocommerce-checkout .payment_box,
.woocommerce-checkout .payment_box.payment_method_stripe {
  background: var(--inox-white, #fff) !important;
  border: 1px solid var(--inox-outline-variant, #e7e5e4);
  border-radius: 12px;
  padding: 18px !important;
  margin: 12px 0 0 !important;
  color: var(--inox-text, #37322f);
  font-family: var(--inox-font-body);
  font-size: 14px;
  line-height: 1.6;
}
/* WooCommerce disegna una punta triangolare sopra il riquadro: con il fondo
   bianco resta un dentino grigio a mezz'aria. */
.woocommerce-checkout .payment_box::before { display: none !important; }
.woocommerce-checkout .wc_payment_methods { padding: 0 !important; list-style: none; margin: 0; }
.woocommerce-checkout .wc_payment_method > label {
  font-family: var(--inox-font-body);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.woocommerce-checkout .payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout .payment_box a { color: var(--inox-primary-action, #dc3935); }

/* L'avviso "prodotto aggiunto al carrello" era verde con una cornice rossa
   spessa: due colori che si contraddicono. Verde e basta, senza bordo urlato. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: 12px !important;
  border: 1px solid rgba(22, 101, 52, .18) !important;
  border-top-width: 1px !important;
  font-family: var(--inox-font-body);
  padding: 14px 18px !important;
}
.woocommerce-error { border-color: rgba(186, 26, 26, .22) !important; }

/* ══════════════════════════════════════════════════════════
   12. CHECKOUT — dai tre riquadri affiancati a un percorso in colonna
   Prima: tre colonne uguali da 417px. La seconda ("Metodo di Consegna")
   era quasi vuota, e il modulo di pagamento di Stripe stava schiacciato
   in 417px mentre i suoi campi ne vorrebbero il doppio.
   Ora: i passi si leggono uno sotto l'altro nella colonna principale, e
   il riepilogo resta agganciato a destra mentre si compila. E' il modello
   piu' collaudato per un checkout, e risolve da solo la colonna vuota.
══════════════════════════════════════════════════════════ */
.ico-grid {
  grid-template-columns: minmax(0, 1fr) 380px !important;
  column-gap: 34px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
/* le colonne spariscono come scatole: le schede diventano celle della griglia */
.ico-col { display: contents !important; }
.ico-card { grid-column: 1; margin-bottom: 22px; }
.ico-summary-card {
  grid-column: 2;
  grid-row: 1 / span 30;
  position: sticky;
  top: 100px;
  margin-bottom: 0;
}

/* ── Un solo pulsante di conferma ──
   Ce n'erano DUE, entrambi con id="place_order". Si tiene quello NATIVO,
   perche' e' il primo del documento ed e' quello che getElementById
   restituisce agli script di WooCommerce e Stripe: nascondere quello e
   lasciare l'altro visibile darebbe un pulsante senza gestori.
   L'identificativo duplicato resta comunque nel markup e va tolto lato PHP
   (task 44): questa e' una riduzione del danno, non la soluzione. */
.ico-summary-card .ico-btn-checkout { display: none !important; }
.woocommerce-checkout #place_order {
  width: 100%;
  display: block;
  margin-top: 18px;
  padding: 17px 24px;
  border: none;
  border-radius: 12px;
  background: var(--inox-primary-action, #dc3935);
  color: #fff;
  font-family: var(--inox-font-body);
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .14s ease, background-color .2s ease;
}
.woocommerce-checkout #place_order:hover { box-shadow: 0 8px 22px rgba(220, 57, 53, .32); }
.woocommerce-checkout #place_order:active { transform: scale(.985); }
.woocommerce-checkout #place_order:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* il modulo di pagamento ora ha spazio: gli iframe di Stripe smettono di
   comprimere i campi su piu' righe */
.woocommerce-checkout .payment_box { max-width: 620px; }
.ico-consegna-nota {
  font-family: var(--inox-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--inox-text, #37322f);
  margin: 4px 0 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; }
.woocommerce-checkout .form-row.validate-required label .required { color: var(--inox-primary-action, #dc3935); }

@media (max-width: 1024px) {
  .ico-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ico-card, .ico-summary-card { grid-column: 1; grid-row: auto; position: static; }
}

/* ══════════════════════════════════════════════════════════
   8. Chi ha chiesto meno movimento non lo subisce
══════════════════════════════════════════════════════════ */
/* Chi ha spento gli effetti nel sistema chiede di non subire SPOSTAMENTI, non di
   avere un'interfaccia morta: una dissolvenza non provoca disagio vestibolare ed
   e' considerata accettabile. Quindi qui si tolgono scivolamenti e rimpicciolimenti,
   ma si tiene una comparsa graduale in opacita'.
   Prima invece era "transition: none" su tutto: colore e spessore cambiavano ma
   nessun effetto partiva, e il risultato sembrava semplicemente rotto. */
@media (prefers-reduced-motion: reduce) {
  /* niente movimento */
  .inox-product-card:hover,
  .inox-main-nav-menu li:hover a,
  .inox-main-nav-menu li:focus-within a,
  .ico-cred-item:hover,
  .inox-btn-primary:active, .inox-btn-secondary:active,
  .ico-btn-primary:active, .ico-btn-secondary:active,
  .inox-quick-add:active, .inox-wishlist-btn:active { transform: none; }

  /* La sottolineatura CRESCE dal centro anche qui, per scelta esplicita del
     titolare. E' un'eccezione ponderata, non una svista: si tratta di una riga
     alta 3px che si allunga su ~70px, dentro un elemento fermo. Il disagio che
     la preferenza "riduci animazioni" vuole evitare nasce da movimenti ampi
     (scorrimenti, parallasse, rimpicciolimenti di interi blocchi), e quelli
     restano spenti qui sotto. Se un domani si volesse essere ortodossi,
     basta rimettere la dissolvenza al posto di queste tre righe.
     !important perche' tema ed Elementor applicano dentro questa stessa media
     query il reset "*, *::before, *::after { transition-duration: 0.01ms !important }":
     senza forzare, la durata torna a zero (misurato: 0,000001s). */
  .inox-main-nav-menu li::after {
    transform: scaleX(0);
    transform-origin: center;
    opacity: 1;
    transition: transform 420ms cubic-bezier(.65, 0, .35, 1) !important;
  }
  .inox-main-nav-menu li:hover::after,
  .inox-main-nav-menu li:focus-within::after { transform: scaleX(1); }
  .inox-main-nav-menu li:has(a[aria-current="page"])::after { transform: scaleX(1); }

  /* le schede non salgono: compaiono in dissolvenza, sempre a cascata */
  .ico-cred-item.inox-entra { opacity: 0; transform: none; }
  .ico-cred-item.inox-entrato { opacity: 1; transform: none; transition: opacity .5s ease-out !important; }
  .inox-product-card { transition: box-shadow .2s ease; }
}