/*
 Theme Name: Storefront Child
 Theme URI:  https://pubblicittasrl.it/
 Description: Child theme di Storefront
 Author:      Alfredo Villa - Pubblicittà srl
 Author URI:  https://pubblicittasrl.it
 Template:    storefront
 Version:     1.0.30
 License:     GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: storefront-child
*/

/* Import Google Fonts - Lato con tutti i pesi necessari */
/* Lato non si importa piu' da Google: e' ospitato in proprio, vedi
   css/lato.css e la cartella fonts/. */
:root {
  --header-height: 112px;

  /* =========================================================
     COLORE DEL MARCHIO
     Un tempo i valori stavano scritti a mano in un centinaio di
     punti di questo foglio. Ora stanno qui, cosi' il canale HORECA
     puo' ridefinirli in blocco (vedi body.qv-horeca piu' sotto) e
     tutto il sito lo segue: header, footer, contenuti e moduli.

     --qv-marchio-rgb serve alle regole che usano rgba() per le
     trasparenze: rgba(var(--qv-marchio-rgb), 0.1).

     --qv-marchio-alt e' il nome usato dai moduli in inc/. Era un
     rosso un soffio piu' chiaro (#9b1b42): dalla revisione del 28/10
     e' lo stesso rosso del marchio, perche' tre rossi quasi uguali
     sembravano un errore. Per gli HORECA diventano lo stesso blu.
     ========================================================= */
  --qv-marchio: #9b113b;
  --qv-marchio-scuro: #7d0e2f;
  --qv-marchio-chiaro: #b8194a;
  --qv-marchio-rgb: 155, 17, 59;
  --qv-marchio-alt: #9b113b;
  --qv-marchio-alt-scuro: #7d0e2f;

  /* Tinte di servizio dei moduli: fondi, bordi e testi smorzati. */
  --qv-fondo-tenue: #faf3f5;
  --qv-bordo-tenue: #e0d3d8;
  --qv-testo-smorzato: #8a6b75;
}

/* =========================================================
   IL COLORE DEL CANALE PROFESSIONALE
   Ai professionisti HORECA il sito si presenta in blu invece che
   in rosso: e' lo stesso blu del badge "Area HORECA" e della top
   bar dedicata, quindi il canale ha un'identita' cromatica sola.

   La classe la mette inc/horeca-colore.php. Sta su <body> e non su
   :root perche' header, footer e contenuti stanno tutti li' dentro:
   ridefinire le variabili qui basta a farli virare tutti insieme.
   ========================================================= */
body.qv-horeca {
  --qv-marchio: #1f3a5f;
  --qv-marchio-scuro: #192f4d;
  --qv-marchio-chiaro: #2d548a;
  --qv-marchio-rgb: 31, 58, 95;
  --qv-marchio-alt: #1f3a5f;
  --qv-marchio-alt-scuro: #192f4d;

  --qv-fondo-tenue: #f1f5fa;
  --qv-bordo-tenue: #d3dce8;
  --qv-testo-smorzato: #6b7a8c;
}

/* TYPOGRAPHY GLOBAL */
html, body {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1em;
  color: #000;
}

/* Rimuove l'outline viola sui link quando cliccati */
a:focus, 
a:active,
button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Mantiene l'accessibilità con uno stile discreto per la navigazione da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--qv-marchio-rgb), 0.3);
  outline-offset: 2px;
}

/* TITOLI - Colore personalizzato */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.post-title,
.product-title,
.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.widget-title {
  color: var(--qv-marchio) !important;
}

/* HEADER CUSTOM STYLE - MOBILE FIRST APPROACH */
#content,
.site-content {
  padding-top: var(--header-height);
}

.site-header,
.site-header * {
  font-family: 'Lato', Arial, sans-serif !important;
}

.custom-header {
  background: #fff;
  border-bottom: 2px solid var(--qv-marchio);
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* MOBILE HEADER (Default - Mobile First) */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  min-height: 60px;
  background: #fff;
}

.mobile-header-left {
  flex: 0 0 auto;
}

.mobile-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-header-center img {
  max-height: 40px;
  width: auto;
}

.mobile-header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.mobile-menu-toggle:hover {
  background-color: rgba(var(--qv-marchio-rgb), 0.1);
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background-color: var(--qv-marchio);
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Search Toggle */
.mobile-search-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.mobile-search-toggle:hover {
  background-color: rgba(var(--qv-marchio-rgb), 0.1);
}

/* Mobile Cart */
.mobile-cart {
  position: relative;
  display: flex;
  align-items: center;
  color: #000;
  text-decoration: none;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.mobile-cart:hover {
  background-color: rgba(var(--qv-marchio-rgb), 0.1);
}

.mobile-cart .icon-cart svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: #000;
  fill: none;
  transition: stroke 0.2s;
}

.mobile-cart:hover .icon-cart svg {
  stroke: var(--qv-marchio);
}

.mobile-cart .cart-count {
  background: var(--qv-marchio);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 4px;
  font-weight: bold;
}

/* Mobile Search Bar */
.mobile-search-bar {
  display: none;
  padding: 8px 16px;
  background: #fff !important;
  border-top: 1px solid #e2e2e2;
  min-height: 60px;
  align-items: center;
}

.mobile-search-bar.active {
  display: flex;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  background: #fff !important;
  border-radius: 24px;
  border: 1px solid #d5d5d5;
  overflow: hidden;
  width: 100%;
  height: 44px;
}

.mobile-search-field {
  flex: 1;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  background: #fff !important;
  outline: none;
  height: 100%;
}

/* Assicurarsi che non ci siano sfondi grigi da sovrascritture */
.mobile-search-bar *,
.mobile-search-form *,
.mobile-search-field {
  background: #fff !important;
}

.mobile-search-form .search-submit {
  background: #fff !important;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e2e2;
}

.mobile-menu-header h3 {
  margin: 0;
  color: var(--qv-marchio);
  font-size: 1.2rem;
  font-weight: 600;
}

.mobile-menu-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.mobile-menu-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Mobile Navigation */
.mobile-navigation {
  padding: 20px 0;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-list li {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-list a {
  display: block;
  padding: 16px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s;
}

.mobile-menu-list a:hover,
.mobile-menu-list .current-menu-item > a {
  background-color: rgba(var(--qv-marchio-rgb), 0.1);
  color: var(--qv-marchio);
  padding-left: 24px;
}

/* Mobile Menu Actions */
.mobile-menu-actions {
  padding: 20px;
  border-top: 1px solid #e2e2e2;
}

.mobile-login-link,
.mobile-wishlist-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--qv-marchio);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.mobile-login-link:hover,
.mobile-wishlist-link:hover {
  opacity: 0.8;
}

/* DESKTOP HEADER - Hidden on mobile */
.desktop-header {
  display: none;
}

/* TABLET STYLES */
@media (min-width: 768px) {
  .mobile-header-center img {
    max-height: 50px;
  }
  
  .mobile-header {
    padding: 16px 24px;
    min-height: 70px;
  }
  
  .mobile-header-right {
    gap: 16px;
  }
  
  .mobile-menu-content {
    width: 320px;
  }
}

/* DESKTOP STYLES */
@media (min-width: 1024px) {
  /* Hide mobile header on desktop */
  .mobile-header,
  .mobile-search-bar,
  .mobile-menu-overlay {
    display: none !important;
  }
  
  /* Show desktop header */
  .desktop-header {
    display: block;
  }
  
  .header-row {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
  }
  
  .row-1 {
    justify-content: flex-start;
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 8px;
    position: relative;
  }
  
  .header-left {
    display: flex;
    align-items: center;
  }
  
  .header-left img {
    max-height: 86px;
    width: auto;
    padding: 4px 0;
  }
  
  .header-center {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 280px;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }
  
  .header-center .search-form {
    width: 100%;
    max-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  
  .header-center .search-form input[type="search"] {
    border-radius: 24px;
    padding: 10px 16px 10px 44px;
    width: 100%;
    min-width: 0;
    border: 1px solid #d5d5d5;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s;
    text-align: left;
    box-sizing: border-box;
  }
  
  .header-center .search-form input[type="search"]:focus {
    border-color: var(--qv-marchio);
    outline: none;
  }
  
  .header-center .search-form .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  
  .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  .login-link {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--qv-marchio);
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--qv-marchio);
    text-decoration: none;
    margin-right: 8px;
    transition: background 0.2s, color 0.2s;
  }
  
  .login-link:hover,
  .login-link:focus {
    background: var(--qv-marchio);
    color: #fff;
    outline: none;
  }
  
  .wishlist-link .icon-heart svg {
    display: block;
    width: 40px !important;
    height: 40px !important;
    stroke: var(--qv-marchio);
    fill: none;
    transition: stroke 0.2s, fill 0.2s;
  }
  
  .wishlist-link:hover .icon-heart svg {
    stroke: var(--qv-marchio);
    fill: var(--qv-marchio);
  }
  
  .cart-link {
    position: relative;
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-size: 1.2rem;
    margin-left: 8px;
  }
  
  .cart-link .icon-cart svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: #000;
    fill: none;
    transition: stroke 0.2s;
  }
  
  .cart-link:hover .icon-cart svg {
    stroke: var(--qv-marchio);
  }
  
  .cart-count {
    background: var(--qv-marchio);
    color: #fff;
    border-radius: 50%;
    font-size: 0.9rem;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -12px;
    padding: 0 6px;
    font-weight: bold;
  }
  
  .divider {
    height: 1px;
    background: #e2e2e2;
    width: 100%;
    margin: 0 0 2px 0;
  }
  
  .row-2 {
    justify-content: center;
    min-height: 40px;
    padding: 2px 32px;
  }
  
  .primary-menu {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .primary-menu li {
    position: relative;
  }
  
  .primary-menu a {
    color: #000;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 6px 0;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .primary-menu a:hover,
  .primary-menu .current-menu-item > a {
    color: var(--qv-marchio);
    font-weight: 600;
  }
}

/* La ricerca dal vivo stava DENTRO il blocco `min-width: 1024px` qui
   sopra, per una graffa mai chiusa al posto giusto: sotto i 1024px la
   tendina non riceveva alcuno stile, e la sua regola per i telefoni
   — annidata li' dentro — non poteva mai applicarsi. Ora sta fuori. */

/* ============================================
   LIVE SEARCH DROPDOWN
   ============================================ */

.live-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
  z-index: 99999;
  overflow: hidden;
}

.live-search-dropdown.is-open {
  display: block;
}

.ls-loading,
.ls-empty {
  padding: 24px;
  color: #888;
  font-size: 0.9rem;
  text-align: center;
}

/* Griglia risultati */
.ls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  max-height: 710px;
  overflow-y: auto;
}

/* Card prodotto */
.ls-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s;
}

.ls-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.ls-card-img-link {
  display: block;
  background: #fff;
}

.ls-card-img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  display: block;
}

.ls-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  text-align: center;
}

.ls-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--qv-marchio);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ls-card-title:hover { opacity: 0.8; }

.ls-card-price {
  font-size: 0.85rem;
  color: #222;
  margin-top: auto;
  padding-top: 4px;
  text-align: center;
}

.ls-card-price .woocommerce-Price-amount { font-size: 0.85rem !important; }
.ls-card-price del { opacity: 0.5; margin-right: 4px; }
.ls-card-price ins { text-decoration: none; }

/* Pulsanti nella card */
.ls-atc-btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  transition: background 0.2s;
  box-sizing: border-box;
  margin-top: 6px;
}

.ls-atc-btn:hover { background: var(--qv-marchio-scuro) !important; }

.ls-btn-outline {
  background: transparent !important;
  color: var(--qv-marchio) !important;
  border: 1px solid var(--qv-marchio) !important;
}

.ls-btn-outline:hover {
  background: var(--qv-marchio) !important;
  color: #fff !important;
}

.ls-outofstock {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  background: #e8e8e8;
  color: #999;
  margin-top: 6px;
  box-sizing: border-box;
}

/* Footer "vedi tutti" */
.ls-footer {
  border-top: 1px solid #f0f0f0;
  padding: 12px 20px;
  text-align: center;
}

.ls-view-all {
  font-size: 0.85rem;
  color: var(--qv-marchio);
  font-weight: 600;
  text-decoration: none;
}

.ls-view-all:hover { text-decoration: underline; }

/* Mobile: full width, 2 colonne */
@media (max-width: 768px) {
  .live-search-dropdown {
    width: calc(100vw - 30px);
    left: 50%;
    transform: translateX(-50%);
  }

  .ls-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px;
    max-height: 400px;
  }

  .ls-card-img { height: 120px; }
}

/* LARGE DESKTOP STYLES */
@media (min-width: 1200px) {
  .header-row {
    padding: 0;
  }
  
  .row-2 {
    padding: 2px 40px;
  }
  
  .header-center {
    width: 320px;
  }
  
  .header-center .search-form {
    max-width: 320px;
  }
  
  .primary-menu {
    gap: 40px;
  }
}

/* FOOTER CUSTOM STYLE */
.site-footer {
  background: #3c3c3b !important;
  color: #fff;
  padding: 20px 0 10px;
  font-family: 'Lato', Arial, sans-serif;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 15px;
}

.footer-column {
  flex: 1 1 200px;
  min-width: 200px;
}

.footer-title,
.site-footer .widget-title,
.site-footer .widget h3 {
  color: #fff !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tutti i titoli e paragrafi nel footer devono essere bianchi */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget h1,
.site-footer .widget h2,
.site-footer .widget h3,
.site-footer .widget h4,
.site-footer .widget h5,
.site-footer .widget h6,
.site-footer .widget-title,
.site-footer .widgettitle {
  color: #fff !important;
  font-weight: bold !important;
}

.site-footer p,
.site-footer .widget p,
.site-footer .textwidget p,
.site-footer .widget_text p,
.site-footer .widget_block p {
  color: #fff !important;
}

/* =========================================================
   FOOTER — tipografia, colori e "leve" dell'ecommerce
   Il tema forzava il bianco solo su titoli e paragrafi: link ed elenchi
   ereditavano il colore globale e restavano scuri sul fondo #3c3c3b.
   Da qui in poi il footer ha una scala di grigi chiari coerente e il
   rosso del brand come unico accento.
   ========================================================= */

.site-footer {
  --qv-footer-accento: var(--qv-marchio);
  --qv-footer-testo: rgba(255, 255, 255, 0.82);
  --qv-footer-tenue: rgba(255, 255, 255, 0.62);
  border-top: 3px solid var(--qv-footer-accento);
  padding-bottom: 0;
}

.footer-columns {
  gap: 2.5rem;
  padding: 18px 0 26px;
}

/* --- Titoli di colonna: filetto rosso sotto, invece del solo maiuscolo --- */
.site-footer .footer-column h5,
.site-footer .footer-column .wp-block-heading {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 0.95rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.site-footer .footer-column h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--qv-footer-accento);
}

/* --- Testi --- */
.site-footer li,
.site-footer .widget li,
.site-footer .widget_block li {
  color: var(--qv-footer-testo) !important;
}

.site-footer .footer-payoff {
  font-size: 1.05rem !important;
  font-style: italic;
  color: #fff !important;
  margin-bottom: 10px !important;
}

/* Selettori volutamente lunghi: il tema colora i paragrafi del footer con
   .site-footer .widget_block p !important, che altrimenti vince e appiattisce
   tutto sul bianco pieno. */
.site-footer .widget_block p.footer-intro {
  color: var(--qv-footer-testo) !important;
  font-size: 0.92rem !important;
  line-height: 1.6;
}

/* --- Link --- */
.site-footer a,
.site-footer .widget a,
.site-footer .widget_block a {
  color: var(--qv-footer-testo) !important;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff !important;
}

.site-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-links li {
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Freccia che compare al passaggio, senza spostare il testo */
.site-footer .footer-links a {
  display: inline-block;
  position: relative;
  padding-left: 0;
}

.site-footer .footer-links a::before {
  content: "›";
  position: absolute;
  left: -12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--qv-footer-accento);
  font-weight: 700;
}

.site-footer .footer-links a:hover::before,
.site-footer .footer-links a:focus::before {
  opacity: 1;
}

/* --- Pulsante HORECA --- */
.site-footer .footer-cta {
  margin-top: 18px !important;
}

.site-footer .footer-cta a {
  display: inline-block;
  background: var(--qv-footer-accento);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s ease;
}

.site-footer .footer-cta a:hover,
.site-footer .footer-cta a:focus {
  background: var(--qv-marchio-scuro);
}

/* --- Leve: spedizione e pagamenti --- */
.site-footer .footer-leva {
  position: relative;
  margin: 0 0 12px !important;
  padding: 11px 14px 11px 46px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--qv-footer-accento);
  border-radius: 0 6px 6px 0;
  line-height: 1.35;
}

.site-footer .footer-leva strong {
  display: block;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
}

.site-footer .footer-leva span {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  color: var(--qv-footer-tenue);
}

.site-footer .footer-leva::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}

.site-footer .footer-leva--spedizione::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h14v13H1z'/%3E%3Cpath d='M15 8h4l4 4v4h-8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.site-footer .footer-leva--pagamenti::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* --- Contatti --- */
.site-footer .footer-sede {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}

.site-footer .footer-sede::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.site-footer .footer-sede strong {
  display: block;
  color: #fff;
  margin-bottom: 3px;
}

.site-footer .footer-sede span {
  color: var(--qv-footer-testo);
  font-size: 0.92rem;
}

.site-footer .widget_block p.footer-piva {
  color: var(--qv-footer-tenue) !important;
  font-size: 0.85rem !important;
  margin-top: 10px !important;
}

.site-footer .footer-scrivici {
  margin-top: 14px !important;
}

.site-footer .footer-scrivici a {
  position: relative;
  padding-left: 28px;
  display: inline-block;
}

.site-footer .footer-scrivici a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

/* «Lavora con noi» sotto «Scrivici», con la stessa forma e una valigetta. */
.site-footer .footer-lavora {
  margin-top: 8px !important;
}

.site-footer .footer-lavora a {
  position: relative;
  padding-left: 28px;
  display: inline-block;
}

.site-footer .footer-lavora a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M2 13h20'/%3E%3C/svg%3E");
}

/* --- Copyright --- */
.site-footer .footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0 20px;
  text-align: center;
}

.site-footer .footer-copyright p {
  color: var(--qv-footer-testo) !important;
  font-size: 0.88rem !important;
  margin: 0 !important;
}

.site-footer .footer-copyright p.footer-avvertenza {
  color: var(--qv-footer-tenue) !important;
  font-size: 0.8rem !important;
  margin-top: 6px !important;
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce) {
  .site-footer a,
  .site-footer .footer-links a::before,
  .site-footer .footer-cta a {
    transition: none;
  }
}

@media (max-width: 767px) {
  .footer-columns {
    gap: 1.75rem;
  }

  .site-footer .footer-column h5 {
    margin-bottom: 14px;
  }
}

.footer-description {
  color: #fff;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 15px;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 8px;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.footer-menu a:hover {
  opacity: 1;
  text-decoration: underline;
}

