/* ===================================================================== Gruppo Cabrini - cornice delle liste prodotto (shop, categorie, tag) Sta in un file suo, e non in style.css, perche' style.css e' un file preesistente della produzione: sovrascriverlo significherebbe buttare via le modifiche fatte online dopo il 3 agosto 2026. Questo foglio si aggiunge e basta. RICHIEDE le funzioni in functions-snippet.php: la classe .cc-shop-grid sul e il contenitore .cc-loop-thumb attorno alla miniatura. Senza quelle nessun selettore qui sotto aggancia niente. ===================================================================== */ /* ---------- liste prodotto: cornice e altezze bloccate (shop, categorie) ---------- La classe .cc-shop-grid la mette functions.php su shop, categorie e tag prodotto: i widget prodotto di Elementor (home, correlati) restano fuori. Il selettore ripete anche .woocommerce perche' sono la stessa classe sul , e serve a battere la specificita' di woocommerce-smallscreen.css. */ /* Il rosso della cornice: cambiando questa variabile cambiano bordo e hover di tutte le card. I bottoni WooCommerce del sito sono #A91B2C (forzato con !important da Aspetto > Personalizza > CSS aggiuntivo, ed e' anche il --e-global-color-primary del kit Elementor): per allineare la cornice a quel rosso basta sostituire i due valori qui sotto. */ .cc-shop-grid.woocommerce ul.products { --cc-cornice: #942F2E; --cc-cornice-ombra: 148, 47, 46; } /* WooCommerce impagina le card con i float: con card di altezza diversa le righe si sfalsano (il bottone di una riga finisce sopra l'immagine della successiva). Con la griglia le righe restano sempre allineate. */ .cc-shop-grid.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0 0 2em; padding: 0; } /* i clearfix del float diventerebbero celle vuote della griglia */ .cc-shop-grid.woocommerce ul.products::before, .cc-shop-grid.woocommerce ul.products::after { content: none; } .cc-shop-grid.woocommerce ul.products.columns-1 { grid-template-columns: 1fr; } .cc-shop-grid.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); } .cc-shop-grid.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } .cc-shop-grid.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); } .cc-shop-grid.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); } /* la cornice */ .cc-shop-grid.woocommerce ul.products li.product, .cc-shop-grid.woocommerce ul.products[class*="columns-"] li.product { display: flex; flex-direction: column; float: none; clear: none; width: auto; margin: 0; padding: 15px; background: #fff; border: 2px solid var(--cc-cornice); border-radius: 10px; transition: box-shadow .25s ease, transform .25s ease; } .cc-shop-grid.woocommerce ul.products li.product:hover { box-shadow: 0 8px 20px rgba(var(--cc-cornice-ombra), .18); transform: translateY(-3px); } /* Il link avvolge immagine, titolo e prezzo: occupa tutta l'altezza della card cosi' il prezzo si appoggia in basso e il bottone resta alla stessa quota in tutte le card, anche con i titoli su due righe. */ .cc-shop-grid.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; } .cc-shop-grid.woocommerce ul.products li.product .price { margin-top: auto; } .cc-shop-grid.woocommerce ul.products li.product .button { align-self: flex-start; } /* Il contenitore dell'immagine: altezza bloccata (quadrata, come le miniature WooCommerce), l'immagine si ridimensiona dentro senza deformarsi. */ .cc-shop-grid.woocommerce ul.products li.product .cc-loop-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; margin-bottom: 10px; } .cc-shop-grid.woocommerce ul.products li.product .cc-loop-thumb:empty { display: none; } .cc-shop-grid.woocommerce ul.products li.product .cc-loop-thumb img { width: 100%; height: 100%; object-fit: contain; margin: 0; } @media (max-width: 1024px) { .cc-shop-grid.woocommerce ul.products, .cc-shop-grid.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (max-width: 767px) { .cc-shop-grid.woocommerce ul.products, .cc-shop-grid.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); gap: 15px; } /* woocommerce-smallscreen.css rimette width:48% sulle card */ .cc-shop-grid.woocommerce ul.products[class*="columns-"] li.product, .cc-shop-grid.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) { float: none; width: auto; margin: 0; padding: 10px; } } @media (max-width: 420px) { .cc-shop-grid.woocommerce ul.products, .cc-shop-grid.woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr; } }