/** * Archivi: categorie prodotto, negozio, risultati di ricerca. * * WooCommerce impagina la griglia con i float (`ul.products li.product { float:left }`): * qui diventa una griglia CSS, che si adatta da sola e non ha bisogno di clearfix. * * Ogni regola parte da `.gs-classic-archive` (classe sul ): serve a battere * `.elementor-kit-NNNN X` (0,1,1), che altrimenti vince su ogni selettore a classe singola. */ .gs-classic-archive { --gs-accent: #f0662b; --gs-accent-t: #c2410c; /* testo e pulsanti: contrasto 5,2:1 su bianco */ --gs-ink: #1a1613; --gs-cream: #f7f3ec; --gs-line: #e6ded2; --gs-mute: #6b625c; } .gs-classic-archive .content-area, .gs-classic-archive .site-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; float: none; } /* ---------------- testata dell'archivio ---------------- */ .gs-classic-archive .woocommerce-breadcrumb { margin: 18px 0 14px; padding: 0; font-size: 13px; color: var(--gs-mute); } .gs-classic-archive .woocommerce-breadcrumb a { color: var(--gs-mute); text-decoration: none; } .gs-classic-archive .woocommerce-breadcrumb a:hover { color: var(--gs-accent-t); } .gs-classic-archive .woocommerce-products-header { margin: 0 0 6px; } .gs-classic-archive .woocommerce-products-header__title, .gs-classic-archive .page-title { margin: 0 0 10px; font-size: 34px; line-height: 1.2; font-weight: 800; color: var(--gs-ink); } /* La descrizione della categoria è testo indicizzato: deve leggersi, non nascondersi. */ .gs-classic-archive .term-description { max-width: 780px; margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: #4a423d; } .gs-classic-archive .term-description p:last-child { margin-bottom: 0; } .gs-classic-archive .gs-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 12px 0; border-top: 1px solid var(--gs-line); border-bottom: 1px solid var(--gs-line); } .gs-classic-archive .woocommerce-result-count { margin: 0; font-size: 13.5px; color: var(--gs-mute); } .gs-classic-archive .woocommerce-ordering { margin: 0; } .gs-classic-archive .woocommerce-ordering select { height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--gs-line); border-radius: 8px; background: #fff; font-size: 14px; color: var(--gs-ink); } /* ---------------- griglia ---------------- */ .gs-classic-archive ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 34px; padding: 0; list-style: none; } .gs-classic-archive ul.products::before, .gs-classic-archive ul.products::after { display: none; /* il clearfix dei float non serve più */ } .gs-classic-archive ul.products li.product { display: flex; flex-direction: column; width: auto; margin: 0; padding: 14px; float: none; clear: none; border: 1px solid var(--gs-line); border-radius: 14px; background: #fff; text-align: left; height: 100%; transition: box-shadow .18s, transform .18s; } .gs-classic-archive ul.products li.product:hover { box-shadow: 0 12px 30px rgba(26, 22, 19, .1); transform: translateY(-2px); } .gs-classic-archive ul.products li.product a img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 0 12px; border-radius: 10px; background: var(--gs-cream); } .gs-classic-archive ul.products li.product .woocommerce-loop-product__title, .gs-classic-archive ul.products li.product .woocommerce-loop-category__title { /* due righe riservate: senza, i prezzi e i pulsanti ballano da una card all'altra */ min-height: 2.8em; margin: 0 0 8px; padding: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--gs-ink); } .gs-classic-archive ul.products li.product a { text-decoration: none; color: inherit; } .gs-classic-archive ul.products li.product .price { display: block; margin: auto 0 12px; padding-top: 8px; font-size: 17px; font-weight: 700; color: var(--gs-accent-t); } .gs-classic-archive ul.products li.product .price del { margin-right: 6px; font-size: 14px; font-weight: 500; color: var(--gs-mute); opacity: .8; } .gs-classic-archive ul.products li.product .price ins { text-decoration: none; } .gs-classic-archive .gs-from, .gs-classic-archive ul.products li.product .price .gs-from { font-size: 12.5px; font-weight: 600; color: var(--gs-mute); } .gs-classic-archive ul.products li.product .button, .gs-classic-archive ul.products li.product .added_to_cart { display: block; margin: 0; padding: 10px 14px; border: 0; border-radius: 9px; background: var(--gs-accent-t); color: #fff; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; } .gs-classic-archive ul.products li.product .button:hover { background: #a8360a; color: #fff; } .gs-classic-archive ul.products li.product .added_to_cart { margin-top: 8px; background: var(--gs-cream); color: var(--gs-ink); } /* Il conteggio delle sottocategorie: era un mark evidenziato in giallo. */ .gs-classic-archive ul.products li.product-category mark, .gs-classic-archive ul.products li.product-category .count { padding: 1px 7px; border-radius: 20px; background: var(--gs-cream); color: var(--gs-mute); font-size: 12px; font-weight: 600; } .gs-classic-archive .onsale { position: absolute; top: 20px; left: 20px; z-index: 2; min-height: 0; min-width: 0; margin: 0; padding: 4px 10px; border-radius: 20px; background: var(--gs-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; } .gs-classic-archive ul.products li.product { position: relative; } /* ---------------- paginazione ---------------- */ .gs-classic-archive .woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; margin: 0 0 40px; padding: 0; border: 0; list-style: none; } .gs-classic-archive .woocommerce-pagination li { border: 0; margin: 0; } .gs-classic-archive .woocommerce-pagination a, .gs-classic-archive .woocommerce-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--gs-line); border-radius: 9px; background: #fff; color: var(--gs-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .gs-classic-archive .woocommerce-pagination a:hover { border-color: var(--gs-accent-t); color: var(--gs-accent-t); background: #fff; } .gs-classic-archive .woocommerce-pagination span.current { background: var(--gs-accent); border-color: var(--gs-accent-t); color: #fff; } /* ---------------- nessun risultato ---------------- */ .gs-classic-archive .woocommerce-info, .gs-classic-archive .woocommerce-no-products-found { margin: 0 0 30px; padding: 16px 18px; border: 1px solid var(--gs-line); border-left: 4px solid var(--gs-accent); border-radius: 10px; background: var(--gs-cream); color: var(--gs-ink); font-size: 14.5px; } .gs-classic-archive .woocommerce-info::before { display: none; } /* ---------------- responsive ---------------- */ @media (max-width: 1024px) { .gs-classic-archive ul.products { grid-template-columns: repeat(3, 1fr); gap: 16px; } .gs-classic-archive .woocommerce-products-header__title, .gs-classic-archive .page-title { font-size: 27px; } } @media (max-width: 720px) { .gs-classic-archive ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gs-classic-archive ul.products li.product { padding: 10px; } .gs-classic-archive ul.products li.product .woocommerce-loop-product__title { font-size: 14px; } .gs-classic-archive .gs-barra { gap: 10px; } } /* ---------------- "Hai bisogno di aiuto?" in fondo alla categoria ---------------- Il markup arriva da gs-core (lo stesso della scheda prodotto), ma lo stile del plugin è legato a .single-product: qui serve il suo. */ .gs-classic-archive .gs-ar-aiuto { max-width: 1240px; margin: 0 auto 40px; padding: 0 20px; box-sizing: border-box; } .gs-classic-archive .gs-sec-aiuto { margin: 0; padding: 22px 24px; border: 1px solid var(--gs-line); border-left: 4px solid var(--gs-accent); border-radius: 14px; background: var(--gs-cream); } .gs-classic-archive .gs-sec-aiuto h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--gs-ink); } .gs-classic-archive .gs-sec-aiuto p { max-width: 640px; margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: #4a423d; } .gs-classic-archive .gs-aiuto-canali { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .gs-classic-archive .gs-aiuto-canali a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--gs-line); border-radius: 9px; background: #fff; color: var(--gs-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .gs-classic-archive .gs-aiuto-canali a:hover { border-color: var(--gs-accent-t); color: var(--gs-accent-t); } .gs-classic-archive .gs-aiuto-canali svg { width: 17px; height: 17px; color: var(--gs-accent-t); } /* Pagine convertite (legali, offerte, contatti): titolo e larghezza leggibile. Le pagine con [products] usano già .gs-classic-archive; le altre no, quindi si stilizza il contenitore generico del tema. */ .gs-pagina-titolo{ max-width: 1240px; margin: 24px auto 18px; padding: 0 20px; font-size: 32px; line-height: 1.15; font-weight: 800; color: #1a1613; box-sizing: border-box; } .gs-pagina-pay{ max-width: 1240px; margin: 22px auto 0; padding: 14px 20px; font-size: 14.5px; color: #6b625c; box-sizing: border-box; }