.contact-info {
  color: #fff;
}

.contact-item {
  margin-bottom: 15px;
  line-height: 1.5;
}

.contact-item strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.contact-item a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.contact-item a:hover {
  opacity: 1;
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  margin-bottom: 0;
  text-align: center;
}

.footer-copyright p {
  color: #fff;
  opacity: 0.8;
  margin: 0;
  font-size: 0.9rem;
}

.footer-logo img {
  max-height: 60px;
  width: auto;
  margin-top: 10px;
}

/* Footer Responsive */
@media (max-width: 768px) {
  .footer-column {
    flex: 1 1 100%;
    margin-bottom: 25px;
  }
  
  .footer-columns {
    gap: 0;
  }
  
  .site-footer {
    padding: 30px 0 15px;
  }
  
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-title {
    font-size: 1.1rem;
  }
  
  .footer-copyright p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* Rimuove margine eccessivo dai widget nel footer */
.site-footer .widget_text,
.site-footer .widget_block {
  margin-bottom: 0 !important;
}

.site-footer .widget_text p:last-child,
.site-footer .widget_block p:last-child {
  margin-bottom: 0 !important;
}

/* Nasconde titoli pagina - escluse le pagine archivio prodotti */
.page .entry-title {
  display: none;
}

/* Nasconde titolo solo su pagine specifiche WooCommerce (non su archivio prodotti) */
.woocommerce-page:not(.tax-product_cat):not(.post-type-archive-product) .page-title {
  display: none;
}

/* Assicura che il titolo categoria sia visibile e stilizzato correttamente */
.tax-product_cat .page-title,
.post-type-archive-product .page-title,
.category-header .page-title,
.category-header .woocommerce-products-header__title {
  display: block !important;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--qv-marchio) !important;
  margin-bottom: 15px;
  line-height: 1.2;
}

/* Allinea content area e footer alla larghezza dell'header */
.col-full {
  max-width: 1280px;
}

/* ============================================
   PRODUCT GALLERY SLIDER
   ============================================ */

.custom-product-gallery-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.custom-product-gallery-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.custom-product-gallery-slider .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Navigation Buttons */
.custom-product-gallery-slider .swiper-button-next,
.custom-product-gallery-slider .swiper-button-prev {
  color: var(--qv-marchio);
  transition: color 0.2s, transform 0.2s;
}

.custom-product-gallery-slider .swiper-button-next:hover,
.custom-product-gallery-slider .swiper-button-prev:hover {
  color: var(--qv-marchio-scuro);
  transform: scale(1.1);
}

.custom-product-gallery-slider .swiper-button-next::after,
.custom-product-gallery-slider .swiper-button-prev::after {
  font-size: 2rem;
  font-weight: 900;
}

/* Wishlist Wrapper */
.custom-wishlist-wrapper {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 20;
    pointer-events: auto;
}

.custom-wishlist-wrapper .product-wishlist-heart {
    position: static !important; /* Override inline styles from plugin */
    display: block;
}

/* Remove default gallery styles that cause stacking */
.product-images-column .woocommerce-product-gallery {
    margin: 0;
}

.product-images-column .woocommerce-product-gallery__image {
    display: block;
    margin-bottom: 0;
}

/* Ensure existing elements are on top */
.product-images-column .onsale {
  z-index: 10;
}


/* ============================================
   PAGINA PRODOTTO CUSTOM - STILE TANNICO
   ============================================ */

/* Layout principale prodotto */
.single-product-custom .product-layout-custom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Sezione principale - 2 colonne */
.product-main-section {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Colonna immagini */
.product-images-column {
  width: 50%;
  position: relative;
}

/* Badge PROMO in offerta */
.product-images-column .onsale {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 10 !important;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(var(--qv-marchio-rgb), 0.3) !important;
}

.product-images-column .woocommerce-product-gallery {
  margin: 0;
}

.product-images-column .woocommerce-product-gallery__image {
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.product-images-column .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  box-shadow: none;
}

/* Rimuovi effetto zoom hover */
.woocommerce-product-gallery .woocommerce-product-gallery__image:hover img {
  transform: none !important;
}

/* Lente di ingrandimento rossa con SVG personalizzato */
.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  z-index: 10 !important;
  background-color: transparent !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%239b113b" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.024q0-2.624 1.024-5.056t2.784-4.16 4.16-2.752 5.056-1.056q2.656 0 5.056 1.056t4.16 2.752 2.784 4.16 1.024 5.056q0 3.616-1.984 6.816l7.072 7.040q0.864 0.896 0.864 2.144t-0.864 2.112-2.144 0.864-2.112-0.864l-7.040-7.040q-3.2 1.952-6.816 1.952-2.656 0-5.056-1.024t-4.16-2.784-2.784-4.128-1.024-5.088zM4 13.024q0 2.464 1.216 4.544t3.296 3.264 4.512 1.216q1.824 0 3.488-0.704t2.88-1.92 1.92-2.88 0.736-3.52-0.736-3.52-1.92-2.848-2.88-1.92-3.488-0.736q-2.432 0-4.512 1.216t-3.296 3.296-1.216 4.512z"/></svg>') !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

.woocommerce-product-gallery__trigger:hover {
  transform: scale(1.15) !important;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%237d0e2f" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.024q0-2.624 1.024-5.056t2.784-4.16 4.16-2.752 5.056-1.056q2.656 0 5.056 1.056t4.16 2.752 2.784 4.16 1.024 5.056q0 3.616-1.984 6.816l7.072 7.040q0.864 0.896 0.864 2.144t-0.864 2.112-2.144 0.864-2.112-0.864l-7.040-7.040q-3.2 1.952-6.816 1.952-2.656 0-5.056-1.024t-4.16-2.784-2.784-4.128-1.024-5.088zM4 13.024q0 2.464 1.216 4.544t3.296 3.264 4.512 1.216q1.824 0 3.488-0.704t2.88-1.92 1.92-2.88 0.736-3.52-0.736-3.52-1.92-2.848-2.88-1.92-3.488-0.736q-2.432 0-4.512 1.216t-3.296 3.296-1.216 4.512z"/></svg>') !important;
}

.woocommerce-product-gallery__trigger::before {
  content: '' !important;
  display: none !important;
}

.woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery__trigger .emoji {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Colonna informazioni prodotto */
.product-info-column {
  width: 50%;
  position: sticky;
  top: calc(var(--header-height) + 20px);
  height: fit-content;
  padding-left: 40px;
  box-sizing: border-box;
}

.product-info-wrapper {
  background: #fff;
  padding: 20px;
}

/* Titolo prodotto */
.product-info-wrapper .product_title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--qv-marchio) !important; /* come i nomi dei vini nelle schede (revisione 28/10) */
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Prezzo */
.product-price-section {
  margin-bottom: 20px;
}

.single-product-custom .product-price-section .price,
.single-product-custom .product-info-wrapper .price,
.product-price-section .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.single-product-custom .price,
.single-product-custom .price .woocommerce-Price-amount,
.single-product-custom .woocommerce-Price-amount,
body.single-product .price,
body.single-product .price .amount,
body.single-product .woocommerce-Price-amount {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #333 !important; /* prezzi #333 come in home (revisione 28/10) */
}

.product-price-section .price del {
  opacity: 0.5;
  font-size: 1.5rem;
  font-weight: 400 !important;
}

/* Stili per il contenitore del prezzo personalizzato */
.custom-price-container {
  line-height: 1.3;
}

.custom-price-container p {
  margin: 0 0 4px 0;
}

.custom-price-container .price.sale-price,
.custom-price-container .price.sale-price .woocommerce-Price-amount.amount {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin: 0 !important;
}

.custom-price-container .discount-percentage {
  font-size: 1.6rem; /* 20% più piccolo di 2rem */
  color: var(--qv-marchio);
  font-weight: 700;
}

.custom-price-container .original-price-text,
.custom-price-container .original-price-text .woocommerce-Price-amount.amount {
  font-size: 1rem !important; /* 50% più piccolo di 2rem */
  color: #000 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.product-price-section p.price {
    margin: 0 !important;
}

/* Pulsante aggiungi al carrello */
.product-add-to-cart {
  margin-bottom: 20px;
}

.product-add-to-cart .single_add_to_cart_button {
  width: 100%;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border: none;
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.product-add-to-cart .single_add_to_cart_button:hover {
  background: var(--qv-marchio-scuro) !important;
  transform: translateY(-2px);
}

.product-add-to-cart .quantity {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-add-to-cart .quantity input {
  width: 80px;
  padding: 10px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  text-align: center;
}

/* Disponibilità Semplificata */
.product-availability-simple {
  margin: 15px 0 20px 0;
}

.stock-simple {
  font-size: 0.9rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stock-simple::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.stock-simple.in-stock {
  color: #2e7d32;
}

.stock-simple.in-stock::before {
  background-color: #2e7d32;
}

.stock-simple.out-of-stock {
  color: #c62828;
}

.stock-simple.out-of-stock::before {
  background-color: #c62828;
}

/* Meta prodotto - Nasconde SKU e categoria */
.product-meta-section {
  display: none !important;
}

/* Caratteristiche tecniche - Layout verticale pulito con icone */
.product-technical-specs-inline {
  margin-top: 15px;
  margin-bottom: 10px;
  padding-top: 0;
  border-top: none;
}

.specs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spec-item-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  background: transparent;
  border: none;
  line-height: 1.5;
}

.spec-icon-inline {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: hue-rotate(330deg) saturate(3);
}

.spec-label-inline,
.single-product-custom .spec-label-inline,
.product-technical-specs-inline .spec-label-inline,
.product-info-wrapper .spec-label-inline,
body.single-product .spec-label-inline,
.specs-list .spec-label-inline {
  font-weight: 900 !important;
  color: var(--qv-marchio) !important;
  flex-shrink: 0;
  margin-right: 4px;
  font-size: 0.95rem;
}

.spec-value-inline {
  color: #333;
  flex: 1;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Layout quantità + carrello inline */
.product-add-to-cart {
  margin-bottom: 20px;
}

.product-add-to-cart form.cart {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-add-to-cart .quantity {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  overflow: hidden;
  height: 50px;
  background: #f5f5f5;
}

.product-add-to-cart .quantity .qty-btn {
  width: 40px;
  height: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.product-add-to-cart .quantity .qty-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.product-add-to-cart .quantity input.qty {
  width: 60px;
  height: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.product-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-add-to-cart .single_add_to_cart_button {
  flex: 1;
  width: auto;
  height: 50px;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border: none;
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  white-space: nowrap;
}

.product-add-to-cart .single_add_to_cart_button:hover {
  background: var(--qv-marchio-scuro) !important;
  transform: translateY(-2px);
}

/* Scheda tecnica */
.product-technical-specs {
  background: #fff;
  padding: 40px;
  margin-bottom: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-technical-specs .section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--qv-marchio) !important;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--qv-marchio);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.spec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #f9f9f9;
  transition: transform 0.2s;
}

.spec-item:hover {
  transform: translateX(5px);
}

.spec-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.spec-content {
  flex: 1;
}

.spec-label {
  font-weight: 600;
  color: #333;
  display: inline-block;
  margin-right: 5px;
}

.spec-value {
  color: #666;
}

/* Sezioni descrizione - Layout a 2 colonne */
.product-description-sections {
  margin-bottom: 40px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
}

.description-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.description-content p {
  margin-bottom: 15px;
}

.description-content p:last-child {
  margin-bottom: 0;
}

/* Testo in grassetto rosso nelle descrizioni */
.description-content strong,
.description-content b,
.single-product-custom strong,
.single-product-custom b,
.product-description-sections strong,
.product-description-sections b,
body.single-product .description-content strong,
body.single-product .description-content b,
.woocommerce-product-details strong,
.woocommerce-product-details b {
  font-weight: 900 !important;
}

/* Griglia per punti elenco - ogni punto diventa un blocco */
.description-content ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.description-content ul li {
  background: transparent;
  padding: 0;
  border: none;
  break-inside: avoid;
}

.description-content ul li strong,
.description-content ul li b,
body.single-product .description-content ul li strong,
body.single-product .description-content ul li b {
  display: block;
  font-weight: 900 !important;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

/* ============================================
   CUSTOM DESCRIPTION BLOCKS
   ============================================ */

.custom-blocks-section {
  margin-bottom: 40px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #e2e2e2;
}

.custom-blocks-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.custom-block-title {
  display: block;
  color: var(--qv-marchio) !important;
  font-weight: 900 !important;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.custom-block-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.custom-block-text strong,
.custom-block-text b {
    font-weight: 900 !important;
}

@media (max-width: 768px) {
  .custom-blocks-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Per paragrafi non in lista - mantiene layout a colonne */
.description-content > p {
  column-span: all;
}

/* Sezione prodotti correlati */
.product-related-section {
  margin-top: 0;
  padding-top: 40px;
  border-top: none;
}

.product-related-section .related,
.product-related-section .upsells {
  margin-bottom: 40px;
}

.product-related-section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--qv-marchio) !important;
  margin-bottom: 30px;
  text-align: center;
}

.product-related-section .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.product-related-section .product {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-related-section .product:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.product-related-section .product img {
  width: 100%;
  height: auto;
  display: block;
}

.product-related-section .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  color: #000 !important;
  padding: 15px;
  margin: 0;
}

.product-related-section .price {
  color: var(--qv-marchio) !important;
  font-weight: 700;
  padding: 0 15px 15px;
  font-size: 1.1rem;
}

.product-related-section .button {
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  margin: 0 15px 15px;
  display: inline-block;
  transition: background 0.3s;
}

.product-related-section .button:hover {
  background: var(--qv-marchio-scuro) !important;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
  .product-main-section {
    gap: 30px;
  }
  
  .product-technical-specs,
  .product-short-description,
  .product-full-description {
    padding: 30px;
  }
  
  .product-related-section .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
  .product-main-section {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0;
  }
  
  .product-info-column {
    position: static;
  }
  
  .product-info-wrapper {
    padding: 15px;
  }
  
  .product-info-wrapper .product_title {
    font-size: 1.5rem;
  }
  
  .product-price-section .price {
    font-size: 1.6rem;
  }
  
  .product-technical-specs {
    padding: 20px;
  }
  
  .product-technical-specs .section-title {
    font-size: 1.4rem;
  }
  
  .specs-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .spec-item {
    padding: 12px;
  }
  
  /* Caratteristiche inline su mobile - 1 colonna */
  .specs-list {
    grid-template-columns: 1fr;
  }
  
  /* Descrizioni a 1 colonna su mobile */
  .description-columns {
    column-count: 1;
    gap: 20px;
    padding: 20px;
  }
  
  .description-column:first-child:not(:last-child)::after {
    display: none;
  }
  
  /* Griglia descrizione a 1 colonna su mobile */
  .description-content ul {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-related-section .products {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-related-section h2 {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .single-product-custom .product-layout-custom {
    padding: 0 15px;
  }
  
  .product-add-to-cart .single_add_to_cart_button {
    padding: 12px 20px;
    font-size: 1rem;
  }
  
  .spec-icon {
    font-size: 1.2rem;
  }
  
  .spec-label,
  .spec-value {
    font-size: 0.9rem;
  }
}

/* ============================================
   WISHLIST HEART - PAGINA PRODOTTO
   ============================================ */

/* Posizionamento cuore nella scheda prodotto */
.product-images-column {
  position: relative;
}

.product-images-column .woocommerce-product-gallery {
  position: relative;
}

.product-images-column .woocommerce-product-gallery__wrapper {
  position: relative;
}

.product-images-column .woocommerce-product-gallery__image {
  position: relative;
}

/* Posizionamento del cuore - sovrapposto all'immagine in basso a sinistra */
.woocommerce-product-gallery .product-wishlist-heart {
  position: absolute !important;
  bottom: 15px !important;
  left: 15px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.product-wishlist-heart:hover {
  transform: scale(1.1);
}

/* Stile cuore personalizzato nella scheda prodotto */
.product-wishlist-heart .custom-wishlist-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.product-wishlist-heart .custom-wishlist-heart:hover {
  transform: scale(1.1);
}

.product-wishlist-heart .custom-wishlist-heart svg {
  display: block;
  width: 40px;
  height: 40px;
  stroke: var(--qv-marchio);
  fill: none;
  transition: stroke 0.2s, fill 0.2s;
}

.product-wishlist-heart .custom-wishlist-heart:hover svg {
  stroke: var(--qv-marchio);
  fill: var(--qv-marchio);
}

.product-wishlist-heart .custom-wishlist-heart.in-wishlist svg {
  stroke: var(--qv-marchio);
  fill: var(--qv-marchio);
}

/* ============================================
   WISHLIST HEART - MENU HEADER CON ANIMAZIONE
   ============================================ */

/* Cuore nel menu header - stato base */
.wishlist-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-width: 56px;
  min-height: 56px;
}

.wishlist-link .icon-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.wishlist-link .icon-heart svg {
  display: block;
  width: 40px !important;
  height: 40px !important;
  stroke: var(--qv-marchio);
  fill: none;
  transition: stroke 0.2s, fill 0.2s;
}

.wishlist-link:hover .icon-heart svg {
  stroke: var(--qv-marchio);
  fill: var(--qv-marchio);
}

/* Cuore pieno quando ci sono prodotti nella wishlist */
.wishlist-link.has-items .icon-heart svg {
  fill: var(--qv-marchio);
  stroke: var(--qv-marchio);
}

/* Animazione di pulsazione fluida e morbida */
@keyframes pulse-elegant {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(var(--qv-marchio-rgb), 0));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px rgba(var(--qv-marchio-rgb), 0.5));
  }
}

.wishlist-link.has-items .icon-heart {
  animation: pulse-elegant 2.5s ease-in-out infinite;
}

/* Mobile - cuore nel menu mobile */
.mobile-wishlist-link svg {
  stroke: var(--qv-marchio);
  fill: none;
  transition: stroke 0.2s, fill 0.2s;
}

.mobile-wishlist-link:hover svg {
  fill: var(--qv-marchio);
}

.mobile-wishlist-link.has-items svg {
  fill: var(--qv-marchio);
  stroke: var(--qv-marchio);
  animation: pulse-elegant-mobile 2.5s ease-in-out infinite;
}

/* Versione mobile con scala ridotta per non essere troppo invadente */
@media (max-width: 768px) {
  @keyframes pulse-elegant-mobile {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(var(--qv-marchio-rgb), 0));
    }
    50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 5px rgba(var(--qv-marchio-rgb), 0.4));
    }
  }
}

/* ============================================
   RESPONSIVE - WISHLIST HEART
   ============================================ */

@media (max-width: 768px) {
  .product-wishlist-heart {
    bottom: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
  }
  
  .product-wishlist-heart .yith-wcwl-add-to-wishlist a {
    width: 35px;
    height: 35px;
  }
  
  .product-wishlist-heart .yith-wcwl-add-to-wishlist a::before {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .product-wishlist-heart {
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
  }
  
  .product-wishlist-heart .yith-wcwl-add-to-wishlist a {
    width: 30px;
    height: 30px;
  }
  
  .product-wishlist-heart .yith-wcwl-add-to-wishlist a::before {
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   SISTEMA NOTIFICHE WOOCOMMERCE PERSONALIZZATE
   ============================================ */

/* Container principale notifiche - posizionato sotto l'header */
.custom-wc-notices-wrapper {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: none;
  font-family: 'Lato', Arial, sans-serif;
}

/* Singola notifica */
.custom-wc-notice {
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  border-left: 5px solid;
  position: relative;
}

/* Notifica visibile */
.custom-wc-notice.show {
  opacity: 1;
  max-height: 200px;
  overflow: visible;
}

/* Contenuto notifica */
.notice-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Icona notifica */
.notice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.notice-icon svg {
  width: 100%;
  height: 100%;
}

/* Messaggio notifica */
.notice-message {
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

/* Pulsante chiudi */
.notice-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, transform 0.2s;
  margin-left: 12px;
  color: inherit;
  opacity: 0.6;
}

.notice-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  opacity: 1;
  transform: scale(1.1);
}

.notice-close svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   STILI PER TIPO DI NOTIFICA
   ============================================ */

/* Notifica successo (verde) */
.custom-wc-notice.notice-success {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
  border-left-color: #4caf50;
}

.custom-wc-notice.notice-success .notice-icon,
.custom-wc-notice.notice-success .notice-close {
  color: #2e7d32;
}

.custom-wc-notice.notice-success .notice-message {
  color: #1b5e20;
}

/* Notifica errore (rosso) */
.custom-wc-notice.notice-error {
  background: linear-gradient(135deg, #ffebee 0%, #fef5f5 100%);
  border-left-color: #f44336;
}

.custom-wc-notice.notice-error .notice-icon,
.custom-wc-notice.notice-error .notice-close {
  color: #c62828;
}

.custom-wc-notice.notice-error .notice-message {
  color: #b71c1c;
}

/* Notifica info (blu) */
.custom-wc-notice.notice-info {
  background: linear-gradient(135deg, #e3f2fd 0%, #f1f8fe 100%);
  border-left-color: #2196f3;
}

.custom-wc-notice.notice-info .notice-icon,
.custom-wc-notice.notice-info .notice-close {
  color: #1565c0;
}

.custom-wc-notice.notice-info .notice-message {
  color: #0d47a1;
}

/* Notifica avviso (arancione) */
.custom-wc-notice.notice-warning {
  background: linear-gradient(135deg, #fff3e0 0%, #fffaf5 100%);
  border-left-color: #ff9800;
}

.custom-wc-notice.notice-warning .notice-icon,
.custom-wc-notice.notice-warning .notice-close {
  color: #e65100;
}

.custom-wc-notice.notice-warning .notice-message {
  color: #e65100;
}

/* ============================================
   RESPONSIVE - NOTIFICHE
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .custom-wc-notice {
    padding: 14px 20px;
  }
  
  .notice-message {
    font-size: 0.95rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .custom-wc-notice {
    padding: 12px 16px;
    border-left-width: 4px;
  }
  
  .notice-content {
    gap: 10px;
  }
  
  .notice-icon {
    width: 20px;
    height: 20px;
  }
  
  .notice-message {
    font-size: 0.9rem;
  }
  
  .notice-close {
    padding: 6px;
    margin-left: 8px;
  }
  
  .notice-close svg {
    width: 18px;
    height: 18px;
  }
}

/* Mobile small */
@media (max-width: 480px) {
  .custom-wc-notice {
    padding: 10px 12px;
  }
  
  .notice-content {
    gap: 8px;
  }
  
  .notice-message {
    font-size: 0.85rem;
  }
}

/* ============================================
   ANIMAZIONI AVANZATE
   ============================================ */

/* Animazione di ingresso più fluida */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animazione di uscita */
@keyframes slideOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Animazione pulsazione per icone (opzionale) */
@keyframes pulse-notice {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Applica pulsazione all'icona quando la notifica appare */
.custom-wc-notice.show .notice-icon {
  animation: pulse-notice 0.6s ease-in-out 1;
}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */

/* Focus visibile per pulsante chiudi */
.notice-close:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Migliora il contrasto per utenti con disabilità visive */
@media (prefers-contrast: high) {
  .custom-wc-notice {
    border-left-width: 6px;
  }
  
  .notice-message {
    font-weight: 600;
  }
}

/* Rispetta le preferenze di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .custom-wc-notice {
    transition: opacity 0.2s;
    transform: none !important;
  }
  
  .custom-wc-notice.show .notice-icon {
    animation: none;
  }
  
  .notice-close:hover {
    transform: none;
  }
}

/* ============================================
   LAYOUT CATEGORIE PRODOTTO - ARCHIVIO WOOCOMMERCE
   ============================================ */

/* Container principale layout archivio */
/* Storefront imposta overflow-x:hidden su .site, che disabilita position:sticky.
   overflow-x:clip blocca lo scroll orizzontale senza creare un contesto di scorrimento. */
.site {
  overflow-x: clip;
}

.category-archive-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Lato', Arial, sans-serif;
}

.category-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 20px;
}

/* ============================================
   SIDEBAR SINISTRA
   ============================================ */

.category-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0 25px 30px;
  position: sticky;
  top: calc(var(--header-height) + 40px);
  max-height: calc(100vh - var(--header-height) - 60px);
  overflow-y: auto;
  align-self: flex-start;
}

.sidebar-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--qv-marchio) !important;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--qv-marchio);
  text-transform: none;
  letter-spacing: 0;
}

/* Widget categorie prodotto */
.product-categories-widget {
  margin-bottom: 30px;
}

.product-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-categories-list li {
  margin-bottom: 8px;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.product-categories-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-categories-list a,
.category-sidebar .product-categories a,
.category-sidebar ul.product-categories li a {
  color: #333;
  text-decoration: none;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: 0;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}

.product-categories-list a:hover,
.product-categories-list .current-category a {
  color: var(--qv-marchio);
  padding-left: 8px;
}

.product-categories-list .count {
  color: #999;
  font-size: 0.9rem;
  margin-left: 8px;
}

/* Widget filtri */
.additional-filters .widget {
  margin-bottom: 25px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 6px;
}

.additional-filters .widget-title,
.additional-filters .filter-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--qv-marchio) !important;
  margin-bottom: 15px;
}

/* ============================================
   AREA PRINCIPALE - CONTENUTO
   ============================================ */

.category-main-content {
  flex: 1;
  min-width: 0;
}

/* Header categoria */
.category-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e2e2;
}

