/* =============================================================================
   Snippet prodotto — Hornoi Core
   Card unica per shop, categorie, correlati e shortcode [products].
   Markup: woocommerce/content-product.php
   ========================================================================== */

/* Pagina Negozio: contenuto nel container Bootstrap, con stacco dall'header. */
.shop-archive { margin-top: 40px; }

/* Carrello e checkout: stesso container + stacco dall'header. */
.wc-page { margin-top: 40px; }

:root {
    --wc-accent:        #f5a623; /* ambra: badge novità, %, bottone carrello */
    --wc-accent-dark:   #e0940f;
    --wc-card-bg:       #fff;
    --wc-card-border:   #ececec;
    --wc-card-radius:   14px;
    --wc-ink:           #111;
    --wc-muted:         #8a8a8a;
    --wc-sale:          #e23b3b; /* rosso: badge promo */
    --wc-oos:           #9aa0a6; /* grigio: badge esaurito */

    /* Scala delle spaziature della card: 4 / 8 / 12 / 16 / 24. Tutti i
       distacchi interni escono da qui, così il ritmo resta lo stesso in ogni
       riga (badge, titolo, stelline, prezzo) invece di essere ritoccato a mano
       riga per riga. --wc-card-btn è il diametro del bottone carrello: serve
       anche al prezzo, che gli lascia lo spazio a destra. */
    --wc-card-pad:      16px;
    --wc-card-gap:      12px;
    --wc-card-gap-sm:   8px;
    --wc-card-btn:      44px;
}

/* ── Griglia prodotti ─────────────────────────────────────────────────────
   Contenitore flex di Bootstrap: le classi `d-flex flex-wrap justify-content-start`
   sono sull'<ul class="products"> (woocommerce/loop/loop-start.php). Vale ovunque
   compaia lo snippet (shop, categorie, correlati, up-sell, shortcode [products]).
   Le card partono da sinistra: l'ultima riga incompleta resta allineata a
   sinistra. Il box grafico è .wc-card__inner; la <li> fa solo da cella (larghezza
   4 per riga) e porta il padding che stacca le card — così restano distanziate
   senza bisogno di calcoli sulla larghezza. */

/* WooCommerce stampa ::before/::after su ul.products come clearfix del float.
   Nel contenitore flex diventano «figli» e la prima card risulta vuota. La regola
   del plugin (`.woocommerce ul.products::before`) ha specificità maggiore, quindi
   qui serve `!important` per spegnerli davvero. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
}

/* La <li> è la cella: niente float, 4 per riga con larghezze in percentuale piena
   (nessun calcolo); lo spazio tra le card lo danno padding + margine sotto. I due
   nomi di classe extra dell'<ul> (`.d-flex.flex-wrap`) alzano la specificità sopra
   le regole `.columns-N li.product` di WooCommerce, così vinciamo senza
   `!important`. box-sizing border-box è già globale in Bootstrap. */
.woocommerce ul.products.d-flex.flex-wrap > li.product,
.woocommerce-page ul.products.d-flex.flex-wrap > li.product {
    float: none;
    width: 25%;
    margin: 0 0 24px 0;
    padding: 0 12px;
}

@media (max-width: 991.98px) {
    .woocommerce ul.products.d-flex.flex-wrap > li.product,
    .woocommerce-page ul.products.d-flex.flex-wrap > li.product { width: 33.3333%; }
}
@media (max-width: 767.98px) {
    .woocommerce ul.products.d-flex.flex-wrap > li.product,
    .woocommerce-page ul.products.d-flex.flex-wrap > li.product { width: 50%; }
}
@media (max-width: 575.98px) {
    .woocommerce ul.products.d-flex.flex-wrap > li.product,
    .woocommerce-page ul.products.d-flex.flex-wrap > li.product { width: 100%; }
}

/* ── Card: box grafico, riempie la cella; il footer resta in fondo ────────── */
.wc-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-card-border);
    border-radius: var(--wc-card-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow .25s ease, transform .25s ease;
}

li.product.wc-card::before,
li.product.wc-card::after {
    content: none; /* toglie eventuali clearfix del tema */
}

li.product.wc-card:hover .wc-card__inner {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

/* ── Foto ────────────────────────────────────────────────────────────────── */
.wc-card__media {
    position: relative;
    display: block;
    background: #f4f4f4;
}

.wc-card__media-link {
    position: relative;
    display: block;
    line-height: 0;
}

.wc-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0;
    transition: transform .4s ease;
}

/* Zoom leggero solo quando NON c'è una foto hover dedicata */
li.product.wc-card:hover .wc-card__media:not(.has-hover) img {
    transform: scale(1.03);
}

/* ── Crossfade con la foto del metabox (solo se impostata) ───────────────── */
.wc-card__img--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

.wc-card__media.has-hover .wc-card__img--main {
    transition: opacity .4s ease;
}

li.product.wc-card:hover .wc-card__media.has-hover .wc-card__img--main {
    opacity: 0;
}

