/* font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
/* variable */
:root {     
    --base-color: #1B3250;
    --dark-gray: #16202c;
    --medium-gray: #888e95;
    --alt-font: 'Plus Jakarta Sans', sans-serif;
    --primary-font: 'Plus Jakarta Sans', sans-serif;
} 
/* reset */
body {
    font-size: 16px;
    line-height: 30px;
}
/* input placeholder color */
::-webkit-input-placeholder {
    color: #4F5864 !important;
    text-overflow: ellipsis;
}
::-moz-placeholder {
    color: #4F5864 !important;
    text-overflow: ellipsis;
    opacity:1;
}
:-ms-input-placeholder {
    color: #4F5864 !important;
    text-overflow: ellipsis;
    opacity:1;
}
.placeholder-medium-gray::-webkit-input-placeholder {
    color: var(--white) !important;
    text-overflow: ellipsis;
    opacity:0.7;
}
.placeholder-medium-gray::-moz-placeholder {
    color: var(--white) !important;
    text-overflow: ellipsis;
    opacity:0.7;
}
.placeholder-medium-gray:-ms-input-placeholder {
    color: var(--white) !important;
    text-overflow: ellipsis;
    opacity:0.7;
}
/* input placeholder color */
input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--medium-gray) !important;
    text-overflow: ellipsis;
    opacity:1;
}
input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--medium-gray) !important;
    text-overflow: ellipsis;
    opacity:1;
}
input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder  {
    color: var(--medium-gray) !important;
    text-overflow: ellipsis;
    opacity:1;
}
/* input */
.input-small, .textarea-small, .select-small {
    font-size: 15px;
}
/* header */
header .navbar-brand img {
    max-height: 58px;
    height: 58px;
    margin: 10px 0;
}
.header-cart-icon .cart-count {
    font-size: 9px;
    right: -10px;
}
.navbar .navbar-nav .simple-dropdown .dropdown-menu {
    border-radius: 5px;
}
.navbar .navbar-nav .submenu-content ul .sub-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.navbar .navbar-nav .dropdown .dropdown-menu a {
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 4px;
    border-color: transparent;
}
.navbar .navbar-nav .simple-dropdown .dropdown-menu li a {
    padding-bottom: 10px;
}
.navbar .navbar-nav .simple-dropdown .dropdown-menu {
    width: 190px;
    padding: 30px 0;
}
.navbar .navbar-nav .nav-link .label {
    font-size: 10px;
}
.header-cart-icon .header-cart .cart-item-list .cart-item .product-detail a {
    font-size: 14px;
}
.header-cart-icon .header-cart .cart-item-list .cart-item .product-detail .item-ammount {
    font-size: 13px;
    line-height: 24px;
}
/* heading tag */
h3 {
    line-height: 2.813rem;
}
h4 {
    line-height: 2.375rem;
}
.shop-sidebar .shop-filter li .item-qty {
    font-size: 10px;
    font-weight: 600;
}
.pagination-style-01 .page-item.active .page-link, .pagination-style-01 .page-item .page-link:hover {
    background: var(--dark-gray);
    color: var(--white);
}
.pagination-style-01 .page-item:first-child .page-link, .pagination-style-01 .page-item:last-child .page-link {
    background: transparent;
    box-shadow: none !important;
    color: var(--medium-gray);
}
.pagination-style-01 .page-item:first-child .page-link:hover, .pagination-style-01 .page-item:last-child .page-link:hover {
    color: var(--dark-gray);
}
section, footer {
    padding-top: 100px;
    padding-bottom: 100px;
}
/* btn */
.btn.btn-switch-text.btn-very-small > span {
    padding: 6px 12px;
}
.btn.btn-switch-text.btn-small > span {
    padding: 8px 16px;
}
.btn.btn-switch-text.btn-medium > span {
    padding:10px 20px;
}
.btn.btn-switch-text.btn-large > span {
    padding: 12px 24px;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 16px 32px;
}
.btn {
    text-transform: inherit;
    letter-spacing: 0;
}
.btn.btn-extra-large {
    font-size: 16px;
}
.btn.btn-large {
    font-size:15px;
}
.btn.btn-medium {
    font-size: 14px;
}
.btn.btn-small {
    font-size: 13px;
}
.btn.btn-very-small {
    font-size: 12px;
}
/* text color */
.text-blue-whale {
    color: #0C1623;
}
/* bg color */
.bg-blue-whale {
    background-color: #0C1623 !important;
}
.bg-blue-tangaroa {
    background-color: #18222E !important;
}
.bg-transparent-base-color-light {
    background-color: rgba(27, 50, 80,.2);
}
.bg-transparent-base-color {
    background-color: rgba(27, 50, 80,.8);
}
.bg-gradient-base-transparent {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 32, 44, 1)), to(transparent));
    background-image: linear-gradient(to top, rgba(22, 32, 44, .9) 8%, transparent 80%);
}
/* tab style 04 */
.tab-style-04 .nav-tabs .nav-item .nav-link {
    line-height: 50px;
}
/* progress bar 02 */
.progress-bar-style-02 .progress {
    height: 10px; 
}
/* contact form style 03 */
.contact-form-style-03 .form-group.form-textarea .form-icon {
    top: 20px;
}
/* tab style 07 */
.tab-style-07 .nav-tabs .nav-item .nav-link {
    padding: 17px 30px;
}
/* footer */
footer {
    font-size: 15px;
    line-height: 26px;
}
footer .footer-logo img {
    max-height: 56px;
    height: 56px;
}
.footer-dark a:hover {
    color: var(--white);
}
.newsletter-style-02 input {
    font-size: 14px;
    padding-right: 60px !important;
}
footer ul li {
    margin-bottom: 2px;
}
/* tooltip */
.tooltip.show {
    opacity: 1;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--dark-gray);
    top: -2px;
}
.tooltip .tooltip-inner {
    background-color: var(--dark-gray);
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    padding: 5px 10px;
    font-weight: 500;
}
.page-title-left-alignment .container-fluid{
    padding-left: 60px;
    padding-right: 60px;
}
/* media query responsive */
@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}
@media (max-width: 991px) {
    section, footer {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    .tab-style-04 .nav-tabs .nav-item {
        padding: 0 20px;
    }
    .navbar .navbar-nav .dropdown .dropdown-menu a, .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu a, .navbar-full-screen-menu-inner .navbar-nav .dropdown .dropdown-menu a {
        line-height: 22px;
    }
    .navbar .navbar-nav .dropdown .dropdown-menu .mega-menu ul, .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu .mega-menu ul, .navbar-full-screen-menu-inner .navbar-nav .dropdown .dropdown-menu .mega-menu ul {
        padding: 20px 0 0;
    }
    .navbar .navbar-nav .simple-dropdown .dropdown-menu {
        width: 100%;
        padding: 0 15px 15px;
    }
}
@media (max-width: 767px) {
    section, footer {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .tab-style-04 .nav-tabs .nav-item .nav-link {
        line-height: 35px;
    }
}
/* Revolution slider */
.navigation-arrow .tp-parallax-wrap {
    top:inherit !important;
    bottom: 115px !important;
    margin-left: 30px!important;
}
@media (max-width: 1080px) and (min-width: 1024px){
    .product-image-layer {left: 100px;}
}
@media (max-width: 1400px) and (min-width: 1024px) {
    .right-image-layer {right: -200px;}
}
@media (max-width: 991px) and (min-width: 778px) {
    #decor-store-slider_forcefullwidth, #decor-store-slider_wrapper {height: 650px !important;}
    .navigation-arrow .tp-caption { min-height: 90px!important; max-height: 90px!important;}
    .navigation-arrow .tp-parallax-wrap {top:inherit !important; bottom: 90px !important;margin-left: 30px!important;}
}
@media (max-width: 777px){
    .navigation-arrow .tp-parallax-wrap {
        top:inherit !important;
        bottom: 80px !important;
        margin-left: 0!important;
    }
}
@media (max-width: 650px) {
    #decor-store-slider_forcefullwidth, #decor-store-slider_wrapper {height: 750px !important;}
    .navigation-arrow .tp-caption { min-height: 90px!important; max-height: 90px!important;}
    .navigation-arrow .tp-parallax-wrap {top:inherit !important; bottom: 90px !important;margin-left: 30px!important;}
}
@media (max-width: 479px) {
    footer .elements-social.social-icon-style-01 li, footer .elements-social.social-icon-style-02 li, footer .elements-social.social-icon-style-05 li, footer .elements-social.social-icon-style-08 li {
        margin: 0 18px 0 0;
    }
}
@media  (max-width: 991px) and (orientation: landscape) {
    #decor-store-slider_forcefullwidth, #decor-store-slider_wrapper {height: 600px !important;}
    .product-image-layer {width: 600px!important;min-width: 600px!important;max-width: 600px!important; height: auto !important; left: 30px;}
    .shop-button {font-size: 11px!important; padding: 8px 18px 8px 10px!important;}
    .right-image-layer {width: 800px!important; min-width: 800px!important; max-width: 800px!important;}
    .left-column {padding-top: 100px!important;}
    .navigation-arrow .tp-parallax-wrap {z-index: 999999 !important;}
}
@media  (max-width: 991px) and (min-width: 844px) and (orientation: landscape) {
    .right-image-layer {width: 300px!important; min-width: 300px!important; max-width: 300px!important;}
    .rev_row_wrap {width: 60% !important; left: 20% !important; padding-top: 0px!important;}
    .left-column {min-height: 300px !important; max-height: 300px !important;height: 300px !important;}
}
/* ======================================================
   TOPBAR - mobile visibility override
   ====================================================== */
@media (max-width: 767px) {
    header .header-top-bar {
        display: block !important;
        height: auto !important;
    }
    header .header-top-bar + .navbar {
        top: auto;
    }
}

/* TOPBAR - icon color override (base defaults to white) */
.top-bar-light .header-icon .icon > a,
.top-bar-light .header-icon .icon .header-cart > a,
.top-bar-light .header-icon .icon .header-user-icon > a,
.header-search-icon .search-form-icon{
    color: var(--dark-gray);
}
.header-icon .icon .header-language > a, .header-icon .icon .header-cart > a, .header-icon .icon .header-account > a,
.header-search-icon .search-form-icon{
    font-size: 20px;
}
.header-search-icon{
    margin-right:10px;
}
.top-bar-light .header-icon .icon > a:hover,
.top-bar-light .header-icon .icon .header-cart > a:hover {
    color: var(--dark-gray);
    opacity: 0.6;
}

/* ==========================================================
   ZERODNA - Palette colori estratta dal logo aziendale
   Verde brand:  rgb(57,173,82)  -> #39AD52
   Blu brand:    rgb(24,148,189) -> #1894BD
   ========================================================== */
:root {
    --zerodna-green: #39AD52;
    --zerodna-green-dark: #2E8A42;
    --zerodna-green-deep: #163F1F; /* stessa tinta di --zerodna-green, molto più scura: usata per un gradiente a maggior contrasto (es. barra nav categorie) */
    --zerodna-blue: #1894BD;
    --zerodna-blue-dark: #146F91;
    --zerodna-muted: #6B7B75; /* verde-grigio desaturato per stati "non disponibile" */
    --zerodna-dark: #252525;
    --zerodna-dark-light: #2D2D2D;
    --zerodna-red: #E5484D;
    --base-color: var(--zerodna-green);
    --zerodna-light: #edf1f5;
    --zerodna-light-2: #f8f9fa;
}

body{
    color: var(--zerodna-dark);
}

.text-base-color, .btn-link.text-base-color,
.text-green, .btn-link.text-green {
  color: var(--base-color);
}
.text-green-dark, .btn-link.text-green-dark {
  color: var(--zerodna-green-dark);
}
.text-blue, .btn-link.text-blue {
  color: var(--zerodna-blue);
}
.text-blue-dark, .btn-link.text-blue-dark{
  color: var(--zerodna-blue-dark);
}
.text-muted{
    color: var(--zerodna-muted);
}
.bg-base-color{
    background-color: var(--zerodna-green);
}
.bg-green-dark{
    background-color: var(--zerodna-green-dark);
}
.bg-blue{
    background-color: var(--zerodna-blue);
}
.bg-blue-dark{
    background-color: var(--zerodna-blue-dark);
}
.bg-mute{
    background-color: var(--zerodna-muted);
}
.bg-dark{
    background-color: var(--zerodna-dark);
}
.bg-dark-light{
    background-color: var(--zerodna-dark-light);
}
.bg-light{
    background-color: var(--zerodna-light)!important;
}
.bg-light-2{
    background-color: var(--zerodna-light-2)!important;
}

/* ==========================================================
   Badge prodotto (shop-image .lable) - riposizionamento e varianti
   - NEW: spostato in alto a destra, colore blu brand
   - IN OFFERTA (sale): alto a sinistra, colore verde brand
   - ESAURITO (soldout): basso a sinistra, colore neutro/muted
   ========================================================== */
.shop-image .lable.new {
    left: auto;
    top: 7px;
    right: 7px;
    background-color: var(--zerodna-blue);
}
.shop-image .lable.sale {
    left: 0;
    top: 0;
    background-color: var(--golden-yellow);
    border-radius: 0;
    width: 60px;
    height: 60px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.shop-image .lable.sale > span{
    position: absolute;
    top: 22px;
    left: 22px;
    transform: translate(-50%, -50%) rotate(-45deg);
    white-space: nowrap;
    line-height: 1;
    font-size: 10px;
}
.shop-image .lable.soldout {
    left: 7px;
    top: auto;
    bottom: 7px;
    background-color: var(--zerodna-muted);
}

.shop-boxed .shop-box{
    background-color: var(--zerodna-light-2);
}

.page-title-small h1 {
    font-size: 2rem;
    line-height: 2.5rem;
}

.product-price.text-dark-gray{
    color: var(--zerodna-blue);
}
.shop-footer .price{
    height: 20px;
    max-height: 20px;
    overflow: hidden;
}

/* ==========================================================
   ZERODNA - Estensione palette: neutri scuri + pattern
   ========================================================== */

/* Pattern a righe/colonne verticali (tile 9x6px, colori --zerodna-dark / --zerodna-dark-light) */
:root {
    --zerodna-pattern-rows: url('../images/patterns/pattern-rows-zerodna.png');
    --zerodna-pattern-squares: url('../images/patterns/demo-footer-pattern.svg');
}
.bg-zerodna-pattern-rows {
    background-image: var(--zerodna-pattern-rows);
    background-repeat: repeat;
}
.bg-zerodna-pattern-squares{
    background-image: var(--zerodna-pattern-squares);
    background-repeat: repeat;
}

/* ==========================================================
   SHOP - Sidebar filtri come pannello push laterale (mobile)
   Riutilizza il componente "push menu" della libreria base
   (.header-push-button / .push-button / .push-menu / .close-menu),
   gia' gestito da main.js tramite la classe "show-menu" su html/body
   (vedi header-with-push.html e demo-freelancer.html come riferimento).
   ========================================================== */

/* Icona hamburger-to-X: di base e' bianca (pensata per header scuri),
   qui serve scura perche' il pulsante sta su una toolbar chiara */
.shop-filter-toggle .push-button span {
    background-color: var(--zerodna-dark);
}

.archive-prod-title{
    height: 50px;
    max-height: 50px;
    display: block;
    overflow: hidden;
}
a:hover{
    color: var(--zerodna-blue);
}

header .navbar-brand{
    padding: 0;
}

.fancy-text-box-style-zd {
    border-right: 1px solid;
    overflow: hidden;
}
.fancy-text-box-style-zd:last-child {
    border-right: 0;
}

.header-push-button.shop-filter-toggle .push-button {
    position: relative;
    display: block;
    width: 22px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Pulsante "Filtri": visibile solo su mobile (<=768px) */
@media (min-width: 769px) {
    .shop-filter-toggle {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .shop-filter-toggle {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    /* mentre il pannello filtri e' aperto il pulsante si nasconde
       (la chiusura avviene con la "X" dentro il pannello) */
    body.show-menu .shop-filter-toggle {
        display: none !important;
    }
    .fancy-text-box-style-zd {
        border-bottom: 1px solid;
    }
}

/* Pannello filtri (.shop-sidebar-push): su desktop/tablet (>768px)
   torna ad essere la sidebar statica originale, nessuna modifica
   al comportamento attuale */
@media (min-width: 769px) {
    .shop-sidebar-push {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: auto !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
    .shop-sidebar-push .close-menu {
        display: none !important;
    }
}
/* Pannello filtri su mobile (<=768px): larghezza pannello */
@media (max-width: 768px) {
    .shop-sidebar-push {
        max-width: 85vw;
    }
}

/* single-product-simple.html: thumbnail dello swiper prodotto in modalita'
   orizzontale (<=991px, quando main.js cambia la direzione da vertical a
   horizontal via data-thumb-slider-md-direction). Il thumb swiper usa
   "slidesPerView": "auto" sotto i 992px, quindi e' questa regola CSS a
   determinare la dimensione di ogni slide (Swiper non forza piu' una
   larghezza calcolata sul breakpoint). Larghezza e altezza fisse e uguali
   rendono ogni thumbnail un quadrato, con object-fit: cover per evitare
   distorsioni dell'immagine. */
@media (max-width: 991px) {
    .single-product-thumb .slider-vertical .swiper-slide {
        width: 80px !important;
        height: 80px !important;
        flex-shrink: 0;
    }
    .single-product-thumb .slider-vertical .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================
   SHOP - conteggio risultati (p.woocommerce-result-count)
   Markup semplificato ("1–12 di 48") tramite override del template
   woocommerce/loop/result-count.php: qui rimuoviamo solo gli spazi
   di default (margine sotto e a sinistra) del paragrafo.
   ========================================================== */
.woocommerce-result-count {
    margin-bottom: 0;
    margin-left: 0;
}

/* ==========================================================
   SHOP - paginazione troncata (ul.pagination.pagination-style-01)
   Stato "disabled" per: frecce avanti/indietro ai bordi (prima/ultima
   pagina) ed ellissi "…" inserita da ppstore_woocommerce_pagination()
   quando ci sono salti tra i numeri di pagina mostrati.
   ========================================================== */
.pagination-style-01 .page-item.disabled .page-link {
    color: var(--medium-gray);
    cursor: default;
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================
   Prezzo in offerta (<del>/<ins> generati da wc_price()):
   - la riga barrata deve avere lo stesso colore del testo muted
     (di default il browser disegna la linea col colore ereditato
     dal <del>, non da quello impostato sul <bdi> figlio)
   - il prezzo scontato non deve avere la sottolineatura di default
     che i browser applicano al tag <ins>
   - il prezzo precedente barrato è leggermente più piccolo di quello attuale
   ========================================================== */
.price del {
    color: var(--zerodna-muted);
    text-decoration-color: var(--zerodna-muted);
    font-size: 0.7em;
}
.price ins {
    text-decoration: none;
}

/* ==========================================================
   Toolbar single product (prezzo/quantità/brand/pagamenti):
   il separatore superiore (border-top) va mostrato solo su mobile,
   dove i blocchi sono impilati in colonna e serve a distinguerli
   dalla galleria immagini sovrastante.
   ========================================================== */
@media (min-width: 992px) {
    .ppstore-toolbar-row {
        border-top: 0;
    }
}
@media (max-width: 991px) {
    .ppstore-toolbar-row {
        border-top: 1px solid var(--light-medium-gray);
    }
}

/* ==========================================================
   NAVBAR (bg-dark-gray): hamburger, icona di ricerca e icone
   Carrello/Preferiti/Profilo ereditavano un colore scuro pensato
   per contesti chiari (topbar), risultando invisibili sul fondo
   scuro della navbar. Da quando Carrello/Preferiti/Profilo sono
   stati spostati dalla topbar alla navbar (vedi
   template-parts/header-custom.php), servono anche a loro.
   ========================================================== */
.navbar .navbar-toggler-line {
    background-color: var(--white) !important;
}
.navbar .header-search-icon .search-form-icon {
    color: var(--white) !important;
    padding-left: 12px;
}
.navbar .header-icon .icon > a,
.navbar .header-icon .icon .header-cart > a,
.navbar .header-icon .icon .header-account > a {
    color: var(--white) !important;
}
.navbar .header-icon .icon > a:hover,
.navbar .header-icon .icon .header-cart > a:hover,
.navbar .header-icon .icon .header-account > a:hover {
    color: var(--white) !important;
    opacity: 0.7;
}
/* Freccina dropdown (.dropdown-toggle, es. voce "Info"): nessuna libreria
   le assegna un colore proprio (verificato: .dropdown-toggle non esiste
   affatto in style.css), quindi ereditava il colore di testo di default
   del body (--zerodna-dark, #252525) — praticamente nero su nero, dato
   che lo sfondo di questa navbar è --dark-gray (#16202c), anch'esso
   quasi nero. Invisibile per contrasto, non per un problema di markup. */
.navbar.bg-dark-gray .dropdown-toggle {
    color: var(--white);
}

/* ==========================================================
   NAVBAR MOBILE — l'hamburger del menu principale non deve MAI
   "cadere" su una nuova riga sotto il logo (bug osservato: sulla
   riga logo + colonna hamburger + colonna icone ricerca/carrello/
   preferiti/profilo, la somma delle larghezze puo' superare quella
   dello schermo sui telefoni piu' stretti; il flex-wrap fa allora
   andare a capo l'ultimo elemento della riga — l'hamburger, essendo
   l'ultima colonna in ordine visivo su mobile, vedi menu-order in
   header-custom.php — che finisce cosi' visivamente sotto il logo,
   il primo elemento della riga precedente).

   Doppia protezione, applicata sotto i 992px (stesso breakpoint di
   navbar-expand-lg, dove la navbar passa in modalita' mobile):
   1) spazi tra le icone ridotti (progressivamente, sotto i 575px),
      cosi' la somma delle larghezze resta compatibile anche con lo
      schermo piu' stretto realistico (~320px);
   2) flex-wrap: nowrap sulla riga della navbar come rete di
      sicurezza assoluta — anche in un caso limite non previsto,
      l'hamburger non puo' comunque andare a capo (nel peggiore dei
      casi gli elementi si restringono leggermente pur di restare
      su un'unica riga, mai piu' accettabile di un layout spezzato).
   ========================================================== */
.ppstore-header-icons-col .header-icon .header-user-icon {
    margin-left: 40px !important;
}

@media (max-width: 991px) {
    .navbar.bg-dark-gray > .container-fluid {
        flex-wrap: nowrap !important;
    }

    .ppstore-header-icons-col .header-search-icon {
        margin-right: 8px;
    }
    .ppstore-header-icons-col .header-icon .header-cart-icon,
    .ppstore-header-icons-col .header-icon .header-wishlist-icon {
        margin-left: 10px !important;
    }
    .ppstore-header-icons-col .header-icon .header-user-icon {
        margin-left: 22px !important;
    }
    .ppstore-header-icons-col {
        margin-right: 8px !important;
    }
}

@media (max-width: 575px) {
    .ppstore-header-icons-col .header-search-icon {
        margin-right: 6px;
    }
    .ppstore-header-icons-col .header-icon .header-cart-icon,
    .ppstore-header-icons-col .header-icon .header-wishlist-icon {
        margin-left: 6px !important;
    }
    .ppstore-header-icons-col .header-icon .header-user-icon {
        margin-left: 16px !important;
    }
    .ppstore-header-icons-col {
        margin-right: 6px !important;
    }
    header .navbar-brand img {
        max-height: 46px;
        height: 46px;
    }
}

@media (max-width: 375px) {
    header .navbar-brand img {
        max-height: 40px;
        height: 40px;
    }
}

/* ==========================================================
   SHOP - toolbar (risultati / Filtri / ordinamento) su mobile:
   conteggio risultati a sinistra e pulsante Filtri a destra sulla
   stessa riga, select di ordinamento a riga intera subito sotto.
   ========================================================== */
@media (max-width: 575px) {
    .toolbar-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .toolbar-wrapper .woocommerce-result-count-wrapper {
        order: 1;
    }
    .toolbar-wrapper .shop-filter-toggle {
        order: 2;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .toolbar-wrapper .woocommerce-ordering-wrapper {
        order: 3;
        flex-basis: 100%;
        margin: 15px 0 0 0 !important;
    }
}

/* ==========================================================
   SHOP - filtri dinamici (attributi, prezzo): barra dei filtri
   attivi ("chip" rimovibili) sopra la griglia prodotti, e stato
   "selezionato" per la voce corrispondente nella sidebar.
   ========================================================== */
.ppstore-active-filters .ppstore-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--zerodna-light-2);
    border: 1px solid var(--zerodna-muted);
    color: var(--zerodna-dark);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    margin: 0 10px 10px 0;
}
.ppstore-active-filters .ppstore-filter-chip:hover {
    background-color: var(--zerodna-muted);
    color: var(--white);
}
.ppstore-active-filters .ppstore-filter-chip i {
    font-size: 10px;
}
.ppstore-active-filters .ppstore-filter-clear-all {
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    color: var(--zerodna-blue);
    margin-bottom: 10px;
}
.shop-filter li.ppstore-filter-active a {
    font-weight: 700;
    color: var(--zerodna-blue);
}
.shop-filter li.ppstore-filter-active .product-cb.product-category-cb {
    background-color: var(--zerodna-blue);
    border-color: var(--zerodna-blue);
}

/* ==========================================================
   SHOP - filtri dinamici: troncamento visivo "Mostra altri"
   (ppstore_render_attribute_filter_block(), soglia
   ppstore_max_filter_terms_visible() in inc/product-filters.php).
   I termini oltre soglia restano nel markup (nessuna perdita SEO/
   funzionale, il link resta cliccabile) ma partono nascosti; il blocco
   .ppstore-attribute-filter riceve la classe "ppstore-filter-expanded"
   al click sul link sottostante (vedi assets/js/main.js). Senza JS la
   lista resta comunque completa e navigabile (nessuna regressione).
   ========================================================== */
.ppstore-attribute-filter .shop-filter li.ppstore-term-extra {
    display: none;
}
.ppstore-attribute-filter.ppstore-filter-expanded .shop-filter li.ppstore-term-extra {
    display: list-item;
}
.ppstore-filter-toggle-more {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zerodna-blue);
    cursor: pointer;
    text-decoration: underline;
}
.ppstore-filter-toggle-more:hover {
    color: var(--zerodna-blue-dark);
}

/* ==========================================================
   TOPBAR - contatore preferiti (badge nell'header)
   NB: NON deve condividere la classe "cart-count" con il badge del
   carrello: WooCommerce aggiorna il carrello via "fragment refresh"
   (AJAX), che sostituisce OGNI elemento con classe .cart-count nella
   pagina con l'HTML del frammento carrello — sovrascrivendo anche
   questo badge con il valore/markup sbagliato. Selettore dedicato:
   ========================================================== */
.header-wishlist-icon .wishlist-count {
    background-color: var(--zerodna-red);
    position: absolute;
    top: -7px;
    right: -11px;
    width: 17px;
    height: 17px;
    font-weight: 600;
    text-align: center;
    font-size: 10px;
    line-height: 18px;
    color: var(--white);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

/* Nascosto finché lo script non ha impostato il valore reale (localStorage),
   per evitare lo sfarfallio "0 -> valore vero" tra il render server-side
   (sempre 0, perché il dato non esiste lato server) e l'esecuzione dello
   script. Rimossa via JS (classList.remove) in refreshUI(). */
.ppstore-count-pending {
    visibility: hidden;
}

/* ==========================================================
   AVVISI WOOCOMMERCE NATIVI (successo / info / errore) — stampati
   da wc_print_notices() / woocommerce_output_all_notices() sugli
   hook standard (vedi inc/woocommerce.php: woocommerce_before_shop_loop,
   woocommerce_before_single_product, woocommerce_before_cart,
   woocommerce_before_checkout_form, + wp_body_open per le altre pagine).

   Stile ripreso da "Alert box style 03" della libreria base (vedi
   D:\...\html\element-alert-boxes.html): sfondo pieno colorato, icona
   a sinistra via font bootstrap-icons (già incluso negli asset del
   tema), testo bianco. A differenza del demo NESSUN pulsante di
   chiusura: gli avvisi WooCommerce nativi non sono dismissable via JS
   (diverso dal "ppstore-store-notice" sopra, che è invece un banner
   custom con la sua logica di dismiss in localStorage).

   Margini verticali simmetrici (margin-top/bottom) così l'avviso
   risulta sempre ben distanziato sia da ciò che lo precede
   (titolo pagina, filtri, ecc.) sia da ciò che segue (form carrello,
   riepilogo prodotto, ecc.), indipendentemente dal punto esatto in cui
   viene stampato nel markup.
   ========================================================== */
.woocommerce-notices-wrapper,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    position: relative;
    z-index: 20;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: block;
    list-style: none;
    margin: 25px 0;
    padding: 18px 30px 18px 55px;
    border: 0;
    border-radius: 4px;
    color: var(--white);
    font-size: 15px;
    line-height: 24px;
}
.woocommerce-message:before,
.woocommerce-info:before,
.woocommerce-error:before {
    font-family: bootstrap-icons;
    display: inline-block;
    position: absolute;
    left: 25px;
    top: 18px;
    font-size: 18px;
    color: var(--white);
}
.woocommerce-message {
    background-color: var(--zerodna-green);
}
.woocommerce-message:before {
    content: "\f26b";
}
.woocommerce-info {
    background-color: var(--zerodna-blue);
}
.woocommerce-info:before {
    content: "\f431";
}
.woocommerce-error {
    background-color: var(--zerodna-red);
}
.woocommerce-error:before {
    content: "\f623";
}
/* .woocommerce-error è una <ul>: azzera lo stile lista nativo, ogni <li>
   è una riga di errore (WooCommerce può stamparne più di una insieme) */
.woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-error li + li {
    margin-top: 6px;
}
/* Pulsante azione opzionale dentro .woocommerce-message (es. "Visualizza
   carrello" dopo un add-to-cart) — bordo bianco trasparente, coerente
   con lo sfondo pieno colorato invece dei bottoni scuri standard del tema */
.woocommerce-message a.button.wc-forward {
    float: right;
    margin-left: 20px;
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 26px;
    color: var(--white);
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.woocommerce-message a.button.wc-forward:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--white);
    color: var(--white);
}
@media (max-width: 575px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        margin: 18px 0;
        padding: 15px 20px 15px 48px;
        font-size: 14px;
        line-height: 22px;
    }
    .woocommerce-message:before,
    .woocommerce-info:before,
    .woocommerce-error:before {
        left: 18px;
        top: 15px;
        font-size: 16px;
    }
    .woocommerce-message a.button.wc-forward {
        float: none;
        display: inline-block;
        margin: 12px 0 0 0;
    }
}

.fulldescrprod > *,
.fulldescrprod  *{
    width: 100%;
    max-width: 100%;
}

/* ==========================================================
   HOME - Hero slider (front-page.php)
   Slide a colonna singola: immagine di sfondo a tutto schermo
   (.cover-background sul contenitore dello slide) + box testo
   in overlay con effetto "vetro" (.blur-box del tema + scrim
   scuro brand semitrasparente definito qui sotto).

   ALTEZZA: sostituisce .full-screen (100vh) con un'altezza fissa,
   modulabile per singolo breakpoint. Breakpoint allineati a quelli
   nativi del tema (vedi style.css/responsive.css: 1600/1399/1199/
   991/767/575px). Per cambiare l'altezza su una risoluzione,
   modificare solo il valore "height" del blocco corrispondente.
   ========================================================== */
.hero-slider-section .hero-slider {
    height: 760px; /* >= 1600px (desktop molto grandi) */
}
@media (max-width: 1600px) {
    .hero-slider-section .hero-slider { height: 700px; }
}
@media (max-width: 1399px) {
    .hero-slider-section .hero-slider { height: 650px; }
}
@media (max-width: 1199px) {
    .hero-slider-section .hero-slider { height: 600px; }
}
@media (max-width: 991px) {
    .hero-slider-section .hero-slider { height: 560px; }
}
@media (max-width: 767px) {
    .hero-slider-section .hero-slider { height: 520px; }
}
@media (max-width: 575px) {
    .hero-slider-section .hero-slider { height: 480px; }
}

/* Box testo "glass card": il tema fornisce solo il backdrop-filter
   tramite .blur-box (senza colore di sfondo); qui aggiungiamo lo
   sfondo (blu brand ZeroDNA al 55% di opacita') su cui applicarlo
   e il colore testo bianco. Il box occupa tutta l'altezza utile
   dello slider (h-100 nel markup, ereditata dalla colonna Bootstrap
   che per default si stira all'altezza della row); il contenuto
   resta centrato verticalmente al suo interno (d-flex flex-column
   justify-content-center nel markup). */
.hero-slide-textbox {
    background-color: rgba(24, 148, 189, 0.55); /* var(--zerodna-blue) #1894BD al 55% */
    color: var(--white);
    max-width: 620px;
}
.hero-slide-textbox span,
.hero-slide-textbox div {
    color: inherit;
}

/* ==========================================================
   BRAND ARCHIVE (taxonomy-pwb-brand.php) — blocco identità
   brand (logo circolare + descrizione) sotto il page title.
   ========================================================== */
.ppstore-brand-hero-logo {
    width: 140px;
    height: 140px;
    padding: 15px;
}
.ppstore-brand-hero-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================
   BRAND INDEX (page-brand.php) — card brand nella griglia
   alfabetica, indice di navigazione rapida A-Z, e separatore
   di gruppo lettera.
   ========================================================== */
.ppstore-brand-card {
    transition: 0.3s;
    border: 1px solid transparent;
}
.ppstore-brand-card:hover {
    border-color: var(--zerodna-blue);
    transform: translateY(-3px);
}
.ppstore-brand-logo-wrap {
    width: 100%;
    height: 60px;
}
.ppstore-brand-logo {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}
.ppstore-az-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 4px 8px;
    border-radius: 50%;
    background-color: var(--zerodna-light-2);
    color: var(--zerodna-dark);
    font-size: 14px;
}
.ppstore-az-nav-item:hover {
    background-color: var(--zerodna-blue);
    color: var(--white);
}
.ppstore-brand-group-title {
    font-size: 22px;
    line-height: 1;
    min-width: 30px;
}
.ppstore-brand-group-line {
    height: 1px;
    background-color: var(--light-medium-gray);
}

/* ==========================================================
   HOME - Marquee loghi brand (front-page.php, sezione in fondo
   prima della barra "Free shipping / Store locator..."):
   altezza fissa, la larghezza segue l'aspect ratio del logo.
   ========================================================== */
.ppstore-brand-marquee-logo {
    height: 100px;
    max-height: 100px;
    width: auto;
}
/* La libreria base non applica padding/margin proprio a queste slide:
   la distanza visibile dipendeva dalla larghezza fissa di ogni cella
   swiper (slidesPerView numerico), con il logo (larghezza automatica)
   centrato al suo interno — non da uno spazio reale tra un logo e
   l'altro. Passando a "slidesPerView": "auto" (vedi data-slider-options
   in front-page.php) ogni slide si restringe alla larghezza reale del
   logo, e lo spazio effettivo tra un logo e il successivo è controllato
   qui in modo esplicito e ridotto.
   Stesso pattern già in uso altrove nel tema (thumbnail prodotto,
   single-product-simple.html) per "slidesPerView": "auto". */
.ppstore-brand-marquee .swiper-slide {
    width: auto !important;
}

/* ==========================================================
   HOME - "Naviga per categoria" (front-page.php): card per
   ciascuna categoria principale, con icona generica circolare
   ed elenco sottocategorie (riusa lo stile ".shop-filter" già
   usato in sidebar per le liste filtro con conteggio ".item-qty").
   ========================================================== */
.ppstore-category-card {
    transition: 0.3s;
    box-shadow: 0 0 0 1px var(--zerodna-light);
}
.ppstore-category-card:hover {
    box-shadow: 0 0 0 1px var(--zerodna-blue);
}
.ppstore-category-icon {
    width: 46px;
    height: 46px;
}
.ppstore-category-icon i {
    font-size: 20px;
}

/* ==========================================================
   AVVISO NEGOZIO (store notice) — barra sitewide subito sotto
   l'header, contenuto gestito da ACF (Opzioni sito > Avviso negozio:
   claim_shop_active / claim_shop_text). Markup in
   template-parts/header-custom.php, riusa il pattern ".alert
   .alert-dismissable" della libreria base (vedi element-alert-boxes.html).

   La classe "top-space-margin" fa si' che main.js applichi dinamicamente
   il margine per liberare l'header (fixed) — vedi getHeaderHeight() in
   assets/js/main.js. Di conseguenza "top-space-margin" e' condizionale
   anche sulla section di ppstore_page_title_section() in
   inc/custom-functions.php: quando l'avviso e' attivo se ne occupa la
   barra, quando e' disattivato torna sulla section (vedi
   ppstore_store_notice_is_active() in inc/custom-functions.php).
   ========================================================== */
.ppstore-store-notice {
    width: 100%;
    background-color: var(--zerodna-blue-dark);
    position: relative;
    z-index: 91;
}
.ppstore-store-notice .alert {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 12px 50px 12px 20px;
    color: var(--white);
}
.ppstore-store-notice-icon {
    color: var(--white);
    margin-right: 8px;
    font-size: 16px;
    vertical-align: -2px;
}
.ppstore-store-notice-text {
    color: var(--white);
    font-size: 14px;
    letter-spacing: 0.2px;
}
.ppstore-store-notice .close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--white);
    opacity: 0.85;
}
.ppstore-store-notice .close:hover {
    opacity: 1;
}
@media (max-width: 767px) {
    .ppstore-store-notice .alert {
        padding: 10px 42px 10px 15px;
    }
    .ppstore-store-notice-text {
        font-size: 12px;
        line-height: 1.4;
    }
    .ppstore-store-notice-icon {
        display: none;
    }
    .search-form-wrapper .search-close {
        top: -8px;
        right: 3px;
    }
}

/* ==========================================================
   NAV CATEGORIE (template-parts/header-custom.php) — barra
   subito sotto l'header, fuori da <header> di proposito (vedi
   commento nel template). Sfondo a gradiente verde brand (invece
   del bg-white inline nel markup, rimosso: il background-image
   qui sotto disegna comunque sopra qualunque background-color,
   quindi avrebbe funzionato anche lasciandolo, ma è più pulito
   toglierlo). Nomi categoria sempre capitalizzati e bianchi
   (leggibili sul verde); voci principali separate da un bordo
   verticale; sottomenu (dropdown sottocategorie) con padding
   ridotto, font più piccolo e bordo tra una voce e l'altra.
   ========================================================== */
.ppstore-categories-bar.navbar {
    padding: 0;
    background-image: linear-gradient(135deg, var(--zerodna-green-deep) 0%, var(--zerodna-green) 100%);
}
.ppstore-categories-bar .navbar-nav .nav-link {
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1;
    padding: 13px 16px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ppstore-categories-bar .dropdown-toggle {
    color: var(--white);
}
.ppstore-categories-bar .navbar-nav .nav-item:hover .nav-link,
.ppstore-categories-bar .navbar-nav .nav-item.active .nav-link {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--white);
    opacity: 1;
}

/* Voci principali separate da un bordo verticale (nessun bordo dopo l'ultima) */
.ppstore-categories-bar .navbar-nav .nav-item {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.ppstore-categories-bar .navbar-nav .nav-item:last-child {
    border-right: 0;
}

/* Sottomenu (dropdown sottocategorie): padding 10px su tutti i lati
   (né sul li di libreria, che di suo ne ha uno largo e va azzerato,
   né sull'a, dove impostiamo il 10px), font più piccolo, bordo tra
   una voce e l'altra (nessuno dopo l'ultima), colore di default
   --dark-gray. L'effetto "scorrimento" della libreria all'hover
   (padding-left: 3px in più, vedi style.css) viene neutralizzato
   esplicitamente: il padding-left in hover resta identico a quello
   di base, nessuno spostamento del testo al passaggio del mouse. */
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu {
    padding: 6px 0;
    width: 220px;
    /* La libreria azzera border-radius su tutto il dropdown (style.css);
       qui lo si riattiva solo sui due angoli inferiori, come richiesto —
       l'ombra è invece la classe di tema "box-shadow-extra-large",
       aggiunta direttamente in header-custom.php. */
    border-radius: 0 0 8px 8px;
}
/* Sottocategorie numerose (classe aggiunta in header-custom.php quando
   sono più di 6, es. "Pesca"): due colonne invece di un'unica lista
   lunga in verticale. */
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu.ppstore-dropdown-2col {
    width: 400px;
    column-count: 2;
    column-gap: 0;
}
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu.ppstore-dropdown-2col li {
    break-inside: avoid;
}
/* La classe di tema "box-shadow-extra-large" (aggiunta in header-custom.php)
   ha specificità inferiore alla regola di libreria
   ".navbar .navbar-nav .simple-dropdown .dropdown-menu" (che ha già un
   proprio box-shadow) e perderebbe il confronto: qui replichiamo lo stesso
   valore della classe con un selettore più specifico, per garantire che sia
   davvero quella l'ombra visibile. */
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu.box-shadow-extra-large {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu li {
    padding: 0;
    border-bottom: 1px solid var(--zerodna-light);
}
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu li:last-child {
    border-bottom: 0;
}
.ppstore-categories-bar .navbar-nav .simple-dropdown .dropdown-menu li a,
.ppstore-categories-bar .navbar-nav .dropdown .dropdown-menu a {
    font-size: 12.5px;
    padding: 10px;
    color: var(--dark-gray);
}
.ppstore-categories-bar .navbar-nav .dropdown .dropdown-menu li a:hover,
.ppstore-categories-bar .navbar-nav .dropdown .dropdown-menu a:hover {
    padding-left: 10px;
    color: var(--dark-gray);
}

/* ==========================================================
   NAV CATEGORIE — toggle mobile "Categorie" + hamburger dedicato.
   Stessa animazione a X della libreria (.header-push-button
   .push-button span), ma scoped su classi proprie
   (.ppstore-categories-hamburger / .show-categories-menu) per non
   condividere lo stato globale "show-menu" con il pannello filtri
   dello shop — vedi nota in inc/enqueue.php
   (ppstore_categories_push_menu_script()).
   ========================================================== */
.ppstore-categories-toggle {
    cursor: pointer;
}
.ppstore-categories-hamburger {
    position: relative;
    display: block;
    width: 22px;
    height: 14px;
}
.ppstore-categories-hamburger span {
    background: var(--white);
    height: 2px;
    width: 22px;
    display: block;
    border-radius: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(0deg);
    transition: 0.25s;
}
.ppstore-categories-hamburger span:nth-child(2),
.ppstore-categories-hamburger span:nth-child(3) {
    top: 6px;
}
.ppstore-categories-hamburger span:nth-child(4) {
    top: 12px;
    width: 14px;
    left: -8px;
}
.show-categories-menu .ppstore-categories-hamburger span:nth-child(1) {
    top: 7px;
    width: 0%;
}
.show-categories-menu .ppstore-categories-hamburger span:nth-child(2) {
    transform: rotate(45deg);
}
.show-categories-menu .ppstore-categories-hamburger span:nth-child(3) {
    transform: rotate(-45deg);
}
.show-categories-menu .ppstore-categories-hamburger span:nth-child(4) {
    top: 7px;
    width: 0%;
}

/* ==========================================================
   NAV CATEGORIE — push menu mobile (.ppstore-categories-push).
   Riusa la classe di libreria ".push-menu" (SENZA il modificatore
   ".push-menu-left": resta quindi sulla variante di default,
   ancorata a destra — il pannello filtri shop usa invece
   ".push-menu-left", ancorato a sinistra, così i due si
   distinguono anche visivamente) per posizionamento/transizione/
   icona di chiusura (già off-screen di default, nessuna regola
   aggiuntiva necessaria per quello).

   Il trigger di apertura è SCOPED sulla nostra classe di stato
   ("show-categories-menu") invece della classe globale "show-menu"
   già usata dal pannello filtri shop — stesso identico
   comportamento visivo di quest'ultimo (vedi ".show-menu .push-menu"
   in style.css), solo con un nome diverso per evitare che i due
   pannelli si aprano insieme quando coesistono nella stessa pagina
   (es. archivio prodotti).

   ATTENZIONE: portando ancora la classe di libreria ".push-menu",
   il nostro pannello risponderebbe COMUNQUE anche alla classe
   globale "show-menu" (es. cliccando "Filtri" nello shop, che la
   attiva) — .show-menu .push-menu {right:0;...} in style.css non fa
   distinzione tra pannelli. Le regole ".show-menu .ppstore-categories-push"
   qui sotto neutralizzano esplicitamente questo caso (con !important,
   dato che la regola di libreria che vogliamo sovrascrivere ha la
   stessa specificità della nostra).
   ========================================================== */
.show-categories-menu {
    overflow: hidden;
}
.show-menu .ppstore-categories-push {
    right: -100% !important;
    box-shadow: none !important;
}
.show-menu .ppstore-categories-push .close-menu {
    opacity: 0 !important;
    visibility: hidden !important;
}
.show-categories-menu .ppstore-categories-push {
    right: 0 !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3) !important;
}
.show-categories-menu .ppstore-categories-push .close-menu {
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
    transform: scale(1);
    transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: 0.5s;
}
.ppstore-categories-push-list > li {
    padding-bottom: 18px;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--zerodna-light);
}
.ppstore-categories-push-list > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    border-bottom: 0;
}
.ppstore-categories-push-list > li > a {
    font-size: 18px;
}
.ppstore-categories-push-list ul li a {
    font-size: 13.5px;
}


.header-with-topbar .navbar.bg-dark-gray .navbar-nav .nav-link {
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 600;
    padding: 18px;
}
.header-with-topbar .navbar.bg-dark-gray .navbar-nav > li.nav-item {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.header-with-topbar .navbar.bg-dark-gray .navbar-nav > li.nav-item:last-child {
    border-right: 0;
}

.woocommerce-breadcrumb .breadcrumb-separator{
    padding: 0 215px;
}

/* ==========================================================
   SHOP - Nasconde il titolo pagina (.page-title-left-alignment,
   ppstore_page_title_section()) SOLO sulla vista Shop pura (/negozio/),
   dove la griglia categorie (ppstore_render_shop_categories_grid()) fa
   gia' da apertura visiva alla pagina. Classe body "ppstore-shop-main"
   esclusiva di is_shop() (vedi ppstore_body_classes() in inc/enqueue.php),
   distinta da "ppstore-shop" che copre anche categoria/tag: su quelle
   viste il titolo resta visibile.
   ========================================================== */
body.ppstore-shop-main .page-title-left-alignment {
    display: none;
}

/* ==========================================================
   SHOP - Titolo categoria nella griglia (ppstore_render_shop_categories_grid()):
   font-size in rem, MAI a capo (white-space: nowrap) e MAI troncato
   (nessun overflow:hidden/ellipsis) — la dimensione scende per step in
   corrispondenza dei breakpoint in cui cambia anche il numero di colonne
   (row-cols-1/sm-2/lg-3), cosi' il testo resta sempre su una riga anche
   per i nomi categoria piu' lunghi (es. "Abbigliamento caccia").
   ========================================================== */
.ppstore-shop-cat-title {
    font-size: 1.125rem; /* >=1200px: 3 colonne, container piu' largo */
    white-space: nowrap;
}
.icon-with-text-style-02 .feature-box-content {
    min-width: 0; /* permette al testo nowrap di restare confinato nel box invece di sfondarlo in larghezza */
}
@media (max-width: 1199px) and (min-width: 992px) {
    .ppstore-shop-cat-title {
        font-size: 0.95rem; /* ancora 3 colonne ma container piu' stretto */
    }
}
@media (max-width: 991px) and (min-width: 576px) {
    .ppstore-shop-cat-title {
        font-size: 1.1rem; /* 2 colonne: box di nuovo piu' larghi */
    }
}
@media (max-width: 575px) {
    .ppstore-shop-cat-title {
        font-size: 1.15rem; /* 1 colonna: box a piena larghezza */
    }
}

/* ==========================================================
   Single product: frecce di navigazione swiper (main slider +
   thumbnail slider) in woocommerce/single-product.php.
   Il main slider usa gia' le classi standard Crafto
   (slider-product-next/prev) posizionate di default dallo
   swiper stesso (position:absolute, top:50%, left/right:10px
   ereditati da vendors.css/style.css): nessuna regola extra
   necessaria per quelle frecce.
   Le frecce del thumbnail slider (swiper-thumb-next/prev) sono
   invece nuove (non esistono nella libreria di base Crafto) e
   vanno posizionate ad hoc:
   - da 992px in su lo slider e' verticale => frecce sovrapposte
     in alto/basso, centrate orizzontalmente sulla colonna;
   - sotto i 992px main.js commuta la direzione in orizzontale
     (data-thumb-slider-md-direction) => frecce sui lati
     sinistro/destro della riga di thumbnail, centrate in
     verticale.
   ========================================================== */
.single-product-thumb .swiper-thumb-prev,
.single-product-thumb .swiper-thumb-next {
    width: 28px;
    height: 28px;
    z-index: 10;
}
@media (min-width: 992px) {
    /* Il centro visivo dello slider verticale non coincide con il centro
       della colonna .single-product-thumb: style.css imposta
       ".single-product-thumb .slider-vertical { left: 15px; }" (offset
       fisso indipendente dalla larghezza colonna), quindi il centraggio
       va compensato di +15px rispetto al 50% della colonna. */
    .single-product-thumb .swiper-thumb-prev,
    .single-product-thumb .swiper-thumb-next {
        left: calc(50% + 15px);
        right: auto;
        transform: translateX(-50%);
        margin-top: 0;
    }
    .single-product-thumb .swiper-thumb-prev {
        top: 0;
    }
    .single-product-thumb .swiper-thumb-next {
        top: auto;
        bottom: 0;
    }
}
@media (max-width: 991px) {
    /* .single-product-thumb non ha un'altezza propria (l'unico figlio e'
       posizionato in assoluto), quindi senza un'altezza esplicita le
       frecce si centrerebbero (top:50%) su un box piu' alto/collassato
       rispetto alla riga di thumbnail realmente visibile, che e' alta
       80px (vedi regola .swiper-slide qui sotto). Impostando la stessa
       altezza sul contenitore, il centraggio verticale delle frecce
       torna a corrispondere alla riga di thumbnail. */
    .single-product-thumb {
        height: 80px;
    }
    .single-product-thumb .swiper-thumb-prev,
    .single-product-thumb .swiper-thumb-next {
        top: 50%;
        transform: translateY(-50%);
    }
    .single-product-thumb .swiper-thumb-prev {
        left: 0;
    }
    .single-product-thumb .swiper-thumb-next {
        right: 0;
        left: auto;
    }
}

/* Main slider prodotto: su desktop la colonna thumbnail (.single-product-thumb,
   col-lg-1) e' affiancata a sinistra della colonna immagine principale
   (.product-image, col-lg-11, ps-30px) e viene dopo nel DOM, quindi senza
   z-index la freccia "prev" (posizionata di default a left:10px, cioe'
   dentro il padding-left della colonna immagine) finisce coperta dalla
   colonna thumbnail. Si sposta la freccia a filo del padding (30px, come
   il ps-30px della colonna) e si alza lo z-index per sicurezza. */
@media (min-width: 992px) {
    .product-image .slider-product-prev,
    .product-image .slider-product-next {
        z-index: 10;
    }
    .product-image .slider-product-prev {
        left: 25px;
    }
}


/* ==========================================================
   CARRELLO — selettore quantità del blocco Cart (Gutenberg)
   La pagina Carrello usa il blocco nativo WooCommerce Blocks
   (markup .wc-block-components-quantity-selector), non lo shortcode
   classico [woocommerce_cart]: quel markup/JS è generato e gestito
   interamente da WooCommerce Blocks, qui interveniamo solo via CSS,
   allineandolo allo stile ".quantity" già in uso altrove nel tema
   (es. single-product.php).

   Nel DOM l'ordine reale è: input, poi bottone "meno", poi bottone
   "più" (per accessibilità); l'ordine VISIVO (meno a sinistra, input al
   centro, più a destra) è ottenuto qui sotto con flex "order" + i due
   bottoni posizionati in assoluto ai due lati.
   ========================================================== */
.wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 115px;
    height: 42px;
    border: 1px solid var(--light-medium-gray);
    border-radius: 5px;
    background-color: var(--white);
    overflow: hidden;
}
.wc-block-components-quantity-selector__input {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    color: var(--zerodna-dark) !important;
    font-size: 14px;
    line-height: normal;
    /* padding laterale = larghezza dei due bottoni assoluti, cosi' il
       numero non finisce mai sotto/dietro a "meno"/"piu'" */
    padding: 0 34px !important;
    -moz-appearance: textfield;
}
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wc-block-components-quantity-selector__button {
    position: absolute;
    top: 0;
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    color: var(--zerodna-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.wc-block-components-quantity-selector__button--minus {
    order: 1;
    left: 0;
}
.wc-block-components-quantity-selector__button--plus {
    order: 3;
    right: 0;
}
.wc-block-components-quantity-selector__button:hover {
    color: var(--zerodna-blue);
}
.wc-block-components-quantity-selector__button:disabled {
    opacity: 0.35;
    cursor: default;
}

.wc-block-cart-items__row {
    border-top: 1px solid #c1c1c1;
}
 table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    color: var(--zerodna-green);
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.insurance_checkout_advice{
    padding: 10px 15px;
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
}

.ppstore-categories-bar .navbar-nav .nav-item.wagc{
    background-image: linear-gradient(135deg, #af843b 0%, #eba946 100%);
}

.ppstore-whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 999;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--zerodna-green);
    color: var(--white);
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.ppstore-whatsapp-float:hover {
    background-color: var(--zerodna-green-dark);
    color: var(--white);
    transform: translateY(-3px);
}
@media (max-width: 575px) {
    .ppstore-whatsapp-float {
        right: 15px;
        bottom: 15px;
        width: 48px;
        height: 48px;
        font-size: 26px;
    }
}
/* ==========================================================
   SOCIAL — badge circolari colorati (social-icon-style-03,
   usato in page-contatti.php). La libreria di base copre già i
   colori brand per facebook/instagram/youtube; TikTok non esiste
   nella libreria (template precedente alla piattaforma) —
   replichiamo qui lo stesso pattern: sfondo colore brand a riposo,
   testo colore brand su sfondo bianco in hover (coerente con
   .social-icon-style-03 ul li a:hover, che porta lo sfondo a
   bianco per tutti i network).
   ========================================================== */
.social-icon-style-03 ul li a.tiktok {
    background-color: #000000;
}
.elements-social .tiktok:hover {
    color: #000000;
}

/* ==========================================================
   404 (404.php) — numero grande decorativo sopra il titolo,
   colore brand su sfondo scuro a pattern. Scala per breakpoint
   così da restare leggibile e proporzionato anche su mobile
   (nessuna regola responsive nel markup stesso).
   ========================================================== */
.ppstore-404-number {
    font-size: 180px;
    line-height: 1;
}
@media (max-width: 991px) {
    .ppstore-404-number {
        font-size: 130px;
    }
}
@media (max-width: 575px) {
    .ppstore-404-number {
        font-size: 90px;
    }
}

/* ==========================================================
   THANK YOU PAGE (woocommerce/checkout/thankyou.php)
   Prima di questa modifica queste classi non avevano ALCUNA
   regola CSS: meta ordine, tabella e indirizzi rendevano con lo
   stile grezzo del browser (nessun bordo/spaziatura/tipografia
   del tema — i CSS nativi WooCommerce sono disattivati di
   proposito, vedi woocommerce_enqueue_styles in inc/woocommerce.php).
   ========================================================== */

/* Riquadri "Ordine n. / Data / Totale / Pagamento" */
.ppstore-thankyou-meta-box {
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 6px;
    padding: 18px 10px;
    height: 100%;
}
.ppstore-thankyou-meta-icon {
    display: block;
    font-size: 20px;
    color: var(--zerodna-green);
    margin-bottom: 8px;
}
.ppstore-thankyou-meta-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--zerodna-muted);
    margin-bottom: 4px;
}
.ppstore-thankyou-meta-value {
    display: block;
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--zerodna-dark);
}

