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

   Disegnata sulle card dei percorsi (assets/css/percorsi.css, .mca-course):
   stessi angoli, stesso bordo, stessa ombra in hover, stesso font display,
   badge in pastiglia sulla foto e bottone a pillola piena in fondo. Negozio e
   accademia sono lo stesso sito e devono sembrarlo.

   I valori NON arrivano dai token --mca-*: quelli vivono dentro `.mca`
   (academy-base.css, caricato solo su home e percorsi) e qui non ci sono. Sono
   ricopiati nelle variabili --wc-* qui sotto, che restano l'unico punto da
   toccare per ritoccare la card.
   ========================================================================== */

/* 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à e percentuale di sconto */
    --wc-accent-dark:   #e0940f;
    --wc-card-bg:       #fff;
    --wc-card-border:   rgba(14, 14, 14, .14);       /* = bordo .mca-course */
    --wc-card-border-on: rgba(14, 14, 14, .3);       /* = bordo in hover */
    --wc-card-shadow:   0 24px 50px rgba(14, 14, 14, .1);
    --wc-card-radius:   22px;
    --wc-ink:           #0e0e0e;  /* = --mca-ink */
    --wc-body:          #5a564f;  /* = --mca-body */
    --wc-muted:         #8a8580;  /* = --mca-muted */
    --wc-sale:          #e23b3b;  /* rosso: badge promo */
    --wc-oos:           #9aa0a6;  /* grigio: badge esaurito */

    /* Stelle delle recensioni: nere come il resto, vuote in grigio leggero. */
    --wc-star:          var(--wc-ink);
    --wc-star-empty:    rgba(14, 14, 14, .2);

    /* Font display dei percorsi. Caricato globalmente (hornoi-academy-fonts),
       quindi disponibile anche fuori dalle pagine Academy. */
    --wc-disp: 'Space Grotesk', sans-serif;

    /* Scala delle spaziature della card. Tutti i distacchi interni escono da
       qui, così il ritmo resta lo stesso in ogni riga invece di essere
       ritoccato a mano riga per riga. */
    --wc-card-pad:      18px;
    --wc-card-gap:      10px;
    --wc-card-gap-sm:   8px;
    --wc-card-btn:      46px;   /* altezza della pillola del carrello */

    /* Altezza fissa dello snippet: tutte le card sono alte uguali a
       prescindere da quanto è lungo il titolo. */
    --wc-card-height:   450px;

    /* Il riquadro della foto non ha più proporzioni proprie ma un'altezza sua
       dentro i 450px: uguale su ogni card, e quello che resta va alle
       informazioni. La vecchia variabile resta perché ci si può tornare
       (vedi .wc-card__media). */
    --wc-card-photo:    1 / 1;
    /* Va tenuta sotto a 450px meno quello che chiede il blocco informazioni:
       padding 36 + titolo su due righe ~47 + stelline 16 + prezzo ~26 +
       pillola 46 + i tre stacchi da 10 fanno circa 200px. Alzandola oltre i
       250px il corpo non ci sta più dentro. */
    --wc-card-photo-h:  230px;

    /* Tipografia: un gradino sotto le card dei percorsi. Il motivo non è più il
       numero di colonne — da quando anche lo snippet sta 3 per riga sono le
       stesse — ma la scelta di tenere il negozio un tono più sobrio
       dell'accademia. Alzare questi due valori riporta la card alla scala di
       percorsi.css (25px / 30px). */
    --wc-card-title:    18px;
    --wc-card-price:    22px;
}

/* ── 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, 3 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` — e infatti il numero di colonne lo decide questo file, non
   l'impostazione di WooCommerce che finisce nella classe `.columns-N`.
   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: 33.3333%;
    margin: 0 0 24px 0;
    padding: 0 12px;
}

/* Scala: 3 per riga, 2 dal tablet in giù, 1 sul telefono. Il gradino a 767.98px
   non c'è più — scendeva da 3 a 2, e ora sopra ci sono già 2. */
@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: 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 ────────── */
/* Stessa cornice di .mca-course: niente ombra a riposo, il rilievo arriva solo
   in hover — insieme al bordo che si scurisce. */
