/* COPERTURA DEL ROSSO DI MARCHIO — generato, non si modifica a mano.
 *
 *     python tools/genera_copertura_vesti.py
 *
 * Ogni regola qui sotto ha lo STESSO selettore di una regola di `app.css` che
 * tinge col rosso del marchio, e ne ripete la specificita': vince perche' si
 * carica dopo. Le variabili le mette il foglio della veste; questo file non
 * ne dichiara nessuna, e da solo non fa niente.
 *
 * ⚠️ Il rosso degli ERRORI (`--bs-danger`) non e' qui, ed e' voluto: un
 * messaggio di errore deve restare rosso anche sulla veste verde.
 *
 * Regole coperte: 79. Sorgente: `shared/dist/app.css`.
 */

a { color:var(--tema-primario) }
a:hover { color:var(--tema-primario-scuro) }
.form-check-input:checked { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.form-check-input[type=checkbox]:indeterminate { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.form-range::-webkit-slider-thumb { background-color:var(--tema-azione) }
.form-range::-webkit-slider-thumb:active { background-color:var(--tema-azione-scura) }
.form-range::-moz-range-thumb { background-color:var(--tema-azione) }
.form-range::-moz-range-thumb:active { background-color:var(--tema-azione-scura) }
.btn-primary { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.btn-primary:disabled,
.btn-primary.disabled { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.btn-outline-primary { color:var(--tema-azione); border-color:var(--tema-azione) }
.btn-outline-primary:hover { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.btn-outline-primary:disabled,
.btn-outline-primary.disabled { color:var(--tema-azione) }
.btn-link { color:var(--tema-primario) }
.btn-link:hover { color:var(--tema-primario-scuro) }
.dropdown-item:hover,
.dropdown-item:focus { color:var(--tema-primario) }
.dropdown-item.active,
.dropdown-item:active { color:var(--tema-primario) }
.nav-link:hover,
.nav-link:focus { color:var(--tema-primario) }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { color:var(--tema-primario); border-color:var(--tema-primario) }
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { background-color:var(--tema-azione) }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color:var(--tema-primario) }
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link.active { color:var(--tema-primario) }
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus { color:var(--tema-primario) }
.page-link:focus { color:var(--tema-primario-scuro) }
.page-item.active .page-link { background-color:var(--tema-azione) }
.alert-primary { color:var(--tema-primario) }
.progress-bar { background-color:var(--tema-azione) }
.list-group-item.active { background-color:var(--tema-azione); border-color:var(--tema-azione) }
.list-group-item-primary { color:var(--tema-primario) }
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus { color:var(--tema-primario) }
.list-group-item-primary.list-group-item-action.active { background-color:var(--tema-primario); border-color:var(--tema-primario) }
.link-primary { color:var(--tema-primario) }
.link-primary:hover,
.link-primary:focus { color:var(--tema-primario) }
.text-primary { color:var(--tema-primario) !important }
.display-404 { text-shadow:-0.0625rem 0 var(--tema-primario),0 .0625rem var(--tema-primario),.0625rem 0 var(--tema-primario),0 -0.0625rem var(--tema-primario) }
div.code-toolbar>.toolbar button { color:var(--tema-primario) !important }
div.code-toolbar>.toolbar button:hover { background-color:var(--tema-primario) }
.form-switch .form-check-input:checked { background-color:var(--tema-azione); box-shadow:0 .375rem .875rem -0.3rem var(--tema-azione) }
.was-validated .form-check-input:valid:checked,
.was-validated .form-check-input.is-valid:checked { border-color:var(--tema-azione); background-color:var(--tema-azione) }
.form-check-input:checked~.form-option-label { border-color:var(--tema-azione); color:var(--tema-azione) }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active,
.btn-primary.show { border-color:var(--tema-azione-scura); background-color:var(--tema-azione-scura) }
.btn-wishlist:hover { color:var(--tema-primario) }
.btn-video:hover { background-color:var(--tema-primario) }
.dropdown-menu li:hover>.dropdown-item { color:var(--tema-primario) }
.dropdown-menu .active>.dropdown-item { color:var(--tema-primario) }
.nav-tabs .nav-link.active::before { background-color:var(--tema-primario) }
a.nav-link:hover .media-tab-media { color:var(--tema-primario) }
.nav-link.active .media-tab-media,
.nav-link.active:hover .media-tab-media { border-color:var(--tema-primario); background-color:var(--tema-primario) }
.nav-link.active .media-tab-title,
.nav-link.active:hover .media-tab-title { color:var(--tema-primario) !important }
.nav-link-style:hover { color:var(--tema-primario) }
.active>.nav-link-style,
.nav-link-style.active { color:var(--tema-primario) }
.navbar-tool .navbar-tool-label { background-color:var(--tema-azione) }
.navbar-light .nav-item:hover .nav-link:not(.disabled),
.navbar-light .nav-item:hover .nav-link:not(.disabled)>i { color:var(--tema-primario) }
.navbar-light .nav-item.active .nav-link:not(.disabled)>i,
.navbar-light .nav-item.show .nav-link:not(.disabled)>i,
.navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled)>i,
.navbar-light .nav-item.active .nav-link:not(.disabled),
.navbar-light .nav-item.show .nav-link:not(.disabled),
.navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled) { color:var(--tema-primario) }
.topbar-light .topbar-text>i,
.topbar-light .topbar-link>i { color:var(--tema-primario) }
.topbar-dark .topbar-text>i,
.topbar-dark .topbar-link>i { color:var(--tema-primario) }
.breadcrumb-item>a:hover { color:var(--tema-primario) }
.entry-navigation-link:hover { color:var(--tema-primario) }
.list-group-item-primary.active { background-color:var(--tema-primario) !important; border-color:var(--tema-primario) }
.tns-carousel [data-nav].tns-nav-active { background-color:var(--tema-azione) }
.steps-dark .step-item.active .step-count,
.steps-dark .step-item.active .step-progress { background-color:var(--tema-azione) }
.steps-light .step-item.active .step-count,
.steps-light .step-item.active .step-progress { background-color:var(--tema-azione) }
.testimonial .testimonial-mark { background-color:var(--tema-primario) }
.widget-categories .accordion-button { color:var(--tema-primario) }
.widget-categories .accordion-button:hover { color:var(--tema-primario) }
.widget-list-link:hover { color:var(--tema-primario) }
.active>.widget-list-link { color:var(--tema-primario) }
.widget-product-title:hover>a { color:var(--tema-primario) }
.btn-tag.active { border-color:var(--tema-azione); background-color:var(--tema-azione) }
.range-slider-ui .noUi-connect { background-color:var(--tema-azione) }
.product-title>a:hover { color:var(--tema-primario) }
.product-gallery-thumblist-item.active { border-color:var(--tema-primario) }
.blog-entry-title>a:hover { color:var(--tema-primario) }
.offcanvas-expand .offcanvas-body .active>.widget-list-link { border-left-color:var(--tema-primario) }
.js-action-favorite-button .icon-on { color:var(--tema-primario) }
.swal2-styled.swal2-confirm { background-color:var(--tema-azione) !important; border:1px solid var(--tema-azione) !important }
.toast .btn-close { color:var(--tema-primario) }
.pagination .page-item.active .page-link { border-color:var(--tema-azione); color:var(--tema-azione) }

/* --- la pastiglia della categoria scelta ----------------------------- */
/* ⛔ Restava rossa in tutte e tre le vesti: `app.css` la tinge con
   `.nav-pills .nav-link.active`, che pero' sul sito non e' il selettore che
   vince. Misurato sul rendering vero, non dedotto dal foglio. */
.nav-link.rounded-pill.active,
.nav-link.rounded-pill.active:hover,
.nav-link.rounded-pill.active:focus {
  background-color: var(--tema-azione) !important;
  border-color: var(--tema-azione) !important;
  color: #fff !important;
}

/* --- il pallino del carrello ----------------------------------------- */
.navbar-tool-label { background-color: var(--tema-azione) !important; }

/* --- le utility di colore -------------------------------------------- */
/* ⚠️ Con `!important`: le utility di Bootstrap ce l'hanno, e senza non
   verrebbero coperte. E' il motivo per cui il simbolo € restava rosso. */
.text-primary { color: var(--tema-primario) !important; }
.bg-primary { background-color: var(--tema-azione) !important; }
.border-primary { border-color: var(--tema-primario) !important; }
.badge.bg-primary { background-color: var(--tema-azione) !important; }

/* --- il telefono: quello che vale per TUTTE le vesti ------------------ */
/* ⛔ Le vesti devono venire su bene sul telefono per come sono fatte, non
   perche' qualcuno ci ha messo una pezza dopo. Qui stanno le poche cose che
   valgono per tutte; il resto lo fa ogni veste nel proprio foglio. */

/* La barra delle categorie scorre col dito — quello e' voluto — ma il suo
   limite era scritto con l'ALTEZZA al posto della larghezza (`100vh`): su un
   telefono valeva 852px su uno schermo da 420, quindi non limitava piu'
   niente e la pagina scorreva lateralmente di 2px. Misurato in produzione il
   26 ago 2026.
   ⚠️ Il sorgente e' gia' corretto in `styles/custom/_user.scss`: questa riga
   serve finche' `app.css` non viene ricompilato, e quando lo sara' dira'
   semplicemente la stessa cosa. */
@media (max-width: 767.98px) {
  .dj-category-related { max-width: calc(100vw - 3rem); }
}

/* Niente scorrimento laterale della PAGINA, in nessuna veste: su un telefono
   una pagina che balla di lato mentre si scorre in verticale sembra rotta. */
html, body { overflow-x: hidden; }

/* I bersagli sotto il pollice. 44px non e' scelto a occhio: e' la misura
   sotto la quale le linee guida di Apple e di Google danno il bersaglio per
   troppo piccolo. Su un catalogo sbagliare a premere vuol dire comprare la
   cosa sbagliata. */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-icon),
  .form-control,
  .form-select { min-height: 44px; }
}