/* Dati bancari bonifico (BACS) — markup nativo WooCommerce (non generato
   da thankyou.php: hook woocommerce_thankyou_bacs), stesso trattamento a
   card delle altre sezioni della pagina. */
.woocommerce-bacs-bank-details {
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 6px;
    padding: 25px 30px;
}
.woocommerce-bacs-bank-details h2,
.wc-bacs-bank-details-heading {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--zerodna-dark);
    margin-bottom: 15px;
}
.woocommerce-bacs-bank-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-bacs-bank-details ul li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--zerodna-muted);
    border-bottom: 1px solid var(--zerodna-light);
}
.woocommerce-bacs-bank-details ul li:last-child {
    border-bottom: 0;
}
.woocommerce-bacs-bank-details ul li strong {
    color: var(--zerodna-dark);
}

/* Tabella "Dettagli ordine" — sopra la base Bootstrap ".table" (aggiunta
   anche lei al markup, prima assente: senza non riceveva nemmeno lo
   stile generico di libreria per le tabelle). */
.ppstore-order-table {
    margin-bottom: 0;
}
.ppstore-order-table thead th {
    background-color: var(--zerodna-light-2);
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--zerodna-dark);
    border-bottom-width: 1px;
}
.ppstore-order-table td,
.ppstore-order-table th {
    padding: 14px 15px;
    vertical-align: middle;
    border-color: var(--zerodna-light);
}
.ppstore-order-table tbody td.product-name a {
    color: var(--zerodna-dark);
    font-weight: 600;
}
.ppstore-order-table tbody td.product-name .wc-item-meta {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 12.5px;
    color: var(--zerodna-muted);
    list-style: none;
    padding: 0;
}
.ppstore-order-table tfoot th,
.ppstore-order-table tfoot td {
    border-top: 1px solid var(--zerodna-light);
    border-bottom: 0;
}
.ppstore-order-table tfoot tr:last-child th,
.ppstore-order-table tfoot tr:last-child td {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--zerodna-dark);
}