.category-header .page-title,
.category-header .woocommerce-products-header__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--qv-marchio) !important;
  margin-bottom: 15px;
  line-height: 1.2;
}

/* Descrizione categoria con "mostra di più" */
.category-description-wrapper {
  position: relative;
  margin-top: 15px;
}

.category-description {
  color: #333;
  line-height: 1.6;
  font-size: 1rem;
}

.category-description p {
  margin-bottom: 15px;
}

.category-description p:last-child {
  margin-bottom: 0;
}

.category-description strong,
.category-description b {
  font-weight: 700;
}

.category-description em,
.category-description i {
  font-style: italic;
}

/* Stato collassato: taglia l'altezza e anima */
.is-collapsible .category-description {
  overflow: hidden;
  max-height: 9.6em;
  transition: max-height 0.4s ease;
}

/* Fade in fondo quando collassato */
.category-description-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.category-description-wrapper.expanded .category-description-fade {
  opacity: 0;
  pointer-events: none;
}

.show-more-btn {
  background: transparent;
  border: none;
  color: var(--qv-marchio);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 10px;
  transition: opacity 0.2s;
  text-decoration: underline;
  display: block;
}

.show-more-btn:hover {
  opacity: 0.8;
}

/* Barra info prodotti */
.products-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.products-count {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.products-sorting {
  display: flex;
  align-items: center;
  gap: 10px;
}

.products-sorting form.woocommerce-ordering {
  margin: 0;
}

.products-sorting label {
  font-size: 0.95rem;
  color: #666;
  font-weight: 500;
}

.products-sorting select {
  padding: 8px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  font-size: 0.95rem;
  color: #333;
  min-width: 200px;
}

.products-sorting select:focus {
  outline: none;
  border-color: var(--qv-marchio);
}

/* ============================================
   GRIGLIA PRODOTTI
   ============================================ */

.category-products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
}

/* WooCommerce usa ::before per il clearfix — con display:grid diventa
   il primo item della griglia e sposta i prodotti nelle colonne 2 e 3 */
.category-products-grid::before,
.category-products-grid::after {
  display: none !important;
  content: none !important;
}

/* Annulla la width % che WooCommerce imposta per il layout float/flex */
.category-products-grid > li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Card singolo prodotto */
.category-product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  position: relative;
}

