/**
 * Herbavis child theme — hand-written CSS for the handful of cases Tailwind
 * utilities can't reach (native <select> styling, third-party widgets not
 * covered by the tw- prefixed build, and reusable component mechanics like
 * the drawer below). Auto-loaded by PrestaShop's FrontController::setMedia()
 * as /assets/css/custom.css, priority 1000 (after theme.css and
 * tailwind.css) — safe to override ps_searchbar.css and any other module
 * stylesheet without !important, since it always loads last.
 */

/**
 * Fascia di ricerca (header.tpl, su tutte le pagine): classic's theme.css
 * ha ".search-widgets form input[type=\"text\"] { background:#f6f6f6 }"
 * con specificità (0,2,2) — batte la nostra utility .tw-bg-transparent
 * (0,1,0) sull'input, che quindi appare grigia invece che bianca come nel
 * .tpl. #search_widget è l'id del wrapper del nostro override
 * (modules/ps_searchbar/ps_searchbar.tpl), specificità (1,0,x): vince
 * sempre, nessun !important necessario.
 */
#search_widget input[type="text"] {
  background: #fff;
  color: inherit;
}

/**
 * Menu principale (modules/herbavis_menu/views/templates/hook/main-menu.tpl)
 * — barretta lime-500 sotto la voce, nascosta di default e a piena
 * larghezza sull'hover o quando la voce è quella corrente
 * (.herbavis-nav-link--current, calcolato server-side in
 * HerbavisMenuItem::getTree()/herbavis_menu.php). Su una classe dedicata
 * invece che via utility tw-after:* per restare leggibile: la stessa
 * regola serve su 3 punti diversi del template (Home + macro + stato
 * corrente), qui è una riga sola invece di ripetere la stessa lunga
 * lista di classi tre volte. Vedi screenshots/menu_ui.png per il
 * riferimento visivo (font, colori, spessore/gap della barretta).
 */
.herbavis-nav-link {
  position: relative;
}

/**
 * classic ha "#header a{color:#232323}" (specificità 1,0,1) che batte
 * la utility .tw-text-verde-900 (0,1,0) sulla voce di menu — stesso
 * meccanismo già visto per #search_widget sopra e per lo z-index del
 * drawer (vedi commento più sotto): serve una regola con almeno una
 * classe in più della loro, non serve l'id del contenitore specifico
 * (desktop/mobile), tanto la classe .herbavis-nav-link è unica al menu.
 */
#header .herbavis-nav-link {
  color: #14301F;
}

/* Stessa specificità richiesta per le sottovoci del dropdown (Pelle,
   Cellulite...): niente hover:/current via utility qui, .tw-text-* e
   hover:tw-text-* perdono comunque contro #header a. */
#header .herbavis-nav-sublink {
  color: #4A4F48;
}

#header .herbavis-nav-sublink:hover,
#header .herbavis-nav-sublink.herbavis-nav-sublink--current {
  color: #1B5E36;
}

#header .herbavis-nav-sublink.herbavis-nav-sublink--current {
  font-weight: 600;
}

/* Le voci non ancora collegate a una categoria reale restano visibili
   nel sottomenu, ma non fingono di essere link cliccabili. */
#header .herbavis-nav-sublink--disabled,
#header .herbavis-nav-sublink--disabled:hover {
  color: #87918a;
  cursor: not-allowed;
}

/* Il build Tailwind contiene già lg:group-hover:tw-block; queste regole
   dedicate rendono però il contratto del menu esplicito e aggiungono
   l'apertura da tastiera con :focus-within. */
@media (min-width: 992px) {
  #header .herbavis-nav-item:hover > .herbavis-nav-sub,
  #header .herbavis-nav-item:focus-within > .herbavis-nav-sub {
    display: block;
  }
}

/**
 * Stesso meccanismo di "#header a{color:#232323}" documentato sopra, sui
 * link della topbar scura (Servizio clienti, Reso e recesso, account/
 * accedi in header.tpl e ps_customersignin.tpl): la utility
 * .tw-text-footer-text (0,1,0) perde contro #header a (1,0,1), il testo
 * risultava quasi nero e illeggibile sullo sfondo verde-900. Limitata a
 * >=992px (stesso breakpoint lg: di Tailwind, vedi tailwind.config.js)
 * perché .account/.logout è lo STESSO nodo DOM spostato via JS anche
 * nella barra sticky mobile (vedi docblock in ps_customersignin.tpl), dove
 * il colore corretto resta quello scuro su sfondo chiaro — applicare
 * questa regola anche sotto 992px lo renderebbe illeggibile lì.
 */
@media (min-width: 992px) {
  #header .herbavis-topbar-link {
    color: #BFD2B4;
  }

  #header .herbavis-topbar-link:hover {
    color: #ffffff;
  }
}

.herbavis-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #8DB92E;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}

.herbavis-nav-link:hover::after,
.herbavis-nav-link--current::after {
  transform: scaleX(1);
}