.wc-card__inner {
    display: flex;
    flex-direction: column;
    height: var(--wc-card-height);
    background: var(--wc-card-bg);
    border: 1px solid var(--wc-card-border);
    border-radius: var(--wc-card-radius);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s 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 {
    border-color: var(--wc-card-border-on);
    box-shadow: var(--wc-card-shadow);
}

/* ── Foto ────────────────────────────────────────────────────────────────── */
/* L'altezza la decide il riquadro, non la foto: così tutte le card della riga
   sono alte uguali anche con foto di proporzioni diverse. */
.wc-card__media {
    position: relative;
    display: block;
    /* Altezza propria invece delle proporzioni: dentro una card alta fissa le
       due cose non possono convivere, e la misura fissa tiene le foto uguali
       su tutta la riga. Per tornare alla foto quadrata basta rimettere
       `aspect-ratio: var(--wc-card-photo)` al posto di `flex`. */
    flex: 0 0 var(--wc-card-photo-h);
    overflow: hidden;
    background: #f4f4f4;
}

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

/* `cover`: la foto riempie il riquadro, e l'altezza la decide il riquadro —
   non la foto. Il ritaglio parte da sinistra, come sulle schede dei corsi e
   sugli snippet dei percorsi.
   Il selettore ricalca quello di WooCommerce con una classe in più. Il plugin
   stampa `.woocommerce ul.products li.product a img { height: auto;
   margin: 0 0 1em }`, che vale (0,3,4): qualsiasi regola nostra con tre classi
   e meno elementi perde, e la foto resta alta quanto le sue proporzioni invece
   che quanto il link — da lì la striscia grigia, che è il fondo di
   .wc-card__media rimasto scoperto, più l'1em di margine sotto.
   Il secondo selettore serve dove il wrapper `.woocommerce` non c'è (shortcode
   e alcuni archivi): lì la regola del plugin non aggancia, e senza `.woocommerce`
   davanti la nostra continua a valere. */
.woocommerce ul.products li.product.wc-card a img,
ul.products li.product.wc-card a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    display: block;
    margin: 0;
}

.wc-card__img--main {
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}

/* 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.04);
}

/* ── Crossfade con la foto del metabox (solo se impostata) ───────────────── */
/* Stessa gara di specificità di qui sopra: la seconda foto sta nello stesso
   link, quindi si prende anche lei `height: auto` e il margine del plugin. */
.woocommerce ul.products li.product.wc-card a img.wc-card__img--hover,
ul.products li.product.wc-card a img.wc-card__img--hover {
    position: absolute;
    inset: 0;
    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);
    /* Elastico e non a contenuto: senza spazio in eccesso qui, il
       `margin-top: auto` del footer non avrebbe nulla su cui spingere e prezzi
       e bottoni smetterebbero di allinearsi fra le card della riga. */
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Badge: pastiglie sulla foto, come «Livello 2» sulle card dei percorsi ── */
.wc-card__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none; /* etichette, non bersagli: il clic passa alla foto */
}

.wc-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-family: var(--wc-disp);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}

/* L'ambra resta il segno del negozio: «novità» e sconto si vedono da lontano
   anche su una foto chiara. Esaurito e promo tengono i loro colori. */
.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: rgba(14, 14, 14, .85); }
/* «Date in arrivo»: è un'attesa, non una porta chiusa, e il grigio più chiaro
   lo dice senza doverlo scrivere. */
.wc-card__badge--soon { background: rgba(14, 14, 14, .55); }

/* ── Titolo ──────────────────────────────────────────────────────────────── */
/* Al massimo due righe, ma senza altezza minima: la riga vuota che teneva
   allineate le card faceva crescere ogni snippet di mezza riga a vuoto.
   L'allineamento di prezzo e bottone lo garantisce già il footer, che si
   incolla in fondo con `margin-top: auto`. */
.wc-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    /* Dentro una card ad altezza fissa il titolo è l'unico elemento che il
       flex può comprimere, perché ha `overflow: hidden`: senza questo, se lo
       spazio non basta viene ridotto a zero e sparisce invece di segnalare
       che la foto è troppo alta. */
    flex-shrink: 0;
    font-family: var(--wc-disp);
    font-size: var(--wc-card-title);
    line-height: 1.3;
    font-weight: 600; /* come .mca-course__title */
}

.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);
    flex-shrink: 0;
}

/* Stelle del plugin CusRev (CR_Reviews::get_star_rating_svg): base + fill
   sovrapposti e ritagliati in larghezza. Il layout sta qui, 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;
}

/* Il colore del plugin arriva scritto inline sull'SVG — `fill` sulle stelle
   piene, `stroke` sui contorni di quelle vuote — e solo !important lo batte.
   Nero e grigio: la card non ha altri colori oltre all'ambra dei badge. */
.wc-card__rating .cr-rating-icon {
    fill: var(--wc-star) !important;
}
.wc-card__rating .cr-rating-icon-bg {
    stroke: var(--wc-star-empty) !important;
}

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

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

/* Stelle disegnate dal tema (ProductCardController::rating, quando CusRev non
   c'è): stessi due colori delle stelle del plugin qui sopra. */
.wc-card__stars-base { color: var(--wc-star-empty); }

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

.wc-card__stars svg { display: block; }

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

