@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
/* ==========================================================================
   Custom CSS - hummingbirdchild (Mondo Presepi)
   Replica look produzione (Warehouse) su Hummingbird.
   ========================================================================== */

/* ===== GLOBALI: design token produzione ===== */
:root {
  --bs-primary: #084c95;
  --bs-primary-rgb: 8, 76, 149;
  --bs-link-color: #084c95;
  --bs-link-color-rgb: 8, 76, 149;
  --bs-link-hover-color: #023675;
  --mp-blue: #084c95;
  --mp-blue-dark: #023675;
  --mp-blue-accent: #4ba5ea;
  --mp-gold: #dd9933;
  --mp-green: #008749;
}

/* Font base = Mulish (come produzione) */
body {
  font-family: 'Mulish', sans-serif;
}

/* ===== LARGHEZZA CONTAINER come produzione =====
   Prod usa .container max-width 1500px (Hummingbird di default 1320px = "boxato").
   Allarghiamo il contenitore su desktop così contenuto, header e menu sono uniformi. */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1500px !important;
  }
}

/* Bottoni primari come produzione (#084c95, radius 4px, bold) */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #084c95;
  --bs-btn-border-color: #084c95;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #023675;
  --bs-btn-hover-border-color: #023675;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #023675;
  --bs-btn-active-border-color: #023675;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #084c95;
  --bs-btn-disabled-border-color: #084c95;
  font-weight: 700;
  border-radius: 4px;
}
/* Forza testo bianco anche quando il bottone è un <a> (es. "VAI ALLA CASSA" nel
   modale carrello e il tasto carrello): la regola generica a{color:#084c95}
   rendeva il testo blu su sfondo blu -> invisibile. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
  color: #ffffff !important;
}

/* Bottoni "outline" resi pieni blu come produzione (Vedi dettagli, Tutti i prodotti...) */
.btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #084c95;
  --bs-btn-border-color: #084c95;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #023675;
  --bs-btn-hover-border-color: #023675;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #023675;
  --bs-btn-active-border-color: #023675;
  font-weight: 700;
  border-radius: 4px;
}
/* Forza testo bianco: la regola generica a{color} e la var del tema rendevano
   il testo blu su sfondo blu (es. "Vedi dettagli", "Tutti i prodotti") -> invisibile. */
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
a.btn-outline-primary,
.product-miniature__details.btn {
  color: #ffffff !important;
}

/* Link generici in blu brand */
a {
  color: #084c95;
}
a:hover,
a:focus {
  color: #023675;
}

/* ===== MENU: una sola riga come produzione =====
   Il menu (10 voci lunghe) andava a capo su 2 righe. Allarghiamo il contenitore
   alla larghezza piena e riduciamo il font: 12px su desktop, 11px sui laptop. */
.header-nav-full-width .ets_mm_megamenu .container {
  max-width: 1500px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.ets_mm_megamenu.layout_layout5 .mm_menus_li > a {
  font-size: 14px !important; /* = produzione (14px, weight 700, no letter-spacing) */
  letter-spacing: normal !important;
  white-space: nowrap !important;
}
/* Spaziatura tra le voci = produzione: il titolo ets ha padding 20px/lato (40px a voce),
   prod usa 10px/lato (20px a voce) -> con 40px il menu a 14px sforava su 2 righe.
   Portando a 10px il testo per-voce combacia con prod e il 14px sta su una riga. */
.ets_mm_megamenu.layout_layout5 .mm_menus_li > a .mm_menu_content_title {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* Sotto i ~1366px scala leggermente per non andare a capo vicino al breakpoint mobile */
@media (max-width: 1366.98px) {
  .ets_mm_megamenu.layout_layout5 .mm_menus_li > a { font-size: 13px !important; }
  .ets_mm_megamenu.layout_layout5 .mm_menus_li > a .mm_menu_content_title {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
@media (max-width: 1319.98px) {
  .ets_mm_megamenu.layout_layout5 .mm_menus_li > a { font-size: 12px !important; }
  .ets_mm_megamenu.layout_layout5 .mm_menus_li > a .mm_menu_content_title {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ===== HEADER come produzione: logo grande | search pill centrata | account+carrello (icona+label) =====
   Layout: logo a sinistra (grande), search a pillola centrata, account e carrello a destra
   con icona sopra ed etichetta sotto (moduli spostati da displayNav2 a displayTop). */
.header-bottom__row { flex-wrap: nowrap !important; align-items: center !important; min-height: 130px !important; }
.header-bottom { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* Logo grande (come prod ~110px) su desktop */
.header-bottom__logo { flex: 0 0 auto !important; }
.header-bottom__logo img { max-height: 110px !important; width: auto !important; max-width: none !important; }
/* su mobile/tablet il logo resta contenuto per non occupare tutto lo schermo */
@media (max-width: 991.98px) {
  .header-bottom__logo img { max-height: 46px !important; }
}

/* Search: pillola grigia con bordo azzurro come prod, larga ~460px vicino al logo;
   account/carrello spinti a destra (margin-left:auto) come prod. */
#_desktop_ps_searchbar.order-2 {
  order: 1 !important;
  flex: 0 0 460px !important;
  margin-left: 4rem !important;
  margin-right: 0 !important;
}
/* il wrapper interno è un flex item che non riempiva il container (restava a ~304px) */
#_desktop_ps_searchbar #ps_searchbar,
#_desktop_ps_searchbar .ps-searchbar {
  width: 100% !important;
  flex: 1 1 auto !important;
}
.header-bottom .ps-searchbar__form { width: 100% !important; max-width: 100% !important; }
.header-bottom .ps-searchbar__input {
  width: 100% !important;           /* riempie il contenitore (prima restava stretto) */
  height: 48px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #d8dde3 !important;
  padding-left: 16px !important;
  padding-right: 66px !important;   /* spazio per il pulsante lente */
  font-size: 15px !important;
}
.header-bottom .ps-searchbar__input:focus {
  border-color: #084c95 !important;
  box-shadow: 0 0 0 3px rgba(8, 76, 149, 0.12) !important;
  outline: none !important;
}
/* Lente = PULSANTE pieno attaccato a destra (stile "Stile ricerca.jpeg").
   NB: e' l'<i> js-search-icon del tema, gia' cliccabile: theme.js fa
   `click -> input.form.submit()`. Quindi qui e' solo aspetto, niente markup/JS.
   Il tema la mette absolute con top:50%/translateY(-50%): non toccare il transform. */
.header-bottom .ps-searchbar__magnifier {
  left: auto !important;
  right: 4px !important;
  width: 54px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #084c95;
  color: #fff !important;
  border-radius: 6px;
  font-size: 22px;
  transition: background 0.15s ease;
}
.header-bottom .ps-searchbar__magnifier:hover {
  background: #023675;
}
/* la 'x' di pulizia sta a sinistra del pulsante, non sotto */
.header-bottom .ps-searchbar__clear {
  right: 66px !important;
}

/* Account + Carrello: icona sopra, etichetta sotto (come prod), a destra, VICINI tra loro */
#_desktop_ps_customersignin,
#_desktop_ps_shoppingcart {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;            /* azzera il padding del wrapper (creava spazio) */
  align-self: center !important;    /* centrati verticalmente nella riga (erano in alto) */
  display: flex !important;
  align-items: center !important;
}
#_desktop_ps_customersignin .ps-customersignin,
#_desktop_ps_shoppingcart .ps-shoppingcart,
#_desktop_ps_customersignin .header-block,
#_desktop_ps_shoppingcart .header-block {
  padding: 0 !important;
  margin: 0 !important;
}
#_desktop_ps_customersignin { order: 2 !important; margin-left: auto !important; }  /* spinge il gruppo a destra */
#_desktop_ps_shoppingcart { order: 3 !important; margin-left: 1.25rem !important; } /* piccolo spazio account->carrello come prod */
#_desktop_ps_customersignin .header-block__action-btn,
#_desktop_ps_shoppingcart .header-block__action-btn {
  position: relative !important;   /* ancora per il badge carrello */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;           /* niente padding: blocco largo quanto il contenuto */
  color: #2b2b2b !important;       /* testo scuro come prod (non blu) */
  font-size: 0.95rem !important;   /* etichetta un po' più grande come prod */
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}
/* Icone = SVG outline nere di produzione (icon-menu/icon-carrello), al posto delle
   material-icons filled blu. Nascondiamo il glyph font e usiamo la SVG come background. */
#_desktop_ps_customersignin .header-block__icon,
#_desktop_ps_shoppingcart .header-block__icon {
  display: block !important;
  font-size: 0 !important;         /* nasconde il glyph material-icons */
  margin: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
/* Stesse SVG lineari del mobile (mp-user/mp-cart) per coerenza. Sono bianche
   (header mobile blu) -> qui l'header desktop è chiaro, quindi le ricoloro SCURE
   con filter: brightness(0). */
#_desktop_ps_customersignin .header-block__icon {
  width: 38px !important;
  height: 38px !important;
  background-image: url('/themes/hummingbirdchild/assets/img/mp-user.svg') !important;
  filter: brightness(0) !important;
}
#_desktop_ps_shoppingcart .header-block__icon {
  width: 36px !important;
  height: 36px !important;
  background-image: url('/themes/hummingbirdchild/assets/img/mp-cart.svg') !important;
  filter: brightness(0) !important;
}
/* Account: solo icona + nome, niente freccia del dropdown (.dropdown-toggle::after) */
#_desktop_ps_customersignin .dropdown-toggle::after {
  display: none !important;
}
/* Carrello: numero come badge in alto a DESTRA dell'icona (non sotto), come prod */
#_desktop_ps_shoppingcart .header-block__badge {
  position: absolute !important;
  top: -2px !important;
  left: calc(50% + 6px) !important;   /* angolo alto-destra dell'icona centrata */
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: #e80000 !important;
  color: #ffffff !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
}
/* badge nascosto quando il carrello è vuoto (come prod) */
#_desktop_ps_shoppingcart .blockcart.inactive .header-block__badge {
  display: none !important;
}

/* ===== 2 banner promo home (ps_customtext) ===== */
.mp-promo-banners {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
}
.mp-promo-banners__item {
  flex: 1 1 calc(50% - 0.5rem);
  display: block;
}
.mp-promo-banners__item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
@media (max-width: 575px) {
  .mp-promo-banners__item { flex: 1 1 100%; }
}

/* ===== FOOTER: stesso blu della barra del menu (#084c95) ===== */
.footer__main {
  background: #084c95 !important;
}

.footer__main,
.footer__main .copyright {
  color: rgba(255, 255, 255, 0.85);
}

.footer__main a {
  color: #ffffff;
}

.footer__main a:hover,
.footer__main a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* ===== PAGINA CATEGORIA: replica look produzione ===== */