/* Indirizzi fatturazione/spedizione */
.ppstore-address {
    line-height: 1.7;
}

/* ==========================================================
   MY ACCOUNT (area riservata cliente) — nav, link di contenuto,
   tabella ordini, indirizzi, form e controlli nativi WooCommerce.
   Prima di questa modifica NESSUNA di queste classi aveva CSS: i
   template nativi WooCommerce sono usati quasi ovunque qui (solo
   my-account.php / navigation.php / form-login.php sono
   overridden), e i CSS nativi WooCommerce sono disattivati di
   proposito (vedi woocommerce_enqueue_styles in inc/woocommerce.php)
   — da qui nav/tabella/indirizzi/checkbox tutti privi di stile.
   ========================================================== */

/* ── Nav laterale (template-parts già overridden: navigation.php) ── */
.ppstore-account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    overflow: hidden;
}
.ppstore-account-nav li {
    border-bottom: 1px solid var(--zerodna-light);
}
.ppstore-account-nav li:last-child {
    border-bottom: 0;
}
.ppstore-account-nav li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--zerodna-dark);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ppstore-account-nav li a i {
    margin-right: 12px;
    font-size: 16px;
    color: var(--zerodna-muted);
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.ppstore-account-nav li a:hover {
    background-color: var(--zerodna-light-2);
    color: var(--zerodna-green-dark);
}
.ppstore-account-nav li a:hover i {
    color: var(--zerodna-green-dark);
}
.ppstore-account-nav li.is-active a {
    background-color: var(--zerodna-green);
    color: var(--white);
}
.ppstore-account-nav li.is-active a i {
    color: var(--white);
}
/* "Esci" evidenziato in rosso all'hover, per distinguerlo dalle altre voci */
.ppstore-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background-color: rgba(229, 72, 77, 0.08);
    color: var(--zerodna-red);
}
.ppstore-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover i {
    color: var(--zerodna-red);
}