.product-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Wrapper immagine prodotto */
.product-image-wrapper {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.product-image-link {
  display: block;
  position: relative;
}

.product-image-wrapper img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.category-product-card:hover .product-image-wrapper img {
  transform: scale(1.03);
}

/* Badge sconto */
.onsale-badge {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 4px !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(var(--qv-marchio-rgb), 0.3) !important;
}

/* Cuore wishlist sulla card prodotto */
.category-product-card .product-wishlist-heart {
  position: absolute !important;
  bottom: 15px !important;
  right: 15px !important;
  z-index: 10 !important;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.category-product-card:hover .product-wishlist-heart {
  opacity: 1;
  transform: translateY(0);
}

.category-product-card .custom-wishlist-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-product-card .custom-wishlist-heart:hover {
  background: var(--qv-marchio);
  transform: scale(1.1);
}

.category-product-card .custom-wishlist-heart svg {
  width: 20px;
  height: 20px;
  stroke: var(--qv-marchio);
  fill: none;
  transition: all 0.2s ease;
}

.category-product-card .custom-wishlist-heart:hover svg {
  stroke: #fff;
  fill: #fff;
}

.category-product-card .custom-wishlist-heart.in-wishlist svg {
  stroke: var(--qv-marchio);
  fill: var(--qv-marchio);
}

.category-product-card .custom-wishlist-heart.in-wishlist:hover svg {
  stroke: #fff;
  fill: #fff;
}

/* Integrazione YITH Wishlist nelle card — solo icona cuore */
.category-product-card .yith-wcwl-add-to-wishlist,
.category-product-card .yith-wcwl-add-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* Collassa tutto il contenuto testuale del link YITH */
.category-product-card .yith-wcwl-add-to-wishlist a,
.category-product-card .yith-wcwl-add-to-wishlist .add_to_wishlist {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 0 !important;          /* nasconde il testo */
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* Icona cuore via ::before */
.category-product-card .yith-wcwl-add-to-wishlist a::before {
  content: '♡';
  font-size: 18px !important;
  color: var(--qv-marchio);
  display: block;
  line-height: 1;
  transition: color 0.2s ease;
}

.category-product-card .yith-wcwl-add-to-wishlist a:hover {
  background: var(--qv-marchio) !important;
}

.category-product-card .yith-wcwl-add-to-wishlist a:hover::before {
  color: #fff;
}

/* Nasconde eventuale icona nativa YITH (già sostituita dal ::before) */
.category-product-card .yith-wcwl-add-to-wishlist .yith-wcwl-icon {
  display: none !important;
}

/* Informazioni prodotto */
.product-info {
  padding: 8px 8px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-info .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 700 !important;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--qv-marchio) !important;
}

.product-info .woocommerce-loop-product__title a {
  color: var(--qv-marchio);
  text-decoration: none;
  transition: opacity 0.2s;
}

.product-info .woocommerce-loop-product__title a:hover {
  opacity: 0.75;
}

.product-price {
  margin-bottom: 8px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.product-price .price,
.category-product-card .price,
.category-products-grid .price {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #222 !important;
}

.product-price .price del {
  opacity: 0.5 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 12px !important;
  color: #666 !important;
}

/* Storefront imposta margin-left su ins: lo azzeriamo e usiamo solo il margin-right sul del */
.product-price .price del + ins {
  margin-left: 0 !important;
}

.product-price .price ins {
  text-decoration: none;
}

/* Azioni prodotto */
.product-actions {
  padding: 0 8px 8px;
}

.add-to-cart-wrapper {
  display: flex;
}

.add-to-cart-btn {
  flex: 1;
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border: none;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  display: block;
}

.add-to-cart-btn:hover {
  background: var(--qv-marchio-scuro) !important;
}

.out-of-stock-wrapper {
  display: flex;
}

.out-of-stock-text {
  flex: 1;
  background: #e8e8e8;
  color: #333;
  border: none;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  cursor: default;
  display: block;
}

/* ============================================
   PAGINAZIONE E CARICAMENTO
   ============================================ */

.products-pagination-info {
  text-align: center;
  margin: 30px 0 20px 0;
  padding: 15px;
  background: #f8f8f8;
  border-radius: 8px;
  color: #666;
  font-size: 0.95rem;
}

.load-more-wrapper {
  text-align: center;
  margin: 30px 0;
}

.load-more-btn {
  background: var(--qv-marchio);
  color: #fff;
  border: none;
  padding: 15px 40px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: lowercase;
  min-width: 200px;
}

.load-more-btn:hover {
  background: var(--qv-marchio-scuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--qv-marchio-rgb), 0.3);
}

.load-more-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.load-more-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.load-more-btn.loading::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   MESSAGGIO NESSUN PRODOTTO
   ============================================ */

.no-products-found {
  text-align: center;
  padding: 60px 20px;
  background: #f9f9f9;
  border-radius: 12px;
  margin: 40px 0;
}

.no-products-content h2 {
  font-size: 1.8rem;
  color: var(--qv-marchio) !important;
  margin-bottom: 15px;
}

.no-products-content p {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.no-products-content .button {
  background: var(--qv-marchio) !important;
  color: #fff !important;
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.no-products-content .button:hover {
  background: var(--qv-marchio-scuro) !important;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
  .category-container {
    gap: 30px;
  }
  
  .category-sidebar {
    width: 250px;
    padding: 25px 20px;
  }
  
  .category-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .category-header .page-title {
    font-size: 1.9rem;
  }
  
  .products-info-bar {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .products-sorting {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Nascondere filtri di ordinamento duplicati a fine pagina */
.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination,
.category-main-content .woocommerce-pagination,
.products + .woocommerce-pagination {
  display: none !important;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
  .category-archive-layout {
    padding: 0 15px;
  }
  
  .category-container {
    flex-direction: column;
    gap: 25px;
    margin-top: 15px;
  }
  
  /* Pulsante toggle filtri mobile */
  .sidebar-toggle {
    width: 100%;
    background: var(--qv-marchio);
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
  }
  
  .sidebar-toggle:hover {
    background: var(--qv-marchio-scuro);
  }
  
  .sidebar-toggle .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s;
  }
  
  /* Sidebar mobile: nascosta di default, si apre col toggle */
  .category-sidebar {
    width: 100%;
    position: static;
    overflow: visible;
    padding: 20px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 0;
    pointer-events: none;
  }

  .category-sidebar.mobile-expanded {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 25px;
    pointer-events: auto;
  }
  
  .sidebar-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .product-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .product-categories-list li {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    background: #f0f0f0;
    padding: 8px 15px;
    border-radius: 20px;
  }
  
  .product-categories-list a {
    font-size: 0.9rem;
    padding: 0;
  }
  
  .product-categories-list a:hover,
  .product-categories-list .current-category a {
    padding-left: 0;
    background: var(--qv-marchio);
    color: #fff;
    border-radius: 20px;
    padding: 8px 15px;
    margin: -8px -15px;
  }
  
  /* Griglia prodotti mobile */
  .category-products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .category-header .page-title {
    font-size: 1.6rem;
  }
  
  .products-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .products-sorting {
    width: 100%;
    justify-content: space-between;
  }
  
  .products-sorting select {
    min-width: 150px;
  }
  
  /* Card prodotto mobile */
  .product-image-wrapper img {
    height: 250px;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .product-actions {
    padding: 0 15px 15px;
  }
  
  .add-to-cart-btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
  
  .load-more-btn {
    padding: 12px 30px;
    font-size: 0.95rem;
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .category-archive-layout {
    padding: 0 10px;
  }
  
  .category-sidebar {
    padding: 15px;
  }
  
  .product-categories-list {
    gap: 10px;
  }
  
  .product-categories-list li {
    padding: 6px 12px;
  }
  
  .product-categories-list a {
    font-size: 0.85rem;
  }
  
  .category-header .page-title {
    font-size: 1.4rem;
  }
  
  .products-info-bar {
    padding: 12px 15px;
  }
  
  .category-products-grid {
    gap: 15px;
  }
  
  .product-image-wrapper img {
    height: 220px;
  }
  
  .product-info .woocommerce-loop-product__title {
    font-size: 1rem;
  }
  
  .product-price .price {
    font-size: 1.2rem !important;
  }
  
  .add-to-cart-btn {
    font-size: 0.85rem;
  }
  
  .no-products-found {
    padding: 40px 15px;
  }
  
  .no-products-content h2 {
    font-size: 1.5rem;
  }
  
  .no-products-content p {
    font-size: 1rem;
  }
}

/* =========================================================
   STANDARD PAGINE EDITORIALI
   Si applica alle pagine con la classe body .qv-pagina-editoriale,
   assegnata da inc/pagine-editoriali.php. Restano escluse home,
   home HORECA, ordine rapido e le pagine funzionali di WooCommerce.
   Il "come costruire una pagina" e' documentato in quel file.
   ========================================================= */

.qv-pagina-editoriale {
  --qv-testo: #3c3c3b;
  --qv-tenue: #6f6f6e;
  --qv-accento: var(--qv-marchio);
  --qv-misura: 68ch;          /* lunghezza di riga leggibile */
}

/* Respiro sotto l'header fisso: #content compensa solo l'ingombro
   dell'header, il contenuto partiva quindi appiccicato al bordo. */
.qv-pagina-editoriale .entry-content {
  padding-top: 56px;
  padding-bottom: 72px;
}

/* --- Titoli ------------------------------------------------------- */
.qv-pagina-editoriale .entry-content h2 {
  position: relative;
  font-size: 2rem;
  font-weight: 400 !important;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 3.5rem 0 1.1rem;
  padding-top: 18px;
}

/* Filetto d'accento sopra il titolo: stessa lingua visiva del footer. */
.qv-pagina-editoriale .entry-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--qv-accento);
}

/* Lo stacco tra sezioni lo danno le righe del builder (vedi sotto): un
   titolo che apre la propria colonna non deve aggiungerne altro, altrimenti
   i due margini si sommano. */
.qv-pagina-editoriale .wpb_wrapper > h2:first-child {
  margin-top: 0;
}

.qv-pagina-editoriale .entry-content h3 {
  font-size: 1.3rem;
  font-weight: 600 !important;
  line-height: 1.3;
  margin: 2.2rem 0 0.7rem;
}

.qv-pagina-editoriale .entry-content h3:first-child {
  margin-top: 0;
}

/* --- Testi -------------------------------------------------------- */
.qv-pagina-editoriale .entry-content p,
.qv-pagina-editoriale .entry-content li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--qv-testo);
  max-width: var(--qv-misura);
}

/*
 * Nelle sezioni a piena larghezza la misura stretta lasciava il testo
 * appoggiato a sinistra con mezzo schermo vuoto, che si leggeva come una
 * colonna. Qui si allarga: basta ridefinire la variabile sulla colonna,
 * la regola sopra la eredita senza bisogno di selettori piu' specifici.
 * Nelle colonne affiancate resta il valore stretto, che li' e' gia' giusto.
 */
.qv-pagina-editoriale .vc_col-sm-12 {
  --qv-misura: 94ch;
}

.qv-pagina-editoriale .entry-content p {
  margin: 0 0 1.15em;
}

.qv-pagina-editoriale .entry-content ul,
.qv-pagina-editoriale .entry-content ol {
  margin: 0 0 1.4em 1.1em;
  padding: 0;
}

.qv-pagina-editoriale .entry-content li {
  margin-bottom: 0.5em;
}

.qv-pagina-editoriale .entry-content li::marker {
  color: var(--qv-accento);
}

/* Frase di apertura */
.qv-pagina-editoriale .entry-content p.qv-occhiello {
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 600;
  color: #2c2c2b;
  margin-bottom: 1.4rem;
}

/* Testo di servizio */
.qv-pagina-editoriale .entry-content p.qv-nota {
  font-size: 0.92rem;
  color: var(--qv-tenue);
}

/* --- Link nel testo ---------------------------------------------- */
.qv-pagina-editoriale .entry-content p a,
.qv-pagina-editoriale .entry-content li a {
  color: var(--qv-accento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.qv-pagina-editoriale .entry-content p a:hover {
  text-decoration-thickness: 2px;
}

/* --- Riga di richiami --------------------------------------------- */
.qv-pagina-editoriale .entry-content p.qv-cta {
  max-width: none;
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.qv-pagina-editoriale .entry-content p.qv-cta a {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--qv-accento);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Il primo richiamo e' quello principale: pulsante pieno. */
.qv-pagina-editoriale .entry-content p.qv-cta a:first-child {
  background: var(--qv-accento);
  color: #fff;
}

.qv-pagina-editoriale .entry-content p.qv-cta a:first-child:hover {
  background: var(--qv-marchio-scuro);
  border-color: var(--qv-marchio-scuro);
}

.qv-pagina-editoriale .entry-content p.qv-cta a:not(:first-child) {
  color: var(--qv-accento);
}

.qv-pagina-editoriale .entry-content p.qv-cta a:not(:first-child):hover {
  background: var(--qv-accento);
  color: #fff;
}

/* --- Ritmo tra le sezioni del builder ----------------------------- */
.qv-pagina-editoriale .wpb_text_column {
  margin-bottom: 0 !important;
}

/* Ogni riga del builder e' una sezione: lo stacco verticale sta qui, in un
   punto solo, invece che sui singoli titoli. */
.qv-pagina-editoriale .wpb-content-wrapper > .vc_row + .vc_row {
  margin-top: 2.8rem;
}

/* Colonne affiancate: distanza verticale quando si impilano */
@media (max-width: 767px) {
  .qv-pagina-editoriale .vc_col-sm-6 + .vc_col-sm-6 {
    margin-top: 1.8rem;
  }

  .qv-pagina-editoriale .entry-content {
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .qv-pagina-editoriale .entry-content h2 {
    font-size: 1.6rem;
    margin-top: 2.6rem;
  }

  .qv-pagina-editoriale .entry-content h3 {
    font-size: 1.18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qv-pagina-editoriale .entry-content p.qv-cta a {
    transition: none;
  }
}

/* --- Componenti riutilizzabili delle pagine editoriali ------------- */

/* Elenco recapiti: .qv-recapiti con le varianti .is-sede/.is-telefono/.is-email */
.qv-pagina-editoriale .entry-content ul.qv-recapiti {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 20px;
  max-width: none;
  line-height: 1.5;
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti li::marker {
  content: "";
}

.qv-pagina-editoriale .qv-recapito-etichetta {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--qv-tenue);
  margin-bottom: 3px;
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-sede::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b113b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-telefono::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b113b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b113b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

/* Mappa: contenitore proporzionato, si adatta alla larghezza disponibile */
.qv-pagina-editoriale .qv-mappa {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Su schermi larghi il rapporto 16:9 produrrebbe una mappa alta quasi
     700px: si tiene entro un'altezza ragionevole. */
  max-height: 440px;
  min-height: 300px;
  margin-bottom: 1.6rem;
  border: 1px solid #e2e2e1;
  border-left: 4px solid var(--qv-accento);
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f2;
}

/*
 * Armonizzazione cromatica della mappa.
 * L'embed di Google e' un iframe di un altro dominio: i suoi colori non
 * sono raggiungibili dal nostro CSS. L'unica strada e' un filtro applicato
 * all'intero riquadro, che scalda i toni verso il rosso del brand e
 * abbassa la saturazione del verde e dell'azzurro. Volutamente leggero:
 * spinto oltre, la mappa diventa difficile da leggere.
 * Si disattiva con [qv_mappa ... tinta="no"].
 */
.qv-pagina-editoriale .qv-mappa--tinta iframe {
  filter: saturate(0.72) sepia(0.18) hue-rotate(-12deg) contrast(1.04) brightness(1.02);
}

.qv-pagina-editoriale .qv-mappa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .qv-pagina-editoriale .qv-mappa {
    aspect-ratio: 4 / 3;
    min-height: 260px;
  }
}

/* Modulo di contatto (Contact Form 7) --------------------------------- */
.qv-pagina-editoriale .wpcf7 label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--qv-testo);
  margin-bottom: 14px;
}

.qv-pagina-editoriale .wpcf7 input[type="text"],
.qv-pagina-editoriale .wpcf7 input[type="email"],
.qv-pagina-editoriale .wpcf7 input[type="tel"],
.qv-pagina-editoriale .wpcf7 textarea {
  width: 100%;
  margin-top: 5px;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--qv-testo);
  border: 1px solid #d5d5d4;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

.qv-pagina-editoriale .wpcf7 textarea {
  min-height: 150px;
  resize: vertical;
}

.qv-pagina-editoriale .wpcf7 input:focus,
.qv-pagina-editoriale .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--qv-accento);
  box-shadow: 0 0 0 3px rgba(var(--qv-marchio-rgb), 0.12);
}

.qv-pagina-editoriale .wpcf7 input[type="submit"] {
  width: auto;
  background: var(--qv-accento);
  color: #fff;
  border: 2px solid var(--qv-accento);
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.qv-pagina-editoriale .wpcf7 input[type="submit"]:hover {
  background: var(--qv-marchio-scuro);
}

/* La nota di servizio che segue un elenco di recapiti ha bisogno di
   staccarsi, altrimenti sembra l'ultima voce dell'elenco. */
.qv-pagina-editoriale .entry-content ul.qv-recapiti + p.qv-nota {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e8e8e7;
}

/* Riquadro di avviso: pagina in lavorazione, nota importante, ecc.
   Si usa con <p class="qv-avviso"> oppure su un <div>. */
.qv-pagina-editoriale .entry-content .qv-avviso {
  max-width: none;
  margin: 2rem 0;
  padding: 18px 22px;
  background: #faf5f6;
  border: 1px solid #efdfe4;
  border-left: 4px solid var(--qv-accento);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  line-height: 1.65;
}

.qv-pagina-editoriale .entry-content .qv-avviso strong {
  display: block;
  margin-bottom: 4px;
  color: #2c2c2b;
}

/* =========================================================
   MENU SU DUE RIGHE
   La riga di ogni voce si decide dal pannello, scrivendo una classe nel
   campo "Classi CSS" della voce (Aspetto → Menu). Documentazione completa
   in inc/menu-righe.php.

     menu-riga-2     manda la voce sulla seconda riga
     menu-riga-1     prima riga (predefinita, la classe e' facoltativa)
     menu-destra     spinge la voce verso il bordo destro della sua riga
     menu-evidenza   disegna la voce come pulsante del brand

   Il meccanismo: contenitore flex che va a capo, `order` a decidere la
   riga e uno pseudo-elemento largo quanto la riga a forzare l'andata a
   capo tra le due. Niente markup aggiuntivo, niente JavaScript.
   ========================================================= */

.qv-menu-due-righe {
  flex-wrap: wrap;
  align-items: center;
  /* L'interruzione di riga rende il <ul> largo quanto la barra: senza questa
     riga il menu, prima centrato dal contenitore, si allineerebbe a sinistra.
     Per un menu allineato a sinistra basta sostituire con flex-start. */
  justify-content: center;
}

/* Predefinito: prima riga. */
.qv-menu-due-righe > li {
  order: 1;
}

/* Interruzione di riga: elemento flex largo quanto tutta la riga. */
.qv-menu-due-righe::after {
  content: "";
  flex-basis: 100%;
  width: 100%;
  height: 0;
  order: 2;
}

.qv-menu-due-righe > li.menu-riga-2 {
  order: 3;
}

.qv-menu-due-righe > li.menu-destra {
  margin-left: auto;
}

/* --- Gerarchia tra le due righe ----------------------------------- */

/* Prima riga: navigazione di sezione, in tono minore. */
.qv-menu-due-righe > li:not(.menu-riga-2) > a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #6f6f6e;
  font-weight: 400;
}

.qv-menu-due-righe > li:not(.menu-riga-2) > a:hover {
  color: var(--qv-marchio);
}

/* Seconda riga: le categorie prodotto, in risalto. */
.qv-menu-due-righe > li.menu-riga-2 > a {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #2c2c2b;
}

.qv-menu-due-righe > li.menu-riga-2 > a:hover,
.qv-menu-due-righe > li.menu-riga-2.current-menu-item > a {
  color: var(--qv-marchio);
}

/* Voce a pulsante, utilizzabile su entrambe le righe. */
.qv-menu-due-righe > li.menu-evidenza > a {
  background: var(--qv-marchio);
  color: #fff !important;
  padding: 7px 16px !important;
  border-radius: 999px;
  font-weight: 600;
}

.qv-menu-due-righe > li.menu-evidenza > a:hover {
  background: var(--qv-marchio-scuro);
  color: #fff !important;
}

/* --- Distanze verticali tra le due righe --------------------------- */
@media (min-width: 1024px) {
  .qv-menu-due-righe {
    row-gap: 6px;
    padding: 6px 0 !important;
  }

  /* La riga 2 e' quella importante: le si lascia un filo d'aria sopra. */
  .qv-menu-due-righe > li.menu-riga-2 {
    margin-top: 2px;
  }
}

/* --- Menu mobile: resta verticale ---------------------------------- */
/* L'ordine continua a valere, quindi le voci di riga 2 si raggruppano in
   fondo. Un filetto separa i due gruppi: appare solo sulla prima voce di
   riga 2, perche' viene tolto tra due voci consecutive dello stesso gruppo. */
.mobile-menu-list > li.menu-riga-2 {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 6px;
  margin-top: 6px;
}

.mobile-menu-list > li.menu-riga-2 + li.menu-riga-2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}



/* =========================================================
   CANALE HORECA — icone incorporate e icone dei template
   Le prime sono scritte dentro un data-URI: il colore fa parte
   della stringa url(), dove una variabile CSS non arriva. Sono
   quindi le uniche regole che vanno ripetute per il canale, con
   il colore gia' sostituito.
   ========================================================= */

body.qv-horeca .woocommerce-product-gallery__trigger {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%231f3a5f" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.024q0-2.624 1.024-5.056t2.784-4.16 4.16-2.752 5.056-1.056q2.656 0 5.056 1.056t4.16 2.752 2.784 4.16 1.024 5.056q0 3.616-1.984 6.816l7.072 7.040q0.864 0.896 0.864 2.144t-0.864 2.112-2.144 0.864-2.112-0.864l-7.040-7.040q-3.2 1.952-6.816 1.952-2.656 0-5.056-1.024t-4.16-2.784-2.784-4.128-1.024-5.088zM4 13.024q0 2.464 1.216 4.544t3.296 3.264 4.512 1.216q1.824 0 3.488-0.704t2.88-1.92 1.92-2.88 0.736-3.52-0.736-3.52-1.92-2.848-2.88-1.92-3.488-0.736q-2.432 0-4.512 1.216t-3.296 3.296-1.216 4.512z"/></svg>') !important;
}

body.qv-horeca .woocommerce-product-gallery__trigger:hover {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23192f4d" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.024q0-2.624 1.024-5.056t2.784-4.16 4.16-2.752 5.056-1.056q2.656 0 5.056 1.056t4.16 2.752 2.784 4.16 1.024 5.056q0 3.616-1.984 6.816l7.072 7.040q0.864 0.896 0.864 2.144t-0.864 2.112-2.144 0.864-2.112-0.864l-7.040-7.040q-3.2 1.952-6.816 1.952-2.656 0-5.056-1.024t-4.16-2.784-2.784-4.128-1.024-5.088zM4 13.024q0 2.464 1.216 4.544t3.296 3.264 4.512 1.216q1.824 0 3.488-0.704t2.88-1.92 1.92-2.88 0.736-3.52-0.736-3.52-1.92-2.848-2.88-1.92-3.488-0.736q-2.432 0-4.512 1.216t-3.296 3.296-1.216 4.512z"/></svg>') !important;
}

body.qv-horeca.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-sede::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

body.qv-horeca.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-telefono::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

body.qv-horeca.qv-pagina-editoriale .entry-content ul.qv-recapiti .is-email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

/* Le icone SVG scritte nei template prendono invece il colore
   dalla tavolozza tramite `currentColor`, senza duplicati. */
.qv-icona {
  color: var(--qv-marchio);
}

/* =========================================================
   FASCIA DELLE CONDIZIONI — home HORECA
   Le tre regole che decidono un ordine professionale: minimo,
   porto franco, sconto massimo. Stanno fra lo slider e i
   prodotti, e devono reggere il confronto con l'immagine che
   hanno sopra — quindi fascia riconoscibile e cifre grosse.

   I colori vengono dalla tavolozza: su questa pagina, che vede
   solo chi e' HORECA, si risolvono in blu.

   La disposizione se la fa da se' invece di appoggiarsi alla
   griglia di WPBakery: cosi' le tre colonne restano alte uguali
   e allineate anche se un titolo va a capo e gli altri no.
   ========================================================= */

.qv-fascia-condizioni {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 1em;
  padding: 2.4em 1.2em 2.2em;
  border-radius: 10px;
  background: var(--qv-fondo-tenue);
}

.qv-fascia-condizioni > .wpb_column {
  flex: 1 1 0;
  min-width: 0;
}

.qv-fascia-condizioni .vc_column-inner,
.qv-fascia-condizioni .wpb_wrapper {
  height: 100%;
}

.qv-fascia-condizioni .wpb_text_column,
.qv-fascia-condizioni .wpb_content_element {
  margin-bottom: 0;
}

/* Il titolo e' l'informazione: grande, del colore del canale, con
   un trattino sopra che fa da segnale senza pesare. Riserva due
   righe anche quando ne occupa una, cosi' i paragrafi delle tre
   colonne partono tutti dalla stessa quota. */
.qv-fascia-condizioni h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * 1.12em);
  margin: 0 0 .5em;
  padding-top: 1.05em;
  font-size: clamp(1.3rem, 0.98rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--qv-marchio);
  text-align: center;
  text-wrap: balance;
}

.qv-fascia-condizioni h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: var(--qv-marchio-chiaro);
}

.qv-fascia-condizioni p {
  max-width: 32ch;
  margin: 0 auto;
  font-size: .95em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--qv-testo-smorzato);
  text-align: center;
  text-wrap: balance;
}

/* Da tablet in su un filetto separa le colonne, senza chiuderle
   in riquadri. */
@media (min-width: 768px) {
  .qv-fascia-condizioni > .wpb_column {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    padding: 0 1.4em;
    box-sizing: border-box;
  }

  .qv-fascia-condizioni > .wpb_column + .wpb_column {
    border-left: 1px solid var(--qv-bordo-tenue);
  }
}

/* Sotto, impilate: serve aria fra una e l'altra, non il filetto.
   E il titolo torna ad alto quanto gli serve. */
@media (max-width: 767px) {
  .qv-fascia-condizioni {
    padding: 2em 1em;
  }

  .qv-fascia-condizioni > .wpb_column {
    flex-basis: 100%;
    max-width: 100%;
  }

  .qv-fascia-condizioni > .wpb_column + .wpb_column {
    margin-top: 1.9em;
  }

  .qv-fascia-condizioni h3 {
    min-height: 0;
  }
}

/* =========================================================
   LE NOSTRE SELEZIONI — fascia delle categorie
   Una fascia a tutta larghezza nella tinta chiara del canale — la
   stessa della fascia delle condizioni sotto la hero — con dentro un
   cerchio pieno per categoria: il nome scritto dentro in bianco, il
   numero di etichette sotto. Da inc/selezioni-categorie.php.

   La fascia esce dal contenitore con i margini negativi e i
   100vw. Il tema tiene `overflow-x: clip` sulla .site, quindi
   la sbordatura non produce barre di scorrimento orizzontali —
   che e' il difetto solito di questa tecnica.
   ========================================================= */

.qv-selezioni {
  width: 100vw;
  /* Dichiarato qui e non lasciato all'eredita': con il conteggio
     predefinito l'imbottitura si somma ai 100vw e la fascia sborda a
     destra proprio di quei pochi pixel. */
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* In fondo un centinaio di pixel in piu' che in cima: la fascia
     arriva fino al footer, e senza quel respiro i cerchi finirebbero
     appoggiati al bordo scuro. */
  padding: 3.4em 1.4em calc(3.6em + 100px);
  background: var(--qv-fondo-tenue);
}

/* La larghezza si limita qui, non sulla lista. */
.qv-selezioni__interno {
  max-width: 1100px;
  margin: 0 auto;
}

/* Il colore vuole !important comunque: il tema forza quello di TUTTI i
   titoli con `h1..h6 { color: var(--qv-marchio) !important }`, che batte
   perfino uno stile scritto in linea. Qui serve la tinta chiara del
   marchio, la stessa di «i più Apprezzati» che sta poco sopra. */
.qv-selezioni__titolo {
  margin: 0 0 1.6em;
  font-family: Vinanza, Lato, Arial, sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--qv-marchio-chiaro) !important;
  text-align: center;
}

/* Una riga sola, con colonne che si comprimono.
   Flexbox non andava: va a capo PRIMA di restringere, quindi sui
   portatili lasciava un cerchio a capo da solo invece di stringerli
   tutti. Con `grid-auto-flow: column` le colonne stanno per forza
   sulla stessa riga e `minmax(0, 165px)` le fa scendere sotto i
   165px quando lo spazio non basta. */
