/* ============================================
   Catalogo — stili guscio sopra Bootstrap 5.3
   Consuma i design-token semantici (ruoli Bootstrap) definiti nelle skin.
   Regole:
   - nessun colore hardcoded qui: solo var(--ruolo) e color-mix per le translucenze
     (niente hex/rgb inline, niente triplette --*-rgb: es. rgba->color-mix(... #000000/var(--bs-primary) X%, transparent));
   - l'accent è usato SOLO per sfondi/bordi/fill (+ --on-accent sui fill),
     mai come colore di testo: il testo usa sempre un ruolo neutro (--on-*).
   - il GUSCIO (navbar, hero/slider, pannello di ricerca, footer) non nomina il ruolo
     `dark` direttamente: passa dai token --cd-* del preset chrome, col fallback pari al
     default scuro storico. Così un cliente può avere guscio chiaro senza forkare questo
     file (theme.cardealer.chrome=light) e le skin esistenti restano identiche.
     Vedi assets/css/chrome/chrome-{dark,light}.css e doc BOOTSTRAP_THEME §chrome.
   ============================================ */

body {
  font-family: var(--cd-font-sans, 'Open Sans', Arial, sans-serif);
  color: var(--bs-body-color);
}

/* ===== SCALA Z-INDEX (una sola, semantica) ==================================
   Bootstrap 5.3: dropdown 1000 · sticky 1020 (è il layer di `.sticky-top`, quindi
   della navbar) · fixed 1030 · offcanvas-backdrop 1040 · offcanvas 1045 ·
   modal-backdrop 1050 · modal 1055 · popover 1070 · tooltip 1080.
   I token qui sotto si agganciano a quei layer invece di inventare numeri: prima
   c'erano otto valori sparsi (1010, 1030, 1044, 1045, 1060, 1080…) e la modale
   "Operativo come" stava sul layer dei TOOLTIP, sopra qualsiasi cosa.
   Ogni uso ripete il valore come fallback — area-riservata.css può essere caricato
   senza questo file. */
:root {
  --ar-z-rail: 2;                /* pannello sticky in-flow: solo sopra le card del contenuto */
  --ar-z-strip: 3;               /* striscia impersonazione: sopra il rail */
  --ar-z-sticky: 1010;           /* barre sticky interne: SOTTO la navbar (che è .sticky-top = 1020) */
  --ar-z-dropdown: 1030;         /* tendine (TomSelect): sopra le barre sticky, si aprono verso il basso */
  --ar-z-drawer-backdrop: 1040;  /* = offcanvas-backdrop */
  --ar-z-drawer: 1045;           /* = offcanvas */
  --ar-z-modal: 1060;            /* overlay hand-rolled: sopra una modale Bootstrap (1055), sotto popover/tooltip */
}

