/**
* GLIFO EDIZIONI — category.css
* -----------------------------------------------------------------
* Vestizione della lista prodotti di categoria HikaShop
* (markup nativo .hikashop_products / .hk-row-fluid / .hkc-md-N).
*
* Nessun override PHP: il markup per singolo prodotto
* (.hikashop_listing_img_title) è lo stesso già usato nello slider
* home (vedi slider.css) — qui lo vestiamo per il contesto "griglia
* di lista" invece che "carosello".
*
* Colonne per riga: gestite da HikaShop via pannello (classi native
* .hkc-md-N con larghezza in percentuale) — qui aggiungiamo solo il
* gutter tra le card, non tocchiamo le larghezze.
*
* Selettore quantità: disattivato da pannello HikaShop (voce di menu
* → Opzioni HikaShop → Campo quantità → No), non da qui.
*
* Layout interno: CSS Grid con aree nominate invece di flex+order.
* Motivo: il badge di scorte basse ("1 elementi in magazzino") deve
* sovrapporsi alla copertina invece di occupare spazio proprio — con
* la griglia basta assegnargli la stessa grid-area dell'immagine,
* senza calcoli di posizionamento assoluto (che qui non funzionerebbe:
* il badge non è annidato dentro il contenitore immagine nel markup,
* è un fratello più in basso nel DOM).
* -----------------------------------------------------------------
*/
/* --- Modulo "Ti potrebbero interessare" (prodotti correlati) sulla
pagina del singolo prodotto: stesso markup .hikashop_products già
vestito sopra, qui aggiungiamo solo lo spazio di separazione dal
contenuto della scheda prodotto che sta subito sopra. Il titolo h2
("Ti potrebbero interessare") non serve vestirlo: eredita già la
tipografia dei titoli di sezione dalla regola globale
".site-glifo h2" in user.css.
ATTENZIONE: .hikashop_category_information da sola NON basta come
selettore — HikaShop la riusa identica anche come contenitore
principale delle pagine di categoria/sottocategoria (bug reale,
risolto il 17/07/2026: il bordo comparve su tutte le liste). La
vera differenza è che il modulo vive dentro un wrapper .hikashop_module
(è un modulo Joomla vero), le pagine di categoria no — ci si
aggancia a quello. --- */
.hikashop_module .hikashop_category_information {
margin-top: 24px;
}
.hikashop_products .hikashop_container {
padding: 10px 10px 34px 10px;
box-sizing: border-box;
}
/* --- .hikashop_subcontainer ha solo un min-height inline (impostato
da HikaShop stesso per uniformare l'altezza di ogni riga di
prodotti) — un div con solo min-height NON passa quell'altezza ai
figli in percentuale (è "auto", non un valore definito). Rendendolo
un contenitore flex, il suo spazio effettivo diventa realmente
disponibile al figlio sottostante (flex risolve l'altezza usata
PRIMA di posizionare i figli, a differenza del block layout
normale) — è quello che permette allo spacer elastico qui sotto di
funzionare davvero. --- */
.hikashop_products .hikashop_subcontainer {
display: flex !important;
flex-direction: column !important;
}
/* --- Padding tra il bordo (opzione nativa HikaShop, classe
.hikashop_subcontainer_border) e il contenuto della card --- */
.hikashop_products .hikashop_subcontainer_border {
padding: 10px !important;
}
/* --- Griglia della card: immagine / nome / prezzo / spazio
elastico / bottone. Il nome NON ha più un'altezza fissa a 2 righe:
nome e prezzo restano sempre "attaccati" (1 o 2 righe di titolo),
ed è la riga vuota "spacer" (1fr) subito sotto il prezzo ad
assorbire lo spazio in eccesso quando il titolo è più corto —
così il bottone resta comunque allineato in fondo alla card,
sfruttando l'altezza di riga già uniformata da HikaShop stesso
(il min-height inline su .hikashop_subcontainer, calcolato
automaticamente per ogni riga di prodotti).
!important: il CSS nativo HikaShop (fuori ) arriva dopo il
nostro e vince a parità di specificità (stesso problema già visto
nel checkout). --- */
.hikashop_products .hikashop_listing_img_title {
display: grid !important;
grid-template-areas:
"image"
"name"
"price"
"spacer"
"button" !important;
grid-template-rows: auto auto auto 1fr auto;
row-gap: 10px;
flex: 1 !important;
min-height: 0;
}
/* --- Immagine copertina: stessa cella "image" del badge scorte.
Niente margin-bottom qui: lo spazio tra le righe della card arriva
dal row-gap sopra, altrimenti il margine allarga la cella "image"
oltre il bordo reale della foto e il badge overlay finisce fuori
posizione (sotto la copertina invece che sopra, in basso). --- */
.hikashop_products .hikashop_product_image {
grid-area: image !important;
position: relative;
}
.hikashop_products .hikashop_product_image_subdiv a {
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--g-radius-sm);
background: var(--g-menu-bg);
}
.hikashop_products .hikashop_product_listing_image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Nome prodotto: altezza fissa a 2 righe, titoli da 1 riga
lasciano semplicemente la seconda riga vuota — evita che la card
si disallinei quando i titoli hanno lunghezze diverse --- */
.hikashop_products .hikashop_product_name {
grid-area: name !important;
display: block;
}
.hikashop_products .hikashop_product_name a {
font-size: var(--g-fs-body);
font-weight: 700;
line-height: 1.3;
color: var(--g-mid);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hikashop_products .hikashop_product_name a:hover { color: var(--g-ink); }
/* --- Prezzo --- */
.hikashop_products .hikashop_product_price_full {
grid-area: price !important;
display: block;
}
.hikashop_products .hikashop_product_price {
font-size: var(--g-fs-body);
font-weight: 600;
color: var(--g-rust);
}
.hikashop_products .hikashop_product_price_per_unit {
font-size: var(--g-fs-caption);
color: var(--g-text-muted);
}
/* --- Codice prodotto: non lo mostriamo in lista --- */
.hikashop_products .hikashop_product_code_list {
display: none;
}
/* --- Bottone "Aggiungi al carrello". Con il campo quantità
disattivato da pannello, HikaShop toglie anche il