/* ============================================================
   INOX GASTROPSHOP – Header & Footer Elementor Plugin
   Weblandia | v1.0.3
   ============================================================ */

:root {
  --inox-primary:      #dc3935;
  --inox-primary-dark: #c22f2c;
  --inox-bg-header:    #ffffff;
  --inox-bg-topbar:    #1f1410;
  --inox-bg-footer:    #2a1a10;
  --inox-bg-bottom:    #1a0e08;
  --inox-text:         #cccccc;
  --inox-text-muted:   #999999;
  --inox-white:        #ffffff;
  --inox-header-text:  #221816;
  --inox-header-border: #eee;
  --inox-border:       rgba(255,255,255,0.08);
  --inox-radius:       8px;
  --inox-transition:   0.25s ease;
  --inox-sidebar-w:    300px;
  --inox-container:    1600px;
  --inox-gap:          30px;
}

/* ── Container ── */
.inox-container {
  max-width: var(--inox-container);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ════════════════════════════════════════
   TOP BAR
════════════════════════════════════════ */
.inox-topbar {
  background-color: var(--inox-bg-topbar);
  border-bottom: 1px solid var(--inox-border);
  font-size: 13px;
  line-height: 1;
}
.inox-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.inox-topbar-left .inox-topbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.inox-topbar-left .inox-topbar-menu a {
  color: var(--inox-text);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--inox-transition);
}
.inox-topbar-left .inox-topbar-menu a:hover { color: var(--inox-primary); }
.inox-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.inox-topbar-contact {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--inox-text);
  font-size: 13px;
}
.inox-topbar-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--inox-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: color var(--inox-transition);
}
.inox-topbar-phone:hover { color: var(--inox-primary-dark); }

/* ── Language Switcher ── */
.inox-lang-switcher { display: flex; align-items: center; gap: 8px; }
.inox-lang-flag {
  display: flex; align-items: center; gap: 4px;
  text-decoration: none; color: var(--inox-text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  transition: opacity var(--inox-transition);
}
.inox-lang-flag:hover { opacity: 0.8; }
.inox-flag svg { display: block; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.inox-lang-label { color: var(--inox-text); text-transform: uppercase; }

/* ════════════════════════════════════════
   HEADER PRINCIPALE
════════════════════════════════════════ */
.inox-header-main {
  background-color: var(--inox-bg-header);
  border-bottom: 1px solid var(--inox-header-border);
  position: relative;
  z-index: 100;
}
.inox-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ── Burger ── */
.inox-burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.inox-burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--inox-header-text);
  border-radius: 2px;
  transition: all var(--inox-transition);
}
.inox-burger-btn:hover span { background-color: var(--inox-primary); }

/* ── Logo ── */
.inox-logo { flex-shrink: 0; }
.inox-logo a { display: block; line-height: 0; text-decoration: none; }
.inox-logo img { display: block; height: auto; }
.inox-logo-text { color: var(--inox-header-text); font-size: 22px; font-weight: 800; }

/* ── Nav principale (pagine) ── */
.inox-main-nav { margin-right: auto; flex-shrink: 0; }
.inox-main-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 26px;
}
.inox-main-nav-menu a {
  color: var(--inox-header-text);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: color var(--inox-transition);
  white-space: nowrap;
}
.inox-main-nav-menu a:hover { color: var(--inox-primary); }

/* ── Search Bar – DESKTOP ── */
.inox-search-wrap {
  flex: 0 1 380px;
  min-width: 160px;
  background: #f5f5f5;
  border: 1.5px solid #ebebeb;
  border-radius: var(--inox-radius);
  overflow: hidden;
  transition: border-color var(--inox-transition), background-color var(--inox-transition);
}
.inox-search-wrap:focus-within { border-color: var(--inox-primary); background: var(--inox-white); }
.inox-search-form { display: flex; align-items: stretch; }
.inox-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 11px 4px 11px 16px;
  font-size: 14px;
  background: transparent;
  color: #333;
  min-width: 0;
}
.inox-search-input::placeholder { color: #999; }
.inox-search-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--inox-transition);
}
.inox-search-btn i { color: var(--inox-primary); font-size: 16px; transition: color var(--inox-transition); }
.inox-search-btn:hover i { color: var(--inox-primary-dark); }

/* ── Search MOBILE: icona che apre campo espanso ── */
.inox-search-mobile-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  color: var(--inox-header-text);
  font-size: 20px;
  transition: color var(--inox-transition);
}
.inox-search-mobile-btn:hover { color: var(--inox-primary); }

/* overlay di ricerca mobile */
.inox-search-mobile-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9997;
  background: var(--inox-bg-header);
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  align-items: center;
  gap: 10px;
}
.inox-search-mobile-overlay.is-open {
  display: flex;
}
.inox-search-mobile-overlay .inox-search-form {
  flex: 1;
  border: 2px solid var(--inox-primary);
  border-radius: var(--inox-radius);
  overflow: hidden;
}
.inox-search-mobile-overlay .inox-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--inox-white);
  color: #333;
  min-width: 0;
  width: 100%;
}
.inox-search-mobile-overlay .inox-search-btn {
  background-color: var(--inox-primary);
  border: none;
  cursor: pointer;
  padding: 0 16px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inox-search-mobile-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--inox-white);
  font-size: 22px;
  padding: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.inox-search-mobile-close:hover { color: var(--inox-primary); }

/* ── Actions Group ── */
.inox-actions-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.inox-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--inox-header-text);
  padding: 4px 8px;
  border-radius: var(--inox-radius);
  transition: color var(--inox-transition);
  position: relative;
}
.inox-action-btn:hover { color: var(--inox-primary); }
.inox-action-btn i { font-size: 22px; line-height: 1; }
.inox-action-label { font-size: 11px; color: #777; white-space: nowrap; }
.inox-cart-icon-wrap { position: relative; display: inline-block; line-height: 0; }
.inox-cart-count {
  position: absolute;
  top: -8px; right: -10px;
  background-color: var(--inox-primary);
  color: var(--inox-white);
  font-size: 10px; font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.inox-sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
  opacity: 0; visibility: hidden;
  transition: opacity var(--inox-transition), visibility var(--inox-transition);
}
.inox-sidebar-overlay.is-open { opacity: 1; visibility: visible; }

.inox-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--inox-sidebar-w);
  height: 100%;
  background: #f5f0e8;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.inox-sidebar.is-open { transform: translateX(0); }
.inox-sidebar-inner { padding: 24px 0; }
.inox-sidebar-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: #555; font-size: 20px; padding: 6px; line-height: 1;
  transition: color var(--inox-transition);
}
.inox-sidebar-close:hover { color: var(--inox-primary); }
.inox-sidebar-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: #666;
  padding: 0 20px 12px; margin: 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.inox-sidebar-cats { list-style: none; margin: 0; padding: 10px 0; }