/* ===== HEADER / NAVBAR ===== */
.navbar-custom {
  background: var(--cd-nav-bg, var(--bs-dark));
  border-top: var(--cd-nav-accent-w, 0) solid var(--bs-primary);
  /* larghezza a token: sul guscio scuro resta 0 (nessun pixel in più rispetto a prima),
     sul chiaro è il filo che stacca la navbar dal contenuto */
  border-bottom: var(--cd-nav-border-w, 0) solid var(--cd-nav-border, transparent);
  box-shadow: var(--cd-nav-shadow, 0 2px 10px color-mix(in srgb, #000000 40%, transparent));
}
.navbar-custom .navbar-brand { display: flex; align-items: center; gap: 10px; }
/* Logo cliente in un BOX a dimensione fissa: l'altezza della navbar non deve dipendere
   dalle proporzioni del file caricato. I loghi in circolazione vanno da ~2:1 (quasi
   quadrato) a ~5.4:1 (marchio steso): vincolando la sola larghezza (com'era prima:
   width 200px) l'altezza variava da 37px a 101px, e con essa tutta la navbar.
   Qui il logo è contenuto in altezza E larghezza, `contain` preserva le proporzioni e
   letterboxa dentro il box invece di deformare. Per-cliente si rifinisce nella skin
   (es. `:root { --cd-logo-h: 56px; }` per un marchio quasi quadrato, che a parità di
   altezza occupa meno spazio orizzontale). */
.logo img {
  height: var(--cd-logo-h, 48px);
  width: auto;
  max-width: var(--cd-logo-max-w, 190px);
  object-fit: contain;
}
.logo-icon {
  width: 42px; height: 42px;
  background: var(--bs-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--bs-primary-on);
}
.logo-text { color: var(--cd-nav-fg, var(--bs-dark-on)); font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
.logo-text span { color: var(--cd-nav-fg, var(--bs-dark-on)); }
.navbar-custom .nav-link {
  color: var(--cd-nav-fg, var(--bs-dark-on)) !important;
  font-weight: 600;
  padding: 10px 16px !important;
  border-radius: 6px;
  transition: all 0.25s;
}
/* Su guscio chiaro il fill pieno d'accento è una macchia: il preto light porta
   --cd-nav-active-bg a transparent e segna lo stato con la sottolineatura. */
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  background: var(--cd-nav-active-bg, var(--bs-primary));
  color: var(--cd-nav-active-fg, var(--bs-primary-on)) !important;
  box-shadow: var(--cd-nav-active-shadow, none);
}
.navbar-toggler {
  border: none; color: var(--cd-nav-fg, var(--bs-dark-on));
  font-size: 22px;
  box-shadow: none !important;
}

/* ===== SLIDER (Bootstrap Carousel custom) ===== */
.carousel-item { height: var(--cd-hero-h, 460px); background: var(--cd-hero-bg, var(--bs-dark)); }
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  pointer-events: none;
}
.slide-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, #000000 var(--cd-hero-overlay-from, 55%), transparent) 0%,
    color-mix(in srgb, #000000 var(--cd-hero-overlay-to, 75%), transparent) 100%);
  pointer-events: none;
}
.carousel-control-prev,
.carousel-control-next {
  z-index: 5;
}
.slide-content {
  position: relative; z-index: 2;
  text-align: center; color: var(--cd-hero-fg, var(--bs-dark-on));
  padding: 70px 20px 0;
  max-width: 800px; margin: 0 auto;
}
.slide-content h1 {
  font-size: 42px; font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15; margin-bottom: 12px;
  text-shadow: 0 2px 12px color-mix(in srgb, #000000 60%, transparent);
}
.slide-content h1 em { color: var(--cd-hero-fg, var(--bs-dark-on)); font-style: normal; }
.slide-content p { font-size: 18px; color: var(--cd-hero-fg-muted, var(--bs-dark-on-muted)); }
.carousel-control-prev,
.carousel-control-next { width: 60px; opacity: 0.8; }
.carousel-indicators [data-bs-target] {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--cd-hero-fg, var(--bs-dark-on)) 40%, transparent);
}
.carousel-indicators .active {
  background: var(--bs-primary);
  transform: scale(1.25);
}

@media (min-width: 1400px) {
  .carousel-item { height: 60vh; min-height: var(--cd-hero-h, 460px); max-height: 720px; }
}

/* Hero senza revslider: .search-wrap si sovrappone allo slider con margin-top negativo,
   quindi quando lo slider manca il pannello di ricerca resterebbe "tagliato" sul bianco.
   Diamo all'hero una banda dello stesso colore della navbar (chrome scuro): se c'è uno
   slider il .carousel-item (460px) prevale e nulla cambia; se manca, resta questa banda
   minima su cui il pannello poggia, in continuità col colore della navbar. */
.hero-slider { background: var(--cd-hero-bg, var(--bs-dark)); min-height: var(--cd-hero-min-h, 240px); }

/* ===== FORM RICERCA - PANNELLO FLOTTANTE ===== */
.search-wrap {
  max-width: 1100px;
  margin-top: var(--cd-panel-overlap, -190px);
  position: relative; z-index: 10;
}
.search-panel {
  background: var(--bs-body-bg);
  border-radius: var(--cd-panel-radius, 16px);
  box-shadow: var(--cd-panel-shadow, 0 20px 50px color-mix(in srgb, #000000 35%, transparent));
  overflow: hidden;
  border-top: var(--cd-panel-accent-w, 5px) solid var(--bs-primary);
}
.search-panel .nav-tabs { border-bottom: 1px solid var(--bs-border-color); }
.search-panel .nav-tabs .nav-link {
  width: 100%;
  background: var(--bs-tertiary-bg);
  border: none;
  border-radius: 0;
  padding: 18px 12px;
  font-size: 15px; font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.25s;
}
.search-panel .nav-tabs .nav-link.active {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-bottom: 3px solid var(--bs-primary);
}
.search-panel .nav-tabs .nav-link:hover:not(.active) { background: color-mix(in srgb, var(--bs-tertiary-bg) 92%, var(--bs-body-color)); }

.panel-label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--bs-secondary-color); margin-bottom: 14px;
}

/* ── Variante compatta (guscio area riservata) ──────────────────────────────
   Nel guscio pubblico questo pannello è l'insegna d'ingresso e le sue misure sono giuste così:
   tab da 18px a tutta riga, campi da 14px con bordo doppio. Dentro l'area riservata la stessa
   ricerca è una barra di lavoro sempre presente sopra i risultati, e a quelle misure occuperebbe
   mezzo schermo. Tutto il blocco della compatta sta IN FONDO A QUESTO FILE: le regole base di
   tab, `.form-control` e wrapper TomSelect arrivano più sotto (sezione override) e, a parità di
   specificità, vince l'ultima scritta. */

