/* =========================================================
   GLIFO EDIZIONI — user.css
   Design token + shell del sito (header, nav, banner, footer)
   Gli stili specifici di prodotto/carrello/checkout vivono in
   file separati caricati solo nelle relative viste HikaShop
   (product.css, cart.css, checkout.css) per tenere questo
   foglio leggero su tutte le pagine.
   ========================================================= */

:root {
  /* Palette di marca */
  --g-blu: #0083c7;
  --g-blu-dark: #005f91;
  --g-blu-light: #e6f4fc;
  --g-blu-deep: #0a2540;
  --g-rust: #C04A1F;
  --g-rust-dark: #a03d18;

  /* Neutri */
  --g-ink: #1a1a1a;
  --g-ink-2: #2a2a2a;
  --g-mid: #555555;
  --g-text-secondary: #777777;
  --g-text-muted: #999999;

  /* Superfici */
  --g-bg: #ffffff;
  --g-card-bg: #f8f6f3;
  --g-menu-bg: #f0ede8;
  --g-border: #e0dbd4;

  /* Pastelli desaturati per sfondi di sezione (uso con parsimonia:
     un colore diverso per sezione, non più d'uno per pagina) */
  --g-pastel-salvia: #e6ebe2;
  --g-pastel-terracotta: #f3e6dc;
  --g-pastel-sabbia: #f0e8d8;
  --g-pastel-malva: #e9e3ec;
  --g-pastel-giallino: #f6edb8;

  /* Tipografia */
  --g-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --g-font-serif: Georgia, "Times New Roman", serif;

  /* Scala tipografica — usata da titoli/testo in tutto il sito
     (shell + eventuali override HikaShop). Corpo di base a 16px:
     i 13-14px sparsi restano solo per elementi UI minori (badge,
     etichette, meta) che non fanno parte del testo di lettura. */
  --g-fs-h1: 40px;
  --g-fs-h2: 26px;
  --g-fs-h3: 20px;
  --g-fs-h4: 16px;
  --g-fs-body: 16px;
  --g-fs-small: 13px;
  --g-fs-caption: 11px;
  --g-lh-body: 1.6;

  /* Layout */
  --g-max-width: 1280px;

  /* Radius */
  --g-radius-sm: 4px;
  --g-radius-md: 6px;
  --g-radius-lg: 8px;
  --g-radius-xl: 12px;
}

/* Classi utility per gli sfondi pastello — applicale a qualunque
   contenitore di sezione (es. <div class="kamishibai-promo
   glifo-bg-salvia">) direttamente nel testo di un articolo, senza
   bisogno di CSS nuovo ogni volta. */
.glifo-bg-salvia { background: var(--g-pastel-salvia) !important; }
.glifo-bg-terracotta { background: var(--g-pastel-terracotta) !important; }
.glifo-bg-sabbia { background: var(--g-pastel-sabbia) !important; }
.glifo-bg-malva { background: var(--g-pastel-malva) !important; }
.glifo-bg-azzurro { background: var(--g-blu-light) !important; }
.glifo-bg-giallino { background: var(--g-pastel-giallino) !important; }

/* =========================================================
   UTILITY SPACING (margin/padding, scala Bootstrap 5)
   m/p + t/b/s/e/x/y (o nessuna lettera = tutti i lati) + 0-5,
   più m-auto/mt-auto/... per il centraggio. Scala identica a
   Bootstrap: 0, .25rem (4px), .5rem (8px), 1rem (16px),
   1.5rem (24px), 3rem (48px). Usale ovunque nel testo di un
   articolo (es. <div class="pdf-row mb-2">) senza scrivere CSS
   nuovo ogni volta.
   ========================================================= */
.m-0 { margin: 0 !important; }
.m-1 { margin: .25rem !important; }
.m-2 { margin: .5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }


