/* ============================================================
* Madicks — Loop product card
*
* Restyle delle card prodotto del loop WooCommerce per allineare
* tutti i contesti (related, shop, archive, upsells) al prototipo
* .design/prototypes/shop-desktop.html (.product-card).
*
* Le regole legacy in style.css del child (sezioni .products .product,
* .et-listing-style1, .products .badge, .button.product_type_simple,
* .product_after_shop_loop_price, .prezzo-retail, ecc.) restano in
* vita per reversibilità: questo file le SOVRASCRIVE con specificità
* adeguata o !important documentato dove necessario.
*
* Selettori DOM live verificati su Goya child (vedi sezione 5 del
* prompt di redesign):
* - wrapper loop: .products.et-listing-style1
* - card root: .products .product.et-listing-style1
* - card body: .product-inner
* - figure: .product_thumbnail
* - badge sold out: .badge.out-of-stock (top: 24px right: 24px legacy)
* - prezzo: .product_after_shop_loop_price (.price, del, .prezzo-retail, .regular-price-perc)
* - footer azioni: .product_after_title > .after_shop_loop_actions
* - bottone ATC: a.button.product_type_simple | .product_type_variable
* - wishlist YITH: .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button
* ============================================================ */
/* ── 1. TOKENS LOCALI (subset --m-*) ─────────────────────── */
:root {
--m-loop-card-radius: 14px;
--m-loop-pill-radius: 25px;
--m-loop-shadow: 0 6px 32px -4px rgba(0, 0, 0, 0.13);
--m-loop-shadow-hover: 0 10px 40px -4px rgba(0, 0, 0, 0.22);
--m-loop-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--m-loop-red-badge: #cb0001;
--m-loop-soldout-bg: #0a0a0a;
--m-loop-gray-light: #f5f5f5;
--m-loop-gray-mid: #e0e0e0;
--m-loop-gray-text: #6e6e6e;
--m-loop-teal: #00bcd4;
--m-loop-black: #0a0a0a;
--m-loop-container-max: 1420px;
}
/* ── 2. CONTAINER MAX-WIDTH ──────────────────────────────────
*
* Pattern "full-bleed inside contained" per related e upsells:
* - Il .container Bootstrap di Goya wrappa h2 + .products entro 1420px
* centrati nel viewport, allineati a tutto il resto del template
* prodotto (descrizione, p, breadcrumb, ecc.).
* - La sola .slick-list evade dal container con margin negativo +
* width 100vw (vedi §11.1) per dare al carosello l'effetto edge-to-edge.
*
* Lo style.css legacy ha .related.products .container { max-width: 100% }
* (style.css:1883). La nostra regola usa un selettore più specifico
* (section.related.products vs .related.products) per vincere in cascade
* senza !important. */
section.related.products > .container,
section.upsells.products > .container,
.woocommerce-page .site-content > .container,
.post-type-archive-product .site-content > .container,
.tax-product_cat .site-content > .container,
.tax-product_tag .site-content > .container {
max-width: var(--m-loop-container-max);
margin-left: auto;
margin-right: auto;
}
/* ── 3. CARD LAYOUT (uguali altezze, hover lift) ─────────── */
/* Spaziatura inter-card: padding 10px/lato → 20px gap totale tra card
* adiacenti, coerente col prototipo .product-grid { gap: 20px }.
* Lo style.css legacy ha 0.4rem (~6.4px) per lato → 12.8px di gap, troppo. */
.products .product.et-listing-style1 {
display: flex;
flex-direction: column;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0;
}
.products .product.et-listing-style1 .product-inner {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: var(--m-loop-card-radius);
box-shadow: var(--m-loop-shadow);
overflow: hidden;
transition: var(--m-loop-transition);
position: relative;
}
.products .product.et-listing-style1 .product-inner:hover {
/* Override del box-shadow legacy con !important in style.css:839. */
box-shadow: var(--m-loop-shadow-hover) !important;
transform: translateY(-3px);
}
.products .product.et-listing-style1 .caption {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 16px 18px 18px;
}
.products .product.et-listing-style1 .product_after_title {
margin-top: auto;
}
/* ── 4. THUMBNAIL ────────────────────────────────────────── */
/* Catena di altezze esplicite per evitare collasso immagini.
* Senza height esplicita sul wrapper interno, img height:100%
* collassava a 0 anche con aspect-ratio sulla figure. min-height è
* un safety net se aspect-ratio fallisce (es. browser legacy o
* containment misurato in flex-column). */
.products .product.et-listing-style1 .product_thumbnail {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
width: 100%;
display: block;
border-radius: 0;
margin: 0;
min-height: 200px;
}
.products .product.et-listing-style1 .product_thumbnail > a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.products .product.et-listing-style1 .product_thumbnail img,
.products .product.et-listing-style1 .product_thumbnail img.main-image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 14px;
transition: transform 0.35s ease;
aspect-ratio: auto; /* override `.products .product .product_thumbnail img { aspect-ratio: 1.5 }` (style.css:852) */
display: block;
}
.products .product.et-listing-style1 .product-inner:hover .product_thumbnail img,
.products .product.et-listing-style1 .product-inner:hover .product_thumbnail img.main-image {
transform: scale(1.05);
}
/* ── 5. BADGE SCONTO TOP-LEFT (.m-loop-badge-sale) ───────── */
.products .product.et-listing-style1 .m-loop-badge-sale {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
background: var(--m-loop-red-badge);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 5px 9px;
border-radius: var(--m-loop-pill-radius);
letter-spacing: 0.03em;
}
/* ── 6. BADGE SOLD OUT TOP-RIGHT (.badge.out-of-stock) ──── */
/* Override delle regole legacy `.products .badge` (top: 24px right: 24px,
* background black !important, font-size 16px) per allinearsi al prototipo:
* pill più piccola, ancorata a 12/12, peso tipografico ridotto. */
.products .product.et-listing-style1 .badge.out-of-stock {
top: 12px !important;
right: 12px !important;
left: unset !important;
background: var(--m-loop-soldout-bg) !important;
color: #fff !important;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 5px 10px;
border-radius: var(--m-loop-pill-radius);
z-index: 2;
display: inline-flex;
gap: 0;
}
/* ── 7. WISHLIST (top-right dell'immagine, on hover) ──────────
*
* Posizione di default top:50px right:12px (sotto il badge sold out
* quando presente — badge sta a top:12px con altezza ~28px, quindi 50px
* lascia ~10px di gap minimo).
*
* Round 7: override dinamico via :has() — su card SENZA badge sold out
* la wishlist sale a top:12px (occupa la posizione che il badge avrebbe
* avuto), evitando lo spazio vuoto sopra il cuoricino. Browser senza
* supporto :has() cadono sul default 50px (fallback graceful, no rotture).
*
* Il bottone YITH viene visualmente "spostato" via position absolute
* sopra all'angolo top-right della figure. Resta dentro il suo wrapper
* DOM originale (.product-title), quindi YITH continua a funzionare
* normalmente su click. È solo un posizionamento visivo.
*
* Z-index 4 = sopra al badge sale (z 2) e sotto al bottone ATC del
* footer (che vive in caption, fuori dalla figure). */
.products .product.et-listing-style1 .yith-add-to-wishlist-button-block {
position: absolute;
top: 50px;
right: 12px;
/* Reset esplicito dei valori del round 2 (bottom/left). */
bottom: auto;
left: auto;
z-index: 4;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease;
transform: translateY(4px);
}
/* Override condizionale: card SENZA badge sold out → wishlist sale a
* top:12px (occupa la posizione che il badge avrebbe avuto).
*
* :has() supportato da:
* Chrome/Edge ≥105, Safari ≥15.4, Firefox ≥121
* Globale Can I Use: >94% al maggio 2026
*
* Fallback graceful: browser senza :has() ignorano questa regola e
* cadono sulla regola precedente (top:50px). Niente errori, niente
* layout shift — solo un po' di spazio vuoto sopra il cuoricino su
* browser molto vecchi. Trade-off accettabile.
*
* Selettore: se .product-inner NON contiene .badge.out-of-stock al suo
* interno, applica top:12px alla wishlist annidata. */
.products .product.et-listing-style1 .product-inner:not(:has(.badge.out-of-stock)) .yith-add-to-wishlist-button-block {
top: 12px;
}
.products .product.et-listing-style1 .product-inner:hover .yith-add-to-wishlist-button-block {
opacity: 1;
transform: translateY(0);
}
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button,
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button--anchor {
display: flex !important; /* override eventuali style YITH inline */
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
transition: var(--m-loop-transition);
color: var(--m-loop-black);
text-decoration: none;
padding: 0;
margin: 0;
}
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button:hover,
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button--anchor:hover {
background: var(--m-loop-teal);
color: #fff;
transform: scale(1.05);
}
.products .product.et-listing-style1 .yith-wcwl-icon-svg,
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button__label {
display: none !important; /* mai mostrare il testo "Aggiungi alla lista..." nella card */
}
/* Stato "già in wishlist": cuoricino pieno rosso (gestito da YITH) */
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button.exists,
.products .product.et-listing-style1 .yith-wcwl-add-to-wishlist-button[data-product-id].exists {
background: rgba(255, 255, 255, 0.95);
color: var(--m-loop-red-badge);
}
/* ── 8. CAPTION + TITLE (line-clamp 2) ───────────────────── */
.products .product.et-listing-style1 .product-title h2 {
font-size: 14px !important; /* override legacy `font-size: 16px !important` (style.css:900) */
font-weight: 500 !important; /* override legacy `font-weight: 400 !important` */
line-height: 1.35;
margin: 0 0 10px 0;
color: var(--m-loop-black);
text-transform: none; /* override `.et-listing-style1 .product-title { text-transform: uppercase }` (style.css:891) */
}
.products .product.et-listing-style1 .product-title h2 a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
text-decoration: none;
min-height: calc(14px * 1.35 * 2);
}
.products .product.et-listing-style1 .product-excerpt {
display: none;
}
/* ── 9. PREZZI — order esplicito retail → percentuale → prezzo ─
*
* Ordine corretto: retail barrato (1) → badge -% (2) → prezzo corrente (3).
* style.css legacy assegna order:2 a .regular-price-perc ma non assegna
* order a .price, che cade su 0 di default e finisce PRIMA della
* percentuale. Forziamo qui order espliciti su tutti e 3 gli elementi. */
.products .product.et-listing-style1 .product_after_shop_loop_price {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.products .product.et-listing-style1 .product_after_shop_loop_price .prezzo-retail {
order: 1;
font-size: 13px;
color: var(--m-loop-gray-text);
text-decoration: line-through;
margin: 0;
}
.products .product.et-listing-style1 .product_after_shop_loop_price .prezzo-retail del {
text-decoration: line-through;
color: var(--m-loop-gray-text) !important; /* override legacy `.products .price del { color: #000 !important; opacity: 1 }` (style.css:935) */
opacity: 1;
font-size: 13px;
}
/* Badge piccolo accanto al prezzo (esistente in DOM, restyle).
* order: 2 → si posiziona TRA retail e price. */
.products .product.et-listing-style1 .regular-price-perc {
order: 2;
background: var(--m-loop-red-badge);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
line-height: 1.4;
}
/* Prezzo corrente — order: 3 → ultimo elemento della riga. */
.products .product.et-listing-style1 .product_after_shop_loop_price .price {
order: 3;
font-size: 18px;
font-weight: 700 !important; /* allineato al legacy che ha già !important */
color: var(--m-loop-black);
margin: 0;
}
.products .product.et-listing-style1 .product_after_shop_loop_price .price .amount {
font-size: 18px;
font-weight: 700;
color: var(--m-loop-black);
}
.products .product.et-listing-style1 .product_after_shop_loop_price .price del {
display: none; /* il retail barrato è gestito da .prezzo-retail; evita doppione del WC nativo */
}
/* ── 10. BUTTON ATC ──────────────────────────────────────── */
.products .product.et-listing-style1 .product_after_title {
min-height: 0; /* override legacy min-height: 35px che lascia spazio vuoto */
}
.products .product.et-listing-style1 .after_shop_loop_actions {
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: auto;
}
/* L'icona PNG di sfondo (.button.product_type_*::before) resta invariata
* dalle regole legacy in style.css. Qui sovrascriviamo solo wrapper. I
* !important sono necessari perché lo style.css legacy applica già
* !important su padding/border-radius (style.css:1003-1005, 1039-1041). */
.products .product.et-listing-style1 .button.product_type_simple,
.products .product.et-listing-style1 .button.product_type_variable {
width: 36px;
height: 36px;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
flex-shrink: 0;
transition: var(--m-loop-transition);
}
.products .product.et-listing-style1 .button.product_type_simple:before,
.products .product.et-listing-style1 .button.product_type_variable:before {
width: 18px;
height: 18px;
margin: 0;
}
/* ── 10.1 — Nascondi link "Visualizza carrello" post-AJAX ─────
*
* Dopo l'add-to-cart AJAX dal loop, WooCommerce/Goya inietta un
* accanto al bottone originale.
* Sulla card del loop questo crea due cerchi neri affiancati e una
* UX confusa.
*
* Lo nascondiamo perché il feedback dell'aggiunta al carrello è già
* gestito dal sidecart Goya che si apre automaticamente, mostrando
* conferma prodotto, link al carrello/checkout, counter aggiornato
* sull'icona cart header.
*
* Il link `.added_to_cart` resta in DOM (nascosto solo visivamente)
* per non rompere eventuali integrazioni JS che potrebbero leggerlo.
*
* !important: WC può applicare display:inline-block inline via JS al
* momento dell'iniezione AJAX. Senza !important la nostra regola
* perderebbe la cascade contro l'inline style. */
.products .product.et-listing-style1 .after_shop_loop_actions .added_to_cart,
.products .product.et-listing-style1 .added_to_cart {
display: none !important;
}
/* ── 11. SLICK ARROWS (related slider) ───────────────────── */
/* ── 11.1 — Slick-list: padding ombre + full-bleed escape ────
*
* Padding verticale 20px + margin compensativo -20px: lo slick-list
* ha overflow:hidden di default che taglierebbe la box-shadow delle
* card (blur 32px). Il margin negativo verticale annulla l'effetto
* sul layout esterno (titolo h2 sopra e contenuto sotto restano alle
* stesse distanze).
*
* Pattern "full-bleed inside contained" (vedi §2):
* - Il parent .container è 1420px centrato (h2 allineato col resto
* del template prodotto)
* - La slick-list "evade" dal container con margin-left negativo
* calcolato come metà della differenza tra viewport e container:
* (100vw - 100%) / 2 dove 100% = larghezza del .container parent
* - width: 100vw forza la slick-list a occupare tutto il viewport
* - padding-left: 10px lascia 10px di aria alla prima card dal bordo
* sinistro del viewport (no incollamento)
*
* Su viewport ≤1420px il calc produce 0 (100vw == 100% del container
* che riempie tutto), quindi tutto si comporta come "dentro il
* container" senza overflow.
*
* NB: padding-right NON impostato — lo slick-track eccede naturalmente
* a destra durante lo scroll del carosello, un padding-right qui
* sarebbe inefficace (le card passano comunque sotto al viewport
* durante l'animazione).
*
* !important sul padding verticale: slick-slider applica padding:0
* inline su .slick-list nel suo bootstrap JS; senza !important la
* nostra regola perderebbe nella cascade contro l'inline style. */
.related.products .slick-list,
.upsells.products .slick-list {
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: -20px;
margin-bottom: -20px;
width: 100vw;
margin-left: calc(-1 * (100vw - 100%) / 2);
padding-left: 10px;
}
.related.products .slick-arrow {
width: 40px;
height: 40px;
background: #fff !important; /* Goya/slick può applicare bg trasparente */
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
display: flex !important; /* override eventuale display:block inline iniettato da slick */
align-items: center;
justify-content: center;
z-index: 5;
transition: var(--m-loop-transition);
color: var(--m-loop-black);
border: none;
}
.related.products .slick-arrow::before {
/* Slick di default usa pseudo-element con font icon. Lo nascondiamo
* perché Goya stampa direttamente