/**
 * Drawer generico (menu mobile qui in fase 2; filtri e carrello lo
 * riusano nelle fasi successive con lo stesso markup: .herbavis-drawer >
 * .herbavis-drawer__overlay + .herbavis-drawer__panel, apertura via
 * classe .is-open). Vedi assets/js/herbavis.js per l'apertura/chiusura,
 * il focus trap e l'Esc.
 */
.herbavis-drawer {
  position: fixed;
  inset: 0;
  /* Root cause del bug "il drawer resta sotto l'header": classic imposta
     "#header{position:relative;z-index:999}" (themes/classic/assets/css/
     theme.css, non nostro) sul tag <header> che avvolge header.tpl. Il
     drawer viene riportato figlio diretto di <body> a runtime (vedi
     assets/js/herbavis.js, initDrawer) proprio per stare fuori
     dall'albero di #header, ma essendo suo FRATELLO nello stesso
     contesto di stacking, uno z-index:50 perdeva comunque contro il 999
     di #header — il pannello risultava tecnicamente aperto (visibility,
     transform, tutto corretto) ma dipinto SOTTO l'header, visibile solo
     scrollando o mai del tutto. 2000 sta sopra sia il 999 di #header sia
     l'intera scala z-index di Bootstrap usata da classic (max 1070, vedi
     stesso file: modali/tooltip/popover), quindi anche sopra eventuali
     modali del core aperti in pagina.
  */
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.herbavis-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.herbavis-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 48, 31, .35);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.2, .8, .2, 1);
}

.herbavis-drawer.is-open .herbavis-drawer__overlay {
  opacity: 1;
}

.herbavis-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background: #FBFAF6;
  box-shadow: 0 0 40px rgba(20, 48, 31, .18);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  /* Promuove il pannello a un proprio layer di compositing FIN DA SUBITO
     (non solo quando parte la transizione): bug noto di iOS Safari, un
     elemento position:fixed la cui visibility e transform cambiano
     insieme in un solo aggiornamento JS a volte non viene ridipinto nella
     posizione corretta finché l'utente non scrolla (il repaint del layer
     fixed resta "vecchio"). Vedi anche il reflow forzato in
     assets/js/herbavis.js (funzione open()). */
  will-change: transform;
}

.herbavis-drawer--left .herbavis-drawer__panel {
  left: 0;
  transform: translateX(-100%);
}

.herbavis-drawer--right .herbavis-drawer__panel {
  right: 0;
  max-width: 390px;
  transform: translateX(100%);
}

.herbavis-drawer.is-open .herbavis-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .herbavis-drawer__overlay,
  .herbavis-drawer__panel {
    transition: none;
  }
}

/**
 * Box "spedizione gratuita" nel drawer carrello: deve restare visibile
 * mentre si scorre la lista prodotti sotto. Non l'abbiamo tolto dal
 * flusso/DOM (vedi commento in cart-shipping-progress.tpl: deve restare
 * dentro .js-cart per l'ajax refresh su updateCart) — position:sticky
 * lo tiene ancorato in cima al SUO contenitore scrollabile
 * (.herbavis-drawer__panel > div.tw-overflow-y-auto in header.tpl) senza
 * spostare markup. position:fixed non serve qui: .herbavis-drawer__panel
 * ha una transform (slide-in, vedi sopra) che diventerebbe il suo
 * containing block comunque, quindi il risultato visivo sarebbe lo
 * stesso di sticky ma con più calcoli manuali su top/left/width.
 * Scoped a #herbavis-cart-drawer così la pagina carrello (che riusa lo
 * stesso .tpl) resta invariata.
 */
#herbavis-cart-drawer .herbavis-shipping-progress {
  position: sticky;
  top: 0;
  z-index: 1;
}

/**
 * Popup di verifica età al checkout (checkout/_partials/age-gate-modal.tpl,
 * assets/js/herbavis.js -> initAgeGate). z-index sopra al drawer (2000,
 * vedi .herbavis-drawer sopra e il commento su #header di classic che
 * batteva il vecchio z-index:50) — deve stare sopra a tutto, mai sotto
 * per errore come il drawer prima del fix. Niente overlay-click-per-chiudere
 * né bottone di chiusura: a differenza del drawer questo si chiude SOLO
 * confermando, di proposito (vedi herbavis_theme.php per il contesto
 * normativo).
 */
.herbavis-age-gate {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 48, 31, .55);
}

.herbavis-age-gate__panel {
  background: #FBFAF6;
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(20, 48, 31, .3);
}

/**
 * Link "Contattaci" nell'header di checkout (ps_contactinfo/nav.tpl,
 * hook displayNav1) — markup del modulo core, nessuna classe propria da
 * agganciare, quindi stile scoped sull'id del nostro header invece che
 * sull'anchor nudo (che altrimenti erediterebbe il blu di default).
 */
#herbavis-checkout-header #contact-link a,
#herbavis-checkout-header #contact-link span {
  color: inherit;
  text-decoration: none;
}

#herbavis-checkout-header #contact-link a:hover {
  color: #1B5E36;
  text-decoration: underline;
}

