/********************************************************
			Coderplace Custom Styles
********************************************************/
.tm-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.cp-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  display: block !important;
  flex-wrap: wrap;
}
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-wrapper-outer {
  overflow-x:clip;
  position: relative;
  float: left;
  width: 100%; 
  z-index: 4; 
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
  float: left;  
  display: flex;
  height: auto;
}
.owl-carousel .owl-item .manu_image a {
  display: inline-block;
}
.owl-carousel .owl-item .manu_image a img {
  max-width: 100%;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  /* fix */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  text-align: center;
}

/* mouse grab icon */
.customNavigation {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: 50%;
	direction: ltr !important;
	right: 0;
	left: auto;
  opacity: 0;
  -khtml-opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
}
.products .customNavigation {
	top: 48%;
}
.tmcategorylist .customNavigation, .testimonial-block-part .customNavigation {
	top: 54%;
}
.tmcategorylist:hover .customNavigation {
	opacity: 1;
	-khtml-opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
}
.customNavigation a.prev::before {
	content: "\E314";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	right: 5px;
	top: -1px;
	color: #808080;
}
.customNavigation a.next::before {
	content: "\E315";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	position: absolute;
	right: 3px;
	top: -1px;
	color: #808080;
}
#tmtestimonialcmsblock .customNavigation {
  top: -24px;
  z-index: 5;
  right: 15px;
}
#index #tmtestimonialcmsblock .customNavigation {
  top: -40px;
  right: 0;
}
.special-products .customNavigation {
	top: 52%;
}
.special-products:hover .customNavigation, 
.products:hover .customNavigation,
.testimonial-block-part:hover .customNavigation,
.tmblog-latest:hover .customNavigation, 
#tminstagramblock:hover .customNavigation,
.product-accessories:hover .customNavigation,
.productscategory-products:hover .customNavigation{
  opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.lastest_block .customNavigation {
	top: 44%;
}
.customNavigation i {
	color: #222 !important;
	cursor: pointer;
	font-size: 0;
	font-weight: 500;
	height: 38px;
	line-height: 32px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 38px;
	background: transparent;
	border-radius: 0;
	font-style: unset;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}

.customNavigation i.prev {
	background: transparent;
	right: auto;
	background: #fff;
	border-radius: 50%;
	left: -5px;
}
.customNavigation i.next {
	background: transparent;
	right: 0px;
	background: #fff;
	border-radius: 50%;
	right: -5px;
}
.tmcategorylist .customNavigation i.prev, 
.testimonial-block-part .customNavigation i.prev, 
#tminstagramblock .btn.prev.instagram_prev,
.special-products .customNavigation i.prev{
	left: -20px;
}
.tmcategorylist .customNavigation i.next, 
.testimonial-block-part .customNavigation i.next, 
#tminstagramblock .btn.next.instagram_next,
.special-products .customNavigation i.next  {
  right: -20px;
}
.customNavigation i.prev::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-left.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-left.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
#tmtestimonialcmsblock .customNavigation i.prev::before {
  right: 1px;
  font-weight: 500;
}
#tmtestimonialcmsblock .customNavigation i.next::before {
  right: 0;
  font-weight: 500;
}
.customNavigation i.next::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-right.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-right.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
.customNavigation i.next:hover::before,.customNavigation i.prev:hover::before  {
  color: #fff;
}
#cpleftbanner1 img,
#cpleftbanner2 img {
  max-width: 100%;
}
#cpleftbanner1 li,
#cpleftbanner2 li {
  overflow: hidden;
  position: relative;
  float: left;
  border-radius: 5px;
}
#cpleftbanner1 li a,
#cpleftbanner2 li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.footer-container .links.lastest_block .customNavigation i.prev:hover {
  color: #9bbab1 !important;
}
.footer-container .links.lastest_block .customNavigation i.next:hover {
  color: #9bbab1 !important;
}

@media (max-width: 1449px) {
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev,
  .special-products .customNavigation i.prev {
    left: -15px;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next,
   .special-products .customNavigation i.next {
    right: -15px;
  }
  .customNavigation i.next {
    right: 0;
  }
  .customNavigation i.prev {
    left: 0;
  }
}
@media (max-width: 1199px) {
  #tmtestimonialcmsblock .customNavigation {
    top: -36px;
    z-index: 5;
    right: -18px;
  }
}

@media (max-width: 991px) {
  #cpleftbanner1 li img,
  #cpleftbanner2 li a {
    width: auto;
  }
  #tmtestimonialcmsblock .customNavigation {
    top: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .customNavigation {
    opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev, 
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: 0;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next, 
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: 0;
  }
  #main .images-container .js-qv-mask .customNavigation {
    top: 13px;
  }
  .quickview .mask.additional_slider .customNavigation i.prev {
    left: -10px !important;
  }
  .quickview .mask.additional_slider .customNavigation i.next {
    right: -10px !important;
  }
  .btn.next.brand_next {
    left: auto;
    right: 0;
    position: absolute;
  }
  .btn.prev.brand_prev {
    left: 0;
    right: auto;
  }
  .customNavigation i.next {
    left: auto;
    right: 0;
  }
}
@media (max-width: 480px) {
}

/* ═══════════════════════════════════════════════════════════════
   H&S HOME SOLUTION — personalizzazioni child theme
   ───────────────────────────────────────────────────────────────
   Sopra questa riga: copia del custom.css del tema padre PRS04084.
   PrestaShop auto-registra /assets/css/custom.css risolvendo PRIMA
   nel child: se questo file non contenesse la copia del padre,
   le regole del padre (incluso il clip dei caroselli owl) andrebbero
   perse e la pagina prenderebbe scroll orizzontale.

   ⚠️  Dopo ogni aggiornamento del tema padre: riallineare la parte
       sopra confrontandola con PRS04084/assets/css/custom.css

   Palette: navy #0A1A2F · oro #E8A317
   Colori e font base si impostano dal modulo cp_themeoptions.
   Qui va solo ciò che il pannello non copre.
   ═══════════════════════════════════════════════════════════════ */

/* --- rete di sicurezza contro lo scroll orizzontale --- */
.owl-carousel .owl-wrapper-outer { overflow-x: clip; }

/* --- prezzo su richiesta: "CONTATTACI" al posto di 0,00 € --- */
/* il colore segue --primary-color del pannello cp_themeoptions:
   se cambi l'oro dall'admin, questa scritta lo segue da sola */