.inox-sidebar-cats li a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  color: #333;
  text-decoration: none; font-size: 14px;
  transition: background-color var(--inox-transition), color var(--inox-transition);
  border-left: 3px solid transparent;
}
.inox-sidebar-cats li a:hover {
  background-color: rgba(232,89,26,0.08);
  color: #222;
  border-left-color: var(--inox-primary);
}
.inox-sidebar-cats li a i { color: var(--inox-primary); font-size: 12px; width: 16px; flex-shrink: 0; }
.inox-cat-count { color: #888; font-size: 12px; margin-left: auto; }

/* menu WP in sidebar */
.inox-sidebar-menu { list-style: none; margin: 10px 0 0; padding: 0; }
.inox-sidebar-menu li a {
  display: block; padding: 11px 20px;
  color: #333; text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.inox-sidebar-menu li a:hover {
  background-color: rgba(232,89,26,0.08);
  border-left-color: var(--inox-primary);
  color: #222;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.inox-footer { background-color: var(--inox-bg-footer); }
.inox-footer-main { padding: 60px 0 40px; }
.inox-footer-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--inox-gap);
  align-items: start;
}
.inox-footer-col { color: var(--inox-text); }
.inox-footer-col:not(:first-child) {
  padding-left: calc(var(--inox-gap)/2);
  border-left: 1px solid var(--inox-border);
}
.inox-footer-logo { margin-bottom: 18px; }
.inox-footer-logo img { display: block; height: auto; max-width: 160px; }
.inox-footer-tagline { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.inox-footer-phone {
  display: block; color: var(--inox-primary);
  font-size: 22px; font-weight: 800;
  text-decoration: none; margin-bottom: 4px; line-height: 1.2;
}
.inox-footer-phone:hover { color: var(--inox-primary-dark); }
.inox-footer-phone-note { font-size: 12px; color: var(--inox-text-muted); margin: 0 0 20px; }
.inox-footer-socials { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.inox-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background-color: var(--inox-primary);
  color: var(--inox-white) !important;
  text-decoration: none; font-size: 15px;
  transition: background-color var(--inox-transition), transform var(--inox-transition);
}
.inox-social-icon:hover { background-color: var(--inox-primary-dark); transform: translateY(-2px); }
.inox-social-icon i { color: var(--inox-white) !important; }
.inox-footer-col-title {
  font-size: 16px; font-weight: 700; color: var(--inox-white);
  margin: 0 0 20px; padding-bottom: 10px; position: relative;
}
.inox-footer-col-title::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 30px; height: 2px; background-color: var(--inox-primary);
}
.inox-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inox-footer-links li a {
  color: var(--inox-text); text-decoration: none; font-size: 14px;
  transition: color var(--inox-transition), padding-left var(--inox-transition);
  display: block;
}
.inox-footer-links li a:hover { color: var(--inox-primary); padding-left: 6px; }
.inox-footer-contacts { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inox-footer-contacts li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--inox-text); }
.inox-footer-contacts li i { color: var(--inox-primary); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.inox-footer-contacts li a { color: var(--inox-text); text-decoration: none; transition: color var(--inox-transition); }
.inox-footer-contacts li a:hover { color: var(--inox-primary); }
.inox-app-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.inox-app-badge { display: block; transition: opacity var(--inox-transition); border-radius: 5px; overflow: hidden; }
.inox-app-badge:hover { opacity: 0.8; }
.inox-app-badge svg { display: block; }
.inox-footer-bottom {
  background-color: var(--inox-bg-bottom);
  padding: 14px 0;
  border-top: 1px solid var(--inox-border);
}
.inox-footer-bottom .inox-container { display: flex; align-items: center; justify-content: center; }
.inox-footer-bottom p { margin: 0; font-size: 13px; color: var(--inox-text-muted); text-align: center; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .inox-footer-grid { grid-template-columns: repeat(2,1fr); gap: 30px 24px; }
  .inox-footer-col:nth-child(3),
  .inox-footer-col:nth-child(1) { padding-left: 0; border-left: none; }
  .inox-footer-col:nth-child(3) { padding-top: 0; }
}

/* ── TABLET ── */
@media (max-width: 900px) {
  .inox-main-nav { display: none; }
}

@media (max-width: 768px) {
  .inox-topbar-left { display: none; }
  .inox-topbar-right { width: 100%; justify-content: center; }

  /* Nascondi barra ricerca desktop, mostra icona mobile */
  .inox-search-wrap { display: none; }
  .inox-search-mobile-btn { display: flex; }

  .inox-action-label { display: none; }
  .inox-header-inner { gap: 12px; }
}

/* ── MOBILE ── */
@media (max-width: 480px) {
  .inox-footer-grid { grid-template-columns: 1fr; }
  .inox-footer-col:not(:first-child) {
    padding-left: 0; border-left: none;
    border-top: 1px solid var(--inox-border);
    padding-top: 24px;
  }
  .inox-sidebar { width: 85vw; }
  .inox-topbar-contact { display: none; }

  .inox-footer-main { padding: 40px 0 30px; }
}

/* ============================================================
   SISTEMA DI DESIGN — "INDUSTRIAL DARK"  (luglio 2026)
   ------------------------------------------------------------
   PERCHE' STA QUI E NON NEI SINGOLI PLUGIN
   La vecchia palette rosa/pesca era duplicata in 7 blocchi :root
   separati (catpro, Account, Cart, Checkout, Global, Thank You,
   Landing). Modificarli uno per uno significava tenerli allineati
   a mano per sempre. Questo blocco li sovrascrive tutti da un
   unico punto usando il selettore `html:root`, che ha specificita'
   maggiore di `:root` e quindi vince a prescindere dall'ordine di
   caricamento dei plugin.
   Per cambiare i colori del sito, si modifica SOLO questo blocco.
   ------------------------------------------------------------
   Direzione: neutri caldi (scala "stone") + rosso brand come unico
   accento. Il rosa e' stato eliminato: per i siti B2B i gradienti
   rosa/viola sono un anti-pattern riconosciuto.
   ============================================================ */
html:root {
  /* --- Accento brand: invariato, viene dal logo --- */
  --inox-primary:            #a10412;
  --inox-primary-action:     #dc3935;
  --inox-primary-container:  #c42727;
  --inox-on-primary:         #ffffff;

  /* --- Neutri caldi (ex rosa) --- */
  --inox-secondary:           #44403c;
  --inox-secondary-container: #57534e;
  --inox-on-secondary:        #ffffff;

  --inox-bg:                 #fafaf9;
  --inox-surface:            #fafaf9;
  --inox-surface-low:        #f5f5f4;
  --inox-surface-container:  #e7e5e4;
  --inox-surface-high:       #d6d3d1;
  --inox-surface-highest:    #d6d3d1;
  --inox-surface-white:      #ffffff;
  --inox-surface-dim:        #e7e5e4;
  --inox-surface-dark:       #1c1917;

  --inox-text:               #1c1917;
  --inox-text-muted:         #57534e;
  --inox-text-on-dark:       #fafaf9;

  --inox-outline:            #a8a29e;
  --inox-outline-variant:    #e7e5e4;

  /* --- Fasce scure: nuovi token per le sezioni "showroom" --- */
  --inox-dark-bg:            #1c1917;
  --inox-dark-surface:       #292524;
  --inox-dark-border:        rgba(250,250,249,.12);
  --inox-dark-text:          #fafaf9;
  --inox-dark-text-muted:    #a8a29e;

  /* --- Tipografia --- */
  --inox-font-head: 'Space Grotesk', system-ui, sans-serif;
  --inox-font-body: 'DM Sans', system-ui, sans-serif;
}

/* I font vanno forzati perche' i plugin li ridichiarano nei propri blocchi. */
html:root .inox-widget,
html:root .ico-home,
html:root .ico-page,
html:root .ico-simple {
  font-family: var(--inox-font-body);
}
html:root .inox-widget h1, html:root .inox-widget h2, html:root .inox-widget h3,
html:root .ico-home h1,   html:root .ico-home h2,   html:root .ico-home h3,
html:root .ico-page h1,   html:root .ico-page h2,   html:root .ico-page h3,
html:root .inox-headline-lg, html:root .inox-headline-md, html:root .inox-headline-sm {
  font-family: var(--inox-font-head);
  letter-spacing: -.015em;
}

/* ── Fasce scure riutilizzabili ─────────────────────────────── */
.inox-band-dark {
  background: var(--inox-dark-bg);
  color: var(--inox-dark-text);
}
.inox-band-dark h1, .inox-band-dark h2, .inox-band-dark h3 { color: var(--inox-dark-text); }
.inox-band-dark p { color: var(--inox-dark-text-muted); }

/* ── Movimento discreto ─────────────────────────────────────── */
/* Comparsa in dissolvenza allo scroll: l'elemento parte visibile e
   viene nascosto dal JS solo se il browser supporta IntersectionObserver,
   cosi' senza JS il contenuto resta comunque leggibile. */
.inox-reveal { opacity: 0; transform: translateY(14px); }
.inox-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .inox-reveal, .inox-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  html:root *, html:root *::before, html:root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Header trasparente sopra l'hero ───────────────────────────
   Attivo solo sulle pagine che hanno un hero a tutta larghezza
   (la classe viene messa dal JS). Appena si scrolla, l'header
   diventa scuro e solido. Se il JS non parte, l'header resta
   nello stato solido di default: non si rompe nulla. */
.inox-header-main.is-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.inox-header-main.is-overlay .inox-main-nav-menu a,
.inox-header-main.is-overlay .inox-action-btn,
.inox-header-main.is-overlay .inox-action-label,
.inox-header-main.is-overlay .inox-search-mobile-btn {
  color: var(--inox-dark-text);
}
.inox-header-main.is-overlay .inox-burger-btn span { background-color: var(--inox-dark-text); }
/* Sopra la foto serve un campo semitrasparente, altrimenti il testo
   del placeholder sparisce sull'immagine. */
.inox-header-main.is-overlay .inox-search-wrap {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.inox-header-main.is-overlay .inox-search-input { color: #fff; }
.inox-header-main.is-overlay .inox-search-input::placeholder { color: rgba(255,255,255,.75); }
.inox-header-main.is-overlay .inox-search-btn i { color: #fff; }
/* Il logo e' rosso su fondo trasparente: aggiungo un'ombra per
   staccarlo dalle zone chiare della foto. */
.inox-header-main.is-overlay .inox-logo img { filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }

/* Stato dopo lo scroll: solido scuro */
.inox-header-main.is-overlay.is-scrolled {
  position: fixed;
  background: rgba(28,25,23,.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--inox-dark-border);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.inox-header-main.is-overlay.is-scrolled .inox-search-wrap { background: rgba(255,255,255,.1); }
.inox-header-main.is-overlay.is-scrolled .inox-logo img { filter: none; }

/* Le pagine con header in overlay non devono lasciare spazio bianco sopra l'hero. */
body.inox-has-overlay-header .ico-hero,
body.inox-has-overlay-header .inox-lh { margin-top: 0; }

/* ── Normalizzazione arancione + marrone ────────────────────────
   Elementor genera un CSS per singola istanza di widget
   (wp-content/uploads/elementor/css/post-*.css) che impone
   l'arancione #e8591a e i marroni #2a1a10 / #1a0e08 ereditati dal
   template originale. Quei file sono rigenerati automaticamente e
   sono decine (uno per pagina), quindi non ha senso modificarli.
   Hanno specificita' 0,3,0 (tre classi): per vincerli servono
   !important. E' l'unico punto del progetto in cui li uso, e sono
   circoscritti a rimappare due colori.
     #e8591a arancione -> #dc3935 rosso brand
     #2a1a10 marrone   -> #1c1917 grafite industrial
   ============================================================ */
.inox-search-wrap { border-color: var(--inox-outline-variant) !important; }
.inox-search-wrap:focus-within { border-color: var(--inox-primary-action) !important; }
.inox-search-btn { background-color: transparent !important; }
.inox-search-btn i,
.inox-search-btn svg { color: var(--inox-primary-action) !important; fill: var(--inox-primary-action) !important; }
.inox-cart-count { background-color: var(--inox-primary-action) !important; }

.fnx-footer { background-color: var(--inox-dark-bg) !important; }
.fnx-bottom { background-color: #0c0a09 !important; }
.fnx-phone { color: var(--inox-primary-action) !important; }
.fnx-social { background-color: var(--inox-primary-action) !important; }
.fnx-social:hover { background-color: var(--inox-primary) !important; }
.fnx-col-title::after { background-color: var(--inox-primary-action) !important; }
.fnx-contacts i { color: var(--inox-primary-action) !important; }
.fnx-links a:hover { color: var(--inox-primary-action) !important; }

/* Nel footer scuro l'header in overlay non c'entra: qui il campo
   ricerca torna chiaro perche' il footer non ne contiene. */

/* ── Schede prodotto: sollevamento all'hover ────────────────────
   Il database indica "card hover lift 200ms" come pattern chiave
   per l'e-commerce e segnala "flat senza profondita'" come
   anti-pattern. Applicato alle griglie prodotto esistenti. */
.ico-rail-card,
.inox-rp-card,
.inox-pg-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ico-rail-card:hover,
.inox-rp-card:hover,
.inox-pg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(28,25,23,.14);
}

/* ── Correzioni di contrasto (verifica automatica, luglio 2026) ──
   Ogni regola qui sotto nasce da una misurazione reale del rapporto
   di contrasto, non da una preferenza estetica. Soglia WCAG AA:
   4.5:1 per il testo normale, 3:1 per quello grande. */

/* "Categorie" / "Pagine" nella sidebar erano #FF0000 puro (inline da
   Elementor): 4.00:1 su bianco. Il rosso scuro del brand arriva a ~9:1. */
#inoxSidebar .inox-sidebar-title,
.inox-sidebar .inox-sidebar-title { color: var(--inox-primary) !important; }

/* Conteggi accanto alle categorie: erano #888 -> 3.54:1 */
.inox-cat-count { color: #57534e !important; }

/* Link testuali rossi: #dc3935 su bianco da' 4.49:1, appena sotto la
   soglia. Il rosso resta per pulsanti e accenti (dove il testo e'
   grande o bianco su fondo pieno), ma i link inline usano il rosso
   scuro, che passa comodamente. */
/* Solo i link DENTRO al testo scorrevole: paragrafi ed elenchi.
   La versione precedente di questa regola colpiva qualsiasi <a>,
   compresi i pulsanti pieni (rosso scuro su fondo rosso = 1.84:1)
   e i link del footer scuro. Restringerla e' piu' sicuro che
   inseguire le eccezioni con :not(). */
.ico-page p a,
.ico-page li a,
.ico-simple p a,
.ico-simple li a,
.ico-contact-card a { color: var(--inox-primary) !important; }

/* Badge "Su ordinazione": arancione su crema, 3.46:1 */
.ico-badge.order { background: #fff1e0 !important; color: #9a3412 !important; }
.ico-badge.ok    { background: #e7f5ea !important; color: #1b5e20 !important; }

/* ── Residui della vecchia palette in pagine gestite da altri plugin ──
   Questi contenitori hanno lo sfondo scritto a mano nel CSS del plugin
   (non passa dai token), quindi vanno rimappati esplicitamente. */
.inox-trust-section { background: var(--inox-surface-low) !important; }
.inox-gl-section,
.ict-wrap,
.iad-wrap,
.ico-lf-section,
.inox-lf-section { background: var(--inox-bg) !important; }
.inox-te-section  { background: var(--inox-surface-low) !important; }

/* ── Griglie inline dei widget landing: responsive ──────────────
   I widget della pagina Richiedi Preventivo hanno le griglie scritte
   nell'attributo style (repeat(3,1fr), repeat(4,1fr), 1fr 1fr con
   gap 80px) senza alcuna media query. Su mobile non collassavano e
   producevano scroll orizzontale (contenuto largo 559px su schermo
   da 390px). Non potendo modificare gli style inline uno per uno,
   li neutralizzo qui via selettore d'attributo. */
@media (max-width: 1024px) {
  .inox-widget div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
@media (max-width: 640px) {
  .inox-widget div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}
/* minmax(0,1fr) invece di 1fr: senza quello le colonne non scendono
   sotto la larghezza del proprio contenuto e l'overflow resta. */

/* ── Correzione regressione: link nel footer scuro ──────────────
   La regola ".ico-simple a { color: var(--inox-primary) }" scritta
   sopra per alzare il contrasto dei link su fondo CHIARO colpiva
   anche il footer, che e' scuro: rosso scuro su grafite dava 2.12:1,
   illeggibile. Qui il footer viene riportato ai colori chiari con
   specificita' maggiore (0,3,0 batte 0,2,0). */
.ico-simple .fnx-footer a,
.ico-page .fnx-footer a,
.fnx-footer a { color: #d6d3d1 !important; }
.ico-simple .fnx-footer a:hover,
.fnx-footer a:hover { color: #f87171 !important; }
.ico-simple .fnx-footer .fnx-phone,
.fnx-footer .fnx-phone { color: #f87171 !important; }
.fnx-footer .fnx-col-title { color: #fafaf9 !important; }
.fnx-footer .fnx-contacts span,
.fnx-footer .fnx-tagline,
.fnx-footer .fnx-phone-note { color: #a8a29e !important; }
/* Le icone social restano bianche sul cerchio rosso. */
.fnx-footer a.fnx-social { color: #ffffff !important; }

/* Sezione rimasta con lo sfondo rosa del vecchio tema. */
.inox-tl-section { background: var(--inox-surface-low) !important; }

/* Icona del carrello vuoto: era #e3beba (rosa), 1.63:1 su fondo
   chiaro, praticamente invisibile. */
.ict-empty-icon,
.ict-empty > .material-symbols-outlined { color: #78716c !important; }
/* ...ma l'icona dentro al pulsante rosso resta bianca: la regola
   precedente la colorava di grigio su fondo rosso (1.78:1). */
.ict-empty a .material-symbols-outlined,
.ict-empty button .material-symbols-outlined { color: #ffffff !important; }

/* I pulsanti pieni restano bianchi anche quando wpautop li avvolge
   in un <p>, facendoli ricadere sotto la regola dei link di testo.
   Due classi battono una classe + due elementi. */
.ico-page .ico-brand-card a,
.ico-page .ico-btn-primary,
.ico-simple .ico-btn-primary { color: #ffffff !important; }

/* ============================================================
   MENU LATERALE — "Industrial Dark"   (luglio 2026)
   ------------------------------------------------------------
   Rifatto interamente: prima era bianco piatto, unico elemento
   rimasto del vecchio stile. Problemi oggettivi corretti:
   - voci alte 43px -> sotto il minimo di 44x44px per il touch
   - testo tutto maiuscolo -> le voci lunghe andavano a capo
   - 300px di larghezza -> 1153px di contenuto da scorrere
   Ora: pannello scuro 560px su due colonne, tutto visibile.
   Il selettore usa "body #inoxSidebar" per battere le regole
   !important che Elementor genera per singola istanza.
   ============================================================ */
body #inoxSidebar {
  width: 560px;
  max-width: 92vw;
  background: var(--inox-dark-bg) !important;
  box-shadow: 24px 0 60px rgba(0,0,0,.45);
  border-right: 1px solid var(--inox-dark-border);
}
body #inoxSidebar .inox-sidebar-inner { padding: 30px 34px 40px; }

/* Testata */
body #inoxSidebar .inox-sidebar-title {
  font-family: var(--inox-font-head);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inox-dark-text-muted) !important;
  border-bottom: none;
  padding: 0 0 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
body #inoxSidebar .inox-sidebar-title::before {
  content: "";
  width: 26px; height: 3px;
  background: var(--inox-primary-action);
  border-radius: 2px;
  flex-shrink: 0;
}
body #inoxSidebar .inox-sidebar-title-pages { margin-top: 34px !important; padding-top: 26px; border-top: 1px solid var(--inox-dark-border); }

/* Pulsante chiudi: portato a 44x44 per il touch */
body #inoxSidebar .inox-sidebar-close {
  top: 18px; right: 20px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--inox-dark-text-muted) !important;
  background: rgba(250,250,249,.06);
  transition: background-color .2s ease, color .2s ease;
}
body #inoxSidebar .inox-sidebar-close:hover { background: rgba(250,250,249,.14); color: #fff !important; }

/* Categorie su due colonne */
body #inoxSidebar .inox-sidebar-cats,
body #inoxSidebar .inox-sidebar-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}
body #inoxSidebar .inox-sidebar-cats li a,
body #inoxSidebar .inox-sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;            /* sopra la soglia di 44px */
  padding: 10px 12px;
  border-radius: 9px;
  border-left: none;
  color: var(--inox-dark-text) !important;
  font-family: var(--inox-font-body);
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;        /* prima era tutto maiuscolo */
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body #inoxSidebar .inox-sidebar-cats li a:hover,
body #inoxSidebar .inox-sidebar-menu li a:hover {
  background: rgba(250,250,249,.07) !important;
  color: #fff !important;
  transform: translateX(3px);
}
/* Chevron: piccolo, spento, si accende e scorre al passaggio */
body #inoxSidebar .inox-sidebar-cats li a i {
  color: var(--inox-primary-action) !important;
  font-size: 10px !important;
  opacity: .45;
  margin-left: auto;
  transition: opacity .18s ease, transform .18s ease;
}
body #inoxSidebar .inox-sidebar-cats li a:hover i { opacity: 1; transform: translateX(3px); }

/* Conteggio prodotti: sobrio, non compete col nome */
body #inoxSidebar .inox-cat-count {
  margin-left: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--inox-dark-text-muted) !important;
  background: rgba(250,250,249,.07);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Voce della categoria che si sta guardando */
body #inoxSidebar .inox-sidebar-cats li a.is-current {
  background: rgba(220,57,53,.14) !important;
  box-shadow: inset 3px 0 0 var(--inox-primary-action);
}

/* Focus visibile da tastiera (il database lo segnala come critico) */
body #inoxSidebar a:focus-visible,
body #inoxSidebar button:focus-visible {
  outline: 2px solid var(--inox-primary-action);
  outline-offset: 2px;
}

/* Comparsa a cascata delle voci */
body #inoxSidebar .inox-sidebar-cats li,
body #inoxSidebar .inox-sidebar-menu li { opacity: 1; }
body #inoxSidebar.is-animating .inox-sidebar-cats li,
body #inoxSidebar.is-animating .inox-sidebar-menu li {
  opacity: 0;
  transform: translateY(8px);
}
body #inoxSidebar.is-open.is-animating .inox-sidebar-cats li,
body #inoxSidebar.is-open.is-animating .inox-sidebar-menu li {
  opacity: 1;
  transform: none;
  transition: opacity .32s ease, transform .32s ease;
  transition-delay: var(--d, 0ms);
}

/* Overlay: un filo piu' denso, il pannello e' largo */
.inox-sidebar-overlay { background: rgba(12,10,9,.66); }

@media (max-width: 700px) {
  body #inoxSidebar { width: 88vw; }
  body #inoxSidebar .inox-sidebar-inner { padding: 24px 20px 32px; }
  body #inoxSidebar .inox-sidebar-cats,
  body #inoxSidebar .inox-sidebar-menu { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body #inoxSidebar .inox-sidebar-cats li,
  body #inoxSidebar .inox-sidebar-menu li { opacity: 1 !important; transform: none !important; transition: none !important; }
  body #inoxSidebar .inox-sidebar-cats li a:hover { transform: none; }
}

/* ── Correzione allineamento voci menu ──────────────────────────
   Il chevron nel markup e' il PRIMO figlio del link, quindi
   "margin-left:auto" spingeva a destra il chevron E tutto il testo
   che lo segue, con l'effetto a scaletta. Il chevron resta a
   sinistra; e' il conteggio a essere spinto a destra. */
body #inoxSidebar .inox-sidebar-cats li a i {
  margin-left: 0;
  flex-shrink: 0;
  width: 10px;
  text-align: center;
}
body #inoxSidebar .inox-cat-count {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Intestazione di catalogo e ricerca ─────────────────────────
   Fascia scura in cima ai risultati, stessa impostazione delle
   fasce della homepage. Non e' a tutta larghezza perche' vive
   nella colonna a destra dei filtri: sconfinare la farebbe
   passare sotto la sidebar. */
.inox-sg-head {
  background: var(--inox-dark-bg);
  border-radius: 16px;
  padding: 34px 34px 30px;
  margin-bottom: 24px;
}
.inox-sg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--inox-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inox-dark-text-muted);
  margin-bottom: 14px;
}
.inox-sg-eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  background: var(--inox-primary-action);
  border-radius: 2px;
}
.inox-sg-title {
  font-family: var(--inox-font-head);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--inox-dark-text);
  margin: 0;
}
.inox-sg-count {
  margin: 10px 0 0;
  font-size: .92rem;
  color: var(--inox-dark-text-muted);
}
/* WooCommerce stampa il conteggio dentro un <p> proprio: neutralizzo
   i margini che raddoppierebbero lo spazio. */
.inox-sg-count .woocommerce-result-count { margin: 0; color: inherit; }

@media (max-width: 700px) {
  .inox-sg-head { padding: 26px 22px 24px; border-radius: 12px; }
}

/* woocommerce_result_count() stampa un proprio <p class="woocommerce-result-count">.
   Annidarlo in un <p> lo faceva uscire dal contenitore (il browser chiude
   automaticamente il paragrafo esterno), perdendo il colore chiaro sulla
   fascia scura. Ora il contenitore e' un <div> e il <p> interno eredita. */
.inox-sg-count .woocommerce-result-count {
  margin: 0 !important;
  color: var(--inox-dark-text-muted) !important;
  font-size: .92rem;
}

/* ── Scheda prodotto ────────────────────────────────────────── */
/* Stato "esaurito": riquadro informativo al posto del pulsante rosso
   che diceva "Leggi tutto" e sembrava un tasto d'acquisto. */
.inox-pd-esaurito {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--inox-surface-low);
  border: 1px solid var(--inox-outline-variant);
  border-left: 3px solid var(--inox-outline);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.inox-pd-esaurito .material-symbols-outlined { color: var(--inox-text-muted); font-size: 22px; flex-shrink: 0; }
.inox-pd-esaurito strong { display: block; font-family: var(--inox-font-head); font-size: 15px; color: var(--inox-text); margin-bottom: 3px; }
.inox-pd-esaurito span:not(.material-symbols-outlined) { font-size: 13.5px; line-height: 1.55; color: var(--inox-text-muted); }

/* Occhiello con barretta rossa sui titoli di sezione, come in homepage */
.inox-rp-inner > h2::before,
.inox-ps-wrap > h2::before {
  content: "";
  display: block;
  width: 34px; height: 3px;
  background: var(--inox-primary-action);
  border-radius: 2px;
  margin-bottom: 16px;
}

/* Breadcrumb della scheda: piu' sobrio, non compete col titolo */
.inox-pd-breadcrumb {
  font-size: .78rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--inox-text-muted) !important;
}