.qv-selezioni__griglia {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 165px);
  justify-content: center;
  gap: 2em 1.4em;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.qv-selezioni__voce {
  display: flex;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.qv-selezioni__voce::before {
  display: none !important;
  content: none !important;
}

/* Storefront sottolinea ogni collegamento del contenuto con un
   selettore piu' specifico di questo (`.hentry .entry-content a`):
   senza !important la riga comparirebbe sotto il nome nel cerchio e
   sotto il conteggio. */
.qv-selezioni__link,
.qv-selezioni__link:hover,
.qv-selezioni__link:focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85em;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
}

/* Il cerchio: pieno chiaro sul fondo della fascia, con il nome
   dentro. Niente foto — vedi il commento nel modulo PHP. */
/* Misure scritte, non dedotte: niente aspect-ratio, che i motori
   piu' vecchi non applicano lasciando cerchi ovali. */
.qv-selezioni__cerchio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 165px;
  aspect-ratio: 1;
  padding: 13%;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--qv-marchio);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.qv-selezioni__link:hover .qv-selezioni__cerchio,
.qv-selezioni__link:focus-visible .qv-selezioni__cerchio {
  background: var(--qv-marchio-scuro);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  transform: translateY(-4px);
}

.qv-selezioni__nome {
  font-size: clamp(.8rem, .68rem + .38vw, .98rem);
  font-weight: 700;
  line-height: 1.24;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  hyphens: auto;
}

.qv-selezioni__conto {
  font-size: .82em;
  color: var(--qv-testo-smorzato);
  text-align: center;
}

@media (max-width: 900px) {
  .qv-selezioni__griglia {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 165px));
  }
}

@media (max-width: 767px) {
  .qv-selezioni {
    padding: 2.6em 1.2em calc(2.8em + 60px);
  }

  .qv-selezioni__titolo {
    font-size: 36px;
    margin-bottom: 1.3em;
  }
}

@media (max-width: 560px) {
  .qv-selezioni__griglia {
    grid-template-columns: repeat(2, minmax(0, 150px));
    gap: 1.6em 1.1em;
  }
}

/* La fascia chiude la pagina: sotto non deve restare una striscia
   bianca. Lo spazio non e' uno solo: il blocco del costruttore ne
   aggiunge 35, l'articolo altri 68, e sia .site-main sia .content-area
   ne mettono 42 a testa. Si azzerano tutti, ma soltanto nelle pagine
   che contengono la fascia: altrove quel respiro serve.

   Dimenticarne uno lascia una striscia sottile invece della striscia
   grossa — che e' esattamente com'era finita alla prima passata. */
.wpb_content_element:has(.qv-selezioni),
.vc_row:has(.qv-selezioni),
.hentry:has(.qv-selezioni),
.site-main:has(.qv-selezioni),
.content-area:has(.qv-selezioni) {
  margin-bottom: 0 !important;
}

#content:has(.qv-selezioni) {
  padding-bottom: 0 !important;
}

/* =========================================================
   ACQUISTA ORA — richiamo al prodotto
   Chiude le pagine che parlano di un vino senza esserne la
   scheda: le etichette dei QR code, un racconto, un articolo.
   ========================================================= */

.qv-cta-prodotto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4em;
  margin: 2.6em 0 1em;
  padding: 1.6em 1.8em;
  border: 1px solid var(--qv-bordo-tenue);
  border-radius: 12px;
  background: var(--qv-fondo-tenue);
}

.qv-cta-prodotto__foto {
  flex: 0 0 auto;
  width: 96px;
  line-height: 0;
}

.qv-cta-prodotto__foto img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 0;
  border-radius: 8px;
  background: #fff;
}

.qv-cta-prodotto__testo {
  flex: 1 1 240px;
  min-width: 0;
}

.qv-cta-prodotto__occhiello {
  margin: 0 0 .2em !important;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qv-testo-smorzato);
}

.qv-cta-prodotto__nome {
  margin: 0 0 .15em !important;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--qv-marchio);
}

.qv-cta-prodotto__prezzo {
  margin: 0 !important;
  font-size: 1.05em;
  color: var(--qv-testo-smorzato);
}

.qv-cta-prodotto__prezzo .amount {
  font-weight: 700;
  color: var(--qv-marchio);
}

.qv-cta-prodotto__azione {
  flex: 0 0 auto;
}

.qv-cta-prodotto__pulsante {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 8px;
  background: var(--qv-marchio);
  color: #fff !important;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}

.qv-cta-prodotto__pulsante:hover,
.qv-cta-prodotto__pulsante:focus-visible {
  background: var(--qv-marchio-scuro);
  color: #fff !important;
  transform: translateY(-2px);
}

.qv-cta-prodotto__avviso {
  margin: 2em 0;
  padding: 1em 1.2em;
  border-left: 4px solid var(--qv-marchio-chiaro);
  background: var(--qv-fondo-tenue);
  font-size: .9em;
}

/* Su schermo stretto il pulsante prende tutta la riga: e' l'azione
   della pagina, non deve finire schiacciato in un angolo. */
@media (max-width: 560px) {
  .qv-cta-prodotto {
    padding: 1.4em;
  }

  .qv-cta-prodotto__azione,
  .qv-cta-prodotto__pulsante {
    width: 100%;
  }
}

/* =========================================================
   IN TAVOLA CON QUI VINANZA — dal piatto al vino
   Il cliente sceglie portata, cucina e piatto e riceve pochi vini
   da mettere nel carrello. Da inc/a-tavola.php e js/a-tavola.js.

   Le schede dei vini sono quelle del catalogo (.category-product-card):
   qui cambia solo la griglia che le contiene.
   ========================================================= */

/* Fascia grigia a tutta larghezza, che stacca la sezione da «i più
   Apprezzati» che la precede. La tecnica dei 100vw e' quella di
   .qv-selezioni: vedi li' perche' non produce barre di scorrimento. */
.qv-tavola {
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3.4em 1.4em 3.4em;
  background: #f0f0f0;
}

.qv-tavola__interno {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Testata --- */

.qv-tavola__testata {
  margin: 0 auto 2.4em;
  text-align: center;
}

/* !important sul colore: vedi la nota a .qv-selezioni__titolo. */
.qv-tavola__titolo {
  margin: 0;
  font-family: Vinanza, Lato, Arial, sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  /* Il grigio del testo del sito, non il colore del canale. */
  color: #3c3c3b !important;
}

/* Il cappello fra due filetti: i filetti sono i bordi dei due
   pseudo-elementi, cosi' seguono il colore del canale da soli. */
.qv-tavola__fregio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  margin: .7em 0 .9em;
  color: var(--qv-marchio);
}

.qv-tavola__fregio::before,
.qv-tavola__fregio::after {
  content: "";
  width: min(120px, 22vw);
  border-top: 1px solid currentColor;
}

.qv-tavola__fregio svg {
  display: block;
}

.qv-tavola__sottotitolo {
  margin: 0 0 .35em;
  font-size: 1.45em;
  line-height: 1.35;
  color: #2b2b2b;
  text-wrap: balance;
}

.qv-tavola__testo {
  margin: 0;
  font-size: .95em;
  color: var(--qv-testo-smorzato);
}

/* --- Scelta: portata, cucina, piatto --- */

.qv-tavola__scelta {
  padding: 1.6em 1.4em 1.5em;
  border-radius: 12px;
  background: #fff;
}

.qv-tavola__riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
}

.qv-tavola__riga[hidden],
.qv-tavola__piatti[hidden] {
  display: none !important;
}

/* I tre passi. Quello a cui tocca ha il numero pieno; quelli ancora
   da raggiungere sono sbiaditi e senza scelte; quelli fatti restano
   leggibili, con la scelta evidenziata, per poterla cambiare. */
.qv-tavola__passo + .qv-tavola__passo {
  margin-top: 1.3em;
  padding-top: 1.3em;
  border-top: 1px solid #e2e2e2;
}

.qv-tavola__passo[hidden] {
  display: none;
}

.qv-tavola__passo-titolo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin: 0;
  font-weight: 700;
  color: #3c3c3b;
  transition: opacity .25s ease;
}

.qv-tavola__passo-numero {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border: 1px solid var(--qv-marchio);
  border-radius: 50%;
  font-size: .9em;
  line-height: 1;
  color: var(--qv-marchio);
  transition: background .25s ease, color .25s ease;
}

.qv-tavola__passo.is-attivo .qv-tavola__passo-numero {
  background: var(--qv-marchio);
  color: #fff;
}

.qv-tavola__passo:not(.is-attivo):not(.is-fatto) .qv-tavola__passo-titolo {
  opacity: .4;
}

.qv-tavola__passo-titolo + .qv-tavola__riga,
.qv-tavola__passo-titolo ~ .qv-tavola__piatti {
  margin-top: 1em !important;
}

/* I pulsanti del tema hanno fondo e imbottitura propri: qui si
   riscrive tutto, senza ereditare nulla. */
.qv-tavola__portata,
.qv-tavola__cucina {
  margin: 0;
  border: 1px solid var(--qv-marchio);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  color: var(--qv-marchio);
  cursor: pointer;
  box-shadow: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.qv-tavola__portata {
  padding: .7em 1.5em;
  font-size: 1em;
}

.qv-tavola__cucina {
  padding: .5em 1.15em;
  border-color: var(--qv-bordo-tenue);
  font-size: .9em;
  font-weight: 400;
  color: #444;
}

.qv-tavola__portata:hover,
.qv-tavola__portata:focus-visible,
.qv-tavola__cucina:hover,
.qv-tavola__cucina:focus-visible {
  border-color: var(--qv-marchio);
  background: #fff;
  color: var(--qv-marchio);
}

.qv-tavola__portata[aria-pressed="true"],
.qv-tavola__cucina[aria-pressed="true"] {
  border-color: var(--qv-marchio);
  background: var(--qv-marchio);
  color: #fff;
}

.qv-tavola__cucina:disabled {
  opacity: .4;
  cursor: default;
}

/* I piatti: un elenco di etichette, la scelta sottolineata e piena. */
.qv-tavola__piatti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45em .5em;
  margin: 0;
  padding: 0 !important;
  list-style: none !important;
}

.qv-tavola__piatto-voce {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.qv-tavola__piatto-voce::before {
  display: none !important;
  content: none !important;
}

/* !important sulla sottolineatura: vedi la nota a .qv-selezioni__link. */
.qv-tavola__piatto,
.qv-tavola__piatto:hover,
.qv-tavola__piatto:focus {
  display: block;
  padding: .42em .95em;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  background: #fff;
  font-size: .9em;
  line-height: 1.3;
  color: #333;
  text-decoration: none !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.qv-tavola__piatto:hover,
.qv-tavola__piatto:focus-visible {
  border-color: var(--qv-marchio);
  color: var(--qv-marchio);
}

.qv-tavola__piatto.is-scelto,
.qv-tavola__piatto.is-scelto:hover {
  border-color: var(--qv-marchio);
  background: rgba(var(--qv-marchio-rgb), .08);
  font-weight: 700;
  color: var(--qv-marchio);
}

/* --- Esito: i vini del piatto --- */

/* Il margine di scorrimento tiene i vini sotto l'header fisso quando
   lo script li porta in vista. */
.qv-tavola__esito {
  margin-top: 2.2em;
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.qv-tavola__esito[hidden] {
  display: none;
}

.qv-tavola__attesa {
  margin: 0;
  padding: 2.4em 0;
  text-align: center;
  color: var(--qv-testo-smorzato);
}

.qv-tavola__per {
  margin: 0 0 1.3em;
  text-align: center;
}

.qv-tavola__per-etichetta {
  display: block;
  font-size: .8em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qv-testo-smorzato);
}

.qv-tavola__per-piatto {
  display: block;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--qv-marchio);
  text-wrap: balance;
}

/* Quattro colonne al posto delle tre del catalogo; con meno di
   quattro vini le schede restano al centro invece di allargarsi. */
.qv-tavola__vini.category-products-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 270px));
  justify-content: center;
  gap: 24px;
  margin: 0 !important;
}

.qv-tavola__vini .product-image-wrapper img {
  height: 250px;
}

.qv-tavola__tutti {
  margin: 1.8em 0 0;
  text-align: center;
}

.qv-tavola__tutti-link,
.qv-tavola__tutti-link:hover,
.qv-tavola__tutti-link:focus {
  font-weight: 700;
  color: var(--qv-marchio);
  text-decoration: none !important;
}

.qv-tavola__tutti-link:hover,
.qv-tavola__tutti-link:focus-visible {
  color: var(--qv-marchio-scuro);
}

@media (max-width: 900px) {
  .qv-tavola__vini.category-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .qv-tavola {
    padding: 2.6em 1.2em 2.6em;
  }

  .qv-tavola__titolo {
    font-size: 36px;
  }

  .qv-tavola__sottotitolo {
    font-size: 1.2em;
  }

  .qv-tavola__scelta {
    padding: 1.2em .9em;
  }

  .qv-tavola__portata {
    padding: .6em 1.1em;
    font-size: .95em;
  }

  .qv-tavola__vini.category-products-grid {
    gap: 14px;
  }

  .qv-tavola__vini .product-image-wrapper img {
    height: 190px;
  }
}

/* --- Gli abbinamenti nella barra laterale del catalogo ---
   Portata e cucina sono <details>: si aprono senza JavaScript. I
   piatti riusano l'elenco delle categorie che sta sopra. */

.qv-tavola-lato {
  margin-top: 2.4em;
}

.qv-tavola-lato summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  cursor: pointer;
  list-style: none;
}

.qv-tavola-lato summary::-webkit-details-marker {
  display: none;
}

/* La freccia: un angolo che ruota quando il ramo e' aperto. */
.qv-tavola-lato summary::after {
  content: "";
  flex-shrink: 0;
  width: .45em;
  height: .45em;
  margin-right: .25em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.qv-tavola-lato details[open] > summary::after {
  transform: rotate(-135deg);
}

.qv-tavola-lato__portata {
  border-bottom: 1px solid #f0f0f0;
}

.qv-tavola-lato__portata > summary {
  padding: .55em 0;
  font-weight: 700;
  color: #333;
}

.qv-tavola-lato__portata > summary:hover,
.qv-tavola-lato__portata[open] > summary {
  color: var(--qv-marchio);
}

.qv-tavola-lato__cucina > summary {
  justify-content: flex-start;
  padding: .35em 0 .35em .9em;
  color: #333;
}

.qv-tavola-lato__cucina > summary::after {
  margin-left: auto;
  opacity: .55;
}

.qv-tavola-lato__cucina > summary:hover,
.qv-tavola-lato__cucina[open] > summary {
  color: var(--qv-marchio);
}

.qv-tavola-lato .count {
  color: #999;
  font-size: .9rem;
  font-weight: 400;
}

.qv-tavola-lato__piatti {
  margin: .2em 0 .9em .9em !important;
  padding-left: .9em !important;
  border-left: 2px solid var(--qv-bordo-tenue);
}

.qv-tavola-lato__portata > .qv-tavola-lato__piatti {
  margin-left: 0 !important;
}

.qv-tavola-lato__piatti li {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 0;
}

.qv-tavola-lato__piatti a {
  font-size: .92rem !important;
  line-height: 1.35;
}

.qv-tavola-lato__piatti .current-category a {
  font-weight: 700 !important;
}

/* Su schermo stretto le categorie sopra diventano etichette in riga;
   qui i piatti restano un elenco, altrimenti un ramo aperto occupa
   mezza pagina. */
@media (max-width: 768px) {
  .qv-tavola-lato__piatti.product-categories-list {
    display: block;
  }
}

/* --- Il suggeritore della ricerca dal vivo ---
   In cima alla tendina, sopra i vini: termini che cominciano con
   quanto si sta scrivendo, ciascuno con il suo tipo e i suoi vini. */

.ls-suggerimenti[hidden] {
  display: none;
}

.ls-sugg-lista {
  margin: 0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #ebebeb;
  list-style: none !important;
}

.ls-sugg-voce {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ls-sugg-link,
.ls-sugg-link:hover,
.ls-sugg-link:focus {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: 9px 20px;
  font-size: .95rem;
  line-height: 1.35;
  color: #333;
  text-decoration: none !important;
}

.ls-sugg-voce.is-attiva .ls-sugg-link,
.ls-sugg-link:hover {
  background: var(--qv-fondo-tenue);
}

.ls-sugg-nome {
  min-width: 0;
}

.ls-sugg-nome strong {
  font-weight: 700;
  color: var(--qv-marchio);
}

.ls-sugg-tipo {
  flex-shrink: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qv-testo-smorzato);
}

.ls-sugg-conto {
  flex-shrink: 0;
  margin-left: auto;
  font-size: .82rem;
  color: #999;
}

@media (max-width: 768px) {
  .ls-sugg-link,
  .ls-sugg-link:hover,
  .ls-sugg-link:focus {
    flex-wrap: wrap;
    gap: .2em .6em;
    padding: 11px 14px;
  }
}

/* La sezione chiude la home: sotto la fascia grigia non deve restare
   una striscia bianca prima del footer. Stessa cura di .qv-selezioni
   (vedi li' l'elenco degli spazi da azzerare), ma solo quando la
   fascia e' davvero l'ultima riga della pagina. */
.wpb_content_element:has(.qv-tavola),
.vc_row:last-child:has(.qv-tavola),
.hentry:has(.vc_row:last-child .qv-tavola),
.site-main:has(.vc_row:last-child .qv-tavola),
.content-area:has(.vc_row:last-child .qv-tavola) {
  margin-bottom: 0 !important;
}

#content:has(.vc_row:last-child .qv-tavola) {
  padding-bottom: 0 !important;
}

/* --- Gli abbinamenti nella scheda del vino ---
   Un riquadro basso fra la descrizione e i prodotti correlati: una
   riga per portata, pochi piatti in vista e gli altri a richiesta. */

/* Dietro al riquadro, una fascia a tutta larghezza nel colore del
   canale: lo tiene in evidenza in fondo alla scheda. La tecnica dei
   100vw e' quella di .qv-selezioni. */
.qv-tavola-vino-fascia {
  width: 100vw;
  box-sizing: border-box;
  margin: 2.6em calc(50% - 50vw) 0;
  padding: 2.6em 1.4em;
  background: var(--qv-marchio);
}

.qv-tavola-vino {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.3em 1.6em 1.2em;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.qv-tavola-vino__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin: .2em 0 1.1em;
  text-align: center;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--qv-marchio);
}

.qv-tavola-vino__titolo svg {
  width: 30px;
  height: 30px;
}

/* Il nome della sezione come nella home: stesso carattere e stesso
   grigio di .qv-tavola__titolo, in misura ridotta. */
.qv-tavola-vino__nome {
  font-family: Vinanza, Lato, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #3c3c3b;
}

/* Sotto il nome, centrata come lui. */
.qv-tavola-vino__vino {
  font-weight: 700;
  color: #3c3c3b;
}

.qv-tavola-vino__nota {
  flex-basis: 100%;
  margin-left: 0;
  font-size: .9em;
  font-weight: 400;
  color: var(--qv-testo-smorzato);
}

.qv-tavola-vino__righe {
  margin: 0;
}

