/* === variables-root.css === */
/* 1) Definizione dei layer globali */
@layer base, components, utilities, override;

/* 2) Layer BASE: variabili e reset */
@layer base {
/* Pulizia: mantieni solo l'ultima versione delle variabili */
:root {
  --shadow-offset: 2px;
  --shadow-blur: 4px;
  --shadow-light: rgba(0, 0, 0, 0.07);
  --shadow-dark: rgba(0, 0, 0, 0.15);

  --base-bar-height: 60px;
  --scale: 1;
  --bar-height: calc(var(--base-bar-height) * var(--scale));

  --accent-color: #d21317;
  --accent-rgb: 210, 19, 23;
  --alpha: 0.92;

  --cat-bg: #fde9e0;
  --text-light: #fff;
  --text-dark: #000;

  --gap: 0.9rem;
  --link-gap: 1.2rem;
  --base-gap: 1rem;

  --left-width: 88px;
  --max-width: 1280px;

  --button-height: 42px;

  --drawer-w: 320px !important;
  --base-drawer-width: 320px;

  --base-font-size: 1rem;
  --base-icon-size: 28px;
  --base-logo-size: 35px;

  --font-size: calc(var(--base-font-size) * var(--scale));
  --icon-size: calc(var(--base-icon-size) * var(--scale));
  --logo-size: calc(var(--base-logo-size) * var(--scale));
} /* CHIUSURA CORRETTA DEL BLOCCO :root */
.top-bar,
.cat-bar {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


@media (min-width: 601px) {
/* === Alza icone di 2px nella top-bar e cat-bar.sticky === */
header.top-bar .icon-menu,
header.top-bar .icon-search,
header.top-bar .icon-user,
header.top-bar .logo,
.cat-bar.sticky .menu-sticky,
.cat-bar.sticky .icon-search,
.cat_bar.sticky .icon-user,
header.top-bar .icon-menu,
.side-menu .side-nav a,
.side-menu .side-item.has-sub,
aside.sub-menu .sub-nav a {
  font-size: clamp(0.8rem, 1.2vw, 1rem) !important;
}
:root {
  --base-logo-size: 35px;
  --logo-size: calc(var(--base-logo-size) * var(--scale));
}
}
/* Applica la dimensione coerente al logo top-bar */
.logo {
  width: var(--logo-size) !important;
  height: auto !important;
  max-height: var(--bar-height) !important;
  display: block !important;
  object-fit: contain !important;
}
/* logo-sticky: stessa dimensione visiva del logo nella top-bar (var(--logo-size)) */
.logo-sticky {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
}


/* Nasconde i separatori ovunque */
.top-separator,
.divider {
  display: none !important;
}

.top-links a::before,
.top-actions a::before {
  content: none !important;
}


/* applica le variabili */
.top-bar,
.cat-bar,
.cat-bar.sticky {
  height: var(--bar-height) !important;
}
.top-bar .wrap,
.cat-bar > .wrap {
  height: var(--bar-height) !important;
}

.top-links a,
.top-actions a,
.categories a,
.cat-actions a,
.menu-label {
  font-size: var(--font-size) !important;
}


/* 1) Spaziatura maggiore tra le voci */
.sub-nav {
  display: flex !important;
  flex-direction: column !important;
}

/* === SEPARATORI TRA SEZIONI – PERFETTAMENTE ALLINEATI === */
.categories .divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0rem;
  font-size: 0.95rem;
  opacity: 0.4;
  line-height: 1;
  height: 100%;
  position: relative;
  top: 1px;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", system-ui, sans-serif;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
  height: 100%;
}

/* === PAGE CONTENT === */
main {
  padding: 2rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  line-height: 1.6;
}

.bar-gap {
  max-width: var(--max-width);
  margin: 1.2rem auto;
  padding: 0 var(--gap);
  font-size: 1rem;
  color: #444;
  text-align: center;
}

}





/* === top-bar.css === */
/* === TOP BAR === */
.top-bar {
  position: sticky;
  top: 0;
  background: rgba(var(--accent-rgb), var(--alpha));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-light);
  height: var(--bar-height);
  z-index: 1000;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
  opacity: 1;
}

.top-bar .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  padding-left: 0.6rem !important;
  padding-right: 0.3rem !important;
}

.top-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: 0 !important;
}

.top-middle {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
}

.top-links {
  display: flex;
  align-items: center;
}

.top-links a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  white-space: nowrap;
  padding: 0 0.6rem;
  position: relative;
}

.top-links a:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  color: rgba(255, 255, 255, 0.5);
}

.top-actions {
  display: flex;
  align-items: center;
  margin-left: auto; /* ⇠ spinge l’intero blocco a destra */
  gap: 0 !important;
}

.top-actions a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0 0.9rem;
  position: relative;
}

.top-actions a:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  color: rgba(255, 255, 255, 0.5);
}

.top-user {
  width: var(--left-width);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.top-user a {
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.top-separator,
.divider {
  display: none !important;
}

.top-links a::before,
.top-actions a::before {
  content: none !important;
}
/* === ICONS & LOGO === */
.logo,
.logo-sticky {
  width: var(--logo-size) !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;

  padding: 0 !important;
  margin: 0 !important;
}

.icon-menu,
.icon-search,
.icon-user,
.menu-sticky {
  width: 28px;
  height: 28px;
  display: block;
}

.icon-search {
  width: 28px;
}

/* === MENU LABEL & SEPARATOR === */
.menu-label {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--text-light);
  line-height: 1;
}

.top-separator {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  padding: 0 0.4rem;
  display: inline-block;
}
/* ========= 1 · Separatore fuori dal bottone nella TOP-BAR ========= */
.top-actions a,
.top-links a {
  position: relative; /* serve per posizionare il ::after */
}

.top-actions a:not(:last-child)::after,
.top-links a:not(:last-child)::after {
  right: -0.45rem !important; /* -0,45 rem = metà gap: la | esce dal bordo */
  pointer-events: none !important; /* la | non è cliccabile */
}

/* compenso del padding destro: il testo resta alla stessa distanza visiva */
.top-actions a:not(:last-child),
.top-links a:not(:last-child) {
  padding-right: calc(0.9rem - 0.45rem) !important;
}

/* ========= 2 · Altezza uniforme 42 px per i “pulsanti” ombreggiati ========= */
.top-actions a,
.cat-actions a,
.top-links a,
.categories a {
  height: var(--button-height) !important; /* 42 px */
  line-height: var(--button-height) !important; /* centra il testo */
}

/* spazio reale tra i bottoni: 2 × 0.6 rem = 1.2 rem complessivi */
.top-links a + a,
.top-actions a + a {
  margin-left: calc(2 * var(--sep-gap));
}

/* il primo link non deve avere margin-left */
.top-links a:first-child,
.top-actions a:first-child {
  margin-left: 0;
}

/* i link devono essere il riferimento per ::before */
.top-links a,
.top-actions a {
  position: relative !important;
}

/* ======== Altezza uniforme 42 px per tutti i pulsanti ombreggiati ======== */
.top-actions a,
.cat-actions a,
.top-links a,
.categories a {
  height: var(--button-height) !important; /* 42 px */
  line-height: var(--button-height) !important; /* centra testo/icona */
  display: inline-flex;
  align-items: center; /* garantisce centratura */
}

/* === TOP-BAR · separatori definitivamente fuori dal pulsante (mag 2025) === */

/* azzera ogni vecchio separatore */
.top-links a::after,
.top-actions a::after {
  content: none !important;
}

/* nuovo separatore ─ si disegna sul link successivo */
.top-links a + a::before,
.top-actions a + a::before {
  content: "|";
  position: absolute;
  left: -1.1rem; /* 0.9 rem (gap) + 0.2 rem di sicurezza */
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  z-index: 5; /* > 0 ⇒ sopra l’ombra box-shadow */
  pointer-events: none;
}

/* mantieni il link punto di riferimento e il giusto spazio fra bottoni */
.top-links a,
.top-actions a {
  position: relative !important;
  margin-left: 0; /* reset */
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
}

/* aggiungi uno spazio (solo visuale) fra i bottoni */
.top-links a + a,
.top-actions a + a {
  margin-left: 0.4rem;
} /*  = 0.9 + 0.3  */
/* ===== TOP-BAR · divisori visibili e gap più stretto (mag 2025) ===== */

/* 1 · Layout dei gruppi */
.top-links,
.top-actions {
  display: flex; /* layout a riga */
  column-gap: 0.4rem; /* distanza netta fra i bordi dei pulsanti */
}

/* 2 · Reset padding interno del link (resta 0.6 rem per lato) */
.top-links a,
.top-actions a {
  padding: 0 0.4rem !important;
  position: relative !important; /* ancoraggio per il divisore */
}

/* 3 · Divisore “|” fuori dal rettangolo rosso
   (si disegna PRIMA di ogni link tranne il primo) */
.top-links a:not(:first-child)::before,
.top-actions a:not(:first-child)::before {
  content: "|";
  position: absolute;
  left: -0.4rem; /* metà del column-gap (0.8 rem) */
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none; /* non cliccabile */
  z-index: 5; /* sopra al box-shadow del pulsante */
}

/* Rende in grassetto tutte le scritte nella top-bar */
.top-bar * {
  font-weight: bold;
}

@media (max-width: 1150px) {
  .top-bar {
    display: none !important;
  }
}

/* RIMOSSE REGOLE HOVER/ACTIVE SPOSTATE IN buttons-over.css */
/* === TOP-BAR BUTTONS UNIFICATI === */
.top-bar .top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: var(--button-height);
  padding: 0 0.85rem;
  border-radius: 8px;
  background: transparent;
  color: var(--text-light);
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
  cursor: pointer;
}
.top-bar .top-btn:focus {
  outline: 2px solid var(--accent-color, #e60044);
  outline-offset: 2px;
}
.top-bar .top-btn:hover,
.top-bar .top-btn:active {
  background: rgba(255,255,255,0.13);
  color: var(--accent-color, #e60044);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.top-bar .top-btn img {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  margin: 0;
  padding: 0;
}
.top-bar .logo-menu-btn img.logo {
  margin-left: 0.5rem;
}
.top-bar .top-btn span {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.01em;
}

.top-bar .login-trigger span {
  min-width: 4.6rem;
  max-width: 4.6rem;
  flex-basis: 4.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.top-bar .login-trigger.is-public-authenticated span {
  min-width: 4.6rem;
  max-width: 4.6rem;
  flex-basis: 4.6rem;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.iat-public-auth-likely-authenticated .top-bar .login-trigger span {
  min-width: 4.6rem;
  max-width: 4.6rem;
  flex-basis: 4.6rem;
}

.iat-public-auth-likely-authenticated.iat-public-auth-pending .top-bar .login-trigger span::after {
  content: "Il mio profilo";
  font-size: 0.86rem;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
}

.iat-public-auth-likely-authenticated.iat-public-auth-pending .top-bar .login-trigger span {
  font-size: 0;
}

/* Allinea i gruppi e previeni overflow */
.top-bar .top-left,
.top-bar .top-middle,
.top-bar .top-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}
.top-bar .top-middle {
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.top-bar .top-actions {
  margin-left: auto;
  gap: 0.4rem;
}
.top-bar .top-links {
  gap: 0.4rem;
}

/* Rimuovi ombre e background doppi su icone interne */
.top-bar .top-btn img:hover,
.top-bar .top-btn img:active {
  background: none !important;
  box-shadow: none !important;
}

/* Assicura che tutto resti dentro il wrap */
.top-bar .wrap {
  overflow: visible;
}

/* === LOGO E MENU BUTTONS: larghezza e padding ridotti === */
.top-bar .logo-btn,
.top-bar .menu-btn {
  width: 42px;
  min-width: 0;
  max-width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  margin-right: 0.5rem !important;
}
.top-bar .logo-btn img.logo,
.top-bar .menu-btn img.icon-menu {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  object-fit: contain;
  display: inline-block;
}

@media (max-width: 900px) {
  .top-bar .logo-btn,
  .top-bar .menu-btn {
    width: 32px;
    max-width: 32px;
    height: 32px;
  }
  .top-bar .logo-btn img.logo,
  .top-bar .menu-btn img.icon-menu {
    width: 22px;
    height: 22px;
  }
}


/* === mini-top.css === */
/* === MINI TOP === */
.mini-top {
  display: none;
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(var(--accent-rgb), var(--alpha));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-light);
  height: var(--bar-height);
  z-index: 1000;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
  opacity: 1;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 0 1rem;
}

/* RIMUOVI padding dal contenitore .mini-top (wrap) per evitare offset */
.mini-top {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Applica padding solo al .wrap, come nella top-bar */
.mini-top .wrap {
  padding-left: 1rem !important;
  padding-right: 0.3rem !important;
  /* nessun gap extra */
  gap: 0 !important;
}

/* Layout interno: sinistra, centro, destra */
.mini-top .top-left,
.mini-top .top-center,
.mini-top .top-right {
  display: flex;
  align-items: center;
}

/* Allinea la top-left senza gap extra */
.mini-top .top-left {
  gap: 0 !important;
}

/* Centro allineato */
.mini-top .top-center {
  flex: 1;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Link stile top-bar */
.mini-top a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  white-space: nowrap;
  padding: 0 0.4rem;
  position: relative;
  height: var(--button-height);
  line-height: var(--button-height);
  display: inline-flex;
  align-items: center;
  font-weight: bold;
}

/* Separatore tra link */
.mini-top a:not(:first-child)::before {
  content: "|";
  position: absolute;
  left: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 5;
}

/* Icone e logo */
.mini-top .logo {
  width: var(--logo-size);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  margin: 0;
}

.mini-top .icon-menu,
.mini-top .icon-search,
.mini-top .icon-user {
  width: 28px;
  height: 28px;
  display: block;
}

/* Responsive: mostra mini-top sotto i 1150px */
@media (max-width: 1150px) {
  .mini-top {
    display: flex !important;
  }
}

/* Nascondi mini-top sopra i 1150px */
@media (min-width: 1151px) {
  .mini-top {
    display: none !important;
  }
}

.mini-top .icon-menu,
.mini-top img.icon-menu {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  object-fit: contain;
}

.top-bar.hidden-top {
  display: none !important;
}

/* Nasconde i separatori "|" nella mini-top */
.mini-top .top-separator,
.mini-top .divider {
  display: none !important;
}

/* Se usi i separatori come ::before nei link, nascondili così: */
.mini-top a::before {
  content: none !important;
}

.mini-top .top-right {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem !important; /* distanza tra lente e user */
  padding-right: 1rem !important; /* distanza dal bordo destro */
}

/* MINI-TOP: Effetti hover/active coerenti con top-bar, ma box-shadow scalato e contenuto nel wrap */
.mini-top .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 38px;
  min-width: 0;
  max-width: 100%;
  padding: 0 1.1rem;
  border-radius: 8px;
  background: transparent;
  color: var(--text-light);
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

/* Elimina gap/margin/padding residui su .mini-btn se presenti */
.mini-top .mini-btn {
  margin: 0 !important;
  padding: 0 !important;
}

.mini-top .mini-btn.logo-btn,
.mini-top .mini-btn.menu-btn {
  padding: 0 0.3rem;
  width: auto;
  min-width: 0;
  height: 38px;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.mini-top .mini-btn.menu-btn {
  /* Elimina larghezza eccessiva */
  max-width: 38px;
  min-width: 0;
}

.mini-top .mini-btn img {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  margin: 0;
  padding: 0;
}

.mini-top .mini-btn.logo-btn img.logo,
.mini-top .mini-btn.menu-btn img.icon-menu {
  width: 28px;
  height: 28px;
  margin: 0;
}

@media (max-width: 900px) {
  .mini-top .mini-btn {
    height: 32px;
    font-size: 0.95rem;
    padding: 0 0.7rem;
  }
  .mini-top .mini-btn.logo-btn,
  .mini-top .mini-btn.menu-btn {
    height: 32px;
    padding: 0 0.15rem;
    max-width: 32px;
  }
  .mini-top .mini-btn img {
    width: 22px;
    height: 22px;
  }
  .mini-top .mini-btn.logo-btn img.logo,
  .mini-top .mini-btn.menu-btn img.icon-menu {
    width: 22px;
    height: 22px;
  }
}

.mini-top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: 1rem !important;
  padding-right: 0.3rem !important;
}
.mini-top .top-left {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
}
.mini-top .top-center {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.mini-top .top-right {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem !important; /* distanza tra lente e user */
  padding-right: 1rem !important; /* distanza dal bordo destro */
}
/* Bottoni mini-btn: padding e font-size scalano con viewport */
.mini-top .mini-btn {
  padding: 0 0.7rem;
  font-size: clamp(0.85rem, 2vw, 1rem);
  height: clamp(28px, 5vw, 34px);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
}
.mini-top .mini-btn.logo-btn img.logo,
.mini-top .mini-btn.menu-btn img.icon-menu {
  width: 28px;
  height: 28px;
}
@media (max-width: 900px) {
  .mini-top .wrap {
    gap: 0.2rem;
    padding: 0 2px;
  }
  .mini-top .mini-btn {
    padding: 0 0.3rem;
    font-size: 0.92rem;
    height: 28px;
    min-width: 0;
    max-width: 100%;
  }
  .mini-top .mini-btn.logo-btn img.logo,
  .mini-top .mini-btn.menu-btn img.icon-menu {
    width: 22px;
    height: 22px;
  }
}
.mini-top .wrap {
  overflow: hidden;
}

/* Logo: nessun margin/padding extra */
.mini-top .top-left .logo {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Menu: nessun margin extra, solo tra logo e menu */
.mini-top .top-left .icon-menu {
  margin-left: 0 !important;
}

/* Fix: il bottone menu-btn era traslato a sinistra perché la regola .mini-top .top-left .icon-menu { margin-left: 0.5rem !important; } si applicava anche all'icona dentro il bottone, non solo tra i bottoni. Serve spostare il margin-right sul bottone, non sull'icona. */

/* Applica margin-left solo al bottone menu-btn rispetto al logo-btn */
.mini-top .mini-btn.menu-btn {
  margin-left: 0.6rem !important;
}

.mini-top .top-center .top-links {
  display: flex;
  align-items: center;
  gap: 0.55rem !important; /* distanza più equilibrata tra le categorie */
}

.mini-top .top-center .top-links a {
  padding: 0 0.85rem !important; /* pulsante meno largo */
  min-width: 2rem;
  font-size: clamp(0.93rem, 1.7vw, 1.04rem);
  height: clamp(28px, 4vw, 34px);
  border-radius: 8px;
  transition: padding 0.2s, font-size 0.2s, height 0.2s;
}

@media (max-width: 900px) {
  .mini-top .top-center .top-links {
    gap: 0.38rem !important;
  }
  .mini-top .top-center .top-links a {
    padding: 0 0.45rem !important;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    height: clamp(22px, 6vw, 28px);
  }
}
@media (max-width: 800px) {
  .mini-top .top-center .top-links a {
    padding: 0 0.32rem !important;
    font-size: clamp(0.81rem, 2vw, 0.91rem);
    height: clamp(20px, 7vw, 25px);
  }
}

/* === cat-bar-2.css === */
/* =============================================================
   CATEGORY BAR – CLEANED & CONSOLIDATED (May 2025)
   – ridondanze eliminate, override uniformati, cascata ricostruita
   – ogni commento mantiene il contesto originale
   – mantiene ~tutte le dichiarazioni utili senza tagli drastici
   ============================================================= */

/* === BASE LAYOUT ================================================= */
.cat-bar {
  --alpha: 0.92; /* trasparenza sticky – personalizzabile */

  position: relative;
  height: var(--bar-height);
  color: var(--text-dark);
  background: transparent; /* sfondo trasparente fuori dal wrapper */

  display: flex;
  justify-content: center;
  overflow: visible !important;
}

.cat-bar:not(.sticky) {
  width: 100%;
  max-width: var(--max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.cat-bar > .wrap {
  position: relative; /* necessario per ancorare .cat-left e .cat-actions dentro il wrap */
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center; /* centrato come nel file originale */ /* meglio di center per gestire gap */

  height: 100%;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gap);
  gap: 1rem;

  /* estetica */
  background: var(--cat-bg);
  border-top: 1px solid #ddd;
  border-radius: 9px;
  overflow: hidden;
}

/* disabilita i side‑scroll glitch su dispositivi touch */
.cat-bar > .wrap,
.cat-bar > .wrap * {
  overscroll-behavior-y: none !important;
  touch-action: pan-x !important;
  -ms-touch-action: pan-x !important;
}

/* === COLONNA SINISTRA (logo + hamburger) ========================= */
.cat-left {
  position: absolute;
  top: 0;
  left: var(--gap);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-left: 0 !important;
  min-width: 0;
  z-index: 2;
}

/* Hamburger icon (desktop hidden, sticky visibile) */
.icon-menu.menu-trigger,
.menu-sticky.menu-trigger {
  display: none !important;   /* default: nascosto */
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 0.7rem;
}

/* === COLONNA DESTRA (icone azione) =============================== */
.cat-actions {
  position: absolute;
  top: 0;
  right: var(--gap);
  height: 100%;
  display: none;            /* visibile solo in sticky */
  align-items: center;
  gap: 0.4rem; /* gap ridotto tra le icone per sticky */
  width: auto !important;
  padding-right: var(--gap);
}

.cat-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  line-height: var(--button-height);
  gap: 0.4rem;
  padding: 0 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

/* rimuove extra‑padding per l’ultima icona (user) */
.cat-actions a:last-child { padding-right: 0 !important; }
.cat-actions a:first-child { padding-left: 0.4rem !important; }

/* === CATEGORIES SCROLLER ======================================== */
.categories-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.categories {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* centra le voci all’interno della categoria */
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE */
  padding-right: 2rem;        /* spazio overflow dots */
}

.categories::-webkit-scrollbar { display: none; }

.categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height) !important;
  line-height: var(--button-height) !important;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
  font-weight: bold;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.divider { opacity: 0.4; }

/* overflow indicator (ellipsis ⇢)*/
.cat-overflow-indicator {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 2rem;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
  color: rgba(0,0,0,0.4);
  pointer-events: none;
}

/* === STICKY STATE =============================================== */
.cat-bar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  background: rgba(var(--accent-rgb), var(--alpha)) !important;
  color: var(--text-light);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  z-index: 999;
}

.cat-bar.sticky > .wrap {
  background: transparent;
  border-top: none;
  overflow: visible !important; /* PATCH: sticky progress bar visibile fuori dal wrap */
}

/* fade edges in sticky */
.cat-bar.sticky .categories {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 3.4rem, black 85%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  justify-content: center !important;
  padding-left: 5.8rem !important;
  padding-right: 5.8rem !important;
  box-sizing: border-box;
}

/* colori testo icone/categorie */
.cat-bar.sticky .categories a,
.cat-bar.sticky .divider { color: var(--text-light); }

.cat-bar.sticky .categories a {
  flex: 0 0 auto;
}

/* mostra icone azione & hamburger */
.cat-bar.sticky .cat-actions         { display: flex; }
.cat-bar.sticky .menu-sticky,        /* per vecchie markup */
.cat-bar.sticky .icon-menu.menu-trigger {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  z-index: 1002 !important; /* sopra fade */
  cursor: pointer !important;
}

/* mostra logo ridotto e nasconde quello grande */
.cat-bar:not(.sticky) .logo-sticky           { display: none !important; }
.cat-bar.sticky        .cat-left img         { display: none !important; }
.cat-bar.sticky        .logo-sticky,
.cat-bar.sticky        .menu-sticky.menu-trigger {
  display: flex !important;
  align-items: center;
}

/* Ensure pointer cursor for sticky logo */
.cat-bar.sticky .logo-sticky {
  cursor: pointer !important;
}

.cat-bar.sticky .logo-sticky:hover {
  filter: brightness(1.15);
}

/* Abbassa logo e menu come gli altri su hover */
.cat-bar.sticky .logo-sticky:hover,
.cat-bar.sticky .menu-sticky.menu-trigger:hover,
.cat-bar.sticky .icon-menu.menu-trigger:hover {
  transform: translateY(2px) !important;
  filter: brightness(1.15);
}


/* Sticky bar: effetto hover bottone logo come top-bar (rimpicciolisci solo il contenitore, non l'immagine) */
.cat-bar.sticky .logo-sticky {
  transition: box-shadow 0.2s, transform 0.13s, filter 0.13s;
}
.cat-bar.sticky .logo-sticky:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.13);
  filter: brightness(1.15);
  /* NON usare scale qui! */
}

/* overflow dots colore in sticky */
.cat-bar.sticky .cat-overflow-indicator {
  background: linear-gradient(to right, transparent, rgba(210,19,23,0.5));
  color: #fff;
}

/* === TRANSITION TOP‑BAR (se usata con .top-bar) ================== */
.top-bar {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hidden-top {
  transform: translateY(-100%);
  opacity: 0;
}

/* === RESPONSIVE (≤900 px) ======================================= */
@media (max-width: 900px) {
  .cat-left {
    gap: 0.5rem;
  }
  .cat-left .logo {
    max-width: 1.7rem;
    min-width: 1.2rem;
    width: 1.7rem;
  }
  .cat-left .icon-menu.menu-trigger,
  .cat-left .menu-sticky.menu-trigger {
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.1rem;
    margin-left: 0.1rem;
  }
}

/* === UTILITY ===================================================== */
/* forza cliccabilità menu-sticky (patch anti-overlay) */
.cat-bar.sticky .categories::before,
.cat-bar.sticky .categories::after {
  pointer-events: none !important;
}

/* nasconde top‑separator ovunque */
.cat-bar .top-separator { display: none !important; }

/* === LOGO VISIBILITY PATCH (definitivo) === */
/* Nasconde logo in modalità non-sticky */
.cat-bar:not(.sticky) .logo-sticky {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mostra logo solo in sticky */
.cat-bar.sticky .logo-sticky {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto;
  max-width: 2.2rem;
  width: 2.2rem;
  margin-right: 0.2rem;
}

/* Sticky bar: solo 1rem a sinistra tra logo e bordo/wrap */
.cat-bar.sticky .cat-left {
  left: 0.3rem !important;
  padding-left: 0 !important;
}

/* Sticky bar: gap tra logo e menu 0.6rem */
.cat-bar.sticky .cat-left {
  gap: 0.2rem !important;
}

.cat-bar.sticky > .wrap {
  padding-left: 0 !important;
}

.cat-bar.sticky .logo-sticky {
  margin-left: 0rem !important;
}

/* FINAL STICKY NO-FADE FIX v33: niente ombreggiatura/fade nella sticky normale */
.cat-bar.sticky .categories {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.cat-bar.sticky .cat-overflow-indicator {
  display: none !important;
  background: none !important;
}

/* FINAL STICKY CATBAR CENTER FIX v32: controlli laterali e categorie in griglia */
@media (min-width: 701px) {
  .cat-bar.sticky > .wrap {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) 96px !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }

  .cat-bar.sticky .cat-left {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 100% !important;
    z-index: 3 !important;
  }

  .cat-bar.sticky .categories {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cat-bar.sticky .cat-actions {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: auto !important;
    height: 100% !important;
    padding-right: 0 !important;
    z-index: 3 !important;
  }
}




/* === progress-bar.css === */
/* === PROGRESS BAR === */

.scroll-progress-bar {
  height: 3px;
  width: 100%;
  background-color: #eee;
  position: fixed;
  top: calc(var(--bar-height) * 2); /* o “104px” se hai due barre sticky */
  left: 0;
  z-index: 1001;
}

.scroll-progress {
  height: 100%;
  width: 0%;
  background-color: var(--accent-color);
  transition:
    width 0.2s ease-out,
    background-color 0.2s ease-in-out;
}

/* cambia colore quando c’è già una barra sticky sopra */
.cat-bar.sticky ~ .scroll-progress-bar .scroll-progress {
  background-color: #fff;
}

/* === BARRA DI LETTURA PROGRESSIVA CENTRATA === */
/* sotto la cat-bar non-sticky */
.cat-bar .progress-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.cat-bar .progress-container .scroll-progress {
  height: 5px;
  width: 0%;
  max-width: 100vw;
  background-color: var(--accent-color);
  transition:
    width 0.2s ease-out,
    background-color 0.3s ease;
  margin: 0 auto;
}

/* quando la cat-bar diventa sticky */
.cat-bar.sticky .progress-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1001;
}

.cat-bar.sticky .progress-container .scroll-progress {
  background-color: white;
  width: 0%;
  max-width: 100vw;
  margin: 0 auto;
}

/* === BARRA DI LETTURA PROGRESSIVA CENTRATA E FUSA CORRETTAMENTE === */

/* Posizionata sotto la cat-bar rosa (non sticky) */
.cat-bar .progress-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.cat-bar .progress-container .scroll-progress {
  height: 5px;
  width: 0%;
  max-width: 100vw;
  background-color: var(--accent-color);
  transition: width 0.2s ease-out, background-color 0.3s ease;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
}

/* Quando sticky: barra bianca FUSA nel bordo INFERIORE INTERNO dello sticky */
.cat-bar.sticky .progress-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1001;
}

.cat-bar.sticky .progress-container .scroll-progress {
  background-color: white;
  width: 0%;
  max-width: 100vw;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
}

/* Mini sticky progress bar */
.mini-progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}
.mini-scroll-progress {
  height: 100%;
  width: 0%;
  background: var(--accent-color, #e60044);
  transition: width 0.2s;
  border-radius: 0 0 4px 4px;
}
/* Riduci l'altezza della progress bar categoria sotto i 1000px */
@media (max-width: 1000px) and (min-width: 701px) {
  .cat-bar:not(.sticky) .progress-container .scroll-progress {
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
  }
}

/* === drawer-menu-2.css === */
*, *::before, *::after {
  box-sizing: border-box;
}


/* === DRAWER MENU === */
.side-menu {
  position: fixed;
  top: var(--bar-height);
  left: 0;
  width: var(--drawer-w) !important;
  height: calc(100vh - var(--bar-height));
  background: rgba(var(--accent-rgb), var(--alpha));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-light);
  padding: calc(1.2rem * var(--scale)) calc(1rem * var(--scale)) 0.8rem !important;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 1500;
}

.side-footer {
  margin-top: auto;
  display: flex;
  justify-content: center;   /* o space-around / space-evenly */
  align-items: center;       /* centri verticalmente */
  padding-block: calc(1rem * var(--scale));   /* top e bottom uguali */
  padding-inline: calc(1rem * var(--scale));  /* left e right */
  border-top: 1px solid rgba(255,255,255,0.12);
}

.side-footer img {
  width: 24px;
  height: 24px;
  display: block;   /* evita il baseline-shift tipico di <img> inline */
  margin: 0;        /* azzera eventuali margini */
}


.side-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto !important;
  max-height: 100vh;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.side-menu.open {
  transform: translateX(0);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 2rem;
  line-height: 1;
  align-self: flex-end;
  cursor: pointer;
}

/* Effetto grafico coerente per la X di chiusura anche nel drawer menu */
.side-menu .close-btn {
  color: #fff !important;
  font-size: 1.45rem !important;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
  z-index: 2;
  padding: 0.2rem;
}
.side-menu .close-btn:hover {
  color: #fff !important; /* resta bianca anche in hover */
  transform: scale(1.13) rotate(8deg);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  line-height: 1.2;
}

.side-nav a,
.side-item.has-sub,
.sub-nav a {  
  color: var(--text-light);
  text-decoration: none;
  font-size: calc(1rem * var(--scale)) !important;
  font-weight: 600;
  line-height: 1.2;
  padding: calc(0.5rem * var(--scale)) calc(0.2rem * var(--scale)) !important;
  border-radius: 6px;
  transition: background-color 0.25s;
}

.sub-nav a {
  /* Stesse regole del menu principale, inclusa la dimensione */
  color: var(--text-light);
  font-size: calc(1.03rem * var(--scale)) !important;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.25s;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: calc(0.5rem * var(--scale)) calc(0.2rem * var(--scale)) !important;
  box-sizing: border-box;
}

.side-nav a:hover,
.side-item.has-sub:hover,
.side-item.has-sub:focus-visible,
.sub-nav a:hover,
.sub-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

.side-footer {
  margin-top: auto;            /* rimane in fondo al drawer */
  display: flex;
  justify-content: center;     /* o space-evenly / space-around, a seconda di come vuoi distribuire gli icon */
  align-items: center;         /* centra verticalmente le img */
  gap: 0.8rem;
  padding: 1rem;               /* padding simmetrico top/bottom per non sbilanciare il centering */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.side-footer img {
  width: 24px;
  height: 24px;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1400;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

.side-item.has-sub {
  width: 100%;
  border: none;
  background: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  padding: 0.5rem 0;
  cursor: pointer;
}
.side-item .arrow {
  font-size: 1.2rem;
}


.back-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.4rem 0;
  color: #000;
  text-align: left;
}
.sub-title {
  margin: 0.4rem 0 1rem;
  font-size: calc(1.6rem * var(--scale)) !important;
}
.sub-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
  line-height: 1.2;
.sub-menu {
  pointer-events: none;
} /* nessun click se nascosto */
.sub-menu.open {
  pointer-events: auto;
} /* riattivi quando è visibile */

/* ==== SOTTO-MENU: un’unica dichiarazione pulita ==== */
aside.sub-menu {
  position: fixed;
  top: var(--bar-height);
  left: var(--drawer-w);
  width: var(--drawer-w);
  height: calc(100vh - var(--bar-height));
  background: var(--cat-bg);
  color: var(--text-dark);
  padding: calc(1rem * var(--scale));
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.35s ease,
    opacity 0.2s ease,
    visibility 0.2s step-end;
   z-index: 1550;
   overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Quando è aperto: */
aside.sub-menu.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.35s ease,
    opacity 0.2s ease 0.05s,
    visibility 0.2s step-start;
}


.side-nav a,          /* link del menu rosso principale */
.side-item.has-sub,   /* pulsante “Sezioni ▸” */
.sub-nav a            /* link del sotto-menu bianco */ {
  font-weight: 700; /* = bold */
}

.sub-menu {
  background: var(--cat-bg); /* lo stesso rosa della barra categorie */
  color: var(--text-dark); /* testo scuro, come sulla cat-bar */
}


.sub-menu a:hover {
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

.sub-menu,
.sub-menu.open {
  background: var(--cat-bg) !important; /* stesso colore della cat-bar */
}

.sub-menu .back-btn,
.sub-menu .sub-title,
.sub-menu a {
  color: var(--text-dark);
  font-weight: 700;
}



.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo a sinistra, X a destra */
  padding: 0 0 1.2rem; /* spaziatura sotto il header */
}

.side-logo {
  height: 50px; /* ridimensiona il logo */
  width: auto;
}

.close-btn {
  /* (resta com’era) */
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.side-nav {
  margin-top: 0;
}

.side-menu,
.side-menu * {
  text-transform: uppercase !important;
}

.cat-bar.sticky .cat-left img.menu-sticky.menu-trigger {
  display: block !important;
}

/* sub-menu: su mobile rimane nascosto finché non viene aperto esplicitamente */
@media (max-width: 500px) {
  aside.sub-menu:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  aside.sub-menu.open {
    left: 0 !important;
    transform: translateX(0) !important;
    z-index: 1600 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

.cat-bar.sticky .logo-sticky {
  height: var(--logo-size) !important;
  width: auto !important;
  max-height: none !important;
}



aside.sub-menu {
  overflow-y: auto !important;
  max-height: 100vh !important;
  -webkit-overflow-scrolling: touch; /* per iOS */
} 

/* ==== SCROLLBAR ELEGANTE E BIANCO nel drawer ==== */
.side-menu,
aside.sub-menu {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.8) transparent;
}

/* WebKit */
.side-menu::-webkit-scrollbar,
aside.sub-menu::-webkit-scrollbar {
  width: 4px;               /* spessore più sottile */
}

.side-menu::-webkit-scrollbar-track,
aside.sub-menu::-webkit-scrollbar-track {
  background: transparent;  /* o un leggero semi-trasparente se vuoi */
}

.side-menu::-webkit-scrollbar-thumb,
aside.sub-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.8);
  border-radius: 2px;
  border: 1px solid transparent; /* per un po’ di “respiro” attorno */
}

.side-menu::-webkit-scrollbar-thumb:hover,
aside.sub-menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,1);
}
/* Icone social nel drawer (sfondo rosso): rendi bianche */
.side-footer .iat-social-icon {
  filter: brightness(0) invert(1) !important;
}

.mini-categories-wrapper {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

@media (max-width: 700px) {
  .side-menu .side-item.has-sub .arrow,
  .side-item.has-sub .arrow {
    font-size: 1.35rem !important; /* forza la dimensione della freccia su mobile */
    width: 1.35rem !important;     /* utile se la freccia è SVG o icona */
    height: 1.35rem !important;
    color: #fff !important;
    margin-left: auto !important;
    padding-right: 1.85rem !important;
    display: flex !important;
    align-self: center !important;
    line-height: 1 !important;
  }
  .side-item.has-sub {
    align-items: center !important;
  }
}
/* Debug: se la freccia non cambia, controlla che la classe .arrow sia effettivamente sull'elemento giusto e che non sia un'icona con dimensione fissa */

/* Sposta la freccia e la X verso sinistra su desktop aumentando il padding destro */
.side-item.has-sub .arrow {
  padding-right: 0.7rem !important;
}

.side-menu .close-btn {
  padding-right: 0.7rem !important;
}




/* Spaziatura tra i due nav anche su mobile */
#subSections .sub-nav + .sub-title {
  margin-top: 2rem;
  display: block;
}

/* === modal-search.css === */
/* === MODALE RICERCA AVANZATA (POPUP CERCA) === */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s step-end;
  z-index: 2000;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0.25s step-start;
}

.modal-dialog {
  background: #fff;
  max-width: 960px;
  width: 90%;
  padding: 8px calc(2rem * var(--scale)) !important;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  color: #000;
}

/* Unify close button style with login modal */
.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 1.45rem !important;
  line-height: 1;
  background: none;
  border: none;
  color: #bbb !important;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
  z-index: 2;
  padding: 0.2rem;
}
.modal-close:hover {
  color: #D21317 !important;
  transform: scale(1.13) rotate(8deg);
}

