/**
 * UsatoMania — Product / PDP
 */

/* =============================================
   Respiro tra header e scheda prodotto
   =============================================
   Il tema attacca #content.site-content direttamente sotto l'header
   (padding-top: 0): titolo e galleria partivano a filo. */
body.single-product #content.site-content {
    padding-top: 32px;
}
@media (max-width: 767.98px) {
    body.single-product #content.site-content {
        padding-top: 20px;
    }
}

/* =============================================
   Galleria: altezza massima
   =============================================
   L'altezza dello slide è data dal rapporto della foto: con immagini
   verticali (frequenti sull'usato) la galleria superava gli 800px e la
   colonna di destra finiva sotto la piega. `contain` perché su prodotti
   unici tagliare la foto significa nascondere pezzi dell'oggetto. */
body.single-product .woocommerce-product-gallery__image {
    max-height: 520px;
}
body.single-product .woocommerce-product-gallery__image > a {
    display: block;
    height: 100%;
}
body.single-product .woocommerce-product-gallery__image img {
    max-height: 520px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* La zoom lens di WooCommerce è un <img> sovrapposto in position:absolute:
   se prendesse height:100% verrebbe schiacciata e lo zoom risulterebbe
   deformato. */
body.single-product .woocommerce-product-gallery__image img.zoomImg {
    max-height: none;
    height: auto;
    object-fit: none;
}
@media (max-width: 767.98px) {
    body.single-product .woocommerce-product-gallery__image,
    body.single-product .woocommerce-product-gallery__image img {
        max-height: 380px;
    }
}

.quantity {
    display: none;
}

button#buynow {
    display: none;
}

.product-meta.bottom.product_meta {
    display: none;
}

/* =============================================
   Descrizione nel summary (tra CTA e trust block)
   ============================================= */