/* Ultimo residuo rosa: pastiglia dell'icona "disponibile" nella scheda prodotto. */
.inox-pd-avail-icon { background: var(--inox-surface-container) !important; }

/* ── HEADER SCURO GRAFITE SU TUTTE LE PAGINE ──────────────────────
   Prima il sito aveva due identita': home con barra scura sopra la
   foto dell'hero, tutte le altre pagine con barra bianca. Ora la
   barra e' grafite ovunque; sulla home resta trasparente sopra la
   foto (.is-overlay), che e' la stessa barra vista sull'immagine.
   Serve !important perche' il widget Elementor scrive il colore di
   sfondo come regola per-istanza, molto specifica. */
body .inox-header-main:not(.is-overlay) {
  background-color: var(--inox-dark-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
body .inox-header-main:not(.is-overlay) .inox-main-nav-menu a,
body .inox-header-main:not(.is-overlay) .inox-action-btn,
body .inox-header-main:not(.is-overlay) .inox-action-label,
body .inox-header-main:not(.is-overlay) .inox-search-mobile-btn,
body .inox-header-main:not(.is-overlay) .inox-logo-text {
  color: var(--inox-dark-text) !important;
}
body .inox-header-main:not(.is-overlay) .inox-action-label {
  color: var(--inox-dark-text-muted) !important;
}
body .inox-header-main:not(.is-overlay) .inox-main-nav-menu a:hover {
  color: #ffffff !important;
}
body .inox-header-main:not(.is-overlay) .inox-burger-btn span {
  background-color: var(--inox-dark-text) !important;
}
body .inox-header-main:not(.is-overlay) .inox-account-btn i,
body .inox-header-main:not(.is-overlay) .inox-wishlist-btn i,
body .inox-header-main:not(.is-overlay) .inox-minicart-btn i {
  color: var(--inox-dark-text) !important;
}
/* Il campo di ricerca chiaro su fondo scuro risulterebbe un blocco
   bianco sparato: si usa un incavo semitrasparente, come sulla home. */
body .inox-header-main:not(.is-overlay) .inox-search-wrap {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
body .inox-header-main:not(.is-overlay) .inox-search-wrap:focus-within {
  background: rgba(255,255,255,.14) !important;
  border-color: var(--inox-primary-action) !important;
}
body .inox-header-main:not(.is-overlay) .inox-search-input { color: #ffffff !important; }
body .inox-header-main:not(.is-overlay) .inox-search-input::placeholder { color: rgba(255,255,255,.62) !important; }
body .inox-header-main:not(.is-overlay) .inox-search-btn i { color: #ffffff !important; }

/* ── Pulizia del tema sottostante ─────────────────────────────────
   Ora che header e footer veri sono globali, quelli del tema Hello
   Elementor sono un doppione: mostravano il titolo del sito in rosa
   e un menu con le categorie ormai eliminate. */
#site-header.site-header,
#site-footer.site-footer { display: none !important; }

/* Larghezza del logo.
   Nelle pagine Elementor la larghezza arriva da una regola scritta
   per la singola istanza del widget. Sulle pagine servite dal tema
   (404, archivi, blog) quella regola non esiste e il logo veniva
   disegnato a dimensione naturale, occupando tutto lo schermo. */
.inox-logo img { width: 160px; height: auto; max-width: 100%; }
@media (max-width: 1024px) { .inox-logo img { width: 130px; } }
@media (max-width: 768px)  { .inox-logo img { width: 110px; } }

/* ── PAGINA 404 ───────────────────────────────────────────────────
   Prima mostrava solo "La pagina non puo' essere trovata" su fondo
   bianco, senza nessuna via d'uscita. */
.inox-404 { max-width: var(--inox-container-max); margin: 0 auto; padding: 0 24px 72px; }

.inox-404-band {
  background: var(--inox-dark-bg);
  border-radius: 16px;
  padding: 56px 48px 48px;
  margin: 32px 0 48px;
}
.inox-404-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--inox-font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inox-primary-action);
}
.inox-404-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--inox-primary-action); }
.inox-404-title {
  font-family: var(--inox-font-head);
  font-size: 42px; line-height: 1.15; font-weight: 700;
  color: var(--inox-dark-text); margin: 14px 0 10px;
}
.inox-404-sub { font-size: 16px; color: var(--inox-dark-text-muted); margin: 0 0 28px; max-width: 620px; }

.inox-404-search { display: flex; gap: 10px; max-width: 640px; }
.inox-404-search input[type="search"] {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--inox-radius);
  padding: 14px 18px; font-size: 15px; color: #fff;
  font-family: var(--inox-font-body); outline: none;
  transition: border-color .2s, background-color .2s;
}
.inox-404-search input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
.inox-404-search input[type="search"]:focus {
  background: rgba(255,255,255,.14);
  border-color: var(--inox-primary-action);
}
.inox-404-search button {
  background: var(--inox-primary-action); color: #fff; border: none;
  border-radius: var(--inox-radius); padding: 14px 30px;
  font-family: var(--inox-font-body); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; transition: filter .2s;
}
.inox-404-search button:hover { filter: brightness(1.1); }

