/* Refresh visivo storefront (font/icone/bordi) — vedi patches/README.md
   "storefront-refresh". Stesso font delle email (Poppins) per coerenza di
   brand; "Open Sans" sotto era dichiarato ma mai caricato via @import/<link>,
   quindi ricadeva silenziosamente sul sans-serif di sistema. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* Font "tech" per la fascia titolo prodotto e i tab scheda prodotto (vedi
   patches/README.md "storefront-refresh"), non sul body: usato solo dove il
   tema di riferimento lo mostra, per restare leggibile sul resto del catalogo. */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  --theme-accent: #229ac8;
  --theme-accent-dark: #1a7ba3;
  --theme-dark: #1a1d29;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: #444;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
}

legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

label {
  font-size: 12px;
  font-weight: normal;
}

/* Chrome border line */
button:focus {
  outline: none !important;
}

/* container (vedi patches/README.md "storefront-refresh"): il vecchio
   trucco OpenCart (#container/footer in position:absolute + padding-bottom
   fisso enorme su #content) lasciava un vuoto enorme a contenuto corto.
   Sticky footer via flexbox: il footer resta ancorato al fondo della
   viewport, lo spazio "vuoto" (se il contenuto è più corto della finestra)
   lo assorbe il contenuto sopra, mai sotto. Richiede pagine con abbastanza
   contenuto reale da non rendere il vuoto sopra il footer troppo evidente —
   vedi la sezione categorie popolari aggiunta in home proprio per questo. */
html, body {
  height: 100%;
}

#container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
/* #alert (common/header.twig): area toast condivisa da ~15 template del
   sito per i messaggi di conferma/errore ajax (pattern $('#alert')
   .prepend(...), stesso codice del core OC4 — vedi patches/README.md).
   Prima: popup al centro dello schermo (top:30%, left:50%) con un "alone"
   colorato sfocato al posto di un'ombra reale — stile di default del tema
   mai toccato nel resto del redesign, copriva il contenuto sottostante.
   Sostituito con un vero toast ancorato in alto a destra, impilabile
   (più messaggi = più box in colonna), ombra reale, bordo d'accento
   colorato invece dell'alone. L'auto-dismiss dopo 3s è già gestito lato JS
   (common.js, MutationObserver su #alert) — qui solo aspetto/posizione. */
#alert {
  z-index: 1090;
  position: fixed;
  top: 115px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

#alert .alert {
  pointer-events: auto;
  margin-bottom: 0;
  border: none;
  border-radius: 8px;
  border-left: 4px solid transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: alert-toast-in .2s ease-out;
}

#alert .alert-primary {
  border-left-color: var(--bs-primary);
}

#alert .alert-secondary {
  border-left-color: var(--bs-secondary);
}

#alert .alert-success {
  border-left-color: var(--bs-success);
}

#alert .alert-warning {
  border-left-color: var(--bs-warning);
}

#alert .alert-danger {
  border-left-color: var(--bs-danger);
}

#alert .alert-info {
  border-left-color: var(--bs-info);
}

#alert .alert-light {
  border-left-color: var(--bs-light);
}

#alert .alert-dark {
  border-left-color: var(--bs-dark);
}

@keyframes alert-toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* header: logo + ricerca + lingua/telefono/account/carrello su un'unica riga
   compatta (vedi patches/README.md "storefront-refresh") — prima erano due
   fasce sovrapposte (#top + header), ora un solo <header> con tutto allineato
   verticalmente, altezza complessiva molto più bassa. */
header {
  background-color: var(--bs-tertiary-bg);
  position: relative;
  padding: 10px 0;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0;
  /* Più alto di #menu (z-index:2 quando fuso col breadcrumb, vedi sotto):
     header crea un proprio stacking context (position:relative + z-index),
     quindi qualunque z-index messo sul dropdown del carrello al suo interno
     non potrebbe comunque "uscirne" per battere #menu — va alzato qui. Senza,
     il dropdown carrello finiva sotto la fascia scura categorie quando si
     estendeva abbastanza da sovrapporla. */
  z-index: 3;
}

/* utility (lingua/valuta/telefono/account/wishlist/checkout): solo icona,
   testo esteso visibile solo da schermi molto larghi, per stare su una riga
   insieme a logo/ricerca/carrello anche a risoluzione desktop standard. */
.header-utility {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.header-utility .list-inline-item {
  margin: 0 0 0 14px;
}

.header-utility .list-inline-item:first-child {
  margin-left: 0;
}

.header-utility .list-inline-item > a, .header-utility .list-inline-item .dropdown > span {
  color: var(--bs-gray-600);
  font-size: 1.05em;
}

.header-utility .list-inline-item > a:hover, .header-utility .list-inline-item .dropdown > span:hover {
  color: var(--theme-accent);
  cursor: pointer;
}

/* Lingua: solo bandiera + freccina, il nome esteso ("Lingua") era ridondante
   accanto a un'icona già autoesplicativa in un header ormai compatto. */
#form-language .d-md-inline {
  display: none !important;
}

/* logo */
#logo {
  margin: 0;
}