/* 4 prodotti per riga su desktop (default Hummingbird con colonna sx = 3) */
@media (min-width: 1200px) {
  .layout-left-column .products,
  .layout-right-column .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Descrizione categoria collassata + bottone "Leggi di più" (come prod) */
.mp-catdesc {
  position: relative;
  margin-bottom: 1rem;
}
.mp-catdesc .category__description {
  overflow: hidden;
  max-height: 5.6em; /* ~3 righe */
  transition: max-height 0.25s ease;
  position: relative;
}
.mp-catdesc[data-collapsed="false"] .category__description {
  max-height: 2000px;
}
/* sfumatura in fondo quando collassato */
.mp-catdesc[data-collapsed="true"] .category__description::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.mp-catdesc__toggle {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem 1rem;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  color: #084c95;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mp-catdesc__toggle:hover,
.mp-catdesc__toggle:focus {
  background: #f5f7fa;
  border-color: #084c95;
}
/* swap etichetta più/meno in base allo stato */
.mp-catdesc[data-collapsed="true"] .mp-catdesc__less,
.mp-catdesc[data-collapsed="false"] .mp-catdesc__more {
  display: none;
}

/* Sottocategorie + cover di categoria: nascoste come in produzione (fallback) */
.category__header .subcategory,
.category__header .category__cover {
  display: none;
}

/* ===== FILTRI amazzingfilter: checkbox/radio stile produzione (Warehouse) ===== */

/* righe più spaziate + testo più piccolo come prod */
#af_form .af_filter li {
  margin-top: 14px;
  overflow: visible;
}
#af_form .af_filter .name {
  font-size: 0.85rem;
  line-height: 1.25;
  color: #000;
}

/* label = ancora per il box custom */
#af_form .af-checkbox-label,
#af_form .af-radio-label {
  position: relative;
  padding-left: 29px;
  min-height: 22px;
  cursor: pointer;
  align-items: center;
}

/* nasconde il checkbox/radio nativo */
#af_form .af-checkbox-label input.af,
#af_form .af-radio-label input.af,
#af_form .af_filter .checkbox,
#af_form .af_filter .radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* box custom (bianco, bordo grigio scuro, ombra interna) come prod */
#af_form .af-checkbox-label::after,
#af_form .af-radio-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #464646;
  box-shadow: inset 0 1px 1px rgba(181, 181, 181, 0.57);
  box-sizing: border-box;
}
/* radio = cerchio */
#af_form .af-radio-label::after {
  border-radius: 50%;
}

/* stato selezionato: spunta grigio scuro (checkbox) */
#af_form li.active > .af-checkbox-label::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid #555;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 1;
}
/* stato selezionato: pallino (radio) */
#af_form li.active > .af-radio-label::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
  z-index: 1;
}

/* ===== MINIATURA PRODOTTO in griglia categoria: layout come produzione =====
   Titolo bold blu uppercase centrato, reference, prezzo evidenziato, tutto centrato. */

/* Contorno card SEMPRE visibile, come prod (.product-miniature{border:solid 1px #ebebeb}).
   Hummingbird di suo non ha bordo e mostra solo un'ombra in hover: le card risultavano
   indistinte sul fondo bianco. Hover = alone morbido di prod (0 0 20px 0 #e0e0e0). */
.product-miniature__inner {
  border: 1px solid #ebebeb;
}
.product-miniature__inner:hover,
.product-miniature__inner:has(:focus-visible) {
  border-color: #dcdcdc;
  box-shadow: 0 0 20px 0 #e0e0e0;
}

/* centra tutto il contenuto della card */
.product-miniature__bottom,
.product-miniature__infos {
  text-align: center;
}

/* Titolo: bold, blu, uppercase, centrato (prod = 14px 700 uppercase #084c95) */
.product-miniature__title {
  display: block;
  color: #084c95 !important;
  font-weight: 700 !important;
  /***text-transform: uppercase;***/
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.1px;
}
.product-miniature__title:hover,
.product-miniature__title:focus {
  color: #023675 !important;
  text-decoration: none;
}

/* Reference: RIMOSSO dal template della miniatura il 28/07 (vedi product.tpl).
   La regola resta come rete di sicurezza se un modulo lo reinserisce. */
.product-miniature__reference {
  display: none;
}

/* Prezzo evidenziato: grande, bold, nero, centrato (prod ~23px 700) */
.product-miniature__prices {
  text-align: center;
  justify-content: center; /* container flex-row: centra il prezzo */
  margin-top: 0.25rem;
}
.product-miniature__price {
  font-size: 1.35rem;
  font-weight: 700;
  color: #000;
  text-align: center;
}

/* Azioni (quantità + aggiungi) centrate */
.product-miniature__actions,
.product-miniature__form {
  justify-content: center;
}

/* ===== Miniatura: pulsante "AGGIUNGI" con etichetta (screen 28.07.2026) =====
   Il tema padre rende il bottone come sola icona quadrata (btn-square-icon) e
   nasconde .product-miniature__add-text tranne che nelle card strettissime
   (@container product-miniature width < 13.5rem). Qui invertiamo: il box quantità
   diventa compatto e lo spazio recuperato va al bottone, che mostra icona + testo. */
.product-miniature__form {
  flex-wrap: nowrap;
  column-gap: 0.35rem;
}

/* box quantità compatto: non deve più prendersi metà card */
.product-miniature__form .quantity-button,
.product-miniature__form .quantity-button__group {
  flex: 0 0 auto;
  width: auto;
}
.product-miniature__form .quantity-button .btn {
  padding: 0.25rem;
  min-width: 1.7rem;
  flex: 0 0 auto;
}
.product-miniature__form .quantity-button .btn .material-icons {
  font-size: 1rem;
}
.product-miniature__form .quantity-button input,
.product-miniature__form .quantity-button .form-control {
  flex: 0 0 2rem;
  width: 2rem;
  min-width: 0;
  max-width: 2rem;
  padding-inline: 0;
  font-size: 0.9rem;
}

/* bottone: occupa lo spazio residuo, icona carrello + scritta */
.product-miniature__add.mp-add-btn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.15;
  white-space: nowrap;
}
.product-miniature__add.mp-add-btn .material-icons {
  font-size: 1.05rem;
  line-height: 1;
}
/* il padre la nasconde: qui l'etichetta c'è sempre */
.product-miniature__add-text.mp-add-btn__label {
  display: inline !important;
}

/* "Vedi dettagli" (prodotto non acquistabile): stessa altezza/peso del bottone */
.product-miniature__details {
  padding: 0.45rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.15;
}

/* Card strette (griglia mobile 2 colonne, ~10.7rem): il tema padre impila il form
   mettendo quantità e bottone su DUE righe. Produzione invece li tiene su UNA riga
   sola, e ci sta perché dentro il bottone l'icona del carrello va SOPRA la scritta
   invece che di fianco. Replichiamo quello schema: form in riga, quantità ancora
   più stretta, bottone su due righe (icona / AGGIUNGI).
   NB: serve stare DENTRO la @container del padre, un @media non lo sovrascrive
   (il breakpoint dipende dalla larghezza della CARD, non del viewport). */
@container product-miniature (width < 13.5rem) {
  .product-miniature__form {
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.25rem;
    align-items: stretch;
  }

  /* quantità: il padre qui rimette max-width:unset, va riportata compatta */
  .product-miniature__form .quantity-button .btn {
    min-width: 1.45rem;
    padding: 0.2rem;
  }
  .product-miniature__form .quantity-button .btn .material-icons {
    font-size: 0.9rem;
  }
  .product-miniature__form .quantity-button input,
  .product-miniature__form .quantity-button .form-control {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    max-width: 1.6rem;
    font-size: 0.8rem;
  }

  /* bottone: riprende lo spazio residuo; il padre lo forza a width:100% */
  .product-miniature__add.mp-add-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.3rem 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0;
    white-space: normal;
  }
  .product-miniature__add.mp-add-btn .material-icons {
    font-size: 0.95rem;
  }
}

/* Card ANCORA più strette (telefoni da 360px in giù: card ~9.75rem).
   Senza questo scalino "AGGIUNGI" è più largo del bottone e sborda dal blu:
   è una parola sola, non va a capo, e il flex la lascia traboccare. */
@container product-miniature (width < 10.25rem) {
  .product-miniature__form .quantity-button .btn {
    min-width: 1.3rem;
    padding: 0.15rem;
  }
  .product-miniature__form .quantity-button input,
  .product-miniature__form .quantity-button .form-control {
    flex: 0 0 1.45rem;
    width: 1.45rem;
    max-width: 1.45rem;
    font-size: 0.75rem;
  }
  .product-miniature__add.mp-add-btn {
    font-size: 0.65rem;
    padding: 0.28rem 0.1rem;
  }
  .product-miniature__add.mp-add-btn .material-icons {
    font-size: 0.9rem;
  }
}

/* ===== HEADER STICKY come produzione: nello scroll resta SOLO il menu =====
   Hummingbird rende sticky l'INTERO header (position:sticky su header.js-sticky-header),
   mentre in prod scorre via tutto tranne la barra menu. Disabilitiamo la sticky
   dell'header: resta solo quella della barra menu, ora fatta da mpmenu (.mpn.is-stuck). */
header.js-sticky-header {
  position: static !important;
  top: auto !important;
}
/* barra menu sopra ai contenuti SOLO quando è fissa nello scroll (ets aggiunge la
   classe `scroll_heading`). A inizio pagina NON deve avere z-index alto, sennò il
   dropdown dell'account (utente loggato) ci finisce sotto. */
.ets_mm_megamenu.scroll_heading {
  z-index: 1040 !important;
}
/* sicurezza: dropdown account sopra la barra menu */
.dropdown-menu[aria-labelledby="userMenuButton"],
#_desktop_ps_customersignin .dropdown-menu {
  z-index: 1041;
}
/* DESKTOP: il dropdown del megamenu in hover deve stare SOPRA la colonna riepilogo
   sticky di carrello/checkout. Hummingbird dà a `.cart-grid__aside-wrapper` e
   `.checkout-grid__aside-wrapper` (colonna destra) `position:sticky; z-index:1020`
   (scala Bootstrap), mentre il modulo ets alza il menu a soli `z-index:1000` in hover
   (megamenu.css:597) -> il riepilogo (1020) copriva le voci del menu a tendina sopra
   la colonna destra. Portiamo il menu in hover a 1030: sopra riepilogo (1020) e header
   (1021, comunque inerte perche' static), sotto il dropdown account (1041) e i modali/
   backdrop PS (1040+). Solo >=992px: su mobile il menu e' un offcanvas gia' gestito. */
@media (min-width: 992px) {
  .ets_mm_megamenu:hover {
    z-index: 1030 !important;
  }
}

/* ===== FOOTER come produzione: col1 logo+indirizzo, poi 3 colonne link, striscia social+pagamenti ===== */

/* Colonna 1: logo + indirizzo sotto (come prod) */
.mp-footer-col-brand .mp-footer-logo {
  max-height: 80px;
  width: auto;
  margin-bottom: 1rem;
}
/* la contactinfo porta il suo wrapper col-lg-3: dentro la col1 va a piena larghezza
   (senza questo si restringe al 25% e l'indirizzo va a capo parola-per-parola) */
.mp-footer-col-brand .ps-contactinfo {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}
/* nascondi il titolo "Informazioni negozio" (prod mostra solo l'indirizzo sotto il logo) */
.mp-footer-col-brand .footer-block__title {
  display: none;
}
/* l'indirizzo è sempre visibile (il titolo nascosto era anche il toggle collapse mobile) */
.mp-footer-col-brand .footer-block__content {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}
/* indirizzo come blocco: i <br> vanno a capo correttamente, testo bianco */
.mp-footer-contact address,
.mp-footer-contact .ps-contactinfo__infos {
  display: block;
}
.mp-footer-contact,
.mp-footer-contact a,
.mp-footer-contact li,
.mp-footer-contact span,
.mp-footer-contact p,
.mp-footer-contact address {
  color: rgba(255, 255, 255, 0.9);
}
.mp-footer-contact .ps-contactinfo__phone {
  margin-top: 0.5rem;
}