.inox-404-h2 {
  font-family: var(--inox-font-head); font-size: 22px; font-weight: 700;
  color: var(--inox-text); margin: 0 0 18px;
}
.inox-404-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.inox-404-cat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; text-decoration: none;
  background: var(--inox-surface-white);
  border: 1px solid var(--inox-outline-variant);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inox-404-cat:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28,25,23,.12);
  border-color: var(--inox-primary-action);
}
.inox-404-cat-nome { font-family: var(--inox-font-head); font-size: 15px; font-weight: 600; color: var(--inox-text); }
.inox-404-cat-num  { font-size: 12.5px; color: var(--inox-text-muted); }

.inox-404-aiuto {
  margin-top: 48px; padding: 32px 36px;
  background: var(--inox-surface-low);
  border: 1px solid var(--inox-outline-variant);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.inox-404-aiuto p { margin: 0; color: var(--inox-text-muted); font-size: 14.5px; }
.inox-404-aiuto .inox-404-h2 { margin-bottom: 6px; }
.inox-404-azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.inox-404-btn-ghost {
  display: inline-flex; align-items: center; padding: 12px 26px;
  border: 1px solid var(--inox-text); border-radius: var(--inox-radius);
  color: var(--inox-text); text-decoration: none;
  font-family: var(--inox-font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  transition: background-color .2s, color .2s;
}
.inox-404-btn-ghost:hover { background: var(--inox-text); color: #fff; }

@media (max-width: 680px) {
  .inox-404-band { padding: 38px 22px 32px; }
  .inox-404-title { font-size: 30px; }
  .inox-404-search { flex-direction: column; }
  .inox-404-aiuto { flex-direction: column; align-items: flex-start; }
}

/* ── CATALOGO: disponibilita', filtri, ordinamento ────────────────── */

/* Pastiglie di disponibilita'. Prima ne esisteva una sola, verde, con
   scritto "In Stock", stampata identica su ogni prodotto. */
.inox-chip-disp     { background: rgba(0,130,80,.10);  color: #007d4e; }
.inox-chip-esaurito { background: rgba(87,83,78,.14);  color: #44403c; }

/* Azione alternativa quando il prodotto non e' disponibile */
.inox-btn-contatta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-family: var(--inox-font-body); text-transform: uppercase;
  border: 1px solid var(--inox-outline); border-radius: var(--inox-radius);
  color: var(--inox-text); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.inox-btn-contatta:hover { background: var(--inox-text); border-color: var(--inox-text); color: #fff; }

/* Immagini di prodotto intere, non ritagliate.
   Con object-fit:cover i prodotti venivano tagliati ai bordi; le schede
   della ricerca usavano gia' "contain" su fondo neutro, che e' il
   trattamento corretto per un catalogo. Ora sono uguali. */
body .inox-product-card .inox-card-img {
  object-fit: contain;
  background: var(--inox-surface-low);
  padding: 12px;
}

/* Riepilogo dei filtri attivi: senza, con un filtro stretto la lista
   sembrava vuota senza spiegazione. */
.inox-sg-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.inox-sg-chips-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inox-text-muted); margin-right: 2px;
}
.inox-sg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--inox-surface-container); color: var(--inox-text);
  border-radius: var(--inox-radius-full); padding: 6px 14px;
  font-size: 13px; text-decoration: none; transition: background-color .2s;
}
.inox-sg-chip span { color: var(--inox-text-muted); font-size: 15px; line-height: 1; }
.inox-sg-chip:hover { background: var(--inox-outline-variant); }
.inox-sg-chip-reset { font-size: 12.5px; font-weight: 600; color: var(--inox-primary-action); text-decoration: none; margin-left: 4px; }
.inox-sg-chip-reset:hover { text-decoration: underline; }

.inox-sg-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.inox-sg-toolbar-label { margin-right: auto; color: var(--inox-text-muted); font-size: 13.5px; }
select.inox-sg-sort { width: auto; padding: 9px 16px; font-size: 14px; cursor: pointer; }

/* Fasce di prezzo, tarate sui prezzi reali del catalogo */
.inox-fascia {
  display: block; padding: 7px 10px; margin-bottom: 2px;
  border-radius: var(--inox-radius);
  font-family: var(--inox-font-body); font-size: 13.5px;
  color: var(--inox-text); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.inox-fascia:hover { background: var(--inox-surface-container); color: var(--inox-primary-action); }
.inox-fascia.attiva { background: var(--inox-primary-action); color: #fff; font-weight: 600; }

.inox-prezzo-form { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.inox-prezzo-form input[type="number"] {
  width: 100%; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--inox-outline-variant); border-radius: var(--inox-radius);
  font-family: var(--inox-font-body); font-size: 13px; color: var(--inox-text);
  background: var(--inox-surface-white);
}
.inox-prezzo-form input[type="number"]:focus { outline: none; border-color: var(--inox-primary-action); }
.inox-prezzo-form span { color: var(--inox-text-muted); }
.inox-prezzo-form button {
  flex-shrink: 0; padding: 8px 14px; border: none; cursor: pointer;
  background: var(--inox-text); color: #fff; border-radius: var(--inox-radius);
  font-family: var(--inox-font-body); font-size: 12px; font-weight: 700;
}
.inox-prezzo-form button:hover { background: var(--inox-primary-action); }

/* ── Filtri su mobile: pannello a scomparsa ───────────────────────
   Su telefono l'intero pannello filtri stava sopra la griglia: si
   scorreva a lungo prima di vedere un solo prodotto. */
.inox-filtri-toggle { display: none; }
.inox-filtri-chiudi { display: none; }
@media (max-width: 1024px) {
  .inox-filtri-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-bottom: 18px; padding: 13px 18px;
    background: var(--inox-text); color: #fff; border: none;
    border-radius: var(--inox-radius); cursor: pointer;
    font-family: var(--inox-font-body); font-size: 14px; font-weight: 700;
    letter-spacing: .03em; min-height: 46px;
  }
  .inox-fs-sidebar { display: none; }
  body.inox-filtri-aperti { overflow: hidden; }
  body.inox-filtri-aperti .inox-fs-sidebar {
    display: block !important;
    position: fixed; inset: 0; z-index: 99999;
    width: 100%; max-width: none; margin: 0;
    border-radius: 0; border: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 86px;
    background: var(--inox-surface-white);
  }
  body.inox-filtri-aperti .inox-filtri-chiudi {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 100000; padding: 15px 18px; border: none; cursor: pointer;
    background: var(--inox-primary-action); color: #fff;
    border-radius: var(--inox-radius);
    font-family: var(--inox-font-body); font-size: 15px; font-weight: 700;
    box-shadow: 0 10px 30px rgba(28,25,23,.3);
  }
}

/* ── CARRELLO E CHECKOUT ──────────────────────────────────────────
   Residui della vecchia palette rosa: i riquadri "Riepilogo Ordine"
   erano salmone e lo sfondo del checkout rosato, in contrasto con il
   resto del sito ormai neutro. */
body .ict-summary-card,
body .ico-card.ico-summary-card {
  background: var(--inox-surface-low) !important;
  border: 1px solid var(--inox-outline-variant) !important;
}
body .ict-item-img-wrap { background: var(--inox-surface-low) !important; }
body .ict-coupon-input  { background: var(--inox-surface-white) !important; }
body .ico-wrap          { background: var(--inox-bg) !important; }
body .ict-wrap          { background: var(--inox-bg) !important; }

/* Bottone d'ordine nativo di WooCommerce: arrivava viola (#7f54b3),
   il colore predefinito del plugin, del tutto estraneo al sito. */
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body #place_order,
body .wc-block-components-checkout-place-order-button {
  background-color: var(--inox-primary-action) !important;
  color: #fff !important;
  border-color: var(--inox-primary-action) !important;
  border-radius: var(--inox-radius) !important;
  font-family: var(--inox-font-body) !important;
  font-weight: 700 !important;
}
body .woocommerce button.button.alt:hover,
body #place_order:hover { filter: brightness(1.08); }

/* Spedizione ancora da determinare: prima veniva annunciata come
   "Gratuita" anche quando nessuna spedizione era stata calcolata. */
.ict-ship-tbd, .ico-ship-tbd {
  color: var(--inox-text-muted);
  font-style: normal;
  font-size: 0.95em;
}

/* ── WISHLIST (dentro l'account) ──────────────────────────────────
   Sostituisce la tabella grezza del plugin, che aveva intestazioni in
   inglese e come unica azione una "X" nuda. */
.inox-wl-head { margin-bottom: 22px; }
.inox-wl-title {
  font-family: var(--inox-font-head); font-size: 26px; font-weight: 700;
  color: var(--inox-text); margin: 0 0 4px;
}
.inox-wl-sub { margin: 0; color: var(--inox-text-muted); font-size: 14px; }

.inox-wl-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.inox-wl-card {
  display: flex; flex-direction: column;
  background: var(--inox-surface-white);
  border: 1px solid var(--inox-outline-variant);
  border-radius: 14px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inox-wl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(28,25,23,.14);
  border-color: var(--inox-outline);
}
.inox-wl-img {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; background: var(--inox-surface-low); overflow: hidden;
}
.inox-wl-img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.inox-wl-img .inox-chip { position: absolute; top: 10px; left: 10px; }

.inox-wl-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.inox-wl-cat {
  font-family: var(--inox-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--inox-text-muted);
  margin-bottom: 6px;
}
.inox-wl-nome { font-family: var(--inox-font-head); font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.inox-wl-nome a { color: var(--inox-text); text-decoration: none; }
.inox-wl-nome a:hover { color: var(--inox-primary-action); }
.inox-wl-prezzo {
  font-family: var(--inox-font-head); font-size: 19px; font-weight: 700;
  color: var(--inox-primary-action); margin: auto 0 14px;
}
.inox-wl-azioni { display: flex; align-items: center; gap: 8px; }
.inox-wl-azioni .inox-btn-primary,
.inox-wl-azioni .inox-btn-contatta { flex: 1; justify-content: center; text-align: center; padding: 10px 14px; font-size: 11.5px; }
.inox-wl-rimuovi {
  flex-shrink: 0; width: 40px; height: 40px; min-width: 40px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--inox-surface-white); color: var(--inox-text-muted);
  border: 1px solid var(--inox-outline-variant); border-radius: var(--inox-radius);
  transition: color .2s, border-color .2s, background-color .2s;
}
.inox-wl-rimuovi:hover { color: var(--inox-primary-action); border-color: var(--inox-primary-action); background: var(--inox-surface-low); }

/* Lista vuota: prima non esisteva alcun messaggio */
.inox-wl-vuota {
  text-align: center; padding: 56px 24px;
  background: var(--inox-surface-low);
  border: 1px solid var(--inox-outline-variant);
  border-radius: 14px;
}
.inox-wl-vuota-icona {
  width: 64px; height: 64px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--inox-surface-container); color: var(--inox-primary-action);
}
.inox-wl-vuota h3 { font-family: var(--inox-font-head); font-size: 19px; font-weight: 700; color: var(--inox-text); margin: 0 0 8px; }
.inox-wl-vuota p { color: var(--inox-text-muted); font-size: 14.5px; margin: 0 0 22px; }

@media (max-width: 600px) {
  .inox-wl-griglia { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .inox-wl-azioni { flex-wrap: wrap; }
}

/* ── PAGINE LEGALI E INFORMATIVE ──────────────────────────────────
   Titolo e paragrafo introduttivo uscivano dal contenitore e restavano
   appiccicati al bordo dello schermo, mentre il testo sotto era
   regolarmente incolonnato a 820px: sembrava una pagina non finita.
   Ora l'intestazione e' una fascia scura come nel resto del sito, con
   il testo allineato alla stessa colonna del contenuto. */
.ico-page-hero {
  background: var(--inox-dark-bg);
  padding: 58px 24px 50px;
  margin-bottom: 46px;
}
.ico-page-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}
.ico-page-hero-inner::before {
  content: "";
  display: block;
  width: 34px; height: 2px;
  background: var(--inox-primary-action);
  margin-bottom: 20px;
}
.ico-page-hero h1 {
  font-family: var(--inox-font-head);
  font-size: 38px; line-height: 1.16; font-weight: 700;
  color: var(--inox-dark-text) !important;
  margin: 0 0 14px;
}
.ico-page-hero p {
  color: var(--inox-dark-text-muted) !important;
  font-size: 15.5px; line-height: 1.65;
  margin: 0; max-width: 68ch;
}

/* Corpo del documento: righe piu' respirate e gerarchia leggibile */
.ico-page { padding-bottom: 64px; }
.ico-page h2 {
  font-family: var(--inox-font-head);
  font-size: 20px; font-weight: 700; color: var(--inox-text);
  margin: 40px 0 14px; padding-top: 6px;
}
.ico-page h2:first-child { margin-top: 0; }
.ico-page p, .ico-page li { line-height: 1.72; }
.ico-page li { margin-bottom: 8px; }
.ico-page ul { padding-left: 20px; }

@media (max-width: 680px) {
  .ico-page-hero { padding: 40px 20px 34px; margin-bottom: 32px; }
  .ico-page-hero h1 { font-size: 28px; }
}


/* ════════════════════════════════════════════════════════════
   RIFINITURE INTERAZIONE — header, menu e bottoni
   Aggiunto il 2026-07-31. Blocco in coda: nessuna regola sopra
   e' stata modificata, queste vincono per cascata.
   Principi: si animano solo transform e opacity (mai width/height),
   e ogni comando ha stato hover, premuto e focus da tastiera.
════════════════════════════════════════════════════════════ */

/* ── Link del menu: sottolineatura che scorre ──
   currentColor cosi' funziona sia sull'header trasparente sopra
   l'hero sia su quello solido, senza duplicare le regole. */
.inox-main-nav-menu a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
}
.inox-main-nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.inox-main-nav-menu a:hover::after,
.inox-main-nav-menu a:focus-visible::after { transform: scaleX(1); }

/* pagina corrente: indicatore fisso. aria-current lo mette il mu-plugin inox-a11y.
   Si evidenzia solo la barra, non il colore del testo, per non entrare in
   conflitto con le regole !important dei due stati dell'header. */
.inox-main-nav-menu a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--inox-primary);
}