.search-form {
  display: grid;
  row-gap: 1.4rem;
  padding: 1rem 0;
}

.search-form label {
  font-weight: 700;
  margin-top: 0.6rem;
}

.input-lg,
.search-form input[type="text"],
.search-form select {
  width: 100%;
  font-size: calc(1.2rem * var(--scale));
  padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
  border: 2px solid #ccd1d4;
  border-radius: 4px;
}

.btn-primary,
.btn-advanced {
  padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;
  font-size: calc(1rem * var(--scale)) !important;
}

.btn-advanced {
  background: var(--accent-color);
  color: var(--text-light);
  border: none;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 1rem;
}
.btn-advanced:hover {
  opacity: 0.9;
}

.with-info-search,
.info-icon {
  display: inline-block;
  vertical-align: middle;
}


.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
  background: var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
}
.info-icon .tooltip {
  display: none;
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 16rem;
  background: rgba(var(--accent-rgb), 0.97);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  line-height: 1.3;
  max-width: 14rem;
  z-index: 1000;
  white-space: normal;
}
.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  display: block;
}

/* elimina ogni altro row-gap o margin che fosse stato ripetuto sopra */
#searchModal .search-form *,
#searchModal .search-row *,
#searchModal .radio-group.spaced * {
  row-gap: unset !important;
  margin: unset !important;
  padding: unset !important;
}



/* === MODALE RICERCA AVANZATA ==================================== */
/* Tutte le regole relative a .modal, .modal.open, .modal-dialog, .modal-close, .search-form, .input-lg, .btn-primary, .btn-advanced, .with-info-search, .info-icon, ecc. sono state estratte in modal-search.css */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s step-end;
  z-index: 2000;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s step-start;
}

.modal-dialog {
  background: #fff;
  max-width: 960px;
  width: 90%;
  padding: 2.5rem 2rem;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  color: #000;
}

/* Unify close button style with login modal */
.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 1.45rem !important;
  line-height: 1;
  background: none;
  border: none;
  color: #bbb !important;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
  z-index: 2;
  padding: 0.2rem;
}
.modal-close:hover {
  color: #D21317 !important;
  transform: scale(1.13) rotate(8deg);
}

.search-form {
  display: grid;
  row-gap: 1.4rem;
}

.search-form label {
  font-weight: 700;
  margin-top: 0.6rem;
}

.input-lg,
.search-form select,
.search-form input[type="text"] {
  font-size: calc(1.2rem * var(--scale));
  padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
  border: 2px solid #ccd1d4;
  border-radius: 4px;
}

.btn-primary {
  background: var(--accent-color);
  color: #fff;
  border: none;
  padding: 0.9rem 2.2rem;
  font-size: 0.5rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
}
.btn-primary:hover {
  opacity: 0.9;
}
/* === Hint sotto il form principale, prima del pulsante “Ricerca Avanzata” === */
#searchModal .search-hint {
  display: block;        /* occupa tutta la larghezza disponibile */
  text-align: center;    /* centra il testo */
  margin: 0.5rem 0 1.7rem 0;      /* spazio sopra e sotto */
  font-size: 1rem;     /* dimensione leggermente minore */
  color: #444;           /* grigio scuro per leggibilità */
  line-height: 1.4;      /* interlinea comoda */
}

/* --- FIX “sfarfallio” --------------------------------------------------
   Ombra al passaggio del mouse, affondo di soli 2 px.
   Metti questo snippet in coda al tuo foglio CSS.
----------------------------------------------------------------------- */



/* (facoltativo) effetto “click” leggermente più marcato */
.top-actions a:active,
.top-links a:active,
.cat-bar .categories a:active {
  transform: translateY(3px);
}
.modal-dialog.small {
  max-width: 420px;
  padding: 1.2rem 1rem;
}

.input-lg,
.search-form select,
.search-form input[type="text"] {
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
}

.btn-primary {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
}
.icon-animated {
  width: 145px; /* further enlarged from 126.5px */
  height: 145px;
  display: block;
  margin: 0 auto 1.1rem auto;
  transition: transform 0.7s cubic-bezier(.77,0,.18,1), opacity 0.5s;
}

.icon-animated.hover-effect {
  animation: fade-in-zoom-omino-modal 0.7s cubic-bezier(.77,0,.18,1);
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

@keyframes fade-in-zoom-omino-modal {
  0%   { opacity: 0; filter: blur(2px); transform: scale(0.92); }
  60%  { opacity: 1; filter: blur(0.5px); transform: scale(1.03); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ——— Form di ricerca: spaziature e stili puliti ——— */
.search-form {
  display: grid;
  row-gap: 1.4rem; /* gap standard tra righe */
  padding: 1rem 0;
}

.radio-group.spaced label {
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* etichetta “Filtra per sezione” più vicina al select */
.search-form label[for="section"] {
  margin-bottom: 0.4rem;
}

/* nasconde “Filtra per regione” */
#searchModal label[for="region"],
#searchModal #region {
  display: none !important;
}

/* pulsanti: mantieni 100% width e spazio */
.search-form .btn-primary,
.search-form .btn-advanced {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

/* aggiungi il pulsante Ricerca Avanzata se manca */
.btn-advanced {
  background: var(--accent-color);
  color: var(--text-light);
  border: none;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 1rem;
}
.btn-advanced:hover {
  opacity: 0.9;
}
/* ——— Info-icon accanto al label principale ——— */
.with-info-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem; /* spazio sotto al label */
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: 8px;
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  cursor: pointer;
  line-height: 1;
  color: #fff;
  background: var(--accent-color, #d21317);
  border-radius: 50%;
  position: relative;
  user-select: none;
  vertical-align: middle;
}
.info-icon .tooltip {
  display: none;
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 16rem;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.3;
  border-radius: 4px;
  z-index: 1000;
  white-space: normal;
}
.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  display: block;
}

/* ——— Radio buttons in colonna, testo normale ——— */
.radio-group.spaced {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.radio-group.spaced label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal !important;
}

/* ——— Riduci un pelino la distanza label→input principale ——— */
.search-form label[for="main-search"] {
  margin-bottom: 0.15rem !important;
}
/* =============================================================================
   OVERRIDE TOTALE PER LA MODALE DI RICERCA
   ============================================================================= */
#searchModal .search-form {
  display: grid !important;
  row-gap: 1rem !important;
  padding: 1rem 0 !important;
}

#searchModal .search-form label[for="main-search"] {
  margin-bottom: 0.2rem !important;
  font-weight: normal !important;
}

#searchModal .search-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  margin: 0 !important;
  margin-bottom: 1rem !important;
}