#logo img {
  max-width: 130px;
}
/* search — più piccola e allineata in altezza alle icone della fascia
   utility accanto (prima 40px la faceva sembrare "fuori riga" rispetto a
   lingua/telefono/account, che sono testo/icone di ~24px). */
/* header-row: logo/ricerca/resto non vanno mai a capo da desktop in su —
   prima la ricerca aveva una larghezza fissa (380px) che non cedeva spazio
   e faceva andare a capo l'intera riga (o, dentro la colonna di destra, le
   icone finivano sopra il carrello) appena lo schermo non era ampio.
   min-width:0 sulle colonne è necessario: un flex item non si restringe
   mai sotto la dimensione del proprio contenuto senza, quindi senza
   nowrap avrebbe comunque vinto sul resto della riga. */
@media (min-width: 992px) {
  .header-row {
    flex-wrap: nowrap;
  }
  .header-row > div {
    min-width: 0;
  }
}

#search {
  margin-bottom: 0;
  flex: 0 1 300px;
  width: 300px;
  min-width: 140px;
  max-width: 100%;
}

#search .form-control-lg {
  height: 34px;
  font-size: 12px;
  line-height: 18px;
  padding: 0 10px;
}

#search .btn-lg {
  font-size: 13px;
  line-height: 16px;
  padding: 0.4rem 20px;
  text-shadow: 0 1px 0 #FFF;
}

/* cart */
#cart {
  margin-bottom: 0;
}

#cart .img-thumbnail {
  min-width: 100px;
}

#cart .btn-lg {
  font-size: 14px;
  line-height: 18px;
  padding: 10px 20px;
}

#cart .dropdown-menu {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#cart .dropdown-menu li {
  min-width: 300px;
}

@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}
/* menu — stesso sfondo scuro e a tutta larghezza di .product-header-band
   (vedi patches/README.md "storefront-refresh"), così le due fasce (nav
   categorie + breadcrumb/titolo) si leggono come un unico blocco continuo
   invece di due sezioni di colore diverso. .container è ora dentro <nav>
   (menu.twig), non fuori, per poter colorare il fondo edge-to-edge. */
/* Pulsante "Categorie": sostituisce la barra orizzontale con scroll (bocciata
   dall'utente — voci fuori vista senza indizio chiaro, e la scrollbar
   personalizzata veniva scambiata per una sottolineatura confusa). Apre/chiude
   il pannello sottostante con lo stesso collapse Bootstrap già usato per il
   mobile: nessun JS nuovo, comportamento già collaudato. */
#menu {
  background-color: var(--theme-dark);
  background-image: none;
  border: none;
  min-height: 48px;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
  margin-bottom: 0;
  position: relative;
}

/* .container dentro #menu tiene il pulsante centrato in verticale nella
   fascia scura (prima poteva risultare leggermente storto, .container era
   un blocco normale) e forza il pannello categorie (flex-basis:100%) su una
   riga propria quando si apre, invece di finire affiancato al pulsante come
   un normale elemento flex — vale sia su mobile (layout impilato, come
   prima) sia da desktop quando il pulsante è sovrapposto al breadcrumb. */
#menu .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#navbar-menu {
  flex-basis: 100%;
}