.qv-tavola-vino__riga {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: .3em 1em;
  align-items: baseline;
  padding: .5em 0;
  border-top: 1px solid #e8e8e8;
}

.qv-tavola-vino__portata {
  margin: 0;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f6f6e;
}

.qv-tavola-vino__piatti {
  display: flex;
  flex-wrap: wrap;
  gap: .35em .4em;
  margin: 0;
}

/* Etichette, non collegamenti: vedi la nota nel modulo PHP. */
.qv-tavola-vino__piatto {
  padding: .25em .75em;
  border-radius: 999px;
  background: #f0f0f0;
  font-size: .88em;
  line-height: 1.35;
  color: #333;
}

.qv-tavola-vino__piatto.is-in-piu {
  display: none;
}

.qv-tavola-vino.is-aperto .qv-tavola-vino__piatto.is-in-piu {
  display: inline-block;
}

/* Il pulsante e' un collegamento di testo: il tema da' a tutti i
   <button> fondo pieno e imbottitura, che qui si tolgono. */
.qv-tavola-vino__tutti,
.qv-tavola-vino__tutti:hover,
.qv-tavola-vino__tutti:focus {
  margin: .7em 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: .9em;
  font-weight: 700;
  color: var(--qv-marchio);
  cursor: pointer;
}

.qv-tavola-vino__tutti:hover,
.qv-tavola-vino__tutti:focus-visible {
  color: var(--qv-marchio-scuro);
  text-decoration: underline;
}

/* Le alternative: le stesse schede del catalogo, piu' basse. */
.qv-tavola-vino__alternative {
  margin-top: 1.4em;
  padding-top: 1.2em;
  border-top: 1px solid #e8e8e8;
}

.qv-tavola-vino__alternative-titolo {
  margin: 0 0 1em;
  font-weight: 700;
  color: var(--qv-marchio);
}

.qv-tavola-vino__alternative .qv-tavola__vini .product-image-wrapper img {
  height: 200px;
}

/* Nella scheda prodotto il tema ingrandisce e colora OGNI prezzo della
   pagina, anche quelli delle schede qui dentro: si riportano alla
   misura che hanno nel catalogo. */
body.single-product .qv-tavola-vino .category-product-card .price,
body.single-product .qv-tavola-vino .category-product-card .price .amount,
body.single-product .qv-tavola-vino .category-product-card .woocommerce-Price-amount {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #222 !important;
}


/* =========================================================
   IN TAVOLA CON QUI VINANZA — su telefono
   ========================================================= */

/* La scheda prodotto chiude con la fascia colorata: sotto non deve
   restare una striscia bianca prima del footer (vedi .qv-selezioni). */
.product-related-section:has(> .qv-tavola-vino-fascia:last-child),
.product-layout-custom:has(.qv-tavola-vino-fascia:last-child),
.site-main:has(.qv-tavola-vino-fascia:last-child),
.content-area:has(.qv-tavola-vino-fascia:last-child) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#content:has(.qv-tavola-vino-fascia:last-child) {
  padding-bottom: 0 !important;
}

/* Ricerca dal vivo: su telefono la tendina sta accanto al modulo (vedi
   js/live-search.js) e si aggancia alla barra di ricerca. */
.mobile-search-bar {
  position: relative;
}

@media (max-width: 768px) {
  .mobile-search-bar > .live-search-dropdown {
    top: 100%;
    max-height: calc(100vh - var(--header-height) - 20px);
    overflow-y: auto;
  }

  /* Barra laterale del catalogo: aperta, con un ramo di piatti disteso,
     supera di molto i 1000px previsti per le sole categorie; senza
     questo il resto finirebbe sopra i prodotti. */
  .category-sidebar.mobile-expanded:has(.qv-tavola-lato) {
    max-height: none;
  }

  .qv-tavola-lato summary {
    min-height: 44px;
  }

  .qv-tavola-lato__piatti li {
    background: none;
    padding: 6px 0;
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  /* Sezione della home: portate e cucine su una riga che scorre di
     lato, i piatti su tre. Andando a capo, i sedici primi di pesce
     occupavano da soli quasi una schermata. */
  .qv-tavola__riga,
  .qv-tavola__piatti {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-left: -.9em !important;
    margin-right: -.9em !important;
    padding-left: .9em !important;
    padding-right: .9em !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .qv-tavola__riga::-webkit-scrollbar,
  .qv-tavola__piatti::-webkit-scrollbar {
    display: none;
  }

  .qv-tavola__piatti {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: max-content;
    justify-content: start;
  }

  .qv-tavola__portata,
  .qv-tavola__cucina,
  .qv-tavola__piatto,
  .qv-tavola__piatto:hover,
  .qv-tavola__piatto:focus {
    flex-shrink: 0;
    min-height: 42px;
    white-space: nowrap;
  }

  .qv-tavola__piatto,
  .qv-tavola__piatto:hover,
  .qv-tavola__piatto:focus {
    display: flex;
    align-items: center;
  }

  /* Scheda prodotto: fascia e riquadro piu' stretti, e le alternative
     in una riga che scorre di lato — in due colonne dentro il riquadro
     i nomi dei vini andavano a capo una parola per riga. */
  .qv-tavola-vino-fascia {
    padding: 1.6em .9em;
  }

  .qv-tavola-vino {
    padding: 1.1em 1em 1em;
  }

  .qv-tavola-vino__riga {
    grid-template-columns: 1fr;
  }

  .qv-tavola-vino__nome {
    font-size: 28px;
  }

  .qv-tavola-vino__tutti,
  .qv-tavola-vino__tutti:hover,
  .qv-tavola-vino__tutti:focus {
    min-height: 44px;
  }

  .qv-tavola-vino__alternative .qv-tavola__vini.category-products-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 68%;
    justify-content: start;
    gap: 12px;
    margin: 0 -1em !important;
    padding: 0 1em 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .qv-tavola-vino__alternative .qv-tavola__vini::-webkit-scrollbar {
    display: none;
  }

  .qv-tavola-vino__alternative .qv-tavola__vini > li {
    scroll-snap-align: center;
  }

  .qv-tavola-vino__alternative .qv-tavola__vini .product-image-wrapper img {
    height: 170px;
  }
}

/* --- Il richiamo nella home ---
   Una fascia bassa: nome della sezione, una riga e il pulsante che
   porta alla pagina dedicata. */

.qv-tavola-richiamo {
  width: 100vw;
  box-sizing: border-box;
  margin: 0 calc(50% - 50vw);
  padding: 2.2em 1.4em;
  background: #f0f0f0;
}

.qv-tavola-richiamo__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em 2.4em;
  max-width: 1100px;
  margin: 0 auto;
}

/* !important sul colore: vedi la nota a .qv-selezioni__titolo. */
.qv-tavola-richiamo__titolo {
  display: flex;
  align-items: center;
  gap: .35em;
  margin: 0 0 .15em;
  font-family: Vinanza, Lato, Arial, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #3c3c3b !important;
}

.qv-tavola-richiamo__titolo svg {
  flex-shrink: 0;
  color: var(--qv-marchio);
}

.qv-tavola-richiamo__testo {
  margin: 0;
  color: #3c3c3b;
}

.qv-tavola-richiamo__pulsante,
.qv-tavola-richiamo__pulsante:hover,
.qv-tavola-richiamo__pulsante:focus {
  flex-shrink: 0;
  padding: .8em 1.6em;
  border-radius: 999px;
  background: var(--qv-marchio);
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s ease, transform .2s ease;
}

.qv-tavola-richiamo__pulsante:hover,
.qv-tavola-richiamo__pulsante:focus-visible {
  background: var(--qv-marchio-scuro);
  transform: translateY(-2px);
}

.wpb_content_element:has(.qv-tavola-richiamo) {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .qv-tavola-richiamo {
    padding: 1.8em 1.2em;
  }

  .qv-tavola-richiamo__interno {
    flex-direction: column;
    text-align: center;
  }

  /* Con «Qui» il nome non sta più su una riga: il cappello va sopra,
     altrimenti resta appeso a sinistra di un titolo su due righe. */
  .qv-tavola-richiamo__titolo {
    flex-direction: column;
    justify-content: center;
    gap: .1em;
    font-size: 30px;
  }

  .qv-tavola-richiamo__pulsante,
  .qv-tavola-richiamo__pulsante:hover,
  .qv-tavola-richiamo__pulsante:focus {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* I titoli dei passi a sinistra, sopra righe che scorrono di lato. */
  .qv-tavola__passo-titolo {
    justify-content: flex-start;
  }
}

/* =========================================================
   DIRITTO DI RECESSO — funzione online (art. 54-bis)
   Da inc/recesso.php. Un riquadro bianco con bordo, i tre passi
   numerati in alto, pulsanti grandi: deve essere evidente e facile
   da usare anche da telefono, è un requisito di legge.
   ========================================================= */

.qv-recesso {
  margin: 1.8em 0 2.4em;
  padding: 1.6em 1.8em;
  border: 1px solid var(--qv-bordo-tenue);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.qv-recesso__intro {
  margin: 0 0 1.1em;
}

.qv-recesso__passi {
  display: flex;
  flex-wrap: wrap;
  gap: .6em 1.6em;
  margin: 0 0 1.4em !important;
  padding: 0 0 1.1em !important;
  border-bottom: 1px solid #ececec;
  list-style: none !important;
}

.qv-recesso__passi li {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 !important;
  padding: 0 !important;
  font-size: .92em;
  color: #999;
  list-style: none !important;
}

.qv-recesso__passi li::before {
  display: none !important;
}

.qv-recesso__passi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .9em;
}

.qv-recesso__passi li.is-attivo {
  font-weight: 700;
  color: var(--qv-marchio);
}

.qv-recesso__passi li.is-attivo span {
  border-color: var(--qv-marchio);
  background: var(--qv-marchio);
  color: #fff;
}

.qv-recesso__passi li.is-fatto {
  color: #3c3c3b;
}

.qv-recesso__modulo label {
  display: block;
  margin-bottom: .3em;
  font-weight: 700;
  font-size: .95em;
}

.qv-recesso__modulo input[type="text"],
.qv-recesso__modulo input[type="email"],
.qv-recesso__modulo input[type="date"],
.qv-recesso__modulo textarea {
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  padding: .7em .9em;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  font-size: 16px; /* sotto i 16px i telefoni ingrandiscono la pagina al tocco */
}

.qv-recesso__modulo input:focus,
.qv-recesso__modulo textarea:focus {
  outline: 2px solid rgba(var(--qv-marchio-rgb), .35);
  border-color: var(--qv-marchio);
}

.qv-recesso__aiuto {
  display: block;
  margin-top: .3em;
  font-size: .85em;
  color: #777;
}

.qv-recesso__obbligatorio {
  color: var(--qv-marchio);
}

/* Campo trappola per i programmi automatici: fuori schermo, non nascosto
   con display:none, che alcuni riconoscono e saltano. */
.qv-recesso__trappola {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qv-recesso__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  margin: 1.4em 0 0 !important;
}

.qv-recesso__pulsante,
.qv-recesso__pulsante:hover,
.qv-recesso__pulsante:focus,
.qv-recesso__secondario,
.qv-recesso__secondario:hover,
.qv-recesso__secondario:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75em 1.8em;
  border: 2px solid var(--qv-marchio);
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.qv-recesso__pulsante,
.qv-recesso__pulsante:focus {
  background: var(--qv-marchio);
  color: #fff !important;
}

.qv-recesso__pulsante:hover {
  background: var(--qv-marchio-scuro);
  border-color: var(--qv-marchio-scuro);
  color: #fff !important;
}

.qv-recesso__secondario,
.qv-recesso__secondario:focus {
  background: #fff;
  color: var(--qv-marchio) !important;
}

.qv-recesso__secondario:hover {
  background: var(--qv-fondo-tenue);
  color: var(--qv-marchio) !important;
}

.qv-recesso__dichiarazione {
  margin: 1em 0;
  padding: 1em 1.2em;
  border-left: 4px solid var(--qv-marchio);
  background: var(--qv-fondo-tenue);
  font-style: normal;
}

.qv-recesso__errori {
  margin: 0 0 1.2em;
  padding: .9em 1.2em;
  border-left: 4px solid #c62828;
  background: #fdecea;
  color: #8e1c1c;
}

.qv-recesso__errori ul {
  margin: 0 !important;
  padding-left: 1.1em !important;
}

.qv-recesso__esito {
  margin: 0 0 .6em;
  font-size: 1.25em;
  font-weight: 700;
  color: #2e7d32;
}

@media (max-width: 560px) {
  .qv-recesso {
    padding: 1.2em 1.1em;
  }

  .qv-recesso__pulsante,
  .qv-recesso__secondario {
    width: 100%;
  }
}

/* La ricevuta si stampa da sola, senza testata, menu e footer. */
@media print {
  body.qv-pagina-editoriale .site-header,
  body.qv-pagina-editoriale .site-footer,
  body.qv-pagina-editoriale .qv-top-bar,
  body.qv-pagina-editoriale .qv-tavola-richiamo,
  .qv-recesso__azioni,
  .qv-recesso__passi {
    display: none !important;
  }
}

/* =========================================================
   AREA CLIENTI (Il mio account, da loggati)
   Il tema base la disegna con il suo viola e pulsanti grigi, uguali per
   tutti. Qui prende i colori del canale: rosso per i privati, blu per
   gli HORECA — basta usare le variabili, che body.qv-horeca ridefinisce.
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0;
  list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  padding: .7em 1em !important;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  color: #3c3c3b !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
  color: var(--qv-marchio) !important;
  opacity: .55;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--qv-fondo-tenue);
  color: var(--qv-marchio) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  border-left-color: var(--qv-marchio);
  background: var(--qv-fondo-tenue);
  color: var(--qv-marchio) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
  opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--qv-marchio);
}

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
  padding: .75em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--qv-marchio) !important;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--qv-marchio-scuro) !important;
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
  padding: .7em .9em;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus {
  border-color: var(--qv-marchio);
  outline: 2px solid rgba(var(--qv-marchio-rgb), .25);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
  padding: 1.2em 1.4em;
  border: 1px solid var(--qv-bordo-tenue);
  border-radius: 10px;
  background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  padding: 0 .4em;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--qv-marchio);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  background: var(--qv-fondo-tenue);
  color: var(--qv-marchio);
}

/* Il riquadro di benvenuto della bacheca: dice in quale area si è. */
.qv-area-cliente {
  margin: 0 0 1.6em;
  padding: 1.2em 1.4em;
  border-left: 4px solid var(--qv-marchio);
  border-radius: 0 10px 10px 0;
  background: var(--qv-fondo-tenue);
}

.qv-area-cliente__ruolo {
  display: inline-block;
  margin: 0 0 .5em;
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--qv-marchio);
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.qv-area-cliente__scorciatoie {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: .9em 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.qv-area-cliente__scorciatoie li {
  margin: 0 !important;
  list-style: none !important;
}

.qv-area-cliente__scorciatoie a,
.qv-area-cliente__scorciatoie a:hover {
  display: inline-block;
  padding: .45em 1em;
  border: 1px solid var(--qv-marchio);
  border-radius: 999px;
  background: #fff;
  font-size: .9em;
  font-weight: 600;
  color: var(--qv-marchio) !important;
  text-decoration: none !important;
}

.qv-area-cliente__scorciatoie a:hover {
  background: var(--qv-marchio);
  color: #fff !important;
}

/* Su telefono la navigazione diventa una riga di etichette che scorre. */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 6px;
    margin: 0 -1em 1.2em !important;
    padding: 0 1em 4px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex-shrink: 0;
    margin: 0 !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: .55em 1em !important;
    border: 1px solid var(--qv-bordo-tenue);
    border-radius: 999px;
    white-space: nowrap;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    display: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    border-color: var(--qv-marchio);
    background: var(--qv-marchio);
    color: #fff !important;
  }
}

/* =========================================================
   SCHEDA PRODOTTO SU TABLET E TELEFONO
   Le due colonne (foto e informazioni) erano larghe il 50% ciascuna
   più uno spazio fisso fra loro: la somma superava il 100%, la
   seconda andava a capo e restavano entrambe a metà larghezza — su
   telefono titolo, prezzo e caratteristiche finivano in una colonna
   di pochi centimetri. Sotto i 1024px le colonne si dividono lo
   spazio senza andare a capo; sotto i 768px si impilano a tutta
   larghezza.
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .product-main-section {
    flex-wrap: nowrap;
  }

  .product-images-column,
  .product-info-column {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .product-info-column {
    padding-left: 0;
  }

  /* Il selettore della quantità non si schiaccia: va a capo il pulsante. */
  .product-add-to-cart form.cart {
    flex-wrap: wrap;
  }

  .product-add-to-cart .quantity {
    flex-shrink: 0;
    min-width: 130px;
  }
}

@media (max-width: 768px) {
  .product-main-section {
    display: block;
    margin-top: 0;
    padding: 10px 0 0;
  }

  .product-images-column,
  .product-info-column {
    width: 100%;
    padding-left: 0;
  }

  .product-info-column {
    margin-top: 18px;
  }

  .product-info-wrapper {
    padding: 0;
  }

  .product-info-wrapper .product_title {
    font-size: 1.45rem;
    line-height: 1.25;
  }

  /* La foto non deve prendersi da sola tutto lo schermo. */
  .product-images-column .woocommerce-product-gallery__image img {
    max-height: 58vh;
    width: auto !important;
    margin: 0 auto;
    object-fit: contain;
  }

  /* Caratteristiche: icona, nome e valore su una griglia, con il valore
     che va a capo da solo invece di spezzarsi parola per parola. */
  .spec-item-inline {
    display: grid;
    grid-template-columns: 24px minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .spec-label-inline,
  body.single-product .spec-label-inline {
    font-size: .92rem !important;
  }

  .spec-value-inline {
    font-size: .92rem;
  }

  /* Quantità e pulsante: il pulsante prende lo spazio che resta. */
  .product-add-to-cart form.cart:not(.variations_form),
  .product-add-to-cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  .product-add-to-cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 48px;
  }
}

/* Il banner «Sei un professionista del settore HORECA?» in home (elemento
   del costruttore, snippet «Custom Button Visual Builder»). Su telefono la
   riga è stirata a tutta larghezza e il riquadro rosso toccava i bordi
   dello schermo: qui riprende il margine laterale del sito e il testo si
   divide in righe equilibrate. */
@media (max-width: 767px) {
  .horeca-custom-button-wrapper {
    box-sizing: border-box;
    padding: 0 16px;
  }

  .horeca-custom-button-widget {
    flex-direction: column;
    gap: 6px !important;
    padding: 18px 20px !important;
  }

  .horeca-custom-button-widget .horeca-title {
    font-size: 18px !important;
    font-weight: 700;
    text-wrap: balance;
  }

  .horeca-custom-button-widget .horeca-button-link {
    font-size: 15px !important;
    text-wrap: balance;
  }
}