#searchModal .search-row input[type="text"] {
  margin-bottom: 0 !important;
}

#searchModal .radio-group.spaced {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

#searchModal .radio-group.spaced label {
  font-weight: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

#searchModal label[for="section"] {
  margin-bottom: 1.3rem !important;
  font-weight: normal !important;
}

#searchModal select#section {
  margin-bottom: 1rem !important;
}

#searchModal label[for="region"],
#searchModal #region {
  display: none !important;
}

#searchModal .btn-primary,
#searchModal .btn-advanced {
  display: block !important;
  width: 100% !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 1rem !important;
  margin-top: 1rem !important;
  border-radius: 4px !important;
}

#searchModal .btn-advanced {
  background: var(--accent-color) !important;
  color: var(--text-light) !important;
  border: none !important;
}

#searchModal .with-info-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.4rem !important;
}

#searchModal .info-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
  font-size: 0.85rem !important;
}

#searchModal .info-icon .tooltip {
  width: 16rem !important;
}

/* elimina ogni altro row-gap o margin che fosse stato ripetuto sopra */
#searchModal .search-form *,
#searchModal .search-row *,
#searchModal .radio-group.spaced * {
  /* non ereditano più gap/margin errati */
  row-gap: unset !important;
  margin: unset !important;
  padding: unset !important;
}
/* =============================================================================
   OVERRIDE ALTEZZA 25px PER INPUT E BUTTON NELLA MODALE DI RICERCA
   ============================================================================= */
/* Solo input di testo, select e bottoni, NON i radio */
#searchModal .search-form input[type="text"],
#searchModal .search-form select,
#searchModal .search-form .btn-primary,
#searchModal .search-form .btn-advanced {
  height: 40px !important;
  line-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Se vuoi ridurre anche l’altezza dei radio (cerchietti) */
#searchModal .search-form .radio-group.spaced input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
}

/* Se i bottoni hanno ancora troppo padding orizzontale, riducilo: */
#searchModal .search-form .btn-primary,
#searchModal .search-form .btn-advanced {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* =============================================================================
   RIDUCI SPAZIATURA LABEL → INPUT
   ============================================================================= */
#searchModal .search-form label.with-info-search {
  /* meno spazio sotto al label principale */
  margin-bottom: 1px !important;
}

#searchModal .search-form .search-row {
  /* avvicina subito la riga che contiene l'input */
  margin-top: 1px !important;
}

#searchModal .search-form input[type="text"] {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
/* Elimina qualsiasi margin-bottom sulla label */
#searchModal .search-form label[for="section"] {
  margin-bottom: 2px !important;
  display: block;
}

/* Elimina qualsiasi margin-top sul select */
#searchModal .search-form select#section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* ========== OVERRIDE SPAZIATURA “Filtra per sezione” ========== */
#searchModal .search-form {
  /* se vuoi, rendi più compatta tutta la form */
  display: grid !important;
  row-gap: 0.5rem !important;
}

#searchModal .search-form label[for="section"] {
  /* toglie qualunque spazio sotto la label */
  margin-bottom: 0 !important;
  display: block !important;
}

#searchModal .search-form select#section {
  /* toglie qualunque spazio sopra il select */
  margin-top: 0 !important;
  margin-bottom: 1rem !important; /* lascia un minimo per separare dal pulsante */
}
/* 1) Spazio sotto al blocco input+radio */
#searchModal .search-form .search-row {
  margin-bottom: 1rem !important;
}

/* 2) Spazio sopra alla label “Filtra per sezione” */
#searchModal .search-form label[for="section"] {
  margin-top: 1rem !important;
}
/* Tooltip “info” più piccolo, su sfondo rosso semitrasparente, con padding */
#searchModal .info-icon .tooltip {
  background: rgba(
    var(--accent-rgb),
    0.97
  ) !important; /* rosso #D21317 semitrasparente */
  color: #fff !important;
  font-size: 0.85rem !important; /* testo leggermente più piccolo */
  padding: 0.5rem 0.75rem !important; /* spazio attorno al testo */
  border-radius: 4px !important;
  line-height: 1.3 !important;
  max-width: 14rem !important; /* puoi adattare la larghezza se serve */
}

/* Mantieni il tooltip centrato sotto l’icona */
#searchModal .info-icon {
  position: relative;
}
#searchModal .info-icon .tooltip {
  top: 125% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* ——— Indenta testo interno di input e select ——— */
#searchModal .search-form input[type="text"],
#searchModal .search-form select {
  /* 0.5rem = stesso indent che usi sull’input di testo */
  padding-left: 0.5rem !important;
}

/* ——— (opzionale) se avevi ancora un margin-left sul select, rimuovilo ——— */
#searchModal .search-form select {
  margin-left: 0 !important;
} 

/* === MODALE RICERCA === */
.modal-dialog {
  padding: 30px calc(2.2rem * var(--scale)) !important;
}
.input-lg,
.search-form input,
.search-form select {
  font-size: calc(1.2rem * var(--scale));
  padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale));
}
.btn-primary,
.btn-advanced {
  font-size: calc(1rem * var(--scale)) !important;
  padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;
}

@media (max-width: 700px) {
  #searchModal .search-form select#section {
    font-size: 1.1rem !important;
    min-height: 2.2em;
  }
  #searchModal .search-form select#section option {
    font-size: 1.1rem !important;
  }
}

/* Forza il colore rosso brand (#d21317) per i radio button selezionati nella modale, usando accent-color e un fallback CSS per compatibilità. */
#searchModal .search-form input[type="radio"]:checked {
  accent-color: #d21317 !important; /* rosso brand */
}

#searchModal .search-form input[type="radio"]:checked {
  accent-color: #d21317 !important;
}

/* Forza il colore del testo dell'opzione '- Seleziona -' e del select a nero, indipendentemente dal colore di default del dispositivo. */
#searchModal .search-form select#section option[value=""] {
  color: #111 !important;
  font-size: 0.90rem !important;
}

#searchModal .search-form select#section {
  color: #111 !important;
}

#searchModal .search-form select#section,
#searchModal .search-form select#section option {
  font-size: 0.97em !important;
}
#searchModal .search-form select#section option[value=""] {
  font-size: 0.95em !important;
}

/* === ACCORDION OPZIONI DI RICERCA (SOLO CSS) === */
#searchModal .search-form {
  position: relative;
}
#searchModal .search-form .search-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--accent-color, #D21317);
  background: none;
  border: none;
  margin: 0.7rem 0 0.2rem 0;
  padding: 0.2rem 0.1rem;
  transition: color 0.18s;
}
#searchModal .search-form .search-accordion-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.66,0,.34,1);
  font-size: 1.25em;
  line-height: 1;
  margin-right: 0.1em;
}
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] .search-accordion-arrow {
  transform: rotate(90deg);
}

/* Nascondi tutto ciò che sta sotto l'input principale e sopra il bottone CERCA */
#searchModal .search-form .search-accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 0.55s cubic-bezier(.77,0,.18,1),
    opacity 0.38s cubic-bezier(.77,0,.18,1),
    padding 0.38s cubic-bezier(.77,0,.18,1);
  will-change: max-height, opacity, padding;
  /* Aggiungi un leggero delay per la chiusura per evitare "collasso" improvviso */
}
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
  max-height: 900px;
  opacity: 1;
  pointer-events: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  transition:
    max-height 0.65s cubic-bezier(.77,0,.18,1),
    opacity 0.45s cubic-bezier(.77,0,.18,1),
    padding 0.45s cubic-bezier(.77,0,.18,1);
}
#searchModal .search-form .search-accordion-content > * {
  transition:
    opacity 0.38s cubic-bezier(.77,0,.18,1),
    transform 0.38s cubic-bezier(.77,0,.18,1);
  will-change: opacity, transform;
}
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content > * {
  transition-delay: 0.10s;
}

/* Stile per la riga della freccia e scritta */
#searchModal .search-form .search-accordion-toggle {
  user-select: none;
}

/* Responsive: margini e font */
@media (max-width: 700px) {
  #searchModal .search-form .search-accordion-toggle {
    font-size: 1rem;
    padding: 0.3rem 0.1rem;
  }
}

/* --- HIDE/SHOW LOGIC: solo CSS, ma serve JS per toggle aria-expanded --- */
#searchModal .search-form .search-accordion-toggle {
  color: #111 !important;
}

#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] {
  color: var(--accent-color, #D21317) !important;
}

#searchModal .btn-advanced {
  margin-top: 1rem !important;
}

#searchModal .search-form .btn-primary {
  /* Riduci la distanza sotto il bottone CERCA */
  margin-bottom: 0.7rem !important;
}

/* Aumenta la distanza sotto il toggle Opzioni di ricerca */
#searchModal .search-form .search-accordion-toggle {
  margin-bottom: 1.2rem !important;
}

#searchModal .search-form .search-accordion-toggle {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important;
}

/* Spaziatura interna degli elementi dell'accordion */
#searchModal .search-form .search-accordion-content > *:first-child {
  margin-top: 0.3rem !important;
}
#searchModal .search-form .search-accordion-content > *:last-child {
  margin-bottom: 0.3rem !important;
}
#searchModal .search-form .search-accordion-content > * {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
#searchModal .search-form .search-accordion-toggle {
  margin-bottom: 0 !important;
}

/* Rimuovi bordo e ombra su focus e active per il toggle dell'accordion */
#searchModal .search-form .search-accordion-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}
#searchModal .search-form .search-accordion-toggle::-moz-focus-inner {
  border: 0 !important;
}
#searchModal .search-form .search-accordion-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

@media (hover: none) and (pointer: coarse), (max-width: 700px) {
  #searchModal .search-form .search-accordion-toggle:focus,
  #searchModal .search-form .search-accordion-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    filter: none !important;
  }
  #searchModal .search-form .search-accordion-toggle {
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    filter: none !important;
  }
}

#searchModal .modal-header .icon-animated {
  width: 270px !important;
  height: 270px !important;
  max-width: 100%;
  max-height: 180px !important;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.1rem auto !important;
}
#searchModal .search-form {
  row-gap: 0.3rem !important;
}
#searchModal .search-form label.with-info-search {
  margin-bottom: 0 !important;
}

/* Spazio tra input di ricerca e pulsante CERCA */
#searchModal .search-form input#main-search {
  margin-bottom: 0.32rem !important;
}
#searchModal .search-form .btn-primary {
  margin-top: 0.18rem !important;
}

/* Effetto accordion moderno: fade+slide+scale, con animazione su figli */
#searchModal .search-form .search-accordion-content {
  transition:
    max-height 0.6s cubic-bezier(.77,0,.18,1),
    opacity 0.38s cubic-bezier(.77,0,.18,1),
    padding 0.38s cubic-bezier(.77,0,.18,1);
  will-change: max-height, opacity, padding;
  /* Per evitare "jump" su chiusura */
}
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
  transition:
    max-height 0.7s cubic-bezier(.77,0,.18,1),
    opacity 0.45s cubic-bezier(.77,0,.18,1),
    padding 0.45s cubic-bezier(.77,0,.18,1);
}
#searchModal .search-form .search-accordion-content > * {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 0.44s cubic-bezier(.77,0,.18,1),
    transform 0.44s cubic-bezier(.77,0,.18,1);
  will-change: opacity, transform;
}
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content > * {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.13s;
}
#searchModal .search-form .search-accordion-content {
  /* Per evitare "jump" su chiusura */
  overflow: hidden;
}



/* === mini-sticky-bar.css === */
/* === Mini Sticky Bar – Core Styles === */
#miniSticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-height);
  background: rgba(var(--accent-rgb), var(--alpha));
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  z-index: 1002;
}

#miniSticky .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mini-left,
.mini-right {
  display: flex;
  align-items: center;
  gap: 0.35rem; /* gap ridotto tra logo e icona menu */
  flex-shrink: 0;
}

.mini-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-left: 0.5rem;
  /* nessun margin extra sulle icone */
}

.mini-left .logo {
  /* width: 28px !important; */
  /* height: 28px !important; */
  margin: 0;
  padding: 0;
  object-fit: contain;
  display: inline-block;
  transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
}

.mini-left .icon-menu,
.mini-left .icon-search,
.mini-left .icon-user,
.mini-left button {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}

.mini-categories-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
  min-width: 0;
  margin: 0 0.5rem;
  /* Spazio aumentato per distanziare di più l'icona menu dalla prima categoria */
  padding-left: 3.4rem !important;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}

.mini-categories-wrapper::-webkit-scrollbar {
  display: none;
}

.mini-categories {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.mini-categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size);
  font-weight: 600;
  padding: 0 0.6rem;
  height: var(--button-height);
  line-height: var(--button-height);
  background: none;
}

.ellipsis-icon {
  display:block; 
  width: var(--icon-size);
  height: var(--icon-size);
  cursor: pointer;
}

/* === Mini Sticky Bar – Core Styles & Modern Mask-Fade === */
#miniSticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-height);
  background: rgba(var(--accent-rgb), var(--alpha));
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  z-index: 1002;
}

#miniSticky .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mini-left,
.mini-right {
  display: flex;
  align-items: center;
  gap: 0.35rem; /* gap ridotto tra logo e icona menu */
  flex-shrink: 0;
}

.mini-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-left: 0.0rem;
  /* nessun margin extra sulle icone */
}

.mini-left .logo {
  /* width: 28px !important; */
  /* height: 28px !important; */
  margin: 0;
  padding: 0;
  object-fit: contain;
  display: inline-block;
  transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
}

.mini-left .icon-menu,
.mini-left .icon-search,
.mini-left .icon-user,
.mini-left button {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}

.mini-categories-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
  min-width: 0;
  margin: 0 0.5rem;
  /* Spazio aumentato per distanziare di più l'icona menu dalla prima categoria */
  padding-left: 3.4rem !important;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}

.mini-categories-wrapper::-webkit-scrollbar {
  display: none;
}

.mini-categories {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.mini-categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size);
  font-weight: 600;
  padding: 0 0.6rem;
  height: var(--button-height);
  line-height: var(--button-height);
  background: none;
}

/* mostra l'icona “…” solo quando c’è overflow */
#miniSticky.has-overflow .ellipsis-icon {
  display: block;
}
.ellipsis-icon {
  display: none;
  width: var(--icon-size);
  height: var(--icon-size);
  cursor: pointer;
}


/* Modern mask-fade effect attivato in overflow */
#miniSticky.overflowing-right .mini-categories-wrapper {
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

/* prima voce NON visibile ⇒ fade a sinistra */
#miniSticky.overflowing-left .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem, black 100%);
          mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem, black 100%);
}

/* ultima voce NON visibile ⇒ fade a destra */
#miniSticky.overflowing-right .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     black 0, black calc(100% - 3.4rem), transparent 100%);
          mask-image:linear-gradient(to right,
                     black 0, black calc(100% - 3.4rem), transparent 100%);
}

/* overflow su entrambi i lati */
#miniSticky.overflowing-left.overflowing-right .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem,
                     black calc(100% - 3.4rem), transparent 100%);
          mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem,
                     black calc(100% - 3.4rem), transparent 100%);
}


/* Nasconde l’icona “menu-sticky menu-trigger” nella mini sticky bar */
#miniSticky img.menu-sticky.menu-trigger {
  display: none !important;
}
#miniSticky .icon-menu.menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 1003 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: 0 !important;
  top: 0 !important;
}


/* === Mini Sticky Bar – 3D Active & Hover Effect === */
#miniSticky .mini-categories a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  height: var(--button-height);
  line-height: var(--button-height);
  font-weight: bold;
  border-radius: 6px;
  background: transparent;
  color: var(--accent-color);
  transform: translate(2px, 2px);
  box-shadow:
    inset -2px 0 0 var(--accent-color),
    inset 0 -2px 0 var(--accent-color),
    inset 2px 2px 4px rgba(0, 0, 0, 0.07),
    inset -1px -1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}

#miniSticky .mini-categories a.active:hover {
  /* inverse transform & shadows on hover */
  transform: translate(-2px, -2px);
  box-shadow:
    inset 2px 0 0 var(--accent-color),
    inset 0 2px 0 var(--accent-color),
    inset -2px -2px 4px rgba(0, 0, 0, 0.07),
    inset 1px 1px 3px rgba(0, 0, 0, 0.15);
  background: transparent;
  color: var(--accent-color);
}

#miniSticky .mini-categories a:hover:not(.active) {
  /* coherent hover for non-active items */
  transform: translate(2px, 2px);
  background: transparent;
  color: var(--accent-color);
  box-shadow:
    inset -2px 0 0 var(--accent-color),
    inset 0 -2px 0 var(--accent-color),
    inset 2px 2px 4px rgba(0, 0, 0, 0.07),
    inset -1px -1px 3px rgba(0, 0, 0, 0.15);
}
/* === Mini Sticky Bar – White 3D Active & Hover Effect === */
#miniSticky .mini-categories a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  height: var(--button-height);
  line-height: var(--button-height);
  font-weight: bold;
  border-radius: 6px;
  background: transparent;
  color: #fff !important;
  transform: translate(2px, 2px) !important;
  box-shadow:
    inset -2px 0 0 #fff,
    inset 0 -2px 0 #fff,
    inset 2px 2px 4px rgba(255,255,255,0.07),
    inset -1px -1px 3px rgba(255,255,255,0.15);
  transition: all 0.2s ease-in-out;
}

/* rimuovi l’ombra bianca quando passi sopra l’active */
#miniSticky .mini-categories a.active:hover {
  box-shadow: none !important;
}

/* applica l’ombra bianca quando passi sopra un elemento non-active */
#miniSticky .mini-categories a:not(.active):hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  transform: translate(2px, 2px) !important;
  box-shadow:
    inset -2px 0 0 #fff,
    inset 0 -2px 0 #fff,
    inset 2px 2px 4px rgba(255,255,255,0.07),
    inset -1px -1px 3px rgba(255,255,255,0.15);
  transition: all 0.2s ease-in-out;
}
#miniSticky {
  /* Sfondo completamente opaco */
  background: var(--accent-color) !important;
  /* Disabilita trasparenza e blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mini-categories a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 0.6rem; /* padding verticale aumentato */
  margin-bottom: 4px;      /* lascia spazio per far “uscire” l’ombra sotto */
  line-height: 1.1;
  border-radius: 8px;

  background-color: transparent;
  color: #fff;
  box-shadow:
    inset -2px 0 0 #fff,
    inset 0 -2px 0 #fff,
    inset 2px 2px 4px rgba(0, 0, 0, 0.07),
    inset -1px -1px 3px rgba(0, 0, 0, 0.15);
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
.mini-categories a.active:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 2px 0 0 #fff,
    inset 0 2px 0 #fff,
    inset -2px -2px 4px rgba(0, 0, 0, 0.07),
    inset 1px 1px 3px rgba(0, 0, 0, 0.15);
  background: transparent;
  color: #fff;
}

/* === Mini Sticky Bar – Progress Bar Styles === */
#miniSticky .mini-progress-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  max-width: var(--max-width, 1200px);
  height: 5px;
  background: transparent;
  z-index: 1004;
  pointer-events: none;
  display: flex !important;
  justify-content: center;
  opacity: 1 !important;
}

#miniSticky .mini-scroll-progress {
  height: 100%;
  width: 0%;
  background: #fff !important;
  transition: width 0.2s;
  border-radius: 0 0 4px 4px;
  opacity: 1 !important;
  margin: 0 auto;
}

@media (max-width: 1000px) and (min-width: 701px) {
  #miniSticky .mini-progress-container {
    height: 3px !important;
  }
  #miniSticky .mini-scroll-progress {
    height: 100% !important;
    min-height: 3px !important;
    max-height: 3px !important;
  }
}

@media (max-width: 600px) {
  #miniSticky .icon-menu,
  #miniSticky img.icon-menu,
  #miniSticky .icon-menu.menu-trigger,
  #miniSticky img.icon-menu.menu-trigger {
    margin-right: 0.8rem;
    height: 1.7rem;
  }
}

/* === Mini Sticky Bar – 3D Active & Hover Effect (SCALING, COERENZA CON CAT-BAR STICKY) === */
#miniSticky .mini-categories a.active:not(.no-override) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(0.2rem * var(--scale, 1)) calc(0.6rem * var(--scale, 1)) !important;
  height: calc(var(--button-height) * var(--scale, 1)) !important;
  line-height: calc(var(--button-height) * var(--scale, 1)) !important;
  font-weight: bold !important;
  border-radius: calc(6px * var(--scale, 1)) !important;
  background: transparent !important;
  color: #fff !important;
  transform: translate(calc(2px * var(--scale, 1)), calc(2px * var(--scale, 1))) !important;
  box-shadow: inset -2px 0 0 #fff,
    inset 0 -2px 0 #fff,
    inset calc(2px * var(--scale, 1)) calc(2px * var(--scale, 1)) calc(4px * var(--scale, 1)) rgba(0,0,0,0.07),
    inset calc(-1px * var(--scale, 1)) calc(-1px * var(--scale, 1)) calc(3px * var(--scale, 1)) rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease-in-out !important;
}
#miniSticky .mini-categories a.active:hover:not(.no-override) {
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  color: #fff !important;
}
#miniSticky .mini-categories a:hover:not(.active):not(.no-override) {
  transform: translate(calc(2px * var(--scale, 1)), calc(2px * var(--scale, 1))) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset -2px 0 0 #fff,
    inset 0 -2px 0 #fff,
    inset calc(2px * var(--scale, 1)) calc(2px * var(--scale, 1)) calc(4px * var(--scale, 1)) rgba(0,0,0,0.07),
    inset -1px -1px 3px rgba(0,0,0,0.15) !important;
}
#miniSticky .mini-categories a {
  border-radius: calc(6px * var(--scale, 1)) !important;
  font-size: var(--font-size) !important;
  padding: calc(0.2rem * var(--scale, 1)) calc(0.6rem * var(--scale, 1)) !important;
  height: calc(var(--button-height) * var(--scale, 1)) !important;
  transition: all 0.2s ease-in-out !important;
}