/* Input ricerca rapida */
.search-panel .form-control,
.search-panel .form-select {
  padding: 14px;
  border: 2px solid var(--bs-border-color);
  border-radius: 10px;
}
.search-panel .form-control:focus,
.search-panel .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
/* .btn-cerca -> migrato a .btn.btn-primary.btn-lg (vedi bridge.css) */

/* Chip tipo veicolo → `btn btn-outline-secondary rounded-pill` (hook `.vchip`/`.ricerca-tab`).
   Lo stato selezionato usa `.active` (toggolato dal JS) → fill secondary via `.btn.active`. */

/* Step numerati */
.step { position: relative; }
.step-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--bs-primary); color: var(--bs-primary-on);
  font-size: 11px; font-weight: 800;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.step-num.off { background: var(--bs-border-color); color: var(--bs-secondary-color); }
.step .form-label {
  display: inline-flex;
  align-items: center;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--bs-secondary-color);
  margin-bottom: 8px;
  vertical-align: middle;
}

/* .btn-trova -> migrato a .btn.btn-primary.btn-lg.text-uppercase (vedi bridge.css) */

/* ===== CATALOGO ===== */
.section-head h2 {
  font-size: 32px; font-weight: 800;
  text-transform: uppercase;
}
.section-head h2 span { color: var(--bs-body-color); }
.section-head p { color: var(--bs-secondary-color); }

/* Superficie card → utility Bootstrap nel markup (bg-*border/rounded-3/shadow-sm).
   `.catalog-card` resta solo il "clip" condiviso (+ override overflow di .ad-veicoli).
   Sulle card CON hover (product-card, pr-bk, confronto-col) border+ombra restano bespoke:
   le utility Bootstrap sono !important e romperebbero il cambio bordo/ombra su hover. */

.catalog-card {
  overflow: hidden;
}