/* Larghezza di pagina costante fra una vista e l'altra: senza questo,
   una pagina più bassa della finestra (niente scrollbar) e una più
   alta (scrollbar presente) hanno una larghezza utile diversa di
   qualche pixel — tutto ciò che è centrato (.main-body, .site-header)
   si ricentra leggermente spostato, il "salto" laterale notato
   passando da pagina a pagina. overflow-y:scroll riserva sempre lo
   spazio della scrollbar (supporto universale); scrollbar-gutter fa
   la stessa cosa in modo più elegante nei browser che lo supportano,
   senza effetto se non è supportato — le teniamo entrambe. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; }

/* =========================================================
   CLASSI GENERICHE HIKASHOP (glifo-btn / glifo-input / glifo-select)
   Assegnate in Configurazione HikaShop > Opzioni CSS al posto dei
   default (hikabtn / form-control / form-select) — HikaShop le
   applica a bottoni, campi testo e select ovunque nel sito, non solo
   nelle pagine che abbiamo già vestito a mano (carrello, checkout,
   wishlist...). Stile NEUTRO di base qui, valido ovunque; contesti
   specifici (es. il bottone rosso "Aggiungi al carrello") restano
   liberi di specializzarlo altrove con selettori più mirati — la
   specificità maggiore vince senza bisogno di !important, perché
   qui non c'è nessun CSS di HikaShop da dover battere: sono classi
   nostre, sconosciute al suo foglio di stile bundle. */
.glifo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--g-card-bg);
  color: var(--g-ink);
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-md);
  padding: 8px 14px;
  font-size: var(--g-fs-body);
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.glifo-btn:hover { border-color: var(--g-rust); color: var(--g-rust); }

/* Varianti "piene" di .glifo-btn: a volte HikaShop aggiunge di sua
   iniziativa una classe Bootstrap nativa come .btn-primary/.btn-success
   a un bottone che già porta la nostra .glifo-btn (es. "Aggiungere" del
   buono sconto nel checkout) — quella classe nativa gli dà uno sfondo
   pieno colorato. La regola di hover sopra presume invece uno sfondo
   neutro chiaro (testo mattone su beige) e su uno sfondo già pieno
   diventerebbe illeggibile (testo mattone su mattone). Qui forziamo
   il testo bianco sempre per queste varianti, a prescindere da quale
   bottone specifico le porti — non serve una patch per ognuno. */
.glifo-btn.btn-primary,
.glifo-btn.btn-success {
  color: #fff;
}
.glifo-btn.btn-primary:hover,
.glifo-btn.btn-success:hover {
  color: #fff !important;
}

.glifo-input,
.glifo-select {
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  padding: 8px 10px;
  font-size: var(--g-fs-body);
  font-family: inherit;
  color: var(--g-ink);
}

body.site-glifo {
  margin: 0;
  font-family: var(--g-font);
  font-size: var(--g-fs-body);
  line-height: var(--g-lh-body);
  color: var(--g-ink);
  background: var(--g-bg);
}

.glifo-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

a { color: inherit; text-decoration: none; }

/* --- Link dentro testo libero (articoli Joomla, descrizione prodotto
   HikaShop, campi custom Home): mattone e sottolineato, per essere
   riconoscibili come link nel mezzo di un paragrafo. Scope ristretto
   a queste aree di contenuto: bottoni/nav/card/footer hanno già il
   loro stile esplicito più specifico e restano invariati. --- */
.hikashop_product_description_main a,
.hikashop_product_url_main a,
.com-content-article__body a {
  color: var(--g-blu);
  text-decoration: underline;
}
.hikashop_product_description_main a:hover,
.hikashop_product_url_main a:hover,
.com-content-article__body a:hover {
  color: var(--g-blu-dark);
}
img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   SCALA TIPOGRAFICA
   Applicata di default ai tag h1-h6/p, così qualsiasi contenuto
   (articoli Joomla, override HikaShop, moduli custom) eredita
   una gerarchia coerente senza bisogno di classi aggiuntive.
   Le classi .h1-page ecc. restano disponibili per quando serve
   uno stile di questo tipo su un tag diverso (es. uno <span>).
   ========================================================= */