#menu .navbar-toggler {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--theme-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#menu .navbar-toggler:hover {
  background-color: var(--theme-accent-dark);
}

#menu .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(34, 154, 200, 0.35);
}

/* Pannello categorie: lista verticale invece del mega-menu a colonne
   orizzontali (la posizione assoluta calcolata sull'indice del fratello nella
   riga non ha più senso fuori da una barra orizzontale) — sottocategorie
   sempre visibili, indentate sotto la voce padre. */
#navbar-menu {
  margin-top: 10px;
}

/* Link rapidi alle prime 3 categorie: visibili accanto al pulsante solo
   quando #menu ha una riga tutta sua (home — niente breadcrumb sotto, vedi
   regola più sotto), per non far apparire quella fascia "vuota" e dare un
   punto d'ingresso immediato senza dover aprire il pannello. */
.menu-quicklinks {
  align-items: center;
  gap: 10px;
  margin-left: 16px;
}

.menu-quicklink {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.menu-quicklink:hover {
  color: #fff;
  border-color: var(--theme-accent);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Quando la pagina ha un breadcrumb più sotto (tutte tranne la home), il
   pulsante Categorie si allinea a destra e si sovrappone alla riga del
   breadcrumb (stesso sfondo scuro) invece di occupare una riga tutta sua —
   risparmia lo spazio che prima restava vuoto a sinistra del pulsante.
   Disattivato quando il pannello è aperto (:not(:has(...))): altrimenti la
   sovrapposizione fissa taglierebbe a metà il pannello espanso. Solo da
   desktop in su: sotto i 992px le due righe restano separate, più leggibili
   su schermi stretti.
   Allineamento verticale: prima usava un margine negativo "misurato a
   occhio" (-58px) che non combaciava mai esattamente con l'altezza reale di
   #menu (diversa da pagina a pagina in base al padding ereditato), quindi
   il pulsante restava leggermente più in basso del centro del breadcrumb su
   alcune pagine (es. breadcrumb con un solo livello). position:absolute con
   top:0 rispetto a <main> allinea SEMPRE il bordo superiore di #menu con
   quello dell'elemento successivo (che riprende il suo posto naturale non
   appena #menu esce dal flusso) — nessun valore da indovinare. */
main {
  position: relative;
}

@media (min-width: 992px) {
  #menu:has(~ * .breadcrumb):not(:has(#navbar-menu.show)) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 2;
    /* #menu qui è trasparente e si vede "attraverso" fino al breadcrumb
       sotto, ma il suo box resta comunque sopra nello stacking e per
       default intercetta i click su tutta la riga (non solo dove c'è
       davvero il pulsante) — bloccava i link del breadcrumb sottostante,
       in particolare l'icona home a sinistra, più lontana dal pulsante.
       pointer-events:none qui + auto sul pulsante lascia passare i click
       ovunque tranne che sul pulsante stesso. */
    pointer-events: none;
  }

  #menu:has(~ * .breadcrumb) .navbar-toggler {
    pointer-events: auto;
  }

  #menu:has(~ * .breadcrumb) .container {
    justify-content: flex-end;
  }

  #menu:has(~ * .breadcrumb) .menu-quicklinks {
    display: none !important;
  }
}

#navbar-menu .navbar-nav {
  background-color: #23283a;
  border-radius: 8px;
  padding: 8px 16px;
  /* .nav (Bootstrap) è già flex-wrap:wrap, .navbar-nav lo porta in colonna:
     insieme (voluto, reso esplicito) creano colonne verticali invece di una
     lista lunghissima — più voci ci sono più colonne si aggiungono affiancate.
     overflow-x di sicurezza se un domani ci fossero troppe categorie perché
     ci stiano tutte affiancate nella larghezza del pannello. */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  max-height: 70vh;
  overflow-x: auto;
}

#navbar-menu .navbar-nav > li {
  width: 280px;
}

/* Sotto i 768px le colonne a larghezza fissa (280px) uscirebbero dallo
   schermo: torna a una singola colonna piena larghezza, scorrimento
   verticale invece che orizzontale. */