.product-card {
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  border-top: 2px solid var(--bs-primary);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px color-mix(in srgb, #000000 12%, transparent);
  border-color: var(--bs-primary);
}

/* Card famiglia (evidenza tipo=categorie): bordo tenue + lift + bordo oro su hover ereditati
   da .product-card (invariato). Qui SOLO l'accento specifico: la barra oro persistente in alto,
   in un'unica riga token-based (var(--bs-primary) → si ricolora da solo al cambio skin). Scoped
   su .category-card così le card articolo non la prendono; l'hover dei lati resta gestito dal
   framework, non da utility (le utility border sono !important e lo bloccherebbero). */
.category-card {
  border-top: 2px solid var(--bs-primary);
}
.category-card__media {
  --bs-aspect-ratio: 62%;
}
.product-img {
  height: 160px;
  background: var(--bs-body-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; color: var(--bs-secondary-color);
}
.product-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-brand {
  display: inline-block;
  background: var(--bs-secondary); color: var(--bs-secondary-on);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 4px;
}
.disp { font-size: 13px; font-weight: 600; color: var(--bs-success); }
.disp.no { color: var(--bs-danger); }
/* .btn-card -> migrato a .btn.btn-dark.btn-sm (vedi bridge.css) */

/* ===== STICKY FOOTER ===== */
/* Ancora il footer in fondo alla finestra anche quando il contenuto è più corto
   della viewport: altrimenti (es. pagine brevi come una lista corta o un empty
   state) sotto al footer resterebbe visibile lo sfondo del body. Vale per ogni
   pagina che estende _layouts/catalogo. body a colonna flex + margin-top:auto
   sul footer, che assorbe lo spazio libero spingendo il footer in basso senza
   dipendere dalla struttura del blocco contenuto della singola pagina. */
body { min-height: 100vh; display: flex; flex-direction: column; }

/* ===== FOOTER ===== */
.footer-custom {
  background: var(--cd-footer-bg, var(--bs-dark));
  color: var(--cd-footer-fg, var(--bs-dark-on-muted));
  /* Filo superiore a token (0 sul guscio scuro, dove il distacco lo fa il nero). Serve sui
     gusci chiari, e in particolare nell'area riservata: quel layout ha `bg-light` sul body,
     quindi footer e pagina finirebbero sulla stessa superficie. */
  border-top: var(--cd-footer-border-w, 0) solid var(--cd-footer-border, transparent);
  padding: 48px 0 0;
  margin-top: auto;
}
.footer-custom h4 {
  color: var(--cd-footer-heading, var(--bs-dark-on));
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer-custom h4::after {
  content: "";
  display: block;
  width: 32px; height: 3px;
  background: var(--bs-primary);
  margin-top: 8px;
  border-radius: 2px;
}
.footer-custom a {
  color: var(--cd-footer-fg, var(--bs-dark-on-muted));
  text-decoration: none;
  transition: color 0.2s;
}
.footer-custom a:hover { color: var(--cd-footer-heading, var(--bs-dark-on)); }
.footer-bottom {
  border-top: 1px solid var(--cd-footer-border, color-mix(in srgb, var(--bs-dark-on) 12%, transparent));
  text-align: center;
  padding: 18px;
  font-size: 13px;
  color: var(--cd-footer-fg, var(--bs-dark-on-muted));
  margin-top: 30px;
}

/* ===== RESPONSIVE EXTRA ===== */
@media (min-width: 1600px) {
  .slide-content { max-width: 950px; }
  .slide-content h1 { font-size: 54px; }
  .slide-content p { font-size: 21px; }
}
@media (max-width: 991px) {
  .search-wrap { margin-top: var(--cd-panel-overlap-md, -150px); }
}
@media (max-width: 575px) {
  /* su schermo stretto il logo divide la riga col toggler: box più piccolo, sempre a token */
  .logo img { height: var(--cd-logo-h-sm, 38px); max-width: var(--cd-logo-max-w-sm, 150px); }
  .slide-content h1 { font-size: 28px; }
  .carousel-item { height: var(--cd-hero-h-sm, 420px); }
  .search-wrap { margin-top: var(--cd-panel-overlap-sm, -200px); }
  .search-panel .nav-tabs .nav-link { font-size: 13px; padding: 14px 8px; }
}

/* ===========================================================
   OVERRIDE GUSCIO / FORM RICERCA (ex catalogo-overrides.css del consumer)
   Patch a search-panel, TomSelect e dropdown navbar. Caricate dopo le regole
   base per vincere a parità di specificità; gli !important restano dov'erano.
   =========================================================== */
:root {
  --bs-scroll-height: 30vh;
}
/* Fondo pagina distinto dalle superfici: sul guscio chiaro il preset lo porta a un
   off-white, così card/pannelli bianchi hanno un confine anche senza ombre marcate.
   Fallback = --bs-body-bg, cioè il comportamento di sempre sul guscio scuro. */
body {
  background: var(--cd-page-bg, var(--bs-body-bg));
}

/* --- Search-panel: la tendina TomSelect non deve essere tagliata ---
   Il design mette overflow:hidden sul pannello (per gli angoli): questo clippa la
   dropdown. La rendiamo visibile e arrotondiamo gli angoli alti dei tab estremi. */
.search-panel { overflow: visible !important; }
.search-panel .nav-tabs .nav-item:first-child .nav-link { border-top-left-radius: var(--cd-panel-radius, 16px); }
.search-panel .nav-tabs .nav-item:last-child .nav-link { border-top-right-radius: var(--cd-panel-radius, 16px); }

/* --- TomSelect (marca/modello/versione/codice): identico all'input ANNO (.form-control) --- */
.ts-dropdown-content {
  max-height: 35vh;
}
.search-panel .ts-wrapper.ricerca-field { padding: 0; border: none; background: transparent; min-height: 0; }
.search-panel .ricerca-field.ts-wrapper .ts-control,
.search-panel .ricerca-field.ts-wrapper.single.input-active .ts-control {
  background: var(--bs-body-bg) !important;
  border: 2px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  color: var(--bs-body-color);
  font-family: inherit;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  flex-wrap: nowrap;
  overflow: hidden;
}
.search-panel .ricerca-field.ts-wrapper.focus .ts-control {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
}
.search-panel .ricerca-field.ts-wrapper.disabled { opacity: 0.5; }
.search-panel .ricerca-field.ts-wrapper .ts-control > input,
.search-panel .ricerca-field.ts-wrapper .ts-control .item {
  font-family: inherit;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--bs-body-color) !important;
}
.search-panel .ricerca-field.ts-wrapper .ts-control > input::placeholder { color: var(--bs-secondary-color) !important; }
.search-panel .ricerca-field.ts-wrapper .ts-control .item { white-space: nowrap; text-overflow: ellipsis; }

/* chevron coerente con i select (sostituisce quello di app.css).
   Nota: il colore vive dentro un data-URI SVG, dove le CSS var non sono interpolabili;
   #6b6b6b corrisponde al ruolo --on-surface-muted. */
.search-panel .ricerca-field.ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b6b6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  padding-right: 34px !important;
}

/* campo codice: l'input riempie il controllo (non ha chip) e resta cliccabile.
   TomSelect copia le classi dell'input originale sul wrapper → .ricerca-field--code. */
.search-panel .ricerca-field--code.ts-wrapper .ts-control > input { min-width: 2rem !important; flex: 1 1 auto !important; width: auto !important; }

/* --- Cascata: Modello/Versione restano GRIGI finché non si seleziona il campo precedente.
   Il JS (search-vehicle-autocomplete.js) fa .lock()/.unlock() sui TomSelect; qui rendiamo
   visibile lo stato locked (grigio) e spegniamo lo step-num corrispondente. --- */
.search-panel .ricerca-field.ts-wrapper.locked .ts-control {
  background: var(--bs-tertiary-bg) !important;
  cursor: not-allowed;
}
.search-panel .ricerca-field.ts-wrapper.locked .ts-control > input,
.search-panel .ricerca-field.ts-wrapper.locked .ts-control .item { color: var(--bs-secondary-color) !important; }
.search-panel .ricerca-field.ts-wrapper.locked.single .ts-control { opacity: 0.85; }
/* step-num "off" (grigio) quando il campo del medesimo .step è locked */
.search-panel .step:has(.ricerca-field.ts-wrapper.locked) .step-num { background: var(--bs-border-color) !important; color: var(--bs-secondary-color) !important; }

/* dropdown: piena visibilità, stile coerente */
.search-panel .ricerca-field.ts-wrapper .ts-dropdown {
  border: 2px solid var(--bs-primary);
  border-radius: 10px;
  background: var(--bs-body-bg);
  margin-top: 4px;
  z-index: var(--ar-z-dropdown, 1030);
  box-shadow: 0 10px 30px color-mix(in srgb, #000000 18%, transparent);
}
.search-panel .ricerca-field.ts-wrapper .ts-dropdown .option { color: var(--bs-body-color); font-size: 1rem; }
.search-panel .ricerca-field.ts-wrapper .ts-dropdown .option.active,
.search-panel .ricerca-field.ts-wrapper .ts-dropdown [data-selectable].active {
  background: var(--bs-primary); color: var(--bs-primary-on);
}

/* --- Navbar: dropdown chiari, indipendenti dal preset chrome (su guscio chiaro il
       bordo d'accento in testa li stacca dalla navbar, come sul sito di riferimento) --- */
.navbar-custom .dropdown-menu {
  border: none;
  border-top: var(--cd-nav-accent-w, 0) solid var(--bs-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, #000000 18%, transparent);
}
.navbar-custom .dropdown-item.active, .navbar-custom .dropdown-item:active { background: var(--bs-primary); color: var(--bs-primary-on); }
.navbar-custom .dropdown-item:hover { background: var(--bs-primary);
  color: var(--bs-primary-on); }

/* --- Tutte le ALTRE tendine (switch di profilo nella barra contestuale, lingua, e qualunque
       `.dropdown-menu` fuori dalla navbar): la voce selezionata era il BLU LETTERALE di Bootstrap
       (`.dropdown-item.active` compila `#0d6efd`, non `var(--bs-primary)`), unico blu su una skin
       rossa o oro — l'utente lo vede come un errore di vestizione, ed è quello che è.
       Si vestono le variabili invece dei selettori: restano `.dropdown-item` di Bootstrap, e lo
       stato attivo parla la lingua della skin. L'hover resta il neutro di Bootstrap: in una lista di
       profili il fondo pieno d'accento su OGNI riga sotto il mouse griderebbe più della voce scelta.
       Fondo TENUE e testo -text-emphasis, non il pieno d'accento: è la stessa grammatica con cui in
       area riservata si accende una riga scelta (indirizzo, vettore, modo dell'import, riga marcata
       negli ordini), e regge su ogni skin — col pieno, il bianco su rosso AVS sta a 4.37:1, sotto
       l'AA, e su una skin dal primary chiaro (oro) sparirebbe del tutto. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--bs-dropdown-link-active-bg);
  color: var(--bs-dropdown-link-active-color);
}

/* Avatar tondo con iniziali — classe GENERICA (sola dimensione). Forma, colori,
   anello di stato e posizionamento del badge si fanno con le utility Bootstrap nel
   markup (rounded-circle, bg-light text-dark, border border-2 border-primary,
   position-absolute top-100 start-100 translate-middle, ecc.). */
.avatar { width: 34px; height: 34px; font-size: .78rem; }

/* ---- Modale "Operativo come" (overlay hand-rolled, coerente col drawer) ----
   Qui in style.css (non in area-riservata.css) perché il trigger vive nella
   navbar condivisa: la modale dev'essere disponibile ovunque compaia la navbar.
   Solo meccanica/posizionamento: colori e superfici via utility Bootstrap nel markup. */
.ar-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ar-z-modal, 1060);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
}
.ar-modal[hidden] { display: none; }
.ar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}
.ar-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin-top: 3.5rem;
  max-height: calc(100dvh - 5rem);
  animation: ar-modal-in .18s ease-out both;
}
/* Modale da form (due colonne): 520px sta stretto per un modulo con più campi. Più larga = meno
   righe di campi e meno andate a capo nei chip/hint, quindi *più bassa*: su un form lungo è
   l'altezza il problema, non la larghezza. Per lo stesso motivo qui il margine superiore è ridotto
   rispetto alla modale base (che è corta e sta bene staccata dal bordo). */