li.product.wc-card:hover .wc-card__media.has-hover .wc-card__img--hover {
    opacity: 1;
}

/* ── Sezione informazioni ────────────────────────────────────────────────── */
.wc-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--wc-card-gap);
    padding: var(--wc-card-pad);
    flex: 1 1 auto;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.wc-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-card-gap-sm);
}

.wc-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}

.wc-card__badge--new  { background: var(--wc-accent); color: var(--wc-ink); }
.wc-card__badge--sale { background: var(--wc-sale); }
.wc-card__badge--oos  { background: var(--wc-oos); }

/* ── Titolo ──────────────────────────────────────────────────────────────── */
/* Due righe fisse: con titoli di lunghezza diversa le card avevano stelline e
   prezzo a quote diverse, ed è la causa principale delle spaziature che non
   tornavano. Clamp a 2 righe + altezza minima di 2 righe = tutte le card
   allineate, sia che il titolo stia su una riga sia che ne occupi due. */
.wc-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* 2 righe × line-height 1.3 */
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.wc-card__title a {
    color: var(--wc-ink);
    text-decoration: none;
}

.wc-card__title a:hover { color: var(--wc-accent-dark); }

/* ── Recensioni (stelline SVG a due strati) ──────────────────────────────── */
.wc-card__rating {
    display: flex;
    align-items: center;
    gap: var(--wc-card-gap-sm);
}

/* Stelle del plugin CusRev (CR_Reviews::get_star_rating_svg): base + fill
   sovrapposti e ritagliati in larghezza. Il colore arriva inline; qui teniamo
   solo il layout, così lo snippet funziona anche sugli archivi dove il plugin
   non carica il suo frontend.css. */
.wc-card__rating .crstar-rating-svg {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.wc-card__rating .cr-rating-icon-base,
.wc-card__rating .cr-rating-icon-frnt {
    display: flex;
    height: 16px;
}
.wc-card__rating .cr-rating-icon-frnt {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.wc-card__rating .cr-rating-icon-bg,
.wc-card__rating .cr-rating-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.wc-card__stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.wc-card__stars-base,
.wc-card__stars-fill {
    display: inline-flex;
}

.wc-card__stars-base { color: #e2e2e2; }

.wc-card__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--wc-ink);
}

.wc-card__stars svg { display: block; }

.wc-card__reviews {
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-muted);
}

/* ── Footer: prezzo a sinistra, carrello a destra ────────────────────────── */
/* Niente più flex-wrap: «Visualizza carrello» non compare più nella card
   (vedi più sotto), quindi il footer è una riga sola alta quanto il bottone. */
.wc-card__footer {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 4px;
    min-height: var(--wc-card-btn);
}

/* ── Prezzo ──────────────────────────────────────────────────────────────── */
.wc-card__price {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wc-card-gap-sm);
    flex: 1 1 auto;
    min-height: var(--wc-card-btn); /* alta come il bottone: restano allineati */
    /* Spazio per il cerchietto del carrello a riposo: diametro + una gronda. */
    padding-right: calc(var(--wc-card-btn) + var(--wc-card-gap));
    font-size: 18px;
    font-weight: 700;
    color: var(--wc-ink);
}

/* Il margine qui si sommava al `gap` del contenitore: fra sconto, prezzo e
   prezzo barrato veniva fuori 14px invece di 8. Lo spazio lo dà solo il gap. */
.wc-card__price del,
.wc-card__price ins { margin: 0; }

.wc-card__discount {
    font-size: 14px;
    font-weight: 700;
    color: var(--wc-accent-dark);
}

.wc-card__price-now {
    text-decoration: none;
    font-weight: 700;
    color: var(--wc-ink);
}

.wc-card__price-was {
    font-size: 14px;
    font-weight: 500;
    color: var(--wc-muted);
    text-decoration: line-through;
}

.wc-card__price .amount { font-weight: inherit; }

/* ── Bottone «aggiungi al carrello»: cerchio → barra in hover ────────────── */
/* Il wrapper NON deve creare un containing block: così il bottone assoluto si
   dimensiona sul footer (largo quanto lo snippet) e può allargarsi davvero. */
.wc-card__cart {
    position: static;
    flex: 0 0 auto;
}

/* Molte proprietà sono !important per vincere su .woocommerce a.button.
   Aspetto: pulsante nero del sito (variabili --btn-* in general.css). */
li.product.wc-card a.wc-card__cart-btn,
.wc-card__cart-btn {
    position: absolute;
    right: 0;
    top: 0; /* ancorato in cima alla riga prezzo (alta 44px): non scende se il footer cresce */
    height: 44px !important;
    width: 44px;
    min-width: 44px;
    display: flex !important; /* il tema forza display sul .button: senza !important il flex non si applica */
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 100% !important;
    background: var(--btn-gradient) !important;
    background-size: var(--btn-gradient-size) !important;
    color: var(--btn-color) !important;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1 !important;
    box-shadow: var(--btn-shadow) !important;
    transition: width .35s ease, background-position .5s ease, border-radius .35s ease, box-shadow .3s ease;
}

