/** Shopify CDN: Minification failed

Line 187:0 All "@import" rules must come first

**/
/* 
  Ronix Premium Theme - Dark Mode & Glassmorphism 
  Author: Antigravity AI
*/

/* 1. Global Color Palette Overrides */
:root {
  --color-base-background-1: #121212;
  --color-base-background-2: #1e1e1e;
  --color-base-text: #ffffff;
  --color-base-outline-button-labels: #ffffff;
  --color-base-accent-1: #e32219; /* Ronix Red */
  --color-base-accent-2: #ff4d40;
  
  --glass-bg: rgba(30, 30, 30, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --red-glow: 0 0 15px rgba(227, 34, 25, 0.5);
}

body {
  background-color: var(--color-base-background-1);
  color: var(--color-base-text);
  font-family: 'Inter', 'Roboto', sans-serif;
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* 2. Glassmorphism Header */
sticky-header {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
}

.header__menu-item, .header__icon {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  color: #fff !important;
  transition: all 0.3s ease;
}

.header__menu-item:hover, .header__icon:hover {
  color: var(--color-base-accent-1) !important;
  text-shadow: var(--red-glow);
  transform: translateY(-2px);
}

/* 3. Hero Banner Enhancements */
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%);
}

.banner__heading {
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

/* 4. Product Cards (Glassmorphism & Hover Micro-animations) */
.card-wrapper {
  background: var(--color-base-background-2);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.card-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: var(--red-glow), var(--glass-shadow);
  border-color: var(--color-base-accent-1);
}

.card__heading {
  color: #fff;
}

.price {
  color: var(--color-base-accent-1);
  font-weight: bold;
}

/* 5. Primary Buttons (Ronix Red Glow) */
.button, .button--primary {
  background-color: var(--color-base-accent-1) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(227, 34, 25, 0.3);
}

.button:hover, .button--primary:hover {
  background-color: var(--color-base-accent-2) !important;
  transform: translateY(-2px);
  box-shadow: var(--red-glow);
}

/* Outline Buttons */
.button--secondary {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

.button--secondary:hover {
  border-color: var(--color-base-accent-1) !important;
  color: var(--color-base-accent-1) !important;
  box-shadow: inset 0 0 10px rgba(227, 34, 25, 0.2);
}

/* 6. Product Page specific overrides */
.product__title h1 {
  font-size: 3.2rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.product-form__input input[type=radio]:checked+label {
  background-color: var(--color-base-accent-1);
  color: white;
  border-color: var(--color-base-accent-1);
  box-shadow: var(--red-glow);
}

.product-form__input label {
  background-color: var(--color-base-background-2);
  color: #ccc;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  transition: all 0.2s;
}

.product-form__input label:hover {
  border-color: #fff;
  color: #fff;
}

/* Table styling for specs */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background: var(--color-base-background-2);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--glass-border);
  color: #ddd;
}

th {
  color: #fff;
  font-weight: 600;
}

tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* 7. Mega Menu Enhancements (Solid Background, Premium Typography, Centered Layout) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

.mega-menu__content {
  background-color: #111111 !important; /* Solid dark background */
  border-top: 1px solid var(--glass-border);
  border-bottom: 3px solid var(--color-base-accent-1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  z-index: 999;
}

.mega-menu__list {
  display: flex !important;
  justify-content: center !important;
  gap: 4rem 8rem !important;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 4rem 2rem !important;
}

.mega-menu__link {
  font-family: 'Outfit', sans-serif !important;
  color: #a0a0a0 !important;
  transition: all 0.3s ease;
  font-size: 1.6rem !important; /* Increased from 1.4rem */
  font-weight: 400 !important;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

.mega-menu__link--level-2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  font-size: 2.2rem !important; /* Increased from 1.8rem */
  position: relative;
}

.mega-menu__link--level-2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-base-accent-1);
  transition: width 0.3s ease;
}

.mega-menu__list > li:hover .mega-menu__link--level-2::after {
  width: 100%;
}

.mega-menu__link:hover {
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateX(6px);
}

/* ============================================================
   IDTPRO LEGIBILITY FIXES (header, footer, Sami app block)
   ============================================================ */

/* ---- Header sticky: sfondo piu' solido per garantire leggibilita'
   del menu bianco anche su pagine con sfondo chiaro/banner ---- */