@media (max-width: 767.98px) {
  #navbar-menu .navbar-nav {
    flex-wrap: nowrap;
    max-height: 70vh;
    overflow-x: visible;
    overflow-y: auto;
  }
  #navbar-menu .navbar-nav > li {
    width: 100%;
  }
}

#menu .navbar-nav > li > a {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  border-radius: 4px;
  background-color: transparent;
  transition: color 0.15s ease, background-color 0.15s ease;
}

#menu .navbar-nav > li > a:hover, #menu .navbar-nav > li > a:focus {
  color: #fff;
  background-color: var(--theme-accent);
}

.menu-children {
  padding: 2px 0 6px 34px;
}

.menu-children li a {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
}

.menu-children li a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}

.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}

.nav-tabs {
  margin-bottom: 15px;
}

.form-check .form-check-input {
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* footer (aveva un bordo nero su tutti i lati + un border-top chiaro subito
   dopo: le due regole si contraddicevano, tenuta solo la seconda) */
footer {
  flex-shrink: 0;
  width: 100%;
  padding-top: 30px;
  background-color: #212529;
  border-top: 3px solid var(--theme-accent);
  color: #e2e2e2;
}

footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}

footer a {
  color: #ccc;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

footer h5 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

footer h5 i {
  color: var(--theme-accent);
  margin-right: 4px;
}

/* breadcrumb — scura come il menu/la fascia titolo prodotto (vedi
   patches/README.md "storefront-refresh"): prima era rimasta nel vecchio
   grigio chiaro di default su tutte le pagine non-prodotto. Il gap reale
   verso #menu sopra è 0px (verificato), il colpo d'occhio "due blocchi
   staccati" veniva dagli angoli arrotondati + dal fatto che #menu è a tutta
   larghezza mentre .breadcrumb stava dentro il .container (più stretto,
   margini bianchi ai lati). box-shadow+clip-path la porta a tutta larghezza
   senza uscire dal flusso del .container che la contiene (niente 100vw, che
   in Chrome include la scrollbar e crea uno scroll orizzontale indesiderato). */
.breadcrumb {
  position: relative;
  margin: 0 0 20px 0;
  padding: 14px 16px;
  border: none;
  border-radius: 0;
  background-color: var(--theme-dark);
  box-shadow: 0 0 0 100vmax var(--theme-dark);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 992px) {
  /* spazio per il pulsante Categorie sovrapposto (vedi regola #menu più
     sopra): senza, il testo del breadcrumb potrebbe finirci sotto se il
     percorso è lungo. */
  .breadcrumb {
    padding-right: 170px;
  }
}
.breadcrumb i {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb > li.breadcrumb-item {
  padding: 0 8px;
  position: relative;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb > li.breadcrumb-item > a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.breadcrumb > li.breadcrumb-item > a:hover {
  color: #fff;
}

/* Fascia titolo prodotto in stile "header-bookmark" (vedi patches/README.md
   "storefront-refresh"): sostituisce la breadcrumb+h1 chiare di product.twig
   con una fascia scura, titolo in font tech, badge per marca/SKU/disponibilità. */
.product-header-band {
  background-color: var(--theme-dark);
  padding: 18px 0 22px 0;
  margin-bottom: 25px;
}

.product-header-band .breadcrumb {
  background-color: transparent;
  box-shadow: none;
  clip-path: none;
  border: none;
  padding: 0 0 10px 0;
  margin: 0;
}

@media (min-width: 992px) {
  .product-header-band .breadcrumb {
    padding-right: 170px;
  }
}

.product-header-band .breadcrumb > li.breadcrumb-item,
.product-header-band .breadcrumb > li.breadcrumb-item > a {
  color: rgba(255, 255, 255, 0.6);
}

.product-header-band .breadcrumb > li.breadcrumb-item > a:hover {
  color: #fff;
}

.product-header-band .breadcrumb i {
  color: rgba(255, 255, 255, 0.6);
}

.product-header-band h1 {
  font-family: var(--font-mono);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin: 0 0 14px 0;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.product-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e2e2;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 6px 12px;
  border-radius: 20px;
}

.product-badges .badge a {
  color: inherit;
  text-decoration: none;
}

.product-badges .badge i {
  font-size: 0.7rem;
  color: var(--theme-accent);
}

.product-badges .badge-stock i {
  color: #2ecc71;
}

/* Tabs scheda prodotto in stile card con icone (vedi patches/README.md
   "storefront-refresh"): sostituisce i Bootstrap nav-tabs piatti con un
   contenitore arrotondato, tab attivo bianco con bordo inferiore in accento. */
.product-tabs {
  border: none;
  background-color: var(--bs-tertiary-bg);
  border-radius: 8px 8px 0 0;
  padding: 6px 6px 0 6px;
  gap: 4px;
}

.product-tabs .nav-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--bs-gray-600);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 10px 16px;
}

.product-tabs .nav-link:hover {
  color: var(--theme-accent);
}

.product-tabs .nav-link.active {
  background-color: #fff;
  color: #222;
  border-bottom: 2px solid var(--theme-dark);
}

.product-tab-content {
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.product-tab-content .tab-pane {
  margin-bottom: 0 !important;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.tag-badge {
  display: inline-block;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-gray-600);
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
}

.tag-badge:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

.product-thumb {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-thumb:hover {
  border-color: var(--theme-accent);
  box-shadow: 0 6px 16px rgba(34, 154, 200, 0.18);
  transform: translateY(-2px);
}

.product-thumb .image {
  text-align: center;
}

.product-thumb .image a:hover {
  opacity: 0.8;
}

.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}

.product-thumb .description h4 {
  font-weight: bold;
}

.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-gray-600);
  line-height: 38px;
  text-align: center;
}