/* fade SX                                    */
#miniSticky.overflowing-left  .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem, black 100%);
          mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem, black 100%);
}
/* fade DX                                    */
#miniSticky.overflowing-right .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     black 0, black calc(100% - 3.4rem), transparent 100%);
          mask-image:linear-gradient(to right,
                     black 0, black calc(100% - 3.4rem), transparent 100%);
}
/* fade su entrambi i lati                    */
#miniSticky.overflowing-left.overflowing-right .mini-categories-wrapper{
  -webkit-mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem,
                     black calc(100% - 3.4rem), transparent 100%);
          mask-image:linear-gradient(to right,
                     transparent 0, black 3.4rem,
                     black calc(100% - 3.4rem), transparent 100%);
}

/* Add pointer cursor to mini sticky bar logo */
#miniSticky .mini-left a .logo {
  cursor: pointer;
}

/* === PATCH: MINI-STICKY-BAR HAMBURGER BUTTON VISIBLE BACKGROUND === */
#miniSticky .mini-left .icon-menu.menu-trigger {
  background: transparent;
  border: none;
  outline: none;
  /* Ensure the button area is visible and matches other buttons */
}
#miniSticky .mini-left .icon-menu.menu-trigger:hover,
#miniSticky .mini-left .icon-menu.menu-trigger:focus,
#miniSticky .mini-left .icon-menu.menu-trigger:active {
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  outline: none;
  border-radius: 8px;
}
#miniSticky .mini-left .icon-menu.menu-trigger {
  /* Add a subtle border to make the button area visible, like search/user */
  border: 1px solid transparent;
}
#miniSticky .mini-left .icon-menu.menu-trigger:hover,
#miniSticky .mini-left .icon-menu.menu-trigger:focus {
  border: 1px solid rgba(255,255,255,0.18);
}

/* --- FIX: MINI-STICKY-BAR HAMBURGER BUTTON BORDER TO MATCH LOGO --- */
#miniSticky .mini-left .icon-menu.menu-trigger {
  border: none !important;
}
#miniSticky .mini-left .icon-menu.menu-trigger:hover,
#miniSticky .mini-left .icon-menu.menu-trigger:focus {
  border: none !important;
}

/* === MINI-STICKY-BAR LOGO & HAMBURGER: BUTTON-LIKE, UNIFIED HOVER/ACTIVE === */
#miniSticky .mini-left a,
#miniSticky .mini-left .icon-menu.menu-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}
#miniSticky .mini-left a .logo {
  /* width: 28px !important; */
  /* height: 28px !important; */
  margin: 0;
  padding: 0;
  object-fit: contain;
  display: inline-block;
  transition: filter 0.18s, box-shadow 0.18s, background 0.18s, transform 0.1s;
}
@media (min-width: 100px) and (max-width: 900px) {
  #miniSticky .mini-left a,
  #miniSticky .mini-left .icon-menu.menu-trigger {
    width: 36px !important;
    height: 36px !important;
  }
  /* Lascia le icone e logo scalare con le variabili */
}
@media (min-width: 900px) and (max-width: 1000px) {
  #miniSticky .mini-left a {
    width: 44px !important;
    height: 44px !important;
  }
  #miniSticky .mini-left a .logo {
    width: 38px !important;
    height: 38px !important;
  }
  #miniSticky .mini-left .icon-menu.menu-trigger {
    width: 44px !important;
    height: 44px !important;
  }
  #miniSticky .mini-left .icon-menu.menu-trigger > * {
    width: 28px !important;
    height: 28px !important;
  }
}
#miniSticky .mini-left a:hover,
#miniSticky .mini-left a:focus,
#miniSticky .mini-left a:active {
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  outline: none;
}

/* PATCH: Effetto hover sulla sezione attiva della mini-sticky-bar identico alla cat-bar */
#miniSticky .mini-categories:hover a.active:not(:hover):not(.no-override) {
  opacity: 0.4 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#miniSticky .mini-categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
  /* Quando il mouse NON è sopra nessuna voce, la voce attiva resta normale */
  opacity: 1 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(255,255,255,0.07), inset -1px -1px 3px rgba(255,255,255,0.15) !important;
  transform: translate(2px, 2px) !important;
}

#miniSticky .mini-categories a.active:hover:not(.no-override) {
  /* Nessun movimento in hover sulla voce attiva */
  transform: none !important;
}


/* === effetti-grafici.css === */
/* RIMOSSE le graffe e la dichiarazione @layer override che racchiudevano tutto il file. Tutte le regole sono ora a livello root. */

/* sotto-menu rosa: hover ad alto contrasto, coerente col drawer principale */
.sub-menu a:hover,
.sub-menu a:focus-visible,
.sub-nav a:hover,
.sub-nav a:focus-visible {
  background: rgba(var(--accent-rgb), var(--alpha)) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  display: block;
}

.cat-bar .categories a.active:not(.no-override) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.2rem 0.6rem !important;
  height: var(--button-height) !important;
  line-height: var(--button-height) !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--accent-color) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease-in-out !important;
}

.cat-bar.sticky .categories a.active:not(.no-override) {
  color: #fff !important;
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
}

.cat-bar .categories a.active:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: inset 2px 0 0 var(--accent-color), inset 0 2px 0 var(--accent-color), inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15) !important;
  background: transparent !important;
  color: var(--accent-color) !important;
}

.cat-bar.sticky .categories a.active:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: inset 2px 0 0 #fff, inset 0 2px 0 #fff, inset -2px -2px 4px rgba(0, 0, 0, 0.07), inset 1px 1px 3px rgba(0, 0, 0, 0.15) !important;
  background: transparent !important;
  color: #fff !important;
}

.cat-bar .categories a:hover:not(.no-override) {
  transform: translate(2px, 2px) !important;
  background: transparent !important;
  color: var(--accent-color) !important;
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
}

.cat-bar .categories a.active:hover:not(.no-override) {
  transform: translate(4px, 4px) !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--accent-color) !important;
}

.cat-bar.sticky .categories a.active:hover:not(.no-override) {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #fff !important;
}

.cat-bar.sticky .categories a:hover:not(.no-override) {
  color: #fff !important;
  background: transparent !important;
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Tutte le regole hover/active sono ora in buttons-over.css */

.categories a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 0.6rem; /* aumenta il padding verticale */
  margin-bottom: 4px; /* lascia spazio per la shadow */
  line-height: 1.1;
  border-radius: 8px;

  background-color: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-color);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.9);
  font-weight: bold;
  transition: all 0.2s ease;
}
/* —– OVERRIDE: disattiva l’active quando si hovera un’altra voce —– */
.cat-bar .categories:hover a.active:not(:hover):not(.no-override),
.cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
  /* Solo trasparenza, nessun movimento */
  opacity: 0.4 !important;
  color: var(--accent-color) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.cat-bar .categories a.active:hover:not(.no-override),
.cat-bar.sticky .categories a.active:hover:not(.no-override) {
  /* Nessun movimento in hover sulla voce attiva */
  transform: none !important;
}

.cat-bar .categories a:hover:not(.active):not(.no-override) {
  color: var(--accent-color) !important;
  background: transparent !important;
}

.cat-bar.sticky .categories a:hover:not(.active):not(.no-override) {
  color: #fff !important;
  background: transparent !important;
}
/* Allarga area cliccabile senza ridurre l’icona */
.icon-menu,
.top-bar .icon-menu,
.cat-bar.sticky .menu-sticky {
  box-sizing: content-box !important;  /* padding esterno al content */
  width: 28px !important;               /* dimensione icona fissa */
  height: 28px !important;
  padding: 0.75rem !important;          /* area cliccabile più grande */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
}

.icon-menu:hover,
.top-bar .icon-menu:hover,
.cat-bar.sticky .menu-sticky:hover {
  background-color: rgba(255,255,255,0.15) !important;
}
/* ——— Solo per le icone: fissa 28×28 + padding uniforme ——— */
.top-bar .icon-menu,
.top-bar .icon-search,
.top-bar .icon-user,
.cat-bar.sticky .menu-sticky,
.cat-bar.sticky .icon-search,
.cat-bar.sticky .icon-user {
  box-sizing: content-box !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

/* hover uniforme */
.top-bar .icon-menu:hover,
.top-bar .icon-search:hover,
.top-bar .icon-user:hover,
.cat-bar.sticky .menu-sticky:hover,
.cat-bar.sticky .icon-search:hover,
.cat-bar.sticky .icon-user:hover {
  background-color: rgba(255,255,255,0.15) !important;
}

/* ——— Solo per il logo: niente width/height forzate, solo padding ——— */
.top-bar .logo,
.cat-bar.sticky .logo-sticky {
  box-sizing: content-box !important;
  padding: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

.top-bar .logo:hover,
.cat-bar.sticky .logo-sticky:hover {
  background-color: rgba(255,255,255,0.15) !important;
}
/* — override finale — */
/* la cat-bar non-sticky deve seguire la stessa larghezza utile dei banner top */
.cat-bar:not(.sticky) > .wrap {
  max-width: 100% !important;
}


/* Stato normale */
img.icon-menu,
img.menu-sticky,
.top-bar .icon-menu,
.cat-bar.sticky .menu-sticky {
  transform: rotate(0deg) !important;
  transition: transform 0.3s ease !important;
  display: inline-block !important;
  backface-visibility: hidden !important;
  will-change: transform;
  transform-origin: center;
  cursor: pointer !important;
}


/* Quando il menu è aperto, ruota l’icona */
body.menu-open img.icon-menu,
body.menu-open img.menu-sticky,
body.menu-open .top-bar .icon-menu,
body.menu-open .cat-bar.sticky .menu-sticky,
body.menu-open #miniSticky .icon-menu.menu-trigger,
body.menu-open .mob-top .icon-menu.menu-trigger,
body.menu-open .mob-top .mob-ico.menu-trigger {
  transform: rotate(-90deg) !important;
}



.top-bar img.icon-menu,
.cat-bar.sticky img.menu-sticky,
#miniSticky icon-menu-sticky {
  transition: transform 0.3s ease-in-out !important;
  transform: rotate(0deg) !important;
  backface-visibility: hidden;
  will-change: transform;
  cursor: pointer;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  position: relative;
  z-index: 9999 !important;
}

body.menu-open img.icon-menu,
body.menu-open img.menu-sticky {
  transform: rotate(-90deg) !important;
}

body.menu-open img.icon-menu,
body.menu-open img.menu-sticky {
  filter: brightness(1.7) drop-shadow(0 0 6px rgba(255, 255, 255, 1)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}


/* === Mini Sticky Bar – Core Styles === */
#miniSticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-height);
  background: rgba(var(--accent-rgb), var(--alpha));
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  z-index: 1002;
}

#miniSticky .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  overflow: hidden;
}

.mini-left,
.mini-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.mini-categories-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
  min-width: 0;
  margin: 0 0.5rem;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}

.mini-categories-wrapper::-webkit-scrollbar {
  display: none;
}

.mini-categories {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.mini-categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size);
  font-weight: 600;
  padding: 0 0.6rem;
  height: var(--button-height);
  line-height: var(--button-height);
  background: none;
}

.ellipsis-icon {
  display: none;
  width: var(--icon-size);
  height: var(--icon-size);
  cursor: pointer;
}

/* mostra i puntini solo in caso di overflow (gestito via JS) */
#miniSticky.overflowing-right .ellipsis-icon {
  display: block;
}
/* Modern mask-fade effect attivato in overflow */
#miniSticky.overflowing-right .mini-categories-wrapper {
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

.cat-bar.sticky .categories a:hover:not(.active):not(.no-override),
.cat-bar.sticky .categories a:hover:not(.no-override) {
  color: var(--accent-color) !important;
  background: transparent !important;
  /* forza override su regole precedenti */
}

.cat-bar.sticky .categories a:hover:not(.active):not(.no-override),
.cat-bar.sticky .categories a:active:not(.active):not(.no-override) {
  color: #fff !important;
}

.cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
  /* La sezione attiva resta bianca e si oscura solo (opacity), nessun movimento */
  opacity: 0.4 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* RIMOSSA la regola globale per search-trigger e login-trigger, ora limitata solo alla sticky bar */
.cat-bar.sticky a.search-trigger:hover, .cat-bar.sticky a.search-trigger:focus, .cat-bar.sticky a.search-trigger:active,
.cat-bar.sticky a.login-trigger:hover, .cat-bar.sticky a.login-trigger:focus, .cat-bar.sticky a.login-trigger:active {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

.cat-bar.sticky .menu-btn.menu-trigger {
  display: inline-flex !important;
}
.cat-bar.sticky .menu-sticky {
  display: inline-block !important;
}

/* PATCH: Solo in sticky, quando il mouse è nello spazio vuoto della .categories, la voce attiva NON deve cambiare aspetto (nessun hover, nessuna opacità ridotta, nessun box-shadow, nessun colore diverso). */
.cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
  opacity: 1 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
  transform: translate(2px, 2px) !important;
}

/* PATCH definitiva e precisa: la voce attiva NON si opacizza e NON perde il suo aspetto quando il mouse è su uno spazio vuoto della .categories,
   sia in cat-bar normale che sticky. Si opacizza normalmente solo quando il mouse è sopra un altro link. L'effetto visivo resta quello originale. */

.cat-bar .categories:hover:not(:has(a:hover)) a.active:not(.no-override),
.cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
  /* Ripristina esattamente lo stile di default della voce attiva */
  opacity: 1 !important;
  color: var(--accent-color) !important;
  background: transparent !important;
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
  transform: translate(2px, 2px) !important;
}
.cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override) {
  color: #fff !important;
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* PATCH: Impedisci che la voce attiva si "sollevi" (transform) quando il mouse è sopra un'altra voce della barra categorie */
.cat-bar .categories:hover a.active:not(:hover):not(.no-override),
.cat-bar.sticky .categories:hover a.active:not(:hover):not(.no-override) {
  /* Niente transform: il testo resta fermo */
  transform: translate(2px, 2px) !important;
}

@media (max-width: 1000px) and (min-width: 701px) {
  /* Patch: Limita l'altezza della .cat-bar > .wrap e delle .categories per evitare che gli effetti escano dal contenitore */
  .cat-bar:not(.sticky) > .wrap {
    overflow: hidden !important;
    height: var(--bar-height) !important;
    min-height: var(--bar-height) !important;
    max-height: var(--bar-height) !important;
  }
  .cat-bar:not(.sticky) .categories {
    overflow: hidden !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .cat-bar:not(.sticky) .categories a:not(.no-override),
  .cat-bar:not(.sticky) .categories a.active:not(.no-override) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 1.7rem !important;
    min-height: 1.7rem !important;
    line-height: 1.7rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
    /* RIMOSSO height: 100% e min-height: 100% che annullavano l'effetto */
  }

}


/* === buttons-over.css === */
/* buttons-over.css: Hover e active per bottoni top-bar, mini-top, mini-sticky-bar */

/* HOVER/ACTIVE TOP-BAR E CATEGORIE */
@layer override {
  .icon-menu:hover,
  .icon-search:hover,
  .icon-user:hover,
  .menu-sticky:hover,
  .top-actions a:hover,
  .top-links a:hover,
  .cat-bar .categories a:hover,
  .cat-bar.sticky .categories a:hover,
  .cat-bar.sticky .icon-search:hover,
  .cat-bar.sticky .icon-user:hover,
  .cat-bar.sticky .menu-sticky:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition:
      box-shadow 0.4s ease,
      transform 0.1s ease;
    cursor: pointer;
    border-radius: 6px;
    transform: translateY(2px);
  }
  .top-actions a:active,
  .top-links a:active,
  .cat-bar .categories a:active {
    transform: translateY(3px);
  }

  /* HOVER/ACTIVE MINI-TOP */
  .mini-top a:hover {
    background: rgba(255,255,255,0.10);
    color: var(--accent-color, #e60044);
    transition: background 0.2s, color 0.2s;
  }
  .mini-top a:active {
    background: rgba(255,255,255,0.18);
    color: var(--accent-color, #e60044);
  }

  /* === HOVER/ACTIVE SOLO SUL BOTTONE === */
  .top-bar .top-btn:hover,
  .top-bar .top-btn:active,
  .top-bar .top-btn:focus {
    background: rgba(255,255,255,0.13);
    color: var(--accent-color, #e60044);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    outline: none;
  }
  .top-bar .top-btn img:hover,
  .top-bar .top-btn img:active {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Mantieni il testo ROSSO sulle bottoni categorie in hover/active (solo NON sticky) */
  .cat-bar .categories a:hover,
  .cat-bar .categories a:active {
    color: var(--accent-color) !important;
  }
  /* Mantieni il testo BIANCO sulle categorie della sticky bar in hover/active */
  .cat-bar.sticky .categories a:hover,
  .cat-bar.sticky .categories a:active {
    color: #fff !important;
  }

  /* Mantieni il testo bianco sulle categorie della top-bar in hover/active */
  .top-bar .top-links .top-btn:hover,
  .top-bar .top-links .top-btn:active {
    color: #fff !important;
  }

  /* Mantieni il testo bianco anche sui bottoni top-actions (destra top-bar) in hover/active */
  .top-bar .top-actions .top-btn:hover,
  .top-bar .top-actions .top-btn:active {
    color: #fff !important;
  }

  /* MINI-TOP: hover/active identico a top-bar, bianco uniforme */
  .mini-top .mini-btn:hover,
  .mini-top .mini-btn:active,
  .mini-top .mini-btn:focus {
    background: rgba(255,255,255,0.13) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    outline: none;
  }
  .mini-top .mini-btn img:hover,
  .mini-top .mini-btn img:active {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* RIMUOVI OGNI REGOLA HOVER/ACTIVE SU .menu-btn.menu-trigger e .menu-sticky.menu-trigger */
  /* --- PATCH: rimosse regole che alterano visibilità o effetti su questi selettori --- */
  /*
  .cat-bar .menu-btn.menu-trigger,
  .cat-bar .menu-sticky.menu-trigger {
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    transform: none !important;
  }
  .cat-bar.sticky .menu-btn.menu-trigger,
  .cat-bar.sticky .menu-sticky.menu-trigger {
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    transform: none !important;
  }
  */
}


/* === modal-login.css === */
/* ==========================
   1. Visibilità del modal
   ========================== */
#loginModal.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* come la search modal */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  z-index: 2000;
  transition: opacity 0.25s ease, visibility 0.25s step-end;
}
#loginModal.modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s step-start;
}
#loginModal.modal[aria-hidden="true"] {
  display: none;
}
#loginModal.modal:not(.open)[aria-hidden="true"] {
  display: none !important;
}

/* RIMUOVI overlay secondario */
#loginModal .modal-overlay {
  display: none !important;
}

/* ==========================
   3. Dialog
   ========================== */
#loginModal .modal-dialog.small {
  max-width: 420px;
  width: 92vw;
  padding: 2.2rem 1.7rem 2rem 1.7rem;
  border-radius: 6px !important;
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.18), 0 1.5px 8px 0 rgba(210,19,23,0.07);
  border: 1.5px solid #f3f3f3;
  overflow: hidden;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  animation: modalFadeIn 0.32s cubic-bezier(.33,1.02,.57,1.01);
}

/* Effetto hover su dialog: ombra più intensa come modal search */
#loginModal .modal-dialog.small:hover {
  box-shadow: 0 16px 48px 0 rgba(0,0,0,0.22), 0 2px 12px 0 rgba(210,19,23,0.10);
  transition: box-shadow 0.18s;
}

/* anima l’entrata */
@keyframes modalFadeIn {
  from { transform: translateY(-32px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}

/* ==========================
   4. Close button
   ========================== */
#loginModal .modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 1.45rem;
  line-height: 1;
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
  z-index: 2;
  padding: 0.2rem;
}
#loginModal .modal-close:hover {
  color: #D21317;
  transform: scale(1.13) rotate(8deg);
}

/* ==========================
   5. Header titoli
   ========================== */
#loginModal .modal-header {
  text-align: center;
  margin-bottom: 0.5rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding-bottom: 0.1rem;
}
#loginModal .modal-header h1 {
  font-size: 1.45rem;
  margin: 0;
  color: #D21317;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.18;
}

/* ==========================
   6. Social buttons
   ========================== */
#loginModal .social-login {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.1rem !important;
}
#loginModal .social-login .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.68rem 0.2rem;
  border-radius: 7px;
  font-size: 0.97rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: filter 0.18s, box-shadow 0.18s, transform 0.13s;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.07);
  border: none;
}
#loginModal .btn-google {
  background: linear-gradient(90deg, #DB4437 80%, #c23321 100%);
}
#loginModal .btn-facebook {
  background: linear-gradient(90deg, #4267B2 80%, #29487d 100%);
}
#loginModal .btn-linkedin {
  background: linear-gradient(90deg, #0A66C2 80%, #084b8f 100%);
}
#loginModal .btn-google:hover,
#loginModal .btn-facebook:hover,
#loginModal .btn-linkedin:hover {
  filter: brightness(1.08) drop-shadow(0 2px 8px #eee);
  box-shadow: 0 2px 12px 0 rgba(66,103,178,0.07);
  transform: translateY(-2px) scale(1.03);
  opacity: 0.93;
}

/* ==========================
   7. Separator
   ========================== */
#loginModal .separator {
  text-align: center !important;
  display: block !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  color: #666 !important;
  margin-top: 0 !important;
  font-style: italic !important;
  margin-bottom: 1.1rem !important;
}
#loginModal .separator::before,
#loginModal .separator::after {
  display: none !important;
  content: none !important;
}

/* ==========================
   8. Form fields
   ========================== */
#loginModal .login-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem !important;
  padding: 0 !important;
}
#loginModal .login-form label {
  font-size: 0.97rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 0.13rem !important;
  margin-top: 0 !important;
  letter-spacing: 0.01em;
}
#loginModal .login-form input,
#loginModal .login-form select {
  font-size: 1.08rem !important;
  padding: 0.48rem 0.9rem !important;
  width: 100%;
  border: 1.5px solid #E2E2E2;
  border-radius: 7px;
  background: #fafbfc;
  color: #222;
  margin: 0 !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
  transition: border-color 0.18s, box-shadow 0.18s;
}
#loginModal .login-form input:focus,
#loginModal .login-form select:focus {
  outline: none;
  border-color: #D21317;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(210,19,23,0.07);
}

/* ==========================
   9. Remember me + checkbox
   ========================== */
#loginModal .remember-me {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.93rem;
  color: #555;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
#loginModal .remember-me input[type="checkbox"] {
  width: 0.95em !important;
  height: 0.95em !important;
  accent-color: #D21317;
  margin: 0;
  vertical-align: middle;
}