sticky-header,
sticky-header.shopify-section-header-sticky,
.shopify-section-header-sticky sticky-header {
  background: rgba(13, 13, 13, 0.92) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.header-wrapper {
  background: rgba(13, 13, 13, 0.92) !important;
}

/* Menu items con shadow per rinforzare la leggibilita' anche
   nei brevi istanti in cui il blur non e' ancora applicato.
   NOTA: .header__icon-label volutamente NON inclusa qui
   per non renderla visibile su desktop (deve restare nascosta
   come da design originale: si vedono solo le icone SVG). */
.header__menu-item,
.header__menu-item span,
.header__icon,
.ronix-trigger,
.ronix-trigger span {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Nasconde le label testuali "ACCOUNT"/"CARRELLO" sotto le icone
   su tutti i viewport (su mobile era gia' nascosto via base.css).
   Le label restano accessibili agli screen reader. */
.header__icon-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Garantisce icone header sempre ben visibili e dimensionate.
   base.css:2679 imposta `.header__icon .icon { fill: none }`
   che rende invisibili le SVG account/cart (hanno class="icon"
   sul tag <svg> stesso). Forziamo fill currentColor sui path. */
.header__icon {
  color: #ffffff !important;
}

.header__icon .svg-wrapper {
  width: 4.4rem !important;
  height: 4.4rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
}

.header__icon .svg-wrapper svg,
.header__icon svg.icon,
.header__icon .icon {
  width: 2.4rem !important;
  height: 2.4rem !important;
  fill: currentColor !important;
  color: #ffffff !important;
  /* NIENTE opacity/visibility/display !important qui:
     romperebbe il crossfade Dawn tra .icon-hamburger e
     .icon-close del menu drawer mobile (base.css:2856). */
}

.header__icon svg.icon path,
.header__icon .icon path,
.header__icon .svg-wrapper svg path {
  fill: currentColor !important;
}

.header__icon:hover {
  color: #ed1c24 !important;
}

.header__icon:hover .icon,
.header__icon:hover svg path {
  fill: currentColor !important;
}

/* ============================================================
   OVERRIDE ULTRA-SPECIFICO: tutte le SVG nell'header devono
   essere visibili. Copre account, cart, hamburger menu (mobile)
   e qualsiasi altra icona aggiunta da app.
   ============================================================ */

/* Match by ancestor (header / sticky-header / header-wrapper).
   NOTA: NON forzare opacity/visibility qui — Dawn usa
   `visibility:hidden; opacity:0` per il crossfade tra l'icona
   hamburger e l'icona X del menu drawer mobile (base.css:2856-2860).
   Forzare visibility:visible mostra entrambe sovrapposte. */
.shopify-section-header sticky-header svg,
.shopify-section-header sticky-header svg path,
.shopify-section-header .header-wrapper svg,
.shopify-section-header .header-wrapper svg path,
.shopify-section-header .header svg,
.shopify-section-header .header svg path,
header.header svg,
header.header svg path,
sticky-header svg,
sticky-header svg path,
.header-wrapper svg,
.header-wrapper svg path,
.header svg,
.header svg path {
  /* NON forzare fill: #ffffff sui path: rompe le svg
     che usano stroke (es. icona CATEGORIE in
     ronix-custom-navigation.liquid:76 ha stroke="currentColor"
     fill="none" per disegnare le 3 linee dell'hamburger).
     Mettiamo solo color, cosi' currentColor (fill o stroke
     che sia) diventa bianco. */
  color: #ffffff !important;
}

/* Per le SVG che usano fill="currentColor" (account, cart),
   forziamo esplicitamente fill per superare il `fill: none`
   di base.css:2682 */
.header__icon .icon[class*="icon-account"],
.header__icon .icon[class*="icon-cart"],
.header__icon .icon[class*="icon-account"] path,
.header__icon .icon[class*="icon-cart"] path {
  fill: currentColor !important;
}

/* Match by icon class on svg (account, cart, hamburger, close, search) */
/* Icone con fill="currentColor" (account, cart): forziamo
   esplicitamente fill bianco. NON includiamo qui icone che
   usano stroke (l'icona CATEGORIE custom, hamburger native,
   close): per quelle basta color:white e currentColor fa
   il suo lavoro su stroke. */
svg.icon-account,
svg.icon-account path,
svg.icon-cart,
svg.icon-cart path,
svg.icon-cart-empty,
svg.icon-cart-empty path,
svg.icon-search,
svg.icon-search path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

svg.icon-hamburger,
svg.icon-close {
  color: #ffffff !important;
}

/* Hamburger menu icon su mobile: solo colore, niente forzature
   su opacity/visibility/display (la logica show/hide di Dawn
   tra hamburger e close usa visibility+opacity per il transition) */
.header__icon--menu,
.header__icon--menu .icon,
.header__icon--menu svg,
.header__icon--menu svg path {
  color: #ffffff !important;
  fill: currentColor !important;
}

.header__icon--menu svg {
  width: 2.4rem !important;
  height: 2.4rem !important;
}

/* Garantisce che svg-wrapper non collassi a 0 (cause comune
   di icone "invisibili" pur essendo nel DOM) */
.header__icon .svg-wrapper {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

/* Hover state: rosso Ronix coerente, mai trasparente */
.header__icon:hover,
.header__icon:focus,
.header__icon--menu:hover,
.header__icon--menu:focus {
  color: #ed1c24 !important;
}

.header__icon:hover svg,
.header__icon:hover svg path,
.header__icon--menu:hover svg,
.header__icon--menu:hover svg path {
  fill: #ed1c24 !important;
  color: #ed1c24 !important;
}

.cart-count-bubble {
  background-color: #ed1c24 !important;
  color: #ffffff !important;
}

.header__heading-link {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ---- Footer: forza testo chiaro indipendentemente dal
   color scheme assegnato ---- */
.footer.gradient,
.footer {
  --color-foreground: 255, 255, 255 !important;
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.footer h2,
.footer h3,
.footer h4,
.footer .footer-block__heading {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700;
}

.footer p,
.footer li,
.footer span,
.footer .rte,
.footer .footer-block__details-content,
.footer .copyright__content {
  color: rgba(255, 255, 255, 0.78) !important;
}

.footer a,
.footer .footer-block__details-content .list-menu__item--link,
.footer .copyright__content a,
.footer .list-menu__item--link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}

.footer a:hover,
.footer .footer-block__details-content .list-menu__item--link:hover,
.footer .copyright__content a:hover {
  color: #ed1c24 !important;
}

.footer .list-menu__item--active {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.footer .newsletter-form__field-wrapper input,
.footer input[type="email"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.footer .newsletter-form__field-wrapper input::placeholder,
.footer input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.footer .field__label {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer .footer__list-payment .icon,
.footer .list-payment__item img,
.footer .list-payment__item svg {
  filter: brightness(1.05);
}

/* ---- Sami app block: previene icone SVG/X giganti senza
   dimensioni che esplodono al font-size del container ---- */
.shopify-app-block svg:not([width]):not([height]),
.shopify-app-block button > svg:only-child,
[id*="sami"] svg:not([width]):not([height]),
[class*="sami"] svg:not([width]):not([height]),
[id*="sca-app"] svg:not([width]):not([height]),
[class*="sca-app"] svg:not([width]):not([height]),
[class*="wholesale"] svg:not([width]):not([height]) {
  max-width: 24px !important;
  max-height: 24px !important;
  width: auto;
  height: auto;
}

/* Stepper / wizard icons: spesso dimensionate via em e
   diventano enormi su tema con scale aumentato */
.shopify-app-block .step-icon,
.shopify-app-block .wizard-step,
.shopify-app-block [class*="step"] svg,
.shopify-app-block [class*="icon"]:not([class*="icon-wrapper"]) {
  max-width: 48px !important;
  max-height: 48px !important;
}

/* Close / dismiss buttons (X) - dimensione ragionevole */
.shopify-app-block button[aria-label*="lose" i] svg,
.shopify-app-block button[aria-label*="hiudi" i] svg,
.shopify-app-block [class*="close"] svg,
.shopify-app-block [class*="dismiss"] svg {
  width: 20px !important;
  height: 20px !important;
}

/* ---- Pagina prodotto: description / specifiche tecniche.
   La description del prodotto contiene tabelle/liste di specs
   che ereditano --color-foreground del color scheme (spesso
   scheme-1 = scuro), risultando illeggibili sul tema dark.
   Forziamo colori chiari su tutto il contenuto rich-text. ---- */
.product__description,
.product__description.rte {
  color: rgba(255, 255, 255, 0.92) !important;
}

.product__description p,
.product__description li,
.product__description span,
.product__description div,
.product__description dt,
.product__description dd,
.product__description em {
  color: rgba(255, 255, 255, 0.88) !important;
}

.product__description h1,
.product__description h2,
.product__description h3,
.product__description h4,
.product__description h5,
.product__description h6,
.product__description strong,
.product__description b {
  color: #ffffff !important;
  font-weight: 700;
}

.product__description a {
  color: #ff6b63 !important;
  text-decoration: underline;
}

.product__description a:hover {
  color: #ed1c24 !important;
}

/* Tabelle specs prodotto: sfondo scuro contrastato, testo bianco */
.product__description table {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.product__description table th,
.product__description table thead td {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: left;
}

.product__description table td {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.product__description table tr:hover td {
  background-color: rgba(255, 255, 255, 0.04);
}

.product__description table tr:last-child td {
  border-bottom: none !important;
}

/* Anche se le specs sono renderizzate come <dl> o liste */
.product__description dl,
.product__description ul,
.product__description ol {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Coperture extra per varianti di markup (Shopify rich text
   genera anche elementi senza tag specifici) */
.product__info-wrapper .rte,
.product__info-wrapper .rte *,
.product__info-container .rte,
.product__info-container .rte * {
  color: inherit !important;
}

.product__info-wrapper .rte p,
.product__info-wrapper .rte li,
.product__info-wrapper .rte td,
.product__info-wrapper .rte th,
.product__info-wrapper .rte span {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ============================================================
   FIX PREZZI CARD PRODOTTO (collection grid, search, related)
   component-card.css:477 imposta `.card-information > .price
   { color: rgb(var(--color-foreground)) }`. Il color scheme
   della sezione e' scheme-1 (text #121212 scuro): su tema dark
   il prezzo diventa nero su nero = invisibile. Forziamo colori
   visibili senza toccare la logica di rendering.
   ============================================================ */
.card-information .price,
.card-information .price__container,
.card-information .price__regular,
.card-information .price__sale,
.card-information .price-item,
.card__information .price,
.card__information .price__container,
.card__information .price__regular,
.card__information .price__sale,
.card__information .price-item,
.card-wrapper .price,
.card-wrapper .price-item,
.product-card-wrapper .price,
.product-card-wrapper .price-item,
.grid__item .card .price,
.grid__item .card .price-item {
  color: #ffffff !important;
}

/* Prezzo "regolare" (incluso il fallback "Prezzo su richiesta")
   in rosso Ronix per coerenza con tema */
.card-information .price-item--regular,
.card__information .price-item--regular,
.card-wrapper .price-item--regular,
.product-card-wrapper .price-item--regular {
  color: #ed1c24 !important;
  font-weight: 700 !important;
}

/* Prezzo barrato (compare_at_price) - leggibile ma de-enfatizzato */
.card-information s.price-item--regular,
.card__information s.price-item--regular,
.card-information .price--on-sale .price-item--regular {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: line-through;
}

/* Prezzo finale "sale" sopra il barrato */
.card-information .price-item--sale,
.card__information .price-item--sale,
.card-information .price-item--last {
  color: #ed1c24 !important;
  font-weight: 700 !important;
}

/* Nota volume pricing (es. "Da €X.XX") */
.card-information .card__information-volume-pricing-note,
.card__information .card__information-volume-pricing-note {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Caption sopra il prezzo (es. "A partire da") */
.card-information .caption-large,
.card__information .caption-large {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Unit price (es. "€X.XX/kg") */
.card-information .unit-price,
.card__information .unit-price {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   FIX PREZZI - VISIBILITA' AGGRESSIVA
   Le regole sopra mettono color #ed1c24, ma il prezzo era
   "appena visibile" (vedi screenshot utente): qualche regola
   con specificita' maggiore lo sovrascrive. Salviamo con
   selettori a specificita' MASSIMA + dimensioni forti.
   ============================================================ */
html body .card-wrapper .card-information .price,
html body .card-wrapper .card-information .price__container,
html body .card-wrapper .card-information .price__regular,
html body .card-wrapper .card-information .price-item,
html body .card-wrapper .card-information .price-item--regular,
html body .card-wrapper .card-information .price-item--last,
html body .card-wrapper .card-information .price-item--sale,
html body .card-wrapper .card-information span[samitaws-product-price],
html body .card-wrapper .card-information [samitaws-product-price],
html body .product-card-wrapper .card-information .price-item,
html body .product-card-wrapper .card-information .price-item--regular,
html body .grid__item .card-information .price-item,
html body .grid__item .card-information .price-item--regular {
  color: #ff4444 !important;
  font-weight: 800 !important;
  font-size: 1.7rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.3px;
}

@media screen and (min-width: 750px) {
  html body .card-wrapper .card-information .price-item,
  html body .card-wrapper .card-information .price-item--regular {
    font-size: 1.9rem !important;
  }
}

/* Prezzo barrato (compare_at_price) anche con specificita' alta */
html body .card-wrapper .card-information s.price-item,
html body .card-wrapper .card-information s.price-item--regular,
html body .card-wrapper .card-information .price--on-sale s.price-item--regular {
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  text-decoration: line-through;
  text-shadow: none;
}

/* "Prezzo su richiesta" - quando non c'e' prezzo reale,
   in italico bianco soft per coerenza */
html body .card-wrapper .card-information .price-item[style*="font-weight:600"] {
  color: #ffffff !important;
  font-style: italic;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  text-shadow: none;
  opacity: 0.85;
}

/* Container price stesso: visibile e con piccolo spacing */
html body .card-wrapper .card-information .price {
  margin-top: 0.6rem;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ============================================================
   REDESIGN FILTRI COLLECTION (chips eleganti, layout pulito)
   ============================================================ */

/* Container generale: gap pulito tra label "FILTRA:" e chips */
facet-filters-form .facets__form,
facet-filters-form .facets__form-vertical {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.8rem 1rem !important;
  padding: 1.2rem 1.6rem !important;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.5rem;
}

/* Label "FILTRA:" - bianco soft, ben leggibile */
.facets__heading,
.facet-filters__label,
.facets__heading.caption-large,
h2.facets__heading {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0.5rem 0 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

/* Singolo filtro = chip pill */
.facets__wrapper details,
.facets__wrapper .facets__disclosure,
.facets__form details.menu-opening,
.facets__form details {
  display: inline-block;
  position: relative;
}

.facets__disclosure summary,
.facets__summary,
details.facets__disclosure > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.6rem 1rem 0.6rem 1.2rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0.2px;
  min-width: 0 !important;
  height: auto !important;
}

.facets__disclosure summary:hover,
.facets__summary:hover,
details[open] > summary.facets__summary,
details[open] > .facets__summary {
  background: rgba(237, 28, 36, 0.15) !important;
  border-color: rgba(237, 28, 36, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

details[open] > .facets__summary,
details[open] > summary.facets__summary {
  background: rgba(237, 28, 36, 0.18) !important;
  border-color: #ed1c24 !important;
}

/* Chevron / freccia del summary */
.facets__summary .icon-caret,
.facets__disclosure summary svg,
.facets__summary svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-left: 0.3rem !important;
  fill: currentColor !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: transform 0.2s ease;
}

details[open] > .facets__summary svg,
details[open] > summary svg {
  transform: rotate(180deg);
}

/* Rimuove ::after default che a volte mostra una seconda freccia */
.facets__summary::after,
.facet-filters__summary::after {
  display: none !important;
  content: none !important;
}

/* Dropdown pannello del filtro */
.facets__display,
.facets__display-vertical {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 1rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 22rem;
}

.facets__list .facets__item label,
.facets__list .facets__item,
.facets__list label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.3rem !important;
}

.facets__list .facets__item label:hover,
.facets__list label:hover {
  color: #ed1c24 !important;
}

.facets__list .facets__item input[type="checkbox"] + label::before {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.facets__list .facets__item input[type="checkbox"]:checked + label::before {
  background: #ed1c24 !important;
  border-color: #ed1c24 !important;
}

/* Sort by */
.facet-filters__field-wrapper {
  margin-left: auto !important;
}

.facet-filters__field .select__select,
.facets__sort {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.5rem 3rem 0.5rem 1.2rem !important;
  font-size: 1.25rem !important;
  height: auto !important;
}

.facet-filters__field .select__select:hover,
.facets__sort:hover {
  border-color: rgba(237, 28, 36, 0.6) !important;
}

/* Product count */
.product-count,
.product-count__text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.3rem !important;
}

/* Pill "FILTRO ATTIVO" (active facets) */
.active-facets__button,
.active-facets__button--light {
  background: rgba(237, 28, 36, 0.2) !important;
  border: 1px solid #ed1c24 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  font-size: 1.2rem !important;
}

.active-facets__button:hover {
  background: rgba(237, 28, 36, 0.35) !important;
}

.active-facets__button-remove {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.2rem !important;
}

.active-facets__button-remove:hover {
  color: #ed1c24 !important;
}

/* ============================================================
   FIX BOTTONI QUANTITY (+/-) NEL CARRELLO (drawer + page)
   IMPORTANTE: NIENTE display/pointer-events forzati sui button
   altrimenti si rompe l'event listener JS (Dawn / quantity-input.js
   ascolta click sul <button> e fa stepUp/stepDown su <input>).
   Solo override visivi (colore, dimensioni, fill icona).
   ============================================================ */

/* Container .quantity: pill bordato chiaro */
cart-drawer .quantity,
cart-notification .quantity,
cart-items .quantity {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
}

/* Bottoni + / - : visual only, niente che blocchi i click */
cart-drawer .quantity__button,
cart-notification .quantity__button,
cart-items .quantity__button {
  color: #ffffff !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

cart-drawer .quantity__button:hover,
cart-notification .quantity__button:hover,
cart-items .quantity__button:hover {
  color: #ed1c24 !important;
  background: rgba(237, 28, 36, 0.12) !important;
}

cart-drawer .quantity__button.disabled,
cart-items .quantity__button.disabled,
cart-drawer .quantity__button:disabled,
cart-items .quantity__button:disabled {
  opacity: 0.35 !important;
}

/* Icona + e - visibile: ingrandiamo svg-wrapper (default 1rem
   da base.css:2087 troppo piccolo) e forza fill=currentColor */
cart-drawer .quantity__button .svg-wrapper,
cart-notification .quantity__button .svg-wrapper,
cart-items .quantity__button .svg-wrapper {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: #ffffff !important;
}

cart-drawer .quantity__button svg,
cart-notification .quantity__button svg,
cart-items .quantity__button svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  fill: currentColor !important;
  color: inherit !important;
}

cart-drawer .quantity__button svg path,
cart-notification .quantity__button svg path,
cart-items .quantity__button svg path {
  fill: currentColor !important;
}

cart-drawer .quantity__button:hover svg,
cart-items .quantity__button:hover svg,
cart-drawer .quantity__button:hover svg path,
cart-items .quantity__button:hover svg path {
  fill: #ed1c24 !important;
}

/* Input quantita' leggibile su sfondo scuro */
cart-drawer .quantity__input,
cart-notification .quantity__input,
cart-items .quantity__input {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center;
}

/* ============================================================
   FIX SAMI WHOLESALE LOADER STUCK
   L'app Sami inietta CSS che nasconde i prezzi quando il body
   ha classe `.samita-ws-loading`. Se la chiamata API B2B di
   Sami fallisce o ci mette troppo, la classe non viene rimossa
   e i prezzi restano `visibility:hidden; opacity:0` per sempre.
   Forziamo visibility anche durante loading: durante 1-2 secondi
   si vede il prezzo del tema, poi Sami lo sovrascrive col B2B
   (se ci riesce). Meglio FOUC che prezzi invisibili.
   ============================================================ */
.samita-ws-loading [samitaws-product-price],
.samita-ws-loading [samitaWS-product-price],
.samita-ws-loading [samitaws-product-main-price],
.samita-ws-loading [samitaWS-cart-item-key],
.samita-ws-loading [samitaWS-product-id],
.samita-ws-loading [samitaWS-variant-id],
.samita-ws-loading [samitaWS-cart-total-price],
.samita-ws-loading [samitaWS-cart-total-discount],
.samita-ws-loading [samitaWS-ajax-cart-subtotal],
.samita-ws-loading [data-cart-item-regular-price],
.samita-ws-loading [data-cart-subtotal],
.samita-ws-loading .price,
.samita-ws-loading .price-item,
.samita-ws-loading .price__regular,
.samita-ws-loading .price__sale,
html.samita-ws-loading [samitaws-product-price],
html.samita-ws-loading .price,
body.samita-ws-loading [samitaws-product-price],
body.samita-ws-loading .price {
  visibility: visible !important;
  opacity: 1 !important;
}