.ar-modal-dialog-lg {
  max-width: 860px;
  margin-top: 2rem;
  max-height: calc(100dvh - 3.5rem);
}
@keyframes ar-modal-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ar-modal-dialog { animation: none; }
}
.ar-impersona-results {
  max-height: 45vh;
  overflow-y: auto;
}
body.ar-modal-open { overflow: hidden; }

/* ── Widget "Confronta" in navbar ───────────────────────────
   Vive nella navbar condivisa (catalogo + area riservata), perciò sta qui in
   style.css e non in ricerca.css: i layout che caricano solo style.css (es. area
   riservata) devono comunque dimensionare la dropdown e le thumb. */
.confronto-nav { position: relative; }
/* Contatore navbar → `badge text-bg-primary rounded-pill` (id #confronto-badge conservato). */
.confronto-drop { width: 300px; padding: 8px; }
.confronto-drop__loading,
.confronto-drop__empty { padding: 10px; margin: 0; font-size: 0.85rem; color: var(--bs-secondary-color); text-align: center; }
.confronto-drop__row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--bs-border-color); }
.confronto-drop__thumb { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; }
.confronto-drop__thumb img { max-width: 100%; max-height: 100%; }
.confronto-drop__meta { display: flex; flex-direction: column; min-width: 0; }
.confronto-drop__code { font-weight: 700; font-size: 0.8rem; }
.confronto-drop__brand { font-size: 0.72rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confronto-drop__x { margin-left: auto; border: none; background: none; font-size: 1.1rem; line-height: 1; color: var(--bs-secondary-color); cursor: pointer; }
.confronto-drop__x:hover { color: var(--bs-body-color); }
.confronto-drop__foot { display: flex; gap: 8px; margin-top: 8px; }
/* "Confronta ora"/"Svuota" → `btn btn-primary flex-fill` / `btn btn-outline-secondary flex-fill`
   (hook classi conservate). Solo lift + freccia che scorre restano bespoke. */
.confronto-drop__go i,
.confronto-drop__clear i { transition: transform 0.15s; }
.confronto-drop__go:hover,
.confronto-drop__clear:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, #000000 15%, transparent);
}
.confronto-drop__go:hover i { transform: translateX(3px); }
.confronto-drop__x { transition: color 0.15s; }