/**
 * Spazio per la barra sticky mobile in basso (id="herbavis-mobile-bar"),
 * cosi il footer e le ultime righe di contenuto non ci finiscono sotto.
 * L'altezza reale della barra è ~68px (48px area di tocco + padding);
 * 76px lascia un margine di sicurezza.
 */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 76px;
  }

  /**
   * Stesso motivo, stesso margine: due widget di terze parti si
   * agganciano direttamente a <body> con position:fixed e bottom:0 (non
   * dentro l'header, quindi fuori dal nostro markup) — il badge
   * WhatsApp (modules/whatsappchat, classe .whatsapp-badge, css proprio
   * con bottom:0) e la bolla Smartsupp (modules/smartsupp, iframe/div
   * iniettati via script esterno con stile inline, niente da editare
   * lato nostro). Senza questo alzamento finiscono esattamente sopra al
   * pulsante "Menu"/"Carrello" della barra sticky e ne intercettano i
   * click — bug segnalato dal cliente. !important perché il CSS di
   * whatsappchat può caricare dopo il nostro, e perché lo stile inline
   * di Smartsupp altrimenti vince sempre per specificità.
   */
  .whatsapp-badge {
    bottom: 76px !important;
  }

  div[data-testid="widgetButtonFrame"] {
    bottom: 76px !important;
  }

  /**
   * Durante l'apertura di qualunque drawer l'azione primaria è dentro il
   * pannello: i launcher flottanti di WhatsApp/Smartsupp hanno z-index
   * propri molto alti e altrimenti restano dipinti sopra menu e carrello.
   * visibility (non rimozione DOM) li ripristina automaticamente appena
   * initDrawer toglie la classe herbavis-drawer-open dal body.
   */
  body.herbavis-drawer-open .whatsapp-badge,
  body.herbavis-drawer-open div[data-testid="widgetButtonFrame"] {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /**
   * Stesso principio, terzo caso reale (18/08/2026): il banner cookie di
   * terze parti (modules/cookiesplus, #cookiesplus-modal, posizione
   * "bottom-left" impostata da back office — Configurazione del modulo,
   * non CSS nostro, vedi guida sez. 9.x) è anch'esso fixed/left:0/bottom:0
   * su mobile, nello stesso angolo del badge WhatsApp: finché il cliente
   * non accetta/chiude il banner, i due si sovrappongono e il badge
   * copre parte del testo/pulsante del banner (o viceversa) — segnalato
   * dal proprietario controllando la produzione. L'altezza del banner
   * dipende dal testo configurato, non è un valore fisso da poter
   * "scavalcare" con un bottom calcolato in anticipo: nascondere il
   * badge (stesso approccio del drawer sopra, mai una stima di altezza)
   * finché il banner è nel DOM è l'unico modo sicuro di evitarlo, a
   * prescindere dalla posizione scelta per il banner in un secondo
   * momento (bottom-left/right/center). :has() è supportato dai browser
   * mobile correnti (iOS Safari 15.4+, Chrome Android 105+); se sparisce
   * il supporto reintrodurrebbe la sovrapposizione, non un errore.
   */
  body:has(#cookiesplus-modal) .whatsapp-badge,
  body:has(#cookiesplus-modal) div[data-testid="widgetButtonFrame"] {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/**
 * .container di Bootstrap (classic) usa i suoi step responsive nativi
 * (540/720/960/1140/1320px). Il design vuole un'unica larghezza massima
 * coerente con header/footer (che sono fuori da .container) e lo stesso
 * padding pagina ovunque: 16px mobile, 40px da lg. Sostituiamo qui,
 * niente override dei layout .tpl di classic.
 */
.container {
  max-width: 1600px;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 992px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/**
 * Categoria (e liste che condividono layout-left-column): sidebar 248px +
 * contenuto, gap 36px, sidebar sticky. #left-column e #content-wrapper
 * sono fratelli diretti dentro .container nel layout condiviso — non
 * serve toccare quel .tpl, bastano questi selettori. :not(:empty) evita
 * di attivare la griglia sulle pagine (es. "Contatti") dove
 * #left-column non ha nulla dentro.
 *
 * Bug reale trovato dopo la segnalazione del cliente (pagina categoria
 * "tutta da sistemare"): la griglia sembrava applicata (display:grid
 * confermato via devtools) ma il contenuto usciva scambiato — il box
 * filtri (#left-column) finiva largo a destra, titolo+prodotti
 * (#content-wrapper) finivano stretti in basso a sinistra. Causa: nel
 * markup di layout-both-columns.tpl (esteso da layout-left-column.tpl)
 * .container ha TRE figli diretti, non due — <nav class="breadcrumb">
 * viene PRIMA di #left-column. Con solo 2 colonne esplicite e 3 item,
 * l'auto-placement di CSS Grid mette breadcrumb in riga 1/colonna 1,
 * #left-column in riga 1/colonna 2, e fa andare a capo #content-wrapper
 * in riga 2/colonna 1 (la colonna stretta) invece che accanto a
 * #left-column. La regola sotto forza il breadcrumb a occupare da solo
 * un'intera riga (span di entrambe le colonne), così l'auto-placement
 * mette correttamente #left-column e #content-wrapper fianco a fianco
 * nella riga successiva.
 */
@media (min-width: 992px) {
  .container:has(> #left-column:not(:empty)) {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 36px;
    align-items: start;
  }

  .container:has(> #left-column:not(:empty)) > .breadcrumb {
    grid-column: 1 / -1;
  }

  .container:has(> #left-column:not(:empty)) > #left-column,
  .container:has(> #left-column:not(:empty)) > #content-wrapper {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }

  .container:has(> #left-column:not(:empty)) > #left-column {
    position: sticky;
    top: 24px;
  }
}

/**
 * Pagina categoria: il fondo carta e lo scroller orizzontale delle
 * tipologie vengono definiti qui perché il primo deve battere #wrapper di
 * classic e il secondo richiede lo pseudo-elemento WebKit della scrollbar.
 * Il markup delle chip non usa le vecchie classi .subcategory-* di classic:
 * immagini, card e link azzurri non possono quindi rientrare nella cascata.
 */
body#category #wrapper {
  background: #EDEAE2;
}

/* Su mobile .container porta già i 16px del tema; il padding Bootstrap
   di #content-wrapper ne aggiungerebbe altri 15 (contenuto a 31px e chip
   incapaci di arrivare ai bordi). Lo azzeriamo solo nella categoria. */
@media (max-width: 991.98px) {
  body#category #content-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.herbavis-subcategories__scroller {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.herbavis-subcategories__scroller::-webkit-scrollbar {
  display: none;
}

/**
 * jQuery UI slider del facet prezzo (modules/ps_facetedsearch/_dev/front/
 * slider.js): traccia 2px bordo, riempimento attivo verde-700, maniglie
 * 14px bianche con bordo 2px verde-700. Selettori .ui-slider-* sono
 * generati dal widget, non dal nostro template.
 */
.herbavis-slider.ui-slider {
  position: relative;
  height: 2px;
  background: #E4E0D6;
  border-radius: 999px;
  margin: 12px 7px 20px;
}

.herbavis-slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: #1B5E36;
  border-radius: 999px;
}

.herbavis-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid #1B5E36;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
}

.herbavis-slider .ui-slider-handle:focus-visible {
  outline: 2px solid #1B5E36;
  outline-offset: 2px;
}

/**
 * Contatore attivo sul bottone "FILTRI" (barra sticky mobile categoria) —
 * aggiornato via JS (vedi herbavis.js), qui solo lo stato visibile.
 */
#herbavis-filters-count.is-visible {
  display: inline-flex;
}

/**
 * Stato di caricamento del bottone "AGGIUNGI AL CARRELLO" sulle card
 * (herbavis.js aggiunge/rimuove .is-loading sul submit del form; il
 * testo viene scambiato via data-loading-label, vedi lo stesso file).
 */
.herbavis-add-to-cart.is-loading {
  opacity: .7;
  pointer-events: none;
}

/* Il CSS legacy di ps_facetedsearch assegna ai link dentro .facet-label
 * una larghezza percentuale pensata per la sidebar desktop. Nel drawer
 * mobile quella regola riduceva i valori a pochi pixel ("1…", "50…"). */
#herbavis-filters-drawer #search_filters .facet .facet-label > a {
  display: block;
  width: auto;
  max-width: none;
  margin-top: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/**
 * blockwishlist (Vue) porta il suo CSS compilato: qui solo un reset di
 * dimensione/posizione sul contenitore che gli forniamo nella card
 * prodotto, per allinearlo al cerchio 34/30px del design senza toccare i
 * componenti del modulo.
 *
 * Il bottone che Vue renderizza dentro il nostro div (.wishlist-button-add,
 * classe generata a runtime, non nel .tpl) porta dal CSS del modulo:
 *  - width/height 2.5rem (40px) E min-width: 2.5rem — quest'ultima batte
 *    qualunque width:100% imposto dall'esterno (min-width vince sempre su
 *    width nel box model), quindi restava a 40px anche nel nostro cerchio
 *    30/34px;
 *  - position:absolute; top:.635rem; right:.635rem — pensato per stare in
 *    overlay sopra un'immagine prodotto grande (il contesto d'uso di
 *    default del modulo), tirava il bottone fuori dal flusso e dal
 *    centraggio flex del nostro wrapper, con offset fissi sbagliati per
 *    un cerchio così piccolo. Il selettore reale è
 *    ".products article .wishlist-button-add" (0,2,1) — più specifico di
 *    ".herbavis-wishlist-button .wishlist-button-add" (0,2,0): la sola
 *    proprietà position richiede !important per vincere (le altre,
 *    width/min-width/margin, si sovrascrivono già a parità di ordine di
 *    caricamento, vedi commento in cima al file);
 *  - margin-left su .wishlist-button-product (~20px), altro spostamento
 *    non voluto in questo contesto.
 * Tutti azzerati esplicitamente: non basta il solo reset width/height.
 */
.herbavis-wishlist-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature .herbavis-wishlist-button.thumbnail-container {
  position: absolute;
  margin: 0;
  box-shadow: none;
}

.herbavis-wishlist-button .wishlist-button,
.herbavis-wishlist-button .wishlist-btn {
  width: 100%;
  height: 100%;
}

.herbavis-wishlist-button .wishlist-button-add {
  position: static !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.herbavis-wishlist-button .wishlist-button-add i {
  font-size: 16px;
}

/**
 * Barra CTA sticky della scheda prodotto (catalog/product.tpl): sta
 * SOPRA la barra di navigazione sticky dell'header (#herbavis-mobile-bar,
 * ~68px), non al suo posto — due barre impilate su mobile, non una che
 * sostituisce l'altra. body.page-product ha padding-bottom maggiorato di
 * conseguenza (classe che PrestaShop applica da solo alle pagine
 * prodotto).
 */
.herbavis-product-sticky-cta {
  bottom: 68px;
}

@media (max-width: 991.98px) {
  body.page-product {
    padding-bottom: 152px;
  }
}

/**
 * Contenuto WYSIWYG (descrizione lunga, tab extraContent del modulo
 * Custom Product Tabs): tipografia coerente col resto del tema e liste
 * puntate con pallino lime — è così che il design distingue
 * "l'elenco benefici" dal corpo del testo, senza un campo dati separato.
 */
.tw-prose-herbavis :where(h2, h3, h4) {
  font-family: 'Newsreader', Georgia, serif;
  color: #14301F;
  margin-top: 1.5em;
  margin-bottom: .5em;
}

.tw-prose-herbavis :where(p) {
  margin: 0 0 1em;
}

.tw-prose-herbavis :where(a) {
  color: #1B5E36;
  text-decoration: underline;
}

.tw-prose-herbavis :where(ul) {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: grid;
  gap: .5em;
}

@media (min-width: 992px) {
  .tw-prose-herbavis :where(ul) {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5em;
  }
}

.tw-prose-herbavis :where(ul) :where(li) {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: #3D4A3B;
}

.tw-prose-herbavis :where(ul) :where(li)::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #8DB92E;
}

.tw-prose-herbavis :where(ol) {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

/**
 * cms/page.tpl (pagina "Consegna"/Spedizioni) mostra il nostro widget
 * shipping-rules.tpl SOPRA il contenuto reale della pagina CMS, che
 * contiene lo stesso orario di partenza scritto a mano in rosso
 * (color:#FF0000 inline, il "banner rosso" che il design vuole
 * sostituito) — testo del cliente, non riscritto, solo ridisegnato: mai
 * rosso puro nella palette del tema. Serve !important perché uno stile
 * inline batte qualunque regola esterna a parità di tutto il resto.
 */
.tw-prose-herbavis [style*="FF0000" i],
.tw-prose-herbavis [style*="red" i] {
  color: #3D4A3B !important;
}

/**
 * Stepper quantità nelle righe del carrello (drawer + pagina): l'input
 * .js-cart-line-product-quantity resta un <input type=number> semplice
 * nel nostro .tpl — è bootstrap-touchspin (inizializzato in
 * themes/classic/assets/js/theme.js su input[name="product-quantity-spin"],
 * verticalbuttons:true) a generare a runtime il wrapper
 * .bootstrap-touchspin e i due bottoni +/- impilati verticalmente
 * (.js-increase-product-quantity / .js-decrease-product-quantity dentro
 * .input-group-btn-vertical). Qui li portiamo in riga e li avviciniamo
 * alla pillola 34×36px del design.
 *
 * Verificato via computed style (headless Chrome) che le regole sotto non
 * bastavano da sole: classic/assets/css/theme.css ha selettori più
 * specifici sugli STESSI elementi, e su ogni proprietà in conflitto vince
 * chi ha più classi in specificità, non l'ordine di caricamento — quindi
 * qui non basta "css/tema caricato dopo vince", serve pareggiare (o
 * superare) la specificità di classic selettore per selettore:
 *  - ".bootstrap-touchspin input.form-control{height:2.5rem;width:3rem}"
 *    (0,2,1) batteva il nostro ".herbavis-cart-qty" (0,1,0): input a
 *    40×48px invece di 36×44px.
 *  - ".bootstrap-touchspin .input-group-btn-vertical>.btn{width:100%;
 *    max-width:100%}" (0,3,0) batteva il nostro ".btn-touchspin" (0,2,0):
 *    bottoni ridotti alla larghezza minima del table-cell (~22px) invece
 *    di 34px.
 *  - ".bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up/
 *    -down{border-radius:0}" (0,3,0) batteva il nostro raggio pillola.
 *  - ".bootstrap-touchspin .input-group-btn-vertical i{position:absolute;
 *    top:3px;left:5px;font-size:9px}" (0,2,1) lasciava l'icona minuscola
 *    e fuori centro nel bottone.
 *  - ".touchspin-up/-down::after{content:"\E5CE"/"\E5CF"}" (0,1,0):
 *    glyph Material Icons (font non caricato in questo tema) che compare
 *    accanto al nostro "+"/"−" iniettato via ::before — due segni per
 *    bottone. Va neutralizzato con content:none, non solo coperto.
 */
.herbavis-cart-qty {
  width: 44px;
  height: 36px;
  text-align: center;
  border: 1px solid #E4E0D6;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #14301F;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bootstrap-touchspin input.herbavis-cart-qty {
  height: 36px;
  width: 44px;
}

.herbavis-cart-qty::-webkit-outer-spin-button,
.herbavis-cart-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.bootstrap-touchspin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bootstrap-touchspin .input-group-btn-vertical {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
}

.bootstrap-touchspin .btn-touchspin {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4E0D6;
  background: #fff;
  color: #14301F;
  cursor: pointer;
}

.bootstrap-touchspin .input-group-btn-vertical .btn-touchspin {
  width: 34px;
  height: 36px;
  max-width: none;
  padding: 0;
  margin: 0;
  position: static;
}

.bootstrap-touchspin .btn-touchspin:hover {
  border-color: #14301F;
}

/**
 * :focus-visible invece del contorno blu di default del browser (fuori
 * posto sulla pillola del design, e su mobile restava "acceso" dopo il
 * tap dato che il bottone non riprende focus altrove nel drawer).
 */
.bootstrap-touchspin .btn-touchspin:focus {
  outline: none;
}

.bootstrap-touchspin .btn-touchspin:focus-visible {
  outline: 2px solid #1B5E36;
  outline-offset: 1px;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up,
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  border-radius: 999px;
  margin-top: 0;
}

.bootstrap-touchspin .input-group-btn-vertical i.touchspin-up,
.bootstrap-touchspin .input-group-btn-vertical i.touchspin-down {
  position: static;
  top: auto;
  left: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

/**
 * Il content:none deve pareggiare ".bootstrap-touchspin .input-group-
 * btn-vertical .touchspin-up/-down::after{content:"\E5CE"/"\E5CF"}" di
 * classic (0,3,0) — un selettore con TRE classi, non due: ".bootstrap-
 * touchspin i.touchspin-up::after" (0,2,1) da solo perde (il conteggio
 * classi vince sempre sul conteggio elementi), la piccola "^"/"v" restava
 * visibile accanto al nostro "+"/"−". Stesso tipo di errore già preso a
 * altre righe qui sopra (larghezza/raggio bottoni) — qui mancava ancora.
 */
.bootstrap-touchspin .input-group-btn-vertical i.touchspin-up::after,
.bootstrap-touchspin .input-group-btn-vertical i.touchspin-down::after {
  content: none;
}

.bootstrap-touchspin i.touchspin-up::before {
  content: '+';
  font-family: 'Archivo', sans-serif;
  font-style: normal;
}

.bootstrap-touchspin i.touchspin-down::before {
  content: '\2212';
  font-family: 'Archivo', sans-serif;
  font-style: normal;
}

/**
 * Stepper quantità nella scheda prodotto (product-add-to-cart.tpl): è il
 * nostro .herbavis-stepper con due bottoni +/- fatti a mano (vedi
 * initQuantityStepper in herbavis.js). Il problema è che
 * #quantity_wanted è anche il selettore che classic inizializza SEMPRE
 * con bootstrap-touchspin (themeSelectors.quantityWanted nel core, non
 * modificabile da template) — genera il suo <div class="input-group
 * bootstrap-touchspin"> con due bottoncini verticali +/- incastrati
 * proprio in mezzo ai nostri due bottoni, il "si ripetono due volte" del
 * bug report. display:contents fa sparire visivamente il wrapper di
 * touchspin lasciando l'<input> come figlio diretto del flex del nostro
 * stepper, senza disabilitare touchspin (che continua a gestire min/step
 * in background, inerte perché i suoi bottoni sono nascosti).
 */
.herbavis-stepper .bootstrap-touchspin {
  display: contents;
}

.herbavis-stepper .input-group-addon,
.herbavis-stepper .input-group-btn-vertical {
  display: none;
}

/**
 * L'<input>, oltre a diventare figlio diretto del flex qui sopra, prende
 * anche la classe "form-control" aggiunta a runtime da bootstrap-touchspin
 * — e classic.css ha ".bootstrap-touchspin input.form-control{height:
 * 2.5rem (40px); width:3rem}", più specifica (0,2,1) della nostra utility
 * .tw-h-[52px]/.tw-w-10 (0,1,0): l'input restava basso 40px contro i
 * bottoni 52px del design. !important perché la specificità di classic
 * qui batte anche un selettore scoped tipo ".herbavis-stepper input".
 */
.herbavis-stepper input {
  height: 52px !important;
  width: 40px !important;
}

/**
 * Checkout one-page: solo token (raggio, bordo, focus, tipografia degli
 * step), la logica del modulo checkout resta quella del core — non
 * tocchiamo checkout-process.tpl né gli step .tpl.
 */
.checkout-step input[type='text'],
.checkout-step input[type='email'],
.checkout-step input[type='tel'],
.checkout-step input[type='password'],
.checkout-step select,
.checkout-step textarea {
  border: 1px solid #E4E0D6;
  border-radius: 4px;
  font-family: 'Archivo', sans-serif;
}

.checkout-step input[type='text']:focus,
.checkout-step input[type='email']:focus,
.checkout-step input[type='tel']:focus,
.checkout-step input[type='password']:focus,
.checkout-step select:focus,
.checkout-step textarea:focus {
  outline: 2px solid #1B5E36;
  outline-offset: 2px;
  border-color: #1B5E36;
}

.checkout-step .step-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  color: #14301F;
}

/**
 * Esperimento layout scheda prodotto (post 1.1.11): su desktop galleria,
 * descrizione lunga e tab formano una colonna sinistra indipendente, così
 * i contenuti editoriali iniziano subito sotto le immagini senza aspettare
 * l'altezza del disclaimer/acquisto a destra. Su mobile il wrapper diventa
 * display:contents e gli order mantengono il flusso immagini → acquisto →
 * descrizione/tab, evitando un testo lungo prima del CTA.
 */
.herbavis-product-media-column {
  display: contents;
}

.herbavis-product-gallery {
  order: 1;
}

.herbavis-product-purchase {
  order: 2;
}

.herbavis-product-editorial {
  order: 3;
}

@media (min-width: 992px) {
  .herbavis-product-media-column {
    display: block;
    min-width: 0;
  }

  .herbavis-product-gallery,
  .herbavis-product-purchase,
  .herbavis-product-editorial {
    order: initial;
  }
}

/**
 * Tab "Dettagli del prodotto" (product.tpl, blocco product_tabs): il
 * pannello arriva da catalog/_partials/product-details.tpl con le classi
 * originali di classic "tab-pane fade" (tenute per compatibilità col
 * refresh ajax, #product-details è il selettore che core.js sostituisce
 * al cambio combinazione). Il tema usa <details> nativo per aprire/
 * chiudere i pannelli (niente Bootstrap tab.js, vedi commento in cima a
 * product.tpl) — ma "tab-pane" da solo, in classic.css, è
 * "display:none" fisso: senza il .active/.show che ci aggiungerebbe
 * Bootstrap, il pannello resta invisibile anche a <details> aperto. La
 * classe "fade" (stesso pannello) aggiunge un secondo problema identico:
 * "opacity:0" fisso finché non arriva ".show" — risultato, col solo fix
 * di display il pannello si LAYOUTta (spazio riservato, testo presente
 * nel DOM) ma resta trasparente, indistinguibile da vuoto. Unico
 * pannello dei tre che usa queste classi (extraContent/allegati non le
 * portano), quindi override scoped qui, non su tutti i .tab-pane/.fade
 * del sito.
 */
.tabs .tab-pane {
  display: block;
  opacity: 1;
}

.checkout-step .btn-primary,
.checkout-step .continue {
  background-color: #14301F;
  border-color: #14301F;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.checkout-step .btn-primary:hover,
.checkout-step .continue:hover {
  background-color: #1B5E36;
  border-color: #1B5E36;
}

/**
 * ps_sharebuttons (scheda prodotto): tolto su richiesta esplicita — resa
 * incoerente a seconda dei CSS caricati in pagina (a volte icona +
 * lettera sovrapposte, a volte cerchio vuoto). Da rivedere con un'icona
 * propria quando serve davvero; per ora l'intero blocco resta nascosto
 * (il modulo continua a girare, solo l'output visivo è spento).
 */
.social-sharing {
  display: none;
}

/**
 * Placeholder immagine — hero, reparti, banda liquori, foto storica: nel
 * design handoff sono tutte "da fornire" (vedi README, sezione Assets),
 * niente scatti reali ancora. Stesso trattamento dei mock del design
 * ("fondo a righe diagonali con etichetta monospace") invece di lasciare
 * un riquadro vuoto o un'immagine rotta: onesto sulle proporzioni,
 * sostituibile in un secondo momento con le foto vere senza toccare il
 * markup (basta rimpiazzare l'<img>/il div).
 */
.herbavis-placeholder {
  background-color: #F3F1EA;
  background-image: repeating-linear-gradient(45deg, #EAE7DE 0, #EAE7DE 1px, transparent 1px, transparent 13px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: #8A8F86;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.herbavis-placeholder--dark {
  background-color: #3A2716;
  background-image: repeating-linear-gradient(45deg, #4A3420 0, #4A3420 1px, transparent 1px, transparent 13px);
  color: #C9B8A6;
}

/**
 * Home, card reparto: su mobile il testo ha lunghezze diverse e il flex
 * row lasciava ogni miniatura subito dopo il suo contenuto, creando tre
 * allineamenti orizzontali diversi alle viewport intermedie. Il margine
 * automatico assorbe tutto lo spazio residuo e costruisce una sola
 * colonna immagini a destra; da desktop la card torna verticale e il
 * margine deve quindi essere azzerato.
 */
@media (max-width: 991.98px) {
  .herbavis-department-card__media {
    margin-left: auto;
  }
}

/**
 * text-wrap: pretty sull'H1 hero (evita vedove/orfane nel titolo, come
 * da design). Non un'utility Tailwind: con prefix: 'tw-' configurato, la
 * sintassi per proprietà arbitrarie ([text-wrap:pretty]) non viene
 * riconosciuta dal content scanner — verificato con una build isolata,
 * non per sospetto. Per un'unica proprietà statica una regola qui vale
 * più di uno style="" inline nel .tpl.
 */
.herbavis-text-pretty {
  text-wrap: pretty;
}

/**
 * Bug reale trovato durante il restyling della pagina categoria: la
 * griglia dei prodotti (products.tpl → productlist.tpl, classe
 * "products tw-grid tw-grid-cols-2 md:tw-grid-cols-3...") non si vedeva
 * mai — restava impilata su una colonna. Causa: classic/theme.css ha
 * "#products .products, .featured-products .products,
 * .product-accessories .products{display:flex}", specificità (1,1,0) —
 * batte ".tw-grid{display:grid}" (0,1,0) indipendentemente dall'ordine
 * di caricamento dei fogli di stile, perché la specificità viene prima
 * dell'ordine nella cascata. Stesso identico meccanismo già incontrato
 * nel checkout (vedi checkout.css). Qui basta pareggiare la specificità
 * strutturale invece di litigare con !important.
 */
#products .products {
  display: grid;
}

/**
 * Disclaimer normativo nella scheda prodotto (product-legal-notice.tpl).
 * È volutamente più evidente del testo descrittivo: il consumatore deve
 * incontrarlo prima della scelta variante/quantità e del pulsante acquisto.
 * La variante alcol usa un contrasto caldo e il badge 18+, senza affidare il
 * significato al solo colore. Vedi guida, sezione 6.4.
 */
.herbavis-product-legal-notice {
  margin: 20px 0 4px;
  padding: 18px;
  border: 2px solid #1B5E36;
  border-radius: 10px;
  background: #F4F8F2;
  box-shadow: 0 8px 24px rgba(20, 48, 31, .08);
  color: #2B2B28;
  font-family: 'Archivo', sans-serif;
}

.herbavis-product-legal-notice--alcohol {
  border-color: #9A3412;
  background: #FFF7ED;
  box-shadow: 0 8px 24px rgba(122, 59, 18, .10);
}

.herbavis-product-legal-notice__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.herbavis-product-legal-notice__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: #1B5E36;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.herbavis-product-legal-notice--alcohol .herbavis-product-legal-notice__badge {
  color: #9A3412;
}

.herbavis-product-legal-notice__eyebrow {
  margin: 0 0 2px;
  color: #5D685E;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.herbavis-product-legal-notice--alcohol .herbavis-product-legal-notice__eyebrow {
  color: #9A3412;
}

.herbavis-product-legal-notice__title {
  margin: 0;
  color: #14301F;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
}

.herbavis-product-legal-notice--alcohol .herbavis-product-legal-notice__title {
  color: #7A271A;
}

.herbavis-product-legal-notice__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.herbavis-product-legal-notice__health {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(122, 59, 18, .22);
}

.herbavis-product-legal-notice__health-title {
  display: block;
  margin-bottom: 5px;
  color: #14301F;
  font-size: 13px;
  font-weight: 700;
}

.herbavis-product-legal-notice__law {
  margin: 10px 0 0;
  color: #666A64;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre-line;
}

@media (max-width: 575.98px) {
  .herbavis-product-legal-notice {
    padding: 15px;
  }

  .herbavis-product-legal-notice__title {
    font-size: 19px;
  }
}

/* Immagine principale prodotto: classic/assets/css/theme.css contiene
   `.product-cover img{width:100%;height:auto}` (specificità 0,1,1, presente
   anche duplicata dentro una sua media query) che vince sempre sulla utility
   Tailwind `.tw-h-full{height:100%}` (specificità 0,1,0), indipendentemente
   dall'ordine di caricamento — stesso pattern già documentato in CLAUDE.md.
   Risultato: l'immagine (posizionata assoluta, pensata per riempire il box
   quadrato .product-cover con object-fit:cover) tornava ad altezza "auto"
   in base al proprio aspect ratio reale (le foto prodotto sono verticali,
   circa 3:4, non quadrate) invece di riempire il contenitore — con
   `.product-cover img{background:#fff}` di classic a dipingere di bianco
   l'area del box non coperta, il risultato visibile erano bande bianche
   sopra/sotto l'immagine su ogni scheda prodotto, più evidente su mobile
   dove .product-cover è a piena larghezza. Stessa specificità della regola
   di classic, caricata dopo: vince per ordine nella cascata, nessun
   !important necessario. */
.product-cover img {
  height: 100%;
}