/** Adattamenti per schermi piccoli. Le aree di tocco non scendono sotto 44px.
 *
 * UN COMPONENTE, UN FILE
 * ----------------------
 * Qui restano solo gli adattamenti di cio' che non ha un foglio proprio: le
 * griglie generiche, la scheda prodotto, le tabelle di WooCommerce.
 *
 * Header, topbar e footer **non passano piu' di qui**. Le loro regole per
 * schermo stretto stanno in `header.css` e `footer.css`, accanto alla
 * definizione desktop. Tenerne meta' qui e' costato caro due volte: questo
 * foglio viene caricato *dopo* gli altri, quindi vinceva senza che si vedesse
 * — il footer nuovo a due colonne tornava a tre, e il testo della topbar
 * scendeva a 11,5 px scavalcando il minimo che il progetto si e' dato.
 * E' la stessa ragione per cui la hero era gia' stata riportata in `home.css`.
 */

@media (max-width: 1080px) {
    .st-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .st-product__head { grid-template-columns: 1fr; }
    .st-split { grid-template-columns: 1fr; gap: var(--st-space-4); }
    .st-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .st-section { padding-block: var(--st-space-5); }
    .st-grid--3, .st-grid--4 { grid-template-columns: 1fr; }

    /* Nessuna tabella a scorrimento orizzontale: le righe diventano blocchi. */
    .woocommerce table.shop_table_responsive tr { display: block; margin-bottom: var(--st-space-3); }
    .woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; }
}