/* ==========================
   10. Primary button
   ========================== */
#loginModal .btn-primary {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding: 0.85rem !important;
  min-height: 48px !important;
  background: linear-gradient(90deg, #D21317 80%, #B01214 100%);
  color: #FFF;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
  box-shadow: 0 2px 10px 0 rgba(210,19,23,0.13), 0 1.5px 8px 0 rgba(210,19,23,0.07) !important;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}
#loginModal .btn-primary:hover {
  background: linear-gradient(90deg, #B01214 80%, #D21317 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  transform: translateY(2px) !important;
  opacity: 0.9 !important;
  filter: none !important;
  text-decoration: none !important;
}
#loginModal .btn-primary,
#loginModal .login-form button[type="submit"] {
  font-size: 1.35rem !important;
  padding: 0.6rem 1.5rem !important;
  min-height: 48px !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
@media (max-width: 700px), (max-width: 600px), (max-width: 500px) {
  #loginModal .btn-primary,
  #loginModal .login-form button[type="submit"] {
    font-size: 0.68rem !important;
    padding: 0.95rem !important;
    min-height: 48px !important;
  }
}
@media (max-width: 600px) {
  #loginModal .btn-primary,
  #loginModal .login-form button[type="submit"] {
    font-size: 2rem !important;
    padding: 1.1rem !important;
    min-height: 54px !important;
  }
}

/* ==========================
   11. Links sotto form
   ========================== */
#loginModal .forgot-password,
#loginModal .register-text {
  text-align: center;
  font-size: 0.93rem;
  color: #666;
  margin-top: 1.5rem;
  transition: color 0.18s;
}
#loginModal .forgot-password:hover {
  color: #D21317;
}
#loginModal .register-text {
  margin-top: 1.1rem;
}
#loginModal .register-text .register-link {
  color: #D21317;
  font-weight: 700;
  text-decoration: none;
  transition: text-decoration 0.18s, color 0.18s;
  letter-spacing: 0.01em;
}
#loginModal .register-text .register-link:hover {
  text-decoration: none !important;
  color: #B01214;
}

/* === MODAL LOGIN: stile e comportamento identici a modal-search === */
#loginModal.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  z-index: 2000;
}
#loginModal.modal.open {
  opacity: 1;
  visibility: visible;
}
#loginModal .modal-dialog.small {
  max-width: 420px;
  width: 92vw;
  padding: 2.2rem 1.7rem 2rem 1.7rem;
  border-radius: 6px !important;
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.18), 0 1.5px 8px 0 rgba(210,19,23,0.07);
  border: 1.5px solid #f3f3f3;
  overflow: hidden;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  animation: modalFadeIn 0.32s cubic-bezier(.33,1.02,.57,1.01);
}
#loginModal .modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  transition: color 0.18s, transform 0.18s;
}
#loginModal .modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
#loginModal .login-modal-logo {
  max-width: 280px !important;
  min-width: 140px !important;
  min-height: 120px !important;
  display: block;
  margin: 0 auto 0.4em auto !important;
  width: 100% !important;
  height: auto !important;
  transition: max-width 0.2s cubic-bezier(.4,0,.2,1);
}

/* --- UNIFY LOGIN MODAL BUTTON & INPUTS WITH SEARCH MODAL --- */
#loginModal .login-form input[type="email"],
#loginModal .login-form input[type="password"] {
  font-size: calc(1.2rem * var(--scale)) !important;
  padding: calc(0.6rem * var(--scale)) calc(1rem * var(--scale)) !important;
  border: 2px solid #ccd1d4 !important;
  border-radius: 4px !important;
  background: #fafbfc;
  color: #222;
  margin: 0 !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
  transition: border-color 0.18s, box-shadow 0.18s;
}
#loginModal .login-form input[type="email"]:focus,
#loginModal .login-form input[type="password"]:focus {
  outline: none;
  border-color: #D21317;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(210,19,23,0.07);
}
#loginModal .btn-primary,
#loginModal .login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  font-size: calc(1rem * var(--scale)) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: calc(0.6rem * var(--scale)) calc(1.5rem * var(--scale)) !important;
  min-height: 40px !important;
  border-radius: 4px !important;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #D21317 80%, #B01214 100%) !important;
  color: #FFF !important;
  border: none !important;
  box-shadow: 0 2px 10px 0 rgba(210,19,23,0.13), 0 1.5px 8px 0 rgba(210,19,23,0.07) !important;
  margin-top: 0.2rem;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
}
#loginModal .btn-primary:hover,
#loginModal .login-form button[type="submit"]:hover {
  background: linear-gradient(90deg, #B01214 80%, #D21317 100%) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  transform: translateY(2px) scale(1.03) !important;
  opacity: 0.93 !important;
  filter: none !important;
  text-decoration: none !important;
}

/* ==========================
   Logo responsivo
   ========================== */
.login-modal-logo {
  display: block;
  margin: 0 auto 0.4em auto !important;
  max-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  min-width: 100px !important;
  transition: max-width 0.2s cubic-bezier(.4,0,.2,1);
}

/* Font coerente con la modale search */
#loginModal .modal-dialog.small,
#loginModal .modal-header,
#loginModal .login-form,
#loginModal .login-form label,
#loginModal .login-form input,
#loginModal .login-form select,
#loginModal .btn-primary,
#loginModal .btn-google,
#loginModal .btn-facebook,
#loginModal .forgot-password,
#loginModal .register-text {
  font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --- HOVER BUTTONS: UNIFORME A SEARCH MODAL --- */
#loginModal .btn-primary:hover,
#loginModal .btn-google:hover,
#loginModal .btn-facebook:hover {
  /* Effetto abbassamento coerente con search modal */
  transform: translateY(2px) scale(1.03) !important;
  opacity: 0.93;
  box-shadow: 0 4px 18px rgba(210,19,23,0.13);
  filter: brightness(1.08) drop-shadow(0 2px 8px #eee);
  text-decoration: none !important;
}

#loginModal .btn-primary,
#loginModal .btn-google,
#loginModal .btn-facebook {
  text-decoration: none !important;
}

#loginModal .modal-close:hover {
  /* Effetto coerente con search modal (solo colore e leggera rotazione) */
  color: #D21317;
  transform: scale(1.13) rotate(8deg);
  text-decoration: none !important;
}

/* === Public auth: login, account modal, registration page === */
.login-trigger.is-public-authenticated img {
  object-fit: contain;
}

#loginModal .social-login {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#loginModal .social-login .btn {
  border: 0;
  cursor: pointer;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
}

.iat-auth-message {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  color: #334155;
  font: 500 13px/1.45 "Roboto", Arial, sans-serif;
}

.iat-auth-message.is-error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.iat-auth-message.is-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

#loginModal .register-text.register-link {
  display: block;
  color: #d21317;
  font-weight: 800;
  text-decoration: none;
}

/* Login modal refinement */
#loginModal .modal-dialog.small {
  max-width: 560px !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 34px 42px 32px !important;
  gap: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.28) !important;
}

#loginModal .modal-close {
  top: 18px !important;
  right: 20px !important;
  color: #9ca3af !important;
  font-size: 36px !important;
}

#loginModal .modal-header {
  gap: 8px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

#loginModal .login-modal-logo {
  max-width: 330px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: min(330px, 78%) !important;
  margin: 0 auto 8px !important;
}

#loginModal .modal-header h1 {
  margin: 0 !important;
  color: #d21317 !important;
  font: 900 30px/1.1 "Roboto", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

#loginModal .modal-body {
  display: grid;
  gap: 18px;
}

#loginModal .social-login {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

#loginModal .social-login .btn {
  min-height: 50px;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font: 800 16px/1 "Roboto", Arial, sans-serif !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.11) !important;
}

#loginModal .separator {
  position: relative;
  margin: 0 !important;
  color: #6b7280 !important;
  font: 700 17px/1.35 "Roboto", Arial, sans-serif !important;
  font-style: italic !important;
  text-align: center !important;
}

#loginModal .login-form {
  display: grid !important;
  gap: 10px !important;
}

#loginModal .login-form label:not(.remember-me) {
  margin: 0 !important;
  color: #1f2937 !important;
  font: 800 16px/1.25 "Roboto", Arial, sans-serif !important;
}

#loginModal .login-form input[type="email"],
#loginModal .login-form input[type="password"] {
  height: 52px !important;
  padding: 12px 14px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #fff !important;
  font: 600 17px/1.2 "Roboto", Arial, sans-serif !important;
}

#loginModal .login-form input[type="email"]:focus,
#loginModal .login-form input[type="password"]:focus {
  border-color: #d21317 !important;
  box-shadow: 0 0 0 4px rgba(210, 19, 23, 0.12) !important;
}

#loginModal .remember-me {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 2px 0 2px !important;
  color: #374151 !important;
  font: 800 16px/1.2 "Roboto", Arial, sans-serif !important;
}

#loginModal .remember-me input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
}

#loginModal .login-form button[type="submit"] {
  min-height: 52px !important;
  margin: 6px 0 0 !important;
  border-radius: 7px !important;
  font: 900 17px/1 "Roboto", Arial, sans-serif !important;
  letter-spacing: .02em !important;
}

#loginModal .register-text.register-link,
#loginModal .forgot-password {
  margin: 0 !important;
  text-align: center !important;
  font-family: "Roboto", Arial, sans-serif !important;
}

#loginModal .register-text.register-link {
  color: #d21317 !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

#loginModal .forgot-password {
  color: #666 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

@media (max-width: 620px) {
  #loginModal .modal-dialog.small {
    padding: 28px 22px 26px !important;
  }

  #loginModal .login-modal-logo {
    max-width: 250px !important;
  }

  #loginModal .social-login {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

#accountModal.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  z-index: 2000;
  transition: opacity 0.25s ease, visibility 0.25s step-end;
}

#accountModal.modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s step-start;
}

#accountModal.modal[aria-hidden="true"],
#accountModal.modal:not(.open)[aria-hidden="true"] {
  display: none !important;
}

#accountModal .modal-dialog.small {
  position: relative;
  max-width: 440px;
  width: 92vw;
  padding: 2rem 1.7rem;
  border-radius: 6px !important;
  background: #fff;
  border: 1px solid #f3f3f3;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  animation: modalFadeIn 0.32s cubic-bezier(.33,1.02,.57,1.01);
}

#accountModal .modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

#accountModal .modal-close:hover {
  color: #d21317;
}

#accountModal .iat-account-dialog {
  width: min(440px, calc(100vw - 28px));
  border-radius: 14px;
  overflow: hidden;
}

#accountModal .modal-header {
  text-align: left;
  align-items: flex-start;
}

#accountModal .iat-account-head {
  padding: 26px 28px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

#accountModal .login-modal-logo {
  max-width: 185px !important;
  min-height: auto !important;
  margin: 0 0 18px;
}

.iat-account-kicker {
  margin: 0 0 6px;
  color: #d21317;
  font: 800 12px/1.2 "Roboto Condensed", "Roboto", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#accountModal #accountTitle {
  margin: 0;
  color: #111827;
  font: 800 28px/1.08 "Roboto Condensed", "Roboto", Arial, sans-serif;
  letter-spacing: 0;
}

.iat-account-email {
  margin: 8px 0 0;
  color: #64748b;
  font: 500 13px/1.4 "Roboto", Arial, sans-serif;
  word-break: break-word;
}

.iat-account-links {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.iat-account-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.iat-account-links a span {
  display: block;
  font: 800 15px/1.2 "Roboto", Arial, sans-serif;
}

.iat-account-links a small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font: 500 12px/1.25 "Roboto", Arial, sans-serif;
}

.iat-account-links a::after {
  content: ">";
  color: #d21317;
  font-weight: 900;
}

.iat-account-links a:hover {
  background: #fff7f7;
  border-color: #f3b8bd;
}

#accountModal .iat-public-logout {
  width: 100%;
  border-radius: 8px;
}

.iat-public-page {
  --iat-auth-red: #d62629;
  --iat-auth-ink: #111827;
  --iat-auth-muted: #64748b;
  --iat-auth-line: #e4e7ec;
  --iat-auth-soft: #f7f8fa;
  background: #fff;
  color: var(--iat-auth-ink);
  font-family: "Roboto", Arial, sans-serif;
}

.iat-public-auth-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.public-registration-page .iat-public-auth-shell {
  width: min(1280px, calc(100% - 32px));
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
}

.iat-public-auth-intro,
.iat-public-auth-panel,
.iat-public-account-panel {
  background: #fff;
  border: 1px solid var(--iat-auth-line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.iat-public-auth-intro {
  position: sticky;
  top: 96px;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(145deg, rgba(214, 38, 41, 0.08), rgba(34, 63, 143, 0.06)),
    #fff;
}

.iat-public-auth-hero-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font: 900 20px/1 "Playfair Display", Georgia, serif;
}

.iat-public-auth-kicker {
  margin: 0 0 10px;
  color: var(--iat-auth-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.iat-public-auth-intro h1,
.iat-public-account-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0;
}

.iat-public-auth-intro p,
.iat-public-account-lead {
  margin: 0;
  color: var(--iat-auth-muted);
  font-size: 16px;
  line-height: 1.7;
}

.iat-public-auth-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.iat-public-auth-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(214, 38, 41, 0.16);
  border-radius: 6px;
  background: rgba(255,255,255,.78);
  font-weight: 700;
}

.iat-public-auth-list strong {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--iat-auth-red);
  color: #fff;
  font-size: 12px;
}

.iat-public-auth-list span {
  min-width: 0;
}

.iat-public-auth-panel {
  padding: 26px;
}

.iat-public-auth-panel-head {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--iat-auth-line);
}

.iat-public-auth-panel-head p {
  margin: 0;
  color: var(--iat-auth-red);
  font: 900 12px/1.2 "Roboto", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.iat-public-auth-panel-head h2 {
  margin: 0;
  color: #111827;
  font: 800 22px/1.2 "Roboto", Arial, sans-serif;
}

.iat-public-auth-panel-head h2 span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff1f2;
  color: var(--iat-auth-red);
  font-size: 14px;
}

.iat-public-auth-form {
  display: grid;
  gap: 16px;
}

.iat-public-auth-form label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.iat-public-auth-form label em {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--iat-auth-red);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.iat-public-auth-form input[type="text"],
.iat-public-auth-form input[type="tel"],
.iat-public-auth-form input[type="url"],
.iat-public-auth-form input[type="date"],
.iat-public-auth-form input[type="email"],
.iat-public-auth-form input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #fff;
  font: 500 15px/1.2 "Roboto", Arial, sans-serif;
}

.iat-public-auth-section {
  padding: 20px;
  border: 1px solid var(--iat-auth-line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
}

.iat-public-auth-section:first-of-type {
  border-top: 1px solid var(--iat-auth-line);
  padding-top: 20px;
}

.iat-public-auth-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: center;
  margin-bottom: 16px;
}

.iat-public-auth-section-head span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 50%;
  background: #fff1f2;
  color: var(--iat-auth-red);
  font: 900 12px/1 "Roboto", Arial, sans-serif;
}

.iat-public-auth-section-head h2 {
  margin: 0;
  color: #111827;
  font: 900 20px/1.2 "Roboto", Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.iat-public-auth-section-head p {
  margin: 0;
  color: #667085;
  font: 500 13px/1.45 "Roboto", Arial, sans-serif;
}

.iat-public-auth-grid {
  display: grid;
  gap: 14px 18px;
}

.iat-public-auth-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iat-public-auth-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iat-public-auth-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.iat-public-auth-note {
  margin: 0;
  color: #475569;
  font: 600 13px/1.45 "Roboto", Arial, sans-serif;
}

.iat-public-auth-note-card {
  align-self: stretch;
  padding: 12px;
  border: 1px solid rgba(34, 63, 143, 0.14);
  border-radius: 6px;
  background: #f5f8ff;
}

.iat-public-auth-radio,
.iat-public-consent-block {
  border: 1px solid #e5e7eb;
  margin: 0;
  padding: 13px;
  border-radius: 8px;
  background: #fff;
}

.iat-public-auth-radio legend,
.iat-public-consent-block legend {
  margin: 0 0 8px;
  color: #334155;
  font: 800 13px/1.35 "Roboto", Arial, sans-serif;
}

.iat-public-auth-radio label,
.iat-public-consent-block label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 8px 0;
  color: #111827;
  font: 700 14px/1.3 "Roboto", Arial, sans-serif;
}

.iat-public-auth-radio input,
.iat-public-consent-block input,
.iat-public-newsletter-card input {
  accent-color: var(--iat-auth-red);
}

.iat-public-newsletter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.iat-public-newsletter-card {
  display: grid !important;
  gap: 10px !important;
  padding: 10px;
  border: 1px solid var(--iat-auth-line);
  border-radius: 8px;
  background: #fff;
  color: #111827 !important;
  font-size: 14px !important;
}

.iat-public-newsletter-card > span:last-child {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.iat-public-newsletter-banner {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 14px;
  color: #fff;
  text-align: center;
  font: 900 28px/1 "Playfair Display", Georgia, serif;
}

.iat-public-newsletter-banner small {
  display: block;
  margin-top: 4px;
  font: 800 17px/1.05 "Roboto", Arial, sans-serif;
}

.iat-public-newsletter-banner.weekly {
  background: #c91617;
}

.iat-public-newsletter-banner.professional {
  background: #8a9900;
}

.iat-public-newsletter-banner.checkin {
  background: #223f8f;
}

.iat-public-recaptcha {
  min-height: 78px;
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.iat-recaptcha-placeholder {
  width: 100%;
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font: 700 13px/1.4 "Roboto", Arial, sans-serif;
}

.iat-public-auth-form input:focus {
  outline: none;
  border-color: var(--iat-auth-red);
  box-shadow: 0 0 0 3px rgba(214, 38, 41, 0.12);
}

.iat-public-auth-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 9px !important;
  font-size: 13px !important;
  line-height: 1.5;
  font-weight: 600 !important;
  color: #475569 !important;
}

.iat-public-auth-check input {
  margin-top: 2px;
  accent-color: var(--iat-auth-red);
}

.iat-public-auth-submit,
.iat-public-account-action {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: var(--iat-auth-red);
  color: #fff;
  font: 800 14px/1 "Roboto", Arial, sans-serif;
  cursor: pointer;
}

.iat-public-auth-submit:hover,
.iat-public-account-action:hover {
  background: #b91c1c;
}

.iat-public-auth-alt {
  margin-top: 16px;
  text-align: center;
  color: var(--iat-auth-muted);
  font-size: 14px;
}

.iat-public-auth-alt a {
  color: var(--iat-auth-red);
  font-weight: 800;
  text-decoration: none;
}

.iat-public-account-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 34px auto 56px;
}

.iat-public-account-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  margin-top: 22px;
}

.iat-public-account-panel {
  padding: 22px;
}

.iat-public-account-nav {
  display: grid;
  gap: 8px;
}

.iat-public-account-nav a {
  display: block;
  padding: 11px 12px;
  border-radius: 6px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  font-weight: 800;
}

.iat-public-account-section {
  display: grid;
  gap: 14px;
}

.iat-public-account-card {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}

.iat-public-account-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: 0;
}

.iat-public-account-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .iat-public-auth-shell,
  .iat-public-account-grid {
    grid-template-columns: 1fr;
  }

  .iat-public-auth-intro {
    position: static;
  }

  .iat-public-auth-grid.two,
  .iat-public-auth-grid.three,
  .iat-public-auth-grid.four,
  .iat-public-newsletter-grid {
    grid-template-columns: 1fr;
  }

  #loginModal .social-login {
    flex-direction: column;
  }
}

#loginModal .register-text .register-link:hover {
  /* Nessuna sottolineatura al passaggio del mouse */
  text-decoration: none !important;
  color: #B01214;
}

/*
  Forza dimensioni leggibili e disabilita ogni scaling/override per il bottone "Accedi" e i campi input del login modal su mobile.
  Questa regola batte ogni scaling, variabile, e !important, anche se altri layer o CSS provano a ridurre il font-size.
*/
@media (max-width: 700px) {
  #loginModal .btn-primary,
  #loginModal .login-form button[type="submit"] {
    font-size: 0.68rem !important;
    min-height: 48px !important;
    padding: 0.95rem !important;
    line-height: 1.1 !important;
    --scale: 1 !important;
    --font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
  }
  #loginModal .login-form input[type="email"],
  #loginModal .login-form input[type="password"] {
    font-size: 1.25rem !important;
    padding: 0.7rem 1.1rem !important;
    --scale: 1 !important;
    --font-size: 1.25rem !important;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
  }
}

/* --- FINAL UNIFORM HEIGHT & FONT FOR LOGIN MODAL BUTTON/INPUTS --- */
#loginModal .login-form input[type="email"],
#loginModal .login-form input[type="password"] {
  font-size: 1rem !important;
  padding: 0.45rem 0.8rem !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 1.1 !important;
  border-radius: 4px !important;
}
#loginModal .btn-primary,
#loginModal .login-form button[type="submit"] {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.45rem 1.2rem !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 1.1 !important;
  border-radius: 4px !important;
  letter-spacing: 0.01em;
  display: block !important;
  width: 100% !important;
}
#loginModal .btn-primary span,
#loginModal .btn-primary {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
/* Remove all previous mobile/inline overrides for button/input size */
@media (max-width: 700px), (max-width: 600px), (max-width: 500px) {
  #loginModal .btn-primary,
  #loginModal .login-form button[type="submit"],
  #loginModal .login-form input[type="email"],
  #loginModal .login-form input[type="password"] {
    font-size: 1rem !important;
    padding: 0.45rem 0.8rem !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 1.1 !important;
  }
  #loginModal .btn-primary,
  #loginModal .login-form button[type="submit"] {
    padding: 0.45rem 1.2rem !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* --- ANIMAZIONE MODERNA LOGO LOGIN MODAL (fade+zoom, colori invariati) --- */
/* Logo login: elimina filtri e animazioni che alterano i colori */
/* RIMOSSO: le seguenti regole bloccavano l'animazione moderna richiesta */
/*
#loginModal .login-modal-logo {
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
#loginModal .login-modal-logo:hover {
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
*/

/* Animazione fade+zoom moderna solo all'apparizione del logo login */
#loginModal .login-modal-logo {
  opacity: 0;
  transform: scale(0.93);
  filter: blur(6px);
  animation: loginLogoFadeZoomIn 0.7s cubic-bezier(.33,1.02,.57,1.01) 0.08s both;
}
@keyframes loginLogoFadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.93);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}