/* ── Link generici nel contenuto (testo di benvenuto dashboard,
   "Ordini recenti"/"indirizzi"/"dettagli dell'account" ecc., link
   "Modifica" degli indirizzi) — esclusi i pulsanti veri, che hanno
   già il proprio trattamento più sotto. Selettore corretto sulla
   classe REALE del wrapper contenuto (".ppstore-account-content",
   vedi woocommerce/myaccount/my-account.php) — non
   ".woocommerce-MyAccount-content", che qui non esiste mai: il
   nostro my-account.php override usa un proprio nome di classe. ── */
.ppstore-account-content a:not(.button):not(.woocommerce-Button) {
    color: var(--zerodna-green);
    text-decoration: underline;
}
.ppstore-account-content a:not(.button):not(.woocommerce-Button):hover {
    color: var(--zerodna-green-dark);
}

/* ── Tabella storico ordini (woocommerce/myaccount/orders.php, non
   overridden: markup nativo WooCommerce) ── */
.woocommerce-orders-table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    overflow: hidden;
}
.woocommerce-orders-table.shop_table thead th {
    background-color: var(--zerodna-light-2);
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--zerodna-dark);
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--light-medium-gray);
}
.woocommerce-orders-table.shop_table tbody td {
    padding: 14px 15px;
    font-size: 14px;
    color: var(--zerodna-dark);
    border-top: 1px solid var(--zerodna-light);
    vertical-align: middle;
}
.woocommerce-orders-table.shop_table tbody tr:hover {
    background-color: var(--zerodna-light-2);
}