.site-glifo h1, .h1-page {
  font-size: var(--g-fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--g-ink);
  margin: 0 0 16px;
}
.site-glifo h2, .h2-section {
  font-size: var(--g-fs-h2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--g-ink);
  margin: 0 0 14px;
}
.site-glifo h3, .h3-card {
  font-size: var(--g-fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--g-ink);
  margin: 0 0 12px;
}
.site-glifo h4, .h4-label {
  font-size: var(--g-fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--g-ink);
  margin: 0 0 10px;
}
.site-glifo h5, .site-glifo h6 {
  font-size: var(--g-fs-body);
  font-weight: 600;
  color: var(--g-ink);
  margin: 0 0 8px;
}
.site-glifo p { margin: 0 0 12px; }
.text-small { font-size: var(--g-fs-small); color: var(--g-mid); }
.text-caption {
  font-size: var(--g-fs-caption);
  color: var(--g-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================================
   SITE HEADER — wrapper sticky di topbar + navbar insieme:
   un solo elemento sticky invece di doverne coordinare due con
   offset separati (se il topbar si restringe allo scroll, il
   navbar lo segue "gratis" perché è semplicemente il figlio
   successivo nel flusso normale dentro lo stesso sticky).
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  overflow-anchor: none; /* vedi commento sopra la sezione RESPONSIVE
    in fondo al file — previene il loop di feedback con lo scroll
    anchoring del browser che causava il "tremolio" vicino alla soglia */
}

.topbar {
  background: #fff;
  border-bottom: 0.5px solid var(--g-border);
}

.topbar-inner {
  max-width: var(--g-max-width);
  margin: 0 auto;
  padding: 0 28px;
  height: 150px;
  display: flex;
  align-items: center;
  transition: height 0.15s ease;
}

.topbar-logo { flex-shrink: 0; display: flex; align-items: center; }
.topbar-logo a { display: flex; align-items: center; }

/* i due SVG stanno entrambi nel DOM da subito (niente attesa JS,
   niente flash): il CSS mostra solo quello giusto per il breakpoint */
.topbar-logo .logo-desktop { display: block; height: 100px; width: auto; transition: height 0.15s ease; }
.topbar-logo .logo-mobile { display: none; height: 40px; width: auto; }

/* Riduzione topbar allo scroll — SOLO desktop (sopra i 1024px,
   il breakpoint dove il navbar diventa hamburger): la classe
   .is-scrolled viene aggiunta/rimossa da glifo.js in base alla
   posizione di scroll. Il navbar sotto non ha bisogno di nessuna
   regola dedicata: essendo dentro allo stesso .site-header sticky,
   segue automaticamente il topbar che si accorcia sopra di lui. */
@media (min-width: 1025px) {
  .site-header.is-scrolled .topbar-inner { height: 80px; }
  .site-header.is-scrolled .topbar-logo .logo-desktop { height: 48px; }
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-toggle span {
  display: block;
  height: 2px;
  background: var(--g-ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Trasformazione in "X" quando il menu è aperto — si aggancia
   direttamente ad aria-expanded, già impostato da glifo.js ad ogni
   toggle: nessuna classe in più da gestire. */
.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.topbar-right {
  display: flex;
  align-items: center; /* allineamento verticale "middle" richiesto */
  height: 100%;
  margin-left: auto;
  gap: 28px; /* spaziatura fra i gruppi, ora che non ci sono più i
                divisori verticali a fare da separatore visivo */
}

/* Icona cerca placeholder, visibile solo in modalità hamburger
   (vedi @media max-width:1024px più sotto) — su desktop c'è già
   il campo di ricerca vero (.search-zone). Selettore composto
   ".tu.search-toggle" (non solo ".search-toggle") perché deve
   battere in specificità la regola ".tu { display:flex }" più sotto,
   che altrimenti vince per ordine nel foglio a parità di specificità. */
.tu.search-toggle {
  display: none;
  border: none; /* reset del bordo nativo del tag <button> — gli altri
    .tu sono tag <a>, che non hanno bordo di default, quindi non era
    mai stato necessario finora */
  font: inherit;
  position: relative;
}
.search-toggle-close { display: none; }

.search-zone {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

/* Markup reale (verificato via outerHTML, non è mod_search ma
   mod_finder / Smart Search): .search-zone > form.mod-finder >
   label.finder + div.awesomplete > input.js-finder-search-query.
   Niente wrapper "search-field" — quella classe non è mai esistita
   nel markup vero, le regole vecchie non hanno mai fatto nulla. */
.search-zone .mod-finder {
  display: flex;
  align-items: center;
  margin: 0;
}
/* La label "Cerca" è ridondante con il placeholder "Cerca…" già
   dentro il campo — la nascondiamo solo visivamente (resta per gli
   screen reader) invece di duplicare il testo due volte. */
.search-zone .mod-finder label.finder {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.search-zone .awesomplete {
  position: relative;
  display: block;
}
.search-zone .js-finder-search-query {
  height: 36px;
  width: 200px;
  background-color: var(--g-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='21' y1='21' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  border: 0.5px solid var(--g-border);
  border-radius: var(--g-radius-md);
  padding: 0 12px 0 34px;
  font-size: var(--g-fs-body);
  font-family: inherit;
  color: var(--g-ink);
  outline: none;
}
.search-zone .js-finder-search-query::placeholder { color: var(--g-text-muted); }
.search-zone .js-finder-search-query:focus {
  border-color: var(--g-rust);
  background-color: #fff;
}

.tu {
  display: flex; align-items: center; gap: 6px;
  padding: 0 13px; height: 100%;
  font-size: var(--g-fs-small); color: #777;
  cursor: pointer;
  background: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.tu i { font-size: 26px; }
.tu:hover { color: var(--g-ink); }
.tu.cart { background: var(--g-rust); color: #fff; font-weight: 500; }
.tu.cart:hover { background: var(--g-rust-dark); }
.cart-badge {
  background: #fff; color: var(--g-rust);
  border-radius: 50%; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* =========================================================
   NAVBAR (menu principale)
   ========================================================= */
.navbar {
  background: var(--g-menu-bg);
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* Copia dei social pensata solo per il pannello hamburger mobile
   (vedi index.php) — su desktop .navbar è già il menu orizzontale
   principale, qui resta nascosta e riappare stilizzata sotto i
   1024px insieme al resto della modalità hamburger. */
.navbar-social { display: none; }
.topbar-social {
  display: flex;
  align-items: center;
  height: 100%;
}
.navbar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap;
}
.navbar li { display: flex; }
.navbar a {
  font-size: var(--g-fs-body); font-weight: 600; color: var(--g-mid);
  padding: 14px 22px;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.navbar a:hover { color: var(--g-ink); }
.navbar li.active > a,
.navbar li.current > a {
  color: var(--g-ink);
  border-bottom-color: var(--g-rust);
}

/* --- Dropdown sottomenu (es. Shop con voci figlie) --- */
.navbar li { position: relative; }

.navbar li > ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 0.5px solid var(--g-border);
  border-radius: 0 0 var(--g-radius-md) var(--g-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 50;
  display: none;
  flex-direction: column;
}

.navbar li > ul a {
  padding: 9px 16px;
  border-bottom: none;
  font-weight: 500;
  color: var(--g-mid);
  white-space: nowrap;
}
.navbar li:has(> ul) > a { cursor: pointer; }
.navbar li > ul a:hover { color: var(--g-rust); background: var(--g-card-bg); }

/* desktop: apertura al passaggio del mouse o focus tastiera */
@media (min-width: 769px) {
  .navbar li:hover > ul,
  .navbar li:focus-within > ul,
  .navbar li.dropdown-open > ul {
    display: flex;
  }

  /* piccola freccina per segnalare che la voce ha sottomenu */
  .navbar li:has(> ul) > a::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    opacity: 0.6;
  }
}

/* =========================================================
   CARRELLO — MODULO HEADER (trigger + cassetto)
   Modulo nativo HikaShop assegnato alla posizione topbar-cart,
   modalità "Cassetto" (drawer). Compare in OGNI pagina del sito
   (non solo su /carrello), per questo vive qui e non in cart.css,
   che si carica solo sulla vista dedicata. Meccanica di apertura/
   animazione/overlay lasciata a HikaShop (fa parte del CSS di
   posizionamento che abbiamo deciso di non toccare) — qui vestiamo
   solo tipografia, colori e spaziatura del contenuto.
   ========================================================= */

/* --- Trigger nella topbar: icona sempre visibile; quando il
   carrello ha articoli, glifo.js isola il numero in un suo
   <span class="cart-count-badge">, che posizioniamo qui come badge
   sovrapposto all'angolo dell'icona. Il contenitore parte a
   font-size:0 di default — nasconde qualunque testo grezzo che
   HikaShop scriva lì (incluso il messaggio "Il carrello è vuoto"),
   il badge ha un suo font-size esplicito e non ne risente. */
.hikashop_small_cart_checkout_link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  text-decoration: none;
  flex-shrink: 0;
}
.hikashop_small_cart_total_title {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0;
}
.hikashop_small_cart_total_title img {
  width: 26px;
  height: 26px;
  opacity: 0.55; /* il file SVG ha un colore scuro fisso al suo
    interno: "color"/"hover" via CSS non ha alcun effetto su un tag
    <img> (funziona solo su testo o SVG inline). Giochiamo sull'opacità
    invece che sul colore: effetto "grigio chiaro" a riposo. */
  transition: opacity 0.15s ease;
}
.hikashop_small_cart_checkout_link:hover img {
  opacity: 1; /* piena opacità = colore scuro pieno, effetto hover */
}
.cart-count-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: var(--g-rust);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* --- Intestazione del cassetto --- */
.hikashop_drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 0.5px solid var(--g-border);
}
.hikashop_drawer__title {
  font-size: var(--g-fs-h3);
  font-weight: 600;
  color: var(--g-ink);
}

/* --- Contenuto: tabella prodotti, ristrutturata in card impilate.
   Il markup resta una <table> nativa HikaShop (immagine/nome/quantità/
   prezzo/elimina come <td> separati) — qui la ricomponiamo via CSS
   Grid in un layout verticale più comodo su schermi stretti: foto
   grande a sinistra, nome+elimina/prezzo/quantità impilati a destra.
   Niente più intestazioni di colonna (non servono più in verticale).
   !important su display: il CSS nativo HikaShop (fuori <head>) arriva
   dopo il nostro e vince a parità di specificità (stesso problema già
   visto altrove in questo progetto). --- */
.hikashop_drawer__content { padding: 20px 24px; }

.hikashop_drawer__content table.hikashop_cart {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  border-collapse: collapse;
}
.hikashop_drawer__content thead { display: none !important; }
.hikashop_drawer__content tbody { display: block !important; order: 1; }
.hikashop_drawer__content tfoot { display: block !important; order: 2; }
.hikashop_drawer__content tbody tr {
  display: grid !important;
  grid-template-columns: 90px 1fr;
  column-gap: 19px;
  row-gap: 4px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 0.5px solid var(--g-border);
}
.hikashop_drawer__content tbody td.hikashop_cart_value {
  padding: 0;
  border: none;
  vertical-align: top;
  font-size: var(--g-fs-body);
}
.hikashop_cart_module_product_image {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
}
.hikashop_cart_module_product_image img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--g-radius-sm);
}
.hikashop_cart_module_product_name_value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-right: 32px;
  font-weight: 700;
  font-size: var(--g-fs-body);
  line-height: 1.3;
  color: var(--g-ink);
}
.hikashop_cart_module_product_price_value {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-weight: 600;
  font-size: 18px;
  color: var(--g-rust);
}
.hikashop_cart_module_product_quantity_value {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* --- Stepper quantità: input + pulsanti +/- (già .glifo-input/.glifo-btn,
   qui solo la specializzazione di dimensione per farli piccoli e
   circolari invece che bottoni a piena grandezza) --- */
.hikashop_product_quantity_div,
.hikashop_drawer__content .input-append.hikashop_product_quantity_div {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  gap: 6px;
}
.hikashop_drawer__content .glifo-input.hikashop_product_quantity_field {
  vertical-align: middle !important;
  width: 44px;
  padding: 4px;
  text-align: center;
}
.hikashop_product_quantity_change_div_regrouped {
  margin-left: 0 !important;
}
.hikashop_product_quantity_field_change.glifo-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.hikashop_product_quantity_change_div_plus_regrouped,
.hikashop_product_quantity_change_div_minus_regrouped {
  margin: 0 5px 0 0;
}
.hikashop_cart_product_quantity_refresh {
  display: inline-flex;
}
.hikashop_cart_product_quantity_refresh .hikashop_no_print {
  color: var(--g-text-muted);
  display: inline-flex;
}
.hikashop_cart_product_quantity_refresh .hikashop_no_print:hover { color: var(--g-rust); }

/* --- Icona elimina riga: stessa cella del nome, ancorata in alto a
   destra (nessuna classe propria nel markup nativo, ci agganciamo
   alla cella .hikashop_cart_module_product_delete_value) --- */
.hikashop_cart_module_product_delete_value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
}
.hikashop_cart_module_product_delete_value a {
  color: var(--g-rust);
  display: inline-flex;
  font-size: 18px;
}
.hikashop_cart_module_product_delete_value a:hover { color: var(--g-rust-dark); }

/* --- Righe Pagamento / Totale (tfoot) --- */
.hikashop_drawer__content tfoot tr {
  display: flex !important;
  align-items: baseline;
}
.hikashop_drawer__content tfoot td {
  padding: 10px 0;
  border: none;
  font-size: var(--g-fs-body);
}
.hikashop_cart_module_payment_title,
.hikashop_cart_module_payment_value {
  color: var(--g-text-secondary);
  font-size: var(--g-fs-small);
}
.hikashop_cart_module_product_total_title {
  font-weight: 700 !important;
  font-size: var(--g-fs-h3) !important;
}
.hikashop_cart_module_product_total_value {
  font-weight: 700 !important;
  font-size: var(--g-fs-h3) !important;
  color: var(--g-rust) !important;
  text-align: right;
  margin-left: auto;
}

/* --- Bottone "Vai alla cassa": stesso trattamento del CTA rosso
   usato ovunque nel sito. !important perché la classe nativa
   hikashop_cart_proceed_to_checkout può avere un suo CSS bundle
   HikaShop indipendente dal nostro glifo-btn (stesso principio già
   verificato più volte in questa conversazione). --- */
.hikashop_cart_proceed_to_checkout.glifo-btn {
  display: flex !important;
  width: 100% !important;
  margin-top: 16px;
  background: var(--g-rust) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 0 !important;
  font-weight: 600 !important;
}
.hikashop_cart_proceed_to_checkout.glifo-btn:hover { background: var(--g-rust-dark) !important; }

/* =========================================================
   BANNER HERO
   ========================================================= */
.banner-box {
  background: var(--g-blu);
  color: #fff;
  overflow: hidden;
}
.banner-inner {
  max-width: var(--g-max-width);
  margin: 0 auto;
}
.banner-box .banner-text { padding: 24px 28px; max-width: 600px; }

.banner-box .banner-eyebrow {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 8px;
}
.banner-box .banner-title {
  font-size: var(--g-fs-h2);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 7px;
  color: #fff;
}
.banner-box .banner-title em { font-style: italic; color: #b8dff5; }
.banner-box .banner-sub {
  font-size: var(--g-fs-body);
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin-bottom: 16px;
}
.banner-box .banner-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--g-blu);
  font-size: var(--g-fs-body); font-weight: 500;
  padding: 8px 17px; border-radius: var(--g-radius-md); border: none; cursor: pointer;
}

/* =========================================================
   BODY / HOME BLOCKS
   ========================================================= */
.main-body {
  flex: 1;
  width: 100%;
  max-width: var(--g-max-width);
  margin: 0 auto;
  padding: 20px 28px;
}
.glifo-breadcrumb {
  /* niente padding orizzontale qui: si affida a quello ora globale
     su .main-body, evitando di sommarsi ad esso — stessa logica
     applicata sotto alle colonne della scheda prodotto. */
  padding: 10px 0 30px;
  font-size: var(--g-fs-body);
  color: var(--g-text-muted);
}
.glifo-breadcrumb ul,
.glifo-breadcrumb ol {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}
.glifo-breadcrumb li {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
/* Sopprimiamo qualunque separatore nativo che Joomla generi di suo
   (es. class="divider", icone home, ecc.): usiamo SOLO il nostro
   separatore ::after, che per costruzione non compare mai prima del
   primo elemento (:not(:last-child) lo mette DOPO ogni voce tranne
   l'ultima) — se il modulo Joomla aggiunge un proprio separatore
   nativo PRIMA della prima voce, quello va disattivato qui. */
.glifo-breadcrumb li:first-child::before,
.glifo-breadcrumb .divider,
.glifo-breadcrumb [class*="separator"] {
  display: none !important;
  content: none !important;
}
.glifo-breadcrumb li:not(:last-child)::after {
  content: '/';
  color: var(--g-border);
  margin-left: 4px;
}
.glifo-breadcrumb a,
.glifo-breadcrumb span {
  color: var(--g-text-muted);
  font-size: var(--g-fs-body);
  letter-spacing: 0.3px;
}
.glifo-breadcrumb a:hover { color: var(--g-rust); }
.glifo-breadcrumb li:last-child span,
.glifo-breadcrumb li:last-child a {
  color: var(--g-mid);
  font-weight: 500;
}
.home-blocks { display: flex; flex-direction: column; gap: 16px; }

.slider-block { border-radius: var(--g-radius-lg); }
.tabs { display: flex; background: #fff; border-bottom: 0.5px solid var(--g-border); }
.tab {
  flex: 1; padding: 12px 0;
  font-size: var(--g-fs-body); font-weight: 700; text-align: center;
  cursor: pointer; color: var(--g-mid);
  border: none; border-right: 0.5px solid var(--g-border);
  background: #fff;
  border-bottom: 2px solid transparent;
}
.tab:last-child { border-right: none; }
.tab:hover { color: var(--g-ink); }
.tab.active { color: var(--g-ink); border-bottom-color: var(--g-rust); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.two-col-modules { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--g-rust); color: #fff;
  border: none; border-radius: var(--g-radius-md);
  font-size: var(--g-fs-body); font-weight: 600;
  padding: 11px 20px; cursor: pointer;
}
.btn-primary:hover { background: var(--g-rust-dark); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--g-menu-bg);
  border-top: 0.5px solid var(--g-border);
  margin-top: auto;
  /* niente max-width qui: lo sfondo resta sempre a piena larghezza,
     anche se le colonne sotto sono vuote (nessun modulo assegnato) */
}
.footer-grid {
  max-width: var(--g-max-width);
  margin: 0 auto;
  padding: 32px 28px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px;
}

/* --- Blocco statico: logo + indirizzo/contatti + social --- */
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: 14px;
}
.footer-info p {
  font-size: var(--g-fs-small);
  color: var(--g-text-secondary);
  line-height: 1.7;
  margin: 0 0 14px;
}
.footer-info p a {
  color: var(--g-text-secondary);
}
.footer-info p a:hover {
  color: var(--g-rust);
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  color: var(--g-text-secondary);
  font-size: 24px;
  display: flex;
}
.footer-social a:hover {
  color: var(--g-rust);
}

/* --- Colonne di link (moduli Menu di Joomla) --- */
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--g-ink);
  margin: 0 0 14px;
}
/* Markup ancora da verificare col vero output del modulo Menu —
   copre la struttura standard <ul><li><a>, da rifinire se necessario
   una volta visto l'HTML reale (stessa prassi di sempre). */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 7px;
}
.footer-col a {
  font-size: 14px;
  color: var(--g-text-secondary);
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--g-rust);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .footer-info {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ERROR PAGE
   ========================================================= */
.error-wrap { max-width: 480px; margin: 80px auto; text-align: center; padding: 0 24px; }
.error-code { font-size: 64px; font-weight: 700; color: var(--g-border); }
.error-title { font-size: 20px; margin: 8px 0 12px; }
.error-message { color: var(--g-text-secondary); margin-bottom: 24px; }

/* =========================================================
   RESPONSIVE
   Sotto i 1024px: topbar compatta (80px/logo 40px), menu ad
   hamburger. Sotto i 960px: i due moduli homepage affiancati
   (editoriale + promo) vanno su una sola colonna.
   ========================================================= */
@media (max-width: 960px) {
  .two-col-modules { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .mobile-toggle { display: flex; }

  .search-zone { display: none; }
  .tu.search-toggle { display: flex; }

  .navbar { display: none; flex-direction: column; padding: 0; }
  .navbar.is-open { display: flex; }
  .navbar ul { flex-direction: column; width: 100%; }
  .navbar a { padding: 14px 20px; border-bottom: 0.5px solid var(--g-border); border-left: 3px solid transparent; }
  .navbar li.active > a { border-left-color: var(--g-rust); border-bottom-color: var(--g-border); }

  /* sottomenu mobile: niente posizionamento assoluto, si apre in linea */
  .navbar li > ul {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: var(--g-card-bg);
    padding: 0;
  }
  .navbar li.dropdown-open > ul { display: flex; }
  .navbar li > ul a { padding-left: 36px; border-bottom: 0.5px solid var(--g-border); }

  /* freccina sulla voce stessa, ruota quando il sottomenu è aperto */
  .navbar li:has(> ul) > a { justify-content: space-between; }
  .navbar li:has(> ul) > a::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-left: 8px;
    flex-shrink: 0;
  }
  .navbar li.dropdown-open > a::after { transform: rotate(-135deg); }

  /* topbar compatta: 80px di altezza, logo mobile a 40px */
  .topbar-inner { height: 80px; padding: 0 16px; }
  .topbar-logo .logo-desktop { display: none; }
  .topbar-logo .logo-mobile { display: block; }

  .topbar-right { gap: 16px; }
  .topbar-right .tu span:not(.cart-badge) { display: none; } /* nasconde testo extra nei pulsanti topbar su mobile */

  /* Social: spariscono dalla topbar (non c'è spazio, vedi analisi in
     chat: 3 icone social da sole valgono ~156px su un budget totale
     già stretto) e vivono invece in fondo al pannello hamburger. */
  .topbar-social { display: none; }
  .navbar-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    margin-top: auto;
  }
  .navbar-social .tu {
    padding: 8px 14px;
    height: auto;
    background: none;
    border-bottom: none;
  }

  /* Stato "ricerca aperta" su mobile: campo e X sulla stessa riga
     della topbar (come suggerito guardando l'esempio di adelphi.it),
     non più un overlay separato sovrapposto dall'alto. Nascondiamo
     anche il LOGO oltre alle altre icone: è quello che dà al campo
     spazio a sufficienza su schermi stretti (es. Galaxy A40), invece
     di continuare a spartire la riga con altri elementi. Il campo
     resta nel flusso naturale della topbar — niente più position:fixed
     su di esso, elimina alla radice il bug del posizionamento visto
     prima. Solo il pannello dei risultati sotto è "a piena pagina"
     (fixed, sotto la topbar). */
  .topbar-inner:has(.topbar-right.is-searching) .topbar-logo {
    display: none;
  }
  .topbar-inner:has(.topbar-right.is-searching) {
    border-bottom: 1.5px solid var(--g-rust);
  }

  .topbar-right.is-searching .hikashop_cart_module,
  .topbar-right.is-searching .tu.cart,
  .topbar-right.is-searching .mobile-toggle {
    display: none;
  }
  .topbar-right.is-searching {
    width: 100%;
  }
  .topbar-right.is-searching .search-toggle {
    order: 2;
  }
  .topbar-right.is-searching .search-toggle-icon { display: none; }
  .topbar-right.is-searching .search-toggle-close { display: flex; }

  .topbar-right.is-searching .search-zone {
    order: 1;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0;
  }
  .topbar-right.is-searching .search-zone .mod-finder,
  .topbar-right.is-searching .search-zone .awesomplete {
    width: 100%;
  }
  .topbar-right.is-searching .search-zone .js-finder-search-query {
    width: 100%;
    height: 52px;
    font-size: 20px;
    border: none;
    background-color: transparent;
    background-size: 22px 22px;
    background-position: 14px center;
    padding: 0 16px 0 46px;
  }
  .topbar-right.is-searching .search-zone .js-finder-search-query:focus {
    border: none;
    background-color: transparent;
  }

  /* Sfondo bianco sotto la topbar SEMPRE presente finché siamo in
     modalità ricerca — agganciato allo stato .is-searching stesso,
     non alla lista suggerimenti (che HikaShop/Awesomplete nasconde
     da sola appena non ci sono risultati o dopo l'invio): prima lo
     sfondo bianco esisteva solo insieme ai suggerimenti, e quando
     sparivano si rivedeva il contenuto vero della pagina sotto,
     "distraendo" durante la ricerca. */
  .topbar-right.is-searching::after {
    content: "";
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-bg);
    z-index: 198;
  }

  /* Pannello risultati: fixed sotto la topbar (80px, altezza mobile
     compatta), a piena pagina invece che un piccolo dropdown — così
     i suggerimenti hanno spazio per respirare. */
  .topbar-right.is-searching .search-zone ul[role="listbox"] {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-bg);
    border: none;
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 199;
  }
  /* Righe dei suggerimenti — confermate via HTML reale: <li role="option">
     con <mark> intorno alla parte digitata. */
  .topbar-right.is-searching .search-zone ul[role="listbox"] li {
    list-style: none;
    padding: 14px 20px;
    font-size: var(--g-fs-body);
    color: var(--g-ink);
    border-bottom: 0.5px solid var(--g-border);
    cursor: pointer;
  }
  .topbar-right.is-searching .search-zone ul[role="listbox"] li:last-child {
    border-bottom: none;
  }
  .topbar-right.is-searching .search-zone ul[role="listbox"] li:hover,
  .topbar-right.is-searching .search-zone ul[role="listbox"] li[aria-selected="true"] {
    background: var(--g-card-bg);
  }
  .topbar-right.is-searching .search-zone ul[role="listbox"] li mark {
    background: none;
    color: var(--g-rust);
    font-weight: 600;
  }
}