/* Striscia social + metodi di pagamento (sotto le colonne) */
.mp-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mp-footer-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mp-footer-social__label {
  color: #fff;
  font-weight: 600;
  margin-right: 0.35rem;
}
.mp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mp-footer-social a:hover,
.mp-footer-social a:focus {
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}
.mp-footer-payments img {
  max-height: 30px;
  width: auto;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}
@media (max-width: 767.98px) {
  .mp-footer-strip {
    justify-content: center;
    text-align: center;
  }
}

/* ===== CARRELLO: totale più bold e prominente come produzione (prod = 700, 24px) ===== */
.cart-summary__total .cart-summary__label,
.cart-summary__total .cart-summary__value,
.cart-summary__line--bold .cart-summary__label,
.cart-summary__line--bold .cart-summary__value {
  font-weight: 700;
  font-size: 1.35rem;
}

/* ===== CARRELLO: spaziatura tra i blocchi della colonna sinistra come prod =====
   (consegna stimata, Klarna, continua shopping, punti fedeltà erano attaccati) */
.cart-grid__content .js-cart-container > * + * {
  margin-top: 1.5rem;
}
.cart-grid__content .estimateddelivery {
  margin-bottom: 0.25rem;
}

/* ===== CHECKOUT: metodi di pagamento (.payment-options__list) come blocchi uniformi =====
   I loghi dei moduli hanno dimensioni diverse -> righe disallineate. Diamo a ogni
   opzione un blocco uniforme con slot logo a dimensione fissa, indipendente dalla foto. */
.payment-options__list .payment-option {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.payment-options__list .payment-option:hover {
  border-color: #084c95;
}
/* riga uniforme: radio | (spazio) | logo (slot fisso) | testo, tutti centrati verticalmente */
.payment-options__list .payment-option__form-check {
  display: flex;
  align-items: center;
  gap: 1rem;                   /* spazio tra il radio e il logo */
  min-height: 60px;            /* altezza uniforme di ogni blocco */
  margin: 0;
  padding: 0.5rem 1.25rem;
}
/* radio nativo: annulla il float/margin negativo di Bootstrap .form-check così sta in flex */
.payment-options__list .payment-option__input {
  flex: 0 0 auto;
  margin: 0 !important;
  float: none !important;
  position: static !important;
}
.payment-options__list .payment-option__label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
}
/* logo: slot a dimensione fissa (riservato anche se il logo è più piccolo) ->
   tutti i loghi allineati sulla stessa linea, indipendentemente dalla foto */
.payment-options__list .payment-option__label img.img-fluid {
  flex: 0 0 64px;
  width: 64px;
  max-width: 64px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
/* stato selezionato: bordo blu evidenziato */
.payment-options__list .payment-option:has(.payment-option__input:checked) {
  border-color: #084c95;
  box-shadow: 0 0 0 1px #084c95 inset;
}
/* form/info aggiuntive del metodo restano allineate al contenuto */
.payment-options__list .payment-option__additional-information,
.payment-options__list .js-payment-option-form {
  padding: 0 1.25rem 1rem 1.25rem;
}

/* ===== MOBILE: menu come icona hamburger nell'header (come prod), non barra "MENÙ" ===== */
@media (max-width: 991.98px) {
  /* FLASH icone desktop al load: le mie regole header desktop (display:flex, fuori MQ e
     PRIMA nel file) forzavano visibili i moduli #_desktop_* su mobile finché il JS del
     tema non spostava il contenuto nei placeholder mobile -> lampeggio ad ogni reload.
     Questa regola (dopo quelle desktop) li nasconde su mobile dal primo paint. */
  #_desktop_ps_customersignin,
  #_desktop_ps_shoppingcart,
  #_desktop_ps_searchbar {
    display: none !important;
  }

  /* La fascia menu non deve occupare spazio su mobile. NON usiamo piu'
     overflow:hidden per "clippare" il contenuto: un antenato con overflow:hidden
     puo' far posizionare/tagliare male l'overlay position:fixed su Safari/iOS
     (menu che "si apre ma non e' in alto"). Invece nascondiamo esplicitamente
     i due unici figli visibili:
       - .ybc-menu-toggle  = toggle ets nativo (usiamo il nostro bottone nell'header)
       - .mm_menus_ul:not(.active) = lista menu quando NON e' aperta -> niente flash/CLS
     Cosi' la fascia collassa a 0 senza clip, e l'overlay aperto (.mm_menus_ul.active,
     position:fixed) non ha piu' un antenato con overflow:hidden che lo intrappoli. */
  .header-nav-full-width { height: 0 !important; }
  .header-nav-full-width .ybc-menu-toggle.ybc-menu-btn { display: none !important; }
  .header-nav-full-width .mm_menus_ul:not(.active) { display: none !important; }
  /* Il contenitore .ets_mm_megamenu ha un margin proprio (layout5) che, essendo la
     fascia height:0 SENZA overflow:hidden, sborda e crea una striscia bianca tra
     header e slider su mobile. Azzerato (solo mobile; su desktop la barra menu resta). */
  .header-nav-full-width .ets_mm_megamenu { margin: 0 !important; }

  /* Nostro bottone hamburger, coerente con le altre icone (icona 34px + label "Menù") */
  .mp-mobile-menu { flex: 0 0 auto !important; }
  .mp-mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #2b2b2b !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
  }
  .mp-mobile-menu-btn__icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 30px !important;
    height: 34px !important;
  }
  .mp-mobile-menu-btn__icon span {
    display: block !important;
    height: 3px !important;
    width: 30px !important;
    background: #2b2b2b !important;
    border-radius: 2px !important;
  }
  /* Riga header mobile: logo (sx) + gruppo icone (dx), altezza contenuta */
  .header-bottom__row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 0 !important;
  }
  .header-bottom { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .header-bottom__logo { flex: 0 0 auto !important; margin-right: auto !important; }

  /* colonne icone (search, account, carrello, menu) con spaziatura uniforme */
  .ps-searchbar--mobile,
  #_mobile_ps_customersignin,
  #_mobile_ps_shoppingcart,
  .mp-mobile-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 0.55rem !important;
  }
  /* Hamburger a SINISTRA, prima del logo (pattern mobile standard, lato dx piu' pulito).
     order:-1 lo mette primo nella riga flex a prescindere dall'ordine DOM (il widget
     search e' iniettato via JS, quindi 'order' e' piu' robusto che spostare il markup). */
  .mp-mobile-menu { order: -1 !important; margin-left: 0 !important; margin-right: 0.75rem !important; }

  /* NB: su mobile il tema sposta il widget search in un offcanvas (toggle magnifier);
     lo stiliamo coerente con le altre icone (scuro + "Cerca" sotto). */
  .ps-searchbar--mobile .header-block__action-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #2b2b2b !important;
    text-decoration: none !important;
  }
  .ps-searchbar--mobile .header-block__icon {
    color: #2b2b2b !important;
    font-size: 30px !important;
  }
  .ps-searchbar--mobile .header-block__action-btn::after {
    content: "Cerca";
    color: #2b2b2b;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.1;
  }

  /* ===== ICONE account/carrello mobile = outline SVG + label + testo scuro (come desktop/prod) ===== */
  #_mobile_ps_customersignin .header-block__action-btn,
  #_mobile_ps_shoppingcart .header-block__action-btn {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    color: #2b2b2b !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
  }
  #_mobile_ps_customersignin .header-block,
  #_mobile_ps_shoppingcart .header-block,
  #_mobile_ps_customersignin .ps-customersignin,
  #_mobile_ps_shoppingcart .ps-shoppingcart { padding: 0 !important; margin: 0 !important; }
  /* etichetta (mostrata via template, tolto d-none): testo scuro piccolo */
  #_mobile_ps_customersignin .header-block__title,
  #_mobile_ps_shoppingcart .header-block__title {
    display: block !important;
    color: #2b2b2b !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  /* icone SVG outline nere al posto delle material-icons */
  #_mobile_ps_customersignin .header-block__icon,
  #_mobile_ps_shoppingcart .header-block__icon {
    font-size: 0 !important;
    display: block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }
  #_mobile_ps_customersignin .header-block__icon {
    width: 34px !important; height: 34px !important;
    background-image: url('/themes/hummingbirdchild/assets/img/icon-account.svg') !important;
  }
  #_mobile_ps_shoppingcart .header-block__icon {
    width: 32px !important; height: 32px !important;
    background-image: url('/themes/hummingbirdchild/assets/img/icon-cart.svg') !important;
  }
  /* badge carrello mobile rosso in alto a destra (come prod) */
  #_mobile_ps_shoppingcart .header-block__badge {
    position: absolute !important;
    top: -4px !important;
    left: calc(50% + 4px) !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: #e80000 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
  }
  #_mobile_ps_shoppingcart .blockcart.inactive .header-block__badge { display: none !important; }
}

/* ===== TABLET 768-991.98: menu col DRAWER, ma componenti veri dell'header =====
   Il JS del tema passa in "mobile" solo sotto i 768 (prestashop.responsive.min_width),
   quindi qui account/carrello/ricerca VERI (badge che si aggiorna, dropdown account)
   restano nei contenitori #_desktop_*: il blocco mobile qui sopra li nascondeva e i
   placeholder #_mobile_* sono d-md-none -> non si vedeva piu' niente. Li rimettiamo,
   e il menu lo fa il bottone Menu' del drawer (in header.tpl e' d-lg-none). */
@media (min-width: 768px) and (max-width: 991.98px) {
  #_desktop_ps_customersignin,
  #_desktop_ps_shoppingcart {
    display: flex !important;
  }
  /* la pillola di ricerca a 460px fissi non ci sta insieme a logo+icone+menu */
  #_desktop_ps_searchbar.order-2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 340px !important;
    margin-left: 1.5rem !important;
  }
  #_desktop_ps_customersignin { margin-left: 1rem !important; }
  #_desktop_ps_shoppingcart { margin-left: 0.9rem !important; }
  /* le icone desktop sono piu' grandi di quelle mobile: qui le pareggiamo al burger.
     E qui l'header e' BLU come su telefono: le SVG sono gia' bianche, quindi va tolto
     il filter che le annerisce per l'header chiaro del desktop. */
  #_desktop_ps_customersignin .header-block__icon,
  #_desktop_ps_shoppingcart .header-block__icon {
    filter: none !important;
  }
  #_desktop_ps_customersignin .header-block__icon { width: 30px !important; height: 30px !important; }
  #_desktop_ps_shoppingcart .header-block__icon { width: 29px !important; height: 29px !important; }
  #_desktop_ps_customersignin .header-block__action-btn,
  #_desktop_ps_shoppingcart .header-block__action-btn {
    color: #fff !important;
    font-size: 0.72rem !important;
  }
}

