/* ========================================================================== PAGINA SINGOLA PRODOTTO — WooCommerce Caricato solo su is_product() (vedi inc/woocommerce.php). Nessun template del plugin è stato toccato: qui si riveste il markup che WooCommerce stampa da sé (stesso criterio di assets/css/lp-course.css per LearnPress). Tutto scoped su .single-product, la classe che WordPress aggiunge da solo al di ogni pagina prodotto. La testata (.dz-wc-hero) è costruita da zero su misura, stessa struttura di .lp-single-course__header in lp-course.css — non è .dz-hero delle altre pagine del sito: qui il titolo è quello vero del prodotto, non un'etichetta fissa. Impaginato a due colonne come la pagina corso di LearnPress: a sinistra un pannello STICKY con la foto del prodotto (niente gallery di WooCommerce: zoom/lightbox/miniature tolti, solo l'immagine in evidenza), titolo, descrizione breve, prezzo e bottone d'acquisto (stampato in inc/woocommerce.php dentro .dz-wc-left); a destra .summary.entry-summary — il markup che WooCommerce stampa comunque e non possiamo rinominare — con attributi, descrizione e meta, che scorrono normalmente. 0. Contenitore e due colonne 1. Testata: copertina, briciole, titolo, docente, azioni 2. Pannello sinistro: foto del prodotto 3. Pannello sinistro: descrizione breve, prezzo, nota, disponibilità 4. Pannello sinistro: quantità e bottone d'acquisto 5. Colonna destra: attributi (righe, non tabella) 6. Colonna destra: descrizione 7. Colonna destra: meta (SKU, categoria, tag) 8. Prodotti correlati 9. Elementi di WooCommerce non usati 10. Responsive ========================================================================== */ /* 0. Contenitore e due colonne ============================================== */ /* Ogni blocco gestisce la propria larghezza massima, come .dz-corsi-wrap: non contiamo su un contenitore ambiente del tema padre. La testata fa eccezione apposta: è lei a tutta larghezza. */ .single-product div.product, .single-product .related.products, .single-product .upsells.products, .single-product .woocommerce-notices-wrapper { max-width: var(--dz-container, 1280px); margin-inline: auto; } .single-product div.product { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); } /* 1. Testata ================================================================ */ /* Stessa struttura di .lp-single-course__header (lp-course.css): copertina fissa con velo scuro, briciole, titolo, docente, azioni. Duplicato invece che condiviso perché i due contesti (pagina corso LearnPress, pagina prodotto WooCommerce) non hanno un genitore comune da agganciare. */ .single-product .dz-wc-hero { /* Percorso dalla radice del sito: cambia questa riga per cambiare la foto — vale per tutte le pagine prodotto. Stessa logica di --dzc-hero-img in lp-course.css. */ --dz-wc-hero-img: url("/wp-content/uploads/2021/04/inpresenzaheader.jpg"); --dz-wc-hero-velo-alto: rgba(0, 0, 0, 0.30); --dz-wc-hero-velo-medio: rgba(0, 0, 0, 0.55); --dz-wc-hero-velo-basso: rgba(0, 0, 0, 0.86); position: relative; display: flex; align-items: flex-end; min-height: clamp(300px, 34vw, 460px); overflow: hidden; /* Il nero sotto si vede finché la foto carica, e resta se il file manca. */ background-color: var(--dz-nero-puro, #000); background-image: var(--dz-wc-hero-img); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--dz-bianco, #fff); } .single-product .dz-wc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, var(--dz-wc-hero-velo-alto) 0%, var(--dz-wc-hero-velo-medio) 52%, var(--dz-wc-hero-velo-basso) 100% ); } .single-product .dz-wc-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--dz-container, 1280px); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem); } /* --- Briciole di pane --- */ .single-product .dz-wc-hero .woocommerce-breadcrumb { display: block; margin: 0 0 1.5rem; color: rgba(255, 255, 255, 0.75); font-family: var(--dz-font-ui, inherit); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .single-product .dz-wc-hero .woocommerce-breadcrumb a { color: var(--dz-bianco, #fff); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dz-transizione, 240ms ease); } .single-product .dz-wc-hero .woocommerce-breadcrumb a:hover, .single-product .dz-wc-hero .woocommerce-breadcrumb a:focus-visible { border-bottom-color: currentColor; } /* --- Titolo --- */ .single-product .dz-wc-hero__title { max-width: 24ch; margin: 0 0 1.5rem; color: var(--dz-bianco, #fff); font-family: var(--dz-font-titoli, inherit); font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.06; text-transform: uppercase; } /* --- Docente: l'autore WordPress del prodotto (vedi shop-hero.php) --- */ .single-product .dz-wc-hero__docente { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.75rem; font-family: var(--dz-font-ui, inherit); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } .single-product .dz-wc-hero__docente-by { color: rgba(255, 255, 255, 0.68); letter-spacing: 0.14em; } .single-product .dz-wc-hero__avatar { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; /* Il filetto stacca la foto dallo sfondo qualunque cosa ci sia dietro. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.16); } .single-product .dz-wc-hero__docente-nome { color: var(--dz-bianco, #fff); font-weight: 600; } /* --- Azioni: "Condividi" e "Contatta il docente" --- Stesso linguaggio a pillola bianca-su-nero-che-si-inverte di .dz-azioni in lp-course.css, duplicato qui per lo stesso motivo della testata: scope diverso (.single-product, non .lp-single-course). Il modale di "Contatta il docente" (.dz-modal) resta quello generico di assets/css/dz-modal.css, non toccato. */ .single-product .dz-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .single-product .dz-azioni__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: var(--dz-bianco, #fff); font-family: var(--dz-font-ui, inherit); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color var(--dz-transizione, 240ms ease), border-color var(--dz-transizione, 240ms ease), color var(--dz-transizione, 240ms ease); } .single-product .dz-azioni__btn:hover, .single-product .dz-azioni__btn:focus-visible { background: var(--dz-bianco, #fff); border-color: var(--dz-bianco, #fff); color: var(--dz-nero-puro, #000); } .single-product .dz-azioni__icona { width: 1rem; height: 1rem; flex: 0 0 auto; } /* 2. Pannello sinistro: galleria ============================================ */ /* Sticky come la scheda d'acquisto della pagina corso (.lp-single-course-main__right__inner in lp-course.css): sale con lo scroll finché la colonna di destra (più lunga) non finisce. */ .single-product .dz-wc-left { position: sticky; top: calc(var(--dz-h-sticky, 64px) + 1.25rem); flex: 0 0 380px; width: 380px; padding: 0; border: 1px solid var(--dz-nero-puro, #000); background: var(--dz-bianco, #fff); } /* Solo la foto in evidenza, niente gallery di WooCommerce (zoom, lightbox, miniature — tolta lato PHP, vedi inc/woocommerce.php): un'immagine sola, a piena larghezza del pannello, bordo a bordo (il pannello non ha padding suo). Nessun ritaglio forzato: le copertine hanno spesso testo dentro l'immagine, un aspect-ratio ne taglierebbe un pezzo — stessa scelta fatta per .course-img in lp-course.css. */ .single-product .dz-wc-left__img { display: block; width: 100%; height: auto; margin: 0; background: var(--dz-grigio, #f4f4f4); } /* Titolo, prezzo e bottone invece hanno il loro respiro: un padding tutto loro, separato da quello (assente) del pannello. */ .single-product .dz-wc-left__body { padding: 15px; } /* 3. Pannello sinistro: descrizione breve, prezzo, nota, disponibilità ======= */ /* Niente titolo qui (vedi inc/woocommerce.php): l'unico H1 della pagina è quello nella testata. */ .single-product .dz-wc-left .woocommerce-product-details__short-description { margin-bottom: 1.25rem; color: var(--dz-nero, #1a1a1a); font-size: 14px; line-height: 1.65; font-weight: 400; } .single-product .dz-wc-left .woocommerce-product-details__short-description a { color: var(--dz-nero, #1a1a1a); text-decoration: underline; text-underline-offset: 0.2em; } /* Font UI invece di Kiona e un !important sul colore: senza, il prezzo torna al colore dell'Accento di Elementor — succede perché .woocommerce-Price-amount è più in profondità nel markup e la palette del kit lo intercetta con una regola più mirata della nostra. */ .single-product .dz-wc-left p.price, .single-product .dz-wc-left p.price .woocommerce-Price-amount, .single-product .dz-wc-left span.price, .single-product .dz-wc-left span.price .woocommerce-Price-amount { margin: 0 0 0.5rem; color: var(--dz-nero-puro, #000) !important; font-family: var(--dz-font-ui, inherit); font-size: 1.5rem; font-weight: 600; line-height: 1.2; } .single-product .dz-wc-left p.price del, .single-product .dz-wc-left span.price del { color: var(--dz-grigio-testo, #6b6b6b); font-size: 0.6em; font-weight: 400; opacity: 1; text-decoration: line-through; } .single-product .dz-wc-left p.price ins, .single-product .dz-wc-left span.price ins { text-decoration: none; background: none; } /* --- Nota sotto il prezzo (campo "Nota di acquisto", vedi inc/woocommerce.php) --- */ .single-product .dz-wc-left .dz-wc-nota { margin: 0 0 1.25rem; color: var(--dz-grigio-testo, #6b6b6b); font-size: 0.8125rem; font-style: italic; } /* --- Disponibilità --- */ .single-product .dz-wc-left p.stock { display: inline-block; margin: 0 0 1.25rem; padding: 0 !important; border: 0 !important; color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 12px !important; font-weight: 300 !important; letter-spacing: 0.12em; text-transform: uppercase; } .single-product .dz-wc-left p.stock.out-of-stock { border-color: var(--dz-nero, #1a1a1a); background: var(--dz-nero, #1a1a1a); color: var(--dz-bianco, #fff); } /* 4. Pannello sinistro: quantità e bottone d'acquisto ======================= */ .single-product .dz-wc-left form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.625rem; } /* Niente selettore di quantità in pagina: si acquista un pezzo alla volta, il campo resta nel form (nascosto) con il suo valore di default — chi vuole comprarne di più cambia la quantità nel carrello. */ .single-product .dz-wc-left form.cart .quantity { display: none; } /* Stesso linguaggio a pillola nero pieno / bianco pieno del bottone d'acquisto dei corsi (.course-buttons .lp-button in lp-course.css), con una piccola borsa disegnata via mask invece che come immagine a parte: eredita currentColor, quindi si inverte da sola insieme al testo. Niente "form.cart" nel selettore: serve anche fuori dal form, per il bottone disabilitato "Al momento non disponibile" (vedi inc/woocommerce.php). */ .single-product .dz-wc-left .single_add_to_cart_button, .single-product .dz-wc-left form.cart .button, .single-product .dz-wc-left .wc-variation-selection-needed { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1 1 auto; min-height: 3rem; padding: 0 1.25rem; border: 1px solid var(--dz-nero, #1a1a1a); border-radius: 0; background: var(--dz-nero, #1a1a1a); color: var(--dz-bianco, #fff); font-family: var(--dz-font-ui, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background-color var(--dz-transizione, 240ms ease), color var(--dz-transizione, 240ms ease); } .single-product .dz-wc-left .single_add_to_cart_button::before { content: ""; flex: 0 0 auto; width: 0.9375rem; height: 0.9375rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%2010V6C8%203.79086%209.79086%202%2012%202C14.2091%202%2016%203.79086%2016%206V9.6888M5%2022H19C20.1046%2022%2021%2021.1046%2021%2020V9C21%207.89543%2020.1046%207%2019%207H5C3.89543%207%203%207.89543%203%209V20C3%2021.1046%203.89543%2022%205%2022Z'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%2010V6C8%203.79086%209.79086%202%2012%202C14.2091%202%2016%203.79086%2016%206V9.6888M5%2022H19C20.1046%2022%2021%2021.1046%2021%2020V9C21%207.89543%2020.1046%207%2019%207H5C3.89543%207%203%207.89543%203%209V20C3%2021.1046%203.89543%2022%205%2022Z'%20stroke='%23000000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; } /* Il bottone disabilitato ("Al momento non disponibile") non ha l'icona borsa: non si sta comprando niente. */ .single-product .dz-wc-left .single_add_to_cart_button.disabled::before { content: none; } .single-product .dz-wc-left .single_add_to_cart_button:hover, .single-product .dz-wc-left .single_add_to_cart_button:focus-visible, .single-product .dz-wc-left form.cart .button:hover, .single-product .dz-wc-left form.cart .button:focus-visible { background: var(--dz-bianco, #fff); color: var(--dz-nero, #1a1a1a); } .single-product .dz-wc-left .single_add_to_cart_button.disabled, .single-product .dz-wc-left .single_add_to_cart_button.disabled:hover, .single-product .dz-wc-left .single_add_to_cart_button.disabled:focus-visible { border-color: var(--dz-bordo, #e4e4e4); background: var(--dz-grigio, #f4f4f4); color: var(--dz-grigio-testo, #6b6b6b); cursor: not-allowed; } /* --- Prodotti variabili: variazioni (Città, Data…) --- */ /* Etichetta sopra, select sotto — non fianco a fianco come la tabella di serie: con un'etichetta lunga in un pannello stretto (380px) il testo si spezzava a metà parola. display:block sull'intera tabella la trasforma in un elenco verticale senza toccarne il markup. */ .single-product .dz-wc-left table.variations, .single-product .dz-wc-left table.variations tbody, .single-product .dz-wc-left table.variations tr, .single-product .dz-wc-left table.variations th.label, .single-product .dz-wc-left table.variations td.value { display: block; width: 100%; } .single-product .dz-wc-left table.variations { margin-bottom: 0.25rem; } .single-product .dz-wc-left table.variations tr { margin-bottom: 1rem; } .single-product .dz-wc-left table.variations th.label, .single-product .dz-wc-left table.variations td.value { padding: 0; } .single-product .dz-wc-left table.variations th.label { margin-bottom: 0.5rem; color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .single-product .dz-wc-left table.variations label { display: block; } /* Niente freccia di serie del browser: una nostra, coerente con lo stile piatto del sito (stessa freccia di .dz-corso__freccia, ruotata). */ .single-product .dz-wc-left table.variations select { appearance: none; width: 100%; min-height: 2.75rem; padding: 0 2.25rem 0 0.75rem; border: 1px solid var(--dz-bordo, #e4e4e4); border-radius: 0; background-color: var(--dz-bianco, #fff); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M4%206l4%204%204-4'%20stroke='%231a1a1a'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 0.875rem; cursor: pointer; } .single-product .dz-wc-left table.variations select:focus-visible { outline: 2px solid var(--dz-nero, #1a1a1a); outline-offset: 2px; } /* "Cancella" — un link di testo, non un secondo bottone pieno: annullare una scelta non ha lo stesso peso di comprare. */ .single-product .dz-wc-left .reset_variations { display: inline-block; margin-top: 0.5rem; color: var(--dz-grigio-testo, #6b6b6b); font-family: var(--dz-font-ui, inherit); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 0.2em; } .single-product .dz-wc-left .reset_variations:hover, .single-product .dz-wc-left .reset_variations:focus-visible { color: var(--dz-nero, #1a1a1a); } .single-product .dz-wc-left .woocommerce-variation { margin-bottom: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--dz-bordo, #e4e4e4); } .single-product .dz-wc-left .woocommerce-variation-availability .stock { display: inline-block; margin: 0; padding: 0.3rem 0.625rem; border: 1px solid var(--dz-bordo, #e4e4e4); color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .single-product .dz-wc-left .woocommerce-variation-price .price { font-size: 1.25rem !important; } /* 5. Colonna destra: attributi =============================================== */ /* Righe di testo, non una tabella: più leggero, si legge come una scheda corso invece che come un elenco di specifiche tecniche. */ .single-product .dz-wc-attributi { margin-bottom: 1.75rem; } .single-product .dz-wc-attributi__riga { margin: 0 0 0.625rem; color: var(--dz-nero, #1a1a1a); font-size: 0.9375rem; line-height: 1.6; } .single-product .dz-wc-attributi__riga strong { color: var(--dz-nero-puro, #000); font-family: var(--dz-font-ui, inherit); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* 6. Colonna destra: descrizione ============================================= */ .single-product .dz-wc-descrizione { padding-top: 1.75rem; border-top: 1px solid var(--dz-bordo, #e4e4e4); color: var(--dz-nero, #1a1a1a); font-size: 0.9375rem; line-height: 1.75; } .single-product .dz-wc-descrizione__title { margin: 0 0 1.25rem; color: var(--dz-nero-puro, #000); font-family: var(--dz-font-titoli, inherit); font-size: 1.125rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; } .single-product .dz-wc-descrizione strong { color: var(--dz-nero-puro, #000); } .single-product .dz-wc-descrizione a { color: var(--dz-nero, #1a1a1a); text-decoration: underline; text-underline-offset: 0.2em; } /* 7. Colonna destra: meta (SKU, categoria, tag) ============================== */ .single-product div.product .product_meta { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--dz-bordo, #e4e4e4); color: var(--dz-grigio-testo, #6b6b6b); font-family: var(--dz-font-ui, inherit); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .single-product div.product .product_meta > span { display: block; margin-bottom: 0.375rem; } .single-product div.product .product_meta a { color: var(--dz-nero, #1a1a1a); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dz-transizione, 240ms ease); } .single-product div.product .product_meta a:hover, .single-product div.product .product_meta a:focus-visible { border-bottom-color: currentColor; } /* 8. Prodotti correlati ====================================================== */ .single-product .related.products, .single-product .upsells.products { margin: clamp(3rem, 6vw, 5rem) auto; } .single-product .related.products > h2, .single-product .upsells.products > h2 { margin: 0 0 1.75rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--dz-nero-puro, #000); color: var(--dz-nero-puro, #000); font-family: var(--dz-font-titoli, inherit); font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } .single-product .related.products ul.products, .single-product .upsells.products ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: start; gap: 1.75rem; width: 100%; margin: 0; padding: 0; list-style: none; } /* WooCommerce dà a ogni

un width percentuale e un padding fisso pensati per il suo grid a flex: senza azzerarli qui, con il nostro grid-template-columns la riga si sfalsa. Stesso problema, stessa soluzione già vista per i corsi correlati in lp-course.css. */ .single-product .related.products ul.products li.product, .single-product .upsells.products ul.products li.product { position: relative; display: flex; flex-direction: column; width: 100% !important; margin: 0 !important; padding: 0 !important; min-width: 0; } .single-product .related.products ul.products li.product img, .single-product .upsells.products ul.products li.product img { display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 0.875rem; background: var(--dz-grigio, #f4f4f4); object-fit: cover; border-radius: 0; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .single-product .related.products ul.products li.product a.woocommerce-loop-product__link:hover img, .single-product .upsells.products ul.products li.product a.woocommerce-loop-product__link:hover img { transform: scale(1.04); } .single-product .related.products ul.products li.product .woocommerce-loop-product__title, .single-product .upsells.products ul.products li.product .woocommerce-loop-product__title { margin: 0 0 0.5rem; color: var(--dz-nero-puro, #000); font-family: var(--dz-font-titoli, inherit); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; } .single-product .related.products ul.products li.product .price, .single-product .upsells.products ul.products li.product .price { margin: 0 0 0.875rem; color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 1rem; font-weight: 600; } .single-product .related.products ul.products li.product .price del, .single-product .upsells.products ul.products li.product .price del { margin-right: 0.35em; color: var(--dz-grigio-testo, #6b6b6b); font-size: 0.85em; font-weight: 400; opacity: 1; } .single-product .related.products ul.products li.product .price ins, .single-product .upsells.products ul.products li.product .price ins { text-decoration: none; background: none; } .single-product .related.products ul.products li.product a.button, .single-product .upsells.products ul.products li.product a.button { margin-top: auto; padding: 0.75rem 1rem; border: 1px solid var(--dz-nero, #1a1a1a); border-radius: 0; background: transparent; color: var(--dz-nero, #1a1a1a); font-family: var(--dz-font-ui, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color var(--dz-transizione, 240ms ease), color var(--dz-transizione, 240ms ease); } .single-product .related.products ul.products li.product a.button:hover, .single-product .related.products ul.products li.product a.button:focus-visible, .single-product .upsells.products ul.products li.product a.button:hover, .single-product .upsells.products ul.products li.product a.button:focus-visible { background: var(--dz-nero, #1a1a1a); color: var(--dz-bianco, #fff); } .single-product .related.products ul.products li.product a.button.loading, .single-product .upsells.products ul.products li.product a.button.loading { opacity: 0.6; } /* Badge "Sconto" — stesso trattamento dell'etichetta "in evidenza" dei corsi (.course-featured in lp-course.css). */ .single-product span.onsale { position: absolute; top: 0; left: 0; min-height: 0; margin: 0; padding: 0.375rem 0.75rem; border-radius: 0; background: var(--dz-nero-puro, #000); color: var(--dz-bianco, #fff); font-family: var(--dz-font-ui, inherit); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; } /* 9. Elementi di WooCommerce non usati ======================================= */ /* Le stelline recensioni non fanno parte del linguaggio del sito (stesso trattamento delle recensioni nascoste in lp-course.css, sezione 8). */ .single-product .woocommerce-product-rating, .single-product .star-rating { display: none !important; } /* 10. Responsive ============================================================= */ /* Sotto i 1024px il pannello sticky non regge più accanto a una colonna stretta: torna in flusso normale, sopra la colonna di destra. */ @media (max-width: 1024px) { .single-product .dz-wc-left { position: static; flex: 1 1 100%; width: 100%; } } @media (max-width: 1200px) { .single-product .related.products ul.products, .single-product .upsells.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .single-product div.product { gap: 2rem; } .single-product .related.products ul.products, .single-product .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } @media (max-width: 560px) { .single-product .dz-wc-hero__title { max-width: none; } .single-product .related.products ul.products, .single-product .upsells.products ul.products { grid-template-columns: 1fr; } }