/* Badge stato ordine (<mark class="order-status status-...">) */
.woocommerce-orders-table__cell-order-status mark {
    display: inline-block;
    background-color: var(--zerodna-light);
    color: var(--zerodna-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}
.woocommerce-orders-table__cell-order-status mark.status-completed {
    background-color: rgba(57, 173, 82, 0.12);
    color: var(--zerodna-green-dark);
}
.woocommerce-orders-table__cell-order-status mark.status-processing {
    background-color: rgba(24, 148, 189, 0.12);
    color: var(--zerodna-blue-dark);
}
.woocommerce-orders-table__cell-order-status mark.status-on-hold,
.woocommerce-orders-table__cell-order-status mark.status-pending {
    background-color: rgba(230, 162, 60, 0.15);
    color: #a9722c;
}
.woocommerce-orders-table__cell-order-status mark.status-cancelled,
.woocommerce-orders-table__cell-order-status mark.status-failed {
    background-color: rgba(229, 72, 77, 0.12);
    color: var(--zerodna-red);
}
.woocommerce-orders-table__cell-order-status mark.status-refunded {
    background-color: var(--zerodna-light);
    color: var(--zerodna-muted);
}

/* ── Pulsanti nativi WooCommerce nell'area riservata (azioni tabella
   ordini "Visualizza/Paga/Annulla", pulsanti submit dei form
   Indirizzi/Dettagli account) — un solo trattamento condiviso. ── */
.ppstore-account-content .button,
.ppstore-account-content .woocommerce-Button,
.woocommerce-orders-table__cell-order-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--zerodna-green);
    color: var(--white) !important;
    border: 0;
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 24px;
    border-radius: 26px;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    cursor: pointer;
    margin: 2px;
}
.ppstore-account-content .button:hover,
.ppstore-account-content .woocommerce-Button:hover,
.woocommerce-orders-table__cell-order-actions .button:hover {
    background-color: var(--zerodna-green-dark);
    color: var(--white) !important;
}
.ppstore-account-content .button.cancel,
.woocommerce-orders-table__cell-order-actions .button.cancel {
    background-color: transparent;
    color: var(--zerodna-red) !important;
    border: 1px solid var(--zerodna-red);
}
.ppstore-account-content .button.cancel:hover,
.woocommerce-orders-table__cell-order-actions .button.cancel:hover {
    background-color: var(--zerodna-red);
    color: var(--white) !important;
}