/* ===== BARRA TOP (lingua | valuta | Lista dei Desideri) come prod, anche su mobile ===== */
.header-top--mp {
  background: #084c95;
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.header-top--mp a,
.header-top--mp .header-top__right { color: #fff; }
/* Ordine barra top (desktop + mobile): WhatsApp | Lista dei Desideri | Valuta | Lingua.
   Separatori '|' TRA gli elementi (nessun bordo sul PRIMO = whatsapp).
   WhatsApp arriva da mptopbanner via hook displayNav2 e si incastra qui con `order`. */
.header-top--mp .mp-topbar-wa                 { order: 1; margin-left: 0; padding-left: 0; border-left: 0; }
.header-top--mp .header-top__wishlist         { order: 2; margin-left: .85rem; padding-left: .85rem; border-left: 1px solid rgba(255, 255, 255, 0.32); }
.header-top--mp #_desktop_ps_currencyselector { order: 3; margin-left: .85rem; padding-left: .85rem; border-left: 1px solid rgba(255, 255, 255, 0.32); }
.header-top--mp #_desktop_ps_languageselector { order: 4; margin-left: .85rem; padding-left: .85rem; border-left: 1px solid rgba(255, 255, 255, 0.32); }

/* Social a sinistra della barra blu, prima delle recensioni (solo desktop:
   sotto i 992px la barra e' gia' piena e le recensioni andrebbero a capo). */
.mp-topbar-social {
  display: none;
  align-items: center;
  gap: .6rem;
  margin-right: .85rem;
  padding-right: .85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
}
@media (min-width: 992px) {
  .mp-topbar-social { display: inline-flex; }
}
.mp-topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}
.mp-topbar-social a:hover,
.mp-topbar-social a:focus {
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}

/* link preferiti: cuore + testo (primo elemento, senza separatore a sinistra) */
.header-top__wishlist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
}
.header-top__wishlist:hover { color: #abd0ea !important; }
.header-top__wishlist .material-icons { font-size: 18px; line-height: 1; }
/* select valuta: niente riquadro bianco, integrato nella barra come il link preferiti */
.header-top--mp .ps-currencyselector .form-select {
  background-color: transparent;
  /* freccia bianca: quella di default Bootstrap e' scura e sparirebbe sul blu */
  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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  border: 0;
  box-shadow: none;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  height: auto;
  width: auto;
  min-width: 0;
  padding: 0.1rem 1.35rem 0.1rem 0.2rem;
  background-position: right 0.35rem center;
  background-size: 11px 9px;
  cursor: pointer;
  border-radius: 0;
}
.header-top--mp .ps-currencyselector .form-select:hover,
.header-top--mp .ps-currencyselector .form-select:focus {
  color: #abd0ea;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
/* le option sono rese dal menu nativo dell'OS (fondo bianco): restano scure */
.header-top--mp .ps-currencyselector .form-select option { color: #2b2b2b; background-color: #fff; }

/* ---- selettore lingua con bandierine (dropdown <details>) ---- */
.header-top--mp .mp-lang { position: relative; display: inline-block; }
.header-top--mp .mp-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.1rem 0.2rem;
  white-space: nowrap;
}
.header-top--mp .mp-lang__toggle::-webkit-details-marker { display: none; }
.header-top--mp .mp-lang__toggle::marker { content: ""; font-size: 0; }
.header-top--mp .mp-lang__toggle:hover,
.header-top--mp .mp-lang[open] > .mp-lang__toggle { color: #abd0ea; }
.header-top--mp .mp-lang__flag {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
  flex: 0 0 auto;
  display: block;
}
.header-top--mp .mp-lang__caret { font-size: 17px; line-height: 1; transition: transform .15s ease; }
.header-top--mp .mp-lang[open] .mp-lang__caret { transform: rotate(180deg); }
.header-top--mp .mp-lang__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  margin: 0;
  padding: 4px 0;
  min-width: 155px;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.header-top--mp .mp-lang__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: #2b2b2b;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.85rem;
}
.header-top--mp .mp-lang__item:hover { background: #f2f6fb; color: #084c95; }
.header-top--mp .mp-lang__item--active { font-weight: 700; }
/* su mobile la barra è centrata: apri il menu sotto il toggle senza uscire dallo schermo */
@media (max-width: 991.98px) {
  .header-top--mp .mp-lang__menu { left: 50%; transform: translateX(-50%); }
}
/* su mobile la barra è centrata (come prod) */
@media (max-width: 991.98px) {
  /* nav1 = blocco recensioni (mptopbanner): la barra centrata non ha spazio,
     resta desktop-only. Disattivabile a parte dal pannello del modulo. */
  .header-top--mp .header-top__left { display: none !important; }
  .header-top--mp .header-top__right {
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
  /* GOTCHA: centrata + nowrap, se il contenuto supera la larghezza l'eccesso
     viene tagliato ANCHE A SINISTRA e il primo elemento (whatsapp) finisce
     fuori schermo. A 390px non ci stava per ~5px. Si libera spazio togliendo
     il testo della wishlist (resta il cuore) e vietando lo shrink. */
  .header-top--mp .header-top__wishlist span { display: none; }
  .header-top--mp .header-top__wishlist { gap: 0; }
  .header-top--mp .mp-topbar-wa,
  .header-top--mp .header-top__wishlist,
  .header-top--mp #_desktop_ps_currencyselector,
  .header-top--mp #_desktop_ps_languageselector { flex: 0 0 auto; }
  .header-top--mp .col,
  .header-top--mp .col-auto { flex: 0 1 auto !important; }
}
/* Telefoni molto stretti: con l'etichetta "WhatsApp" visibile la barra torna a
   sforare (~359px di contenuto) e l'overflow taglia a SINISTRA facendo sparire
   whatsapp. Si sacrifica il nome della lingua (resta la bandiera) e si
   stringono i separatori: a 320px servivano ~10px in piu'. */
@media (max-width: 374.98px) {
  .header-top--mp .mp-lang__name { display: none; }
  .header-top--mp .header-top__wishlist,
  .header-top--mp #_desktop_ps_currencyselector,
  .header-top--mp #_desktop_ps_languageselector { margin-left: .5rem; padding-left: .5rem; }
}

/* ===== NEWSLETTER come produzione (fascia grigia, titolo blu a sx, pill a dx) ===== */
.mp-newsletter {
  background: #e5e5e5;
  padding: 2.25rem 0;
}
.mp-newsletter__row {
  row-gap: 1rem;
}
.mp-newsletter__title {
  color: #084c95;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 0 0 0.35rem;
}
.mp-newsletter__note {
  color: #084c95;
  font-size: 0.85rem;
  line-height: 1.3;
}
/* input + bottone uniti in un'unica pill (come prod) */
.mp-newsletter__group {
  flex-wrap: nowrap;
}
.mp-newsletter__group .form-control {
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  padding: 0.7rem 1rem;
  height: auto;
  box-shadow: none;
}
.mp-newsletter__group .form-control:focus {
  box-shadow: none;
  border-color: #084c95;
}
.mp-newsletter__btn {
  background: #084c95;
  border-color: #084c95;
  border-radius: 0 6px 6px 0;
  padding: 0.7rem 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mp-newsletter__btn:hover,
.mp-newsletter__btn:focus {
  background: #06356b;
  border-color: #06356b;
}
.mp-newsletter__gdpr { color: #555; }
.mp-newsletter__gdpr a { color: #084c95; }
@media (max-width: 991.98px) {
  .mp-newsletter { padding: 1.75rem 0; text-align: center; }
  .mp-newsletter__title { font-size: 1.7rem; }
  .mp-newsletter__note { margin-bottom: 1rem; }
}

/* ============================================================
   SCHEDA PRODOTTO — Fase 1: marca off, CTA oro, sticky mobile
   ============================================================ */

/* 1. Marca "Generico" rimossa (tutti i prodotti sono "Generico") */
.product__manufacturer { display: none !important; }
/* 1b. Voce "Marca" (logo produttore) nella sezione Caratteristiche/dettagli */
.details__item--manufacturer { display: none !important; }

/* 2. Bottone "AGGIUNGI AL CARRELLO" ORO come produzione (#feb801, testo scuro) */
.product__add-to-cart-button.btn-primary,
.product__add-to-cart-button.btn.btn-primary {
  --bs-btn-bg: #feb801;
  --bs-btn-border-color: #feb801;
  --bs-btn-hover-bg: #e9a900;
  --bs-btn-hover-border-color: #e9a900;
  --bs-btn-active-bg: #d99f00;
  --bs-btn-active-border-color: #d99f00;
  --bs-btn-color: #1a2a3a;
  --bs-btn-hover-color: #1a2a3a;
  --bs-btn-active-color: #1a2a3a;
  /* Stato disabilitato/loading in ORO (non blu): prodotto non disponibile
     e lampeggio durante l'AJAX "aggiungi al carrello". Opacity Bootstrap .65 = look muto. */
  --bs-btn-disabled-bg: #feb801;
  --bs-btn-disabled-border-color: #feb801;
  --bs-btn-disabled-color: #1a2a3a;
  color: #1a2a3a !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.product__add-to-cart-button.btn-primary:disabled,
.product__add-to-cart-button.btn.btn-primary:disabled,
.product__add-to-cart-button.btn-primary.disabled { background-color: #feb801 !important; border-color: #feb801 !important; color: #1a2a3a !important; }
.product__add-to-cart-button.btn-primary .material-icons { color: #1a2a3a !important; }

/* 3. Barra quantità + "Aggiungi al carrello" FISSA in basso su MOBILE */
@media (max-width: 991.98px) {
  .product__actions-qty-add.product-quantity {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    margin: 0;
    padding: 8px 12px;
    background: #fff;
    box-shadow: 0 -2px 14px rgba(0,0,0,.16);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;            /* qty + bottone + cuore sulla STESSA riga */
    gap: 8px;
  }
  .product__actions-qty-add.product-quantity .product__quantity { flex: 0 0 auto; width: auto; margin: 0; }
  /* il .input-group Bootstrap è width:100% (=366px) e mandava il bottone a capo: compattalo */
  .product__actions-qty-add.product-quantity .quantity-button__group.input-group { width: auto; flex: 0 0 auto; }
  .product__actions-qty-add.product-quantity .product__quantity .form-control.js-quantity-wanted { flex: 0 0 46px; width: 46px; min-width: 0; }
  .product__actions-qty-add.product-quantity .product__add-to-cart.add { flex: 1 1 auto; display: flex; }
  .product__actions-qty-add.product-quantity .product__add-to-cart-button { width: 100%; padding: .65rem .5rem; font-size: .82rem; white-space: nowrap; line-height: 1.1; }
  .product__actions-qty-add.product-quantity .product__add-to-cart-button i,
  .product__actions-qty-add.product-quantity .product__add-to-cart-button .material-icons { font-size: 1.1rem; margin-right: .3rem; }
  /* Preferiti (cuore) NASCOSTO dalla barra fissa mobile (non serve qui) */
  .product__actions-qty-add.product-quantity .wishlist-button,
  .product__actions-qty-add.product-quantity .wishlist-button-add { display: none !important; }
  /* nella barra fissa: solo qty + bottone + cuore; nascondi il banner PayPal "paga dopo" + style iniettati */
  .product__actions-qty-add.product-quantity > div:not(.product__add-to-cart):not(.product-actions__quantity),
  .product__actions-qty-add.product-quantity > style { display: none !important; }
  /* NB: rimosso `#footer{padding-bottom:84px}` che creava spazio vuoto sotto il footer
     su tutte le pagine (non solo scheda prodotto). Sulla scheda prodotto la barra fissa
     può coprire il copyright del footer: accettato (irrilevante). */
}

/* ============================================================
   SCHEDA PRODOTTO — Fase 2: pulizia + recensioni negozio + rate
   ============================================================ */

/* Rimozioni (solo scheda prodotto): flag "Nuovo", "Condividi" social,
   "Nessun punto premio" (totloyaltyadvanced), badge nero Klarna */
.product__container .product-flags,
.product__additional-info .ps-sharebuttons,
#loyalty,
.klarna-onsite-messaging-container,
.klarnapayment-kec-wrapper { display: none !important; }

/* Titolo prodotto blu bold come produzione (misure nel nome tenute) */
.product__right .product__name { color: #084c95; font-weight: 700; }

/* Riga rating NEGOZIO (Skeepers) sotto il titolo */
.mp-shop-reviews {
  display: inline-block;
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: #2b96ea;
  text-decoration: none;
  font-weight: 500;
}
.mp-shop-reviews:hover { text-decoration: underline; color: #084c95; }
.mp-shop-reviews__score { font-weight: 700; }

/* Riga rate Klarna/PayPal (sostituisce il badge nero Klarna) */
.mp-installments {
  margin: .4rem 0 .25rem;
  font-size: .95rem;
  color: #2b2b2b;
}
.mp-installments strong { font-weight: 700; color: #000; }
.mp-installments__brand { font-weight: 700; white-space: nowrap; }
.mp-installments__brand--klarna { background: #ffb3c7; color: #17120b; padding: 1px 6px; border-radius: 4px; font-size: .85em; }
.mp-installments__brand--paypal { color: #003087; }

/* Riferimento articolo: a destra sulla riga del prezzo come in produzione */
.mp-product-ref {
  font-size: 0.82rem;
  color: #6a7686;
  margin: 0.1rem 0 0.5rem;
}
.mp-product-ref__label::after {
  content: ":";
}
.mp-product-ref__value {
  font-weight: 600;
  color: #16324f;
  margin-left: 0.25rem;
}
#product .product__prices .mp-price-row .mp-product-ref {
  margin: 0 0 0 auto;
  align-self: center;
  text-align: right;
  white-space: nowrap;
}
/* sotto i 768px torna sopra al prezzo, come prod */
@media (max-width: 767.98px) {
  #product .product__prices .mp-price-row .mp-product-ref {
    order: -1;
    flex: 0 0 100%;
    margin: 0;
    text-align: left;
  }
}

/* ===== Riga prezzo come in produzione (Warehouse) =====
   Prod: prezzo 2.125rem bold nero, listino barrato accanto, badge sconto
   bianco su #e30000 (verificato su .discount in iqitthemeeditor/custom_s_1.css).
   Il markup su una riga sola arriva dall'override product-prices.tpl. */
#product .product__prices .product__price {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
}
#product .product__prices .product__discount-price {
  font-size: 1.25rem;
  line-height: 1;
  color: #6a7686;
}
#product .product__prices .mp-discount-badge {
  display: inline-block;
  background: #e30000;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: .3em .5em;
  border-radius: 4px;
  white-space: nowrap;
}
/* la riga prezzo resta allineata sulla base anche quando va a capo */
#product .product__prices .mp-price-row { align-items: baseline; row-gap: .35rem; }
#product .product__prices .mp-price-row .mp-discount-badge { align-self: center; }

@media (max-width: 575.98px) {
  #product .product__prices .product__price { font-size: 1.75rem; }
  #product .product__prices .product__discount-price { font-size: 1.1rem; }
  #product .product__prices .mp-discount-badge { font-size: .9rem; }
}

/* Stelline fisse accanto alla riga recensioni negozio */
.mp-shop-reviews-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-bottom: .55rem; }
.mp-shop-reviews-wrap .mp-shop-reviews { margin: 0; }
.mp-shop-reviews__stars { display: inline-flex; color: #feb801; line-height: 1; }
.mp-shop-reviews__stars .material-icons { font-size: 18px; }

/* ============================================================
   SCHEDA PRODOTTO — Fase 3: box consegna, rassicurazioni,
   recensioni Skeepers, WhatsApp, pagamenti accettati
   ============================================================ */

/* ===== Box "CONSEGNA PREVISTA" (modulo estimateddelivery) =====
   Layout a 3 colonne come da screen _migrazione/screens/28.07.2026.
   Il markup arriva dall'override di tema:
   themes/hummingbirdchild/modules/estimateddelivery/views/templates/hook/estimateddelivery-ob.tpl
   L'intestazione NON è più un ::before con testo italiano hardcoded (era un bug in EN/ES):
   ora è nel template, tradotta. */
#estimateddelivery.estimateddelivery-product {
  border: 1px solid #cfe8d4;
  background: #f6fbf7;
  border-radius: 12px;
  padding: .8rem 1rem .9rem;
  margin: .85rem 0;
}

/* il modulo colora di azzurrino i div interni quando è attivo lo skin ed_lightblue
   (`.ed_lightblue div { background:#FCFEFF; border-color:#ACD8E4 !important }`):
   togliamo lo sfondo, e i divisori delle colonne li riportiamo noi (serve !important,
   il modulo lo mette su border-color) */
#estimateddelivery.mp-ed div {
  background: none;
}
/* il modulo incornicia ogni figlio diretto (`.estimateddelivery > div { border:1px solid #ccc }`):
   era il riquadro doppio dentro al box verde */
#estimateddelivery.mp-ed > div {
  border: 0;
  padding: 0;
  margin-bottom: 0;
}
/* il modulo fa `.ed_item span::first-letter { text-transform: uppercase }`:
   inerte sugli span inline, ma i nostri sono block → maiuscolizzerebbe "e"/"con" */
#estimateddelivery.mp-ed .ed_item span::first-letter {
  text-transform: none;
}

/* intestazione */
.mp-ed__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #1a7f3c;
  margin-bottom: .65rem;
}
.mp-ed__head-icon { flex: 0 0 auto; }
.mp-ed__head-text {
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* riga: badge + 3 colonne con divisori */
.mp-ed__row {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.mp-ed__row.hideMe { display: none; }

.mp-ed__badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfe7ec;
  color: #4a5d70;
}

.mp-ed__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  font-size: .78rem;
  line-height: 1.3;
  color: #6a7686;
}
.mp-ed__col--when { flex: 1 1 32%; }
.mp-ed__col--dates {
  flex: 0 1 auto;
  text-align: center;
  padding: 0 .8rem;
  border-left: 1px solid #cfe3d5 !important;
  border-right: 1px solid #cfe3d5 !important;
  border-top: 0;
  border-bottom: 0;
  border-style: solid;
  border-width: 0 1px;
}
.mp-ed__col--carrier { flex: 1 1 38%; }

/* i valori in evidenza (orario, date, prezzo) */
.mp-ed .mp-ed__big {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a9d3f;
  line-height: 1.25;
}
.mp-ed .date_green { color: #1a9d3f; font-weight: 700; }
.mp-ed__sep { display: block; font-size: .78rem; color: #6a7686; }
.mp-ed__label { display: block; }
.mp-ed__carrier {
  display: block;
  font-weight: 700;
  color: #16324f;
  font-size: .82rem;
}
.mp-ed__carrier-img { max-height: 22px; width: auto; margin-bottom: .2rem; }
.mp-ed__price--free { text-transform: uppercase; }

/* il countdown sostituisce l'orario: stessa resa */
.mp-ed .ed_countdown { display: block; }

/* ≤ 767px: colonne impilate, divisori orizzontali */
@media (max-width: 767.98px) {
  .mp-ed__row {
    flex-wrap: wrap;
    gap: .5rem .75rem;
  }
  .mp-ed__badge { width: 40px; height: 40px; }
  .mp-ed__col--when { flex: 1 1 0; }
  .mp-ed__col--dates {
    flex: 0 0 auto;
    padding: 0 0 0 .75rem;
    border-right: 0 !important;
    text-align: right;
  }
  /* la riga corriere torna a testo corrente: `display:block`, altrimenti i figli
     di un flex container vengono "blockificati" e l'inline non ha effetto */
  .mp-ed__col--carrier {
    display: block;
    flex: 1 1 100%;
    padding-top: .5rem;
    border-top: 1px solid #cfe3d5 !important;
    border-width: 1px 0 0;
  }
  .mp-ed__col--carrier .mp-ed__label,
  .mp-ed__col--carrier .mp-ed__carrier,
  .mp-ed__col--carrier .mp-ed__big {
    display: inline;
  }
  .mp-ed__col--carrier .mp-ed__big { margin-left: .35rem; }
}

/* Riga rassicurazioni (Corriere / InPost / Reso / Assistenza) */
/* Pannello morbido 2x2 con icone in badge tondo (coerente con la fascia reassurance home) */
.mp-product-reassurance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem .9rem;
  margin: 1.25rem 0;
  padding: .9rem 1rem;
  background: #f6f8fb;
  border: 1px solid #e8eef6;
  border-radius: 12px;
}
.mp-reass-item { display: flex; align-items: center; gap: .65rem; }
.mp-reass-item .material-icons {
  font-size: 20px;
  color: #084c95;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f0fa;
  border-radius: 50%;
}
.mp-reass-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mp-reass-txt strong { font-size: .84rem; color: #16324f; font-weight: 700; }
.mp-reass-txt span { font-size: .74rem; color: #6a7686; }
@media (max-width: 575.98px) {
  .mp-product-reassurance { gap: .5rem .7rem; padding: .8rem .85rem; }
  .mp-reass-item .material-icons { width: 34px; height: 34px; font-size: 18px; }
  .mp-reass-txt strong { font-size: .8rem; }
  .mp-reass-txt span { font-size: .7rem; }
}
/* MP 28/07 — da desktop il pannello era troppo minuto: testi più grandi e
   celle separate da divisori invece che da spazio vuoto (stesso linguaggio
   del box "Consegna prevista" qui sopra). */
@media (min-width: 992px) {
  .mp-product-reassurance {
    gap: 0;
    padding: .25rem .35rem;
    border-radius: 14px;
  }
  .mp-reass-item {
    gap: .8rem;
    padding: .95rem 1.1rem;
  }
  /* divisori della griglia 2x2: verticale sulla colonna sinistra, orizzontale sulla prima riga */
  .mp-reass-item:nth-child(odd) { border-inline-end: 1px solid #e3ebf5; }
  .mp-reass-item:nth-child(-n+2) { border-block-end: 1px solid #e3ebf5; }
  .mp-reass-item .material-icons {
    width: 44px;
    height: 44px;
    font-size: 23px;
    background: #e2ecf9;
  }
  .mp-reass-txt { line-height: 1.3; gap: .1rem; }
  .mp-reass-txt strong {
    font-size: .98rem;
    letter-spacing: .1px;
    color: #0f2c49;
  }
  .mp-reass-txt span { font-size: .85rem; color: #5c6b7d; }
}

/* Riepilogo recensioni Skeepers (statico) */
.mp-reviews-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1500px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f4f7fb;
  border-radius: 12px;
  text-align: center;
  scroll-margin-top: 100px;
}
.mp-reviews-score { font-size: 2.6rem; font-weight: 800; color: #084c95; line-height: 1; }
.mp-reviews-score span { font-size: 1.2rem; color: #8a97a6; font-weight: 600; }
.mp-reviews-main { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.mp-reviews-stars { display: flex; color: #feb801; }
.mp-reviews-stars .material-icons { font-size: 26px; }
.mp-reviews-label { font-weight: 700; font-size: 1.1rem; color: #2b2b2b; }
.mp-reviews-sub { font-size: .85rem; color: #777; }
/* box recensioni cliccabile → sito recensioni (recensioni-verificate.com) */
a.mp-reviews-box { text-decoration: none; color: inherit; transition: background-color .15s ease; }
a.mp-reviews-box:hover { background: #eaf1fa; }
.mp-reviews-cta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .4rem; color: #084c95; font-weight: 700; font-size: .9rem; }
.mp-reviews-cta .material-icons { font-size: 18px; }
a.mp-reviews-box:hover .mp-reviews-cta { text-decoration: underline; }

/* Banner WhatsApp */
.mp-whatsapp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1500px;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  background: #1faa52;
  color: #fff;
  border-radius: 12px;
}
.mp-wa-left { display: flex; align-items: center; gap: 1rem; }
.mp-wa-icon { flex: 0 0 auto; display: inline-flex; }
.mp-wa-txt { display: flex; flex-direction: column; }
.mp-wa-txt strong { font-size: 1.1rem; letter-spacing: .4px; }
.mp-wa-txt span { font-size: .9rem; opacity: .95; }
.mp-wa-btn {
  background: #fff;
  color: #128c4b;
  font-weight: 700;
  padding: .7rem 1.4rem;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
}
.mp-wa-btn:hover { background: #eafff2; color: #0b6b39; }
@media (max-width: 767.98px) {
  .mp-whatsapp-banner { justify-content: center; text-align: center; }
  .mp-wa-left { flex-direction: column; text-align: center; }
  .mp-wa-btn { width: 100%; text-align: center; }
}

/* Pagamenti accettati */
.mp-payments-block { max-width: 1500px; margin: 1.5rem auto 0; text-align: center; }
.mp-payments-title { font-size: 1rem; font-weight: 700; color: #2b2b2b; letter-spacing: .5px; margin-bottom: .75rem; }
.mp-payments-img { max-width: 100%; height: auto; }

/* ============================================================
   SLIDER PRODOTTI — "Potrebbero interessarti anche" (ps_categoryproducts)
   + "Prodotti visti di recente" (ps_viewedproduct)
   Attivato dalla classe .mp-products-slider sulla <section> (aggiunta negli
   override child dei due moduli). Scroll orizzontale CSS puro (no swiper JS):
   swipe su touch + scrollbar/drag su desktop. Robusto agli update dei moduli.
   ============================================================ */
.mp-products-slider .module-products__list { overflow: visible; }
/* Titolo sezione slider BLU come gli altri titoli ("Potrebbero interessarti anche",
   "Prodotti visti di recente") */
.mp-products-slider .section-title { color: #084c95; }

/* Header slider: linea blu unica che sale a gradino sopra il titolo e ridiscende
   (forma di produzione). Il gradino e' un ::before alto --mp-step: le due linee
   laterali si allineano al suo bordo inferiore con margin-top. */
.mp-products-slider .mp-slider-head {
  --mp-step: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.1rem;
}
.mp-slider-head__rule {
  flex: 1 1 auto;
  height: 2px;
  margin-top: calc(var(--mp-step) - 2px);
  background: #084c95;
  opacity: .9;
}
/* `flex: 0 1 auto` + min-width:0 = il titolo puo' RESTRINGERSI e va a capo
   invece di sforare (titoli lunghi in ES/EN a 390px sfondavano il viewport). */
.mp-slider-head__link {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 3px 1.35rem 0;
  background: transparent;
}
.mp-slider-head__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mp-step);
  border: 2px solid #084c95;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  transition: border-color .15s ease;
}
.mp-slider-head__link:hover::before { border-color: #06356b; }
.mp-products-slider .mp-slider-head .section-title {
  margin: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color .15s ease;
}
.mp-slider-head__link:hover .section-title { color: #06356b; }
/* "Vedi tutti →" in basso a destra, come in produzione */
.mp-products-slider .module-products__buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: .9rem;
}
.mp-slider-all {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #084c95;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .15s ease;
}
.mp-slider-all:hover { color: #06356b; text-decoration: none; }
.mp-slider-all__arrow {
  font-size: 1.15em;
  line-height: 1;
  transition: transform .15s ease;
}
.mp-slider-all:hover .mp-slider-all__arrow { transform: translateX(3px); }
@media (max-width: 575.98px) {
  .mp-products-slider .mp-slider-head { gap: .7rem; }
  .mp-slider-all { font-size: .85rem; }
  /* titolo piu' compatto: i testi lunghi (ES/EN) restano su una riga e le linee
     laterali restano visibili invece di ridursi a zero */
  .mp-products-slider .mp-slider-head .section-title { font-size: 1.05rem; }
  .mp-slider-head__link { padding: 3px .8rem 0; }
}
.mp-products-slider .products {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;   /* annulla eventuale grid del tema */
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 2px;
  /* overflow-y:hidden taglia l'alone in hover: servono ~12px sopra perche' non venga
     mozzato. Il margin-top negativo compensa, cosi' il layout non si sposta. */
  padding: 12px 2px 1rem;
  margin: -10px 0 0;
}
.mp-products-slider .products > .product-miniature,
.mp-products-slider .products > article {
  flex: 0 0 auto;
  width: 230px;
  max-width: 78vw;
  margin: 0;
  scroll-snap-align: start;
}
/* Barra di scroll NASCOSTA (si naviga con frecce su desktop, swipe su touch) */
.mp-products-slider .products { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.mp-products-slider .products::-webkit-scrollbar { height: 0; width: 0; display: none; }
@media (max-width: 767.98px) {
  .mp-products-slider .products > .product-miniature,
  .mp-products-slider .products > article { width: 62vw; max-width: 240px; }
}

/* Stelline oro sotto il titolo — su TUTTE le miniature prodotto (categoria, home,
   ricerca, slider...). Statiche, come la scheda (i prodotti non hanno recensioni in DB). */
.product-miniature__title::after {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: #feb801;
  font-size: 0.9rem;
  letter-spacing: 2px;
  line-height: 1;
  margin-top: 6px;
  text-align: center;
}

/* Etichetta SCONTO sulle miniature: gialla (#feb801) come le stelline, testo BLU bold.
   Solo il flag .discount (i flag "Novità"/altri non vengono toccati).
   Il bordo del tema era blu (#084c95) -> reso giallo come lo sfondo (sparisce). */
.product-flags .discount {
  background-color: #feb801 !important;
  color: #084c95 !important;
  font-weight: 700 !important;
  border-color: #feb801 !important;
}

/* Frecce laterali (iniettate da custom.js in .module-products__list) */
.mp-slider-wrap { position: relative; }
.mp-slider-arrow {
  position: absolute;
  top: 120px;                 /* sovrascritto via JS = centro immagine */
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(8,76,149,.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.mp-slider-arrow:hover { background: #084c95; box-shadow: 0 4px 14px rgba(8,76,149,.35); }
.mp-slider-arrow--prev { left: -8px; }
.mp-slider-arrow--next { right: -8px; }
.mp-slider-arrow::before {                 /* chevron disegnato con bordi */
  content: "";
  width: 11px;
  height: 11px;
  border-right: 2.5px solid #084c95;
  border-bottom: 2.5px solid #084c95;
}
.mp-slider-arrow:hover::before { border-color: #fff; }
.mp-slider-arrow--prev::before { transform: rotate(135deg); margin-left: 4px; }
.mp-slider-arrow--next::before { transform: rotate(-45deg); margin-right: 4px; }
.mp-slider-arrow.is-disabled { opacity: 0; pointer-events: none; }
/* su touch/mobile: niente frecce, si scorre con lo swipe */
@media (max-width: 991.98px) { .mp-slider-arrow { display: none !important; } }

/* ============================================================
   BOTTONE "FILTRI" mobile (apre l'offcanvas amazzingfilter)
   Iniettato da custom.js sopra la lista prodotti; solo mobile.
   ============================================================ */
#mp-mobile-filters-btn { display: none; }
@media (max-width: 991.98px) {
  #mp-mobile-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    background: #084c95;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
  }
  #mp-mobile-filters-btn .material-icons { font-size: 1.25rem; }
  #mp-mobile-filters-btn:active { background: #06356b; }
  /* nascondi il bottone nativo di amazzingfilter ("Filter", piccolo, in inglese)
     nella barra ordinamento: usiamo il nostro #mp-mobile-filters-btn. NON tocca
     il bottone di CHIUSURA dentro il pannello (.compact-close in #amazzing_filter). */
  .products__sort .compact-toggle { display: none !important; }
}

/* Drag-to-scroll desktop: cursore mano + durante il trascinamento niente snap/selezione */
@media (hover: hover) and (pointer: fine) {
  .mp-products-slider .products { cursor: grab; }
  .mp-products-slider .products.mp-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .mp-products-slider .products.mp-dragging a,
  .mp-products-slider .products.mp-dragging img { pointer-events: none; }
}

/* ============================================================
   BREADCRUMB — solo prima lettera maiuscola (omogenea)
   I nomi categoria in DB sono a volte MAIUSCOLI ("MINUTERIA PRESEPE"):
   lowercase su tutto + ::first-letter uppercase. inline-block serve
   perche' ::first-letter non si applica agli inline (<a>/<span>).
   ============================================================ */
.breadcrumb .breadcrumb-link,
.breadcrumb .breadcrumb-item > span {
  text-transform: lowercase;
  display: inline-block;
}
.breadcrumb .breadcrumb-link::first-letter,
.breadcrumb .breadcrumb-item > span::first-letter {
  text-transform: uppercase;
}

/* Tutto in grassetto; antenati neri, pagina corrente blu (inverso del tema) */
.breadcrumb {
  font-weight: 700;
}
.breadcrumb .breadcrumb-link {
  color: #212529;
}
.breadcrumb .breadcrumb-link:hover,
.breadcrumb .breadcrumb-link:focus {
  color: #084c95;
}
.breadcrumb .breadcrumb-item > span {
  color: #084c95;
}

/* ============================================================
   BADGE DISPONIBILITA' + AZIONI CARRELLO (ritocchi grafici 04/07)
   - Etichetta "Disponibile/Non disponibile" resa a PILLOLA moderna
     (scheda prodotto + riga carrello) invece del solo testo.
   - "Rimuovi" nel carrello -> icona cestino.
   Tutto CSS-only (nessun override .tpl) -> update-proof, no clear cache.
   ============================================================ */

/* --- Badge disponibilita' SCHEDA PRODOTTO --- */
.product__availability-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .72rem .32rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
  width: fit-content;       /* stringe sul testo (il contenitore flex la stirerebbe) */
  max-width: 100%;
  align-self: flex-start;
}
.product__availability-status .product__availability-icon { font-size: 18px; margin: 0; }
.product__availability-status .product__availability-messages { line-height: 1.15; }
.product__availability-status.text-success { background: #e7f6ec; border: 1px solid #bfe6cb; color: #198a3a !important; }
.product__availability-status.text-warning { background: #fff5e5; border: 1px solid #f2dcae; color: #b0761a !important; }
.product__availability-status.text-danger  { background: #fdecec; border: 1px solid #f3c4c4; color: #d12f2f !important; }
/* eventuale sotto-messaggio resta piccolo sotto la pillola, non dentro */
.product__availability-status .product__availability-messages small { font-weight: 500; opacity: .85; }

/* --- Badge disponibilita' RIGA CARRELLO --- */
.product-line__item--availability { margin: .3rem 0; }
.product-line__item-availability-message {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .2rem .62rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  width: fit-content;       /* stringe sul testo */
  max-width: 100%;
}
.product-line__item-availability-message .product-line__item-availability-icon { font-size: 15px; }
.product-line__item-availability-message.text-success { background: #e7f6ec; border: 1px solid #bfe6cb; color: #198a3a !important; }
.product-line__item-availability-message.text-warning { background: #fff5e5; border: 1px solid #f2dcae; color: #b0761a !important; }
.product-line__item-availability-message.text-danger  { background: #fdecec; border: 1px solid #f3c4c4; color: #d12f2f !important; }

/* --- "Rimuovi" carrello -> icona cestino --- */
.product-line__actions .js-remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #9a9a9a;
  font-size: 0;                 /* nasconde il testo "Rimuovi" (resta per screen reader via aria-label) */
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.product-line__actions .js-remove-from-cart::before {
  font-family: "Material Icons";
  content: "\E872";             /* cestino (delete) */
  font-size: 20px;
  line-height: 1;
  font-weight: normal;
}
.product-line__actions .js-remove-from-cart:hover,
.product-line__actions .js-remove-from-cart:focus {
  color: #d12f2f;
  background: #fdecec;
  border-color: #f3c4c4;
}

/* ============================================================
   HEADER MOBILE BLU (prova 04/07) — sfondo blu brand #084c95,
   logo bianco del footer, icone/label bianche. Solo <=991.98px.
   Le regole restano DOPO quelle mobile scure -> vincono per ordine.
   ============================================================ */
@media (max-width: 991.98px) {
  /* sfondo blu della riga header (logo + icone) */
  .header-bottom { background: #084c95 !important; }

  /* logo bianco del footer al posto del logo scuro (swap via content:url) */
  .header-bottom__logo img {
    content: url('/themes/hummingbirdchild/assets/img/logo-footer-bianco.png') !important;
    max-height: 46px !important;
  }

  /* SEARCH (offcanvas toggle): glyph + label "Cerca" bianchi */
  .ps-searchbar--mobile .header-block__icon,
  .ps-searchbar--mobile .header-block__action-btn,
  .ps-searchbar--mobile .header-block__action-btn::after { color: #fff !important; }

  /* ACCOUNT + CARRELLO: label bianche + icone SVG scure -> bianche via filter */
  #_mobile_ps_customersignin .header-block__action-btn,
  #_mobile_ps_shoppingcart .header-block__action-btn,
  #_mobile_ps_customersignin .header-block__title,
  #_mobile_ps_shoppingcart .header-block__title { color: #fff !important; }
  #_mobile_ps_customersignin .header-block__icon,
  #_mobile_ps_shoppingcart .header-block__icon { filter: brightness(0) invert(1) !important; }

  /* HAMBURGER "Menù": barrette + label bianche */
  .mp-mobile-menu-btn { color: #fff !important; }
  .mp-mobile-menu-btn__icon span { background: #fff !important; }

  /* FIX menu-sotto-il-contenuto sulla SCHEDA PRODOTTO: l'overlay menu (z10000)
     e' intrappolato dentro `.ets_mm_megamenu` che ha position:relative;z-index:2
     -> il suo intero sottoalbero vale z2 alla radice, e la barra fissa carrello
     (position:fixed z1035) lo scavalca (1035>2). NB `.header` e' position:static
     quindi il suo z-index e' INERTE (non serve toccarlo). Alziamo il contesto del
     megamenu a 1049 (sopra barra 1035 e icona search flottante, sotto modali PS
     1050+). Su mobile il megamenu chiuso e' collassato (height:0) quindi alzare
     lo z-index non causa overlap: conta solo quando l'overlay e' aperto. */
  .header-nav-full-width .ets_mm_megamenu { z-index: 2147483000 !important; }
  .header-nav-full-width .ets_mm_megamenu .mm_menus_ul { z-index: 2147483000 !important; }

  /* --- BARRA TOP in blu piu' scuro (two-tone) sopra l'header blu --- */
  .header-top--mp {
    background: #06356b !important;
    border-bottom-color: rgba(255,255,255,.15) !important;
  }
  .header-top--mp a,
  .header-top--mp .header-top__right,
  .header-top__wishlist,
  .header-top__wishlist .material-icons,
  .header-top--mp .mp-lang__toggle,
  .header-top--mp .mp-lang__caret { color: #fff !important; }
  /* separatori chiari sul blu */
  .header-top__wishlist,
  .header-top--mp #_desktop_currency_selector,
  .header-top--mp .ps-currency-selector { border-left-color: rgba(255,255,255,.28) !important; }
  /* selettore valuta: testo bianco + freccia bianca (era chevron scuro invisibile sul blu) */
  .header-top--mp .ps-currencyselector .form-select {
    color: #fff !important;
    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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
  }
  /* il menu a tendina lingua ha SFONDO BIANCO: le voci devono restare SCURE.
     (la regola .header-top--mp a{color:#fff} qui sopra le rendeva bianco-su-bianco) */
  .header-top--mp .mp-lang__menu .mp-lang__item { color: #2b2b2b !important; }
  .header-top--mp .mp-lang__menu .mp-lang__item:hover,
  .header-top--mp .mp-lang__menu .mp-lang__item--active { color: #084c95 !important; }

  /* ---- Icone lato destro: ordine Cerca | Carrello | Account (account a destra) ---- */
  .ps-searchbar--mobile      { order: 1 !important; }
  #_mobile_ps_shoppingcart   { order: 2 !important; }
  #_mobile_ps_customersignin { order: 3 !important; }

  /* ---- Icone SVG moderne (lineari, bianche) coerenti tra loro (26px) ---- */
  .ps-searchbar--mobile .header-block__icon,
  #_mobile_ps_shoppingcart .header-block__icon,
  #_mobile_ps_customersignin .header-block__icon {
    width: 26px !important;
    height: 26px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: none !important;   /* le SVG sono gia' bianche: niente hack filter */
  }
  .ps-searchbar--mobile .header-block__icon {
    font-size: 0 !important;   /* nasconde il glyph material della search */
    background-image: url("/themes/hummingbirdchild/assets/img/mp-search.svg") !important;
  }
  #_mobile_ps_shoppingcart .header-block__icon {
    background-image: url("/themes/hummingbirdchild/assets/img/mp-cart.svg") !important;
  }
  #_mobile_ps_customersignin .header-block__icon {
    background-image: url("/themes/hummingbirdchild/assets/img/mp-user.svg") !important;
  }

  /* Barra top: ordine/spaziatura definiti nel base (desktop+mobile); qui solo
     il COLORE dei separatori adattato al fondo blu scuro del mobile. */
  .header-top--mp #_desktop_ps_currencyselector,
  .header-top--mp #_desktop_ps_languageselector { border-left-color: rgba(255,255,255,.28) !important; }
}

/* ============================================================
   SKIP-LINK "Vai al contenuto principale" nascosto.
   Hummingbird lo rende in layout-both-columns.tpl come
   `.skip-link.visually-hidden-focusable`: resta fuori schermo ma
   COMPARE quando riceve il focus da tastiera (regola `.skip-link:focus`
   nel theme.css) -> "appare a volte". Rimosso su richiesta.
   NB: è un elemento di accessibilità (WCAG bypass block); nascondendolo
   si perde la scorciatoia da tastiera al contenuto principale.
   ============================================================ */
.skip-link { display: none !important; }

/* Titoli colonne footer in MAIUSCOLO da tablet in su */
@media (min-width: 768px) {
  .footer-block__title {
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Modulo `pla` — blocco "Varianti disponibili" nelle miniature + popup
   Il modulo e' stilato per il tema Warehouse: qui lo si riporta al linguaggio
   di Hummingbird senza toccarne i file (aggiornamenti del modulo salvi).
   ========================================================================== */

/* --- Il pulsante che apre il popup ---
   Prima: riquadro grigio con l'icona `zoom_in` flottata a destra → sembrava un
   campo di ricerca invece di qualcosa da cliccare. Ora e' un pulsante bordato
   nel blu del tema, largo quanto la card, con la freccia "apri". */
.pla_matrix_dropdown {
  margin: .5rem 0 0;
}

.pla_matrix_dropdown .pla_matrix_dropdown_block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid #084c95;
  border-radius: 8px;
  background: #fff;
  color: #084c95;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.pla_matrix_dropdown .pla_matrix_dropdown_block:hover {
  background: #084c95;
  color: #fff;
}

/* L'icona era `float: right` (quindi staccata dal testo) e con il glifo della
   lente. La riportiamo in linea e le diamo una freccia verso il basso. */
.pla_matrix_dropdown .crotate {
  float: none;
  display: inline-flex;
  align-items: center;
}

.pla_matrix_dropdown .crotate::after,
.pla_popup .crotate::after {
  content: "\E5CF" !important;   /* expand_more */
  font-size: 20px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: 0 !important;
  right: auto !important;
}

/* Su touch l'hover resta "appiccicato" sull'ultimo elemento toccato */
@media (hover: none) {
  .pla_matrix_dropdown .pla_matrix_dropdown_block:hover {
    background: #fff;
    color: #084c95;
  }
  .pla_matrix_dropdown .pla_matrix_dropdown_block:active {
    background: #084c95;
    color: #fff;
  }
}

/* --- Popup varianti: selettore quantita' su UNA riga ---
   I tre elementi (meno / numero / piu') sono inline dentro una cella stretta,
   quindi il "piu'" andava a capo. `white-space: nowrap` sulla cella impedisce
   l'interruzione; il resto li allinea come il selettore quantita' del tema. */
#pla_matrix td.pla_addtocart {
  white-space: nowrap;
}

#pla_matrix .decrease_quantity,
#pla_matrix .increase_quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  border: 1px solid #dfdfdf;
  background: #fff;
}

#pla_matrix .decrease_quantity {
  border-radius: 6px 0 0 6px;
  border-right: 0;
}

#pla_matrix .increase_quantity {
  border-radius: 0 6px 6px 0;
  border-left: 0;
}

#pla_matrix .qty {
  width: 40px;
  height: 28px;
  vertical-align: middle;
  top: 0;                  /* annulla il `position:relative; top:1px` del modulo */
  font-size: .875rem;
}

/* Il pulsante Aggiungi resta sotto (il modulo lo mette in `clear:both`),
   ma con un po' d'aria e la larghezza del gruppo quantita'. */
#pla_matrix .ct_submit {
  margin-top: .45rem;
}

/* blocco video prodotto (modulo productvideo): il modulo non mette margini e
   restava incollato ai correlati */
.pv-embedded-player {
  margin-block: 0 3rem;    /* sopra i 48px ce li mette gia' .product__bottom */
  max-width: 900px;
}

.mp-video-title {
  max-width: 900px;
  color: #084c95;
}

/* la miniatura del video: il modulo la blocca a 100px (pv_custom.css) e la
   copertina YouTube e' 4:3 con le bande nere */
/* custom.js alza la copertina a maxresdefault (1280x720, 16:9 senza bande).
   `contain` su fondo bianco: il fotogramma si vede INTERO e le fasce sopra/sotto
   si confondono col bianco delle foto prodotto (con `cover` il soggetto veniva
   tagliato ai lati e sembrava un ingrandimento sgranato). */
.product__thumbnails-list .pv-thumb .video-thumb {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ripiego: se maxresdefault non esiste si torna a hqdefault, 4:3 con le bande
   nere sopra e sotto, e vanno ritagliate */
.product__thumbnails-list .pv-thumb .video-thumb.mp-pv-thumb--boxed {
  height: 133.34%;
  margin-top: -16.67%;
}

/* stessa scatola delle altre miniature (il tema le stampa 160x160 fisse) */
.product__thumbnails-list .pv-thumb {
  position: relative;
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: var(--bs-border-radius);
  cursor: pointer;
}

.product__thumbnails-list .pv-thumb::after {
  content: "\E037";                 /* play_arrow */
  font-family: "Material Icons";
  position: absolute;
  bottom: .3rem;
  right: .3rem;
  top: auto;
  left: auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(8, 76, 149, .85);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

/* "Totale:" ridondante: ora l'etichetta del totale sta nella cella a sinistra */
#module-codfee-payment #total_price_container p {
  display: none;
}

/* pagina di conferma del contrassegno: la frase "Prego conferma il tuo ordine..." */
#module-codfee-payment form > p > strong {
  display: inline-block;
  margin-top: .5rem;
  color: #c1121f;
  font-size: 1.125rem;
  line-height: 1.35;
}

/* il bonifico bancario e' l'unico metodo senza logo: gliene diamo uno nostro */
.payment-options__list .payment-option:has(input[data-module-name="ps_wirepayment"]) .payment-option__label::before {
  content: "";
  flex: 0 0 64px;
  height: 34px;
  background: url("../img/bonifico-bancario.svg") left center / contain no-repeat;
}

/* marchio PayPal spostato da custom.js dentro la label: stesso slot dei loghi degli altri metodi */
.payment-options__list .payment-option__label [paypal-mark-container] {
  display: block !important;
  flex: 0 0 64px;
  width: 64px;
}

.payment-options__list .payment-option__label .paypal-mark {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.payment-options__list .payment-option__label .paypal-mark img {
  display: block;
  width: 64px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

/* ripiego se il JS non gira: il modulo lo appende in coda a .payment-option, che
   in Hummingbird contiene anche div blocco, e senza questo il marchio va a capo */
.payment-option:has(> [paypal-mark-container]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.payment-option:has(> [paypal-mark-container]) > .payment-option__form-check {
  order: 1;
  flex: 0 1 auto;
  margin-bottom: 0;
}

.payment-option:has(> [paypal-mark-container]) > [paypal-mark-container] {
  order: 2;
  display: flex !important;
  align-items: center;
}

.payment-option:has(> [paypal-mark-container]) > :not(.payment-option__form-check):not([paypal-mark-container]) {
  order: 3;
  flex: 0 0 100%;
}

/* ============================================================
   PAGINE LOGIN E REGISTRAZIONE — struttura come produzione
   ============================================================ */

#authentication .page-title-section,
#registration .page-title-section {
  color: #084c95;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
}

/* Riquadro unico attorno al form, come il .page-content di prod */
#authentication .login,
#registration .register-form {
  border: 1px solid rgba(160, 160, 160, .25);
  padding: 1rem;
  margin-bottom: 25px;
}

/* Etichetta a sinistra del campo (prod: col-md-2 + col-md-8 + col-md-2 nota) */
@media (min-width: 768px) {
  #authentication #login-form .mb-3,
  #registration #customer-form .mb-3 {
    display: grid;
    grid-template-columns: 16.6667% 66.6667% 1fr;
    align-items: center;
    column-gap: 15px;
  }
  #authentication #login-form .mb-3 > .form-label,
  #registration #customer-form .mb-3 > .form-label {
    margin-bottom: 0;
    padding: 7px 0;
  }
  #authentication #login-form .mb-3 > *:not(.form-label),
  #registration #customer-form .mb-3 > *:not(.form-label) {
    grid-column: 2;
  }
  /* La nota di campo ("NON OBBLIGATORIO") e' un div, l'aiuto sotto al campo e'
     uno span: il div va nella terza colonna come in prod */
  #registration #customer-form .mb-3 > div.form-text {
    grid-column: 3;
    align-self: center;
  }
}

#authentication #login-form .form-control,
#registration #customer-form .form-control {
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
}

#authentication .login__forgot-password {
  text-align: center;
  margin-top: 1rem;
  padding-bottom: 15px;
}

#authentication .login__forgot-password a {
  color: #084c95;
  font-size: 1.3rem;
}

#authentication .login__form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

/* 200px come prod, ma cresce se l'etichetta tradotta e' piu' lunga (EN) */
#authentication .login__form-footer .btn {
  min-width: 200px;
  white-space: nowrap;
  border-radius: 6px;
  padding: 8px 20px;
}

#authentication .login__register-btn,
#authentication .login__register-btn:hover,
#authentication .login__register-btn:focus {
  background-color: #2b96ea;
  border: 1px solid #2b96ea;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#authentication .login__register-btn:hover {
  background-color: #1f7dc7;
  border-color: #1f7dc7;
}

#authentication .login__register-btn .material-icons {
  font-size: 1.1em;
  margin-left: .15rem;
}

@media (max-width: 575.98px) {
  #authentication .login__form-footer .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  #authentication .login__forgot-password a {
    font-size: 1.05rem;
  }
}

/* Occhio mostra/nascondi password neutro come prod, non blu pieno */
#authentication #login-form .password-field .btn,
#registration #customer-form .password-field .btn {
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  color: #555;
}
#authentication #login-form .password-field .btn:hover,
#registration #customer-form .password-field .btn:hover {
  background-color: #e4e4e4;
  border-color: #cfcfcf;
  color: #222;
}

/* --- Solo REGISTRAZIONE --- */

/* "Sei gia' registrato?" in cima al riquadro come prod, non in fondo */
#registration .register-form__login-prompt {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

#registration .register-form__login-prompt .material-icons {
  font-size: 1.1rem;
  color: #555;
}

#registration .register-form__login-prompt a {
  color: #084c95;
  text-decoration: underline;
}

/* Pulsante di invio centrato (di serie e' allineato a destra) */
#registration #customer-form .buttons-wrapper {
  justify-content: center;
}

#registration #customer-form .buttons-wrapper .btn {
  min-width: 200px;
  border-radius: 6px;
  padding: 8px 20px;
}

@media (max-width: 575.98px) {
  #registration #customer-form .buttons-wrapper .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   FOOTER SNELLITO (mockup footer-style.png, 13/08)
   ============================================================ */

/* Contatti su una riga con icona */
.mp-contact-row {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-bottom: .45rem;
  line-height: 1.35;
}
.mp-contact-row .material-icons {
  font-size: 1.05rem;
  line-height: 1.35;
  flex: 0 0 auto;
  opacity: .85;
}
.mp-contact-row address {
  margin: 0;
  font-style: normal;
}
.mp-footer-contact .ps-contactinfo__phone { margin-top: 0; }

/* Colonne piu' strette e compatte */
.footer__main { padding-block: 2rem 1rem; }
.footer__main .footer-block__title { margin-block-end: .55rem; }
.footer__main .footer-block__list li { margin-bottom: .1rem; }

/* Striscia: social | copyright | pagamenti sulla stessa riga */
.mp-footer-strip { padding-top: 1.1rem; margin-top: .75rem; }
.mp-footer-copy { flex: 1 1 auto; text-align: center; }
.mp-footer-copy .copyright { padding-block-start: 0; }

/* Barra legale in fondo */
.mp-footer-legal {
  background: #063a73;
  padding: .6rem 0;
  text-align: center;
  font-size: .875rem;
}
.mp-footer-legal a { color: rgba(255, 255, 255, .92); }
.mp-footer-legal a:hover,
.mp-footer-legal a:focus { color: #fff; text-decoration: underline; }
.mp-footer-legal__sep { color: rgba(255, 255, 255, .45); margin: 0 .85rem; }

@media (max-width: 767.98px) {
  .mp-footer-strip { flex-direction: column; gap: .9rem; }
  .mp-footer-copy { text-align: center; }
  .mp-footer-legal__sep { margin: 0 .5rem; }
}

/* Il margine sotto le colonne (40px) serve solo quando vanno a capo su mobile.
   Su mobile lasciato com'e': toccarlo colpisce anche i blocchi annidati e alza il footer. */
@media (min-width: 768px) {
  .footer__main-top .footer-block,
  .footer__main-top .ps-contactinfo { margin-bottom: 0; }
}

/* ============================================================
   CARRELLO — riga prodotto su una riga sola (impaginazione come prod)
   Di serie Hummingbird impila: info+prezzo a sinistra, quantita'+totale a
   destra, "Rimuovi" su una terza riga a tutta larghezza.
   ============================================================ */

/* Desktop: info | prezzo unitario | quantita' | totale | rimuovi */
@media (min-width: 768px) {
  .product-line__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 9rem auto auto;
    grid-template-areas: "info unit qty total act";
    align-items: center;
    gap: 1rem;
  }
  .product-line__content-left { grid-area: info; margin-block-end: 0; }
  .product-line__unit         { grid-area: unit; }
  .product-line__qty          { grid-area: qty; }
  .product-line__total        { grid-area: total; min-width: 5.5rem; text-align: right; }
  .product-line__actions      { grid-area: act; display: flex; justify-content: flex-end; }
}

/* Mobile: foto+descrizione sopra, poi prezzo | quantita' | totale | cestino su una riga */
@media (max-width: 767.98px) {
  .product-line__content {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "info info  info  info"
      "unit qty   total act";
    align-items: center;
    column-gap: .6rem;
    row-gap: .6rem;
  }
  .product-line__content-left { grid-area: info; margin-block-end: 0; }
  .product-line__unit         { grid-area: unit; }
  .product-line__qty          { grid-area: qty; }
  .product-line__total        { grid-area: total; justify-self: end; }
  .product-line__actions      { grid-area: act; display: flex; justify-content: flex-end; }
  /* lo stepper e' un .input-group: senza nowrap il "+" va sotto */
  .product-line__qty .quantity-button__group { flex-wrap: nowrap; }
  .product-line__qty .quantity-button input { max-width: 2.4rem; padding-left: .15rem; padding-right: .15rem; }
  .product-line__qty .quantity-button .btn { padding-left: .35rem; padding-right: .35rem; }
  .product-line__unit .product-line__item-price,
  .product-line__total .product-line__price { font-size: .9rem; }
}

/* Sotto i 576px la foto da 7rem non lascia spazio alle 4 celle: si rimpicciolisce
   lei invece di mandare a capo prezzo/quantita'/totale/cestino */
@media (max-width: 575.98px) {
  .product-line { gap: .9rem; }
  .product-line__img { width: 5rem; }
  .product-line__content { column-gap: .45rem; }
}
@media (max-width: 400px) {
  .product-line { gap: .7rem; }
  .product-line__img { width: 4rem; }
  .product-line__qty .quantity-button input { max-width: 2rem; }
  .product-line__qty .quantity-button .btn { padding-left: .25rem; padding-right: .25rem; }
}

.product-line__unit .product-line__item--prices { margin: 0; }
.product-line__unit .product-line__item-price { width: auto; }

/* Codice prodotto nella riga carrello (come prod) */
.product-line__reference {
  color: var(--bs-secondary-color);
  font-size: .8rem;
}

/* Icona del blocco "consegna stimata" nel carrello: il modulo la mette con
   ::before in FontAwesome (\f0d1 = camion), font che il tema non carica ->
   glifo invisibile. Riscritta col camion di Material Icons, che c'e' gia'.
   Una sola icona sul titolo: quella sulla riga corriere sarebbe un doppione. */
#ed_shopping_footer .ed_orderbefore::before {
  content: none;
}
#ed_shopping_footer .ed_summary_title::before {
  content: "\e558";
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 1;
  vertical-align: -4px;
  margin-right: 7px;
  color: #084c95;
}