/* === main.css === */
/* main.css */

/* 1) Normalizza tutto con reset */
@import "reset.css";

/* 2) Le tue variabili, root e simili */
@import "variables-root.css";

/* 3) Layers: base, layout, components, effects, override */
@layer base, layout, components, effects, override;

/* 4) Metti il reset nel layer “base” */
@layer base {
  /* qui dentro c’è già reset.css */
}

/* 5) Poi il resto delle importazioni, specificando il layer di appartenenza */
@import "layout.css"           layer(layout);
@import "top-bar.css"          layer(components);
@import "mini-top.css"         layer(components);
@import "cat-bar-2.css"        layer(components);
@import "sticky-ipad.css"       layer(components);
@import "effetti-grafici.css"  layer(effects);
@import "buttons-over.css"          layer(components);
@import "progress-bar.css"     layer(components);
@import "drawer-menu-2.css"    layer(components);
@import "modal-search.css"     layer(components);
@import "modal-login.css"      layer(components);
@import "scaling-e-override.css"          layer(override);
@import "icons-and-logos.css"  layer(components);
@import "mobile.css"           layer(override);
@import "reset-prove.css"           layer(override);

/* === mobile.css === */
/*================================================================
  MOBILE (≤ 700 px) · layer: override
================================================================*/
@layer override {

  /*-------------------------------------------------------------
    0 · Variabili di tema mobile
  -------------------------------------------------------------*/
  @media (max-width: 700px) {
    :root {
      --brand-rgb   : 210, 19, 23;
      --brand-alpha : .93;
      --cat-bg      : #fde9e0;
      --text-light  : #fff;

      --bar-h       : 70px;  /* top-bar mobile */
      --bar-height: var(--bar-h);
      --logo-h      : 50px;
      --ico-sz      : 30px;  /* hamburger · user · search */
      --cat-h       : 58px;  /* barra categorie mobile */
    }

.side-menu,
aside.sub-menu {
  top: var(--bar-h) !important;
  height: calc(100vh - var(--bar-h)) !important;
  /* Se serve scroll verticale */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
  }

  /*-------------------------------------------------------------
    1 · Desktop/Tablet reset – visibili solo sotto 700 px
  -------------------------------------------------------------*/
  :where(.mob-top, .mob-cat) { display: none; }

  /*-------------------------------------------------------------
    2 · Mobile layout
  -------------------------------------------------------------*/
  @media (max-width: 700px) {

    /* Nascondi le barre desktop */
    .top-bar,
    .cat-bar,
    #miniSticky { display: none !important; }

    /* ---------------- TOP-BAR mobile -------------- */
    .mob-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1.2rem;
      height: var(--bar-h);
      background: rgba(var(--brand-rgb), var(--brand-alpha));
      position: sticky;
      top: 0;
      z-index: 1001;
    }

    .mob-ico {
      width: var(--ico-sz);
      height: var(--ico-sz);
      object-fit: contain;
      cursor: pointer;
    }

    /* lente di ricerca nera */
    .mob-search .mob-ico {
      filter: invert(1) brightness(0) contrast(120%);
    }

    .mob-logo {
      max-height: 50px !important;   /* ≡ --logo-h, hardcoded per sicurezza */
      height: auto !important;
      width: auto !important;
      object-fit: contain;
      display: block;
    }

    .mob-top {
      overflow: hidden;              /* evita che il logo dilati la barra */
      box-sizing: border-box !important;
    }

    /* ------------- BARRA CATEGORIE --------------- */
  .mob-cat {
    display: block !important;
    position: sticky;     /* deve restare sticky – NO position: relative dopo */
    top: var(--bar-h);    /* si aggancia sotto la mob-top */
    z-index: 998;
    background: var(--cat-bg);
    min-height: var(--cat-h);
    overflow: visible;
  }
  .mob-cat-inner {
    display: flex;
    align-items: center;
    padding: 0 .6rem 0 1.1rem;
    height: var(--cat-h);
    position: relative; /* necessario per posizionamento assoluto figli */
  }
    .mob-nav {
      display: flex;
      overflow-x: auto;
      gap: 0.25rem !important;
      flex: 1 1 auto;
      scrollbar-width: none;     /* Firefox */
    }
    .mob-nav::-webkit-scrollbar { display: none; }

    .mob-nav a {
      font: 700 .9rem/1 "Roboto", sans-serif;
      text-transform: uppercase;
      white-space: nowrap;
      color: #000;
      padding: .45rem .75rem;
      border-radius: 6px;
      text-decoration: none;
    }
    .mob-nav a:first-child {
      background: #D21317;
      color: #fff;
      box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
    }

    /* lente di ricerca a destra della nav */
    .mob-search {
      margin-left: .7rem;
      position: relative;
      padding-left: 1.1rem;
      font-size: 1.25rem;
      color: #999;
    }

    /* Uniforma padding destro icona search in barra categorie mobile con user in top-bar mobile */
    .mob-cat-inner .mob-search .mob-ico {
      width: var(--ico-sz) !important;
      height: var(--ico-sz) !important;
      min-width: var(--ico-sz) !important;
      min-height: var(--ico-sz) !important;
      max-width: var(--ico-sz) !important;
      max-height: var(--ico-sz) !important;
      object-fit: contain !important;
      display: inline-block !important;
      vertical-align: middle !important;
      padding: 0 0.75rem 0 0 !important;
      margin: 0 !important;
      box-sizing: content-box !important;
    }

    /* Riduci dimensione e padding del pulsante cerca mobile */
    .mob-cat-inner .mob-search .mob-ico {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      max-width: 28px !important;
      max-height: 28px !important;
      padding: 0 0.3rem 0 0.3rem !important;
      margin: 0 !important;
      margin-right: 0 !important;
    }

    /* Aumenta il margine destro dell'icona cerca mobile di 0.2rem */
    .mob-cat-inner .mob-search .mob-ico {
      margin-right: 0.2rem !important;
    }

    /* ------------- PROGRESS BAR ------------------- */
  .scroll-progress-bar-mobile {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #f7f7f7;
    z-index: 2;
  }
  .mob-cat {
    position: sticky;
    top: var(--bar-h);
    z-index: 998;
    background: var(--cat-bg);
    /* assicurati che abbia almeno height: var(--cat-h); */
    min-height: var(--cat-h);
    /* se vuoi che la progress bar non "spinga" il contenuto sotto */
    overflow: visible;
  }


    /* Freccia di scorrimento: più grande, rossa, leggermente sollevata e spostata un po' più a destra */
    .mob-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.3rem;
      height: 2.3rem;
      margin-left: 0.0rem !important; /* aumentato leggermente */
      font-size: 2.1rem;
      line-height: 1;
      color: #d21317;
      background: none;
      border: none;
      cursor: pointer;
      position: relative;
      top: -0.18rem; /* micro-aggiustamento: ancora un po' più in alto */
      left: 0.0rem; /* spostata un po' più a destra */
      transition: transform 0.25s cubic-bezier(.4,2,.6,1);
      box-shadow: none;
      flex: 0 0 2.3rem !important; /* non shrink, larghezza fissa */
      min-width: 2.3rem !important;
      max-width: 2.3rem !important;
      transform: rotate(0deg);
      transform-origin: center center; /* Assicura rotazione centrale */
    }
    .mob-arrow.at-end {
      transform: rotateY(180deg); /* Rotazione a specchio orizzontale */
    }

    /* Nessun effetto hover/active */
    .mob-arrow:hover,
    .mob-arrow:focus,
    .mob-arrow:active {
      background: none !important;
      color: #d21317 !important;
      box-shadow: none !important;
      /* non annullare la rotazione! */
    }

    /* Stati opzionali usati da JS */
    .mob-cat.attached { top: 0; }
    .mob-top.stuck    { transform: translateY(-100%); }

      .mob-cat {
    display: block !important;
  }
  .mob-top {
    display: flex !important;
  }

  }

}

/* Annulla solo lo scaling del drawer menu sotto i 600px, senza toccare la formattazione */
@media (max-width: 600px) {
  .side-menu,
  .side-menu *,
  aside.sub-menu,
  aside.sub-menu * {
    --scale: 1 !important;
    font-size: unset !important;
  }
}

/* Drawer menu e sub-menu: larghezza 100vw e font più grande su mobile */
@media (max-width: 700px) {
  .side-menu,
  aside.sub-menu {
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .side-menu *,
  aside.sub-menu * {
    font-size: 2rem !important;
  }
}

:where(.mob-top, .mob-cat) { display: none; }

@media (max-width: 700px) {
  .side-menu .side-nav a,
  .side-menu .side-item.has-sub,
  .side-menu .side-item.has-sub span,
  aside.sub-menu .sub-nav a {
    font-size: 1rem !important;
  }
}

/*
============================================================
STILE: X CHIUSURA DRAWER, SOTTO-MENU SEZIONI (INDIETRO + TITOLO)
============================================================
*/
@media (max-width: 700px) {
  /* X chiusura drawer menu laterale */
  .side-menu .close-btn {
    font-size: 1.7rem !important;
    color: #fff !important;
    width: 1.7em;
    height: 1.7em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
  }
  /* Sotto-menu sezioni: ingrandisci "indietro" e padding tra indietro e titolo */
  aside.sub-menu .back-btn {
    font-size: 1.25rem !important;
    font-weight: 600;
    color: #111 !important;
    padding: 0.5rem 0 1.1rem 0 !important;
    margin-bottom: 0.2rem !important;
    display: block;
  }
  /* Sotto-menu sezioni: ingrandisci e corsivo la scritta "Sezioni" */
  aside.sub-menu .sub-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 1.1rem !important;
    margin-top: 0 !important;
    display: block;
  }
}

/* --- Effetto 3D desktop anche su mobile categories --- */
.mob-cat .mob-nav a,
.mob-cat .mob-nav a.active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  margin-bottom: 4px;
  line-height: 1.1;
  border-radius: 8px;
  background-color: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-color);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.9);
  font-weight: bold;
  transition: all 0.2s ease;
  /* Rimuovi ombre/gradienti mobile precedenti */
}

/* Stato normale: tutte le sezioni nere, nessun effetto 3D */
.mob-cat .mob-nav a {
  color: #111;
  background: none;
  box-shadow: none;
  transform: none;
  font-weight: 600;
  padding: 0.45rem 0.7rem;   /* aumentato padding verticale */
  height: 1.4rem;
  line-height: 1.4rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  border-radius: 8px;
  /* altri reset se necessario */
}

/* Sezione attiva: effetto 3D e colore accent, altezza maggiore */
.mob-cat .mob-nav a.active {
  color: var(--accent-color);
  background: transparent;
  transform: translate(2px, 2px);
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
  font-weight: bold;
  padding: 0.55rem 0.7rem;   /* ancora più padding verticale */
  height: 2.4rem;
  line-height: 2.4rem;
}

/* Hover/pressed su mobile: effetto 3D e colore accent solo su hover, altezza maggiore */
.mob-cat .mob-nav a:hover,
.mob-cat .mob-nav a:focus,
.mob-cat .mob-nav a:active {
  color: var(--accent-color);
  background: transparent;
  transform: translate(2px, 2px);
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
  padding: 0.55rem 0.7rem;   /* padding e altezza come l'attiva */
  height: 2.4rem;
  line-height: 2.4rem;
}

/* Quando la voce attiva è premuta */
.mob-cat .mob-nav a.active:active,
.mob-cat .mob-nav a.active:focus,
.mob-cat .mob-nav a.active:hover {
  transform: translate(4px, 4px);
  box-shadow: none;
  background: transparent;
  color: var(--accent-color);
  padding: 0.55rem 0.7rem;
  height: 2.4rem;
  line-height: 2.4rem;
}

/* Migliora centratura verticale delle sezioni non attive nella barra mobile */
.mob-cat .mob-nav {
  display: flex;
  align-items: center;
  height: 2.1rem !important;
  min-height: 2.1rem !important;
  max-height: 2.1rem !important;
  /* Assicura che tutti i link abbiano la stessa altezza e siano centrati */
}

.mob-cat .mob-nav a,
.mob-cat .mob-nav a.active,
.mob-cat .mob-nav a:hover,
.mob-cat .mob-nav a:focus,
.mob-cat .mob-nav a:active {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.1rem !important;
  line-height: 2.1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Quando il mouse è sopra una voce NON attiva, la voce attiva si oscura (come su desktop)
   e NON si solleva (niente transform) */
.mob-cat .mob-nav:hover a.active:not(:hover) {
  opacity: 0.4;
  color: var(--accent-color);
  background: transparent;
  box-shadow: none;
  /* forza il testo a restare fermo */
  transform: none !important;
}

/* Quando il mouse NON è sopra nessuna voce, la voce attiva torna normale (con sollevamento) */
.mob-cat .mob-nav:hover:not(:has(a:hover)) a.active {
  opacity: 1;
  color: var(--accent-color);
  background: transparent;
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0,0,0,0.07), inset -1px -1px 3px rgba(0,0,0,0.15);
  transform: translate(2px, 2px) !important;
}


/* Effetto hover/active moderno */
.mob-arrow:hover,
.mob-arrow:focus {
  background: linear-gradient(135deg, #ff6a6a 0%, #d21317 100%);
  color: #fff;
  box-shadow: 0 4px 12px 0 rgba(210,19,23,0.18);
}

.mob-arrow:active {
  background: linear-gradient(135deg, #b80f13 70%, #ff6a6a 100%);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(210,19,23,0.18);
  transform: scale(0.96);
}

.mob-arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
  background: #eee;
  color: #bbb;
  box-shadow: none;
}

/* Sposta leggermente più in basso le sezioni non attive nella barra mobile */
.mob-cat .mob-nav a:not(.active) {
  align-items: flex-start !important;
  padding-bottom: 0 !important;
  padding-top: 0.18rem !important;
}

/* Sposta la lente di ricerca un po' più a destra nella barra categorie mobile */
.mob-cat-inner .mob-search {
  margin-left: 0.3rem !important; /* era 1.2rem, ora più compatto */
  margin-right: 0 !important;
}

/* Ripristina la cat bar mobile senza ombreggiatura e bordo aggiunti */
.mob-cat {
  /* ...existing code... */
  overflow-y: hidden !important;
  /* ...existing code... */
}

/* Ombreggiatura nera ancora più fine sopra la progress bar mobile */
.scroll-progress-bar-mobile::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.07) 0%, rgba(0,0,0,0.00) 100%);
}

/* Dissolvenza/coprente solo sulla fine della barra sezioni scorrimento (mob-nav), non sulla lente */
.mob-cat-inner {
  position: relative;
  z-index: 1;
}

/* Dissolvenza a sinistra: torna come prima, senza effetto bianco/padding extra */
.mob-cat-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.18s;
  background: linear-gradient(
    to right,
    #fde9e0 80%,
    rgba(253,233,224,0.01) 100%
  );
  display: block;
}
.mob-cat-inner.fade-left::before { opacity: 1 !important; }

/* Dissolvenza a destra: torna come prima, area ampia e posizione regolabile */
.mob-nav-fade-right {
  position: absolute;
  top: 0;
  right: 3.7rem; /* lascia spazio per lente/freccia, regola se necessario */
  width: 3.5rem;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.18s;
  background: linear-gradient(
    to left,
    #fde9e0 80%,
    rgba(253,233,224,0.01) 100%
  );
  display: block;
}
.mob-cat-inner.fade-right .mob-nav-fade-right { opacity: 1 !important; }

/* Blocca lo scroll verticale di tutto il wrapper centrale della cat bar */
.mob-cat-inner {
  /* ...existing code... */
  overflow-y: hidden !important;
  /* padding-right: 3.7rem !important; */ /* <-- rimuovi questa riga */
}

/* Blocca lo scroll verticale anche sulla barra delle sezioni */
.mob-nav {
  /* ...existing code... */
  overflow-y: hidden !important;
}

/* Rendi il bottone cerca mobile quadrato e centrato, senza sfondo */
.mob-cat-inner .mob-search {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border-radius: 12px;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0.2rem 0 0.7rem !important;
}
.mob-cat-inner .mob-search .mob-ico {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PATCH: elimina sfarfallio su scroll orizzontale mobile categorie */
.mob-nav {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  will-change: transform;
  backface-visibility: hidden;
  /* Rimuovi eventuali transizioni che possono causare flicker */
  transition: none !important;
}
.mob-cat-inner, .mob-cat {
  /* Evita ridipinture e flicker su scroll */
  will-change: transform;
  backface-visibility: hidden;
  /* Rimuovi transizioni inutili */
  transition: none !important;
}

/* FINAL CATEGORY BAR FIX v29: evita fusioni tra categorie, freccia e lente */
@media (max-width: 700px) {
  .mob-cat-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px 44px;
    align-items: center !important;
    column-gap: 4px !important;
    padding: 0 8px 0 12px !important;
    overflow: hidden !important;
  }

  .mob-nav {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .mob-nav a {
    flex: 0 0 auto !important;
  }

  .mob-arrow {
    grid-column: 2 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    background: var(--cat-bg) !important;
  }

  .mob-cat-inner .mob-search {
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    background: var(--cat-bg) !important;
  }
}

/* Dissolvenza a sinistra per suggerire lo scroll orizzontale sulle sezioni mobile */
.mob-cat-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.18s;
  background: linear-gradient(to right, rgba(210,19,23,0.18) 0%, rgba(253,233,224,0.01) 100%);
  display: block;
}
.mob-cat-inner.fade-left::before { opacity: 1 !important; }

/* Rimuovi dissolvenza destra */
.mob-cat-inner::after,
.mob-cat-inner.fade-right::after {
  display: none !important;
  opacity: 0 !important;
}

#subSections .sub-nav + .sub-title {
  margin-top: 2rem !important;
  display: block;
}

.mob-ico:hover,
    .mob-ico:active,
    .mob-ico:focus {
      filter: none !important;
      opacity: 1 !important;
      box-shadow: none !important;
      background: none !important;
      transform: none !important;
      transition: none !important;
    }



/* === scaling-e-override.css === */
/* --------------------------------------------------------------------
   scale.css  ·  Gestione centralizzata dello scaling tramite --scale
   -------------------------------------------------------------------- */

/* ========= VARIABILI BASE & DERIVATE ========= */
:root {
  /* grandezze di partenza (modifica qui per cambiare l’intero sistema) */
  --base-font-size:   1rem;   /* 16 px */
  --base-icon-size:  28px;
  --base-logo-size:  35px;
  --base-bar-height: 60px;
  --base-gap:        1rem;
  --base-drawer-width: 320px;

  /* fattore di scala globale */
  --scale: 1;

  /* grandezze calcolate (NON toccare) */
  --font-size:  calc(var(--base-font-size)   * var(--scale));
  --icon-size:  calc(var(--base-icon-size)   * var(--scale));
  --logo-size:  calc(var(--base-logo-size)   * var(--scale));
  --bar-height: calc(var(--base-bar-height)  * var(--scale));
  --gap:        calc(var(--base-gap)         * var(--scale));
  --drawer-w:   calc(var(--base-drawer-width) * var(--scale));
}

/* ========= BREAKPOINTS ========= */
/* Ordina dal più largo al più stretto: l’ultimo vince in cascata */

@media (max-width: 1000px) { :root { --scale: 0.76; } } /* −24 %  */
@media (max-width:  820px) { :root { --scale: 0.66; } } /* −34 %  */
@media (max-width:  720px) { :root { --scale: 0.59; } } /* −41 %  */
@media (max-width:  670px) { :root { --scale: 0.54; } } /* −46 %  */
@media (max-width:  620px) { :root { --scale: 0.41; } } /* −59 %  */
@media (max-width:  500px) { :root { --scale: 0.28; } } /* −72 %  */

/* ------------------------------- USO
   Tutte le parti dell’interfaccia che usano le variabili derivate —
   es.  font-size: var(--font-size);  height: var(--bar-height);
   width: var(--icon-size);  padding: var(--gap) —
   si ridimensioneranno automaticamente ai vari breakpoint.
-------------------------------------------------------------------- */
/* ========= SCALING ICONS (search, menu, user, ecc) ========= */
.icon-menu,
.icon-search,
.icon-user,
.mini-top .icon-menu,
.mini-top .icon-search,
.mini-top .icon-user,
.top-bar .icon-menu,
.top-bar .icon-search,
.top-bar .icon-user,
img.icon-menu,
img.icon-search,
img.icon-user {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  min-width: var(--icon-size) !important;
  min-height: var(--icon-size) !important;
  max-width: var(--icon-size) !important;
  max-height: var(--icon-size) !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  /* rimuovi eventuali override precedenti */
}

/* Solleva di 2px tutte le icone logo ovunque, tranne su mobile */
.logo,
.logo-sticky,
.mini-top .logo,
.top-bar .logo,
.cat-bar .logo-sticky {
  position: relative;
  top: -2px;
}

/* Disattiva il sollevamento su mobile (max 700px, modifica se serve) */
@media (max-width: 700px) {
  .logo,
  .logo-sticky,
  .mini-top .logo,
  .top-bar .logo,
  .cat-bar .logo-sticky {
    top: 0;
  }
}



/* Distanza tra logo e menu in tutte le bar top e sticky */

/* Spaziatura uniforme tra tutti gli elementi nelle bar top/sticky */
.top-bar .top-left,
.mini-top .top-left,
.cat-bar .cat-left,
#miniSticky .mini-left {
  display: flex;
  align-items: center;
  gap: 0rem; /* Cambia il valore a piacere */
}





/* Mostra la progress bar desktop sopra i 900px */
@media (min-width: 900px) {
  .progress-container { display: block !important; }
  .scroll-progress-bar { display: none !important; }
}
/* Mostra la progress bar desktop anche tra 700px e 899px */
@media (max-width: 899px) and (min-width: 701px) {
  .progress-container { display: block !important; }
  .scroll-progress-bar { display: none !important; }
}
/* Mostra solo la barra MOBILE sotto i 700px */
@media (max-width: 700px) {
  .progress-container { display: none !important; }
  .scroll-progress-bar { display: block !important; }
}








body.loading .scroll-progress,
body.loading .mini-scroll-progress {
  display: none !important;
}