/* ── Campi di input nativi WooCommerce (form Indirizzi/Dettagli account,
   nessun template override presente) ── */
.ppstore-account-content input.input-text,
.ppstore-account-content input[type="text"],
.ppstore-account-content input[type="email"],
.ppstore-account-content input[type="password"],
.ppstore-account-content input[type="tel"],
.ppstore-account-content select,
.ppstore-account-content textarea {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--zerodna-dark);
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 5px;
    transition: border-color 0.2s ease;
}
.ppstore-account-content input.input-text:focus,
.ppstore-account-content input[type="text"]:focus,
.ppstore-account-content input[type="email"]:focus,
.ppstore-account-content input[type="password"]:focus,
.ppstore-account-content input[type="tel"]:focus,
.ppstore-account-content select:focus,
.ppstore-account-content textarea:focus {
    border-color: var(--zerodna-green);
    outline: none;
}
.ppstore-account-content fieldset {
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.ppstore-account-content fieldset legend {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 14px;
    color: var(--zerodna-dark);
    padding: 0 10px;
    width: auto;
}
.ppstore-account-content .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--zerodna-dark);
    margin-bottom: 6px;
}

/* ── Indirizzi di fatturazione/spedizione (woocommerce-Addresses,
   markup nativo: nessun template override presente) ── */