/* ── Bottoni azione: Account e Carrello ── */
.inox-action-btn {
  border-radius: 10px;
  transition: color var(--inox-transition),
              background-color var(--inox-transition),
              transform 140ms ease;
}
.inox-action-btn:hover { background-color: rgba(220, 57, 53, 0.08); }
.inox-action-btn:active { transform: scale(0.96); }
.inox-header-main.is-overlay .inox-action-btn:hover { background-color: rgba(255, 255, 255, 0.14); }
.inox-cart-count { transition: transform 160ms ease; }
.inox-action-btn:hover .inox-cart-count { transform: scale(1.12); }

/* ── Burger delle categorie ── */
.inox-burger-btn {
  border-radius: 10px;
  transition: background-color var(--inox-transition), transform 140ms ease;
}
.inox-burger-btn:hover { background-color: rgba(220, 57, 53, 0.08); }
.inox-burger-btn:active { transform: scale(0.94); }
.inox-header-main.is-overlay .inox-burger-btn:hover { background-color: rgba(255, 255, 255, 0.14); }

/* ── Bottone della ricerca ── */
.inox-search-btn { transition: background-color var(--inox-transition); }
.inox-search-btn:hover { background-color: rgba(220, 57, 53, 0.10); }
.inox-search-btn i { transition: transform 140ms ease, color var(--inox-transition); }
.inox-search-btn:active i { transform: scale(0.88); }

/* ── Focus da tastiera: visibile su ogni comando dell'header ── */
.inox-header-main a:focus-visible,
.inox-header-main button:focus-visible,
.inox-search-mobile-overlay button:focus-visible,
.inox-search-mobile-overlay input:focus-visible {
  outline: 2px solid var(--inox-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Chi ha chiesto meno movimento non lo subisce ── */
@media (prefers-reduced-motion: reduce) {
  .inox-main-nav-menu a::after,
  .inox-action-btn,
  .inox-burger-btn,
  .inox-cart-count,
  .inox-search-btn i { transition: none; }
  .inox-action-btn:active,
  .inox-burger-btn:active,
  .inox-search-btn:active i { transform: none; }
}

/* Override Elementor flexbox che rompe il layout dell header */
.elementor-widget-inox_header,
.elementor-widget-inox_header .e-flexbox-base,
.elementor .e-flexbox-base:has(.inox-topbar),
.elementor .e-flexbox-base:has(.inox-header-main) {
    display: block !important;
    padding: 0 !important;
}