/**
 * Usatomania Theme Hooks — Card prodotto (PLP, shop, carousel home)
 *
 * Il markup è quello di Blonwe `product_type13` (blonwe_product_type13()):
 *   .product-wrapper.style-9.product-type-13
 *     > .product-inner
 *         > .thumbnail-wrapper.entry-media  (a.product-thumbnail > img, .thumbnail-buttons)
 *         > .content-wrapper                (h2.product-title, span.price, .product-buttons.only-icon)
 *
 * Lo stile "style-9" del tema non disegna nessuna card: il bordo sta solo sulla
 * miniatura e il testo è a filo. Qui la card diventa una superficie vera, le
 * immagini vengono normalizzate alla stessa altezza e il bottone "Aggiungi al
 * carrello" diventa un tondo con la sola icona, appoggiato in basso a destra
 * sull'immagine.
 *
 * Vale sia per le PLP sia per la home, che usa lo stesso product_type.
 */

/* ── Altezze uniformi ───────────────────────────────────────────
   La griglia del tema è flex: senza `height:100%` lungo tutta la catena
   ogni card è alta quanto il suo contenuto e i bordi non si allineano. */
.products .product,
.klb-module .products .product {
    display: flex;
}

.products .product > .product-wrapper.style-9 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.products .product-wrapper.style-9 > .product-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── La card ────────────────────────────────────────────────── */
.products .product-wrapper.style-9 {
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: var(--usm-radius, 12px);
    overflow: hidden;
    transition:
        border-color var(--usm-transition-md, 250ms ease),
        box-shadow var(--usm-transition-md, 250ms ease),
        transform var(--usm-transition-md, 250ms ease);
}

.products .product-wrapper.style-9:hover {
    border-color: var(--usm-gold, #EBBD17);
    box-shadow: var(--usm-shadow-md, 0 4px 12px rgba(0, 0, 0, .10));
    transform: translateY(-3px);
}

/* ── Miniatura: tutte quadrate, quindi tutte della stessa altezza ──
   I prodotti dell'usato hanno foto con proporzioni molto diverse: senza
   aspect-ratio le righe della griglia risultano irregolari. Il bordo che il
   tema mette sulla miniatura qui non serve più: il bordo è quello della card. */
.products .product-wrapper.style-9 .thumbnail-wrapper {
    aspect-ratio: 1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    background: var(--usm-surface, #efeee8);
}

.products .product-wrapper.style-9 .thumbnail-wrapper > a.product-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}

.products .product-wrapper.style-9 .thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* ── Contenuto ──────────────────────────────────────────────── */
.products .product-wrapper.style-9 .content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 15px 16px;
}

/* Titolo su due righe massimo: così le card restano allineate anche con
   nomi lunghissimi come "Casco da Moto Giallo Evid. Acerbis ECER22-05". */
.products .product-wrapper.style-9 .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 10px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--usm-text, #1b1c19);
}

/* Il prezzo va in fondo alla card, così è sempre sulla stessa linea
   indipendentemente dalla lunghezza del titolo.
   Su un catalogo di pezzi unici il prezzo è il dato che decide: prima era
   della stessa taglia del titolo e si perdeva nel blocco di testo. */
.products .product-wrapper.style-9 .price {
    margin-top: auto;
    padding-top: 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--usm-dark, #151616);
}

/* Il prezzo barrato di un eventuale sconto non deve gridare più del prezzo. */
.products .product-wrapper.style-9 .price del {
    font-size: 14px;
    font-weight: 500;
    opacity: .6;
}

.products .product-wrapper.style-9 .price ins {
    text-decoration: none;
}

/* ── Bottone carrello: tondo, in basso a destra sull'immagine ──
   `.product-buttons` sta dentro .content-wrapper, dopo il prezzo: con
   `order: -1` risale in cima al contenuto (subito sotto l'immagine) e il
   margine negativo lo fa salire sopra l'angolo della foto. È l'unico modo
   di ottenerlo in CSS puro, senza toccare il markup del tema. */
.products .product-wrapper.style-9 .product-buttons {
    order: -1;
    align-self: flex-end;
    position: relative;
    z-index: 3;
    margin: -52px 0 8px;
    width: auto;
}

/* Il tema fissa altezza, line-height e colori del bottone con !important
   (themes/blonwe/style.css:665-671, `.product-type-13 a.add_to_cart_button`):
   per quelle quattro proprietà serve !important anche qui, il resto passa
   per specificità. */
.products .product-wrapper.style-9 .product-buttons > a,
.products .product-wrapper.style-9 .product-buttons > a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px !important;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--usm-gold, #EBBD17) !important;
    color: var(--usm-dark, #151616) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    /* font-size:0 nasconde il testo lasciandolo agli screen reader (a
       differenza di display:none); il link ha comunque il suo aria-label.
       !important perché base.css ha
       `.products .product .product-wrapper.style-9 .product-buttons > *
        { font-size: .8125rem !important }`, che vanifica persino il
       font-size:0 che il tema stesso mette sulla variante .only-icon. */
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap;
}

/* Nella variante style-9 il tema nasconde l'icona del bottone (mostrava solo
   il testo): qui è l'opposto, l'icona è l'unico contenuto visibile. */
.products .product-wrapper.style-9 .product-buttons > a i,
.products .product-wrapper.style-9 .product-buttons > a::before {
    display: inline-flex !important;
    font-size: 18px !important;
    line-height: 1;
    margin: 0;
}

.products .product-wrapper.style-9 .product-buttons > a:hover,
.products .product-wrapper.style-9 .product-buttons > a:focus-visible {
    background: var(--usm-green, #213e25) !important;
    color: #fff !important;
    transform: scale(1.06);
}

/* Stato "aggiunto": il link "Visualizza carrello" che WooCommerce inietta
   accanto al bottone diventerebbe un secondo tondo senza icona. */
.products .product-wrapper.style-9 .product-buttons > a.added_to_cart {
    display: none !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .products .product-wrapper.style-9 .content-wrapper {
        padding: 0 10px 12px;
    }
    .products .product-wrapper.style-9 .product-buttons {
        margin-top: -46px;
    }
    .products .product-wrapper.style-9 .product-buttons > a,
    .products .product-wrapper.style-9 .product-buttons > a.button {
        width: 40px;
        height: 40px;
    }
    .products .product-wrapper.style-9 .product-title {
        font-size: 13px;
    }
}