/* =========================================================
   NOME DEL VINO SOTTO LA FOTO — uguale ovunque
   Nei blocchi «i più Venduti» (snippet «Prodotti in Evidenza» e
   «Prodotti Selezionati») il nome usciva in Lato sottile, piccolo e
   poco leggibile, mentre catalogo e ricerca lo usavano in grassetto.
   Qui una regola sola per tutte le schede: Lato 700, 1rem, interlinea
   comoda. Il colore resta quello di ciascun blocco (per gli HORECA il
   blu arriva dalle variabili o dall'attributo del blocco).
   ========================================================= */
.vcw-prodotto .vcw-nome,
.vcw-prodotto .vcw-nome a,
.product-info .woocommerce-loop-product__title,
.product-info .woocommerce-loop-product__title a,
.ls-card-title {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

/* Nella tendina di ricerca le schede sono piccole: un filo più stretto. */
.ls-card-title {
  font-size: .9rem !important;
}

@media (max-width: 767px) {
  .vcw-prodotto .vcw-nome,
  .vcw-prodotto .vcw-nome a,
  .product-info .woocommerce-loop-product__title,
  .product-info .woocommerce-loop-product__title a {
    font-size: .95rem !important;
  }
}

/* =========================================================
   RITRATTO (pagina Qui Vinanza: lo chef Mauro Ravazzolo)
   Foto quadrata con angoli morbidi e didascalia su due righe:
   nome in grassetto, ruolo sotto. Su telefono va sotto al testo,
   a tutta larghezza ma non più alta di uno schermo.
   ========================================================= */
.qv-ritratto {
  margin: 0 auto;
  max-width: 420px;
}

.qv-ritratto__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.qv-ritratto figcaption {
  margin-top: .9em;
  padding-left: .9em;
  border-left: 3px solid var(--qv-marchio);
  font-size: .95em;
  line-height: 1.4;
  color: var(--qv-testo-smorzato);
}

.qv-ritratto figcaption strong {
  display: block;
  font-size: 1.05em;
  color: #3c3c3b;
}

@media (max-width: 767px) {
  /* Su telefono la foto viene prima del testo: sotto la didascalia serve
     aria, altrimenti tocca il filetto del titolo «Qui Vinanza». */
  .qv-ritratto {
    max-width: 360px;
    margin-top: .6em;
  }

  /* Lo spazio va sulla colonna, non sulla foto: il foglio delle pagine
     editoriali azzera con !important il margine dell'ultimo elemento di
     ogni blocco di testo. */
  .qv-chi-siamo-apertura > .wpb_column:has(.qv-ritratto) {
    padding-bottom: 2.4em;
  }
}

/* =========================================================
   ICONE E RIQUADRI PER LE PAGINE DI TESTO
   Per rendere meno monotone le pagine lunghe: una striscia di punti
   chiave (.qv-punti) e una griglia di riquadri (.qv-schede), ognuno
   con un'icona nel cerchio. Il colore è quello del canale: rosso ai
   privati, blu agli HORECA, perché l'icona è una maschera colorata
   con var(--qv-marchio).

   L'icona sta nella classe del riquadro (qv-ico--nome) e la
   disegnano i suoi ::before (cerchio) e ::after (simbolo): niente
   elementi vuoti nell'HTML, che l'editor visuale di WordPress
   cancellerebbe alla prima modifica della pagina.

   USO, dentro un blocco di testo del costruttore:
     <div class="qv-punti">
       <div class="qv-punto qv-ico--spedizione"><strong>Gratis da 75 €</strong>Spedizione in tutta Italia</div>
       ...
     </div>
     <div class="qv-schede">
       <div class="qv-scheda qv-ico--calice"><h3>Titolo</h3><p>Testo.</p></div>
       ...
     </div>
   Icone: spedizione, lucchetto, carta, calice, cappello, scheda, premio, casa, percento, casse, carrello, euro, orologio, calendario, banca, contanti, calcolatrice, fulmine, scudo, registrazione, chiave, libro, persone, crescita, luogo, posate, messaggio, stella.
   ========================================================= */

.qv-punti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 1.6em 0 .4em;
}

.qv-punto {
  position: relative;
  min-height: 52px;
  padding: 1em 1em 1em 4.6em;
  border-radius: 12px;
  background: var(--qv-fondo-tenue);
  font-size: .9em;
  line-height: 1.35;
  color: var(--qv-testo-smorzato);
}

.qv-punto strong {
  display: block;
  font-size: 1.1em;
  color: #2b2b2b;
}

.qv-punto::before,
.qv-scheda::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.qv-punto::before {
  top: 50%;
  left: 1em;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  background: #fff;
}

.qv-punto::after,
.qv-scheda::after {
  content: "";
  position: absolute;
  background: var(--qv-marchio);
  -webkit-mask: var(--qv-ico) center / contain no-repeat;
  mask: var(--qv-ico) center / contain no-repeat;
}

.qv-punto::after {
  top: 50%;
  left: calc(1em + 11px);
  width: 22px;
  height: 22px;
  margin-top: -11px;
}

.qv-schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 1.2em 0 1.6em;
}

.qv-scheda {
  position: relative;
  padding: 5.2em 1.4em 1.3em;
  border: 1px solid var(--qv-bordo-tenue);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}

.qv-scheda:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}

.qv-scheda::before {
  top: 1.3em;
  left: 1.4em;
  width: 54px;
  height: 54px;
  background: var(--qv-fondo-tenue);
}

.qv-scheda::after {
  top: calc(1.3em + 14px);
  left: calc(1.4em + 14px);
  width: 26px;
  height: 26px;
}

.qv-pagina-editoriale .entry-content .qv-scheda h3 {
  margin: 0 0 .35em;
  font-size: 1.1em;
}

.qv-pagina-editoriale .entry-content .qv-scheda p {
  margin: 0;
  font-size: .95em;
  line-height: 1.55;
}

.qv-pagina-editoriale .entry-content .qv-scheda p + p {
  margin-top: .6em;
}

/* Passi numerati con icona (es. «Come si accede»). */
.qv-schede--passi {
  counter-reset: qv-passo;
}

.qv-schede--passi .qv-scheda {
  counter-increment: qv-passo;
}

.qv-schede--passi .qv-scheda h3::before {
  content: counter(qv-passo) ". ";
  color: var(--qv-marchio);
}