.price-on-request {
  text-transform: uppercase;
  color: var(--primary-color, #E8A317);
  font-size: .84em;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* scheda prodotto senza prezzo: etichetta + invito a chiamare,
   lo stesso "Contattaci" che compare nelle liste */
.hs-su-richiesta .product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hs-su-richiesta-etichetta {
  color: #6C7F96;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
}
.hs-su-richiesta .price-on-request { font-size: 1.3rem; }

/* ─── MENU ORIZZONTALE ───────────────────────────────────────────
   Voci: HOME · AZIENDA · MARCHI · CONTATTI · BLOG · USATO E EX DEMO
   Le categorie prodotto stanno nel menu verticale "Sfoglia le categorie".
   ──────────────────────────────────────────────────────────────── */

/* etichette sempre in maiuscolo: le pagine CMS sono salvate
   come "Azienda"/"Contatti", così non serve rinominarle */
.header-top-main #top-menu > li > a { text-transform: uppercase; }

/* USATO E EX DEMO in evidenza, oro.
   NB: #category-28 è l'id della categoria: se un giorno la ricrei
   da zero cambia, e questo selettore va aggiornato. */
.header-top-main #category-28 > a,
.header-top-main #category-28 > a:hover,
.header-top-main #category-28 > a:focus {
  color: var(--primary-color, #E8A317) !important;
  font-weight: 700;
}

/* ─── MARCHI ─────────────────────────────────────────────────────
   Riquadro grigio quadrato con logo centrato e contenuto.
   Stile condiviso: fascia in home (tutte insieme) e pagina Marchi
   (raggruppate per lettera).

   Nota: in home il tema usa colonne Bootstrap (col-md-3) dentro un
   .row. Le converto in griglia, e devo neutralizzare le larghezze
   percentuali delle colonne, altrimenti le celle restano a 42px.
   ──────────────────────────────────────────────────────────────── */

/* --- griglia, nei due contesti --- */
.hs-brands-grid,
.brands .brand_grid.product_list.grid.row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0;
  /* il tema mette float:left sul contenitore: non occuperebbe altezza
     e il link "vedi tutti" gli finirebbe sotto invece che dopo */
  float: none !important;
}

/* --- home: la cella deve riempire la colonna della griglia --- */
.brands .brand_grid.product_list.grid.row > .product_item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.brands .brand-area {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;  /* il tema mette 0 20px: lascerebbe 40px vuoti nella cella */
}

/* --- il riquadro --- */
.hs-brand-tile,
.brands .brand-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #F5F5F5;
  padding: 9%;
  margin: 0 !important;
  transition: background .2s ease;
}
.hs-brand-tile:hover,
.brands .brand-image:hover { background: #EDEDED; }

.brands .brand-image a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.hs-brand-tile img,
.brands .brand-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- pagina Marchi: intestazione e lettere --- */
.hs-brands { padding-bottom: 48px; }
.hs-brands-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.hs-brands-count { font-size: .9rem; color: #6C7F96; white-space: nowrap; }
.hs-brands-letter {
  margin: 34px 0 10px; font-weight: 700; font-size: 1.35rem; line-height: 1;
  color: var(--price-color, #0A1A2F);
}

@media (max-width: 1199px) {
  .hs-brands-grid, .brands .brand_grid.product_list.grid.row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .hs-brands-grid, .brands .brand_grid.product_list.grid.row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479px) {
  .hs-brands-grid, .brands .brand_grid.product_list.grid.row { grid-template-columns: repeat(2, 1fr); }
}

/* I loghi marca sono JPG con fondo bianco, non PNG trasparenti:
   il bianco si vedrebbe come rettangolo dentro il riquadro grigio.
   'multiply' fonde il bianco nel fondo lasciando intatti i colori
   (il grigio #F5F5F5 è quasi bianco, quindi non scurisce i loghi). */
.hs-brand-tile img,
.brands .brand-image img {
  mix-blend-mode: multiply;
  /* tutti i loghi monocromatici: grayscale toglie il colore,
     un filo di contrasto scurisce i segni senza toccare il bianco
     (contrast() spinge i toni lontano dal grigio medio: il bianco resta bianco) */
  filter: grayscale(1) contrast(1.75);
  transition: filter .28s ease;
}

/* al passaggio del mouse il logo torna a colori */
.hs-brand-tile:hover img,
.brands .brand-image:hover img { filter: grayscale(0) contrast(1); }

@media (prefers-reduced-motion: reduce) {
  .hs-brand-tile img,
  .brands .brand-image img { transition: none; }
}

/* --- home: link alla pagina Marchi sotto la griglia dei 15 --- */
.hs-brands-all { text-align: center; margin-top: 52px; }
.hs-brands-all-link {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .82rem;
  color: var(--primary-color, #E8A317);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .2s ease;
}
.hs-brands-all-link:hover,
.hs-brands-all-link:focus { color: var(--primary-color, #E8A317); opacity: .72; }

/* ─── FASCIA CATEGORIE IN HOME ───────────────────────────────────
   Le foto hanno proporzioni diverse (4 orizzontali, giradischi
   verticale): proporzione fissa sul riquadro + object-fit cover,
   cosi ritaglia invece di deformare.
   ──────────────────────────────────────────────────────────────── */
.cpcategorylist .cat-img { position: relative; }
/* contenitore piu largo dei 1170px standard: i riquadri passano
   da 218 a ~276px. Owl misura il contenitore all'avvio, e il CSS
   viene applicato prima, quindi calcola le larghezze corrette. */
.cpcategorylist .cpcategory-container.container {
  max-width: 1600px;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

.cpcategorylist a.categoryimage {
  display: block;
  aspect-ratio: 5 / 4;   /* piu alto di 4/3 */
  overflow: hidden;
}
.cpcategorylist a.categoryimage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}
.cpcategorylist .item:hover a.categoryimage img { transform: scale(1.04); }

/* nome categoria in maiuscolo */
.cpcategorylist .cate-heading a.btn {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .cpcategorylist a.categoryimage img { transition: none; }
  .cpcategorylist .item:hover a.categoryimage img { transform: none; }
}


/* ─── WHATSAPP SULLA SCHEDA PRODOTTO ────────────────────────────
   Sta sopra le icone di condivisione. Verde WhatsApp: è il colore
   che le persone riconoscono senza leggere, quindi qui conviene
   la convenzione all'identità di marca.
   ──────────────────────────────────────────────────────────────── */
.hs-whatsapp-wrap { margin: 4px 0 20px; }
.hs-whatsapp {
  display: flex;              /* striscia piena, larga come la colonna */
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 4px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background .2s ease;
}
.hs-whatsapp:hover,
.hs-whatsapp:focus { background: #1DA851; color: #fff !important; }
.hs-whatsapp .fa { font-size: 1.3em; line-height: 1; }

/* ─── SCHEDA PRODOTTO: riga marca + riferimento ──────────────────
   Il contenitore è flex e i due blocchi si comprimevano andando a
   capo. Ora restano su una riga sola; il riferimento, che può essere
   molto lungo, viene troncato con i puntini invece di sfondare.
   ──────────────────────────────────────────────────────────────── */
.brand-infos,
.product-reference { white-space: nowrap; }

.brand-infos { flex: 0 0 auto; }

.js-product-reference-destination {
  flex: 1 1 auto;
  min-width: 0;      /* indispensabile: senza, un flex item non scende
                        sotto la larghezza del suo contenuto */
  overflow: hidden;
}
.product-reference {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── CARD PRODOTTO: nome e prezzo sulla stessa riga ─────────────
   Nome e prezzo stanno in contenitori diversi del template
   (.product-description e .product-bottom). Invece di riscrivere
   il markup, uso display:contents per farne figli diretti della
   griglia della card, e li colloco esplicitamente.

   riga 1: immagine
   riga 2: NOME .............. PREZZO
   riga 3: categoria          (prezzo barrato sotto al prezzo)
   riga 4: pulsante carrello
   ──────────────────────────────────────────────────────────────── */
.product-miniature {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
}
.product-miniature .product-description,
.product-miniature .product-bottom { display: contents; }

.product-miniature .thumbnail-container { grid-column: 1 / -1; grid-row: 1; }
.product-miniature .product-title       { grid-column: 1; grid-row: 2; margin: 0; }
.product-miniature .product-price-and-shipping {
  grid-column: 2; grid-row: 2;
  text-align: right;
  white-space: nowrap;
}
.product-miniature .product-brand       { grid-column: 1; grid-row: 3; }
.product-miniature .add-to-cart-button  { grid-column: 1 / -1; grid-row: 4; }

/* prezzo corrente e prezzo barrato incolonnati a destra */
.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping .regular-price { display: block; }

/* tipografia: nome in evidenza, categoria sottotono */
.product-miniature .product-title,
.product-miniature .product-title a { font-weight: 700; }
.product-miniature .product-brand {
  color: #6C7F96;
  font-weight: 400;
  text-transform: none;
}

/* allineamento fra card: immagine ad altezza fissa e spazio per due
   righe di titolo, così nome, prezzo e categoria stanno sulla stessa
   linea in tutte le card della riga */
.product-miniature .thumbnail-container { aspect-ratio: 1 / 1; }
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container picture { display: block; height: 100%; }
.product-miniature .thumbnail-container img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.product-miniature .product-title { min-height: 2.8em; }

/* ==========================================================================
   GRIGLIA PRODOTTI NELLE CATEGORIE  (templates .../miniatures/product-listgrid.tpl)
   3 card per riga, immagine grande quadrata, nome + marca a sinistra e
   prezzo a destra sulla stessa riga. Le regole generiche .product-miniature
   piu in alto in questo file servono alle card dei caroselli in home:
   qui vengono riscritte tramite la classe .hs-card-grid.
   ========================================================================== */

/* il tema padre riserva gia' 60px di padding-bottom sull'articolo per il
   pulsante carrello che compare sotto la card al passaggio del mouse */
#js-product-list .products .product_list.grid > article.product_item { margin-bottom: 8px; }

.product-miniature.hs-card-grid {
  display: grid;
  /* minmax(0,...) e min-width:0 sul blocco testi: impediscono a un testo
     lungo di allargare la colonna oltre la larghezza della card */
  grid-template-columns: minmax(0, 1fr);
  /* immagine / testi / fascia: i testi prendono lo spazio che avanza, cosi
     le card della stessa riga restano alte uguali anche con nomi su piu'
     righe, e prezzo e fascia restano allineati in fondo */
  grid-template-rows: auto 1fr auto;
  height: 100%;
  column-gap: 0;
  border: 1px solid #E6E6E6;
  background: #fff;
}

/* immagine: riquadro quadrato, foto intera dentro (nessun ritaglio) */
.product-miniature.hs-card-grid .thumbnail-container {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #E6E6E6;
}
.product-miniature.hs-card-grid .thumbnail-container .product-thumbnail,
.product-miniature.hs-card-grid .thumbnail-container picture {
  display: block;
  width: 100%;
  height: 100%;
}
.product-miniature.hs-card-grid .thumbnail-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* blocco testi: marca, nome, descrizione breve, prezzo a destra */
.product-miniature.hs-card-grid .hs-card-body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px 17px 16px;
}
.hs-card-grid .product-title {
  display: block;
  margin: 0 0 5px;
  font-weight: 700;
  line-height: 1.35;
}
.hs-card-grid .product-title a {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--price-color, #0A1A2F);
}
.hs-card-grid .hs-card-sub {
  display: block;
  margin: 0 0 4px;
  color: #6C7F96;
  font-weight: 400;
  text-transform: none;
  font-size: .82rem;
  line-height: 1.3;
}
.hs-card-grid .hs-card-price {
  /* riga in flex che va a capo: su card strette (telefono, caroselli a piu'
     colonne) il prezzo barrato scende sotto invece di uscire dalla cornice.
     Il tema imponeva white-space:nowrap su .product-price-and-shipping. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 8px;
  white-space: normal;
  min-width: 0;
  text-align: right;
  padding-top: 0;
  margin-top: auto;   /* sempre in fondo, qualunque sia la lunghezza del nome */
}
.hs-card-grid .hs-card-price .price {
  font-size: 1.05rem;
  color: var(--price-color, #0A1A2F);
}

/* fascia in fondo per l'usato garantito */
.hs-card-grid .hs-card-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #E6E6E6;
  background: #FAFAFA;
  color: var(--primary-color, #E8A317);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}
.hs-card-grid .hs-card-strip .fa { font-size: 1.15em; }
/* prezzo attuale e prezzo barrato sulla stessa riga */
.hs-card-grid .hs-card-price .price,
.hs-card-grid .hs-card-price .regular-price {
  display: inline-block;
  vertical-align: baseline;
}
.hs-card-grid .hs-card-price .price { font-weight: 700; margin-right: 0; }
/* ogni prezzo resta intero sulla sua riga, non si spezza a meta' */
.hs-card-grid .hs-card-price .price,
.hs-card-grid .hs-card-price .regular-price { white-space: nowrap; }

/* Pulsante carrello: nel tema padre e' appoggiato SOTTO la card
   (top: calc(100% + 5px) sull'articolo) e sborda dalla cornice. Qui il
   template lo sposta dentro .thumbnail-container e il CSS lo mette in
   basso nell'immagine, dentro il riquadro, visibile al passaggio del mouse. */
#products .grid article.product_item .hs-card-grid .thumbnail-container .product-bottom .add-to-cart-button,
#js-product-list .grid article.product_item .hs-card-grid .thumbnail-container .product-bottom .add-to-cart-button,
.products .product_list .hs-card-grid .thumbnail-container .product-bottom .add-to-cart-button {
  position: absolute;
  top: auto;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: transparent;
  padding: 0;
  transition: opacity .25s ease;
}
#products .grid article.product_item .hs-card-grid .thumbnail-container .add-to-cart-button .btn.add-to-cart,
#js-product-list .grid article.product_item .hs-card-grid .thumbnail-container .add-to-cart-button .btn.add-to-cart,
.products .product_list .hs-card-grid .thumbnail-container .add-to-cart-button .btn.add-to-cart {
  display: block;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .hs-card-grid .thumbnail-container .add-to-cart-button { transition: none; }
}

/* etichette (sconto, novita): pillole sempre visibili in alto a sinistra,
   non solo al passaggio del mouse come nel tema padre */
.products .product-miniature.hs-card-grid .product-flags,
.products .product-miniature.hs-card-grid:hover .product-flags {
  opacity: 1;
  left: 12px;
  top: 12px;
  padding: 0;
  transform: none;
}
.products .product_list .product-miniature.hs-card-grid li.product-flag,
.products .product_list .product-miniature.hs-card-grid li.product-flag.discount {
  display: inline-block;
  background: #fff;
  color: var(--primary-color, #E8A317);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* vista a lista: immagine a sinistra, testi a destra */
.product_list.list .product-miniature.hs-card-grid {
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 30px;
  align-items: start;
}
.product_list.list .product-miniature.hs-card-grid .thumbnail-container {
  grid-column: 1;
  margin-bottom: 0;
}
.product_list.list .product-miniature.hs-card-grid .hs-card-body {
  grid-column: 2;
  align-self: center;
  /* nella vista a lista il tema padre rende la card inline-block con
     l'immagine in float:left, quindi la griglia non e' attiva: senza un
     contesto di formattazione proprio il prezzo cadrebbe sotto la foto */
  display: flow-root;
  overflow: hidden;
}

@media (max-width: 767px) {
  .product_list.list .product-miniature.hs-card-grid {
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 18px;
  }
  #js-product-list .products .product_list.grid > article.product_item { margin-bottom: 8px; }
}

/* Larghezza delle colonne: il tema padre fissa width:25% agganciandosi alle
   classi col-sm-6/col-md-6 che restano sull'articolo, quindi il col-lg-4 del
   template da solo non basta. Qui la larghezza e' dichiarata esplicitamente
   (la specificita' dell'id #js-product-list vince sulle regole del padre). */
#js-product-list .products .product_list.grid > article.product_item { width: 100%; }
@media (min-width: 576px) {
  #js-product-list .products .product_list.grid > article.product_item { width: 50%; }
}
@media (min-width: 992px) {
  #js-product-list .products .product_list.grid > article.product_item { width: 33.3333%; }
}
#js-product-list .products .product_list.list > article.product_item { width: 100%; }

/* Il tema padre dichiara width:100% (e display:inline-flex sul titolo) con
   selettori che partono da #products: qui serve la stessa specificita'. */
#products .products .product_list .hs-card-grid .product-title,
#js-product-list .products .product_list .hs-card-grid .product-title,
.products .product_list .hs-card-grid .product-title {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0 0 10px;
  line-height: 1.35;
}
#products .products .product_list .hs-card-grid .product-title a,
#js-product-list .products .product_list .hs-card-grid .product-title a,
.products .product_list .hs-card-grid .product-title a {
  display: block;
  width: auto;
  float: none;   /* il padre lo manda in float:left e il nome collassa */
  margin: 0;
  line-height: 1.35;
  /* nome per intero, su quante righe serve */
  overflow-wrap: break-word;
}
#products .products .product_list .hs-card-grid .hs-card-main,
#js-product-list .products .product_list .hs-card-grid .hs-card-main,
.products .product_list .hs-card-grid .hs-card-main {
  width: auto;
  float: none;
}
#products .products .product_list .hs-card-grid .hs-card-sub,
#js-product-list .products .product_list .hs-card-grid .hs-card-sub,
.products .product_list .hs-card-grid .hs-card-sub {
  display: block;
  width: auto;
  float: none;
}
#products .products .product_list .hs-card-grid .hs-card-price,
#js-product-list .products .product_list .hs-card-grid .hs-card-price,
.products .product_list .hs-card-grid .hs-card-price {
  width: auto;
  float: none;
  margin: auto 0 0;   /* auto in alto: il prezzo resta in fondo alla card */
  text-align: right;
}

/* vista a lista: il padre centra il prezzo (#js-product-list ... .list
   article.product_item .product-price-and-shipping): qui lo riporta a
   sinistra, allineato al nome. */
#js-product-list .product_list.gridcount.list article.product_item .hs-card-grid .hs-card-price {
  text-align: left;
  justify-content: flex-start;
  float: none;
  width: auto;
}

/* ==========================================================================
   BLOCCO SOTTO-CATEGORIE nelle pagine categoria
   Finche' una categoria non ha la sua foto (img/c/<id>.jpg) la card e' solo
   testo: meglio di un'icona rotta o di un quadrato grigio vuoto.
   ========================================================================== */
#subcategories ul li { width: calc(16.666% - 20px); }
#subcategories ul li .subcategory-name {
  margin-top: 10px;
  font-weight: 500;
  line-height: 1.35;
}
/* riquadro con icona disegnata (categoria senza foto) */
#subcategories ul li.hs-subcat-nopic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #E6E6E6;
  background: #fff;
  padding: 18px 12px 14px;
  transition: border-color .2s ease, background .2s ease;
}
#subcategories ul li.hs-subcat-nopic:hover {
  border-color: var(--primary-color, #E8A317);
  background: #FCFCFC;
}
#subcategories ul li.hs-subcat-nopic .subcategory-name {
  margin: 12px 0 0;
  float: none;
  font-size: .9rem;
  line-height: 1.3;
}
#subcategories .hs-subcat-iconlink {
  display: block;
  line-height: 0;
  color: var(--price-color, #0A1A2F);
}
#subcategories ul li.hs-subcat-nopic:hover .hs-subcat-iconlink {
  color: var(--primary-color, #E8A317);
}
/* selettore con l'id: il tema padre dichiara
   svg:not(:root){width:300px;height:300px} su TUTTI gli svg della pagina
   e con la sola classe vincerebbe lui */
#subcategories svg.hs-subcat-ic {
  display: block;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .2s ease;
}
@media (max-width: 1199px) { #subcategories ul li { width: calc(25% - 20px); } }
@media (max-width: 767px)  { #subcategories ul li { width: calc(33.333% - 20px); } }
@media (max-width: 479px)  { #subcategories ul li { width: calc(50% - 20px); } }
@media (prefers-reduced-motion: reduce) {
  #subcategories ul li.hs-subcat-nopic { transition: none; }
}


/* ==========================================================================
   I caroselli della home usano ora la stessa card delle categorie
   (.hs-card-grid). Le vecchie regole generiche .product-miniature piu' in
   alto in questo file valgono ancora per eventuali blocchi con il template
   originale, ma qui vengono annullate.
   ========================================================================== */
.product-miniature.hs-card-grid .product-description,
.product-miniature.hs-card-grid .product-bottom { display: block; }
.product-miniature.hs-card-grid .product-title { grid-column: auto; grid-row: auto; }
.product-miniature.hs-card-grid .product-price-and-shipping { grid-column: auto; grid-row: auto; }
.product-miniature.hs-card-grid .product-brand { grid-column: auto; grid-row: auto; }
.product-miniature.hs-card-grid .thumbnail-container { grid-column: 1 / -1; grid-row: 1; }

/* Caroselli: gli elementi di Owl sono div in float con altezza automatica,
   quindi una card con il nome su due righe risulta piu' alta delle altre.
   Con il wrapper in flex gli elementi si allungano tutti all'altezza del
   piu' alto e la card, che e' alta il 100%, si allinea. */
.products .product_list.owl-carousel .owl-wrapper {
  /* !important: Owl scrive display:block direttamente nell'attributo style */
  display: flex !important;
  align-items: stretch;
}
.products .product_list.owl-carousel .owl-item {
  flex: 0 0 auto;
}
.products .product_list.owl-carousel .owl-item > .item,
.products .product_list.owl-carousel .owl-item > .item > .product {
  height: 100%;
}


/* ==========================================================================
   PREZZO SCONTATO IN EVIDENZA
   Rosso profondo solo quando c'e' uno sconto: il prezzo pieno resta blu
   navy, cosi il colore diventa un segnale e non una decorazione.
   Per cambiarlo, e' l'unico punto da toccare: --hs-sale-color.
   ========================================================================== */
:root { --hs-sale-color: #A3231F; }

/* card: caroselli home + pagine categoria e ricerca */
.products .product_list .hs-card-grid .hs-card-price.has-discount .price,
#products .products .product_list .hs-card-grid .hs-card-price.has-discount .price,
#js-product-list .products .product_list .hs-card-grid .hs-card-price.has-discount .price {
  color: var(--hs-sale-color, #A3231F);
}
/* il prezzo barrato resta grigio e piu' piccolo */
.products .product_list .hs-card-grid .hs-card-price .regular-price {
  color: #8A8A8A;
  font-size: .9em;
  font-weight: 400;
}

/* scheda prodotto: il tema mette gia' has-discount sul blocco prezzo */
.product-prices .product-price.has-discount .current-price-value,
#product .product-prices .product-price.has-discount .current-price-value {
  color: var(--hs-sale-color, #A3231F);
}
.product-prices .regular-price,
#product .product-prices .regular-price {
  color: #8A8A8A;
  font-weight: 400;
}

/* ==========================================================================
   "CONTATTACI" — prodotti senza prezzo
   E' un link telefonico al cellulare (tel:+393663317291, vedi i template
   delle miniature). Oro del sito, e deve vincere sulla regola del prezzo
   normale che lo dipinge di blu navy: da qui i selettori lunghi.
   ========================================================================== */
.products .product_list .hs-card-grid .hs-card-price .price.price-on-request,
#products .products .product_list .hs-card-grid .hs-card-price .price.price-on-request,
#js-product-list .products .product_list .hs-card-grid .hs-card-price .price.price-on-request,
.hs-card-grid .hs-card-price .price.price-on-request,
#left-column .price.price-on-request,
a.price-on-request {
  color: var(--primary-color, #E8A317);
  font-weight: 700;
  text-decoration: none;
  /* stampatello anche nella colonna di sinistra, dove il tema lo riportava
     a maiuscola solo sull'iniziale */
  text-transform: uppercase;
}
/* al passaggio del mouse si capisce che si puo' cliccare */
.hs-call:hover,
.hs-call:focus {
  color: var(--primary-color, #E8A317);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hs-call:focus-visible {
  outline: 2px solid var(--primary-color, #E8A317);
  outline-offset: 3px;
}

/* Nella colonna di sinistra la dicitura restava "Contattaci" invece di
   "CONTATTACI": nel tema padre c'e' una regola che vince anche su selettori
   piu' specifici (usa una pseudo-classe che sfugge all'ispezione del
   browser). Qui serve la forzatura, solo per questa parola. */
#left-column a.price-on-request,
#left-column .price.price-on-request {
  text-transform: uppercase !important;
}

/* ==========================================================================
   BARRA IN ALTO — voce WhatsApp
   Il tema aveva solo telefono e mail (.cms_call / .cms_mail) con icona
   disegnata dal CSS. Qui la nuova voce prende lo stesso aspetto: icona,
   spaziatura e trattino divisorio identici.
   ========================================================================== */
.contact-link .cms_whatsapp {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.contact-link .cms_whatsapp a {
  color: #212529;
  margin-left: 10px;
}
.contact-link .cms_whatsapp .fa {
  font-size: 17px;
  line-height: 1;
  vertical-align: middle;
  color: #212529;
}
.contact-link .cms_whatsapp a:hover,
.contact-link .cms_whatsapp a:focus { color: var(--primary-color, #E8A317); }
/* trattino divisorio a destra, come quello dopo il telefono */
.contact-link .cms_whatsapp::after {
  content: "";
  background: #e5e5e5;
  width: 1px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 5px;
  right: -15px;
}

/* --------------------------------------------------------------------------
   Barra contatti nel menù laterale (telefono e tablet)
   La colonna e' larga 300px: a grandezza piena le tre voci andavano a capo
   una sotto l'altra. Qui restano su una riga sola, e l'email si riduce alla
   sola icona (resta toccabile e apre la posta). Sul desktop niente cambia.
   -------------------------------------------------------------------------- */
.hs-ico-mail { display: none; }

/* niente media query: questa colonna e' stretta a qualunque larghezza di
   finestra, quindi la riga unica vale sempre */
.verticalmenu-side #cpheadercms1 { width: 100%; padding: 0; }
@media (min-width: 0px) {
  .verticalmenu-side .contact-link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }
  .verticalmenu-side .contact-link > div { white-space: nowrap; }
  /* via i trattini divisori: qui separa gia' lo spazio */
  .verticalmenu-side .cms_call::after,
  .verticalmenu-side .cms_whatsapp::after { display: none; }
  /* email: solo icona */
  .verticalmenu-side .cms_mail::before { display: none; }
  .verticalmenu-side .hs-testo-mail { display: none; }
  .verticalmenu-side .hs-ico-mail {
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
    color: #212529;
  }
  .verticalmenu-side .cms_mail a { margin-left: 0; }
}

/* I due riquadri delle sale d'ascolto: il tema mette l'iniziale maiuscola a
   ogni parola ("Prenota Un Ascolto"), che in italiano non si usa. */
#cpcmsbanner1_block1 .offer-button a { text-transform: none !important; }

/* ==========================================================================
   PAGINA CONTATTI — dati della sede, orari, recapiti e mappa
   (templates/contact.tpl del child)
   ========================================================================== */
/* il modulo contatti sopra e' in float: senza clear questa sezione si
   infila accanto e le colonne collassano a larghezza zero */
.hs-contatti {
  clear: both;
  width: 100%;
  margin-top: 46px;
}
.hs-contatti-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-top: 34px;
  border-top: 1px solid #E6E6E6;
}
.hs-contatti-titolo {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--price-color, #0A1A2F);
}
.hs-contatti p, .hs-contatti dd, .hs-contatti li { line-height: 1.55; }
.hs-ragione-sociale { margin: 0 0 4px; font-weight: 700; }
.hs-indirizzo { margin: 0 0 12px; }
.hs-contatti-nota { margin: 0; color: #6C7F96; font-size: .9rem; }

.hs-orari { margin: 0; }
.hs-orari dt {
  margin-top: 10px;
  font-weight: 600;
  color: var(--price-color, #0A1A2F);
}
.hs-orari dt:first-child { margin-top: 0; }
.hs-orari dd { margin: 0 0 0 0; color: #4A5A6C; }

.hs-recapiti { margin: 0; padding: 0; list-style: none; }
.hs-recapiti li { margin-bottom: 12px; }
.hs-recapito-voce {
  display: block;
  font-size: .82rem;
  color: #6C7F96;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.hs-recapiti a { color: var(--price-color, #0A1A2F); font-weight: 600; }
.hs-recapiti a:hover, .hs-recapiti a:focus { color: var(--primary-color, #E8A317); }
.hs-recapiti .fa { color: #25D366; margin-right: 3px; }

/* mappa: riquadro panoramico, senza bordi del browser */
.hs-mappa {
  margin-top: 40px;
  border: 1px solid #E6E6E6;
  line-height: 0;
}
.hs-mappa iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 991px) {
  .hs-contatti-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 575px) {
  .hs-contatti-griglia { grid-template-columns: 1fr; gap: 24px; }
  .hs-mappa iframe { height: 320px; }
}

/* ==========================================================================
   PAGINA MARCHI — campo di ricerca
   Filtra i riquadri mentre si scrive. Il campo compare solo se il javascript
   e' attivo (classe hs-con-js aggiunta dallo script), altrimenti resterebbe
   una casella che non fa niente.
   ========================================================================== */
.hs-brands-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-brands-search,
.hs-brands-search-label { display: none; }
.hs-brands-tools.hs-con-js .hs-brands-search { display: block; }

.hs-brands-search {
  width: 230px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--price-color, #0A1A2F);
  background: #fff;
  transition: border-color .2s ease;
}
.hs-brands-search::placeholder { color: #9AA7B4; }
.hs-brands-search:focus {
  outline: none;
  border-color: var(--primary-color, #E8A317);
}
.hs-brands-vuoto {
  margin: 30px 0 0;
  color: #6C7F96;
}
/* serve perche' il tema non dichiara il comportamento dell'attributo hidden */
.hs-brands [hidden] { display: none !important; }

@media (max-width: 575px) {
  .hs-brands-head { flex-wrap: wrap; }
  .hs-brands-tools { width: 100%; }
  .hs-brands-search { flex: 1 1 auto; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-brands-search { transition: none; }
}

/* link al profilo Google sotto le recensioni in home */
/* clear: il carosello e' in float dentro un contenitore di altezza zero,
   quindi senza questo la scritta partiva da sopra e si affiancava ai
   riquadri invece di stare sotto (il margine non si vedeva).
   52px di stacco, come il "Vedi tutti i marchi" in home. */
.hs-recensioni-tutte {
  clear: both;
  /* padding e non margin: su un elemento con clear il margine superiore
     viene assorbito dallo scavalcamento del float e lo stacco sparisce */
  padding-top: 52px;
  text-align: center;
}
.hs-recensioni-link {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .82rem;
  color: var(--primary-color, #E8A317);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .2s ease;
}
.hs-recensioni-link:hover, .hs-recensioni-link:focus {
  color: var(--primary-color, #E8A317);
  opacity: .78;
}
/* i tondi con l'iniziale: il tema li mostra a 47px, l'immagine e' 96 per
   restare nitida sugli schermi ad alta densita' */
.cptestimonial-container-inner .testimonial-img img {
  border-radius: 50%;
  width: 47px;
  height: 47px;
}
@media (prefers-reduced-motion: reduce) { .hs-recensioni-link { transition: none; } }

/* --------------------------------------------------------------------------
   Recensioni in home: riquadri tutti della stessa altezza
   Owl affianca gli elementi in float, ad altezza libera: con testi di
   lunghezza diversa i riquadri risultavano scalettati. Il contenitore in
   flex li allunga tutti al piu' alto; la firma resta agganciata in fondo.
   -------------------------------------------------------------------------- */
#cptestimonial .owl-wrapper {
  display: flex !important;   /* Owl scrive display:block nello style */
  align-items: stretch;
}
#cptestimonial .owl-item { flex: 0 0 auto; }
#cptestimonial .owl-item > .cptestimonial-container { height: 100%; }
.testimonial-block-part .cptestimonial-container .cptestimonial-container-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hs-recensione-autore {
  margin-top: auto;      /* spinge la firma in fondo al riquadro */
  padding-top: 16px;
}

/* ==========================================================================
   BLOG (modulo smartblog)
   Il tema Frunicha non porta nessuno stile per il blog: la griglia, le
   schede degli articoli e la pagina del singolo articolo sono tutte qui.
   Le schede riprendono il linguaggio delle card prodotto (.hs-card-grid):
   bordo 1px #E6E6E6, fondo bianco, titoli navy, accenti oro.
   ========================================================================== */

/* --- griglia degli articoli ------------------------------------------------
   Il modulo avrebbe un suo foglio di stile con le larghezze degli .item
   (views/css/front/custom_s_1.css), ma non e' agganciato a displayHeader
   e quindi non viene mai caricato: la griglia la facciamo qui.
   Tre articoli per riga su desktop, due su tablet, uno su telefono. */
#box-blog-grid .archive-wrapper-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
#box-blog-grid .archive-wrapper-items > .item {
  display: flex;          /* allunga la scheda a tutta l'altezza della riga */
  min-width: 0;
}
@media (max-width: 1199px) {
  #box-blog-grid .archive-wrapper-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  #box-blog-grid .archive-wrapper-items { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* --- scheda articolo ------------------------------------------------------ */
.hs-blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #E6E6E6;
  transition: box-shadow .25s ease, transform .25s ease;
}
.hs-blog-card:hover {
  box-shadow: 0 6px 22px rgba(10, 26, 47, .10);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .hs-blog-card { transition: none; }
  .hs-blog-card:hover { transform: none; }
}

.hs-blog-foto {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #E6E6E6;
  background: #F5F5F5;
}
.hs-blog-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .4s ease;
}
.hs-blog-card:hover .hs-blog-foto img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .hs-blog-foto img, .hs-blog-card:hover .hs-blog-foto img { transition: none; transform: none; }
}

.hs-blog-testo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;           /* i titoli lunghi non allargano la scheda */
  padding: 16px 18px 18px;
}

.hs-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
  color: #6C7F96;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hs-blog-meta .hs-blog-autore::before {
  content: "·";
  margin-right: 10px;
}

.hs-blog-titolo {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.hs-blog-titolo a {
  color: var(--price-color, #0A1A2F);
}
.hs-blog-titolo a:hover,
.hs-blog-titolo a:focus {
  color: var(--primary-color, #E8A317);
}

.hs-blog-estratto {
  margin: 0 0 14px;
  color: #6C7F96;
  font-size: .88rem;
  line-height: 1.6;
}

.hs-blog-leggi {
  margin-top: auto;       /* resta in fondo anche con titoli su piu' righe */
  align-self: flex-start;
  color: var(--primary-color, #E8A317);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hs-blog-leggi::after {
  content: " \2192";      /* freccia */
}
.hs-blog-leggi:hover,
.hs-blog-leggi:focus {
  color: var(--price-color, #0A1A2F);
}

/* --- pagina del singolo articolo ------------------------------------------ */
.blog-single .entry-title {
  margin: 0 0 12px;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--price-color, #0A1A2F);
}
.blog-single .entry-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid #E6E6E6;
  list-style: none;
  color: #6C7F96;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-single .entry-info a { color: var(--primary-color, #E8A317); }
.blog-single .entry-thumbnail { margin-bottom: 24px; }
.blog-single .entry-thumbnail img,
.hs-blog-immagine {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E6E6E6;
}
.blog-single .entry-content {
  color: #333;
  font-size: .95rem;
  line-height: 1.75;
}
.blog-single .entry-content h2,
.blog-single .entry-content h3 {
  margin: 28px 0 12px;
  color: var(--price-color, #0A1A2F);
}
.blog-single .entry-content img { max-width: 100%; height: auto; }
.blog-single .entry-content ul { padding-left: 20px; list-style: disc; }

.blog-single .single-footer { margin-top: 26px; }
.blog-single .entry-tags a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 5px 12px;
  border: 1px solid #E6E6E6;
  background: #FAFAFA;
  color: #6C7F96;
  font-size: .78rem;
}
.blog-single .entry-tags a:hover { border-color: var(--primary-color, #E8A317); color: var(--primary-color, #E8A317); }

.blog-single .single-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #E6E6E6;
}
.blog-single .single-navigation .btn-label {
  display: block;
  color: #6C7F96;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.blog-single .single-navigation .title-post {
  display: block;
  color: var(--price-color, #0A1A2F);
  font-weight: 600;
  font-size: .9rem;
}
.blog-single .single-navigation .next-btn { text-align: right; }
.blog-single .single-navigation .back-blog { font-size: 1.4rem; color: var(--primary-color, #E8A317); }

/* --- commenti -------------------------------------------------------------- */
#comments { margin-top: 36px; }
#comments .comment-reply-title,
.comment-respond .comment-reply-title {
  margin-bottom: 18px;
  font-size: 1.15rem;
  color: var(--price-color, #0A1A2F);
}
.comment-respond { margin-top: 30px; padding-top: 24px; border-top: 1px solid #E6E6E6; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
  .hs-blog-testo { padding: 14px 15px 16px; }
  .blog-single .entry-title { font-size: 1.35rem; }
  .blog-single .single-navigation { flex-direction: column; align-items: stretch; }
  .blog-single .single-navigation .next-btn { text-align: left; }
}

/* --- paginazione del blog ---------------------------------------------------
   Il modulo riusa la classe .pagination del tema, che pero' e' pensata per
   un'altra struttura (ul > li): senza queste regole i numeri di pagina
   finiscono incolonnati uno sotto l'altro. */
.archive-bottom {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid #E6E6E6;
}
.archive-bottom .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.archive-bottom .pagination .page-numbers,
.archive-bottom .pagination .spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;          /* il tema impone width:40px a .pagination a */
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E6E6E6;
  background: #fff;
  color: var(--price-color, #0A1A2F);
  font-size: .88rem;
  line-height: 1;
  white-space: nowrap;
}
.archive-bottom .pagination a.page-numbers:hover,
.archive-bottom .pagination a.page-numbers:focus {
  border-color: var(--primary-color, #E8A317);
  color: var(--primary-color, #E8A317);
}
.archive-bottom .pagination .page-numbers.current {
  border-color: var(--primary-color, #E8A317);
  background: var(--primary-color, #E8A317);
  color: #fff;
  font-weight: 700;
}

/* Il modulo marca il campo "Sito web" come nascosto con la classe .hidden
   (Bootstrap 3), che in questo tema non esiste piu': lo nascondiamo qui,
   altrimenti nel form dei commenti compare un campo che non serve. */
.comment-respond .form-group.hidden { display: none !important; }

/* ==========================================================================
   BANNER NEGOZIO nella colonna di sinistra (modulo cp_leftbanner1)
   Al posto della striscia demo "New Trending / Flats Upto 60% Off":
   foto della sala di Via Massimo Stanzione con la firma del negozio.
   Il testo sta in basso, sopra la sfumatura scura gia' impressa nella foto.
   ========================================================================== */
#cpleftbanner1 li.cpleftbanner1-container {
  width: 100%;
  float: none;
}
#cpleftbanner1 li a {
  display: block;
  width: 100%;
}
#cpleftbanner1 li a img {
  display: block;
  width: 100%;
  height: auto;
}
#cpleftbanner1 .banner-description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px 18px;
  pointer-events: none;   /* il clic resta all'immagine, che e' il link */
}
#cpleftbanner1 .hs-ad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
#cpleftbanner1 .hs-ad-brand {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--primary-color, #E8A317);
}
#cpleftbanner1 .hs-ad-claim {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  /* il tema mette text-transform:capitalize sui testi di questo banner:
     qui la frase e' una frase, non un titolo */
  text-transform: none;
}

/* Su telefono e tablet il tema chiude i blocchi della colonna di sinistra in
   una fisarmonica con l'intestazione ("Banner Laterale"): per una pubblicita'
   non ha senso, la mostriamo sempre aperta e senza titolo. */
@media (max-width: 991px) {
  #cpleftbanner1 .block_title { display: none; }
  #cpleftbanner1 #left_banner_toggle.collapse { display: block; }   /* il tema la chiude con questa stessa specificita' */
}

/* --------------------------------------------------------------------------
   Sotto-categorie: tutta la piastrella deve essere cliccabile.
   Nel markup ci sono due link (l'icona/foto e il nome) grandi in tutto poche
   decine di pixel: chi cliccava sul riquadro, cioe' quasi ovunque, non
   apriva nulla. Il link del nome viene esteso a coprire l'intera cella.
   -------------------------------------------------------------------------- */
#subcategories ul li { position: relative; }
#subcategories ul li a.subcategory-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* foto e icona restano sotto l'area estesa: il clic finisce comunque
   sulla stessa categoria */
#subcategories ul li .subcategory-image a,
#subcategories ul li .hs-subcat-iconlink { position: relative; z-index: 1; }


/* ==========================================================================
   STRISCE PROMOZIONALI in home page
   Due banner con la stessa impaginazione: pannello di colore tagliato in
   diagonale a sinistra con il messaggio, marchio o foto a destra.
     · #hs-home-banner  -> modulo hs_homebanner (PayPal), prima di Top Offers
     · #cpcmsbanner3    -> modulo del tema, prima del blocco marchi (Compass)
   Il pannello e' disegnato in CSS e non impresso nell'immagine: i testi
   restano testi veri, traducibili e leggibili dai motori di ricerca.
   ========================================================================== */
#hs-home-banner,
#cpcmsbanner3 {
  clear: both;          /* la sezione precedente e' un carosello in float */
  padding: 10px 0 40px;
}
.hs-hb {
  position: relative;
  display: block;
  overflow: hidden;
  background: #24282C;
  color: #fff;
}
.hs-hb-link {
  display: block;
  color: inherit;
}
.hs-hb-foto {
  display: block;
  width: 100%;
  height: auto;
}
.hs-hb-pannello {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 54%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;   /* #cpcmsbanner3 centra tutto: qui serve a sinistra */
  gap: 10px;
  padding: 24px 7% 24px 6%;
  background: #24282C;
  /* taglio in diagonale sul lato destro */
  -webkit-clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.hs-hb-occhiello {
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}
.hs-hb-titolo {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.hs-hb-sottotitolo {
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
}
.hs-hb-bottone {
  margin-top: 8px;
  padding: 12px 26px;
  background: var(--primary-color, #E8A317);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.hs-hb:hover .hs-hb-bottone,
.hs-hb:focus-within .hs-hb-bottone {
  background: var(--price-color, #0A1A2F);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .hs-hb-bottone { transition: none; }
}

/* --- colori dei due marchi ------------------------------------------------ */
/* PayPal: blu istituzionale */
.hs-hb--paypal,
.hs-hb--paypal .hs-hb-pannello { background: #003087; }

/* Compass: rosso istituzionale, pulsante bianco (l'oro su rosso non si legge) */
.hs-hb--compass,
.hs-hb--compass .hs-hb-pannello { background: #E30613; }
.hs-hb--compass .hs-hb-bottone {
  background: #fff;
  color: #C1000F;
}
.hs-hb--compass:hover .hs-hb-bottone,
.hs-hb--compass:focus-within .hs-hb-bottone {
  background: var(--price-color, #0A1A2F);
  color: #fff;
}

@media (max-width: 1199px) {
  .hs-hb-titolo { font-size: 1.55rem; }
  .hs-hb-pannello { width: 58%; }
}
/* sotto i 768px il pannello in sovrimpressione diventa illeggibile:
   marchio sopra, testo sotto a tutta larghezza */
@media (max-width: 767px) {
  #hs-home-banner,
  #cpcmsbanner3 { padding-bottom: 28px; }
  .hs-hb-pannello {
    position: static;
    width: 100%;
    padding: 20px 18px 24px;
    -webkit-clip-path: none;
    clip-path: none;
    text-align: left;
  }
  .hs-hb-titolo { font-size: 1.35rem; }
}

/* ==========================================================================
   CAROSELLI DI PRODOTTI su telefono: 4 prodotti alla volta e frecce visibili
   Vale per "Prodotti in evidenza" (#featured-products) e per "Sfoglia il
   catalogo" (#cpcategorytabs).
   Owl Carousel 1.x mostra una riga sola, quindi nei rispettivi file js gli
   articoli vengono accoppiati a due a due dentro un unico elemento del
   carosello (.hs-coppia): due colonne per due righe = 4 prodotti visibili.
   Le frecce, che sul desktop compaiono al passaggio del mouse, su telefono
   non comparirebbero mai: qui diventano due pulsanti tondi sempre visibili
   sotto il carosello.
   ========================================================================== */
@media (max-width: 479px) {
  /* le due colonne devono essere alte uguali, altrimenti la seconda riga
     risulta scalettata: Owl scrive display:block sul contenitore */
  #feature-carousel .owl-wrapper,
  #cpcategorytabs .cp-carousel .owl-wrapper { display: flex !important; align-items: stretch; }
  #feature-carousel .owl-item,
  #cpcategorytabs .cp-carousel .owl-item { flex: 0 0 auto; }
  #feature-carousel .owl-item > .hs-coppia,
  #cpcategorytabs .cp-carousel .owl-item > .hs-coppia { height: 100%; }

  #feature-carousel .hs-coppia,
  #cpcategorytabs .cp-carousel .hs-coppia {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #feature-carousel .hs-coppia > article.item,
  #cpcategorytabs .cp-carousel .hs-coppia > article.item {
    flex: 1 1 0;     /* meta' altezza ciascuno: le righe si allineano */
    width: 100%;
    float: none;
    margin: 0;
  }

  #featured-products .customNavigation,
  #cpcategorytabs .customNavigation {
    position: static;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 20px;
    opacity: 1 !important;          /* il tema le mostra solo su :hover */
    -webkit-opacity: 1;
  }
  #featured-products .customNavigation i,
  #cpcategorytabs .customNavigation i {
    position: static;
    left: auto;
    right: auto;
    width: 44px;
    height: 44px;
    background: var(--primary-color, #E8A317) !important;
    border-radius: 50%;
    box-shadow: none;
  }
  /* freccia disegnata con i bordi: nessuna dipendenza da font di icone */
  #featured-products .customNavigation i::after,
  #cpcategorytabs .customNavigation i::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  #featured-products .customNavigation i.prev::after,
  #cpcategorytabs .customNavigation i.prev::after {
    transform: rotate(135deg);
    margin: 16px 0 0 18px;
  }
  #featured-products .customNavigation i.next::after,
  #cpcategorytabs .customNavigation i.next::after {
    transform: rotate(-45deg);
    margin: 16px 0 0 14px;
  }
}

/* --- "Sfoglia il catalogo": la riga delle categorie ------------------------
   Su telefono il tema la trasforma in una striscia che scorre di lato, senza
   nessun segno che ci siano altre categorie fuori schermo: tre su cinque
   restavano invisibili. Qui i pulsanti vanno a capo e si vedono tutti.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #cpcategorytabs #cpcategory-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    overflow-x: visible;
  }
  /* il tema mette width:100% alle voci sotto i 480px: una per riga */
  #cpcategorytabs #cpcategory-tabs .nav-item { margin: 0; width: auto; }
  /* il tema impone min-width:160px con #index in testa al selettore:
     per vincere serve la stessa forza, da qui il doppio id */
  #index #cpcategorytabs .nav-tabs .nav-link {
    min-width: 0;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ─── MENU MOBILE: LE TRE LINEE ──────────────────────────────────
   Erano piccole, dello stesso grigio scuro del testo e appiccicate
   al campo di ricerca: non si leggevano come un pulsante da toccare.
   Qui diventano un riquadro di 44px — la misura minima per centrarlo
   col pollice — con il filo d'oro del marchio, staccato dalla ricerca.
   Solo sotto i 768px: piu' in alto il menu e' la barra delle categorie.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* la colonna della ricerca e' 1fr, quindi si restringe da sola
     per fare posto allo spazio che inseriamo qui */
  .header-top-main.bg_main > .container { column-gap: 12px; }

  /* i contenitori erano larghi quanto la vecchia icona: li liberiamo */
  .header-top-main.bg_main .container.text-xs-center.mobile,
  .header-top-main.bg_main .menu-container,
  .header-top-main.bg_main .menu-container .menu-icon {
    width: auto;
    padding-block: 0;
    margin-inline-end: 0;
  }

  .header-top-main.bg_main .menu-icon .cat-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(232, 163, 23, .12);
    border: 1px solid rgba(232, 163, 23, .55);
    transition: background .2s ease;
  }
  .header-top-main.bg_main .menu-icon:active .cat-title {
    background: rgba(232, 163, 23, .28);
  }

  .header-top-main.bg_main .menu-icon .material-icons.menu-open {
    font-size: 28px;
    line-height: 1;
    width: auto;
    height: auto;
    margin: 0;
    color: #212529;
  }
}

/* ─── "CONTATTACI": TELEFONO SU MOBILE, MODULO SU DESKTOP ────────
   Il frammento hs-contattaci.tpl stampa due link con lo stesso
   aspetto: qui se ne mostra uno solo per volta. Da telefono conviene
   chiamare; da computer un link "tel:" non fa nulla, quindi si apre
   il modulo contatti gia' compilato col prodotto.
   ──────────────────────────────────────────────────────────────── */
/* Il tema impone display:block ai prezzi dentro le schede con un
   selettore piu' specifico del nostro, quindi qui ripetiamo le stesse
   catene. Ogni link viene nascosto solo nella sua misura di schermo:
   cosi' quello che resta conserva il display deciso dal tema. */
@media (max-width: 767px) {
  .product-miniature .product-price-and-shipping a.hs-call-mail,
  .hs-card-grid .hs-card-price a.hs-call-mail,
  .product-prices a.hs-call-mail,
  #left-column a.hs-call-mail,
  a.hs-call-mail { display: none; }
}

@media (min-width: 768px) {
  .product-miniature .product-price-and-shipping a.hs-call-tel,
  .hs-card-grid .hs-card-price a.hs-call-tel,
  .product-prices a.hs-call-tel,
  #left-column a.hs-call-tel,
  a.hs-call-tel { display: none; }
}

/* ─── FOOTER: DATI AZIENDA ───────────────────────────────────────
   Il tema nascondeva le icone del blocco contatti (display:none su
   "#block-contact_list i"), quindi le nostre portano una classe loro
   e qui le rimettiamo. Ogni riga e' icona + testo allineati in alto,
   cosi' l'indirizzo su piu' righe resta incolonnato.
   ──────────────────────────────────────────────────────────────── */
#block-contact_list.hs-azienda { padding-left: 0; list-style: none; }

#block-contact_list.hs-azienda .hs-azienda-riga {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  line-height: 1.55;
}

/* la regola del tema le spegne: serve una catena piu' specifica */
#block-contact_list.hs-azienda .hs-azienda-riga i.hs-ico {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  margin-top: 3px;
  font-size: 16px;
  text-align: center;
  color: var(--primary-color, #E8A317);
}

/* il tema mette l'iniziale maiuscola ai link del footer: sulle
   caselle di posta era sbagliato ("Info@Hifisolution.It") */
#block-contact_list.hs-azienda .hs-azienda-testo,
#block-contact_list.hs-azienda .hs-azienda-testo a {
  flex: 1 1 auto;
  text-transform: none;
}

#block-contact_list.hs-azienda .hs-azienda-testo strong {
  display: inline-block;
  margin-bottom: 2px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* i recapiti sono link: si capisce al passaggio del mouse */
#block-contact_list.hs-azienda .hs-azienda-testo a { color: inherit; }
#block-contact_list.hs-azienda .hs-azienda-testo a:hover,
#block-contact_list.hs-azienda .hs-azienda-testo a:focus {
  color: var(--primary-color, #E8A317);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── VETRINA OFFERTE in home ────────────────────────────────────
   Sezione del modulo su misura hs_vetrina. La griglia e le schede sono
   quelle del tema (classi .product_item e colonne bootstrap): qui serve
   solo il rientro negativo che il tema applica tramite #spe_res, che non
   possiamo riusare senza duplicare un id, piu' il pulsante finale.
   ──────────────────────────────────────────────────────────────── */
.hs-vetrina { padding: 10px 0 40px; }

.hs-vetrina .hs-vetrina-lista { margin: 0 -10px; }

.hs-vetrina .hs-vetrina-tutte {
  margin-top: 10px;
  text-align: center;
}

/* Il tema dimensiona .product_item in base alle classi a colonne di
   bootstrap, con regole che a schermo largo arrivano a sei prodotti per
   riga. Nel nostro markup quelle classi non ci sono: la larghezza la
   decidiamo qui, con la stessa precisione delle regole del tema. */
.hs-vetrina .featured_grid { flex-wrap: wrap; }

.hs-vetrina .products .product_list article.product_item { width: 25%; }

@media (max-width: 991px) {
  .hs-vetrina .products .product_list article.product_item { width: 50%; }
}

@media (max-width: 575px) {
  .hs-vetrina .products .product_list article.product_item { width: 100%; }
}

/* ─── CONTRASSEGNO "VENDUTO" sulla foto ──────────────────────────
   Si inserisce nella lista di contrassegni gia' prevista dal tema, in
   alto a sinistra sull'immagine. Mantiene la forma a pillola degli altri
   ma la inverte: fondo rosso pieno e scritta bianca. Deve leggersi come
   uno stato del prodotto, non come una promozione, e non va confuso con
   la percentuale di sconto, che e' bianca con il bordo oro.
   La catena di selettori ripete quella usata sopra per le pillole delle
   schede, altrimenti vincerebbe quella e il fondo resterebbe bianco.
   ──────────────────────────────────────────────────────────────── */
.products .product_list .product-miniature.hs-card-grid li.product-flag.hs-flag,
.product-flags li.product-flag.hs-flag {
  background: var(--hs-sale-color, #A3231F);
  border-color: var(--hs-sale-color, #A3231F);
  color: #fff;
  font-weight: 700;
}

/* Sulla pagina prodotto il tema spostava la lista dei contrassegni a
   -50px, cioe' fuori dalla foto: era pensata per un impaginato diverso e
   restava invisibile perche' i contrassegni erano spenti. Ora che ci
   mettiamo il "Venduto" la riportiamo sull'angolo dell'immagine, nella
   stessa posizione che ha sulle schede. */
.product-cover .product-flags {
  top: 12px;
  left: 12px;
  /* il tema la teneva trasparente, perche' qui i contrassegni erano spenti */
  opacity: 1;
  /* Il riquadro della lente di ingrandimento viene agganciato in fondo
     alla pagina con indice 999, quindi per stare sopra serve di piu'.
     Con pointer-events disattivati il clic passa attraverso e lo zoom
     continua a funzionare anche sotto il contrassegno. */
  z-index: 1000;
  pointer-events: none;
}

/* ─── LOGO DEL MARCHIO nei dettagli del prodotto ─────────────────
   Il tema rimpicciolisce il logo solo dentro .product-information,
   la colonna accanto alla foto. Nella scheda "Dettagli del prodotto"
   il logo non e' li' dentro, quindi usciva alla sua misura naturale:
   quelli quadrati arrivavano a 940 px, larghi quanto la colonna.
   Qui mettiamo un tetto valido ovunque. Specificita' bassa di
   proposito, cosi' la regola del tema sulla colonna resta quella.
   ──────────────────────────────────────────────────────────────── */
img.manufacturer-logo {
  height: auto;
  width: auto;
  max-height: 46px;
  max-width: 170px;
  object-fit: contain;
}

/* ─── FASCIA "DUE SALE D'ASCOLTO" sotto l'intestazione ───────────
   Il tema la trattava come una riga di servizio: grigio chiaro, testo
   piccolo e l'icona di un camioncino, perche' nel tema originale questa
   fascia annunciava le spedizioni. Qui dice un'altra cosa — le sale
   d'ascolto e l'appuntamento — ed e' uno degli argomenti piu' forti del
   negozio, quindi diventa una fascia oro leggibile a colpo d'occhio.
   ──────────────────────────────────────────────────────────────── */
section#cpcmsbanner5 {
  background: var(--primary-color, #E8A317);
  /* lo slider sotto e' rientrato di 20 px per lato a ogni larghezza:
     la fascia si ferma dove si ferma lui invece di andare al vivo */
  margin-left: 20px;
  margin-right: 20px;
}

#cpcmsbanner5 .icon-label {
  padding: 16px 15px;
}

#cpcmsbanner5 .icon-label .offer-label {
  justify-content: center;
  color: #1A1A1A;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.45;
  text-align: center;
}

/* via il camioncino: parlava di spedizioni, qui si parla d'ascolto */
#cpcmsbanner5 .icon-label .offer-label::before {
  content: none;
  display: none;
}

@media (max-width: 575px) {
  #cpcmsbanner5 .icon-label { padding: 13px 15px; }
  #cpcmsbanner5 .icon-label .offer-label { font-size: .95rem; }
}
/* ===========================================================================
   H&S - Blocco "Sfoglia le categorie": Primo Piano nascosta, Offerte e
   Archivio staccate e in evidenza.

   Agisce solo dentro #block_categories_toggle, cioe' soltanto in quel menu:
   altrove le tre categorie restano come sono. Primo Piano non viene
   disattivata ne' cancellata, resta raggiungibile e continua a contenere i
   suoi 8 prodotti: qui sparisce solo dall'elenco.

   Gli indirizzi sono scritti per intero perche' esiste anche un marchio
   "Leak" con lo stesso numero 79: un selettore generico avrebbe colpito
   anche quello.
   =========================================================================== */

/* via Primo Piano da questo elenco */
#block_categories_toggle li:has(> a[href*="79-primo-piano"]) {
  display: none;
}
/* ricambio per i browser senza :has() — nasconde almeno il collegamento */
#block_categories_toggle a[href*="79-primo-piano"] {
  display: none;
}

/* Offerte e Archivio: stampatello e peso maggiore */
#block_categories_toggle a[href*="80-promozioni"],
#block_categories_toggle a[href*="81-archivio"] {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}

/* una riga di stacco sopra Offerte, cosi' le due voci si leggono come un
   gruppo a se' rispetto alle categorie di prodotto */
#block_categories_toggle li:has(> a[href*="80-promozioni"]) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

/* ===========================================================================
   H&S - Slider della home: il riquadro del testo diventa traslucido.

   Prima era un rettangolo antracite pieno (#212529) che copriva la
   fotografia. Qui resta la stessa forma e la stessa posizione, ma lascia
   intravedere l'immagine sotto.

   Il testo e' bianco su tutte le diapositive, quindi il fondo non puo'
   sparire del tutto: su quella Marantz, che e' chiara, il bianco diventerebbe
   illeggibile. Il 45% e' la soglia che regge anche li'.

   Si scrive con #carousel davanti perche' la regola del tema usa la sola
   classe: serve piu' peso per prevalere.
   =========================================================================== */

#carousel .slide-text {
  background: rgba(16, 18, 20, .45);
}

/* Se un giorno volessi anche l'effetto vetro smerigliato, togli i segni di
   commento alle due righe qui sotto. Non e' nell'anteprima che hai visto:
   ammorbidisce ancora, ma su qualche telefono datato puo' far scattare il
   carosello.

#carousel .slide-text { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

*/
.footer-container p.copyright { color: #fff; }
/* ===========================================================================
   H&S - Slider della home sui telefoni (sotto i 480 pixel).
   Da incollare in fondo a themes/PRS04084child/assets/css/custom.css

   Qui c'era un errore mio di diagnosi, che vale la pena scrivere perche'
   spiega la regola.

   Il riquadro del testo e' fatto di due scatole, una dentro l'altra:
   "caption" (quella esterna) e "slide-text" (quella interna). La modifica
   di prima aveva reso traslucida solo quella interna. Su computer e tablet
   bastava, perche' la scatola esterna li' non ha fondo. Ma il tema, sotto i
   480 pixel, da' alla scatola ESTERNA un fondo antracite pieno: il
   traslucido interno restava appoggiato sopra una parete opaca, e il
   risultato era di nuovo un rettangolo pieno. Non era la cache del telefono,
   come avevo detto: era il tema.

   Quindi qui si fanno due cose insieme:
   - si toglie il fondo alla scatola esterna, cosi' il traslucido si vede;
   - si stende la fascia da bordo a bordo in cima alla foto, alta solo
     quanto serve, invece del riquadro stretto di 168 pixel che spezzava il
     titolo in piu' righe e stringeva il pulsante.

   Il fondo passa dal 45% al 62%: su una striscia sottile sopra una foto
   chiara, come quella Marantz, al 45% il testo bianco si leggeva male.

   La fascia sta in alto e non in basso perche' in basso coprirebbe i
   pallini del carosello.

   Il limite e' 480 pixel, non 767, perche' e' lo stesso del tema: sopra i
   480 il riquadro e' gia' traslucido e resta esattamente com'e' adesso.
   =========================================================================== */

@media (max-width: 480px) {

  /* la scatola esterna: niente fondo, e si stende a tutta larghezza in cima */
  #carousel .carousel-item .caption {
    background-color: transparent;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: auto;
    display: block;
  }

  /* la scatola interna: e' lei che porta il colore traslucido */
  #carousel .carousel-item .caption .slide-text {
    padding: 9px 14px;
    background-color: rgba(16, 18, 20, .62);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
  }

  /* la rigina piccola ("Dal nostro blog") occupa la prima riga da sola */
  #carousel .carousel-item .caption .slidertext1 {
    flex: 0 0 100%;
  }

  /* il titolo prende lo spazio che resta accanto al pulsante; se un nome
     fosse troppo lungo finisce con i puntini invece di andare a capo */
  #carousel .carousel-item .caption .slidertext2 {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* il pulsante non si lascia stringere */
  #carousel .carousel-item .caption .sliderbutton {
    flex: none;
  }
}
/* ===========================================================================
   H&S - Aggiunta: sul telefono via la fascia gialla, slider da bordo a bordo.

   Va messa DOPO il blocco gia' incollato (quello della fascia traslucida sul
   testo dello slider), in fondo a custom.css. Non sostituisce niente: si
   aggiunge e basta.

   1. La fascia gialla "Due sale d'ascolto a Napoli" sparisce sotto i 480
      pixel. Su telefono andava a capo su due righe e si mangiava 70 pixel
      pieni sopra lo slider; su computer sta su una riga sola e resta dov'e'.
      Non viene disattivata nel back office: e' nascosta solo in quella
      misura di schermo, altrove continua a comparire.

   2. Lo slider va da bordo a bordo. Piu' su in questo stesso file c'e' una
      regola che tiene la fascia gialla rientrata di 20 pixel per lato, "per
      fermarsi dove si ferma lo slider". Tolta la fascia su telefono, quei
      20 pixer per lato non hanno piu' niente da accompagnare: su uno schermo
      da 375 sono un sesto della larghezza lasciato bianco.

      Se preferissi tenere i margini, cancella solo le tre righe del punto 2.
   =========================================================================== */

@media (max-width: 480px) {

  /* 1) via la fascia gialla sopra lo slider */
  #wrapper-top #cpcmsbanner5 {
    display: none;
  }

  /* 2) lo slider occupa tutta la larghezza */
  #carousel {
    padding-left: 0;
    padding-right: 0;
  }
    /* 3) e diventa piu' alto, avvicinando l'inquadratura */
  #carousel .carousel-item img {
    height: 180px;
    object-fit: cover;
    object-position: center;
  }
}
/* ===========================================================================
   H&S - Le frecce dei caroselli sul telefono diventano un pulsante unico.

   Riguarda "Prodotti in evidenza" e "Sfoglia il catalogo", solo sotto i 479
   pixel: su computer le frecce restano quelle del tema, ai lati del
   carosello.

   Va incollata in fondo a custom.css, DOPO il blocco "CAROSELLI DI PRODOTTI
   su telefono" che c'e' gia'. Non va cancellato niente: queste regole hanno
   gli stessi selettori di quelle, e in CSS a parita' di peso vince l'ultima
   scritta. Arrivando dopo, prevalgono.

   Cosa cambia rispetto a prima:

   - i due cerchi separati diventano una pillola sola divisa a meta' da una
     riga sottile;
   - resta l'oro del sito, lo stesso di prima;
   - si stacca dai riquadri dei prodotti: 34 pixel invece di 20, perche'
     prima il pulsante appoggiava sul bordo della card.

   Una pulizia, gia' che c'eravamo: dentro ogni cerchio c'erano DUE frecce
   sovrapposte. Il tema ne disegna una con una maschera SVG
   (img/megnor/pro-left.svg, colorata da "background-color" e non da
   "color": e' per questo che provare a cambiarle colore nel modo ovvio non
   funzionava), e il blocco precedente ne aggiungeva una seconda, bianca,
   disegnata coi bordi di "::after". Si vedeva solo quella del tema, la
   bianca restava sotto. Qui la seconda viene spenta e resta una freccia
   sola.
   =========================================================================== */

@media (max-width: 479px) {

  /* la coppia si stacca dalle card e i due pezzi si toccano fra loro */
  #featured-products .customNavigation,
  #cpcategorytabs .customNavigation {
    margin-top: 34px;
    gap: 0;
  }

  /* ogni meta' della pillola */
  #featured-products .customNavigation i,
  #cpcategorytabs .customNavigation i {
    box-sizing: border-box;
    width: 56px;
    height: 42px;
    border-radius: 0;
    box-shadow: none;
    background: var(--primary-color, #E8A317) !important;
    overflow: hidden;
  }

  #featured-products .customNavigation i.prev,
  #cpcategorytabs .customNavigation i.prev {
    border-radius: 999px 0 0 999px;
    border-right: 1px solid rgba(0, 0, 0, .18);   /* la riga divisoria */
  }

  #featured-products .customNavigation i.next,
  #cpcategorytabs .customNavigation i.next {
    border-radius: 0 999px 999px 0;
  }

  /* la freccia del tema, centrata nel nuovo pulsante piu' largo che alto.
     Il colore si cambia con background-color perche' e' una maschera. */
  #featured-products .customNavigation i::before,
  #cpcategorytabs .customNavigation i::before {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: #222;
    mask-size: 15px auto;
    mask-position: center;
    -webkit-mask-size: 15px auto;
    -webkit-mask-position: center;
  }

  /* via la seconda freccia, quella bianca disegnata coi bordi */
  #featured-products .customNavigation i::after,
  #cpcategorytabs .customNavigation i::after {
    display: none;
  }
}
/* ===========================================================================
   H&S - "Prodotti in evidenza" su due righe invece che una.

   Va incollata in fondo a themes/PRS04084child/assets/css/custom.css.
   Accompagna la modifica a custom.js: senza quella non succede niente,
   perche' le coppie non vengono create.

   Owl Carousel 1.x sa disporre una riga sola. Il trucco, che sul telefono
   era gia' in uso, e' accoppiare gli articoli a due a due dentro un unico
   elemento del carosello: per Owl resta una riga di "elementi", ma dentro
   ogni elemento ci sono due prodotti impilati. Dove prima se ne vedevano
   4 affiancati ora se ne vedono 8, quattro sopra e quattro sotto.

   Owl scrive display:block sul contenitore e lo fa a mano, dopo che il
   foglio di stile e' stato letto: per questo serve !important sulla prima
   regola. Le altre servono a far venire le due righe della stessa altezza,
   altrimenti una card con il nome su tre righe sfalsa tutta la colonna.

   Il numero di colonne non cambia: resta quello gia' impostato in
   custom.js (4 sul computer, 3 sui tablet, 2 sul telefono). Quello che
   raddoppia e' il numero di righe.
   =========================================================================== */

#feature-carousel .owl-wrapper {
  display: flex !important;
  align-items: stretch;
}

#feature-carousel .owl-item {
  flex: 0 0 auto;
}

#feature-carousel .owl-item > .hs-coppia {
  height: 100%;
}

#feature-carousel .hs-coppia {
  display: flex;
  flex-direction: column;
}

/* meta' altezza ciascuno: cosi' le due righe si allineano fra colonne */
#feature-carousel .hs-coppia > article.item {
  flex: 1 1 0;
  width: 100%;
  float: none;
  margin: 0;
}

/* Lo stacco fra la riga di sopra e quella di sotto. Sotto i 480 pixel resta
   quello piu' stretto gia' definito nel blocco "CAROSELLI DI PRODOTTI su
   telefono", piu' su in questo stesso file. */
@media (min-width: 480px) {
  #feature-carousel .hs-coppia {
    gap: 20px;
  }
}