.product-thumb .button button:hover {
  color: #fff;
  background-color: var(--theme-accent);
  text-decoration: none;
  cursor: pointer;
}

.product-thumb .button button + button {
  border-left: 1px solid var(--bs-border-color);
}

@media (min-width: 960px) {
  .product-list .product-thumb {
    display: flex;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 75%;
    position: relative;
  }
  .product-list .product-thumb .button {
    border-left: 1px solid #ddd;
    width: calc(100% - 15px);
    margin-left: 15px;
  }
}
.rating .fa-stack {
  width: 20px;
}

.rating .fa-star {
  color: #999;
  font-size: 15px;
}

.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}

.rating .fa-star + .fa-star {
  color: #E69500;
}

/* product list */
.price {
  color: #444;
}

.price-new {
  font-weight: 600;
}

.price-old {
  color: #dc512c;
  text-decoration: line-through;
}

.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}

/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

.blog-thumb h4 {
  font-weight: bold;
}

.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}

.blog-thumb .image a:hover {
  opacity: 0.8;
}

.blog-thumb .description {
  padding: 15px;
}

/* Sezione di benvenuto in home (vedi patches/README.md "storefront-refresh"):
   prima la home era slideshow + una striscia di 3 loghi partner e basta,
   con un grande vuoto sotto su schermi alti (il contenuto reale era troppo
   corto — non un bug di layout, vedi la nota su #container più sopra).
   Aggiunta additiva: non tocca lo slideshow/i loghi già configurati da
   admin, aggiunge solo un blocco di testo introduttivo. */
.welcome-section {
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 20px;
  background-color: var(--bs-tertiary-bg);
  border-radius: 8px;
}

.welcome-section h2 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.welcome-section p {
  max-width: 640px;
  margin: 0 auto 20px auto;
  color: var(--bs-gray-600);
}

.welcome-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.welcome-highlight {
  font-weight: 600;
  color: #444;
}

.welcome-highlight i {
  color: var(--theme-accent);
  margin-right: 6px;
}

/* Categorie in evidenza in home (vedi patches/README.md "storefront-refresh"):
   sostituisce la striscia di loghi partner (Witway/OpenCart/BioTechUSA — un
   modulo "banner" di content_bottom, valido ma poco utile come primo
   contenuto della home) con un punto d'ingresso rapido al catalogo. Dati
   reali (prime 8 categorie di primo livello), non un ranking di popolarità
   inventato: nessuna metrica di vendita/vista prodotto disponibile senza
   query aggiuntive non ancora presenti in questo controller. */
.popular-categories h2 {
  text-align: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.popular-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.popular-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #444;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.popular-category-card i {
  font-size: 1.3rem;
  color: var(--theme-accent);
}