.woocommerce-Addresses.u-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}
.woocommerce-Addresses .woocommerce-Address {
    flex: 1 1 300px;
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    padding: 25px 30px;
}
.woocommerce-Address-title.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--zerodna-light);
}
.woocommerce-Address-title.title h2 {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--zerodna-dark);
    margin: 0;
}
.woocommerce-Address-title.title .edit {
    font-size: 13px;
    font-weight: 600;
    color: var(--zerodna-green);
    text-decoration: underline;
    white-space: nowrap;
}
.woocommerce-Address-title.title .edit:hover {
    color: var(--zerodna-green-dark);
}
.woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: var(--zerodna-muted);
}

/* ── Tabelle responsive (storico ordini + carrello, entrambe usano
   "shop_table_responsive"): stacking a card sotto i 768px, stessa
   tecnica che WooCommerce fornirebbe di default nel proprio CSS
   nativo (disattivato di proposito in questo tema). ── */
@media (max-width: 767px) {
    .shop_table_responsive thead {
        display: none;
    }
    .shop_table_responsive,
    .shop_table_responsive tbody,
    .shop_table_responsive tr,
    .shop_table_responsive td {
        display: block;
        width: 100%;
    }
    .shop_table_responsive tr {
        margin-bottom: 15px;
        border: 1px solid var(--light-medium-gray);
        border-radius: 8px;
        overflow: hidden;
    }
    .shop_table_responsive td {
        text-align: right;
        padding: 10px 15px 10px 45%;
        position: relative;
        border-top: 0 !important;
        border-bottom: 1px solid var(--zerodna-light);
        min-height: 20px;
    }
    .shop_table_responsive td:last-child {
        border-bottom: 0;
    }
    .shop_table_responsive td::before {
        content: attr(data-title);
        position: absolute;
        left: 15px;
        width: 40%;
        text-align: left;
        font-weight: 600;
        color: var(--zerodna-dark);
    }
}