@media (max-width: 700px) {
  .mini-top {
    display: none !important;
  }

  /* BLOCCA OGNI SCALING SU MOBILE: forza --scale a 1 e font-size base a 1rem per TUTTO il drawer e sub-menu */
  .side-menu, .side-menu *, aside.sub-menu, aside.sub-menu * {
    --scale: 1 !important;
    --font-size: 1rem !important;
    font-size: 1rem !important;
  }
}


/* Sposta questa regola alla fine di tutti i tuoi CSS (dopo reset.css) */
.cat-bar.sticky .menu-sticky {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  z-index: 1002 !important;
}




/* Riduci l'area hover/click dell'hamburger mobile */
.mob-top .mob-ico.menu-trigger {
  padding: 0 !important;
  /* Se vuoi un po' di respiro, usa ad esempio: padding: 0.15rem !important; */
  box-sizing: content-box !important;
}

/* NUOVA REGOLA: dimensione coerente con user/search, lasciando agire --ico-sz di mobile.css */
.mob-top .mob-ico.menu-trigger {
  width: var(--ico-sz);
  height: var(--ico-sz);
  min-width: var(--ico-sz);
  min-height: var(--ico-sz);
  max-width: var(--ico-sz);
  max-height: var(--ico-sz);
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  /* nessun !important, lascia priorità a mobile.css */
}

/* CMS public template compatibility: header/banner markup generated by public-chrome.js */

.iat-site-header {
  line-height: normal;
}

.iat-masthead {
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.iat-masthead-inner {
  width: 100%;
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 0 15px 10px;
  display: grid;
  grid-template-columns: minmax(0, 25%) minmax(360px, 50%) minmax(0, 25%);
  align-items: start;
  gap: 0;
}

.iat-main-brand {
  text-align: center;
  min-width: 0;
}

.iat-main-brand .logo-header {
  display: block;
  height: 90px;
  aspect-ratio: 1314 / 285;
  width: auto;
  max-width: 100%;
  margin: 25px auto 0;
  object-fit: contain;
}

.iat-main-brand .h2-title {
  margin: 8px 0 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: #111;
  text-transform: none;
  letter-spacing: 0;
}

.iat-brand-side {
  min-width: 0;
}

.iat-brand-side-left {
  text-align: center;
}

.iat-brand-side-right {
  text-align: center;
}

.iat-partner-slot {
  margin-top: 57px;
  margin-bottom: 10px;
  text-align: center;
}

.iat-partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}

.iat-partner-logo img {
  display: block;
  width: auto;
  height: 45px;
  aspect-ratio: 2000 / 500;
  max-width: 100%;
  object-fit: contain;
}

/* Masthead icons: no button-press effect, simple opacity fade on hover */
.iat-partner-logo:active,
.iat-social-row .icona_social:active,
.iat-app-row a:active { transform: none; }
.iat-partner-logo:hover,
.iat-social-row .icona_social:hover,
.iat-app-row a:hover { opacity: 0.75; }

.header-social-left,
.header-appdownload-right {
  border-top: none;
  position: relative;
  padding-top: 10px;
  min-height: 47px;
  width: 100%;
}

.header-social-left::before,
.header-appdownload-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.13) 28%, rgba(0,0,0,.13) 72%, transparent 100%);
}

.header-social-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.header-appdownload-right {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.iat-social-row .icona_social {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  background-size: cover;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .15s ease;
}

.side-footer .iat-social-icon {
  width: 26px;
  height: 26px;
}

.iat-app-row a,
.iat-app-row img {
  display: block;
}

.iat-app-row img {
  width: auto;
  height: 31px;
  object-fit: contain;
}

.iat-app-row .app-download-label {
  color: #e30613;
  font-size: 16px;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.container-banner-top {
  width: 100%;
  max-width: var(--max-width, 1280px);
  margin: 0 auto;
  padding: 12px 15px 18px;
  background: #fff;
  overflow: hidden;
}

@media (min-width: 701px) {
  .container-banner-top .iat-top-ad {
    border-radius: 6px;
    outline: 1px solid rgba(0,0,0,.08);
    overflow: hidden;
  }
}

.iat-top-ads {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  overflow: hidden;
  background: #fff;
}

.iat-top-ad {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 936 / 120;
}

.iat-top-ad .imgBanner,
.iat-top-ad img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1279px) and (min-width: 768px) {
  .iat-masthead-inner {
    grid-template-columns: minmax(0, 25%) minmax(280px, 50%) minmax(0, 25%);
  }

  .iat-social-row .icona_social {
    width: 22px !important;
    height: 22px;
    flex: 0 0 22px;
    background-size: 100% 100%;
  }

  .header-social-left,
  .header-appdownload-right {
    gap: 3px;
  }

  .iat-main-brand .logo-header {
    height: 55px;
  }

  .iat-main-brand .h2-title {
    font-size: 10px;
  }

  .iat-app-row .app-download-label {
    font-size: 12px;
  }

  .iat-app-row img {
    height: 26px;
  }
}

@media (max-width: 700px) {
  .iat-masthead {
    display: none !important;
  }

  .container-banner-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .iat-top-ads {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* === HOMEPAGE: nascondi progress bar === */
.iat-site-header[data-no-progress] .progress-container,
.iat-site-header[data-no-progress] .mini-progress-container,
.iat-site-header[data-no-progress] .scroll-progress-bar,
.iat-site-header[data-no-progress] .scroll-progress-bar-mobile {
  display: none !important;
}

/* === FIX: effetto hover cat-bar garantito (anche senza voce attiva) === */

/* Riserva sempre lo spazio per l'ombra inferiore su tutti i link,
   così il hover NON cambia il layout e non vibrano i vicini */
.iat-site-header .cat-bar .categories a:not(.no-override) {
  margin-bottom: 4px !important;
  padding: 0.35rem 0.6rem !important;
  line-height: 1.1 !important;
  border-radius: 8px !important;
}

/* Hover: solo proprietà visive — nessun cambio di layout */
.iat-site-header .cat-bar .categories a:hover:not(.active):not(.no-override) {
  transform: translate(2px, 2px) !important;
  box-shadow: inset -2px 0 0 var(--accent-color), inset 0 -2px 0 var(--accent-color), inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
  color: var(--accent-color) !important;
  background: transparent !important;
}

.iat-site-header .cat-bar.sticky .categories a:hover:not(.active):not(.no-override) {
  box-shadow: inset -2px 0 0 #fff, inset 0 -2px 0 #fff, inset 2px 2px 4px rgba(0, 0, 0, 0.07), inset -1px -1px 3px rgba(0, 0, 0, 0.15) !important;
  color: #fff !important;
}

/* === Ricerca pubblica MeiliSearch: modal con preview live === */
#searchModal .modal-dialog.small {
  width: min(92vw, 760px) !important;
  max-width: 760px !important;
  max-height: 88vh;
  overflow: auto;
  padding: 26px 34px 30px !important;
}

#searchModal .modal-header {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 22px;
  margin: 0 28px 12px 0;
}

#searchModal .modal-header .icon-animated {
  width: 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  margin: 0 !important;
}

#searchModal .meili-search-heading {
  min-width: 0;
}

#searchModal .meili-search-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(214, 38, 41, .24);
  border-radius: 999px;
  color: #d62629;
  background: #fff5f5;
  font: 800 11px/1 Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#searchModal .meili-search-heading strong {
  display: block;
  margin-top: 10px;
  color: #111827;
  font: 900 28px/1.05 "Roboto Condensed", Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

#searchModal .search-form {
  grid-template-columns: 1fr auto;
  column-gap: 12px !important;
  align-items: end;
}

#searchModal .search-form > div:first-child,
#searchModal .search-form .search-accordion-toggle,
#searchModal .search-form .search-accordion-content,
#searchModal .search-hint,
#searchModal .btn-advanced {
  grid-column: 1 / -1;
}

#searchModal .search-form input#main-search {
  margin-bottom: 0 !important;
}

#searchModal .search-form .btn-primary {
  width: auto !important;
  min-width: 132px;
  margin: 0 !important;
}

#searchModal .meili-live-results {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

#searchModal .meili-live-meta {
  color: #64748b;
  font: 800 11px/1 Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#searchModal .meili-live-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#searchModal .meili-live-item:hover {
  border-color: rgba(214, 38, 41, .42);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
  transform: translateY(-1px);
}

#searchModal .meili-live-kicker,
#searchModal .meili-live-empty {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

#searchModal .meili-live-item strong {
  color: #111827;
  font: 800 16px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
}

#searchModal .meili-live-item span:last-child {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.35;
}

#searchModal .meili-live-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

@media (max-width: 700px) {
  #searchModal .modal-dialog.small {
    width: min(94vw, 520px) !important;
    padding: 22px 18px 24px !important;
  }

  #searchModal .modal-header {
    grid-template-columns: 88px 1fr;
    gap: 14px;
  }

  #searchModal .modal-header .icon-animated {
    width: 88px !important;
    height: 88px !important;
    max-height: 88px !important;
  }

  #searchModal .meili-search-heading strong {
    font-size: 22px;
  }

  #searchModal .search-form {
    grid-template-columns: 1fr;
  }

  #searchModal .search-form .btn-primary {
    width: 100% !important;
  }
}

/* ── site footer redesign v28 ───────────────────────────────── */
.iat-site-footer {
  width: 100%;
  max-width: var(--max-width);
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.6;
  margin: 20px auto 0;
  padding: 0 15px 48px;
  box-sizing: border-box;
}

.iat-footer-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #CA1C21;
  border-radius: 18px;
  overflow: hidden;
}

.iat-footer-main {
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.iat-footer-inner {
  padding: 44px 36px 36px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px 32px;
  align-items: start;
}

@media (max-width: 960px) {
  .iat-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding: 32px 24px 24px;
  }
}

@media (max-width: 540px) {
  .iat-site-footer {
    padding: 0 15px 32px;
  }
  .iat-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px 0;
    padding: 24px 20px 16px;
  }
}

.iat-footer-logo-link {
  display: inline-block;
  margin-bottom: 14px;
}

.iat-footer-logo {
  max-height: 26px;
  width: auto;
  filter: brightness(0) invert(1) opacity(.9);
  display: block;
}

.iat-footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.iat-footer-cms-content {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  max-width: 340px;
  margin-bottom: 18px;
}

.iat-footer-cms-content p {
  margin: 0 0 6px;
}

.iat-footer-cms-content a {
  color: rgba(255,255,255,.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.iat-footer-cms-content a:hover {
  color: #fff;
}

.iat-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}

.iat-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .15s, border-color .15s;
}

.iat-footer-social a:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
}

.iat-footer-social img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1) opacity(.85);
  display: block;
}

.iat-footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.iat-footer-col-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  margin-bottom: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.iat-footer-col a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  transition: color .15s;
}

.iat-footer-col a:hover {
  color: #fff;
}

.iat-footer-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: color .15s;
}

.iat-footer-cookie-btn:hover {
  color: #fff;
}

.iat-trust-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s;
}

.iat-trust-link:hover {
  color: #fff !important;
}

.iat-footer-desc {
  padding: 20px 36px 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
}

.iat-footer-desc p {
  margin: 0;
}

@media (max-width: 960px) {
  .iat-footer-desc {
    padding: 18px 24px 22px;
  }
}

@media (max-width: 540px) {
  .iat-footer-desc {
    padding: 16px 20px 18px;
    font-size: 13px;
  }
}

.iat-footer-bottom {
  background: rgba(0,0,0,.18);
  padding: 14px 36px;
}

.iat-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.iat-footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  line-height: 1.4;
}

.iat-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55) !important;
  transition: color .15s;
}

.iat-trust-badge:hover {
  color: rgba(255,255,255,.9) !important;
}

.iat-trust-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 540px) {
  .iat-footer-bottom {
    padding: 12px 20px;
  }

  .iat-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── masthead icon polish ───────────────────────────────────── */
.header-social-left {
  gap: 3px;
}

.header-appdownload-right {
  gap: 4px;
}

.iat-social-row .icona_social {
  width: clamp(24px, 2.4vw, 32px);
  height: clamp(24px, 2.4vw, 32px);
  flex: 0 0 clamp(24px, 2.4vw, 32px);
}

.iat-app-row img {
  height: clamp(24px, 2.3vw, 30px);
}

.iat-app-row .app-download-label {
  font-size: clamp(11px, 1vw, 15px);
  line-height: clamp(24px, 2.3vw, 30px);
}

@media (max-width: 1279px) and (min-width: 768px) {
  .header-social-left,
  .header-appdownload-right {
    gap: 2px;
  }

  .iat-social-row .icona_social {
    width: 21px !important;
    height: 21px;
    flex-basis: 21px;
  }

  .iat-app-row img {
    height: 24px;
  }

  .iat-app-row .app-download-label {
    font-size: 11px;
    line-height: 24px;
  }
}

/* ── search modal v2 ────────────────────────────────────────── */
body.modal-open-lock {
  overflow: hidden !important;
  touch-action: none;
}

#searchModal.modal {
  align-items: flex-start;
  padding: min(6vh, 42px) 14px 24px;
  overflow-y: auto;
  background: rgba(15, 23, 42, .62);
}

#searchModal .modal-dialog.small {
  width: min(94vw, 820px) !important;
  max-width: 820px !important;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 22px 28px 26px !important;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

#searchModal .modal-header {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 18px;
  margin: 0 38px 14px 0;
}

#searchModal .modal-header .icon-animated {
  width: 92px !important;
  height: 92px !important;
  max-height: 92px !important;
}

#searchModal .meili-search-heading span {
  border-color: rgba(214, 38, 41, .18);
  background: #fff7f7;
  color: #b91c1c;
}

#searchModal .meili-search-heading strong {
  max-width: 520px;
  font-size: 26px;
}

#searchModal .search-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px !important;
  padding: 0;
}

#searchModal .search-form > div:first-child {
  grid-column: 1;
}

#searchModal .search-form label.with-info-search {
  color: #111827;
  font: 900 13px/1.2 Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#searchModal .search-form input#main-search {
  height: 52px;
  margin: 0 !important;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: 600 18px/1.2 Roboto, Arial, sans-serif;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

#searchModal .search-form input#main-search::placeholder {
  color: #d62629;
  font-weight: 900;
}

#searchModal .search-form input#main-search:focus {
  border-color: rgba(214, 38, 41, .72);
  box-shadow: 0 0 0 4px rgba(214, 38, 41, .12);
  outline: none;
}

#searchModal .search-form .btn-primary {
  display: none !important;
}

#searchModal .search-form .search-accordion-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc !important;
  color: #334155 !important;
  font: 800 12px/1 Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#searchModal .search-form .search-accordion-toggle:hover,
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] {
  border-color: rgba(214, 38, 41, .24);
  background: #fff5f5 !important;
  color: #b91c1c !important;
}

#searchModal .search-form .search-accordion-arrow {
  margin: 0;
  font-size: 17px;
  transform: none;
}

#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] .search-accordion-arrow {
  transform: rotate(90deg);
}

#searchModal .search-form .search-accordion-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 0 solid transparent;
  border-radius: 8px;
  background: #f8fafc;
}

#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
  max-height: 520px;
  opacity: 1;
  margin-top: 4px;
  padding: 12px !important;
  border: 1px solid #e2e8f0;
}

#searchModal .search-form .search-accordion-content > * {
  opacity: 1;
  transform: none;
  margin: 0 !important;
}

#searchModal .radio-group.spaced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#searchModal .radio-group.spaced label {
  min-height: 40px;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: 800 12px/1.2 Roboto, Arial, sans-serif;
}

#searchModal .search-form select {
  height: 42px;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
}

#searchModal .search-hint {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

#searchModal .btn-advanced {
  width: fit-content !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px !important;
}

#searchModal .meili-live-results {
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
}

#searchModal .meili-live-item {
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
}

#searchModal .meili-live-thumb {
  display: block;
  width: 86px;
  height: 62px;
  overflow: hidden;
  border-radius: 7px;
  background: #e2e8f0;
}

#searchModal .meili-live-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#searchModal .meili-live-thumb-empty::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

#searchModal .meili-live-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#searchModal .meili-live-copy strong,
#searchModal .meili-live-copy > span:last-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#searchModal .meili-live-copy strong {
  -webkit-line-clamp: 2;
}

#searchModal .meili-live-copy > span:last-child {
  -webkit-line-clamp: 2;
}

#searchModal .meili-live-item mark {
  background: #fef08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

#searchModal .meili-live-empty-strong {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-style: solid;
  background: #fff7f7;
}

#searchModal .meili-live-empty-strong strong {
  color: #b91c1c;
  font: 900 18px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
}

@media (max-width: 700px) {
  #searchModal.modal {
    padding-top: 12px;
  }

  #searchModal .modal-dialog.small {
    width: min(94vw, 520px) !important;
    max-height: calc(100dvh - 24px);
    padding: 18px 16px 22px !important;
  }

  #searchModal .modal-header {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    margin-right: 28px;
  }

  #searchModal .modal-header .icon-animated {
    width: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
  }

  #searchModal .meili-search-heading strong {
    font-size: 22px;
  }

  #searchModal .radio-group.spaced {
    grid-template-columns: 1fr;
  }

  #searchModal .meili-live-item {
    grid-template-columns: 72px 1fr;
    gap: 10px;
  }

  #searchModal .meili-live-thumb {
    width: 72px;
    height: 54px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL MODAL FIX v27
   Must be last — same specificity + !important + later = wins
   ═══════════════════════════════════════════════════════════════ */
#searchModal .radio-group.spaced {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  flex-direction: unset !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#searchModal .radio-group.spaced label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font: 700 12px/1.3 Roboto, Arial, sans-serif !important;
  margin: 0 !important;
  cursor: pointer !important;
}

#searchModal .radio-group.spaced label:hover {
  border-color: rgba(214,38,41,.3) !important;
  background: #fff7f7 !important;
}

#searchModal .radio-group.spaced input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

#searchModal .btn-advanced {
  display: inline-block !important;
  width: fit-content !important;
  background: #0f172a !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font: 700 12px/1 Roboto, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  margin: 0 !important;
}

#searchModal .btn-advanced:hover {
  background: #1e293b !important;
}

#searchModal .search-accordion-content label[for="main-search-section"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #64748b !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 700px) {
  #searchModal .radio-group.spaced {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH MODAL v36 — clean editorial tool
   ═══════════════════════════════════════════════════════════════ */
#searchModal.modal {
  align-items: flex-start !important;
  padding: clamp(16px, 5vh, 48px) 16px 28px !important;
  background: rgba(15, 23, 42, .46) !important;
  backdrop-filter: blur(3px);
}

#searchModal .modal-dialog.small {
  width: min(94vw, 900px) !important;
  max-width: 900px !important;
  max-height: calc(100dvh - 42px) !important;
  overflow: auto !important;
  padding: 30px 34px 32px !important;
  border: 1px solid #e4e8ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .22) !important;
}

#searchModal .modal-close {
  top: 18px !important;
  right: 20px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #94a3b8 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .modal-close:hover {
  color: #d62629 !important;
  background: #fff5f5 !important;
  transform: none !important;
  box-shadow: none !important;
}

#searchModal .modal-header {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  margin: 0 44px 22px 0 !important;
}

#searchModal .modal-header .icon-animated {
  width: 78px !important;
  height: 78px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 8px !important;
  background: #fafafa !important;
  animation: none !important;
  filter: none !important;
}

#searchModal .meili-search-heading {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#searchModal .meili-search-heading span {
  width: fit-content !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(214,38,41,.18) !important;
  border-radius: 999px !important;
  background: #fff7f7 !important;
  color: #d62629 !important;
  font: 800 12px/1 Roboto, Arial, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#searchModal .meili-search-heading strong {
  max-width: none !important;
  color: #111827 !important;
  font: 900 clamp(28px, 4vw, 42px)/.96 "Roboto Condensed", Roboto, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

#searchModal .meili-search-heading em {
  color: #64748b !important;
  font: 400 15px/1.35 Roboto, Arial, sans-serif !important;
  font-style: normal !important;
}

#searchModal .search-form {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}

#searchModal .search-main-label,
#searchModal .search-form > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: normal !important;
}

#searchModal .search-form label.with-info-search {
  color: #334155 !important;
  font: 800 12px/1.2 Roboto, Arial, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#searchModal .info-icon {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  background: #d62629 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .search-form input#main-search {
  height: 58px !important;
  padding: 0 18px !important;
  border: 1px solid #dbe1e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  font: 700 20px/1.2 Roboto, Arial, sans-serif !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04) !important;
}

#searchModal .search-form input#main-search::placeholder {
  color: #d62629 !important;
  opacity: .88 !important;
  font-weight: 900 !important;
}

#searchModal .search-form input#main-search:focus {
  outline: none !important;
  border-color: rgba(214,38,41,.7) !important;
  box-shadow: 0 0 0 4px rgba(214,38,41,.11) !important;
}

#searchModal .search-form .search-accordion-toggle {
  width: fit-content !important;
  margin: 4px 0 0 !important;
  padding: 9px 14px !important;
  border: 1px solid #dde3eb !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .search-form .search-accordion-toggle:hover,
#searchModal .search-form .search-accordion-toggle[aria-expanded="true"] {
  border-color: rgba(214,38,41,.28) !important;
  background: #fff7f7 !important;
  color: #b91c1c !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .search-form .search-accordion-content {
  gap: 12px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

#searchModal .radio-group.spaced {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#searchModal .radio-group.spaced label {
  min-height: 42px !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .radio-group.spaced label:hover {
  border-color: rgba(214,38,41,.28) !important;
  background: #fffafa !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .search-form select {
  height: 44px !important;
  border: 1px solid #dbe1e8 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
}

#searchModal .search-hint {
  color: #64748b !important;
  font: 400 13px/1.35 Roboto, Arial, sans-serif !important;
  text-align: left !important;
}

#searchModal .btn-advanced {
  width: fit-content !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .btn-advanced:hover {
  background: #d62629 !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .meili-live-results {
  gap: 0 !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e5e9ef !important;
}

#searchModal .meili-live-meta {
  margin-bottom: 8px !important;
}

#searchModal .meili-live-item {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #eef1f5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .meili-live-item:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal .meili-live-item:hover strong {
  color: #d62629 !important;
}

#searchModal .meili-live-thumb {
  width: 96px !important;
  height: 68px !important;
  border-radius: 7px !important;
}

#searchModal .meili-live-empty {
  padding: 18px !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 8px !important;
  background: #fafafa !important;
}