.usm-pdp-description {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--usm-surface-alt, #e9e8e2);
    font-size: 14px;
    line-height: 1.7;
    color: var(--usm-text, #1b1c19);
}
.usm-pdp-description p { margin: 0 0 10px; }
.usm-pdp-description p:last-child { margin-bottom: 0; }

/* =============================================
   Trust block (Prodotto verificato / GLS / Ritiro / Assistenza)
   ============================================= */
.usm-trust-block { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--usm-surface-alt, #e9e8e2); }
.usm-trust-item { display: flex; align-items: center; gap: 10px; font-family: var(--usm-font-label, 'Work Sans', sans-serif); font-size: 13px; color: var(--usm-olive, #79806e); }
.usm-trust-item .material-symbols-outlined { font-size: 18px; color: var(--usm-gold, #EBBD17); flex-shrink: 0; }
.usm-trust-link { color: var(--usm-olive, #79806e); text-decoration: none; font-weight: 600; }
.usm-trust-link:hover { color: var(--usm-dark-alt, #1b1c19); text-decoration: underline; }

/* =============================================
   Dimensioni (box misure custom)
   ============================================= */
.usm-dimensions-box { background: var(--usm-surface, #efeee8); border-radius: var(--usm-radius, 12px); padding: 24px; margin-top: 32px; }
.usm-dimensions-title { font-family: var(--usm-font-label, 'Work Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--usm-olive, #79806e); margin-bottom: 12px; }
.usm-dimensions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.usm-dimensions-list li { font-size: 14px; color: var(--usm-text, #1b1c19); }
.usm-dimensions-notes { font-size: 13px; color: var(--usm-text-muted, #79806e); margin-top: 12px; margin-bottom: 0; font-style: italic; }

/* =============================================
   Fix audit UI 2026-07 — PDP
   ============================================= */
/* CTA PDP: colore primario coerente col resto del sito (era verde), testo scuro */
.single_add_to_cart_button,
form.cart .single_add_to_cart_button {
    background: var(--usm-gold, #EBBD17) !important;
    color: var(--usm-dark, #151616) !important;
    min-height: 52px;
    width: min(420px, 100%);
    border-radius: var(--usm-radius, 12px);
    /* Il tema lascia il testo a 11px: su un pulsante largo 420px, che è
       l'azione principale della pagina, risultava minuscolo. */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}
/* Hover verde brand. Serve !important perché la regola sopra usa !important. */
.single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:hover {
    background: var(--usm-green, #213e25) !important;
    color: #fff !important;
}

/* =============================================
   Wishlist: da link di testo a bottone
   =============================================
   Il link c'era già (a.klbwl-btn, generato dal wishlist del tema) ma sembrava
   testo scritto sotto la CTA e passava inosservato. Qui diventa un bottone
   outline, gemello per dimensioni di "Aggiungi al carrello". */
.product-detail-inner .wishlist-button {
    display: block;
    margin-top: 12px;
}
.product-detail-inner .wishlist-button a.klbwl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(420px, 100%);
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid var(--usm-outline, #807660);
    border-radius: var(--usm-radius, 12px);
    background: transparent;
    color: var(--usm-dark-alt, #1b1c19);
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
        border-color var(--usm-transition-md, 250ms ease),
        background var(--usm-transition-md, 250ms ease),
        color var(--usm-transition-md, 250ms ease);
}
.product-detail-inner .wishlist-button a.klbwl-btn:hover,
.product-detail-inner .wishlist-button a.klbwl-btn:focus-visible {
    border-color: var(--usm-green, #213e25);
    background: var(--usm-green, #213e25);
    color: #fff;
}
/* L'icona cuore del tema è un ::before: qui va ridimensionata insieme al testo. */
.product-detail-inner .wishlist-button a.klbwl-btn::before {
    font-size: 18px;
    line-height: 1;
}

/* =============================================
   Breadcrumb nella colonna riassunto
   =============================================
   Spostata qui da sopra il blocco prodotto (vedi USM_TH_WooCommerce::render_pdp_breadcrumb).
   Compatta e discreta: sta sopra il titolo, non deve rubargli attenzione. */
.usm-pdp-breadcrumb {
    margin: 0 0 10px;
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    /* L'Additional CSS del Customizer stila `nav.woocommerce-breadcrumb` con
       `padding: 10px 1em 20px 3em; text-transform: uppercase; border-bottom;
       width: 110%; position: relative; left: -3em`: era tarato sulla vecchia
       posizione a tutta larghezza sopra la scheda prodotto e qui faceva
       sbordare la breadcrumb di 36px fuori dalla colonna. Va annullato tutto.
       Sulle PLP resta valido: queste regole sono scoped a .usm-pdp-breadcrumb. */
    text-transform: none;
    border-bottom: 0;
    width: auto;
    position: static;
    left: auto;
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: var(--usm-text-muted, #79806e);
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: var(--usm-surface-alt, #e9e8e2);
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb a {
    color: var(--usm-text-muted, #79806e);
    text-decoration: none;
}
.usm-pdp-breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--usm-gold-dark, #c9a110);
    text-decoration: underline;
}
/* L'ultima voce (il prodotto corrente) può essere lunghissima: resta su una
   riga sola con i puntini. min-width:0 + flex:0 1 auto servono perché è un
   flex item: senza, il testo non si comprime e l'ellissi non compare mai. */
.usm-pdp-breadcrumb .woocommerce-breadcrumb li:last-child {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================
   Blocchi informativi sotto la scheda
   =============================================
   Vedi USM_TH_WooCommerce::render_pdp_info_blocks. Stessi <details> nativi
   usati nelle FAQ della pagina appuntamenti: nessun JS, coerenza visiva. */
.usm-pdp-info {
    max-width: 860px;
    margin: 40px auto 8px;
}
.usm-pdp-info__item {
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: var(--usm-radius, 12px);
    margin-bottom: 10px;
    overflow: hidden;
}
.usm-pdp-info__item[open] { border-color: var(--usm-gold, #EBBD17); }
.usm-pdp-info__q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--usm-dark-alt, #1b1c19);
    list-style: none;
}
.usm-pdp-info__q::-webkit-details-marker { display: none; }
.usm-pdp-info__q .material-symbols-outlined {
    font-size: 20px;
    color: var(--usm-gold-dark, #c9a110);
}
/* Freccia col bordo: nessuna dipendenza da icon font */
.usm-pdp-info__q::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--usm-gold-dark, #c9a110);
    border-bottom: 2px solid var(--usm-gold-dark, #c9a110);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--usm-transition-md, 250ms ease);
}
.usm-pdp-info__item[open] .usm-pdp-info__q::after {
    transform: rotate(-135deg) translateY(-2px);
}
.usm-pdp-info__a {
    padding: 0 18px 16px 50px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--usm-text-muted, #79806e);
}
.usm-pdp-info__a p { margin: 0 0 10px; }
.usm-pdp-info__a p:last-child { margin-bottom: 0; }
.usm-pdp-info__a ul { margin: 0; padding-left: 18px; }
.usm-pdp-info__a li { margin-bottom: 6px; }

.usm-pdp-info__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--usm-surface-alt, #e9e8e2);
    font-size: 13px;
    color: var(--usm-text-muted, #79806e);
}
.usm-pdp-info__meta strong { color: var(--usm-dark-alt, #1b1c19); font-weight: 600; }
.usm-pdp-info__meta a { color: var(--usm-text-muted, #79806e); text-decoration: underline; }
.usm-pdp-info__meta a:hover { color: var(--usm-gold-dark, #c9a110); }

@media (max-width: 767.98px) {
    .usm-pdp-info { margin-top: 28px; }
    .usm-pdp-info__q { padding: 13px 14px; font-size: 14px; }
    .usm-pdp-info__a { padding: 0 14px 14px 44px; }
}

/* =============================================
   Rifinitura PDP
   =============================================
   Nella colonna di destra prezzo, disponibilità e pulsante avevano tutti più o
   meno lo stesso peso tipografico: l'occhio non trovava un punto di partenza.
   Qui il prezzo diventa il primo elemento che si legge e la riga "pezzo unico"
   spiega, sotto, perché non conviene rimandare. */

/* Il prezzo stava a 28 px ma in peso 500, come il testo attorno: nel tema il
   contenitore e' `.product-detail .product-price`, non `.summary`. */
.single-product .product-detail .product-price .price {
    font-size: clamp(26px, 3.2vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--usm-dark, #151616);
}

.single-product .product-detail .product-price .price del {
    font-size: .6em;
    font-weight: 500;
    opacity: .55;
}

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

/* ── Riga "pezzo unico" ───────────────────────────────────────
   Sulle card il bollino c'è, sulla scheda mancava del tutto. */
.usm-pdp-unico {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 18px;
    padding: 9px 12px;
    border-left: 3px solid var(--usm-gold, #EBBD17);
    border-radius: 0 8px 8px 0;
    background: rgba(235, 189, 23, .10);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--usm-text, #1b1c19);
}

.usm-pdp-unico strong {
    font-weight: 700;
}

.usm-pdp-unico__icona {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.35;
    color: var(--usm-gold-dark, #c9a110);
    /* Il font Material Symbols è caricato in variable font: senza FILL il
       simbolo resta contornato e a 18 px si legge male. */
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ── Barra sticky "aggiungi al carrello" ──────────────────────
   Il tema la fissa con `top: 0` e ci somma un `margin-top: 78px` inline,
   pensato per scendere sotto il proprio header sticky. Il nostro header non
   e' sticky (position: relative): allo scroll scorre via e la barra resta
   appesa in mezzo allo schermo, sopra il contenuto.
   Ancorandola in basso il problema sparisce a prescindere dall'altezza
   dell'header, ed e' anche la posizione piu' comoda sul telefono. */
.single-product-sticky {
    top: auto !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    border-bottom: 0;
    border-top: 1px solid rgba(27, 31, 34, .08);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .10);
    /* Il tema le da' z-index 9, sotto a mezza pagina. 80 la porta sopra il
       contenuto ma sotto tutto cio' che la deve coprire: overlay del sito
       (90), modale login (1000), lightbox galleria (1500), drawer carrello
       (100003), notifiche (100005). */
    z-index: 80 !important;
}

/* In fondo allo schermo si contendono lo spazio tre elementi fissi: la barra
   d'acquisto, il banner cookie e la CTA appuntamenti. Vanno impilati, non
   sovrapposti.
   Il banner e' quello di Complianz (`.cmplz-cookiebanner.cmplz-show`, alto
   circa 160 px e ancorato a bottom: 0): finche' e' in pagina prende lui il
   fondo, e barra e CTA salgono sopra. Quando il visitatore ha scelto, il
   banner sparisce e le due tornano al loro posto. */
:root {
    --usm-sticky-h: 84px;
    --usm-cookie-h: 178px;
}

body:has(.cmplz-cookiebanner.cmplz-show) .single-product-sticky {
    bottom: var(--usm-cookie-h) !important;
}

body:has(.cmplz-cookiebanner.cmplz-show) a.usm-floating-appt {
    bottom: calc(1em + var(--usm-cookie-h));
}

/* Senza banner, la CTA sale solo sopra la barra d'acquisto. */
body:not(:has(.cmplz-cookiebanner.cmplz-show)):has(.single-product-sticky.active) a.usm-floating-appt {
    bottom: calc(1em + var(--usm-sticky-h));
}

/* Barra e banner compaiono e spariscono: senza transizione gli altri saltano
   di scatto. */
a.usm-floating-appt,
.single-product-sticky {
    transition: bottom .15s cubic-bezier(.42, 0, .58, 1);
}

/* Su schermo stretto il banner occupa piu' altezza. */
@media (max-width: 767.98px) {
    :root {
        --usm-cookie-h: 230px;
    }
}

/* Sotto i 992 px il tema ha la propria bottom bar e la barra sticky perde
   senso: due barre sovrapposte in fondo allo schermo. */
@media (max-width: 991.98px) {
    .single-product-sticky {
        display: none !important;
    }
}

/* Il pulsante della barra era verde mentre quello della pagina e' oro:
   due colori per la stessa azione. */
.single-product-sticky .product-inner button.single_add_to_cart_button {
    background-color: var(--usm-gold, #EBBD17) !important;
    color: var(--usm-dark, #151616) !important;
    font-size: 14px;
    font-weight: 600;
}

.single-product-sticky .product-inner button.single_add_to_cart_button:hover {
    background-color: var(--usm-green, #213e25) !important;
    color: #fff !important;
}

.single-product-sticky .product-inner form.cart.single-ajax button svg {
    color: var(--usm-dark, #151616);
}