.ribbon-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.ribbon-right {
  text-align: center;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 4px 0;
  position: absolute;
  top: 15px;
  right: -25px;
  width: 100px;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ribbon-left {
  text-align: center;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 4px 0;
  position: absolute;
  top: 15px;
  left: -25px;
  width: 100px;
  transform: rotate(315deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ══════════════════════════════════════════════════════════════════════════
   RICERCA COMPATTA (guscio area riservata) — barra di lavoro, non insegna
   In fondo al file di proposito: le regole base (tab, `.search-panel .form-control`,
   `.search-panel .ricerca-field.ts-wrapper .ts-control`) hanno la stessa specificità, quindi
   deve vincere l'ultima scritta. Le regole con `.nav-item:first-child` ripetono la forma a 5
   classi dell'override degli angoli, che altrimenti vincerebbe sul raggio dei pill.
   ══════════════════════════════════════════════════════════════════════════ */

/* Selettore di modalità: la STESSA fascia di tab del pannello pubblico — grigia, tab attivo bianco
   con la sottolineatura d'accento — solo più corta e larga quanto il testo invece che divisa in tre.
   È la testata della card: se pesa meno dei campi che introduce, la card sembra sfondata in alto.
   (Provata prima una versione a pastiglie in un vassoio: leggibile, ma spaesata rispetto al
   pannello pubblico e senza un grammo di colore.) */
.search-panel--compatta .nav-tabs {
  /* Il pannello ha `overflow: visible` per non tagliare le tendine TomSelect: la fascia si
     arrotonda da sé, altrimenti spunta squadrata sopra gli angoli della card (raggio interno =
     rounded-4 meno il bordo da 2px). */
  border-radius: calc(1rem - 2px) calc(1rem - 2px) 0 0;
  background: var(--bs-tertiary-bg);
}
.search-panel--compatta .nav-tabs .nav-link {
  width: auto;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  letter-spacing: .3px;
  gap: .5rem;
}
/* Lo stato attivo (fondo bianco + filo d'accento sotto) arriva dalla regola base: qui si corregge
   solo l'angolo dell'ultimo tab, che nel pannello flottante è anche l'angolo della card mentre qui
   sta in mezzo alla fascia. Stessa forma a 5 classi dell'override, altrimenti vince quello. */
.search-panel--compatta .nav-tabs .nav-item:first-child .nav-link {
  border-top-left-radius: calc(1rem - 2px);
}
.search-panel--compatta .nav-tabs .nav-item:last-child .nav-link {
  border-top-right-radius: 0;
}

/* Campi e bottone: altezza di lavoro (~44px) invece dei 14px + bordo doppio del pannello
   d'ingresso, ma non minuti — devono reggere il confronto con la fascia dei tab. */
.search-panel--compatta .form-control,
.search-panel--compatta .form-select,
.search-panel--compatta .ricerca-field.ts-wrapper .ts-control {
  padding: .625rem .875rem;
  border-width: 1px;
}
.search-panel--compatta .ricerca-field.ts-wrapper .ts-control {
  border-width: 1px !important;
  padding: .625rem .875rem !important;
}
.search-panel--compatta .ricerca-field.ts-wrapper.single .ts-control {
  background-position: right 12px center !important;
  padding-right: 30px !important;
}
.search-panel--compatta .btn-primary {
  padding: .625rem 1.5rem;
}

/* Etichette e numeri di passo: sono l'onboarding del pannello d'ingresso ("prima la marca, poi il
   modello"). Qui la cascata la dicono già i placeholder ("Seleziona prima la marca") e lo stato
   grigio dei campi bloccati, mentre i pallini d'accento sarebbero altri quattro punti rossi.
   Il markup resta uno solo: la variante non duplica campi (gli id sono globali). */
.search-panel--compatta .step-num,
.search-panel--compatta .step .form-label {
  display: none;
}

/* Casella quantità: larghezza fissa perché è un numero di 1-3 cifre, e in un input-group
   crescerebbe fino a mangiare lo spazio del bottone "Aggiungi" — che è l'azione, non l'input.
   Classe generica (sola dimensione), e sta QUI e non in ricerca.css perché la usano sia le righe
   di lista sia la tabella del carrello: ricerca.css il guscio dell'area riservata lo carica solo
   sulle pagine di catalogo (`catalogoView`), style.css sempre. */
.qtybox { max-width: 64px; }

/* Campo numerico senza le frecce native: dove accanto ci sono già − e +, gli spinner sono un secondo
   comando per la stessa cosa (e in Chrome compaiono e spariscono col puntatore, spostando il testo).
   Classe generica: vale per qualunque campo quantità affiancato dai suoi bottoni. */
.no-spin { -moz-appearance: textfield; appearance: textfield; }
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Bridge: lo stato DISABLED dei bottoni pieni ───────────────────────────────────────────────
   Il bridge in `core/app.css` rimappa `--bs-btn-bg/-hover-/-active-` sui token di skin ma NON
   `--bs-btn-disabled-*`, che restano quelli compilati da Bootstrap: un `btn-primary` disabilitato
   diventava **#0d6efd**, cioè su skin-avs un bottone rosso si accendeva BLU appena disabilitato (visto
   sul «Aggiungi» del dettaglio, che si disabilita per un attimo a conferma avvenuta).

   Sta qui e non in `app.css` perché quello è autogenerato: `catalogo/style.css` è l'ultimo foglio
   caricato (dopo skin), quindi è il posto giusto per una correzione di ponte. Il disabilitato è la
   TINTA SMORZATA del bottone, non un grigio di sistema: chi guarda deve riconoscere il bottone che
   sta aspettando. Si riusano gli stessi token del bottone acceso e l'attenuazione la fa l'opacità che
   Bootstrap applica già (`--bs-btn-disabled-opacity: .65`): schiarire il fondo con un `color-mix` verso
   il bianco lasciava il testo bianco sopra un rosso pallido, cioè ~2:1 di contrasto — con l'opacità
   fondo e testo sbiadiscono insieme e il rapporto resta quello del bottone acceso. */
.btn-primary   { --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary-on); }
.btn-secondary { --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary-on); }
.btn-success   { --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success-on); }
.btn-info      { --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info-on); }
.btn-warning   { --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning-on); }
.btn-danger    { --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger-on); }
.btn-dark      { --bs-btn-disabled-bg: var(--bs-dark); --bs-btn-disabled-border-color: var(--bs-dark); --bs-btn-disabled-color: var(--bs-dark-on); }