.popular-category-card:hover {
  color: #444;
  border-color: var(--theme-accent);
  box-shadow: 0 6px 16px rgba(34, 154, 200, 0.18);
  transform: translateY(-2px);
}

/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}

#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}

/* Pulsante di azione a fine form (pattern ".text-end > .btn-primary"
   ricorrente in tutto il sito: login, registrazione, resi, contatti, ecc.):
   spesso senza margine sotto, a ridosso di quello che viene dopo (su una
   pagina corta, il footer scuro) — vedi patches/README.md "storefront-refresh". */
.text-end .btn-primary {
  padding: 12px 28px;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Coupon "Applica"/"Rimuovi" (extension/opencart/checkout/coupon.twig): erano
   btn-primary + btn-danger fianco a fianco ma solo il primo prendeva le
   dimensioni della regola sopra (che è scoped a .btn-primary), risultando
   visivamente scompaiati. Classe dedicata invece di allargare la regola
   sopra a .btn-danger, che altrove (es. account/address_list.twig) è un
   bottone icona-soltanto in una cella di tabella. */
.btn-coupon-action {
  padding: 12px 28px;
  font-size: 1rem;
}

/* .coupon-actions: i due bottoni restavano sfasati verticalmente anche con
   dimensioni identiche — inline-block si allinea per baseline del testo, e
   glifi Font Awesome diversi (fa-tag vs fa-xmark) hanno baseline diverse.
   Flexbox con align-items:center allinea per box, non per baseline: fix
   definitivo indipendente dall'icona usata. */
.coupon-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Modali "Scegli" spedizione/pagamento (checkout/shipping_method.twig,
   checkout/payment_method.twig): di default Bootstrap le rende con un
   radio minuscolo e un'etichetta senza classe .form-check-label (quindi
   niente line-height/indent), risultato illeggibile — vedi patches/README.md.
   Riga intera cliccabile, testo più grande, bordo/hover per capire cosa si
   sta per scegliere. */
#modal-shipping .modal-title,
#modal-payment .modal-title {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-method-form .checkout-method-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  margin-top: 16px;
}

.checkout-method-form .checkout-method-group .method-icon {
  font-size: 1.2rem;
  color: var(--theme-accent);
}

.checkout-method-form .checkout-method-option {
  display: block;
  padding: 12px 16px 12px 44px;
  margin-bottom: 8px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  transition: border-color .15s ease, background-color .15s ease;
}

.checkout-method-form .checkout-method-option:hover {
  border-color: var(--theme-accent);
  background-color: #f8f9fa;
}

.checkout-method-form .checkout-method-option .form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.15em;
  margin-left: -28px;
  flex-shrink: 0;
}

.checkout-method-form .checkout-method-option .form-check-input:checked ~ .form-check-label {
  font-weight: 600;
}

.checkout-method-form .checkout-method-option:has(.form-check-input:checked) {
  border-color: var(--theme-accent);
  background-color: rgba(var(--bs-primary-rgb), .06);
}

.checkout-method-form .form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  cursor: pointer;
  width: 100%;
}

.checkout-method-form .form-check-label .method-icon {
  font-size: 1.3rem;
  width: 26px;
  text-align: center;
  color: var(--theme-accent);
  flex-shrink: 0;
}

/* Il wrapper è anche .text-end (serve altrove nel sito), quindi la regola
   generica ".text-end .btn-primary" sopra applica margin-bottom:20px solo ad
   "Applica" (btn-primary) e non a "Rimuovi" (btn-danger): il margine
   asimmetrico sballa il centraggio flex. Specificità maggiore per azzerarlo
   qui senza toccare la regola generica. */
.text-end.coupon-actions .btn-coupon-action {
  margin-bottom: 0;
}

/* Pulsante "Conferma Ordine" dell'estensione Stripe (a pagamento, codice
   non modificabile — vedi CLAUDE.md TODO): usa "pull-right", una classe di
   Bootstrap 3 inerte su questo sito (Bootstrap 5), quindi non risultava
   allineato a destra; la dimensione viene dal campo admin configurabile
   "button_class" (payment_stripe_button_class in oc_setting), rimasto al
   default "btn btn-primary" senza le dimensioni usate per gli altri
   pulsanti di conferma del sito. Qui solo CSS (mirato al wrapper univoco
   dell'estensione, non tocca nient'altro): allineamento + dimensione.
   L'icona invece è nel testo del pulsante lato oc_setting — vedi
   patches/README.md. */