@media (max-width: 767px) {
  .qv-punti {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .qv-punto {
    padding: 4em .9em .9em;
    font-size: .85em;
  }

  .qv-punto::before {
    top: .8em;
    left: .9em;
    margin-top: 0;
  }

  .qv-punto::after {
    top: calc(.8em + 11px);
    left: calc(.9em + 11px);
    margin-top: 0;
  }

  .qv-schede {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .qv-scheda {
    padding: 1.2em 1.2em 1.2em 5em;
  }

  .qv-scheda::before {
    top: 1.2em;
    left: 1.1em;
    width: 46px;
    height: 46px;
  }

  .qv-scheda::after {
    top: calc(1.2em + 12px);
    left: calc(1.1em + 12px);
    width: 22px;
    height: 22px;
  }
}

/* Le icone */
.qv-ico--spedizione { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h14v13H1z'/%3E%3Cpath d='M15 8h4l4 4v4h-8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.qv-ico--lucchetto { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.qv-ico--carta { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.qv-ico--calice { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22h8M12 15v7M6 3h12l-.7 6.2A5.3 5.3 0 0 1 12 15a5.3 5.3 0 0 1-5.3-5.8z'/%3E%3Cpath d='M6.5 7h11'/%3E%3C/svg%3E"); }
.qv-ico--cappello { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14.2A4 4 0 0 1 7.6 6.3a4.6 4.6 0 0 1 8.8 0 4 4 0 0 1 .6 7.9V19a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z'/%3E%3Cpath d='M7 16.6h10'/%3E%3C/svg%3E"); }
.qv-ico--scheda { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8 11h8M8 15h6'/%3E%3C/svg%3E"); }
.qv-ico--premio { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13 17 22l-5-3-5 3 1.5-9'/%3E%3C/svg%3E"); }
.qv-ico--casa { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.qv-ico--percento { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.qv-ico--casse { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.qv-ico--carrello { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"); }
.qv-ico--euro { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15.5 8.5a4.5 4.5 0 1 0 0 7M7 11h6M7 13.5h6'/%3E%3C/svg%3E"); }
.qv-ico--orologio { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.qv-ico--calendario { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.qv-ico--banca { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 10h16M5 10v8M9 10v8M15 10v8M19 10v8M12 3l9 5H3z'/%3E%3C/svg%3E"); }
.qv-ico--contanti { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
.qv-ico--calcolatrice { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01M8 18.5h.01M12 18.5h4'/%3E%3C/svg%3E"); }
.qv-ico--fulmine { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
.qv-ico--scudo { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.qv-ico--registrazione { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M20 8v6M23 11h-6'/%3E%3C/svg%3E"); }
.qv-ico--chiave { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E"); }
.qv-ico--libro { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.qv-ico--persone { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.qv-ico--crescita { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m23 6-9.5 9.5-5-5L1 18'/%3E%3Cpath d='M17 6h6v6'/%3E%3C/svg%3E"); }
.qv-ico--luogo { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.qv-ico--posate { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E"); }
.qv-ico--messaggio { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.qv-ico--stella { --qv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }

/* =========================================================
   GALLERIA FOTOGRAFICA NELLE PAGINE DI TESTO (.qv-galleria)
   Quattro foto in riga, tagliate allo stesso formato; due per riga
   su telefono. Da Pranzi e cene private.
   ========================================================= */
.qv-galleria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 1.4em 0 1.6em;
}

.qv-galleria figure {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
}

.qv-galleria img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.qv-galleria figure:hover img {
  transform: scale(1.04);
}

/* Le ancore della pagina finiscono sotto l'header fisso: un margine. */
#in-sala,
#banqueting {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.qv-punto strong a {
  color: inherit !important;
  text-decoration: none !important;
}

.qv-punto:has(strong a):hover strong a {
  color: var(--qv-marchio) !important;
}

@media (max-width: 767px) {
  .qv-galleria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* =========================================================
   CARRELLO E PAGAMENTO NELLA COLONNA DEL SITO
   I blocchi WooCommerce di carrello e checkout sono «alignwide»: con i
   margini negativi uscivano dalla colonna dei contenuti, e i prodotti
   cominciavano più a sinistra del logo (e il riepilogo finiva più a
   destra dell'icona del carrello). Qui tornano larghi quanto il resto
   del sito, con il primo contenuto allineato al logo.
   ========================================================= */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
  width: auto;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* WooCommerce aggiunge anche un'imbottitura laterale di circa 23px. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
  margin-left: 0;
  margin-right: 0;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-main {
  padding-left: 0;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
  padding-right: 0;
}

/* =========================================================
   COLLEGAMENTI NEL COLORE DEL MARCHIO
   Storefront colora ogni <a> con il suo "colore d'accento", che di
   serie e' il viola di WooCommerce (#7f54b3): i link senza una regola
   propria (descrizioni dei prodotti, pagine, avvisi) uscivano viola,
   come i link visitati dei vecchi siti. Questo foglio arriva dopo il
   CSS in linea di Storefront, quindi a parita' di selettore vince;
   la variabile fa il resto (rosso ai privati, blu agli HORECA).
   ========================================================= */
a {
  color: var(--qv-marchio);
}

a:hover {
  color: var(--qv-marchio-scuro);
}

/* Gli altri punti in cui Storefront usa lo stesso viola. */
body .star-rating span:before,
body p.stars a:after,
body p.stars a:hover:after,
body p.stars.selected a.active:before,
body p.stars:hover a:before,
body p.stars.selected a:not(.active):before,
body .quantity .plus,
body .quantity .minus,
body #payment .payment_methods li input[type=radio]:first-child:checked + label:before {
  color: var(--qv-marchio);
}

body .widget_price_filter .ui-slider .ui-slider-range,
body .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--qv-marchio);
}

body div.wc-block-components-price-slider__range-input-progress {
  --range-color: var(--qv-marchio);
}

/* =========================================================
   AVVISI DI WOOCOMMERCE NEL COLORE DEL MARCHIO
   Storefront li dipinge azzurro (informazioni), verde (conferme) e
   arancio (errori): colori che sul sito non compaiono altrove. Qui
   prendono il colore del canale; gli errori la sua tinta scura, per
   restare riconoscibili. Il CSS WooCommerce di Storefront arriva dopo
   questo foglio: il "body" davanti serve a vincere comunque.
   ========================================================= */
body .woocommerce-info,
body .woocommerce-noreviews,
body p.no-comments,
body .woocommerce-message {
  background-color: var(--qv-marchio);
  color: #fff;
}

body .woocommerce-error {
  background-color: var(--qv-marchio-scuro);
  color: #fff;
}

body .woocommerce-info a,
body .woocommerce-noreviews a,
body p.no-comments a,
body .woocommerce-message a,
body .woocommerce-error a,
body .woocommerce-info a:hover,
body .woocommerce-message a:hover,
body .woocommerce-error a:hover {
  color: #fff;
}

/* =========================================================
   "CHE VINO SEI OGGI?" DA TELEFONO
   Lo slider (snippet "Double slider Visual Composer") sotto i 768px
   impila le due meta' in colonna, ma la meta' con le foto contiene
   solo diapositive posizionate in assoluto: senza un'altezza propria
   restava alta zero e si vedeva solo il riquadro rosso, con il nome
   della diapositiva tagliato sotto. Qui le foto hanno un'altezza
   proporzionata allo schermo e il riquadro del titolo si stringe al
   suo contenuto. Gli !important battono quelli dello snippet.
   ========================================================= */
@media (max-width: 768px) {
  .dual-section-slider-vc {
    min-height: 0 !important;
  }

  .dual-section-slider-vc .dual-slider-left-vc {
    flex: 0 0 auto !important;
    min-height: 0;
    padding: 28px 24px;
  }

  .dual-section-slider-vc .dual-slider-left-content-vc h2 {
    text-align: center;
  }

  .dual-section-slider-vc .dual-slider-right-vc {
    flex: 0 0 auto;
    height: 75vw;
    min-height: 260px;
    max-height: 460px;
  }
}

/* =========================================================
   RIQUADRO «QUANTO MANCA» IN CARRELLO E CHECKOUT
   Lo compone inc/soglie-carrello.php e lo aggiorna
   js/soglie-carrello.js. Privati: spedizione gratuita con barra;
   HORECA: ordine minimo e trasporto incluso. Il colore segue il canale.
   ========================================================= */
.qv-soglie {
  margin: 0 0 1.6em;
  padding: 14px 18px;
  border-left: 4px solid var(--qv-marchio);
  background: var(--qv-fondo-tenue);
  border-radius: 4px;
}

.qv-soglie__titolo {
  margin: 0 0 .5em !important;
  font-weight: 700;
  color: var(--qv-marchio);
  font-size: .95em;
}

.qv-soglie__righe,
.qv-soglie__righe li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.qv-soglie__righe li {
  position: relative;
  padding-left: 24px !important;
  line-height: 1.45;
}

.qv-soglie__righe li + li {
  margin-top: .4em !important;
}

.qv-soglie__righe li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.qv-soglie__righe li.is-manca::before {
  content: "→";
  color: var(--qv-marchio);
}

.qv-soglie__righe li.is-fatto::before {
  content: "✓";
  color: #1a7d33;
}

.qv-soglie__righe li.is-fatto {
  color: #1a7d33;
  font-weight: 700;
}

.qv-soglie__righe strong,
.qv-soglie .amount {
  white-space: nowrap;
  color: var(--qv-marchio);
}

.qv-soglie__barra {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(var(--qv-marchio-rgb), .15);
  overflow: hidden;
}

.qv-soglie__barra > span {
  display: block;
  height: 100%;
  background: var(--qv-marchio);
  border-radius: 3px;
  transition: width .4s ease;
}

.qv-soglie__righe li.is-fatto .qv-soglie__barra > span {
  background: #1a7d33;
}

.qv-soglie__nota {
  margin: .6em 0 0 !important;
  font-size: .82em;
  opacity: .7;
}

/* =========================================================
   CHECKOUT: RIGA DELL'ADEGUAMENTO FISCALE
   WooCommerce scrive «Incluso … » sotto il totale con
   white-space: pre, che non va mai a capo: con il nostro testo
   (lessico-fiscale.php) la frase usciva dal riquadro e dallo schermo.
   ========================================================= */
.wc-block-components-totals-footer-item-tax {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* =========================================================
   CHECKOUT: «EFFETTUA ORDINE» SEGUE L'ACCETTAZIONE DEI TERMINI
   Finche' la casella dei termini non e' spuntata il pulsante e'
   grigio chiaro, cosi' si capisce che manca un passo; spuntata,
   prende il colore del canale. Resta comunque cliccabile: se lo si
   preme prima, WooCommerce evidenzia la casella da spuntare.
   ========================================================= */
.wc-block-checkout .wc-block-components-checkout-place-order-button {
  background-color: var(--qv-marchio) !important;
  color: #fff !important;
  transition: background-color .2s ease, color .2s ease;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
  background-color: var(--qv-marchio-scuro) !important;
}

.wc-block-checkout:has(.wc-block-checkout__terms input[type="checkbox"]:not(:checked)) .wc-block-components-checkout-place-order-button {
  background-color: #d9d9d9 !important;
  color: #555 !important;
}

/* =========================================================
   CARRELLO VUOTO: PULSANTI «AGGIUNGI AL CARRELLO»
   I prodotti suggeriti sotto «Il tuo carrello è attualmente
   vuoto!» usano il pulsante di serie dei blocchi, grigio: qui
   tornano nel colore del sito. Storefront colora quel pulsante con
   un selettore piu' lungo: serve !important.
   ========================================================= */
.wp-block-woocommerce-empty-cart-block .wp-block-button__link.add_to_cart_button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link.added_to_cart {
  background-color: var(--qv-marchio) !important;
  color: #fff !important;
  border-radius: 4px;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link.add_to_cart_button:hover {
  background-color: var(--qv-marchio-scuro) !important;
  color: #fff !important;
}

/* =========================================================
   CARRELLO VUOTO: STESSI CARATTERI DELLA HOME
   Il blocco di WooCommerce scrive titoli e nomi in Lato sottile
   (300/400): accanto alla home, dove i titoli di sezione sono nel
   carattere Vinanza e i nomi dei vini in Lato 700, sembrava un'altra
   pagina. Qui prendono gli stessi pesi.
   ========================================================= */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon {
  font-weight: 700 !important;
  font-size: 1.15rem !important;
}

.wp-block-woocommerce-empty-cart-block h2:not(.with-empty-cart-icon) {
  font-family: 'Vinanza', 'Lato', Arial, sans-serif !important;
  font-weight: 400 !important;
  color: #333 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--qv-marchio) !important;
}

/* Il prezzo come nelle schede della home (.vcw-prezzo): grigio scuro,
   non nel colore del marchio, che resta al nome del vino. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: #333 !important;
}

/* =========================================================
   «VISUALIZZA CARRELLO» DOPO L'AGGIUNTA
   WooCommerce, aggiunto un prodotto dalle schede, mette accanto al
   pulsante un secondo link «Visualizza carrello»: nero, squadrato,
   schiacciava «Aggiungi al carrello» su due righe. Il carrello ora
   si raggiunge dall'avviso in basso e dall'icona in alto, che si
   aggiorna: il link in scheda non serve.
   ========================================================= */
ul.products li.product a.added_to_cart.wc-forward,
.wc-block-grid__product a.added_to_cart.wc-forward,
.wishlist_table a.added_to_cart.wc-forward {
  display: none !important;
}

/* =========================================================
   REVISIONE DI DESIGN DEL 28/10: UN SOLO SISTEMA
   Una revisione pagina per pagina, su computer e telefono, ha
   trovato lo stesso ruolo disegnato in modi diversi: sette
   «Aggiungi al carrello», sei prezzi, tre rossi. Qui le regole che
   li riportano a uno. Il riferimento sono le schede della home e del
   negozio:
   - pulsanti d'acquisto: fondo del marchio, Lato 700, angoli 8 px,
     niente maiuscolo ne' sottolineato; al passaggio, il rosso scuro;
   - prezzi: Lato 700, grigio scuro #333;
   - nomi dei vini: Lato 700 nel colore del marchio.
   I pulsanti a pillola delle pagine editoriali restano: sono inviti
   alla lettura, non azioni d'acquisto.
   ========================================================= */

/* --- Carattere: Lato anche per pulsanti e campi ------------------
   Storefront assegna a button/input/select/textarea «Source Sans
   Pro», che il tema non carica piu': il browser ripiegava su
   Helvetica/Arial. */
button,
input,
select,
textarea,
.button {
  font-family: 'Lato', Arial, sans-serif;
}

/* --- Pulsanti d'acquisto -------------------------------------------
   .vcw-bottone.vcw-bottone:not(#qv-x) alza la precedenza sopra le
   regole con id che gli snippet della home stampano in pagina, dopo
   questo foglio (#vcw-prodotti-… .vcw-bottone). */
.vcw-bottone.vcw-bottone:not(#qv-x),
ul.products li.product .button,
.single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wishlist_table .add_to_cart_button,
.ls-atc-btn.button,
.qv-account button[type=submit] {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: 0 !important;
  background-color: var(--qv-marchio) !important;
  color: #fff !important;
  transition: background-color 0.2s ease;
}

.vcw-bottone.vcw-bottone:not(#qv-x):hover,
ul.products li.product .button:hover,
.single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wishlist_table .add_to_cart_button:hover,
.ls-atc-btn.button:hover,
.qv-account button[type=submit]:hover {
  background-color: var(--qv-marchio-scuro) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Le misure: i pulsanti di scheda tutti uguali al negozio. */
.vcw-bottone.vcw-bottone:not(#qv-x),
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  font-size: 15px !important;
  padding: 14px 24px !important;
}

/* «Effettua ordine» resta grigio finche' non si accettano i termini
   (regola piu' sopra): la precedenza la tiene quella, con :has(). */
.wc-block-checkout:has(.wc-block-checkout__terms input[type="checkbox"]:not(:checked)) .wc-block-components-checkout-place-order-button {
  background-color: #d9d9d9 !important;
  color: #555 !important;
}

/* --- Prezzi ---------------------------------------------------------
   Come .vcw-prezzo della home. Negozio, categorie, ricerca e risultati
   di «In tavola» li scrivevano sottili e neri (l'importo interno
   ignorava la regola del contenitore). Il prezzo barrato resta grigio. */
.product-price .price,
.product-price .price ins,
.product-price .price ins .woocommerce-Price-amount,
.product-price .price > .woocommerce-Price-amount,
.product-price .price > .woocommerce-Price-amount bdi,
.product-price > .woocommerce-Price-amount,
.product-price > .woocommerce-Price-amount bdi,
.product-price > ins .woocommerce-Price-amount {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #333 !important;
}
.product-price .price,
.product-price .price .woocommerce-Price-amount,
.product-price > .woocommerce-Price-amount,
.product-price > ins .woocommerce-Price-amount {
  font-size: 1.25rem !important;
}

.ls-card-price,
.ls-card-price .woocommerce-Price-amount {
  font-weight: 700 !important;
  color: #333 !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-components-order-summary-item__total-price {
  font-weight: 700 !important;
  color: #333 !important;
}

/* --- Nomi dei vini ---------------------------------------------------
   In home lo snippet li scriveva sottili e in un rosso diverso
   (#8b3952); nella scheda prodotto il titolo era nero; nel carrello
   e nel checkout sottolineati e semigrassetto. */
.vcw-nome.vcw-nome:not(#qv-x) {
  color: var(--qv-marchio) !important;
  font-weight: 700 !important;
}

.wc-block-components-product-name {
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--qv-marchio) !important;
}
.wc-block-components-product-name:hover {
  color: var(--qv-marchio-scuro) !important;
}

/* --- «Che vino sei oggi?»: i nomi delle slide in Vinanza, come i
   titoli di sezione (lo snippet li dava in Impact). */
.dual-section-slider-vc {
  --slide-font-family: 'Vinanza', 'Lato', Arial, sans-serif !important;
}

/* --- Titoli di carrello e checkout -----------------------------------
   I titoli delle pagine sono nascosti (le pagine editoriali hanno il
   proprio); carrello e pagamento restavano senza titolo e partivano
   dal riquadro della spedizione. Stesso stile dei titoli di categoria. */
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
  display: block;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--qv-marchio);
  line-height: 1.2;
  margin: 0 0 20px;
}
@media (max-width: 768px) {
  .woocommerce-cart .entry-header .entry-title,
  .woocommerce-checkout .entry-header .entry-title {
    font-size: 1.4rem;
    margin-bottom: 14px;
  }
}

/* --- Checkout: dal nero di serie al colore del marchio --------------- */
.wc-block-checkout__shipping-method-option--selected,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--qv-marchio) !important;
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: var(--qv-marchio) !important;
}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
  background: var(--qv-marchio) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
  background: var(--qv-marchio) !important;
  border-color: var(--qv-marchio) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: #fff !important;
}
.wc-block-checkout__login-prompt,
.wc-block-checkout__login-prompt:visited {
  color: var(--qv-marchio) !important;
}
.wc-block-components-checkout-order-summary__title-text {
  color: var(--qv-marchio) !important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
  border-color: #d5d5d4 !important;
  border-radius: 6px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
  border-color: var(--qv-marchio) !important;
  box-shadow: 0 0 0 1px var(--qv-marchio) !important;
}

/* --- Pagina di un corso: quantita' e pulsante vanno su due righe se
   non ci stanno (regola in inc/woocommerce-events-courses.php). */

/* --- Header tra 1024 e 1300 px: logo e carrello toccavano i bordi e il
   numero del carrello usciva dalla finestra. */
@media (min-width: 1024px) {
  .header-row {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}
/* Nella stessa fascia le categorie stanno su una riga sola: con 32 px
   fra le voci «Da collezione» andava a capo da sola. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .desktop-header .qv-menu-due-righe {
    column-gap: 20px !important;
  }
}

/* --- Pulsante WhatsApp sul telefono ----------------------------------
   - nel carrello e nel pagamento si toglie: copriva «Procedi al
     pagamento» e i campi; a quel punto il contatto e' nel footer;
   - con il menu aperto si toglie: copriva le ultime voci;
   - in fondo al footer si lascia spazio, perche' non copra
     l'avvertenza sulla vendita ai minori. */
@media (max-width: 768px) {
  .woocommerce-cart .qlwapp,
  .woocommerce-checkout .qlwapp,
  body:has(.mobile-menu-overlay.active) .qlwapp {
    display: none !important;
  }
  .site-footer {
    padding-bottom: 96px !important;
  }
}

/* =========================================================
   RIFINITURE DELLA REVISIONE DEL 28/10
   ========================================================= */

/* --- Negozio da telefono: la barra dei filtri chiusa non occupa spazio.
   Con il suo padding e lo spazio della griglia lasciava ~95 px vuoti
   tra «Filtri» e il titolo. */
@media (max-width: 768px) {
  .category-sidebar:not(.mobile-expanded) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
  }
  .category-archive-layout:has(.category-sidebar:not(.mobile-expanded)) {
    row-gap: 0;
  }
}

/* --- iPhone ingrandisce la pagina toccando un campo sotto i 16 px:
   l'ordinamento del negozio e la quantita' del carrello lo erano. */
@media (max-width: 768px) {
  select.orderby,
  .woocommerce-ordering select,
  .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
  .quantity input.qty {
    font-size: 16px !important;
  }
}

/* --- Aree da toccare di almeno 40 px -------------------------------- */
.wc-block-cart-item__remove-link {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.wpcf7 .wpcf7-acceptance input[type=checkbox],
.wpcf7 .wpcf7-checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: var(--qv-marchio);
  vertical-align: middle;
}

/* --- Menu ------------------------------------------------------------ */
/* Su computer anche la prima riga segna la pagina in cui ci si trova,
   come gia' la seconda. */
.qv-menu-due-righe > li:not(.menu-riga-2).current-menu-item > a,
.qv-menu-due-righe > li:not(.menu-riga-2).current-page-ancestor > a,
.qv-menu-due-righe > li:not(.menu-riga-2).current-menu-ancestor > a {
  color: var(--qv-marchio);
}

/* Sul telefono una sola X: il pannello ha la sua, l'hamburger
   nell'header non si trasforma piu' in una seconda X. */
.mobile-menu-toggle.active .hamburger-line:nth-child(1),
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: none;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 1;
}

/* Sul telefono la prima riga era piccola (12,5 px) e grigio chiaro,
   con lettere spaziate: ora leggibile, ma meno pesante delle categorie. */
.mobile-menu-list.qv-menu-due-righe > li:not(.menu-riga-2) > a {
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #444;
}
.mobile-menu-list.qv-menu-due-righe > li.menu-riga-2 > a {
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Un solo filetto tra i due gruppi: il bordo inferiore della voce sopra
   e quello superiore della prima categoria facevano una riga doppia. */
.mobile-menu-list > li.menu-riga-2:not(li.menu-riga-2 + li) {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.mobile-menu-list > li:not(.menu-riga-2):has(+ li.menu-riga-2) {
  border-bottom: 4px solid var(--qv-fondo-tenue);
}

/* --- Lista dei desideri vuota: invito al negozio ----------------------- */
.qv-lista-vuota-invito {
  text-align: center;
  margin: 8px 0 40px;
}
.qv-lista-vuota-invito .button {
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  padding: 14px 28px !important;
  text-decoration: none;
}
.qv-lista-vuota-invito .button:hover {
  background: var(--qv-marchio-scuro) !important;
}

/* --- WPBakery: WordPress infila un <br> fra le colonne di una riga
   (wpautop) e la seconda colonna scendeva di una riga: in Contatti
   «Recapiti» partiva 26 px sotto «Scrivici». */
.vc_row > br,
.vc_row > .vc_column_container + br {
  display: none;
}

/* --- Lista dei desideri: il titolo allineato alla lineetta rossa sopra
   (YITH gli da' 5 px di rientro). */
.wishlist-title h2 {
  padding-left: 0 !important;
}

/* --- Checkout: meno vuoto tra il riquadro della spedizione gratuita e il
   blocco (margine del riquadro + rientro del blocco + margine del
   riepilogo facevano ~85 px). */
.qv-soglie-posto .qv-soglie {
  margin-bottom: 16px;
}
.qv-soglie-posto + .wp-block-woocommerce-checkout,
.qv-soglie-posto + .wp-block-woocommerce-cart {
  padding-top: 0 !important;
}

/* --- Scheda prodotto: il cuore sulla foto in un cerchio bianco, come
   nelle schede del negozio; sulle foto scure di eventi e corsi il solo
   contorno rosso non si vedeva. */
.custom-wishlist-wrapper .product-wishlist-heart .custom-wishlist-heart {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.custom-wishlist-wrapper .product-wishlist-heart .custom-wishlist-heart svg {
  width: 28px;
  height: 28px;
}

/* --- Badge «PROMO»: niente bordo grigio sul fondo rosso. */
.onsale {
  border: 0 !important;
}

/* --- Ritorno a «In tavola» sopra il nome del piatto. */
.qv-tavola-ritorno {
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.qv-tavola-ritorno a {
  color: var(--qv-marchio);
  font-weight: 700;
  text-decoration: none;
}
.qv-tavola-ritorno a:hover {
  color: var(--qv-marchio-scuro);
}

/* --- Barra laterale delle categorie: il numero resta attaccato al nome
   invece di andare a capo da solo con un rientro diverso. */
.product-categories-list .count {
  white-space: nowrap;
}

/* --- «Nessun prodotto trovato» (ricerca, categorie vuote): titolo in
   Lato 700 come gli altri, pulsante come quelli d'acquisto. */
.no-products-content h2 {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem;
}
.no-products-content .button {
  display: inline-block;
  border-radius: 8px !important;
  font-weight: 700;
  padding: 14px 28px;
}

/* --- Pagina 404 ------------------------------------------------------- */
.qv-404 {
  max-width: 640px;
  margin: 40px auto 80px;
  text-align: center;
}
.qv-404__codice {
  font-family: 'Vinanza', 'Lato', Arial, sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--qv-marchio);
  margin: 0 0 10px;
}
.qv-404__titolo {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--qv-marchio);
  margin: 0 0 12px;
}
.qv-404__testo {
  color: #555;
  font-size: 1.05rem;
  margin: 0 0 28px;
}
.qv-404__cerca {
  display: flex;
  gap: 10px;
  margin: 0 0 28px;
}
.qv-404__cerca input[type=search] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid #d5d5d4;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
}
.qv-404__cerca input[type=search]:focus {
  border-color: var(--qv-marchio);
  outline: none;
  box-shadow: 0 0 0 1px var(--qv-marchio);
}
.qv-404__cerca button {
  background: var(--qv-marchio);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  cursor: pointer;
}
.qv-404__cerca button:hover {
  background: var(--qv-marchio-scuro);
}
.qv-404__strade {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.qv-404__strade .button {
  background: var(--qv-marchio) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 700;
  padding: 14px 28px;
  text-decoration: none;
}
.qv-404__strade .button:hover {
  background: var(--qv-marchio-scuro) !important;
}
.qv-404__home {
  color: var(--qv-marchio);
  font-weight: 700;
}
@media (max-width: 480px) {
  .qv-404__codice { font-size: 4rem; }
  .qv-404__titolo { font-size: 1.5rem; }
}

/* --- Footer: la P. IVA compare una volta sola, nella riga del copyright,
   e non va a capo a meta' («P. IVA / 16213411008»). */
.qv-nowrap {
  white-space: nowrap;
}

/* --- Righe che scorrono di lato sul telefono («In tavola», area
   account): una sfumatura sul bordo destro fa capire che continuano.
   Prima le voci erano tagliate di netto («Coscette di pol…») e
   sembravano un errore. */
@media (max-width: 767px) {
  .qv-tavola__riga,
  .qv-tavola__piatti,
  .qv-tavola-vino__alternative .qv-tavola__vini.category-products-grid,
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
}

/* --- Checkout: anche l'opzione scelta tra i punti di ritiro (e le altre
   scelte evidenziate) col bordo del marchio invece del nero di serie. */
.wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
  box-shadow: inset 0 0 0 1.5px var(--qv-marchio) !important;
}
.wc-block-components-radio-control--highlight-checked::after {
  border-color: var(--qv-marchio) !important;
}

/* --- Lista dei desideri vuota: il messaggio aveva 100 px di margine sopra
   e sotto; ora testo e pulsante stanno insieme. */
.wishlist_table td.wishlist-empty {
  margin: 40px 0 0 !important;
}
.wishlist_table tr:has(td.wishlist-empty) {
  padding-bottom: 0 !important;
}

/* --- Cuore sulle schede dei prodotti in evidenza della home (privati e
   HORECA): come nelle schede del negozio, cerchio bianco in alto a
   destra della foto, sempre visibile (sul telefono non c'e' il
   passaggio del mouse). Il markup lo aggiunge inc/wishlist-integration.php. */
.vcw-immagine.qv-vcw-con-cuore {
  position: relative;
}
.qv-vcw-cuore {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  color: var(--qv-marchio);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.qv-vcw-cuore:hover {
  transform: scale(1.08);
}
.qv-vcw-cuore svg {
  width: 20px;
  height: 20px;
  fill: none;
  transition: fill 0.2s ease;
}
.qv-vcw-cuore.in-wishlist svg,
.qv-vcw-cuore:hover svg {
  fill: currentColor;
}
.qv-vcw-cuore.is-in-corso {
  opacity: 0.6;
}

/* «In tavola con Qui Vinanza» non si mostra ai professionisti HORECA
   (inc/a-tavola.php): in home il richiamo lascia un segno, e la sua riga,
   altrimenti vuota ma con i margini, sparisce. */
.vc_row:has(.qv-tavola-assente) {
  display: none !important;
}

/* Il cuore della lista dei desideri: niente anteprima «pieno» quando non
   serve. Su telefono lo stato :hover resta attivo dopo il tocco, e su
   computer finché il puntatore non esce: appena tolto un prodotto, il cuore
   sembrava ancora nella lista. Su schermi touch l'anteprima non c'è; col
   mouse si spegne dopo il clic (classe is-appena-cliccato, js/lista-desideri.js). */
@media (hover: none) {
  .product-wishlist-heart:hover,
  .product-wishlist-heart .custom-wishlist-heart:hover,
  .category-product-card .custom-wishlist-heart:hover,
  .qv-vcw-cuore:hover {
    transform: none;
  }
}
@media (hover: none) {
  .product-wishlist-heart .custom-wishlist-heart:not(.in-wishlist):hover svg,
  .qv-vcw-cuore:not(.in-wishlist):hover svg {
    fill: none;
  }
  .category-product-card .custom-wishlist-heart:hover {
    background: rgba(255, 255, 255, 0.95);
  }
  .category-product-card .custom-wishlist-heart:not(.in-wishlist):hover svg {
    stroke: var(--qv-marchio);
    fill: none;
  }
  .category-product-card .custom-wishlist-heart.in-wishlist:hover svg {
    stroke: var(--qv-marchio);
    fill: var(--qv-marchio);
  }
}
.product-wishlist-heart .custom-wishlist-heart.is-appena-cliccato:not(.in-wishlist):hover svg,
.qv-vcw-cuore.is-appena-cliccato:not(.in-wishlist):hover svg {
  fill: none;
}
.category-product-card .custom-wishlist-heart.is-appena-cliccato:hover {
  background: rgba(255, 255, 255, 0.95);
}
.category-product-card .custom-wishlist-heart.is-appena-cliccato:not(.in-wishlist):hover svg {
  stroke: var(--qv-marchio);
  fill: none;
}
.category-product-card .custom-wishlist-heart.is-appena-cliccato.in-wishlist:hover svg {
  stroke: var(--qv-marchio);
  fill: var(--qv-marchio);
}