with 20px margins → strip them, and hide any empty paragraph so only the button keeps height. */ /* hide the quantity selector (always 1 per add) + KILL the wpautop/WC leftovers (empty
, stray
) that pad dead space below the button. The form must
collapse to the button's height — no phantom space under the CTA. */
.dvd-product__buy .quantity,
.dvd-product__buy .woocommerce-variation-add-to-cart .quantity { display: none !important; }
.dvd-product__buy form.cart,
.dvd-product__buy form.cart *:not(.single_add_to_cart_button):not(.dvd-format-pill):not(.dvd-format-pill__name):not(.dvd-format-pill__price):not(.dvd-format-pill__mark) {
margin: 0 !important;
}
.dvd-product__buy form.cart br { display: none !important; }
.dvd-product__buy form.cart p:empty,
.dvd-product__buy form.cart .quantity { display: none !important; }
.dvd-product__buy form.cart p { line-height: 0 !important; font-size: 0 !important; }
/* format pills: stacked, each as wide as the cart button, title + price */
.dvd-buy__heading {
font-family: var(--wp--preset--font-family--body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
margin: 0 0 var(--s2);
text-align: left;
}
.dvd-format-pills { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s2); }
.dvd-format-pill {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
background: var(--wp--preset--color--surface-2);
border: 0; border-radius: var(--r-control);
padding: 1rem 1.5rem; /* same height/padding as the add-to-cart button */
cursor: pointer;
text-align: left;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Format mark: monochrome (currentColor), tells "physical media" at a glance and
stays legible on dark (muted) and selected (white) states. */
.dvd-format-pill__mark {
display: inline-flex; align-items: center; flex: 0 0 auto;
margin-right: 0.7rem;
color: var(--wp--preset--color--muted);
transition: color 0.2s ease;
}
.dvd-format-pill__mark svg { display: block; height: 1.15rem; width: auto; }
.dvd-format-pill__mark--4k {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600; line-height: 0.85; letter-spacing: 0.02em;
font-size: 0.95rem; text-align: center;
}
.dvd-format-pill__mark--4k small {
display: block; font-size: 0.5rem; letter-spacing: 0.18em; font-weight: 700;
}
.dvd-format-pill__name {
font-family: var(--wp--preset--font-family--body);
font-size: 0.95rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em; /* DVD / BLU-RAY / 4K UHD as format marks */
color: var(--wp--preset--color--contrast);
}
.dvd-format-pill__price {
font-family: var(--wp--preset--font-family--body);
font-size: 0.95rem;
color: var(--wp--preset--color--muted);
margin-left: auto; /* price stays pinned right; mark+name group left */
padding-left: 1rem;
}
.dvd-format-pill.is-selected {
box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary, var(--acc-red));
background: var(--wp--preset--color--surface);
}
.dvd-format-pill.is-selected .dvd-format-pill__price { color: var(--wp--preset--color--contrast); }
.dvd-format-pill.is-selected .dvd-format-pill__mark { color: var(--wp--preset--color--contrast); }
@media (hover: hover) { .dvd-format-pill:not(.is-selected):hover { background: var(--wp--preset--color--surface-3); } }
/* add to cart — same width as the pills */
.dvd-product__buy .button,
.dvd-product__buy .single_add_to_cart_button {
width: 100%;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #fff;
background: var(--wp--preset--color--primary, var(--acc-red));
border: 0; border-radius: var(--r-control);
padding: 1rem 1.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
@media (hover: hover) {
.dvd-product__buy .single_add_to_cart_button:hover { background: var(--wp--preset--color--primary-dark, var(--acc-red-dark)); }
}
/* stack on mobile: poster first, then info */
@media (max-width: 860px) {
/* Mobile narrative order: regista+titolo → poster+acquisto → descrizione+scheda */
.dvd-product {
grid-template-columns: 1fr;
grid-template-areas: "head" "aside" "info";
}
.dvd-product__head { padding-top: 0; }
.dvd-product__aside { padding-top: var(--s3); }
.dvd-product__info { padding-top: var(--s4); }
.dvd-product__poster-card { position: static; }
}
/* --- AJAX add-to-cart feedback: toast + button states --- */
.dvd-toast {
position: fixed;
left: 50%;
bottom: clamp(1.5rem, 4vw, 3rem);
transform: translate(-50%, 1rem);
z-index: 600;
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--body);
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 0.9rem 1.4rem;
border-radius: var(--r-surface);
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
border-left: 3px solid var(--wp--preset--color--primary, var(--acc-red));
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dvd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dvd-toast.is-error { border-left-color: #e0a000; }
.dvd-product__buy .single_add_to_cart_button.is-loading {
opacity: 0.7; cursor: progress; position: relative; color: transparent;
}
.dvd-product__buy .single_add_to_cart_button.is-loading::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em;
border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
border-radius: 50%; animation: dvd-spin 0.7s linear infinite;
}
@keyframes dvd-spin { to { transform: rotate(360deg); } }
.dvd-product__buy .single_add_to_cart_button.is-done { background: var(--wp--preset--color--primary-dark, var(--acc-red-dark)); } /* brand confirm, not green */
/* error state on the pills when no format chosen */
.dvd-format-pills.has-error .dvd-format-pill {
box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary, var(--acc-red));
animation: dvd-shake 0.3s ease;
}
@keyframes dvd-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* ==================================================================================
SCHEDA PRODOTTO "L'Edizione" v6.3 (panel finale + legge tipografica, lug 2026).
Fondale (hero still) rotto dal PALCO (packshot per-edizione); buy-box radio-card
due-poli; scheda tecnica = "retro di copertina" (unica card editoriale, raggio
stampa 4px); oggetti del film dopo Premi; 4 aperture distinte. LEGGE TIPOGRAFICA:
solo scala φ (x-small segnaletica · small min informativo · base lettura/controlli
· medium citazioni · large prezzo · x-large titolo). muted-2 mai su testo informativo.
Stato variante: un beat 200ms (is-swap) + flash 600ms (is-flash) sulle righe cambiate.
================================================================================== */
.dvd-product-main { --pdp-gutter: var(--wp--style--root--padding-right, 1.5rem); }
/* RITMO VERTICALE (Leonardo + capo-designer): scala Fibonacci ≈ φ, LA STESSA del checkout,
canonica in PDP. DUE respiri tra sezioni: s4=continuità (stesso atto) · s5=landmark
(sezione nuova). Gestalt: padding-interno (≤s3) < continuità (s4) < landmark (s5). */
.dvd-pdp { max-width: 1280px; margin: 0 auto;
--pdp-s1: 8px; --pdp-s2: 13px; --pdp-s3: 21px; --pdp-s4: 34px; --pdp-s5: 55px; }
/* ---- HERO fondale ---- */
.dvd-pdp__hero { position: relative; overflow: hidden; border-bottom: 3px solid var(--wp--preset--color--primary); background: #000; }
.dvd-pdp__track { display: flex; transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1); }
/* Fascia hero — verdetto Leonardo: MOBILE 16:9 nativo (zero crop); da 768px l'ALTEZZA è
l'unica dimensione dichiarata (il vecchio aspect-ratio+max-height+cover arrivava a
tagliare >50% su 1920×1080 — misurato); la still nitida sta centrata sul fondale blur. */
.dvd-pdp__slide { flex: 0 0 100%; aspect-ratio: 16 / 9; max-height: 52vh; position: relative; overflow: hidden; }
@media (min-width: 768px) { .dvd-pdp__slide { aspect-ratio: auto; max-height: none; height: clamp(300px, 52vh, 460px); } }
@media (min-width: 1024px) { .dvd-pdp__slide { height: clamp(320px, 46vh, 480px); } }
/* fondale blur full-bleed (solo ≥768px: su mobile la still copre già tutto) */
.dvd-pdp__bg { display: none; }
@media (min-width: 768px) {
.dvd-pdp__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: blur(28px) brightness(0.55); transform: scale(1.1); }
}
/* still nitida: mobile = cover 16:9 pieno; ≥768 = intera/2:1, centrata, alta quanto la fascia */
.dvd-pdp__crisp { display: block; width: 100%; height: 100%; }
.dvd-pdp__crisp img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
.dvd-pdp__crisp { position: relative; display: flex; justify-content: center; }
.dvd-pdp__crisp img { height: 100%; width: auto; max-width: 100%; object-fit: cover; }
}
/* slide poster-fallback e trailer: img singola come prima */
.dvd-pdp__slide--poster img, .dvd-pdp__slide--trailer > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* SLIDE larga 10:3 (banner-prodotto del sync): SOLO DESKTOP (≥1024). Su mobile/tablet
il JS la rimuove, MA il JS è deferred → tra il paint HTML e il JS l'utente vedeva un
BLINK della striscia 10:3 prima che la still 16:9 subentrasse. FIX: la nascondiamo in
CSS sotto 1024 → non dipinge MAI su mobile, a prescindere dal timing del JS. */
.dvd-pdp__slide--wide { display: none; }
@media (min-width: 1024px) { .dvd-pdp__slide--wide { display: block; } }
/* …tranne quando è l'UNICA immagine del film (niente still né trailer, 24 ott 2026): allora
resta anche su telefono/tablet, intera fra due bande sfocate di se stessa — meglio una
striscia «in sala» di una fascia nera vuota. Il fondale blur qui è sempre acceso. */
.dvd-pdp__slide--wide.dvd-pdp__slide--wide-only { display: block; }
/* INTERA sul fondale blur (10:3 dentro il box: width 100% → height auto → bande blur = "in sala") */
.dvd-pdp__slide--wide .dvd-pdp__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: blur(28px) brightness(0.55); transform: scale(1.1); }
.dvd-pdp__slide--wide .dvd-pdp__crisp { position: relative; display: flex; justify-content: center; align-items: center; }
.dvd-pdp__slide--wide .dvd-pdp__crisp img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.dvd-pdp__slide--poster img { filter: blur(22px) brightness(0.5); transform: scale(1.1); }
.dvd-pdp__slide--trailer { display: grid; place-items: center; }
.dvd-pdp__slide--trailer > img { position: absolute; inset: 0; filter: brightness(0.4); }
/* trailer-frame inline RIMOSSO (panel lug 2026): il video suona nel TEATRO (.dvd-pdp__lbx-frame),
così il palco che rompe il bordo dell'hero non copre mai l'angolo del video */
.dvd-pdp__play { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem;
background: color-mix(in srgb, #000 72%, transparent); border: 1px solid color-mix(in srgb, #fff 30%, transparent);
border-radius: var(--r-pill); padding: 0.8rem 1.5rem; color: #fff; font-weight: 700;
font-size: var(--wp--preset--font-size--small); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dvd-pdp__yt { position: relative; z-index: 2; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none; }
.dvd-pdp__counter { position: absolute; bottom: 12px; right: 12px; z-index: 3;
background: color-mix(in srgb, #000 72%, transparent); border-radius: var(--r-pill); padding: 4px 13px;
font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--contrast); letter-spacing: 0.1em; }
.dvd-pdp__ctr-tr { color: var(--wp--preset--color--accent); }
/* CHIP TRAILER (panel + Netflix lead): sulla PRIMA slide, alto-destra (quadrante opposto
al palco che sfonda in basso-sx → zero collisione). Click → apre direttamente il teatro.
Pastiglia scura+blur = stesso pattern del cuore-catalogo; icona+LABEL (mai icona sola);
niente rosso di default (il rosso è gesto: solo il glifo su hover). Il JS lo nasconde
fuori dalla slide 1. Tap ≥48px. */
.dvd-pdp__trailerchip { position: absolute; top: 12px; right: 12px; z-index: 3;
display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 18px;
border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, #fff 16%, transparent);
background: color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
color: var(--wp--preset--color--contrast); cursor: pointer;
font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600;
transition: background 0.18s ease; }
.dvd-pdp__trailerchip .dvd-icon { font-size: 1.05em; transition: color 0.18s ease; }
@media (hover: hover) {
.dvd-pdp__trailerchip:hover { background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent); }
.dvd-pdp__trailerchip:hover .dvd-icon { color: var(--wp--preset--color--accent); } /* gesto = rosso sul glifo */
}
.dvd-pdp__trailerchip[hidden] { display: none; } /* gotcha display-flex vs hidden (3° caso nel progetto) */
.dvd-pdp__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px;
border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 20%, transparent);
background: color-mix(in srgb, #000 55%, transparent); color: #fff; display: grid; place-items: center;
cursor: pointer; opacity: 0; transition: opacity 0.2s; font-size: 1.3rem; }
.dvd-pdp__hero:hover .dvd-pdp__nav { opacity: 1; }
.dvd-pdp__nav--l { left: 12px; } .dvd-pdp__nav--r { right: 12px; }
@media (hover: none) { .dvd-pdp__nav { display: none; } } /* touch: swipe */
/* ---- IDENTITÀ: palco still-life + frontespizio ---- */
/* PALCO — grid a 3 figli: pack (cover), meta (testata-satellite: regista+Visione),
front (titolo+orig+sub). Due regimi (panel Prime Video/iTunes/Revolut lug 2026):
• <560px = cover ~44vw a sx + testata-satellite (regista+Visione) a dx accanto;
il TITOLO scende full-width sotto (colonna <200px = vietato over-45).
• ≥560px = cover 230px a sx + FRONTESPIZIO PIENO accanto (regista→titolo→orig→sub),
pattern iTunes: il titolo-eroe regge in 230px. La col 2 non è mai un pozzo vuoto. */
.dvd-pdp__id { padding: 0 var(--pdp-gutter); display: grid; grid-template-columns: minmax(160px, 44vw) 1fr; gap: 0 20px; align-items: end; }
/* align-self:start + height:fit-content = il box del pack NON si stira all'altezza della row
(che segue il testo alto) → l'area cliccabile/zoom resta la SOLA cover visibile, non lo
spazio vuoto intorno (fix "lo zoom si attiva anche oltre la cover", lug 2026). */
.dvd-pdp__pack { margin-top: -28%; position: relative; z-index: 5; grid-column: 1; grid-row: 1;
align-self: start; height: fit-content; cursor: zoom-in; }
/* .dvd-pdp__col = UNA colonna flex (regista → titolo → orig → sub → visione → salva):
il fix del panel (era 3 grid-item con align-self divergenti → i pezzi si sparavano). */
.dvd-pdp__col { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* ≥560px (iPad incluso): cover 230px + colonna-testo accanto. STESSO regime del desktop
(fix iPad "regista attaccato al bordo", lug 2026): il testo è ancorato IN ALTO con il
respiro s4 sotto la linea rossa dell'hero → il regista non risale mai al bordo. Prima era
align:end senza padding-top → col testo alto il regista si attaccava alla linea rossa. */
@media (min-width: 560px) {
.dvd-pdp__id { grid-template-columns: minmax(200px, 230px) 1fr; align-items: start; }
.dvd-pdp__col { align-self: start; padding-top: var(--pdp-s4); padding-bottom: 0; }
}
/* ≥1024 (verdetto Leonardo, 3ª iter — regge titolo corto E lungo): NÉ align:end (col titolo a
2 righe il testo cresceva VERSO L'ALTO e il regista finiva dentro l'hero) NÉ start-solo-testo
(col titolo corto il testo stava in alto ma la cover, ancorata al fondo, restava molto più in
basso = blocchi scollegati, grande vuoto sotto "Salva"). REGOLA STABILE: cover E testo ancorati
IN ALTO alla STESSA linea (top condiviso, s4 sotto la linea rossa). Partono insieme; il titolo
lungo cresce SOLO verso il basso (direzione libera), mai dentro l'hero. La cover mantiene il suo
-150px (sfonda l'hero) ma senza margin-bottom: ora è align:start, non serve accorciare la row. */
/* ── FONDO COVER ≈ FONDO TESTO (fix definitivo su MISURE inspector, lug 2026) ──
Misurato (vw1480): regista SEMPRE 34px sotto la linea rossa (stabile ✓). Il difetto era
che la cover sfondava l'hero di -150px → il suo fondo saliva a y=685, mentre il testo
(che parte alla linea rossa) scende a y=759 (corto) / 833 (lungo). Cover FINITA TROPPO
PRESTO → sotto di essa restava un vuoto (lo stacco cover→buy-box era 98px). Meno sfonda-
mento (-90 invece di -150) → il fondo cover scende a ~745, a filo del fondo-testo corto
(759) → cover e testo si CHIUDONO alla stessa linea di terra, stacco al buy-box ~14px.
Il regista non si muove (ancorato al testo, che parte alla linea rossa, non alla cover). */
@media (min-width: 1024px) {
.dvd-pdp__id { grid-template-columns: 230px 1fr; gap: 0 26px; align-items: start; }
.dvd-pdp__pack { margin-top: -70px; align-self: start; } /* -90→-70: la cover a ratio nativo 0.707 è ~20px più corta del 2:3 → compensato per tenere fondo-cover ≈ fondo-testo (taratura Leonardo) */
.dvd-pdp__col { align-self: start; padding-top: var(--pdp-s4); padding-bottom: 0; }
}
/* l'alone sborda -14%/-18% oltre la cover: pointer-events:none = NON cliccabile (era il
vero colpevole dello "zoom oltre la cover" — cliccare sull'alone contava come click sul
pack, aprendo il lightbox fuori dalla copertina; misurato con inspector, lug 2026). */
.dvd-pdp__pack::before { content: ""; position: absolute; inset: -14% -18%; z-index: -1; pointer-events: none;
background: radial-gradient(55% 50% at 50% 42%, color-mix(in srgb, #fff 4.5%, transparent), transparent 70%); }
.dvd-pdp__stage { aspect-ratio: var(--wp--custom--poster--ratio); position: relative; }
.dvd-pdp__case { position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
border: 1px solid var(--wp--preset--color--line-2); background: var(--wp--preset--color--surface);
box-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 28px 56px -14px rgba(0,0,0,0.65);
transition: opacity 0.2s ease, transform 0.2s ease; }
.dvd-pdp__case img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dvd-pdp__case.is-swap { opacity: 0; transform: scale(0.985); }
.dvd-pdp__case.is-object { display: grid; place-items: center; background: linear-gradient(160deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); }
.dvd-pdp__case.is-object img { width: auto; height: auto; max-width: 86%; max-height: 80%; object-fit: contain; box-shadow: 0 10px 26px rgba(0,0,0,0.55); }
/* PACKSHOT SCONTORNATO (19 ott 2026, resa B «sospeso con luce di studio», panel scheda
prodotto guidato da Leonardo; mockup «Packshot Paris, Texas»). Il PNG trasparente
della confezione SENZA cornice, fondo né ritaglio.
MISURE (Leonardo): stesso palco della locandina (230 × 325 a ratio 599/847) → la
testata e la linea di terra tarate a luglio non si muovono; l'oggetto si adatta
intero (contain) appoggiato al FONDO; scala reale per formato (--pack-scale: Blu-ray
e 4K 0,9 = 171/190 mm del DVD) con origine in basso, così ogni edizione «poggia»
sulla stessa linea. Sollevato di 16px: l'ombra staccata sotto dice che è sospeso.
LUCE: sul nero un'ombra nera da sola non si vede → alone chiaro 7,5% dietro (stesso
bianco dell'alone che c'era già, solo più presente) + ellisse d'ombra a terra. */
.dvd-pdp__case.is-pack { border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
/* LUCE CHE SEGUE LA SAGOMA (fix 19 ott 2026): l'alone era una macchia radiale DIETRO
l'oggetto; sul DVD la custodia la copre quasi tutta, ma il cofanetto è per il 56%
trasparente (scatole, libro e dischi distanziati) → l'alone traspariva fra i pezzi e
si leggeva come uno «sfondo» (segnalato dall'utente sul Box Blu-ray). Ora il chiaro è
un drop-shadow bianco sfocato, che come l'ombra segue il canale alfa: stacca la sagoma
dal nero senza disegnare niente nei vuoti. */
.dvd-pdp__case.is-pack img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
transform-origin: 50% 100%; transform: translateY(-16px) scale(var(--pack-scale, 1));
filter: drop-shadow(0 0 22px rgba(255,255,255,0.07)) drop-shadow(0 1px 1px rgba(0,0,0,0.6)) drop-shadow(0 14px 18px rgba(0,0,0,0.55)); }
.dvd-pdp__case.is-pack::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -14px; height: 22px; z-index: -1;
border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.85), transparent); filter: blur(6px);
transform: scaleX(var(--pack-scale, 1)); pointer-events: none; }
/* col packshot l'alone radiale del palco si spegne (traspariva nei vuoti dell'oggetto) */
.dvd-pdp__pack:has(.dvd-pdp__case.is-pack)::before { display: none; }
/* elementi della colonna-testo (figli di .dvd-pdp__col, gap 6px dal wrapper) */
.dvd-pdp__eyebrow { color: var(--wp--preset--color--accent); text-transform: uppercase; letter-spacing: 0.12em;
font-size: var(--wp--preset--font-size--x-small); font-weight: 700; margin: 0; }
.dvd-pdp__title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.02em;
font-size: var(--wp--preset--font-size--x-large); line-height: 1.03; margin: 0;
text-wrap: balance; overflow-wrap: break-word; } /* balance = righe pari; break-word = paracadute */
/* VISIONE (classificazione età): riga di LETTURA muted, NON pill (una frase lunga come
"Opera non adatte ai minori di 6 anni" esplode in una pill uppercase). Icona info +
testo, capo naturale, mai maiuscoletto → non domina più la testata. */
.dvd-pdp__vis { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 0;
font-size: var(--wp--preset--font-size--small); line-height: 1.35; color: var(--wp--preset--color--contrast); } /* CONTRAST (panel optometristi): è un AVVISO normativo, non metadato — si deve leggere senza sforzo */
.dvd-pdp__vis .dvd-icon { flex: none; margin-top: 0.15em; font-size: 1.05em; color: var(--wp--preset--color--muted-2); }
/* BOLLINO MiC (19 ott 2026, panel scheda prodotto guidato da Leonardo). MISURE:
riga = small 16px × 1,35 = 21,6px; dentro il disco la cifra è il 41,7% (misurato sul
file del Ministero). 34px (s4) è la PRIMA misura della scala in cui la cifra supera i
12px della soglia di lettura over-45 (21 → 8,8px, 26 → 10,8px, 34 → 14,2px), ed è un
passo aureo sopra la riga (34 / 21,6 ≈ φ). Spazio bollino→testo 13px (s2 = 34/φ²).
Centrato sul blocco di testo: una frase che va a capo resta bilanciata. Colori del
Ministero, non nostri: per questo una volta sola, qui. */
.dvd-pdp__vis.has-mic { align-items: center; gap: 13px; }
.dvd-pdp__mic { flex: none; display: block; width: 34px; height: 34px; }
/* BOLLINI DI CONTENUTO (22 ott 2026, variante D + tooltip, decisione utente): una fila
sola — prima i pittogrammi di contenuto, ultimo il disco d'età, così l'età chiude la
fila accanto alla frase che la spiega. Gap 6px: i dischi si leggono come UN gruppo
(8 li stacca), 13px (s2) dal gruppo al testo come prima. La parola dentro il
pittogramma a 34px è alta 3-4px: il NOME esce in un tooltip sopra il disco, con
mouse, tastiera e tocco (:focus — il tap su un elemento con tabindex dà il focus). */
/* align-self:stretch — la colonna è un flex a capo-allineato: senza, la riga si dimensiona
sulla somma delle basi (dischi + 12em) e la frase andava a capo anche su desktop */
.dvd-pdp__vis.has-cont { flex-wrap: wrap; row-gap: 8px; align-self: stretch; }
/* la frase dell'età non si fa schiacciare dalla fila: sotto i 12em disponibili va a
capo INTERA sotto i dischi (Mimì su telefono: 6 dischi = 234px, restavano 95px →
«Vietato ai / minori di 14 / anni» su tre righe). Con 1-2 dischi resta accanto. */
.dvd-pdp__vis.has-cont > span:last-child { flex: 1 1 12em; min-width: 0; }
.dvd-pdp__mics { flex: none; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dvd-pdp__mict { position: relative; display: block; border-radius: var(--wp--custom--radius--pill);
cursor: help; -webkit-tap-highlight-color: transparent; }
.dvd-pdp__mict:focus { outline: none; }
.dvd-pdp__mict:focus-visible { box-shadow: var(--wp--custom--focus--ring); }
.dvd-pdp__mict::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 30;
transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
/* superficie RIALZATA, non bianca: nel sistema il bianco pieno è uno STATO (selezione,
salvato), le cose che galleggiano sulla pagina sono surface-2 + bordo (popup carrello,
drawer). Bordo line-2: su fondo base il line si perde. */
padding: 5px 10px; border-radius: var(--wp--custom--radius--control);
background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--contrast);
border: 1px solid var(--wp--preset--color--line-2); box-shadow: var(--wp--custom--card--shadow);
font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3;
opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; }
.dvd-pdp__mict:first-child::after { left: 0; transform: translate(0, 4px); } /* il primo disco sta sul bordo: il fumetto parte da lì e non esce dallo schermo */
.dvd-pdp__mict:hover::after, .dvd-pdp__mict:focus::after, .dvd-pdp__mict.is-tip::after { opacity: 1; visibility: visible; transform: translate(-50%, 0);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
.dvd-pdp__mict:first-child:hover::after, .dvd-pdp__mict:first-child:focus::after, .dvd-pdp__mict:first-child.is-tip::after { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) {
/* stessi selettori degli stati aperti: la regola :hover/:focus/.is-tip è più specifica */
.dvd-pdp__mict::after, .dvd-pdp__mict:hover::after, .dvd-pdp__mict:focus::after, .dvd-pdp__mict.is-tip::after { transition: none; }
}
/* WISHLIST — micro-azione editoriale: icona+label, auto-width (NON stretch → non si stacca),
hairline CORTA sul bottone (::before), non una linea che attraversa il grid. Salvato =
cuore pieno rosso + "Salvato" (rosso = LO stato, unico accento). Tap ≥48px via min-height. */
.dvd-pdp__save { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
min-height: 48px; margin-top: 10px; padding: 12px 0 0; background: none; border: 0; cursor: pointer;
color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.dvd-pdp__save::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 1px;
background: var(--wp--preset--color--line); }
.dvd-pdp__save .dvd-icon { font-size: 1.25em; transition: color 0.2s ease, transform 0.2s ease; }
.dvd-pdp__save.is-saved { color: var(--wp--preset--color--accent); }
.dvd-pdp__save.is-saved .dvd-icon { fill: currentColor; transform: scale(1.08); } /* cuore pieno = come il catalogo */
@media (hover: hover) { .dvd-pdp__save:hover .dvd-icon { color: var(--wp--preset--color--accent); } }
/* MOBILE <560px — il titolo-eroe in colonna <200px non è MAI giusto (torre che sfasa).
Il wrapper .dvd-pdp__col diventa display:contents → i figli tornano grid-item e si
ridistribuiscono: SATELLITE a dx cover = regista (alto) + Salva (basso); il resto
(titolo, orig, sub, visione) full-width sotto la cover, a piena giustezza. */
@media (max-width: 559.98px) {
.dvd-pdp__col { display: contents; }
.dvd-pdp__eyebrow { grid-column: 2; grid-row: 1; align-self: start; margin-top: 6px; }
.dvd-pdp__save { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
.dvd-pdp__save::before { display: none; } /* nel satellite la hairline non serve */
.dvd-pdp__title { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; line-height: 1.06; }
.dvd-pdp__orig { grid-column: 1 / -1; }
.dvd-pdp__sub { grid-column: 1 / -1; }
.dvd-pdp__vis { grid-column: 1 / -1; margin-top: 8px; }
}
.dvd-pdp__orig { color: var(--wp--preset--color--muted); font-style: italic;
font-size: var(--wp--preset--font-size--base); margin: 0; } /* small→base (optometristi): corsivo su dark a 16 era il caso peggiore; i titoli stranieri si leggono lettera-per-lettera */
.dvd-pdp__sub { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0; }
/* ---- lightbox ---- */
.dvd-pdp__lbx { position: fixed; inset: 0; z-index: 460; background: rgba(0,0,0,0.92); display: none; place-items: center; cursor: zoom-out; }
/* 460 = sopra header (400) e drawer (450): un modal a schermo pieno copre TUTTO */
/* X esplicita (over-45: affordance visibile, mai solo il gesto implicito) + ESC da JS */
.dvd-pdp__lbx-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px;
width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 22%, transparent);
background: color-mix(in srgb, #000 55%, transparent); color: var(--wp--preset--color--contrast);
display: grid; place-items: center; cursor: pointer; font-size: 1.3rem; transition: background 0.15s; }
.dvd-pdp__lbx-close:hover { background: var(--wp--preset--color--surface-3); }
.dvd-pdp__lbx.is-on { display: grid; }
.dvd-pdp__lbx img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
/* TEATRO trailer (panel lug 2026): stesso lightbox, iframe 16:9 al posto dell'img.
Larghezza = il massimo 16:9 che sta in 92vw × 92vh (mai crop, mai sotto il palco). */
.dvd-pdp__lbx.is-video { cursor: default; } /* zoom-out fuorviante sul video; backdrop chiude comunque */
.dvd-pdp__lbx.is-video img { display: none; }
.dvd-pdp__lbx-frame { width: min(92vw, calc(92vh * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; }
/* scroll-lock del fondo a teatro aperto (stesso schema html del drawer: lo scroll è su documentElement) */
html:has(.dvd-pdp__lbx.is-on) { overflow: hidden; }
/* fallback teatro (embed che non carica): messaggio + uscita esplicita */
.dvd-pdp__lbx-fb { text-align: center; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.dvd-pdp__lbx-fb p { margin: 0 0 10px; }
.dvd-pdp__lbx-fb a { color: var(--wp--preset--color--accent); font-weight: 600; text-decoration: none; font-size: var(--wp--preset--font-size--base); }
/* ---- layout aureo desktop ---- */
.dvd-pdp__layout { display: flex; flex-direction: column; }
.dvd-pdp__colr { order: -1; } /* mobile: buy-box SUBITO dopo il frontespizio */
.dvd-pdp__flow { padding: 0 var(--pdp-gutter); max-width: calc(640px + 2 * var(--pdp-gutter)); }
@media (min-width: 1024px) {
.dvd-pdp__layout { display: grid; grid-template-columns: 1.618fr 1fr; gap: 44px; padding: 0 var(--pdp-gutter); align-items: start; }
.dvd-pdp__colr { order: 0; position: sticky; top: 18px; }
.dvd-pdp__flow { padding: 0; max-width: none; }
.dvd-pdp__buy { margin: 24px 0 0 !important; max-width: none !important; }
}
/* ---- BUY-BOX ---- */
.dvd-pdp__buy { margin: 22px var(--pdp-gutter) 0; background: var(--wp--preset--color--surface);
border: var(--wp--custom--card--border, 1px solid var(--wp--preset--color--line)); border-radius: var(--r-surface); padding: var(--pdp-s3); max-width: 640px; box-sizing: border-box; }
.dvd-pdp__buyeb { display: flex; align-items: center; gap: 8px; color: var(--wp--preset--color--accent);
text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; margin: 0 0 14px; }
.dvd-pdp__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px;
border: 1px solid var(--wp--preset--color--line); border-radius: var(--r-control); padding: 13px 15px; min-height: 60px;
cursor: pointer; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s; }
.dvd-pdp__opt.is-on { border: 2px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface-3); padding: 12px 14px; }
.dvd-pdp__opt-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dvd-pdp__opt-name { font-family: var(--wp--preset--font-family--heading); font-weight: 600;
font-size: var(--wp--preset--font-size--base); line-height: 1.1; } /* controlli: max base (legge proporzioni) */
.dvd-pdp__opt-spec { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* qualifica EDIZIONE (verdetto designer: no oro/5° colore — la PAROLA distingue,
come Criterion/Arrow; il pregio lo dà prezzo+packshot). Eyebrow maiuscoletto
Bricolage CONTRAST (testo pieno = pregio, non sbiadito) sopra il nome-formato. */
.dvd-pdp__eded { display: block; font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--x-small); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em; color: var(--wp--preset--color--contrast);
margin-bottom: 2px; }
.dvd-pdp__eded--sm { display: inline; margin: 0; letter-spacing: 0.1em; }
/* card con edizione pregiata: hairline superiore un filo più chiara (materia, non colore).
MA la selezione (bordo accent 2px) VINCE sempre: :not(.is-on) evita che l'hairline
sovrascriva il bordo-top rosso della card selezionata. */
.dvd-pdp__opt.has-ed:not(.is-on) { border-top-color: var(--wp--preset--color--line-2); }
/* Edizione in campagna Start Up!: stessa card, ma e' un LINK alla campagna (13 ott 2026).
Niente colore nuovo: l'eyebrow tipografico distingue, il rosso resta al gesto «Prenota». */
.dvd-pdp__opt--startup { text-decoration: none; color: inherit; border-style: dashed; cursor: pointer; }
.dvd-pdp__opt--startup:hover, .dvd-pdp__opt--startup:focus-visible { border-color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface-2); }
.dvd-pdp__opt--startup .dvd-pdp__opt-p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dvd-pdp__opt--startup .dvd-pdp__opt-go { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--accent); white-space: nowrap; }
.dvd-pdp__opt-p { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--contrast); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dvd-pdp__chk { opacity: 0; color: var(--wp--preset--color--accent); font-size: 1.05em; }
.dvd-pdp__opt.is-on .dvd-pdp__chk { opacity: 1; }
/* FOCUS DA TASTIERA sulla radio-card — mancava del tutto.
Le card sono `role="radio"` con tabindex roving: chi naviga da tastiera ci arriva
davvero, e senza un anello visibile non sapeva DOVE si trovava (le frecce
spostano la selezione fra card identiche). `:focus-visible` e non `:focus`, o
l'anello comparirebbe anche al click del mouse, dove la selezione la dice gia' il
bordo accent. Token condiviso `--focus--ring`, mai un'ombra scritta a mano.
`outline:none` perche' l'anello lo disegna il box-shadow: lasciarli entrambi
darebbe due cerchi concentrici di raggi diversi (il box-shadow segue il radius
della card, l'outline del browser no). */
.dvd-pdp__opt:focus-visible {
outline: none;
box-shadow: var(--wp--custom--focus--ring);
border-color: var(--wp--preset--color--line-2);
}
.dvd-pdp__single { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0 0 8px; }
.dvd-pdp__single b { color: var(--wp--preset--color--contrast); }
.dvd-pdp__pricebox { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 12px; }
.dvd-pdp__bigprice { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--large); transition: opacity 0.2s ease; }
.dvd-pdp__bigprice.is-swap { opacity: 0.25; }
.dvd-pdp__iva { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
.dvd-pdp__cta { width: 100%; height: 54px; border: 0; border-radius: var(--r-control); background: var(--wp--preset--color--primary);
color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: var(--wp--preset--font-size--small);
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.15s; }
.dvd-pdp__cta:hover { background: var(--wp--preset--color--primary-dark, #b20710); }
/* FOCUS DA TASTIERA: mancava del tutto sul pulsante principale della scheda — il
controllo piu' importante della pagina non era raggiungibile A VISTA da tastiera.
Il default del browser qui non basta: su fondo `primary` rosso l'outline nero di
sistema e' quasi invisibile. Token condiviso `--focus--ring` (1px `base` + 3px
`accent`), lo stesso delle radio-card: l'anello stacca perche' il primo strato
ridisegna il fondo pagina attorno al pulsante. Vale anche per la scheda campagna,
che riusa questa classe. `:focus-visible` e non `:focus`, o comparirebbe al click
del mouse dove non serve. */
.dvd-pdp__cta:focus-visible { outline: none; box-shadow: var(--wp--custom--focus--ring); }
/* Feedback add-to-cart (stesso linguaggio del catalogo): spinner mentre carica →
check "Aggiunto ✓" a conferma. Il testo lo sostituisce il JS; qui lo spinner. */
.dvd-pdp__cta.is-loading { opacity: 0.75; cursor: progress; position: relative; color: transparent; }
.dvd-pdp__cta.is-loading::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 1.1em; height: 1.1em; margin: -0.55em 0 0 -0.55em;
border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
border-radius: 50%; animation: dvd-spin 0.7s linear infinite;
}
.dvd-pdp__cta.is-done { background: var(--wp--preset--color--primary-dark, #b20710); }
/* EDIZIONE IN USCITA (17 ott 2026, mockup approvato «Film in uscita», scheda B):
nessun pulsante finto. Una riga tra due filetti dice quando si compra; l'unica
azione e' la wishlist (ghost, come la secondaria del popup carrello: il rosso resta
all'acquisto). [hidden] dedicato: display:flex batterebbe l'attributo. */
.dvd-pdp__cta[hidden], .dvd-pdp__soon[hidden], .dvd-pdp__soon-t[hidden], .dvd-pdp__stsoon[hidden] { display: none; }
.dvd-pdp__soon { display: flex; flex-direction: column; gap: var(--pdp-s2); }
.dvd-pdp__soon-row { display: flex; align-items: flex-start; gap: var(--pdp-s2); margin: 0;
padding: var(--pdp-s2) 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-pdp__soon-row .dvd-icon { flex: none; margin-top: 2px; font-size: 1.25em; color: var(--wp--preset--color--contrast); }
.dvd-pdp__soon-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dvd-pdp__soon-t { font-family: var(--wp--preset--font-family--heading); font-weight: 700;
font-size: var(--wp--preset--font-size--base); line-height: 1.2; color: var(--wp--preset--color--contrast); }
.dvd-pdp__soon-x { font-size: var(--wp--preset--font-size--small); line-height: 1.45; color: var(--wp--preset--color--muted); }
/* senza titolo (film misto) la frase e' l'unica riga: testo pieno, non attenuato */
.dvd-pdp__soon-t[hidden] + .dvd-pdp__soon-x { color: var(--wp--preset--color--contrast); }
.dvd-pdp__soonsave { width: 100%; height: 54px; border-radius: var(--r-control); cursor: pointer;
background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--line-2);
font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: var(--wp--preset--font-size--small);
display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.15s, border-color 0.15s; }
.dvd-pdp__soonsave .dvd-icon { font-size: 1.15em; }
.dvd-pdp__soonsave:focus-visible { outline: none; box-shadow: var(--wp--custom--focus--ring); }
@media (hover: hover) {
.dvd-pdp__soonsave:hover { background: var(--wp--preset--color--surface-2); border-color: var(--wp--preset--color--contrast); }
}
/* stato salvato = BIANCO pieno (regola cuore: stato bianco, gesto rosso) */
.dvd-pdp__soonsave-on { display: none; }
.dvd-pdp__soonsave.is-saved .dvd-pdp__soonsave-on { display: inline; }
.dvd-pdp__soonsave.is-saved .dvd-pdp__soonsave-off { display: none; }
.dvd-pdp__soonsave.is-saved .dvd-icon { fill: currentColor; }
.dvd-pdp__trust { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.dvd-pdp__trow { display: flex; align-items: flex-start; gap: 11px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.dvd-pdp__trow[hidden] { display: none; } /* shipping row off when WooCommerce has no shipping facts (display:flex would beat [hidden]) */
.dvd-pdp__trow .dvd-icon { flex: none; margin-top: 2px; font-size: 1.15em; }
.dvd-pdp__trow b { color: var(--wp--preset--color--contrast); }
.dvd-pdp__trow.is-free { color: var(--wp--preset--color--success); }
.dvd-pdp__trow.is-free b { color: var(--wp--preset--color--success); }
/* STREAMING su CG tv = terza riga del blocco fiducia (variante C, panel 7 set 2026).
Stesso peso di spedizione e Carta Cultura: e' un'informazione dopo la decisione,
non un secondo bottone. Hairline sopra = "altra categoria" (non e' trust, e' un
rimando); icona play in accent come ogni rimando; il link e' l'unico gesto. */
.dvd-pdp__trow--stream { border-top: 1px solid var(--wp--preset--color--line); padding-top: 12px; margin-top: 2px; color: var(--wp--preset--color--muted); }
.dvd-pdp__trow--stream .dvd-icon { color: var(--wp--preset--color--accent); }
.dvd-pdp__trow--stream del { color: var(--wp--preset--color--muted-2); }
.dvd-pdp__trow--stream .woocommerce-Price-amount { font-family: var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; color: var(--wp--preset--color--contrast); }
.dvd-pdp__trow--stream a { color: var(--wp--preset--color--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.dvd-pdp__trow--stream a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* SOLO STREAMING (19 ott 2026): la riga streaming e' l'unico contenuto del buy-box →
niente filetto sopra (non separa da nulla), corpo `base` e testo pieno: si legge,
non e' una nota a margine. */
.dvd-pdp__buy--stream .dvd-pdp__trow--stream { border-top: 0; padding-top: 0; margin-top: 0;
font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--contrast); }
.dvd-pdp__buy--stream .dvd-pdp__trow--stream .dvd-icon { margin-top: 5px; }
a.dvd-pdp__cta { color: #fff; text-decoration: none; box-sizing: border-box; }
/* ---- flusso: sinossi + aperture ---- */
.dvd-pdp__syn-wrap { margin-top: var(--pdp-s4); max-width: 62ch; position: relative; }
/* GABBIA EDITORIALE UNICA (misura-madre 62ch tipografica, non px sparsi): tutta la
colonna-flusso condivide la stessa misura di lettura → margini destri allineati. */
.dvd-pdp__quote, .dvd-pdp__qrow, .dvd-pdp__awards, .dvd-pdp__obj, .dvd-pdp__curio { max-width: 62ch; }
.dvd-pdp__syn { color: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--base); line-height: 1.68; margin: 0; } /* LETTURA LUNGA ≥18px */
/* clamp condizionale (SOLO mobile, applicato dal JS solo se eccede 6 righe) */
.dvd-pdp__syn-wrap.is-clamped .dvd-pdp__syn {
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
/* fade sull'ultima riga clampata: segnala "c'è dell'altro" */
.dvd-pdp__syn-wrap.is-clamped::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2.4em; height: 1.7em; pointer-events: none;
background: linear-gradient(transparent, var(--wp--preset--color--base));
}
.dvd-pdp__syn-toggle { display: inline-block; margin-top: 10px; background: none; border: 0; padding: 6px 0;
color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small); font-weight: 600;
cursor: pointer; }
@media (min-width: 783px) {
/* desktop: sempre intera (in colonna 62ch le 10 righe non pesano) */
.dvd-pdp__syn-wrap.is-clamped .dvd-pdp__syn { -webkit-line-clamp: unset; overflow: visible; }
.dvd-pdp__syn-wrap.is-clamped::after { display: none; }
.dvd-pdp__syn-toggle { display: none !important; }
}
.dvd-pdp__shead { margin-top: var(--pdp-s5); }
.dvd-pdp__seb { color: var(--wp--preset--color--accent); text-transform: uppercase; letter-spacing: 0.12em;
font-size: var(--wp--preset--font-size--x-small); font-weight: 700; margin: 0; }
.dvd-pdp__sfmt { color: var(--wp--preset--color--contrast); }
.dvd-pdp__srule { display: block; width: 55px; height: 3px; border-radius: 2px; background: var(--wp--preset--color--primary); margin-top: var(--pdp-s1); }
/* ---- scheda tecnica: dl film + segmented + retro ---- */
.dvd-pdp__fdl { margin: var(--pdp-s2) 0 0; }
.dvd-pdp__sp { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: var(--pdp-s2) 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-pdp__sp dt { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--muted); padding-top: 3px; }
.dvd-pdp__sp dd { font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--contrast); margin: 0; } /* small→base (optometristi): i dd sono spesso FRASI (cast, audio) = lettura, non consultazione */
.dvd-pdp__seg { display: flex; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
border-radius: var(--r-control); overflow: hidden; margin-top: 18px; }
.dvd-pdp__seg button { flex: 1; min-height: 48px; background: transparent; border: 0; color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.dvd-pdp__seg button.is-on { background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--contrast);
box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }
.dvd-pdp__retro { margin-top: var(--pdp-s2); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
border-radius: 4px; padding: var(--pdp-s3); transition: opacity 0.2s ease; } /* raggio STAMPA: è packaging, non UI */
.dvd-pdp__retro.is-swap { opacity: 0; }
.dvd-pdp__rband { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: var(--pdp-s3); border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-pdp__rpill { border: 1px solid var(--wp--preset--color--line-2); color: var(--wp--preset--color--muted); border-radius: var(--r-pill);
font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-small); font-weight: 700;
letter-spacing: 0.08em; padding: 3px 11px; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dvd-pdp__rcells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pdp-s3); padding: var(--pdp-s3) 0; border-bottom: 1px solid var(--wp--preset--color--line); }
@media (min-width: 1024px) { .dvd-pdp__rcells { grid-template-columns: repeat(3, 1fr); } }
.dvd-pdp__rl { display: block; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase;
letter-spacing: 0.1em; color: var(--wp--preset--color--muted); }
.dvd-pdp__rv { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast);
font-variant-numeric: tabular-nums; margin-top: 3px; }
.dvd-pdp__rsec { padding: var(--pdp-s3) 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-pdp__rsec > .dvd-pdp__rl { margin-bottom: 8px; }
.dvd-pdp__arow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--wp--preset--font-size--small); }
.dvd-pdp__alang { color: var(--wp--preset--color--contrast); }
.dvd-pdp__atype { color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.dvd-pdp__subrow { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); }
.dvd-pdp__rextra { margin: 0; padding-left: 1.2em; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); }
.dvd-pdp__rextra li { margin: 4px 0; }
/* codici (EAN + Codice CG): gruppo unico in fondo, label a lato ALLINEATE (valori incolonnati) */
.dvd-pdp__rean { padding-top: 14px; border-top: 1px solid var(--wp--preset--color--line); display: flex; flex-direction: column; gap: 6px; }
.dvd-pdp__crow { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 12px; }
.dvd-pdp__crow .dvd-pdp__rl { padding-top: 0; }
.dvd-pdp__rwho { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
.dvd-pdp__ean { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dvd-pdp__ean svg { height: 22px; width: 64px; display: block; fill: var(--wp--preset--color--muted); }
.dvd-pdp__eand { font-family: var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); letter-spacing: 0.14em; }
@keyframes dvd-pdp-flash { 0% { background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent); } 100% { background: transparent; } }
.dvd-pdp__retro .is-flash { animation: dvd-pdp-flash 0.6s ease-out; }
/* ---- DICONO (virgolone = landmark) ---- */
.dvd-pdp__quote { margin-top: var(--pdp-s5); margin-bottom: var(--pdp-s3); position: relative; max-width: 640px; } /* respiro in uscita: la hairline della prima riga sotto non deve toccare la testata */
/* 4.6rem = glifo ORNAMENTALE (non testo/titolo/pulsante): esente scala φ per REGOLA MADRE. ≈ φ² sul medium sotto. NON tokenizzare. */
.dvd-pdp__qmark { font-family: var(--wp--preset--font-family--heading); font-weight: 200; font-size: 4.6rem;
color: var(--wp--preset--color--accent); line-height: 0; position: relative; top: 24px; display: block; }
.dvd-pdp__qt { font-family: var(--wp--preset--font-family--body); font-weight: 400;
font-size: var(--wp--preset--font-size--medium); line-height: 1.35; color: var(--wp--preset--color--contrast); margin: 0; }
.dvd-pdp__qsrc { margin: 10px 0 0; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase;
letter-spacing: 0.14em; color: var(--wp--preset--color--muted); font-weight: 600; }
.dvd-pdp__qsrc::before { content: "— "; color: var(--wp--preset--color--accent); }
.dvd-pdp__qrow { border-top: 1px solid var(--wp--preset--color--line); padding: 15px 0; max-width: 640px; }
.dvd-pdp__qrow .dvd-pdp__qt { font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--base); line-height: 1.5; } /* voci secondarie: testo da leggere */
.dvd-pdp__qmore summary { list-style: none; cursor: pointer; color: var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 12px 0; }
.dvd-pdp__qmore summary::-webkit-details-marker { display: none; }
.dvd-pdp__qmore[open] summary { display: none; }
/* ---- PREMI (l'alloro apre) ---- */
.dvd-pdp__awards { margin-top: var(--pdp-s5); display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.dvd-pdp__awopen { display: flex; align-items: center; gap: 10px; color: var(--wp--preset--color--warning); }
.dvd-pdp__awopen .dvd-icon { font-size: 1.5rem; }
.dvd-pdp__awopen span { font-family: var(--wp--preset--font-family--body); font-weight: 700;
font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.08em; }
.dvd-pdp__aw { font-size: var(--wp--preset--font-size--base); padding-left: 2px; } /* small→base (optometristi): frasi complete lette parola-per-parola; Dicono 20.8 → Premi 16 era un tonfo */
.dvd-pdp__aw b { color: var(--wp--preset--color--contrast); }
.dvd-pdp__aw span { color: var(--wp--preset--color--muted); }
/* ---- OGGETTI DEL FILM ---- */
.dvd-pdp__obj { margin-top: var(--pdp-s2); max-width: 640px; }
.dvd-pdp__objrow { display: flex; align-items: center; gap: 16px; padding: var(--pdp-s2) 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-pdp__objrow:last-child { border-bottom: 0; }
.dvd-pdp__objph { width: 86px; height: 86px; flex: none; border-radius: 4px; overflow: hidden;
background: linear-gradient(160deg, var(--wp--preset--color--surface), var(--wp--preset--color--base));
border: 1px solid var(--wp--preset--color--line); display: grid; place-items: center; }
.dvd-pdp__objph img { max-width: 82%; max-height: 78%; object-fit: contain; box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.dvd-pdp__objb { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dvd-pdp__objn { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--base); line-height: 1.1; }
.dvd-pdp__objd { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.dvd-pdp__objr { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.dvd-pdp__objp { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--wp--preset--font-size--base); }
.dvd-pdp__objadd { border: 1px solid var(--wp--preset--color--line-2); background: transparent; color: var(--wp--preset--color--contrast);
border-radius: var(--r-control); min-height: 44px; padding: 0 18px; font-size: var(--wp--preset--font-size--small); font-weight: 600;
cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.dvd-pdp__objadd:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
/* ---- CURIOSITÀ "la postilla": asterisco a margine + label run-in, niente card né
hairline (5° landmark, il primo ACROMATICO: inchiostro neutro, sottovoce). ---- */
.dvd-pdp__curio { margin-top: var(--pdp-s5); max-width: 640px; display: grid;
grid-template-columns: auto 1fr; column-gap: 16px; }
.dvd-pdp__curio > * { grid-column: 2; margin: 0; }
.dvd-pdp__curio::before { content: "*"; grid-column: 1; grid-row: 1 / span 9;
font-family: var(--wp--preset--font-family--heading); font-weight: 500;
font-size: var(--wp--preset--font-size--x-large); line-height: 0.9;
color: var(--wp--preset--color--muted); user-select: none;
margin-top: -0.08em; /* taratura ottica: l'asterisco vive nella parte alta dell'em */ }
.dvd-pdp__curio-l { font-family: var(--wp--preset--font-family--body); font-weight: 700;
font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase;
letter-spacing: 0.12em; color: var(--wp--preset--color--muted); margin-right: 0.8em; }
.dvd-pdp__curio-l::after { content: "—"; margin-left: 0.8em; color: var(--wp--preset--color--line-2); }
.dvd-pdp__curio-t { font-size: var(--wp--preset--font-size--base); line-height: 1.68;
color: var(--wp--preset--color--contrast); } /* lettura lunga ≥ base, contrast */
.dvd-pdp__curio-src { margin-top: 8px; font-size: var(--wp--preset--font-size--small);
line-height: 1.5; color: var(--wp--preset--color--muted); } /* fonte, da colophon */
/* ---- coda ---- */
.dvd-pdp__coda { margin: var(--pdp-s5) 0 20px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.dvd-pdp__coda a { color: var(--wp--preset--color--accent); text-decoration: none; font-weight: 600; }
/* ---- sticky bar mobile ---- */
/* STICKY ADD-TO-CART (panel + dev lug 2026): era un "toast" basso (padding 8px, thumb
38px, CTA 48px isolata) → sembrava piccola/rotta. Ora barra d'AZIONE piena: padding s2,
thumb 52px che sporge, formato/edizione leggibili (edizione = eyebrow rosso), CTA 56px
con icona carrello = baricentro. z-index 420 = SOPRA header(400), SOTTO drawer(450). */
.dvd-pdp__sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 420;
background: var(--wp--preset--color--surface-2); border-top: 1px solid var(--wp--preset--color--line);
display: flex; align-items: center; gap: 12px; box-sizing: border-box;
padding: var(--pdp-s2) var(--pdp-gutter) calc(var(--pdp-s2) + env(safe-area-inset-bottom));
transform: translateY(110%); transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1); }
.dvd-pdp__sticky.is-show { transform: none; }
.dvd-pdp__sth { width: 52px; flex: none; margin-top: -22px; border-radius: 4px; overflow: hidden;
border: 1px solid var(--wp--preset--color--line-2); box-shadow: 0 6px 14px rgba(0,0,0,0.5); display: block; }
.dvd-pdp__sth img { width: 52px; height: auto; aspect-ratio: var(--wp--custom--poster--ratio); object-fit: cover; display: block; }
/* la miniatura SEGUE IL PALCO (22 ott 2026, segnalato dall'utente): col packshot
scontornato il palco toglie cornice, fondo e ritaglio, la miniatura no → un PNG
trasparente finiva dentro un riquadro bordato, tagliato a riempire. Stesso stato,
stessa resa in piccolo: niente bordo né fondo, oggetto intero appoggiato al fondo,
l'ombra segue la sagoma (drop-shadow) invece del riquadro. Oggetto (gadget) = come
il palco: intero su fondo sfumato. Classi messe dal server e da product.js. */
.dvd-pdp__sth.is-pack { border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
.dvd-pdp__sth.is-pack img { object-fit: contain; object-position: 50% 100%;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.07)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
.dvd-pdp__sth.is-object { background: linear-gradient(160deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); }
.dvd-pdp__sth.is-object img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.dvd-pdp__stinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dvd-pdp__stf { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* badge edizione dentro il formato sticky = eyebrow rosso (l'unico accento; è valore/prezzo) */
.dvd-pdp__stf .dvd-pdp__eded--sm { color: var(--wp--preset--color--accent); font-weight: 700; }
.dvd-pdp__stp { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-variant-numeric: tabular-nums;
font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--contrast); }
.dvd-pdp__cta--sticky { margin-left: auto; width: auto; min-height: 56px; height: 56px; padding: 0 24px; gap: 8px; flex: none; }
.dvd-pdp__cta--sticky .dvd-icon { font-size: 1.15em; }
/* edizione in uscita: la data al posto del pulsante, stesso registro delle card */
.dvd-pdp__stsoon { margin-left: auto; flex: none; font-weight: 700; white-space: nowrap;
font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); }
/* la barra fixed copre ~72px in fondo → libera il colophon quando è visibile */
body.dvd-sticky-on { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .dvd-pdp__sticky { display: none; } body.dvd-sticky-on { padding-bottom: 0; } }
/* prezzi Woo dentro la scheda: eredita colore/side (niente ins/del strani) */
.dvd-pdp .woocommerce-Price-amount { color: inherit; }