@media (max-width: 700px) {
  #searchModal .modal-dialog.small {
    padding: 20px 16px 22px !important;
  }

  #searchModal .modal-header {
    grid-template-columns: 56px 1fr !important;
    gap: 12px !important;
    margin-right: 34px !important;
  }

  #searchModal .modal-header .icon-animated {
    width: 56px !important;
    height: 56px !important;
  }

  #searchModal .radio-group.spaced {
    grid-template-columns: 1fr !important;
  }

  #searchModal .meili-live-item {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  #searchModal .meili-live-thumb {
    width: 76px !important;
    height: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH MODAL v37 — isolated selectors, visible redesign
   ═══════════════════════════════════════════════════════════════ */
#searchModal.search-modal-v37.modal {
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(18px, 6vh, 54px) 18px 30px !important;
  background: rgba(17, 24, 39, .52) !important;
  backdrop-filter: blur(4px) saturate(110%);
}

#searchModal.search-modal-v37 .search-dialog-v37 {
  width: min(96vw, 980px) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 48px) !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 1px solid #e3e6eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28) !important;
}

#searchModal.search-modal-v37 .modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #9ca3af !important;
  font-size: 30px !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .modal-close:hover {
  border-color: rgba(214,38,41,.28) !important;
  background: #fff5f5 !important;
  color: #d62629 !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .modal-header {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 30px 76px 26px 34px !important;
  border-bottom: 1px solid #edf0f4 !important;
  background: linear-gradient(90deg, #fff7f7 0, #fff 48%, #f8fafc 100%) !important;
}

#searchModal.search-modal-v37 .modal-header .icon-animated {
  width: 112px !important;
  height: 112px !important;
  max-height: 112px !important;
  margin: 0 !important;
  padding: 10px !important;
  object-fit: contain !important;
  border: 1px solid #f0d5d5 !important;
  border-radius: 8px !important;
  background: #fff !important;
  animation: none !important;
  filter: none !important;
}

#searchModal.search-modal-v37 .meili-search-heading {
  display: grid !important;
  gap: 8px !important;
}

#searchModal.search-modal-v37 .meili-search-heading span {
  width: fit-content !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(214,38,41,.2) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #d62629 !important;
  font: 900 12px/1 Roboto, Arial, sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

#searchModal.search-modal-v37 .meili-search-heading strong {
  color: #111827 !important;
  font: 900 clamp(34px, 4.6vw, 54px)/.92 "Roboto Condensed", Roboto, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

#searchModal.search-modal-v37 .meili-search-heading em {
  max-width: 560px !important;
  color: #64748b !important;
  font: 400 16px/1.35 Roboto, Arial, sans-serif !important;
  font-style: normal !important;
}

#searchModal.search-modal-v37 .search-form {
  display: grid !important;
  gap: 12px !important;
  padding: 28px 34px 0 !important;
}

#searchModal.search-modal-v37 .search-main-label,
#searchModal.search-modal-v37 .search-form > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: normal !important;
}

#searchModal.search-modal-v37 .search-form label.with-info-search {
  color: #334155 !important;
  font: 900 12px/1.2 Roboto, Arial, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#searchModal.search-modal-v37 .info-icon {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  background: #d62629 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 #main-search {
  height: 64px !important;
  padding: 0 20px !important;
  border: 2px solid #111827 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  font: 800 23px/1.1 Roboto, Arial, sans-serif !important;
  box-shadow: none !important;
}

#searchModal.search-modal-v37 #main-search::placeholder {
  color: #d62629 !important;
  opacity: .9 !important;
  font-weight: 900 !important;
}

#searchModal.search-modal-v37 #main-search:focus {
  outline: 0 !important;
  border-color: #d62629 !important;
  box-shadow: 0 0 0 4px rgba(214,38,41,.11) !important;
}

#searchModal.search-modal-v37 .search-accordion-toggle {
  width: fit-content !important;
  margin: 4px 0 0 !important;
  padding: 10px 14px !important;
  border: 1px solid #dbe1e8 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .search-accordion-toggle:hover,
#searchModal.search-modal-v37 .search-accordion-toggle[aria-expanded="true"] {
  border-color: rgba(214,38,41,.3) !important;
  background: #fff7f7 !important;
  color: #b91c1c !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .search-accordion-toggle[aria-expanded="true"] + .search-accordion-content {
  padding: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fbfcfd !important;
}

#searchModal.search-modal-v37 .radio-group.spaced label,
#searchModal.search-modal-v37 .search-form select,
#searchModal.search-modal-v37 .btn-advanced {
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .btn-advanced {
  width: fit-content !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  color: #fff !important;
}

#searchModal.search-modal-v37 .btn-advanced:hover {
  background: #d62629 !important;
}

#searchModal.search-modal-v37 .meili-live-results {
  display: grid !important;
  gap: 0 !important;
  margin: 26px 34px 34px !important;
  padding: 0 !important;
  border-top: 2px solid #111827 !important;
}

#searchModal.search-modal-v37 .meili-live-meta {
  padding: 12px 0 4px !important;
  color: #64748b !important;
}

#searchModal.search-modal-v37 .meili-live-item {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e7ebf0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .meili-live-item:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#searchModal.search-modal-v37 .meili-live-item:hover strong {
  color: #d62629 !important;
}

#searchModal.search-modal-v37 .meili-live-thumb {
  width: 112px !important;
  height: 74px !important;
  border-radius: 7px !important;
}

@media (max-width: 700px) {
  #searchModal.search-modal-v37 .search-dialog-v37 {
    width: min(94vw, 520px) !important;
  }
  #searchModal.search-modal-v37 .modal-header {
    grid-template-columns: 1fr !important;
    padding: 24px 58px 22px 20px !important;
  }
  #searchModal.search-modal-v37 .modal-header .icon-animated {
    display: none !important;
  }
  #searchModal.search-modal-v37 .search-form {
    padding: 22px 20px 0 !important;
  }
  #searchModal.search-modal-v37 .meili-live-results {
    margin: 22px 20px 24px !important;
  }
  #searchModal.search-modal-v37 .meili-live-item {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }
  #searchModal.search-modal-v37 .meili-live-thumb {
    width: 80px !important;
    height: 58px !important;
  }
}

/* ============================================================================
   PUBLIC CHROME STABILITY FIX v39
   Sticky geometry, cat-bar scroll, drawer/submenu and mobile anchoring.
   Keep this block last: the legacy template is a concatenated CSS bundle with
   many historical overrides above.
   ========================================================================== */

/* Spacer that fills the space left by the cat-bar when it becomes sticky.
   Height is set dynamically by JS. */
.cat-bar-sticky-spacer {
  display: block;
  width: 100%;
  pointer-events: none;
}

/* Fix: prevent cat-bar hover effects from blocking vertical scroll */
.iat-site-header .cat-bar,
.iat-site-header .cat-bar > .wrap,
.iat-site-header .cat-bar > .wrap *,
.iat-site-header .mob-cat,
.iat-site-header .mob-cat *,
.iat-site-header #miniSticky,
.iat-site-header #miniSticky * {
  overscroll-behavior-y: auto !important;
  touch-action: pan-x pan-y !important;
}

.iat-site-header .categories,
.iat-site-header .mini-categories-wrapper,
.iat-site-header .mob-nav {
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-x pan-y !important;
}

/* Progress bars must not block pointer events */
.iat-site-header .progress-container,
.iat-site-header .mini-progress-container,
.iat-site-header .scroll-progress-bar-mobile,
.iat-site-header .cat-overflow-indicator,
.iat-site-header .mob-cat-inner::before,
.iat-site-header .mob-cat-inner::after {
  pointer-events: none !important;
}

/* Hover stability: keep active link visible when hovering empty area */
.iat-site-header .cat-bar .categories:hover:not(:has(a:hover)) a.active:not(.no-override),
.iat-site-header .cat-bar.sticky .categories:hover:not(:has(a:hover)) a.active:not(.no-override),
.iat-site-header #miniSticky .mini-categories:hover:not(:has(a:hover)) a.active:not(.no-override),
.iat-site-header .mob-cat .mob-nav:hover:not(:has(a:hover)) a.active:not(.no-override) {
  opacity: 1 !important;
}

@media (max-width: 700px) {
  .iat-site-header {
    padding-top: var(--bar-h, 70px) !important;
  }

  .mob-cat-fixed-spacer {
    display: none;
    width: 100%;
    pointer-events: none;
  }

  .iat-site-header .mob-top {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--bar-h, 70px) !important;
    padding: 0 14px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1002 !important;
    overflow: hidden !important;
    background: rgba(var(--brand-rgb, 210,19,23), var(--brand-alpha, .93)) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .iat-site-header .mob-top .menu-trigger {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .iat-site-header .mob-top a {
    grid-column: 2 !important;
    justify-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .iat-site-header .mob-top .login-trigger {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  .iat-site-header .mob-logo {
    display: block !important;
    max-width: min(62vw, 260px) !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .iat-site-header .mob-ico,
  .iat-site-header .mob-top .mob-ico.menu-trigger,
  .iat-site-header .mob-top .login-trigger.mob-ico {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .iat-site-header .mob-cat {
    display: block !important;
    position: relative !important;
    top: auto !important;
    z-index: 1001 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    background: var(--cat-bg, #fde9e0) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .iat-site-header .mob-cat.mob-cat-fixed {
    position: fixed !important;
    top: var(--bar-h, 70px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }

  .iat-site-header .mob-cat-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px 44px !important;
    align-items: center !important;
    width: 100% !important;
    height: var(--cat-h, 58px) !important;
    padding: 0 8px 0 12px !important;
    overflow: hidden !important;
  }

  .iat-site-header .mob-nav {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .side-menu,
  aside.sub-menu {
    top: var(--bar-h, 70px) !important;
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - var(--bar-h, 70px)) !important;
    max-height: calc(100dvh - var(--bar-h, 70px)) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* Sticky cat-bar: allinea logo+hamburger alla stessa posizione della top-bar */
@media (min-width: 701px) {
  .cat-bar.sticky > .wrap {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding-left: 0.6rem !important;
    padding-right: 0.3rem !important;
  }
}

/* v43: sticky cat-bar — logo stesso visivo della top-bar, padding auto per hover area = --button-height */
@media (min-width: 701px) {
  .cat-bar.sticky .cat-left {
    gap: 0 !important;
  }
  .cat-bar.sticky .cat-left .logo-sticky {
    /* width/height già da @layer base: var(--logo-size) — corrisponde alla top-bar */
    padding: calc((var(--button-height, 42px) - var(--logo-size, 35px)) / 2) !important;
    margin: 0 !important;
    margin-right: 0.5rem !important;
    box-sizing: content-box !important;
  }
  .cat-bar.sticky .cat-left .menu-sticky.menu-trigger {
    width: 28px !important;
    height: 28px !important;
    padding: 7px !important;
    margin: 0 !important;
    box-sizing: content-box !important;
  }
}

/* Mantieni il case configurato nel campo "Nome corto" delle sezioni. */
.iat-site-header .cat-bar .categories a,
.iat-site-header #miniSticky .mini-categories a,
.iat-site-header .mob-cat .mob-nav a {
  text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH MODAL v38 — Clean editorial redesign
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
#searchModal.modal {
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(20px, 5vh, 60px) 16px 24px !important;
  background: rgba(10, 14, 23, .54) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Dialog container */
#searchModal .srx-search-dialog {
  position: relative !important;
  width: min(96vw, 760px) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 48px) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  border: 1px solid #e0e4ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 20px 70px rgba(10, 14, 23, .26) !important;
  scrollbar-width: thin !important;
}

/* Close button — same treatment as login modal */
#searchModal .modal-close {
  position: absolute !important;
  top: 0.8rem !important;
  right: 0.8rem !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #666 !important;
  outline: none !important;
  transition: color 0.18s, transform 0.18s !important;
  z-index: 10 !important;
  padding: 0 !important;
}
#searchModal .modal-close:hover {
  color: #D21317 !important;
  transform: scale(1.13) rotate(8deg) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

/* Header: image + title */
.srx-search-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 22px 58px 18px 28px !important;
  border-bottom: 1px solid #f0f3f7 !important;
}
.srx-search-head-img {
  width: auto !important;
  max-width: 118px !important;
  height: auto !important;
  max-height: 110px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  animation: none !important;
  filter: none !important;
}
.srx-search-brand {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin-left: 52px !important;
  justify-content: flex-start !important;
  position: relative !important;
}
.srx-search-brand > span:not(.srx-search-tooltip) {
  color: #111827 !important;
  font: 800 25px/1 Roboto, Arial, sans-serif !important;
  white-space: nowrap !important;
  padding-bottom: 1px !important;
  transform: translateY(2px) !important;
}
.srx-search-logo {
  height: 36px !important;
  width: auto !important;
  max-width: 280px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
}
.srx-search-info {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #d21317 !important;
  color: #fff !important;
  font: 800 11px/1 Roboto, Arial, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  align-self: center !important;
}
.srx-search-tooltip {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: min(300px, 72vw) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: rgba(210, 19, 23, .94) !important;
  color: #fff !important;
  font: 600 12px/1.35 Roboto, Arial, sans-serif !important;
  text-align: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  transition: opacity .14s, transform .14s, visibility .14s !important;
  z-index: 12 !important;
  pointer-events: none !important;
}
.srx-search-tooltip::before {
  content: '' !important;
  position: absolute !important;
  right: 10px !important;
  top: -8px !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid rgba(210, 19, 23, .94) !important;
}
.srx-search-info:hover + .srx-search-tooltip,
.srx-search-info:focus-visible + .srx-search-tooltip,
#searchModal.srx-info-open .srx-search-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Body wrapper */
.srx-search-body {
  padding: 20px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* --- Form & input row --- */
.srx-search-form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.srx-input-row {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
}

.srx-input-icon {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9ca3af !important;
  pointer-events: none !important;
  display: flex !important;
  z-index: 1 !important;
}

.srx-search-input,
input#main-search {
  flex: 1 1 auto !important;
  height: 54px !important;
  padding: 0 16px 0 46px !important;
  border: 2px solid #dbe1ea !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  background: #fff !important;
  color: #111827 !important;
  font: 600 18px/1 Roboto, Arial, sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.srx-search-input:focus,
input#main-search:focus {
  border-color: #d62629 !important;
  box-shadow: 0 0 0 3px rgba(214, 38, 41, .1) !important;
}
.srx-search-input::placeholder,
input#main-search::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Search button (mobile: full width block; desktop: attached right side) */
.srx-btn-search {
  flex-shrink: 0 !important;
  height: 54px !important;
  padding: 0 22px !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  background: #d62629 !important;
  color: #fff !important;
  font: 700 14px/1 Roboto, Arial, sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.srx-btn-search:hover {
  background: #b91c1c !important;
}

/* Desktop (≥900px): hide the Cerca button */
@media (min-width: 900px) {
  .srx-btn-search {
    display: none !important;
  }
  .srx-search-input,
  input#main-search {
    border-right: 2px solid #dbe1ea !important;
    border-radius: 8px !important;
  }
  .srx-search-input:focus,
  input#main-search:focus {
    border-right-color: #d62629 !important;
  }
}

/* Mobile (<900px): button goes below, full width */
@media (max-width: 899px) {
  .srx-input-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .srx-search-input,
  input#main-search {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-right: 2px solid #dbe1ea !important;
    border-radius: 8px !important;
  }
  .srx-search-input:focus,
  input#main-search:focus {
    border-right-color: #d62629 !important;
  }
  .srx-btn-search {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-radius: 8px !important;
    height: 46px !important;
  }
  .srx-input-icon {
    top: 27px !important;
  }
}

/* --- Filters: section select + mode radios --- */
.srx-search-filters {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
}

.srx-section-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
}

.srx-search-filters select,
select#main-search-section {
  height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #dbe1ea !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #374151 !important;
  font: 500 13px/1 Roboto, Arial, sans-serif !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.srx-search-filters select:focus,
select#main-search-section:focus {
  border-color: #d62629 !important;
  box-shadow: none !important;
}

.srx-mode-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 0 0 auto !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

.srx-mode-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 99px !important;
  font: 500 13px/1.2 Roboto, Arial, sans-serif !important;
  color: #374151 !important;
  cursor: pointer !important;
  background: #f8fafc !important;
  user-select: none !important;
  transition: border-color .12s, background .12s, color .12s !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.srx-mode-label:has(input:checked) {
  border-color: rgba(214, 38, 41, .38) !important;
  background: #fff7f7 !important;
  color: #b91c1c !important;
}
.srx-mode-label input[type="radio"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #d62629 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.srx-advanced-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid #111827 !important;
  border-radius: 5px !important;
  background: #111827 !important;
  color: #fff !important;
  font: 800 10px/1 Roboto, Arial, sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.srx-advanced-link:hover {
  background: #d21317 !important;
  border-color: #d21317 !important;
}

/* --- Live results --- */
#searchModal .meili-live-results {
  display: grid !important;
  gap: 0 !important;
  margin-top: 20px !important;
  padding: 0 !important;
  border-top: 2px solid #111827 !important;
}
#searchModal .meili-live-results:empty {
  display: none !important;
}
#searchModal .meili-live-meta {
  padding: 10px 0 6px !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font: 800 11px/1 Roboto, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  border: none !important;
  background: transparent !important;
}
#searchModal .meili-live-item {
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 14px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0f2f6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .12s !important;
  margin: 0 !important;
}
#searchModal .meili-live-item:hover {
  background: #fafbfc !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 6px !important;
}
#searchModal .meili-live-item:hover .meili-live-copy strong,
#searchModal .meili-live-item:hover strong {
  color: #d62629 !important;
}
#searchModal .meili-live-thumb {
  width: 130px !important;
  height: 88px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #f0f2f6 !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#searchModal .meili-live-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
#searchModal .meili-live-thumb-empty {
  background: linear-gradient(135deg, #f0f2f6, #f8fafc) !important;
}
#searchModal .meili-live-thumb-empty::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
#searchModal .meili-live-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
#searchModal .meili-live-kicker,
#searchModal .meili-live-item .meili-live-kicker {
  color: #9ca3af !important;
  font: 600 12px/1 Roboto, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
#searchModal .meili-live-copy strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font: 800 19px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif !important;
  transition: color .12s !important;
  margin: 0 !important;
  padding: 0 !important;
}
#searchModal .meili-live-copy > span:last-child {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  color: #6b7280 !important;
  font: 400 14px/1.35 Roboto, Arial, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}
#searchModal .meili-live-item mark {
  background: #fef08a !important;
  color: inherit !important;
  border-radius: 2px !important;
  padding: 0 2px !important;
}
#searchModal .meili-live-empty {
  padding: 16px !important;
  border: 1px dashed #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  color: #6b7280 !important;
  font: 400 14px/1.4 Roboto, Arial, sans-serif !important;
  margin-top: 14px !important;
  display: block !important;
}
#searchModal .meili-live-empty-strong {
  display: grid !important;
  gap: 6px !important;
  padding: 18px !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  background: #fff7f7 !important;
  margin-top: 14px !important;
}
#searchModal .meili-live-empty-strong strong {
  color: #b91c1c !important;
  font: 800 16px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif !important;
}
#searchModal .meili-live-empty-strong span {
  color: #6b7280 !important;
  font: 400 13px/1.35 Roboto, Arial, sans-serif !important;
}

/* --- Hint labels --- */
.srx-search-hint-label {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #374151 !important;
  font: 700 15px/1 Roboto, Arial, sans-serif !important;
  letter-spacing: .01em !important;
}
/* --- Sort bar --- */
.srx-sort-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #f0f2f6 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
}
.srx-sort-bar[hidden] {
  display: none !important;
}
.srx-sort-label {
  color: #64748b !important;
  font: 600 12px/1 Roboto, Arial, sans-serif !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.srx-sort-select {
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid #dbe1ea !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #111827 !important;
  font: 600 13px/1 Roboto, Arial, sans-serif !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}
.srx-sort-select:focus {
  border-color: #d62629 !important;
  box-shadow: none !important;
}

.srx-more-results {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px 0 0 !important;
  padding: 12px !important;
  border: 2px solid #111827 !important;
  border-radius: 7px !important;
  background: #111827 !important;
  color: #fff !important;
  font: 800 13px/1 Roboto, Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  transition: background .15s, border-color .15s !important;
}
.srx-more-results:hover {
  background: #d21317 !important;
  border-color: #d21317 !important;
  color: #fff !important;
}

/* --- Mobile overrides (<900px) --- */
@media (max-width: 899px) {
  #searchModal.modal {
    padding: 12px 8px 16px !important;
  }
  #searchModal .srx-search-dialog {
    width: calc(100vw - 16px) !important;
    max-width: 480px !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 10px !important;
  }
  .srx-search-head {
    padding: 18px 50px 14px 18px !important;
    gap: 10px !important;
  }
  .srx-search-head-img {
    width: 82px !important;
    height: 66px !important;
  }
  .srx-search-brand {
    gap: 7px !important;
    margin-left: 10px !important;
  }
  .srx-search-brand > span:not(.srx-search-tooltip) {
    font-size: 20px !important;
  }
  .srx-search-logo {
    height: 28px !important;
    max-width: 200px !important;
  }
  .srx-search-info {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
    font-size: 10px !important;
  }
  .srx-search-tooltip {
    width: min(280px, calc(100vw - 44px)) !important;
    font-size: 11px !important;
    right: -28px !important;
  }
  .srx-search-body {
    padding: 14px 18px 20px !important;
  }
  #searchModal .meili-live-item {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  #searchModal .meili-live-thumb {
    width: 90px !important;
    height: 64px !important;
  }
  .srx-search-filters select,
  select#main-search-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  .srx-section-stack {
    width: 100% !important;
  }
  .srx-mode-group {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .srx-mode-label {
    flex: 1 !important;
    justify-content: center !important;
  }
  .srx-advanced-link {
    width: auto !important;
  }
}

/* ── PROGRESS BAR: solo sugli articoli ───────────────────────────
   La barra di lettura non ha senso sulle pagine non-articolo.
   Viene nascosta ovunque tranne che sulle pagine con .public-article-page.
   ──────────────────────────────────────────────────────────────── */
body:not(.public-article-page) .progress-container,
body:not(.public-article-page) .progress-container .scroll-progress,
body:not(.public-article-page) .scroll-progress-bar,
body:not(.public-article-page) .scroll-progress-bar .scroll-progress,
body:not(.public-article-page) .scroll-progress-bar-mobile {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}