/* ---------------------------------------------------------------------------
   QUANTITÀ — pastiglia con due tasti tondi
   ---------------------------------------------------------------------------
   Il gruppo `input-group` di prima (due rettangoli grigi ai lati di un campo bianco, ognuno con la
   propria cifra del passo dentro) metteva in fila QUATTRO numeri — «−4  8  +4» — dove ce n'è uno
   solo da leggere, ed era il controllo più rumoroso della riga per il dato che non è il più
   importante. Qui il contenitore è uno: una pastiglia, il valore al centro, e due tasti tondi che
   si leggono come tasti e non come caselle.

   Il PASSO esce dai bottoni e diventa una didascalia sotto la pastiglia («× 4»): dentro i bottoni
   era una cifra a fianco di un'altra cifra, e obbligava a stamparlo anche dove vale 1 per non
   sfalsare le larghezze da una riga all'altra. Fuori, i tasti sono sempre tondi e sempre uguali,
   quindi la didascalia può comparire SOLO dove la regola esiste davvero — cioè dove si vende a
   confezioni — e sparire dove non dice niente.

   Larghezza fissa (non `w-100`): la corsia cresce con la finestra, il controllo no. Un campo da tre
   centimetri per due cifre non è più comodo, è solo più grande; l'avanzo resta margine ai lati.

   Sta in `catalogo/style.css` e non in `area-riservata.css` perché lo stesso controllo serve alle
   righe di lista e alla scheda articolo, che vivono anche nel guscio PUBBLICO: è l'unico foglio
   caricato da tutte e tre le pagine. Taglia `-sm` per le corsie strette della lista, dove il gruppo
   vale metà di una colonna da ~226px. */