/* ── Footer: prezzo sopra, bottone a tutta larghezza sotto ───────────────── */
/* Come nelle card dei percorsi: il prezzo su una riga sua e il bottone pieno
   in fondo, così le card restano allineate qualunque sia la lunghezza del
   titolo. `margin-top: auto` incolla il blocco al fondo della card. */
.wc-card__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding-top: 2px;
    flex-shrink: 0;
}

/* ── Prezzo ──────────────────────────────────────────────────────────────── */
/* Baseline e non center: la cifra grande e il vecchio prezzo barrato poggiano
   sulla stessa riga, come su .mca-course__price. */
/* WooCommerce colora i prezzi con un verde oliva suo — `#958e09` — da un
   selettore che vale (0,3,2) e batte la sola classe della nostra riga: senza
   sconto, dove il prezzo è il testo del contenitore e non l'`<ins>`, il colore
   che si vedeva era il suo. Qui il selettore aggiunge la classe `.price` che
   l'elemento ha già, così la nostra vince senza toccare il markup — e vale in
   tutti e due i posti dove questa riga compare, griglia e scheda prodotto. */
.woocommerce ul.products li.product .wc-card__price.price,
.woocommerce div.product .wc-card__price.price {
    color: var(--wc-ink);
    /* `display: block` è l'altra cosa che WooCommerce impone da lì: la riga
       smetteva di essere un flex e sconto, prezzo e importo barrato finivano
       appiccicati, senza il respiro del `gap`. */
    display: inline-flex;
}

.wc-card__price {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* Riga stretta, colonne larghe: sconto, prezzo e importo barrato hanno
       bisogno d'aria fra loro, ma se vanno a capo devono restare vicini. */
    gap: 6px 16px;
    font-family: var(--wc-disp);
    font-size: var(--wc-card-price);
    font-weight: 700;
    line-height: 1.1;
    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: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--wc-accent-dark);
}

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

/* Stesso trattamento di .mca-course__price-old */
.wc-card__price-was {
    font-size: 14px;
    font-weight: 400;
    color: var(--wc-muted);
    text-decoration: line-through;
}

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

/* ── Bottone «aggiungi al carrello»: pillola piena a tutta larghezza ─────── */
/* Come `.mca-btn--dark.mca-btn--block` sulle card dei percorsi: nero pieno,
   maiuscoletto spaziato, largo quanto la card. L'etichetta è sempre leggibile
   — prima compariva solo passandoci sopra, e su touch non compariva affatto. */
.wc-card__cart {
    display: block;
    width: 100%;
}

/* Molte proprietà sono !important per vincere su .woocommerce a.button
   e sulle variabili --button-* del tema. */
li.product.wc-card a.wc-card__cart-btn,
.wc-card__cart-btn {
    display: flex !important; /* il tema forza display sul .button: senza !important il flex non si applica */
    width: 100%;
    min-height: var(--wc-card-btn);
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 20px !important;
    border: none !important;
    border-radius: 100px !important;
    background: var(--wc-ink) !important;
    color: #fff !important;
    font-family: var(--wc-disp);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 1 !important;
    transition: background .25s ease;
}

li.product.wc-card a.wc-card__cart-btn:hover,
li.product.wc-card a.wc-card__cart-btn:focus-visible {
    background: #333 !important;
    color: #fff !important;
}

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

.wc-card__cart-label {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* ── 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;
}

/* Traccia chiara: il bottone adesso è nero pieno, una traccia scura sparirebbe. */
.wc-card__spinner-track {
    stroke: rgba(255, 255, 255, .3);
}

.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"):
   il messaggio lo dà già il minicart che si apre, qui è rumore. */
li.product.wc-card a.wc-card__cart-btn.added::after {
    content: none;
}

/* Prodotto esaurito: bottone spento, come la pastiglia «esaurito». */
li.product.wc-card.outofstock a.wc-card__cart-btn {
    background: var(--wc-oos) !important;
    color: #fff !important;
}

/* Corso bloccato dai prerequisiti: al posto del carrello un lucchetto che porta
   al livello da superare prima. Contorno invece di pieno — non è un invito a
   comprare — ma cliccabile, perché una strada c'è. È lo stesso trattamento di
   `.mca-btn--ghost` sulle card dei percorsi. */
li.product.wc-card a.wc-card__cart-btn--locked,
.wc-card__cart-btn--locked {
    background: transparent !important;
    border: 1px solid var(--wc-card-border-on) !important;
    color: var(--wc-ink) !important;
}

li.product.wc-card a.wc-card__cart-btn--locked:hover,
li.product.wc-card a.wc-card__cart-btn--locked:focus-visible {
    background: var(--wc-ink) !important;
    border-color: var(--wc-ink) !important;
    color: #fff !important;
}