#payment-buttons {
  display: flex;
  justify-content: flex-end;
}

#payment-buttons #button-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 1rem;
}

/* Pulsante "Indietro" (account/address, address_form, edit, forgotten,
   forgotten_reset, newsletter, password, payment_method, returns_form —
   stesso markup identico in tutti e 9, prima .btn-light generico senza
   icona) — stessa dimensione dei pulsanti primari a fine form. */
.btn-back {
  padding: 12px 28px;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Riga azioni scheda prodotto: wishlist + confronta a sinistra, quantità
   (con pulsanti +/-) e "Aggiungi al Carrello" a destra, tutti sulla stessa
   riga (vedi patches/README.md "storefront-refresh") — prima erano due
   blocchi separati verticalmente, con quantità a testo libero. flex-nowrap
   da solo non basta: senza min-width:0 un flex item non si restringe mai
   sotto la dimensione del proprio contenuto, quindi in uno spazio stretto
   (colonna laterale accanto all'immagine) il gruppo wishlist/confronta
   andava comunque a capo sopra al resto invece di restare sulla riga. */
.product-action-row > .btn-group {
  flex-shrink: 0;
}

.product-action-row .btn-group .btn {
  height: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

.product-action-row .qty-cart-group {
  min-width: 0;
  /* Bootstrap fa di .input-group un flex container con flex-wrap:wrap di
     default (pensato per lasciare che gli elementi vadano a capo su form
     larghi) — qui invece deve restare compatto su una riga sola quanto il
     resto della barra azioni, altrimenti il pulsante carrello va a capo
     sotto a -/quantità/+ appena lo spazio è stretto. */
  flex-wrap: nowrap;
}

.qty-cart-group #input-quantity {
  max-width: 64px;
  min-width: 44px;
  text-align: center;
  flex: 0 1 64px;
}

.qty-cart-group #button-quantity-down,
.qty-cart-group #button-quantity-up {
  flex-shrink: 0;
}

/* Nasconde le freccette native del type="number": ci sono già i pulsanti
   +/- dedicati, le freccette del browser sarebbero ridondanti e minuscole. */
#input-quantity::-webkit-outer-spin-button,
#input-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#input-quantity {
  -moz-appearance: textfield;
}

.qty-cart-group #button-cart {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Tendina "Il mio account" nell'header: icone allineate in colonna (larghezza
   fissa, così le etichette partono tutte alla stessa x) + righe un po' più
   larghe, per essere più leggibile/usabile al volo. */
.account-dropdown-menu {
  min-width: 200px;
  padding: 6px 0;
}

.account-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.account-dropdown-menu .dropdown-item i {
  width: 20px;
  margin-right: 8px;
  color: var(--theme-accent);
  text-align: center;
}

.account-dropdown-menu .dropdown-item:hover i {
  color: inherit;
}

/* Riga "Totale" nelle tabelle dei totali (mini-carrello, carrello, checkout)
   — prima identica alle altre righe (Totale Parziale, IVA), ora distinta con
   sfondo, bordo superiore in accento e importo in evidenza. */
.table-total {
  background-color: var(--bs-tertiary-bg);
}

.table-total td {
  font-size: 1.1em;
  border-top: 2px solid var(--theme-accent) !important;
}

.table-total td:last-child {
  color: var(--theme-accent);
  font-weight: 700;
}

/* Quantità nella riga del carrello: stessa logica +/- della scheda prodotto,
   ma più compatta perché condivide la riga con i pulsanti aggiorna/rimuovi. */
.cart-row-qty {
  max-width: 220px;
}

.cart-row-qty input[name="quantity"] {
  max-width: 50px;
  min-width: 40px;
  text-align: center;
  flex: 0 1 50px;
}

.cart-row-qty .qty-btn-minus,
.cart-row-qty .qty-btn-plus {
  flex-shrink: 0;
}