/* Larghezza dettata dal CONTENUTO, non fissa: il gruppo è due tasti tondi più il campo, e una
   larghezza imposta lasciava dentro un vuoto bianco intorno al numero (nelle righe di lista e nella
   scheda articolo si vedeva a occhio). Il campo ha una misura sua, generosa quanto basta a tenere
   dentro una quantità a quattro-cinque cifre senza tagliarla. */
.qta-gruppo { width: fit-content; gap: .125rem; }
/* L'anello di fuoco sta sulla PASTIGLIA e non sul campo: il campo dentro è senza bordo e senza
   ombra (è la pastiglia a fare da cornice), quindi da tastiera senza questo non si vedrebbe dove si
   è finiti. */
.qta-gruppo:focus-within {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.qta-tondo {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  font-size: .8125rem;
  /* Tondini nella tinta d'accento fin da riposo: sono i due appigli del controllo, e a fondo neutro
     si leggevano come decorazione. Coppia `-bg-subtle` / `-text-emphasis`, cioè la stessa che
     Bootstrap garantisce leggibile in tutte le skin — non `--bs-primary` come colore del testo, che
     su una skin con primary chiaro sarebbe illeggibile. Al passaggio si scurisce solo il fondo. */
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-bg: var(--bs-primary-bg-subtle);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-bg: var(--bs-primary-border-subtle);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-bg: var(--bs-primary-border-subtle);
  --bs-btn-active-border-color: transparent;
}
/* Il campo prende quello che avanza fra i due tasti. `min-width: 0` perché un `input` ha una
   larghezza intrinseca (`size`) che senza questo impedisce al flex di stringerlo. */
.qta-valore { flex: 0 0 auto; width: 4rem; min-width: 0; line-height: 1.75rem; }

/* Taglia ridotta per le righe di lista: stessa grammatica, meno ingombro. */
/* Variante che RIEMPIE la corsia (righe di lista, scheda articolo, confronto): lì il gruppo sta in
   una griglia accanto ad «Aggiungi», e un controllo largo quanto il suo contenuto lasciava un vuoto
   bianco fra sé e il bordo della cella — due bottoni sotto allineati e questo no. A riempire è il
   CAMPO, non i tondi: gli appigli restano della misura del dito, cresce lo spazio per le cifre. */
.qta-gruppo-piena { width: 100%; }
.qta-gruppo-piena .qta-valore { flex: 1 1 auto; width: auto; }

.qta-gruppo-sm .qta-tondo { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; font-size: .75rem; }
.qta-gruppo-sm .qta-valore { width: 2.75rem; line-height: 1.5rem; font-size: .9375rem; }


/* Tabelle a colonne fisse. Bootstrap non esprime `table-layout` né le larghezze di colonna, e
   senza di esse una tabella che ricarica il proprio contenuto (il carrello: un netto che compare,
   uno sconto che se ne va, una descrizione più lunga) riallinea tutte le colonne ad ogni render.
   Classi generiche e non un blocco "carrello": la stessa esigenza l'ha qualsiasi tabella viva.
   `min-width` sta a parte perché serve solo dentro un `.table-responsive`, dove la tabella deve
   scorrere invece di comprimere le colonne fino a renderle illeggibili. */
.table-fixed { table-layout: fixed; }
.table-minw-56 { min-width: 56rem; }

/* Un gradino sotto `.fs-6` (1rem): Bootstrap chiude la scala lì, e una didascalia dentro una cella
   da 6rem a 1rem non ci sta. Generica: vale per qualunque testo di servizio in poco spazio. */
.fs-7 { font-size: .75rem; }

/* Scala di larghezze in rem per `<col>`/`<th>`: le utility `w-*` di Bootstrap sono percentuali
   (w-25, w-50, …) e su una colonna che deve tenere un importo o un badge non bastano. */
.w-3rem { width: 3rem; }
.w-4rem { width: 4rem; }
.w-5rem { width: 5rem; }
.w-6rem { width: 6rem; }
.w-7rem { width: 7rem; }
.w-8rem { width: 8rem; }
.w-11rem { width: 11rem; }
.w-10rem { width: 10rem; }