li.product.wc-card a.wc-card__cart-btn:hover,
li.product.wc-card a.wc-card__cart-btn:focus-visible {
    background-position: var(--btn-gradient-pos-hover) !important;
    color: var(--btn-color) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}

.wc-card__cart-btn .icon--cart {
    flex: 0 0 auto;
    display: block;
}

.wc-card__cart-label {
    color: inherit;
    font-size: 12px;
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    width: 0;                /* a riposo non occupa spazio: l'icona resta centrata */
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease .08s;
}

/* Apertura su tutta la larghezza SOLO passando sul bottone (non su tutta la card).
   Da cerchio a pillola: 100% su un rettangolo largo darebbe un'ellisse. */
li.product.wc-card a.wc-card__cart-btn:hover,
li.product.wc-card a.wc-card__cart-btn:focus-visible {
    width: 100%;
    border-radius: 999px !important;
    justify-content: center;
}

/* In hover l'icona sparisce e resta solo la scritta, centrata */
.wc-card__cart-btn:hover .icon--cart,
.wc-card__cart-btn:focus-visible .icon--cart {
    display: none;
}

.wc-card__cart-btn:hover .wc-card__cart-label,
.wc-card__cart-btn:focus-visible .wc-card__cart-label {
    width: auto;
    opacity: 1;
}

/* ── Caricamento: anello SVG al posto della rotellina di WooCommerce ─────── */
/* Di serie WooCommerce mette `.loading` sul bottone e woocommerce.css ci
   appende la sua icon-font che gira (`.woocommerce a.button.loading::after`).
   Qui quella pseudo viene spenta e al suo posto compare il cerchio SVG che sta
   già nel markup (ProductCardController::spinner). Nessun JS: quando l'AJAX
   finisce WooCommerce toglie la classe e il loader sparisce da solo.
   Il selettore ha 3 classi + 3 elementi: batte quello del plugin (0,3,1). */
li.product.wc-card a.wc-card__cart-btn.loading::after {
    content: none;
}

/* Sempre dalla stessa regola del plugin arriva `opacity:.25`, che sbiadirebbe
   anche il nostro anello: il padding è già bloccato dalla regola base. */
li.product.wc-card a.wc-card__cart-btn.loading {
    opacity: 1;
    pointer-events: none; /* niente doppio clic mentre l'AJAX è in volo */
}

.wc-card__spinner {
    display: none;
    flex: 0 0 auto;
    animation: wc-card-spin .8s linear infinite;
}

.wc-card__spinner circle {
    fill: none;
    stroke-width: 2.4;
}

.wc-card__spinner-track {
    stroke: rgba(255, 255, 255, .25);
}

.wc-card__spinner-arc {
    stroke: currentColor;
    stroke-linecap: round;
    /* Circonferenza con r=9 ≈ 56,5: un arco da ~15 e il resto vuoto. */
    stroke-dasharray: 15 42;
}

/* Mentre carica: via icona ed etichetta, resta solo l'anello. */
.wc-card__cart-btn.loading .icon--cart,
.wc-card__cart-btn.loading .wc-card__cart-label {
    display: none;
}

.wc-card__cart-btn.loading .wc-card__spinner {
    display: block;
}

@keyframes wc-card-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wc-card__spinner { animation-duration: 2s; }
}

/* ── Dopo l'aggiunta ─────────────────────────────────────────────────────── */

/* «Vai al carrello»: add-to-cart.js lo inietta dopo il bottone a ogni
   aggiunta. Nello snippet non lo vogliamo — il carrello si apre dal minicart
   in header. `display:none` lo toglie anche dal flusso e dal giro dei TAB.
   Serve il selettore lungo: `.woocommerce a.added_to_cart` del plugin vale
   (0,2,1) e rimetteva `display:inline-block`. Qui siamo a (0,3,2). */
li.product.wc-card a.added_to_cart {
    display: none;
}

/* Spunta dell'icon-font che WooCommerce appende al bottone quando il prodotto
   è stato aggiunto (`.woocommerce a.button.added::after`, content "\e017"):
   nel cerchietto non ci sta e non la vogliamo. */
li.product.wc-card a.wc-card__cart-btn.added::after {
    content: none;
}

/* Prodotto esaurito: bottone spento */
li.product.wc-card.outofstock a.wc-card__cart-btn {
    background: var(--wc-oos) !important;
    box-shadow: none;
    color: #fff !important;
}

/* ── Accessibilità: niente hover width su touch/tastiera senza puntatore ──── */
@media (hover: none) {
    li.product.wc-card a.wc-card__cart-btn {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center;
        border-radius: 999px !important;
    }
    .wc-card__cart-btn .icon--cart { display: none; }
    .wc-card__cart-label { width: auto; opacity: 1; }
    .wc-card__price { padding-right: 0; }
    .wc-card__footer { flex-wrap: wrap; gap: var(--wc-card-gap); }
    .wc-card__cart { position: static; transform: none; width: 100%; height: auto; }
}