/* ── Checkbox / radio nativi: colore brand allo stato selezionato +
   dimensione coerente (la regola precedente su questo stesso
   selettore, più sopra in questo file, azzerava solo width/padding;
   qui aggiungiamo dimensione fissa e accent-color, che vince per
   ordine di cascata a parità di specificità). ── */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--zerodna-green);
    cursor: pointer;
}

/* ==========================================================
   MY ACCOUNT — fix icona doppia nella nav laterale
   La nostra nav (navigation.php) stampa già l'icona corretta come
   <i class="feather icon-feather-...">; il markup <a> però riceve
   ANCHE un'icona Font Awesome via ::before da una regola generica
   di libreria pensata per il markup di default WooCommerce/Storefront
   (verificato: getComputedStyle su .woocommerce-MyAccount-navigation-link
   a::before restituisce font-family "Font Awesome 5 Free" con un
   content non vuoto) — le due icone si sovrappongono. Neutralizziamo
   qui, scoped alla nostra nav, quella pseudo-icona indesiderata.
   custom.css è l'ultimo foglio caricato (vedi inc/enqueue.php), quindi
   vince sempre sulla regola di libreria che stiamo annullando.
   ========================================================== */
.ppstore-account-nav .woocommerce-MyAccount-navigation-link a::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================
   MY ACCOUNT — pulsante "mostra/nascondi password"
   WooCommerce (wc-password-strength-meter.js) inserisce
   <span class="password-input"><input .../><button class="show-password-input" ...></button></span>
   Senza il CSS nativo WooCommerce (disattivato in questo tema) il
   pulsante appare come un rettangolo vuoto senza icona né
   posizionamento. Ricostruito qui con le icone feather occhio/
   occhio-barrato già incluse nel set del tema.
   ========================================================== */
.password-input {
    position: relative;
    display: block;
}
.password-input .input-text {
    padding-right: 42px;
}
.show-password-input {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--zerodna-muted);
    line-height: 1;
}
.show-password-input:before {
    font-family: "feather";
    font-size: 18px;
    content: "\e86a";
}
.show-password-input.display-password:before {
    content: "\e86e";
}
.show-password-input:hover {
    color: var(--zerodna-dark);
}
/* ==========================================================
   MY ACCOUNT — dettaglio ordine (woocommerce/myaccount/view-order.php,
   nessun override presente: template nativo WooCommerce, stessa
   tabella/indirizzi non stilizzati già visti sulla thank-you page,
   ma qui SENZA la nostra classe ppstore-order-table — il markup è
   quello grezzo prodotto da woocommerce_order_details_table() sulla
   pagina "I miei ordini" > dettaglio, hook woocommerce_view_order
   (diverso da woocommerce_thankyou, non toccato dalla rimozione fatta
   per la thank-you page). Selettore generico sulle classi native
   ".shop_table.order_details", cosi' si applica automaticamente
   anche qui senza bisogno di un template override dedicato.
   ========================================================== */
.shop_table.order_details {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    overflow: hidden;
}
.shop_table.order_details thead th {
    background-color: var(--zerodna-light-2);
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--zerodna-dark);
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--light-medium-gray);
}
.shop_table.order_details td,
.shop_table.order_details th {
    padding: 14px 15px;
    vertical-align: middle;
    border-color: var(--zerodna-light);
}
.shop_table.order_details tbody td.product-name a {
    color: var(--zerodna-dark);
    font-weight: 600;
}
.shop_table.order_details tbody td.product-name .wc-item-meta {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 12.5px;
    color: var(--zerodna-muted);
    list-style: none;
    padding: 0;
}
.shop_table.order_details tfoot th,
.shop_table.order_details tfoot td {
    border-top: 1px solid var(--zerodna-light);
    border-bottom: 0;
}
.shop_table.order_details tfoot tr:last-child th,
.shop_table.order_details tfoot tr:last-child td {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--zerodna-dark);
}

/* Indirizzi fatturazione/spedizione sotto il dettaglio ordine
   (order/order-details-customer.php): markup diverso da quello della
   scheda "Indirizzi" del menu account (qui niente link "Modifica",
   è uno storico di sola lettura legato all'ordine) — stesso
   trattamento visivo a card, su classi proprie. */
.woocommerce-columns.woocommerce-columns--addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}
.woocommerce-columns.woocommerce-columns--addresses .woocommerce-column {
    flex: 1 1 300px;
    background-color: var(--white);
    border: 1px solid var(--light-medium-gray);
    border-radius: 8px;
    padding: 25px 30px;
}
.woocommerce-columns.woocommerce-columns--addresses .woocommerce-column__title {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--zerodna-dark);
    margin: 0 0 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--zerodna-light);
}
.woocommerce-columns.woocommerce-columns--addresses address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: var(--zerodna-muted);
}

/* Titolo "Dettagli ordine" nativo (order-details.php) sopra la
   tabella su questa vista */
.woocommerce-order-details__title {
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 18px;
    color: var(--zerodna-dark);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--zerodna-light);
}
/* ==========================================================
   CARRELLO — riga prodotto non più disponibile
   Il blocco carrello (WooCommerce Blocks) non applica alcuna classe
   di stock alle righe: l'unico appiglio è "data-cart-item-key".
   La classe qui sotto viene aggiunta via JS alle righe corrispondenti
   alle chiavi calcolate lato server — vedi
   ppstore_mark_unavailable_cart_items() in inc/woocommerce.php.

   Fondo rosso tenue + barra laterale piena: identifica a colpo d'occhio
   la riga citata nell'avviso "è esaurito e non può essere acquistato",
   senza compromettere la leggibilità del testo sottostante (un rosso a
   piena opacità renderebbe illeggibili nome, prezzo e quantità).
   ========================================================== */
.wc-block-cart-items__row.ppstore-cart-item-unavailable {
    background-color: rgba(229, 72, 77, 0.09);
    box-shadow: inset 4px 0 0 0 var(--zerodna-red);
}
.wc-block-cart-items__row.ppstore-cart-item-unavailable .wc-block-components-product-name {
    color: var(--zerodna-red) !important;
}

/* ==========================================================
   GALLERIA NATIVA WooCommerce — vecchio layout prodotto
   (ramo "else" di woocommerce/single-product.php: prodotti
   variabile/gara/bundle, in attesa di redesign dedicato).
   Spostato qui da inc/woocommerce.php (era un blocco <style>
   inline stampato in wp_head via ppstore_native_gallery_css(),
   in contrasto con la convenzione "mai CSS inline/in <style>,
   sempre in custom.css"). Scoping invariato: tutti i selettori
   restano prefissati da .ppstore-native-gallery/.ppstore-thumb-swiper,
   classi presenti solo su quella vista — l'is_product() che prima
   limitava la stampa dell'inline style era quindi ridondante.
   ========================================================== */

/* ── Wrapper galleria ── */
.ppstore-native-gallery .woocommerce-product-gallery {
    position: relative;
    margin-bottom: 0;
    overflow: visible;
}

/* Immagine principale */
.ppstore-native-gallery .woocommerce-product-gallery__image img,
.ppstore-native-gallery .woocommerce-product-gallery .flex-viewport img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── FlexSlider viewport ── */
.ppstore-native-gallery .woocommerce-product-gallery .flex-viewport {
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}

/* ── Nascondi thumbnail nativi FlexSlider (sostituiti da Swiper) ── */
.ppstore-native-gallery .woocommerce-product-gallery .flex-control-thumbs {
    display: none !important;
}

/* ── Swiper Thumbnail Container ── */
.ppstore-thumb-swiper {
    position: relative;
    overflow: hidden;
    margin-top: 5px;
}

.ppstore-thumb-swiper .swiper-wrapper {
    display: flex;
}

.ppstore-thumb-swiper .swiper-slide {
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.25s ease, border-color 0.25s ease;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}

.ppstore-thumb-swiper .swiper-slide:hover,
.ppstore-thumb-swiper .swiper-slide.ppstore-thumb-active {
    opacity: 1;
    border-color: #333;
}

.ppstore-thumb-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Swiper nav arrows per thumbnails */
.ppstore-thumb-swiper .swiper-button-next,
.ppstore-thumb-swiper .swiper-button-prev {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    top: 50%;
    margin-top: -14px;
}

.ppstore-thumb-swiper .swiper-button-next::after,
.ppstore-thumb-swiper .swiper-button-prev::after {
    font-size: 10px;
    color: #333;
    font-weight: bold;
}

.ppstore-thumb-swiper .swiper-button-disabled {
    opacity: 0.3;
}

/* ── FlexSlider nav arrows (immagine principale) ── */
.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: #333;
    font-size: 0;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.ppstore-native-gallery .woocommerce-product-gallery:hover .flex-direction-nav a {
    opacity: 1;
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 10px;
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 10px;
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: #333;
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a.flex-prev::before {
    content: '\f053';
}

.ppstore-native-gallery .woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
    content: '\f054';
}

/* ── Zoom trigger ── */
.ppstore-native-gallery .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ppstore-native-gallery .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
    background: #fff;
}

.ppstore-native-gallery .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: #333;
}

/* ── Sale badge ── */
.ppstore-native-gallery .woocommerce-product-gallery .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* ── PhotoSwipe z-index ── */
.pswp {
    z-index: 99999 !important;
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .ppstore-thumb-swiper .swiper-button-next,
    .ppstore-thumb-swiper .swiper-button-prev {
        display: none;
    }
}

.wp-block-woocommerce-checkout-order-summary-block{
    margin-bottom: 22px;
}
.wc-block-components-express-payment__title,
.wc-block-components-express-payment-continue-rule.wc-block-components-express-payment-continue-rule--checkout{
    color: var(--zerodna-blue);
}
#radio-control-wc-payment-method-options-woocg-post-72521__label > span > span{
    float: left;
}
#apppago-pdp-sim-widget{
    display: none!important;
}