/*
Theme Name: CGTV Custom
Theme URI: https://store.edge.cgtv.it
Author: rete.ws
Description: Tema a blocchi (FSE) minimale, costruito da zero. Design tokens in theme.json, zero build step, zero dipendenze.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cgtv
Tags: full-site-editing, block-styles, custom-colors, editor-style
*/
/* Block themes drive almost everything from theme.json. Keep this file for
the theme header above and the rare global rule that can't live in JSON. */
/* ===== Typography rendering hints (can't live in theme.json) =====
Smoothing "stampato pulito" su fondo scuro + OpenType (kerning/legature) sui titoli
+ letterpress LEGGERO solo sui titoli grandi. Tecniche da ricerca web (MDN, Smashing
letterpress, Better Programming font-rendering): su dark, antialiased rende il testo
più nitido; optimizeLegibility+feature-settings danno il tocco editoriale; il
text-shadow "impresso" SOLO sui titoli (mai sul corpo → sfoca/affatica l'over-45). */
/* RUBBER-BAND ORIZZONTALE OFF (iPad/iPhone Safari, lug 2026).
Trascinando a destra/sinistra la pagina "rimbalzava". CAUSA PRIMARIA: overflow
ORIZZONTALE REALE — contenitori con `max-width` + `padding` laterale senza
`box-sizing:border-box` (il padding si SOMMA: .dvd-nov misurava 1403px su un
iPad da 1024). Corretti alla radice, vedi i `box-sizing` aggiunti a .dvd-exc,
.dvd-nov, .dvd-about, .dvd-contact, .dvd-novita__inner.
Questa è la CINTURA, non la cura: se un giorno rientrasse un overflow, almeno
non si traduce in bounce.
- asse `-x` e NON lo shorthand: il verticale deve restare vivo (scroll-snap dei
banner home, pull-to-refresh).
- su html E body: la propagazione root-vs-body è un problema d'interop noto e
mai risolto (Chrome propaga dal body, Firefox dal root) → MDN raccomanda
entrambi. Dichiararlo due volte è l'unica forma indipendente dal motore.
- supportato da Safari 16.0, ma fino a WebKit bug 244232 (fix gen 2023) veniva
IGNORATO quando la pagina non era scrollabile in quell'asse: è il motivo per
cui mezzo web scrive "su iOS non funziona". Quelle fonti sono pre-16.4.
COSTO ACCETTATO: disabilita anche lo swipe-back/forward da bordo schermo — è la
stessa gesture, non c'è modo di separarle (`contain` non basta: blocca il
chaining ma CONSERVA il bounce). Su un sito con nav esplicita è accettabile. */
html, body { overscroll-behavior-x: none; }
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* kerning + legature standard + alternate contestuali (rendering "da rivista") */
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-kerning: normal;
}
/* Titoli: OpenType pieno + LETTERPRESS leggero (ombra scura sotto = testo "impresso"
nel fondo scuro). Solo titoli grandi (Space Grotesk display), mai il corpo. */
h1, h2, h3,
.wp-block-heading,
.wc-block-components-title,
.cgtv-checkout-main .wc-block-components-checkout-step__title {
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
/* rispetto reduced-motion non serve, ma su schermi a bassa densità l'ombra può
ispessire: la teniamo minima (1px blur) — safe su retina e non. */
/* Ambient radial glow + "lacquered black" reflection — DISATTIVATI (richiesta:
nero piatto pulito "per ora"). Le regole restano sotto per ripristino rapido:
rimuovere il `display:none` per riattivarli. */
body:not(.home):not(.error404)::before,
body:not(.home):not(.error404)::after { display:none !important; }
/* Ambient radial glow: a barely-there warm light fading downward — breaks the
flat black, adds depth, lifts the eye to the top. Felt, not seen (≈6%). NOT on
home (hero) nor 404 (own scene). Default: centred (centred/symmetric layouts).
On the single product page it sources from the LEFT (where content enters). */
body:not(.home):not(.error404)::before {
content: "";
position: fixed;
inset: 0;
background: radial-gradient(ellipse 70% 80% at 50% 0%,
rgba(255, 246, 235, 0.06) 0%,
rgba(255, 246, 235, 0.025) 32%,
rgba(255, 246, 235, 0) 62%);
pointer-events: none;
z-index: 0;
}
body.single-product:not(.home):not(.error404)::before {
background: radial-gradient(ellipse 70% 80% at 22% 0%,
rgba(255, 246, 235, 0.07) 0%,
rgba(255, 246, 235, 0.03) 32%,
rgba(255, 246, 235, 0) 62%);
}
/* "Lacquered black" page surface: a very wide, oblique soft reflection sweeping
across the black — the look of light grazing a glossy DVD/disc surface. Lives
under all content (z-index -1, behind even the glow's stacking), fixed, so the
black no longer reads flat. Whisper-faint (~2.5%) so it never fights the text. */
body:not(.home):not(.error404)::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(115deg,
rgba(255,255,255,0) 30%,
rgba(255,255,255,0.018) 47%,
rgba(255,255,255,0.028) 52%,
rgba(255,255,255,0.012) 57%,
rgba(255,255,255,0) 72%),
linear-gradient(160deg, rgba(255,255,255,0.015), rgba(255,255,255,0) 45%);
}
/* Tap feedback (Android Chrome). Kept ON because removing it is confusing, but
tinted to the brand red instead of the default grey/blue so it looks intentional. */
* { -webkit-tap-highlight-color: rgba(229, 9, 20, 0.25); }
.dvd-navlink a:active,
.dvd-action:active { opacity: 0.6; }
/* Font family / weight / letter-spacing for headings & site-title now live in
theme.json (styles.elements.heading + styles.blocks). Keep this file lean. */
/* Inline icons via dvd_icon(). Inherit text color + size, align to the text
baseline. We DON'T force fill/stroke here: each SVG declares its own (Phosphor
= fill:currentColor; Heroicons outline = fill:none + stroke:currentColor).
Forcing fill would turn outline icons into solid ones. */
.dvd-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
}
/* Icon set = Lucide (MIT), outline style: fill:none + stroke:currentColor on a
24 grid. We render at 1em. Lucide ships at stroke-width 2; we soften to 1.75
for a more refined/modern line while staying legible for over-45. Tune this
single value to make ALL icons thinner (1.5) or bolder (2). Rounded caps/joins
come from the SVGs. Harmless on any residual fill-based icon (no stroke). */
.dvd-icon[stroke] { stroke-width: 1.75; }
.dvd-icon.is-large { font-size: 1.5em; }
/* Phosphor 'list' icon as a CSS var for the drawer toggle mask */
:root {
--dvd-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
}
/* ===== Announcement bar (looping marquee, top of every page) ===== */
/* bar disabled → height 0 so no compensating space is reserved anywhere */
:root { --dvd-annc-h: 0px; --dvd-annc-green: #6b8e23; } /* retro olive green */
.dvd-annc {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--dvd-annc-h);
z-index: 400; /* above header */
background: #070707;
overflow: hidden;
display: flex;
align-items: center;
transition: transform 0.35s ease;
}
/* Hide on scroll: bar slides up, header rises to the top */
body.dvd-annc-hidden .dvd-annc { transform: translateY(-100%); }
/* Home: the header is fixed and its `top` follows the bar (0 ↔ --dvd-annc-h).
Without a transition on `top` the bar glides (.35s) while the header JUMPS
→ the two move apart and the return to the top looks like a shove. Same
duration and easing as the bar, so they travel as one piece. */
body.home .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.home .dvd-header-fixed { transition: top 0.35s ease; }
@media (prefers-reduced-motion: reduce) {
body.home .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.home .dvd-header-fixed { transition: none; }
}
body.dvd-annc-hidden .dvd-header-fixed,
body.dvd-annc-hidden .wp-block-template-part:has(> .dvd-header),
body.dvd-annc-hidden .wp-block-template-part.dvd-header-part { top: 0; }
/* no announcement bar on 404 → header sits flush at the top */
body.error404 .dvd-header-fixed,
body.error404 .wp-block-template-part:has(> .dvd-header),
body.error404 .wp-block-template-part.dvd-header-part { top: 0; }
.dvd-annc__track {
display: inline-flex;
align-items: center;
white-space: nowrap;
will-change: transform;
}
.dvd-annc__item {
font-family: var(--wp--preset--font-family--body);
font-size: 0.66rem;
font-weight: 500; /* lighter than before (was 700), but not so thin
that small uppercase loses legibility */
letter-spacing: 0.22em; /* more airy */
text-transform: uppercase;
color: var(--dvd-annc-green);
padding: 0 0.5rem;
}
.dvd-annc__sep { color: var(--dvd-annc-green); opacity: 0.6; font-size: 0.6rem; padding: 0 0.4rem; }
/* ===== Header (Criterion-style: fixed, transparent over hero) =====
Per WP docs: positioning must NOT go on the Header template part itself —
it must be on a containing Group block. front-page.html wraps the header
template-part in .dvd-header-fixed; that's the single fixed element. */
/* Fix the header on EVERY page (incl. WooCommerce templates we don't author):
target WP's native template-part wrapper that contains our header. This is
present on all pages, so the bar never covers the header anywhere. */
.dvd-header-fixed,
.wp-block-template-part:has(> .dvd-header),
.wp-block-template-part.dvd-header-part { /* direct-class fallback for browsers without :has() */
/* header is NOT sticky anymore — it sits in normal flow and scrolls away */
position: relative;
left: 0; right: 0;
z-index: 100; /* still above the hero/page content it overlaps */
}
/* Home: header FISSO sopra i banner (come Criterion) — resta in cima mentre si
scrollano le schermate hero. Trasparente/frosted-glass, overlappa i banner
full-height (che partono da top:0). Solo in homepage; le altre pagine hanno
l'header in flusso normale (regola sopra). */
body.home .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.home .dvd-header-fixed {
position: fixed;
top: 0;
}
/* logged-in admin: the WP admin bar is fixed at top:0 and would cover our
absolute header on the home page — push the header below it. */
body.home.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.home.admin-bar .dvd-header-fixed {
top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
/* WP admin bar is 46px tall on small screens */
body.home.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.home.admin-bar .dvd-header-fixed {
top: 46px;
}
}
body.home .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header) + * {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* HOME header = frosted glass over the hero: a light backdrop-blur veils the
image just behind the bar so the header reads as a pane of glass (present, yet
see-through) instead of vanishing on the dark hero. Immersion preserved — it is
NOT a solid panel. The existing ::before scrim gives it body for legibility.
On scroll the solid .is-scrolled state takes over (handled elsewhere). */
/* HOME header (audit team designer editoriali + optometristi, 2026-07-13):
NIENTE blur (velava l'arte, "effetto pellicola") e NIENTE scrim nero forte. L'header
"sparisce nell'arte": trasparente puro. La leggibilità la fanno (1) un'ombra doppia
attaccata ai glifi — invisibile sul nero, salvavita sul chiaro — + (2) un micro-scrim
di PAGINA impercettibile in cima + (3) tone-swap del testo sul solo banner chiaro. */
body.home:not(.is-header-scrolled) .dvd-header {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* DESIGN FLAT: NIENTE ombre/blur/scrim (contro l'identità). L'header è trasparente puro;
la leggibilità si risolve SOLO con lo SWAP DI COLORE del testo (chiaro su banner scuri,
scuro su banner chiari) via .is-header-on-light. Transizione morbida sul cambio banner. */
body.home:not(.is-header-scrolled) .dvd-header .dvd-navlink a,
body.home:not(.is-header-scrolled) .dvd-header .dvd-action,
body.home:not(.is-header-scrolled) .dvd-header .dvd-action__label,
body.home:not(.is-header-scrolled) .dvd-header .dvd-action svg,
body.home:not(.is-header-scrolled) .dvd-header .dvd-logo img{
text-shadow: none;
filter: none;
/* 400ms erano TROPPI: MISURATO con inspector che durante il passaggio al banner
chiaro il nav restava a `rgb(236,237,240)` — quasi bianco su fondo bianco =
header "sparito". Con l'aggancio smooth (piu' rapido del vecchio settle animato
a mano) il banner arriva prima che il colore abbia finito di sfumare.
Peggiora il fatto che il LOGO cambia con `content:url()`, che NON e' animabile:
commuta di scatto mentre il testo sfumava ancora → i due andavano fuori fase.
120ms: abbastanza per non essere uno stacco secco, troppo poco per lasciare
l'header illeggibile durante lo swipe. */
transition: color .12s ease, filter .12s ease;
}
/* TONE-SWAP (flat, solo colore): sul banner chiaro (django60) il body prende
.is-header-on-light → testo/icone header SCURI (#0b0b0e). Nessuna ombra. */
body.home.is-header-on-light:not(.is-header-scrolled) .dvd-header .dvd-navlink a,
body.home.is-header-on-light:not(.is-header-scrolled) .dvd-header .dvd-action,
body.home.is-header-on-light:not(.is-header-scrolled) .dvd-header .dvd-action__label,
body.home.is-header-on-light:not(.is-header-scrolled) .dvd-header .dvd-action svg{
color: var(--wp--preset--color--base) !important;
}
/* LOGO SVG (dal tema, vedi functions.php `render_block_core/site-logo`).
L' nativi: molti browser NON renderizzano box-shadow su (anche
con appearance:none) → il ring non compare. Fallback con OUTLINE (che il select
rende sempre), colore dal token focus. Vale per OGNI select del sito. */
.dvd-account.dvd-account select:focus,
.cgtv-checkout-main.cgtv-checkout-main select:focus,
.cgtv-cart.cgtv-cart select:focus,
.cgtv-orderconf.cgtv-orderconf select:focus,
select:focus{
outline: 2px solid var(--wp--custom--focus--border) !important;
outline-offset: 1px !important;
}
/* PLACEHOLDER centralizzato — theme.json NON supporta ::placeholder (ticket aperto
#71382, confermato dal RAG "How WP 6.9 gives forms a theme.json makeover"): l'unico
posto è il CSS. Regola GLOBALE su ogni input/textarea nativo del sito (search,
commenti, account, checkout non-React), colore dal token field.placeholder. Così il
placeholder = "etichetta" scelta nell'artifact è coerente ovunque, senza ridichiararlo
per pagina. (I campi React del checkout hanno label floating proprie: non li tocca.) */
input::placeholder,
textarea::placeholder{
color: var(--wp--custom--field--placeholder);
opacity: 1; /* Firefox abbassa l'opacità del placeholder di default */
}
.dvd-header__right { gap: var(--dvd-gap-text); }
.dvd-header__links { gap: clamp(1.1rem, 2vw, 1.6rem); } /* marquee nav: voci-testo grandi → gap ampio (niente pill/padding) */
.dvd-header__actions { gap: var(--dvd-gap-icons); }
.dvd-actions { gap: var(--dvd-gap-icons); }
/* Desktop layout: logo + links pinned LEFT, icons pinned RIGHT.
The bar is space-between (logo | right); we let __right span the free width
and push the action icons to the far right, so links sit next to the logo. */
@media (min-width: 861px) {
.dvd-header__right { flex: 1; }
/* links hug the logo on the left; the auto margin after them shoves the
icon group to the far right (where it was before).
NB: must out-specify WP's `.is-layout-flex > :is(*,div){margin:0}` which
zeroes flex-children margins — hence the parent>child selector. */
.dvd-header__right > .dvd-header__links {
margin-right: auto;
/* stacco logo→primo link: ridotto (era 2-4.5rem) così logo + nav leggono come UN
blocco editoriale a sinistra, non due gruppi distanti. ~φ del gap-text. */
padding-left: clamp(1.5rem, 3vw, 3rem);
}
}
/* Logo */
/* Logo sized by the golden ratio to the header height: logo height ≈ header/φ
(80/1.618 ≈ 49px tall → ~128px wide at the 304×116 aspect). */
.dvd-logo img { display: block; height: auto; width: clamp(96px, 10vw, 128px); }
/* Il marchio NON si comprime: se lo spazio manca deve cedere tutto il resto, non
lui. Senza questo il logo faceva da ammortizzatore per ogni eccedenza dell'header
(vedi la fascia 861–1100px qui sopra) e collassava fino a sparire. Vale per
qualsiasi larghezza, anche futura: è la protezione che mancava. */
.dvd-logo { flex: 0 0 auto; }
.dvd-logo img { flex-shrink: 0; }
/* Section links — elegant, spaced (Criterion) */
.dvd-navlink { margin: 0; }
/* Nav desktop = "MARQUEE DISPLAY" (direzione 02, panel editoriale lug 2026): voci in
BRICOLAGE grande e con peso (registro cartellone-cinema/MUBI), minuscolo, nessuno
sfondo. L'affordance è l'UNDERLINE (hover + attiva), non una pill. Tone-swap nativo:
tutto su currentColor → funziona su banner scuri (testo chiaro) e chiari (testo nero). */
.dvd-navlink a {
position: relative;
font-family: var(--wp--preset--font-family--heading); /* Bricolage */
font-weight: 700;
font-size: var(--wp--preset--font-size--base); /* ~1.25rem, da display */
letter-spacing: -0.01em;
text-transform: none;
color: var(--wp--preset--color--contrast); /* default chiaro; il tone-swap home
lo sovrascrive (!important) su banner chiari */
opacity: 0.82; /* voci a riposo un filo arretrate */
text-decoration: none;
white-space: nowrap;
padding: 0.25rem 0;
transition: opacity 0.16s ease;
}
/* FASCIA STRETTA 861–1200px — iPad orizzontale, finestre desktop non massimizzate.
MISURATO (panel viewport+CSS, lug 2026): a 1024px l'header chiede ~1088px —
7 voci di testo 626 + gap 123 + icone 158 + logo 102 + stacco/padding 79.
Eccedenza 64px, e li assorbiva TUTTI IL LOGO, che era l'unico elemento senza
`flex-shrink: 0`: le voci hanno `nowrap` e le icone larghezza fissa, quindi sono
incomprimibili. Il logo non spariva per una regola — veniva SCHIACCIATO a zero.
In verticale (768px) il problema non esiste: si è sotto 861px, il nav desktop non
c'è e compare l'hamburger.
Qui il nav scende di una taglia e stringe i gap: si recuperano ~150px, più del
necessario. Il registro "marquee" resta (Bricolage 700), cambia solo la taglia in
questa fascia; da 1100px in su il nav torna quello di sempre.
NB tarato sulla MISURA e non sul dispositivo: la stessa fascia copre le finestre
desktop ridotte, non solo l'iPad. */
@media (min-width: 861px) and (max-width: 1200px) {
.dvd-header__links { gap: 0.8rem; }
.dvd-navlink a { font-size: var(--wp--preset--font-size--small); }
.dvd-header__right > .dvd-header__links { padding-left: 1rem; }
}
/* Parte BASSA della fascia (861–950px): anche a taglia ridotta i conti non tornano
(a 861px servirebbero ~902px). Qui si stringe ancora: sotto i 950 il nav sta al
limite, e l'alternativa — mandare l'hamburger fin quasi a 1000px — toglierebbe il
nav orizzontale dove ci starebbe. Verificato: 861px passa da −41px a +18. */
@media (min-width: 861px) and (max-width: 950px) {
.dvd-header__links { gap: 0.55rem; }
.dvd-navlink a { font-size: var(--wp--preset--font-size--x-small); }
.dvd-header__right > .dvd-header__links { padding-left: 0.7rem; }
}
/* underline: si "scrive" da sinistra all'hover; piena sull'attiva */
.dvd-navlink a::after {
content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
background: currentColor; transition: width 0.22s ease;
}
@media (hover: hover) {
.dvd-navlink a:hover { opacity: 1; }
.dvd-navlink a:hover::after { width: 100%; }
}
/* PAGINA ATTIVA: opacità piena + underline pieno. L'accento resta il rosso brand solo
se l'header è solido/scuro; sui banner (tone-swap) l'underline segue currentColor per
non sparire su fondo chiaro. */
.dvd-navlink.is-active a { opacity: 1; }
.dvd-navlink.is-active a::after { width: 100%; }
.dvd-navlink--em a { font-style: italic; }
/* External-site link (Guarda in Streaming → other domain): nessuna icona (rimossa su
richiesta). Resta un normale navlink. */
.dvd-navlink--ext a { display: inline-flex; align-items: center; }
/* Action icons (account / cart) + drawer toggle — same size, same baseline.
Gap is the uniform header gap defined above. */
.dvd-header__actions { display: flex; align-items: center; }
/* ancora per il campo di ricerca in absolute (vedi .dvd-srchf) */
.dvd-header__right { position: relative; }
.dvd-actions { display: flex; align-items: center; }
.dvd-action {
/* reset native button chrome (cart/menu toggle are ) — no white box */
background: none;
border: 0;
-webkit-appearance: none;
appearance: none;
padding: 0;
cursor: pointer;
font: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: var(--dvd-icon-box);
height: var(--dvd-icon-box);
color: var(--wp--preset--color--contrast);
text-decoration: none;
line-height: 1;
position: relative;
}
.dvd-action .dvd-icon {
/* 1.55rem (~25px): riempie ~62% del box da 44px → l'icona ha "peso", non galleggia
in un box vuoto (era 1.4rem = 46%, troppo alone → fila che sembra larga/sparsa).
Tratto Lucide 1.75 invariato (coerenza col resto del sito). */
font-size: 1.55rem;
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.dvd-action:hover { color: var(--wp--preset--color--primary); }
/* micro-lift: the icon nudges up & grows a touch — tactile, alive, not noisy */
.dvd-action:hover .dvd-icon { transform: translateY(-1px) scale(1.08); }
}
/* Labels hidden visually but kept for screen readers (icons are self-evident
here; accessible names provided via aria-label on the svg) */
.dvd-action__label {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Cart state: empty = icon only (dot hidden); has items = small red dot, no number */
.dvd-action__dot {
position: absolute;
/* ancorato all'ICONA, non al box: l'icona è 1.55rem centrata, il pallino va sul suo
spigolo alto-destra. calc dal centro così regge box 44 e 40px. */
top: calc(50% - 0.85em);
right: calc(50% - 0.85em);
width: 9px; height: 9px;
border-radius: 999px;
background: var(--wp--preset--color--primary);
border: 2px solid var(--wp--preset--color--base);
display: none;
}
.dvd-action--cart.has-items .dvd-action__dot { display: block; }
/* pallino wishlist (stesso linguaggio del carrello, ma via ::after — il cuore navbar
non ha un elemento dot nel markup). Appare quando la lista non è vuota. */
.dvd-action--wishlist { position: relative; }
.dvd-action--wishlist::after {
content: ""; position: absolute; top: calc(50% - 0.85em); right: calc(50% - 0.85em);
width: 9px; height: 9px; border-radius: 999px;
background: var(--wp--preset--color--primary); border: 2px solid var(--wp--preset--color--base);
display: none;
}
.dvd-action--wishlist.has-items::after { display: block; }
/* Drawer toggle button — same box/size as the other icons, stays in place.
Swaps the list icon for an X when the drawer is open (aria-expanded). */
.dvd-drawer-toggle {
background: none; border: 0; cursor: pointer; padding: 0;
font: inherit;
}
/* The menu is a full dialog with its own header + close button (like cart /
filters), so it simply covers the site header when open — no icon/logo detach
needed anymore. */
/* --dvd-annc-offset = bar height when bar visible, 0 when hidden (scrolled) */
:root { --dvd-annc-offset: var(--dvd-annc-h); }
body.dvd-annc-hidden { --dvd-annc-offset: 0px; }
/* Perfect vertical centring: kill the paragraph's intrinsic line-height offset
so the link text centres exactly like the icons (same centre line). */
.dvd-navlink { line-height: 1; display: flex; align-items: center; }
.dvd-navlink a { line-height: 1; }
/* Both icon wrappers use the same display so list and X align identically.
(Previously __open was default inline -> sat on the text baseline, a few px
higher than __close which was inline-flex.) */
.dvd-drawer-toggle__open,
.dvd-drawer-toggle__close { display: inline-flex; align-items: center; justify-content: center; }
.dvd-drawer-toggle__close { display: none; }
.dvd-drawer-toggle[aria-expanded="true"] .dvd-drawer-toggle__open { display: none; }
.dvd-drawer-toggle[aria-expanded="true"] .dvd-drawer-toggle__close { display: inline-flex; }
/* ======================================================================
* UNIFIED DRAWER SYSTEM — .dvd-panel
* The menu, cart and filter drawers all inherit this. It owns the shared
* shell: position, width, background, border, slide transition, elevation,
* flex column layout, and the shared head / body / foot rhythm. Each panel
* only adds its own content styling. This is what makes the three feel like
* one native component. See --drawer-* tokens in :root.
* ==================================================================== */
.dvd-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: var(--drawer-w);
box-sizing: border-box;
background: var(--drawer-bg);
color: var(--wp--preset--color--contrast);
border-left: var(--drawer-border);
z-index: var(--drawer-z-panel);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--drawer-dur) var(--drawer-ease);
will-change: transform;
/* modern viewport unit so mobile browser chrome doesn't clip the foot */
height: 100dvh;
}
.dvd-panel.is-open { transform: translateX(0); }
/* Shared shell chrome: a header row, a scrolling body, an optional footer.
Every panel that has a titled header uses .dvd-panel__head/__title/__close. */
.dvd-panel__head {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: var(--drawer-head-pad-y) var(--drawer-pad-x);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dvd-panel__title {
/* flex row so il badge conteggio è un flex-item (non inline nel testo, dove
veniva schiacciato dalla line-height del titolo). */
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--medium);
line-height: 1;
color: #fff;
letter-spacing: 0.01em;
}
.dvd-panel__close {
flex: 0 0 auto;
background: none; border: 0; cursor: pointer; padding: 0;
width: 48px; height: 48px; margin: -0.5rem -0.5rem -0.5rem 0; /* 48px tap (regola progetto over-45), optically aligned */
display: inline-flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--muted);
transition: color 0.2s ease;
}
.dvd-panel__close .dvd-icon { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .dvd-panel__close:hover { color: var(--wp--preset--color--contrast); } }
.dvd-panel__body {
flex: 1 1 auto; min-height: 0; /* GOTCHA flexbox: senza min-height:0 il flex-item non si
restringe sotto il contenuto → non scrolla, "sfonda" sulla
pagina. Necessario perché overflow-y:auto funzioni nel flex. */
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: clamp(1rem, 3vw, 1.4rem) var(--drawer-pad-x);
/* scrollbar discreta, coerente col dark (default grigio-sistema = brutta) */
scrollbar-width: thin;
scrollbar-color: var(--wp--preset--color--line-2) transparent;
}
.dvd-panel__body::-webkit-scrollbar { width: 6px; }
.dvd-panel__body::-webkit-scrollbar-track { background: transparent; }
.dvd-panel__body::-webkit-scrollbar-thumb {
background: var(--wp--preset--color--line-2);
border-radius: var(--r-pill);
}
.dvd-panel__body::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--muted-2); }
.dvd-panel__foot {
flex: 0 0 auto;
padding: clamp(1.1rem, 3vw, 1.4rem) var(--drawer-pad-x)
calc(clamp(1.1rem, 3vw, 1.4rem) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(255,255,255,0.08);
}
/* Shared overlay — one visual, one behaviour, for all panels. Fades via the
.is-visible class (JS), never via [hidden] toggling (which killed the fade). */
.dvd-panel-overlay {
position: fixed; inset: 0;
z-index: var(--drawer-z-overlay);
background: var(--drawer-scrim);
opacity: 0; pointer-events: none;
transition: opacity var(--drawer-dur) var(--drawer-ease);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dvd-panel-overlay.is-visible { opacity: 1; pointer-events: auto; }
/* Body lock while any panel is open (class set by the shared JS controller). */
/* body-lock a drawer aperto: DEVE bloccare anche (documentElement), non solo .
Lo scroll della pagina è governato da nella maggior parte dei browser → con solo
body{overflow:hidden} lo scroll "sfuggito" dal drawer scrollava l'html rimasto visible.
(misurato con inspector: htmlOverflow=visible era la causa.) */
html:has(body.dvd-panel-open),
body.dvd-panel-open { overflow: hidden; }
/* ---- Shared section label -------------------------------------------------
The red uppercase eyebrow that heads each group. ONE definition used by the
menu ("Negozio"/"Scopri") AND the filters ("Supporto"/"Genere"/…) so the two
panels literally rhyme. */
.dvd-panel__section {
display: block;
font-family: var(--wp--preset--font-family--body);
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--wp--preset--color--primary, var(--acc-red));
margin: 0 0 0.5rem; padding: 0;
}
/* ---- DRAWER MENU — ridisegno "solo tipografia" (panel lug 2026, dibattito 3-1) ----
Niente icone-voce (nomi propri, non azioni → l'icona decorava; feel SaaS vs Criterion).
La scansione la fanno SEZIONI + peso tipografico + aria (gap-sezione 2× gap-voce) +
chevron. Firma di brand = filetto rosso sotto l'eyebrow di sezione (unico segno grafico). */
/* HEAD — eyebrow "MENU" (niente logo: ridondante, ruba spazio), stessa grammatica dei seck */
.dvd-drawer__head { align-items: center; }
.dvd-drawer__eyebrow {
display: inline-flex; align-items: center; gap: 0.5rem; /* accoglie il badge conteggio */
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
/* eyebrow di SEZIONE (Film / Ecosistema CGTV) — arretra, orienta; filetto rosso = firma */
.dvd-drawer__seck {
display: flex; align-items: center; gap: 0.7rem;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
margin: 0 0 0.4rem;
}
.dvd-drawer__rule { display: block; height: 2px; width: 26px; border-radius: 2px; background: var(--wp--preset--color--primary); flex: none; }
/* RIGA-VOCE — Space Grotesk 20px in piena luce, chevron a destra (unica affordance) */
.dvd-navrow {
display: flex; align-items: center; gap: 0.75rem;
min-height: 56px; /* comfort over-45 (>48 minimo) */
padding: 0 0.4rem;
text-decoration: none;
color: var(--wp--preset--color--contrast);
border-radius: var(--r-control);
transition: background 0.15s ease;
}
.dvd-navrow__label {
flex: 1 1 auto; min-width: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--medium); /* 20px */
font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
}
.dvd-navrow__arrow {
flex: 0 0 auto; width: 1.1rem; height: 1.1rem;
color: var(--wp--preset--color--muted);
transition: transform 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
/* hover = velo del colore-TESTO corrente (nav-hover editoriale), non un surface fisso */
.dvd-navrow:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.dvd-navrow:hover .dvd-navrow__arrow { color: var(--wp--preset--color--contrast); transform: translateX(2px); }
}
.dvd-navrow:active { opacity: 0.7; }
/* sezioni: gap grande fra gruppi (prossimità di Gestalt = il "binario" senza icone) */
.dvd-drawer__nav { display: flex; flex-direction: column; gap: clamp(1.8rem, 4.5vw, 2.4rem); }
.dvd-drawer__section { display: flex; flex-direction: column; }
/* ---- BLOCCO ACCOUNT nel FOOTER del drawer (login/logout dinamico), compatto ---- */
.dvd-drawer__foot { padding-top: clamp(0.7rem, 2.5vw, 1rem); }
.dvd-drawer__account {
display: block; text-decoration: none;
background: var(--wp--preset--color--surface-2);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--r-surface);
padding: clamp(0.7rem, 2.5vw, 0.9rem);
}
/* OSPITE — CTA una riga: testo + chevron */
.dvd-drawer__account.is-guest { display: flex; align-items: center; gap: 0.85rem; color: inherit; }
.dvd-drawer__gx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dvd-drawer__gt1 { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--contrast); }
.dvd-drawer__gt2 { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
.dvd-drawer__account.is-guest .dvd-navrow__arrow { flex: none; width: 1.1rem; height: 1.1rem; color: var(--wp--preset--color--muted); }
@media (hover: hover) { .dvd-drawer__account.is-guest:hover { border-color: var(--wp--preset--color--line-2); } }
/* LOGGATO — riga 1: avatar + nome/email + "Esci"; riga 2: "Il mio account" */
.dvd-drawer__user { display: flex; align-items: center; gap: 0.7rem; }
.dvd-drawer__avatar {
flex: none; width: 38px; height: 38px; border-radius: 50%;
background: var(--wp--preset--color--surface-3);
display: flex; align-items: center; justify-content: center;
font-family: var(--wp--preset--font-family--heading); font-weight: 700;
font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent);
}
.dvd-drawer__ux { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dvd-drawer__uname { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvd-drawer__uemail { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvd-drawer__uout {
flex: none; text-decoration: none;
font-family: var(--wp--preset--font-family--heading); font-weight: 600;
font-size: var(--wp--preset--font-size--x-small);
color: var(--wp--preset--color--muted); padding: 6px 8px;
}
@media (hover: hover) { .dvd-drawer__uout:hover { color: var(--wp--preset--color--accent); } }
.dvd-drawer__uacct {
display: flex; align-items: center; text-decoration: none;
margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--wp--preset--color--line);
font-family: var(--wp--preset--font-family--heading); font-weight: 600;
font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast);
}
.dvd-drawer__uacct span { flex: 1; }
.dvd-drawer__uacct .dvd-navrow__arrow { flex: none; width: 1rem; height: 1rem; color: var(--wp--preset--color--muted); }
@media (hover: hover) { .dvd-drawer__uacct:hover .dvd-navrow__arrow { color: var(--wp--preset--color--contrast); transform: translateX(2px); } }
/* ===== Mobile: header shows only logo + icons; text links live in drawer =====
!important needed: WP's .wp-block-group-is-layout-flex sets display:flex with
equal specificity but loads after our stylesheet, so it'd otherwise win. */
@media (max-width: 860px) {
.dvd-header__links { display: none !important; }
/* Barra mobile: restano SOLO le 5 icone (cerca, cuore, account, carrello, menu). Box
più raccolto (44→40px) e icona leggermente più piccola così i 5 target non riempiono
quasi tutta la barra su schermi ~360px. Resta comodo al tocco (40px, area estesa dal
gap). Audit optometrico lug 2026. */
:root { --dvd-icon-box: 40px; }
.dvd-action .dvd-icon { font-size: 1.45rem; }
/* All panels go full-screen on mobile (native app sheet) — one rule via the
shared base, so menu/cart/filters are identical edge-to-edge. */
.dvd-panel { width: 100%; border-left: 0; }
/* A touch more presence for the primary rows where there's room (over-45). */
.dvd-navrow__label { font-size: 1.25rem; }
.dvd-navrow--sub .dvd-navrow__label { font-size: 1rem; }
}
/* ===== Hero (full-bleed, header overlaps it) ===== */
/* Kill the top root padding + the 24px top margin WP puts between top-level
blocks, so the hero starts flush at the very top (header floats over it). */
.home .wp-site-blocks { padding-top: 0; }
.home .wp-site-blocks > * { margin-block-start: 0; }
.home .dvd-main,
.home .dvd-main > .dvd-hero { margin-block-start: 0 !important; margin-top: 0 !important; }
/* Override the inline min-height (88/100vh) to use small-viewport units so
mobile URL bars don't create a gap. !important beats the block's inline style. */
.dvd-hero { margin-top: 0; min-height: 100svh !important; }
/* ============================================================================
SCROLL-SNAP HERO (homepage) — 8 banner full-height che si "agganciano" scrollando
(giù E su), come Criterion. DUE meccanismi per device:
- DESKTOP: JS vanilla (assets/js/hero-snap.js) intercetta wheel/tasti → anima
window.scrollTo alla sezione → la scrollbar nativa si muove, snap simmetrico.
- TOUCH: scroll-snap NATIVO del browser (blocco @media pointer:coarse sotto), i
banner a 100lvh. Il JS non tocca lo scroll su touch (combatterebbe il momentum).
Base qui = 100svh (desktop/fallback); su touch lo sovrascrive 100lvh (altezza
costante → niente scatto da barra indirizzi). Esce libero verso footer / sopra il primo.
========================================================================= */
.home .dvd-hero--snap { min-height: 100svh !important; }
/* durante lo snap animato dal JS (solo desktop/wheel), blocca la selezione testo */
.home.dvd-hero-snapping { user-select: none; }
/* ---- SCROLL-SNAP NATIVO SU TOUCH (mobile/tablet) ----
Scroll di PAGINA normale + scroll-snap NATIVO. Lo SCATTO quando la barra indirizzi
appare/scompare è il "resize recalculation" (RAG GSAP: `ignoreMobileResize` — quando la
barra ridimensiona il viewport, gli snap ricalcolano start/end → jump). La causa qui era
`100dvh`: dvh INSEGUE la barra → i pannelli cambiano altezza ad OGNI pixel di movimento
→ mandatory riaggancia → scatto.
FIX: altezza COSTANTE con `lvh` (Large Viewport Height = barra NASCOSTA, valore FISSO
che NON insegue la barra). Così i pannelli non cambiano mai altezza durante lo scroll →
nessun ricalcolo snap → nessuno scatto. E siccome è il valore "grande", quando la barra
è nascosta riempie esatto (no gap); quando è visibile sfora sotto (invisibile, contenuto
in alto). Solo touch; su desktop lo snap lo fa il wheel-JS. */
@media (hover: none) and (pointer: coarse) {
html:has(body.home) {
scroll-snap-type: y mandatory;
}
/* iOS: lo snap lo guida il driver JS (scroll-jacking, vedi hero-snap.js). Il
mandatory nativo confliggerebbe (flick a velocità estreme → salti di 2 banner,
misurato). Lo spengo quando il JS ha rilevato iOS (body.dvd-ios-snap). Android
resta sul nativo (lì funziona e il preventDefault touch lo rompeva). */
html:has(body.home.dvd-ios-snap) {
scroll-snap-type: none;
}
/* FOOTER LATCH: entrati nel footer, il JS mette body.dvd-snap-off → disattivo lo snap
nativo così scrollando su NON si ri-aggancia ai banner (come Criterion). */
html:has(body.home.dvd-snap-off) {
scroll-snap-type: none;
}
.home .dvd-hero--snap {
scroll-snap-align: start;
scroll-snap-stop: always; /* uno swipe veloce non salta un banner */
height: 100lvh !important;
min-height: 100lvh !important;
}
/* L'ULTIMO banner NON deve trattenere verso il footer: niente snap-stop e niente
align → scrollando giù dall'ultimo banner si esce LIBERI nel footer (prima il
mandatory+stop:always lo ri-risucchiava = deadlock, non si usciva). L'entrata
nel footer resta comunque pulita perché il banner riempie 100lvh. */
.home .dvd-hero--snap:last-child {
scroll-snap-stop: normal;
scroll-snap-align: none;
}
/* con snap-off, tolgo anche l'align così i pannelli non attraggono più */
.home.dvd-snap-off .dvd-hero--snap { scroll-snap-align: none; }
}
@media (prefers-reduced-motion: reduce) {
html:has(body.home) { scroll-snap-type: none; }
}
/* Sfumatura in cima all'hero: garantisce la leggibilità del testo BIANCO sui banner
scuri (safe). Morbida (sfuma a 0), NON un bordo netto. VIENE TOLTA sul banner chiaro
(.is-header-on-light) dove il testo diventa nero → lì la sfumatura scura sarebbe
controproducente e brutta. */
body.home .dvd-hero--snap::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 34vh;
background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0) 100%);
pointer-events: none;
z-index: 1;
transition: opacity .4s ease;
}
/* banner CHIARO (testo nero) → via la sfumatura scura */
body.home.is-header-on-light .dvd-hero--snap::before { opacity: 0; }
/* ── LOOK "COPERTINA DVD STAMPATA" (panel imaging+art-direction+prepress, lug 2026) ──
Peso materico da carta patinata SENZA esagerare. Due parti:
1) micro-tocco editoriale sul SOLO layer immagine (non sulla cover → non slava logo/CTA):
contrast +6% (neri/micro-contrasto), saturate −4% (de-satura "Criterion"),
brightness −1% (chiude appena i midtone = dot-gain). Confine col cheap: contrast max
1.08, saturate MAI sopra 1.0. La nitidezza VERA (sharpen+width per DPR) va fatta a
monte su Cloudflare — questo è solo il tocco uniforme sugli 8 banner.
2) grana di stampa: SVG feTurbulence FINE (retino, non rumore grosso), desaturata,
mix-blend soft-light (come inchiostro su carta, non overlay che stacca), opacity .05
("la senti non la vedi"), FISSA (la carta non si muove). */
.dvd-hero__bg,
.dvd-hero__bg-desktop,
.dvd-hero__bg-mobile {
filter: contrast(1.06) saturate(0.96) brightness(0.99);
}
.dvd-hero--snap::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: 1; /* sopra l'immagine, sotto il contenuto (z-index 2) */
/* grana fine monocromatica (fractalNoise alta freq.). NIENTE mix-blend-mode: nel contesto
del wp-block-cover (background-dim #000 sotto) il blend si fonde col nero → invisibile.
Layer opaco diretto: la texture desaturata a bassa opacity dà comunque l'effetto carta. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px; /* tile piccola = grana FINE (retino) */
opacity: 0.07; /* materica ma non "sporco"; senza blend serve un filo più del .05 teorico */
}
/* banner CHIARO (django60): su fondo chiaro la grana si vede di più → abbassala */
body.home .dvd-hero--snap[data-tone="light"]::after { opacity: 0.05; }
.dvd-hero .wp-block-cover__inner-container { width: 100%; position: relative; z-index: 2; }
.dvd-hero__content { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.dvd-hero__sub { max-width: 46ch; opacity: 0.92; }
/* titolo TESTUALE del banner (2° banner usa un heading, non un'immagine-titolo) */
.dvd-hero__heading {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--xxx-large, var(--wp--preset--font-size--xx-large));
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--wp--preset--color--contrast);
text-shadow: 0 2px 18px rgba(0,0,0,0.55);
text-wrap: balance;
}
/* Hero title image (The Addiction) — centered, responsive cap */
.dvd-hero__title { margin: 0; }
.dvd-hero__title img {
/* dimensione φ-armonica (perfezione aurea): max 350px = 216 × φ (il target del
vecchio sito), min 216px = 350 ÷ φ → min e max sono in rapporto aureo esatto.
FLAT: niente drop-shadow (era contro l'identità). */
width: clamp(216px, 28vw, 350px);
height: auto;
display: block;
}
/* ---- Scroll cue: UNA chevron FISSA in basso, segnala che i banner sono scrollabili ----
Fixed al viewport (non una per banner): resta ferma mentre i banner scorrono e
svanisce appena si entra nel contenuto sotto (body.is-header-scrolled). Decorativa
(aria-hidden): lo scroll vero lo fa lo snap. Colore che segue il tone-swap del body
(off-white su banner scuri, scuro sul banner chiaro). Bob morbido in CSS (niente GSAP:
una libreria per un bob sarebbe sproporzionata su un sito performance-critical). */
.dvd-hero__scrollcue {
position: fixed;
left: 50%;
bottom: clamp(1.5rem, 4vh, 3rem);
transform: translateX(-50%);
z-index: 350; /* sopra i banner, sotto header (400) e drawer */
color: var(--wp--preset--color--contrast); /* off-white su banner scuri */
opacity: 0.9;
pointer-events: none;
/* Leggibilità su QUALSIASI arte: alone tone-aware discreto (drop-shadow segue la
forma dello stroke, non un box). Freccia BIANCA (banner scuri) → alone SCURO che
la stacca; + un velo scuro più ampio come rinforzo sui fondi ambigui/mimetici.
Sul banner chiaro si inverte (regola sotto). Doppio shadow = staccato ma pulito. */
filter:
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}
.dvd-hero__scrollcue-icon { width: 3.25rem; height: 3.25rem; display: block; }
/* banner CHIARO in vista (tone-swap body) → chevron scuro + alone CHIARO (si inverte:
l'ombra scura su fondo chiaro sparirebbe → serve un glow bianco che lo stacchi). */
body.is-header-on-light .dvd-hero__scrollcue {
color: var(--wp--preset--color--base);
filter:
drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6))
drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
/* usciti dai banner → sparizione SECCA (niente transition, non deve durare sul footer) */
body.is-header-scrolled .dvd-hero__scrollcue { display: none; }
/* solo in home: fuori dalla home il container non c'è, ma per sicurezza */
body:not(.home) .dvd-hero__scrollcue { display: none; }
/* ---- RESPONSIVE BG: desktop (orizzontale) vs mobile (verticale, art-direction) ----
Il cover ha 2 (la scelta la fa il , stessa condizione di qui
sopra): le due regole precedenti restano per il markup a due non deve avere una scatola propria nel flex del cover: l' (e.g. Catalogo Completo) */
color: inherit;
}
a.dvd-cat-tile .dvd-cat-tile__name { text-decoration: none; }
@media (hover: hover) {
a.dvd-cat-tile:hover { background: var(--wp--preset--color--surface-3); }
a.dvd-cat-tile:hover .dvd-cat-tile__name { color: var(--wp--preset--color--primary, var(--acc-red)); }
a.dvd-cat-tile:hover .dvd-cat-tile__img { transform: scale(1.04); }
}
.dvd-cat-tile__link {
display: block;
text-decoration: none;
color: inherit;
}
.dvd-cat-tile__name {
display: block;
font-family: var(--wp--preset--font-family--body); /* film/categorie in card: sempre Zen Kaku, mai serif */
font-size: var(--wp--preset--font-size--small); /* theme min, readable (over-45) */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--wp--preset--color--contrast); /* white at rest; red only on hover (like film titles) */
margin: 0 auto var(--ws-2, 1rem);
transition: color 0.2s ease;
}
.dvd-cat-tile__poster {
display: block;
/* no overflow:hidden — the whole poster scales up on hover (grows), it is NOT
cropped inside a fixed box. */
}
.dvd-cat-tile__img,
.dvd-cat-tile__poster img {
display: block;
width: var(--poster-w); /* the reference measure P */
height: auto; /* whole poster, real 2:3 ratio, no crop */
margin: 0 auto;
transition: transform 0.35s ease;
}
.dvd-cat-tile__caption {
display: block;
font-family: var(--wp--preset--font-family--body); /* Zen Kaku */
font-weight: 400; /* descrizione categoria */
font-style: italic;
font-size: var(--wp--preset--font-size--small); /* readable, theme min */
line-height: 1.45;
color: var(--wp--preset--color--muted);
max-width: calc(var(--poster-w) * 1.618); /* a touch wider than the poster (φ) */
margin: var(--ws-2, 1rem) auto 0;
}
@media (hover: hover) {
.dvd-cat-tile:hover { background: var(--wp--preset--color--surface-3); }
.dvd-cat-tile:hover .dvd-cat-tile__name { color: var(--wp--preset--color--primary, var(--acc-red)); }
.dvd-cat-tile:hover .dvd-cat-tile__img,
.dvd-cat-tile:hover .dvd-cat-tile__poster img { transform: scale(1.04); }
}
/* --- full-width featured film cover --- */
/* --- full-width hero slider (Criterion-style, backdrops + left text) --- */
.dvd-hero-slider {
position: relative;
/* full-bleed: break out of the page's lateral root padding.
NB: NOT `100vw` — su iOS Safari 100vw include la gutter/scrollbar (risolve a
424px su un viewport 414px) → allarga il documento → tutta la pagina zoomata e
il padding destro tagliato. Usiamo margini negativi = root-padding reale, così
restiamo edge-to-edge SENZA introdurre la larghezza-fantasma di vw. */
width: auto;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
margin-top: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 0; /* attached to the next section */
height: 88vh; /* nearly full viewport, leaves a hint of the page below */
min-height: 460px;
overflow: hidden;
background: #000;
}
.dvd-hero-slider__track { position: absolute; inset: 0; }
.dvd-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
}
.dvd-hero-slide.is-active { opacity: 1; visibility: visible; }
.dvd-hero-slide__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
/* "cinema HD" grade: a touch more contrast + saturation makes the image stack
and read richer/sharper (perceived quality). Paired with the static grain
below (::after) which masks JPEG compression/banding → film look, not
"compressed photo". GPU-accelerated, no JS. */
filter: contrast(1.06) saturate(1.08) brightness(0.99);
}
.dvd-hero-slide__scrim {
position: absolute;
inset: 0;
/* darken left side for text legibility, fade to clear on the right */
background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
}
/* static film grain over the backdrop — editorial cinema texture (CSS only,
no JS: a still grain doesn't need animation). SVG fractal noise tile. */
.dvd-hero-slide__bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.07; /* subtle: anti-banding/JPEG mask, not visible "snow" */
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
.dvd-hero-slide__content {
position: relative;
z-index: 1;
max-width: 44rem;
padding-left: clamp(1.5rem, 6vw, 8rem); /* aligns with page lateral padding */
padding-right: 1.5rem;
color: var(--wp--preset--color--contrast);
}
.dvd-hero-slide__kicker {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--wp--preset--color--primary, var(--acc-red));
margin: 0 0 1rem;
}
.dvd-hero-slide__title {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 500;
line-height: 1.02;
margin: 0 0 1.25rem;
}
.dvd-hero-slide__desc {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--base);
line-height: 1.55;
color: #d8d8d8;
max-width: 34rem;
margin: 0 0 1.25rem;
}
/* commerce meta: price + formats — the signal that this is a PRODUCT for sale,
not an editorial feature. Sits between the synopsis and the buy CTA. */
.dvd-hero-slide__meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 0.6rem 1rem;
margin: 0 0 1.5rem;
}
.dvd-hero-slide__price {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
color: #fff;
}
.dvd-hero-slide__formats {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--wp--preset--color--muted);
padding-left: 1rem;
border-left: 1px solid var(--wp--preset--color--line);
}
.dvd-hero-slide__cta {
display: inline-block;
font-family: var(--wp--preset--font-family--body);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--wp--preset--color--primary, var(--acc-red));
transition: color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
.dvd-hero-slide__cta:hover { color: var(--wp--preset--color--primary, var(--acc-red)); }
}
/* PROMO badge: a red pill above the kicker — only promo slides have it, so the
promotion stands out from the standard "film in evidenza" slides. */
.dvd-hero-slide__badge {
display: inline-block;
align-self: flex-start;
background: var(--wp--preset--color--primary, var(--acc-red));
color: #fff;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
border-radius: var(--r-pill);
margin-bottom: 1rem;
}
/* promo slide → CTA is a FILLED white button (not the underlined "Scopri") */
.dvd-hero-slide__cta--fill {
background: #fff;
color: #070707;
border: 0;
border-radius: var(--r-control);
padding: 0.85rem 2rem;
transition: background-color 0.25s ease;
}
@media (hover: hover) {
.dvd-hero-slide__cta--fill:hover { background: #d4d0c8; color: #070707; }
}
/* arrows */
.dvd-hero-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: none;
border: 0;
color: rgba(255,255,255,0.85);
cursor: pointer;
transition: color 0.2s ease;
}
.dvd-hero-slider__arrow--prev { left: clamp(0.25rem, 1.5vw, 1rem); }
.dvd-hero-slider__arrow--next { right: clamp(0.25rem, 1.5vw, 1rem); }
@media (hover: hover) { .dvd-hero-slider__arrow:hover { color: #fff; } }
/* numeric dots 1 / 2 / 3 (top-right, like Criterion) */
.dvd-hero-slider__dots {
position: absolute;
top: clamp(1rem, 3vw, 2rem);
right: clamp(1rem, 4vw, 3rem);
z-index: 2;
display: flex;
gap: 1.25rem;
}
.dvd-hero-slider__dot {
background: none;
border: 0;
padding: 0;
font-family: var(--wp--preset--font-family--body);
font-size: 1rem;
color: rgba(255,255,255,0.55);
cursor: pointer;
transition: color 0.2s ease;
line-height: 1;
}
.dvd-hero-slider__dot.is-active {
color: #fff;
width: 2.25rem; height: 2.25rem;
border: 1px solid rgba(255,255,255,0.8);
border-radius: 50%;
}
@media (max-width: 600px) {
.dvd-hero-slide__content { padding-right: 1.5rem; }
.dvd-hero-slider__dots { top: auto; bottom: 1rem; right: 1.25rem; }
}
/* --- "Novità in catalogo": full-width surface band (breaks the black page) --- */
.dvd-novita {
width: auto;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
margin-block: clamp(2.5rem, 6vw, 4.5rem);
background: var(--wp--preset--color--surface);
padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.dvd-novita__inner {
max-width: 1280px;
margin: 0 auto;
padding-inline: clamp(1.5rem, 6vw, 8rem);
/* border-box OBBLIGATORIO: il padding arriva a 128px per lato → senza, si somma
alla max-width e questo blocco misura 1536px. Ed è dentro un genitore già
full-bleed a margini negativi, quindi lo sforamento si somma due volte. */
box-sizing: border-box;
width: 100%;
}
.dvd-novita .dvd-shop-section__title { margin-top: 0; }
/* two-level section head: Inter uppercase kicker + Oswald (not-caps) title, centered */
.dvd-section-head {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.dvd-section-head__kicker {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--primary, var(--acc-red));
margin: 0 0 0.6rem;
}
.dvd-section-head__title {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large); /* level 2: one φ-step below the page title */
font-weight: 500;
text-transform: none; /* NOT uppercase */
letter-spacing: 0.01em;
line-height: 1.1;
color: var(--wp--preset--color--contrast);
margin: 0;
}
/* Mobile: section headers go MINIMAL so the content (posters) breathes. The big
titles eat the short viewport — shrink the title, tighten the kicker, compact
the block. Desktop keeps its editorial scale. */
@media (max-width: 640px) {
.dvd-section-head { margin-bottom: clamp(1.1rem, 4vw, 1.6rem); }
.dvd-section-head__kicker,
.dvd-landing__eyebrow {
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.14em; margin: 0 0 0.3rem;
}
.dvd-section-head__title,
.dvd-landing__claim {
font-size: var(--wp--preset--font-size--medium); /* ~21px, not ~26-31 */
}
.dvd-landing__head { margin-bottom: clamp(1.6rem, 6vw, 2.4rem); }
}
.dvd-novita__cta-wrap { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
/* .dvd-novita__cta shares the white-CTA definition + off-white hover above. */
.dvd-novita__cta { display: inline-block; }
/* --- film grid: whole posters, white title, director in italics (no card) --- */
/* poster reference width P — same scale as the category tiles, so the section
posters match the ones above. Text columns derive from P in golden steps. */
.dvd-film-grid {
--poster-w: clamp(108px, 9vw, 140px);
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
justify-items: center;
/* inset so the first/last poster line up with the category posters above.
Solved for the 5-col grid: P ≈ 4.3% lands the edge posters at the same x. */
padding-inline: 4.3%;
}
.dvd-film-card {
display: block;
text-decoration: none;
text-align: center;
color: inherit;
width: 100%;
}
.dvd-film-card__poster { display: block; }
.dvd-film-card__img {
display: block;
width: var(--poster-w); /* small poster, NOT full card width */
max-width: 100%;
height: auto; /* whole poster, real 2:3, not cropped */
margin: 0 auto var(--ws-2, 0.9rem);
border-radius: 2px;
/* like a print: hairline frame + a soft lift, refined like the product poster */
box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 10px 22px -12px rgba(0,0,0,0.6);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dvd-film-card__title {
display: block;
max-width: calc(var(--poster-w) * 1.618); /* a touch wider than the poster */
margin: 0 auto;
font-family: var(--wp--preset--font-family--body); /* film in card: sempre Zen Kaku, mai serif */
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.25;
color: #fff; /* white at rest (best contrast); brand red only on hover */
transition: color 0.25s ease;
}
.dvd-film-card__director {
display: block;
max-width: calc(var(--poster-w) * 1.618);
margin: 0.35rem auto 0;
font-family: var(--wp--preset--font-family--body);
font-style: italic;
font-size: 0.9rem;
color: var(--wp--preset--color--muted);
}
@media (hover: hover) {
.dvd-film-card:hover .dvd-film-card__img {
transform: scale(1.03);
box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 18px 34px -14px rgba(0,0,0,0.7);
}
.dvd-film-card:hover .dvd-film-card__title { color: var(--wp--preset--color--primary, var(--acc-red)); } /* brand red on hover */
}
/* multidevice: keep posters small, columns step down 5 → 4 → 3 */
@media (max-width: 1024px) {
.dvd-film-grid { grid-template-columns: repeat(4, 1fr); --poster-w: clamp(100px, 13vw, 130px); }
}
@media (max-width: 600px) {
.dvd-film-grid {
grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile */
--poster-w: clamp(108px, 34vw, 150px);
gap: 1.5rem 1rem;
padding-inline: 0; /* edge alignment is a desktop concern */
}
/* show 4 on mobile (2×2): hide the 5th film of each one-row section */
.dvd-film-grid .dvd-film-card:nth-child(5) { display: none; }
.dvd-film-card__director { font-size: 0.82rem; }
}
/* with 5 per row, Novità shows 8 → 5 + 3; that's fine, last row left-aligned */
/* --- Collezioni in evidenza: 1 full-width banner + 2 side-by-side --- */
.dvd-collections {
/* divine proportion: hero = 100vh, pair = 100vh/φ ≈ 61.8vh.
hero:pair = φ, and hero+pair = 100vh·φ ≈ 161.8vh → the section is
φ taller than the viewport (overflows by design). */
width: auto;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
margin-block: 0; /* attached to previous and next sections */
display: flex;
flex-direction: column;
gap: 2px; /* hairline like the rest */
}
.dvd-collections__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.dvd-collection {
position: relative;
display: flex;
align-items: flex-end; /* anchor content to the bottom */
justify-content: center; /* centered horizontally */
box-sizing: border-box;
padding: clamp(2rem, 5vw, 3.25rem); /* bottom breathing room (golden) */
text-decoration: none;
overflow: hidden;
text-align: center;
}
/* image layer (hover effect = TV grain, no zoom) */
.dvd-collection__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.dvd-collections__hero .dvd-collection { height: 72vh; }
.dvd-collections__pair .dvd-collection { height: 44.5vh; } /* 72vh/φ — hero:pair = φ, sum ≈ 116vh */
.dvd-collection__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.1) 100%);
transition: background 0.3s ease;
}
.dvd-collection__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.dvd-collection__eyebrow {
display: block;
font-family: var(--wp--preset--font-family--heading); /* corsivo collezioni in evidenza: font titoli (Bricolage) */
font-style: italic;
font-size: var(--wp--preset--font-size--small);
color: #e0e0e0;
margin-bottom: 0.62rem; /* φ rhythm */
}
.dvd-collection__name {
display: inline-block;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
line-height: 1.08;
color: #fff;
padding-bottom: 0.62rem;
border-bottom: 2px solid rgba(255,255,255,0.5); /* neutral underline; interaction cue is the grain */
transition: border-color 0.25s ease;
}
.dvd-collections__hero .dvd-collection__name { font-size: var(--wp--preset--font-size--x-large); }
/* subtitle (editorial promo line under the name) — only some collections have it */
.dvd-collection__subtitle {
display: block;
margin-top: 0.7rem;
max-width: 42ch;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--base);
line-height: 1.5;
color: rgba(255,255,255,0.82);
}
.dvd-collections__pair .dvd-collection__subtitle { font-size: var(--wp--preset--font-size--small); }
/* when a subtitle exists, the name drops its underline (it would split name↔subtitle) */
.dvd-collection__body:has(.dvd-collection__subtitle) .dvd-collection__name {
border-bottom: 0;
padding-bottom: 0;
}
@media (hover: hover) {
.dvd-collection:hover .dvd-collection__name { border-bottom-color: #fff; }
}
/* Retro-TV grain on hover (home collection banners, desktop): instead of a red
tint, the image picks up a soft analog disturbance — the grain canvas fades in.
Reuses the noise engine; no GSAP. Canvas injected via JS, sits above the image,
below the text. Idle = clean; hover = light static. */
.dvd-collection__noise {
position: absolute; inset: 0; z-index: 1;
width: 100%; height: 100%;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.dvd-collection__body { position: relative; z-index: 2; } /* text above the grain */
@media (hover: hover) {
.dvd-collection:hover .dvd-collection__noise { opacity: 0.12; }
}
@media (max-width: 600px) {
.dvd-collections__pair { grid-template-columns: 1fr; }
}
/* --- product lists ([products] shortcode): surface cards, 2px hairline gap --- */
.dvd-shop-list .products,
.dvd-shop-list ul.products,
.dvd-shop-list ul.products.columns-5 {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 2px !important; /* hairline separators, like the category tiles */
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* beat WooCommerce's float-based grid (woocommerce-layout.css); each product = a card */
.dvd-shop-list ul.products li.product,
.dvd-shop-list ul.products li.product.first,
.dvd-shop-list ul.products li.product.last {
--poster-w: clamp(120px, 11vw, 150px);
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: var(--ws-3, 1.6rem) var(--ws-2, 1rem) !important;
float: none !important;
clear: none !important;
text-align: center;
background: var(--wp--preset--color--surface);
transition: background-color 0.25s ease;
}
.dvd-shop-list ul.products::before,
.dvd-shop-list ul.products::after { content: none !important; display: none !important; }
.dvd-shop-list ul.products li.product img {
display: block;
width: var(--poster-w); /* same reference measure P as category tiles */
height: auto; /* whole poster, real 2:3 ratio, no crop */
margin: 0 auto var(--ws-2, 0.75rem);
transition: transform 0.35s ease;
}
/* text column a touch wider than the poster (φ), centered */
.dvd-shop-list ul.products li.product .woocommerce-loop-product__title,
.dvd-shop-list ul.products li.product .price {
max-width: calc(var(--poster-w) * 1.618);
margin-left: auto;
margin-right: auto;
}
.dvd-shop-list ul.products li.product .woocommerce-loop-product__title {
font-family: var(--wp--preset--font-family--body); /* film in card: sempre Zen Kaku, mai serif */
font-size: var(--wp--preset--font-size--small); /* readable */
font-weight: 500;
line-height: 1.3;
color: var(--wp--preset--color--contrast);
padding: 0;
margin-bottom: 0.4rem;
}
.dvd-shop-list ul.products li.product .price {
display: block;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--body);
}
.dvd-shop-list ul.products li.product .price ins { color: var(--wp--preset--color--contrast); text-decoration: none; }
.dvd-shop-list ul.products li.product .button {
margin-top: var(--ws-2, 0.75rem);
background: var(--wp--preset--color--primary, var(--acc-red));
color: #fff;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.85rem; /* small but tappable label, over-45 */
font-weight: 700;
}
@media (hover: hover) {
.dvd-shop-list ul.products li.product:hover { background: var(--wp--preset--color--surface-3); }
.dvd-shop-list ul.products li.product a:hover img { transform: scale(1.04); }
.dvd-shop-list ul.products li.product .button:hover {
background: var(--wp--preset--color--primary-dark, var(--acc-red-dark));
}
}
/* responsive grids */
@media (max-width: 1024px) {
.dvd-shop-list .products,
.dvd-shop-list ul.products { grid-template-columns: repeat(3, 1fr); }
.dvd-cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
/* category tiles stack one-per-row, horizontal: poster left, text right */
.dvd-cat-grid--4,
.dvd-cat-grid--2 { grid-template-columns: 1fr; gap: 2px; }
.dvd-cat-tile {
text-align: left;
padding: var(--ws-2, 1rem);
display: grid;
grid-template-columns: auto 1fr; /* poster | text */
grid-template-rows: auto auto;
column-gap: var(--ws-2, 1rem);
align-items: center;
}
.dvd-cat-tile__poster { grid-column: 1; grid-row: 1 / span 2; }
.dvd-cat-tile__img,
.dvd-cat-tile__poster img { width: 84px; margin: 0; } /* smaller poster on the side */
.dvd-cat-tile__name { grid-column: 2; grid-row: 1; margin: 0; padding: 0; text-align: left; align-self: end; }
.dvd-cat-tile__caption { grid-column: 2; grid-row: 2; margin: 0.35rem 0 0; max-width: none; text-align: left; align-self: start; }
.dvd-shop-list .products,
.dvd-shop-list ul.products { grid-template-columns: repeat(2, 1fr); }
}
/* ===== WooCommerce archive (shop + categories): table list / card grid ===== */
/* Full-width come le altre vetrine (.dvd-exc/.dvd-nov): gutter = root-padding del sito,
NON il vecchio clamp(…,8rem) che stringeva la pagina ben oltre il container. */
.dvd-archive { padding-inline: var(--wp--style--root--padding-right, 1.5rem); }
/* header on the site background (base) */
/* archive head uses the editorial .dvd-landing__head (eyebrow + claim, centred),
uniform with the Acquista Film landing — no own width/title rules needed. */
/* "Gabbia aperta" (panel): container centrato SUL FONDO base (NON una card surface che
avvolge tutto — schiaccerebbe i poster su grigio uniforme). La delimitazione la fanno
max-width + le hairline tra gli elementi. La surface resta per il SINGOLO elemento
(riga in hover / poster in griglia), non per la tovaglia. */
.dvd-archive__container {
max-width: 1280px; /* come .dvd-nov: respiro per la griglia a 6 colonne */
width: 100%; /* GOTCHA overflow: max-width da solo non basta; senza width:100% un figlio
più largo (toolbar no-wrap) sfora e stringe il sito su mobile */
box-sizing: border-box;
margin: 0 auto;
background: transparent;
overflow-x: clip; /* cintura LOCALE (non hidden: non crea scroll-container) */
}
/* ===== ESCLUSIVE — pagina categoria con banner-artwork per prodotto (mockup approvato) =====
Densità adattiva: i primi 2 a tutta larghezza (.dvd-x--feat), poi griglia 2-col. Artwork
CF (10:3) + titolo/sottotitolo/Scopri in HTML sotto. Tutto dai token del design system. */
.dvd-exc { max-width: none; margin: 0 auto; padding: 0 var(--wp--style--root--padding-right, 1.5rem); box-sizing: border-box; width: 100%; }
.dvd-exc > * { max-width: 1200px; margin-inline: auto; width: 100%; box-sizing: border-box; }
/* Intestazione — variante C (audit "Leo Burnett" + UX + optometristi).
SPAZIO SOPRA: nessun padding-top proprio → lo dà il respiro-header generico del main
(~2.5rem, uniforme a tutte le pagine interne). Prima l'head aggiungeva 4.5rem che si
SOMMAVANO → ~7rem di vuoto (stesso errore del checkout). Ora ingresso unico e coerente.
SPAZIO SOTTO (verso i banner): clamp φ, generoso ma non eccessivo.
Ritmo interno φ: eyebrow(.7rem)→claim→sub(.9rem)→rule(1.4rem). */
.dvd-exc__head {
max-width: 40rem; /* claim breve: cap stretto per non disperdere le righe */
margin: 0 auto clamp(2.6rem, 5.5vw, 3.8rem);
text-align: center;
}
.dvd-exc__eyebrow {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--wp--preset--color--accent);
margin: 0 0 clamp(0.7rem, 1.6vw, 1rem);
}
.dvd-exc__claim {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
font-size: clamp(2rem, 6vw, 3rem); /* claim = frase → un filo sotto il titolo-nome secco */
color: var(--wp--preset--color--contrast);
margin: 0; text-wrap: balance;
max-width: 16ch; margin-inline: auto; /* mantiene il claim su 2 righe eleganti */
}
.dvd-exc__sub {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--base);
line-height: 1.45; margin: clamp(0.9rem, 2vw, 1.2rem) auto 0; max-width: 34ch;
}
.dvd-exc__rule { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--wp--preset--color--primary); margin: clamp(1.3rem, 2.6vw, 1.7rem) auto 0; }
.dvd-exc__empty { text-align: center; color: var(--wp--preset--color--muted-2); padding: 3rem 0; }
.dvd-xlist { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.2rem); }
.dvd-x {
grid-column: span 1;
background: var(--wp--preset--color--surface);
border: var(--wp--custom--card--border);
border-radius: var(--r-surface);
overflow: hidden;
box-shadow: var(--wp--custom--card--shadow);
display: flex; flex-direction: column;
transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) { .dvd-x:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--line-2); } }
.dvd-x--feat { grid-column: span 2; } /* i primi 2 a tutta larghezza */
.dvd-x__art { display: block; }
.dvd-x__art img { width: 100%; aspect-ratio: 10 / 3; object-fit: cover; display: block; }
/* placeholder se manca il banner (non lascia un buco) */
.dvd-x__ph {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 10 / 3;
background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--muted-2);
font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium);
text-align: center; padding: 1rem;
}
.dvd-x__body { padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: 0.4rem; }
.dvd-x__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--wp--preset--color--contrast); }
.dvd-x--feat .dvd-x__title { font-size: var(--wp--preset--font-size--large); }
.dvd-x__sub {
font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); line-height: 1.5; margin: 0; max-width: 60ch;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dvd-x__cta {
align-self: flex-start; margin-top: 0.4rem;
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small);
text-decoration: none; color: #fff; background: var(--wp--preset--color--primary);
padding: 0.65rem 1.3rem; border-radius: var(--r-control); transition: background 0.18s;
}
.dvd-x__cta:hover { background: var(--wp--preset--color--accent); }
.dvd-x__cta svg { transition: transform 0.18s; }
.dvd-x__cta:hover svg { transform: translateX(3px); }
/* PROMOZIONI — riusa le card .dvd-x (coerenza estrema con Esclusive), aggiunge solo il
chip SCADENZA (urgenza, opzione A). NB: le promo NON hanno il --feat (tutte pari): la
scadenza + la CTA "Vai alla promo" sono l'accento, non la dimensione. */
.dvd-x__chip {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.03em;
color: var(--wp--preset--color--warning);
background: color-mix(in srgb, var(--wp--preset--color--warning) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--warning) 40%, transparent);
padding: 4px 11px; border-radius: var(--r-pill);
margin: 0 0 0.15rem;
}
.dvd-x__chip svg { flex: none; }
/* griglia PROMO: 2-col con gap più GENEROSO del mockup A (le card non devono stare strette).
Le promo sono tutte pari (no --feat): il respiro lo dà il gap ampio + il body generoso. */
.dvd-xlist--promo { gap: clamp(1.6rem, 3vw, 2.4rem); }
.dvd-xlist--promo .dvd-x__body { padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.3rem, 2.8vw, 1.8rem); gap: 0.55rem; }
.dvd-xlist--promo .dvd-x__title { font-size: var(--wp--preset--font-size--large); } /* titolo promo più grande */
@media (max-width: 800px) {
.dvd-xlist--promo .dvd-x__title { font-size: var(--wp--preset--font-size--medium); }
}
/* la pagina /promozioni/ usa page-promozioni.html (no wp:post-title) → niente titolo doppio.
Cintura: se un altro contesto rendesse il post-title, lo nascondiamo sulla pagina promo. */
.dvd-promo-main > .dvd-page__title,
.dvd-promo-main .wp-block-post-title { display: none; }
/* ===== NOVITÀ — righe "Netflix" con carosello Swiper di cover (opzione A) =====
Ogni riga: titolo categoria + "Vedi tutti", carosello di poster (2:3) con frecce.
Coerente col design system: token, hover lift, sfumatura ai bordi. */
.dvd-nov-main > .dvd-page__title,
.dvd-nov-main .wp-block-post-title { display: none; } /* niente titolo-pagina doppio */
/* PADDING e CAP su DUE elementi, non su uno (come .dvd-archive/.dvd-archive__container
e .dvd-novf). Il primo tentativo era `max-width:1280 + padding + border-box` sullo
stesso elemento: risolve l'overflow su iPad ma su DESKTOP il padding viene SOTTRATTO
dal cap → a 1920px il contenuto scendeva da 1280 a 1050px (−230). Su iPad non si
notava perché lì il padding è piccolo e il viewport limitava comunque.
Senza border-box invece si SOMMAVA (1280+256=1536 → rubber-band orizzontale).
Separandoli: il padding sta sul contenitore esterno, il cap su un elemento SENZA
padding → 1280px pieni ovunque, e nessuno sforamento. */
.dvd-nov { max-width: none; margin: 0 auto; padding: 0 var(--wp--style--root--padding-right, 1.5rem); box-sizing: border-box; width: 100%; }
.dvd-nov > * { max-width: 1280px; margin-inline: auto; width: 100%; box-sizing: border-box; }
.dvd-nov__rows { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.dvd-nov__row { margin: 0; }
.dvd-nov__rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(0.8rem, 1.6vw, 1.1rem); }
.dvd-nov__rowtitle { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.02em; margin: 0; color: var(--wp--preset--color--contrast); }
.dvd-nov__rowlink { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; flex: none; }
.dvd-nov__rowlink:hover { color: var(--wp--preset--color--contrast); }
.dvd-nov__rowlink svg { transition: transform 0.18s; }
.dvd-nov__rowlink:hover svg { transform: translateX(3px); }
/* il carosello */
/* GOTCHA Swiper CRITICO (dal RAG): la CSS ufficiale richiede .swiper{overflow:hidden} per
CONTENERE il wrapper. Avevo messo overflow:visible (per non tagliare l'hover-lift) → il
wrapper con tutte le slide sforava il viewport = pagina super-larga (stesso overflow
orizzontale già visto su iOS). FIX: overflow:hidden come vuole Swiper (contiene il wrapper),
+ padding verticale sul container così l'hover-lift (translateY -4px) e l'ombra respirano
dentro l'area visibile invece di essere tagliati. Compatibile ovunque (no overflow-clip-margin). */
.dvd-nov__swiper { position: relative; overflow: hidden; padding: 10px 0 14px; margin: -10px 0 -14px; }
/* GOTCHA Swiper (dal RAG): la CSS ufficiale mette .swiper-slide{height:100%} → con
slidesPerView:auto e senza altezza sul .swiper, le slide EREDITANO l'altezza del wrapper
dilatato → cover ALTISSIME. FIX: slide con height:auto (altezza dal contenuto, non dal
wrapper) + larghezza fissa; + autoHeight:true nel JS (il wrapper si adatta alle slide).
flex-shrink:0 impedisce che le slide si comprimano. */
.dvd-nov__swiper .swiper-slide {
/* NIENTE width: la setta Swiper inline dal slidesPerView numerico (peek .15 costante).
Una width fissa qui (specie con !important) romperebbe il calcolo del peek. */
height: auto !important;
}
/* FLICKER PRE-INIT (21 ott 2026, segnalato dall'utente su /novita/): la CSS di Swiper mette
`.swiper-slide{width:100%}` e il wrapper e' un flex senza wrap → finche' lo script (in
`defer` dalla dieta asset) non ha calcolato le larghezze, la PRIMA cover si dipinge a
tutta larghezza per una frazione di secondo. Swiper aggiunge `swiper-initialized` al
contenitore all'init: PRIMA di quella classe si danno alle slide le stesse larghezze che
calcola lui — (W − spaceBetween × (n − 1)) / n, con n e i breakpoint di novita.js
(2.15 · 2.35@420 · 3.15@640 · 5.15@1024 · 6.15@1440, spaceBetween 14) — cosi' il primo
paint e quello dopo l'init coincidono. Dopo l'init vince lo stile inline di Swiper. */
.dvd-nov__swiper:not(.swiper-initialized) .swiper-slide {
width: calc((100% - 14px * 1.15) / 2.15);
margin-right: 14px;
}
@media (min-width: 420px) {
.dvd-nov__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 14px * 1.35) / 2.35); }
}
@media (min-width: 640px) {
.dvd-nov__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 14px * 2.15) / 3.15); }
}
@media (min-width: 1024px) {
.dvd-nov__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 14px * 4.15) / 5.15); }
}
@media (min-width: 1440px) {
.dvd-nov__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 14px * 5.15) / 6.15); }
}
.dvd-nov__slidelink { display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease; }
.dvd-nov__slidelink:hover { transform: translateY(-4px); }
.dvd-nov__cover { display: block; width: 100%; height: auto; aspect-ratio: var(--wp--custom--poster--ratio); object-fit: cover; object-position: center; border-radius: var(--wp--custom--poster--radius); background: var(--wp--preset--color--surface-2); box-shadow: 0 6px 20px rgba(0,0,0,0.4); border: 1px solid var(--wp--preset--color--line); }
.dvd-nov__cover--ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.6rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); }
.dvd-nov__slidetitle { display: block; margin: 0.55rem 0 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); line-height: 1.3; color: var(--wp--preset--color--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dvd-nov__slidelink:hover .dvd-nov__slidetitle { color: var(--wp--preset--color--contrast); }
/* prezzo "da {min}" — stesso trattamento del catalogo (.dvd-arc__price). Il "da" ha
la sua regola qui sotto: quella del catalogo e' SCOPED a .dvd-arc__price, non globale. */
.dvd-nov__slideprice { display: block; margin: 0.3rem 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; }
.dvd-nov__slideprice .woocommerce-Price-amount { color: inherit; }
/* GOTCHA: `.dvd-arc__da` NON e' globale, e' scoped a `.dvd-arc__price` — qui usciva
"da9,99 €" attaccato, stesso peso e stessa taglia del numero. Stessa regola del catalogo. */
.dvd-nov__slideprice .dvd-arc__da { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.74em; margin-right: 0.35em; color: var(--wp--preset--color--muted-2); }
/* frecce (Swiper navigation) */
.dvd-nov__nav { position: absolute; top: calc(50% - 1.1rem); transform: translateY(-50%); z-index: 4;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line-2);
background: color-mix(in srgb, var(--wp--preset--color--surface) 90%, transparent);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: var(--wp--preset--color--contrast); cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.45); transition: background 0.15s, opacity 0.15s; }
.dvd-nov__nav:hover { background: var(--wp--preset--color--surface-2); }
.dvd-nov__nav svg { width: 20px; height: 20px; }
/* le frecce sono DENTRO .dvd-nov__swiper (overflow:hidden) → appena dentro il bordo (non
fuori, che verrebbero clippate). Sovrastanno la prima/ultima cover con blur+ombra. */
.dvd-nov__nav--prev { left: 6px; }
.dvd-nov__nav--next { right: 6px; }
.dvd-nov__nav.swiper-button-disabled { opacity: 0; pointer-events: none; } /* nascondi ai bordi */
@media (hover: none) {
.dvd-nov__nav { display: none; } /* mobile/touch: solo swipe */
}
/* "Carica altri" */
.dvd-xmore { text-align: center; padding: clamp(1.6rem, 4vw, 2.6rem) 0 0; }
.dvd-xmore__btn {
font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface-2);
border: 1px solid var(--wp--preset--color--line-2); padding: 0.8rem 2rem; border-radius: var(--r-control);
cursor: pointer; transition: background 0.18s; min-height: 52px;
}
.dvd-xmore__btn:hover { background: var(--wp--preset--color--surface-3); }
.dvd-xmore__btn:disabled { opacity: 0.6; cursor: default; }
.dvd-xmore__count { color: var(--wp--preset--color--muted-2); font-size: var(--wp--preset--font-size--x-small); margin: 0.7rem 0 0; }
/* MOBILE: 1 colonna, i banner 10:3 restano leggibili, testo grande sotto */
@media (max-width: 800px) {
.dvd-xlist { grid-template-columns: 1fr; }
.dvd-x--feat { grid-column: span 1; }
.dvd-x--feat .dvd-x__title { font-size: var(--wp--preset--font-size--medium); }
.dvd-x__cta { align-self: stretch; justify-content: center; min-height: 52px; }
}
/* toolbar inside the container */
/* [21 ott 2026] blocco spostato in shop.css (split per area; righe originali 2267-2412) */
/* ==================================================================================
ARCHIVE ITEMS — redesign "La Scaffalatura" (panel capo-designer + Amazon, lug 2026).
UN markup per item (dvd_archive_item), due viste via classe sul contenitore:
GRIGLIA (default, "muro di copertine") ⇄ LISTA (toggle, "scanner metodico").
Pezzi: poster(2:3) · titolo(Bricolage) · regista·anno·paese · generi(+N) · pill formato
· prezzo "da {min}" · wishlist(cuore). Tutto sui token (regola-madre), zero px una-tantum
dove esiste un token. Niente stock (il sito non ha stock monitoring). ================== */
/* elementi condivisi alle due viste */
.dvd-arc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dvd-arc__img--ph { background: var(--wp--preset--color--surface-2); }
.dvd-arc__title {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.14;
color: var(--wp--preset--color--contrast);
}
.dvd-arc__meta { color: var(--wp--preset--color--muted); }
.dvd-arc__sep { color: var(--wp--preset--color--muted-2); margin: 0 0.45em; }
.dvd-arc__gen { color: var(--wp--preset--color--muted-2); }
.dvd-arc__genmore { color: var(--wp--preset--color--muted-2); }
/* pill formato: outline mono, tabular; 4K = unico accento rosso ammesso */
.dvd-arc__fmt {
display: inline-block;
border: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--muted);
border-radius: var(--r-pill);
font-family: var(--wp--preset--font-family--heading);
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
font-variant-numeric: tabular-nums;
padding: 3px 9px; white-space: nowrap;
}
.dvd-arc__fmt--4k { border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); color: var(--wp--preset--color--accent); }
.dvd-arc__fmts { display: inline-flex; gap: 5px; }
/* prezzo: numero Bricolage tabular; "da" piccolo/muted (opzione B panel Amazon) */
.dvd-arc__price {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; color: var(--wp--preset--color--contrast);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dvd-arc__price .dvd-arc__da {
font-family: var(--wp--preset--font-family--body);
font-weight: 600; color: var(--wp--preset--color--muted-2);
font-size: 0.74em; margin-right: 0.35em;
}
.dvd-arc__price .woocommerce-Price-amount { color: inherit; }
/* FILM IN USCITA (17 ott 2026, mockup approvato, card A): la data al posto del prezzo,
solo quando TUTTE le edizioni della card sono in uscita. NON nel registro del prezzo
(utente: «troppo simile al prezzo»): pastiglia PIENA surface-3 senza bordo — le pill
formato sono contornate, il prezzo e' Bricolage nudo — corpo x-small + calendario.
Stato, non gesto: niente rosso. */
/* STREAMING (19 ott 2026, mockup «Titoli in streaming» B): stessa pastiglia, icona
play, «noleggio 3,99 €» / «in abbonamento». Il numero resta Bricolage tabular. */
/* La pastiglia esce da dvd_price_label(), che stampa il prezzo ANCHE nella wishlist
(.dvd-shelf__price) e nei caroselli (.dvd-nov__slideprice): le regole valgono in tutti
e tre i contenitori — scopate al solo catalogo, in wishlist la pastiglia ereditava il
Bricolage 700 del prezzo (segnalato dall'utente, 19 ott 2026). */
.dvd-arc__price .dvd-arc__stream .woocommerce-Price-amount,
.dvd-shelf__price .dvd-arc__stream .woocommerce-Price-amount,
.dvd-nov__slideprice .dvd-arc__stream .woocommerce-Price-amount { font-family: var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; }
.dvd-arc__price .dvd-arc__stream,
.dvd-arc__price .dvd-arc__soon,
.dvd-shelf__price .dvd-arc__stream,
.dvd-shelf__price .dvd-arc__soon,
.dvd-nov__slideprice .dvd-arc__stream,
.dvd-nov__slideprice .dvd-arc__soon {
display: inline-flex; align-items: center; gap: 5px;
background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--contrast);
border-radius: var(--r-pill); padding: 3px 10px 3px 8px;
font-family: var(--wp--preset--font-family--body); font-weight: 700;
font-size: var(--wp--preset--font-size--x-small); line-height: 1.3; letter-spacing: 0.01em;
}
.dvd-arc__price .dvd-arc__soon .dvd-icon,
.dvd-arc__price .dvd-arc__stream .dvd-icon,
.dvd-shelf__price .dvd-arc__soon .dvd-icon,
.dvd-shelf__price .dvd-arc__stream .dvd-icon,
.dvd-nov__slideprice .dvd-arc__soon .dvd-icon,
.dvd-nov__slideprice .dvd-arc__stream .dvd-icon { flex: none; font-size: 1.1em; }
/* pillola «Streaming» in fondo al cassetto Supporto: a tutta riga, col play (un modo
di vedere il film, non un disco: la separa la posizione, non un colore) */
.dvd-filter__pill--stream { grid-column: 1 / -1; gap: 6px; }
.dvd-filter__pill--stream .dvd-icon { flex: none; font-size: 1em; }
/* PREZZO SCONTATO (set 2026): il pieno barrato PRIMA del prezzo, ovunque si stampi
il prezzo di un disco (markup di dvd_price_html → wc_format_sale_price: +
). Il pieno ha lo stesso registro del "da": corpo, muted-2, 0.74em — e' un
qualificatore del numero, non un secondo numero. Mai accanto al "da" (per regola
nel PHP). Il prezzo corrente resta quello dell'elemento che lo contiene. */
.dvd-arc__price del, .dvd-nov__slideprice del, .dvd-shelf__price del,
.dvd-news-art__mg figcaption em del,
.dvd-pdp__bigprice del, .dvd-pdp__opt-p del, .dvd-pdp__stp del, .dvd-pdp__objp del {
font-family: var(--wp--preset--font-family--body);
font-weight: 500; font-size: 0.74em; color: var(--wp--preset--color--muted-2);
text-decoration: line-through; text-decoration-color: currentColor;
margin-right: 0.35em; white-space: nowrap;
}
.dvd-arc__price ins, .dvd-nov__slideprice ins, .dvd-shelf__price ins,
.dvd-news-art__mg figcaption em ins,
.dvd-pdp__bigprice ins, .dvd-pdp__opt-p ins, .dvd-pdp__stp ins, .dvd-pdp__objp ins {
text-decoration: none; color: inherit; font: inherit;
}
/* wishlist (cuore): outline, si riempie quando salvato (JS toggla .is-saved) */
.dvd-arc__save {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; cursor: pointer; padding: 0;
color: var(--wp--preset--color--muted-2);
transition: color 0.15s ease, transform 0.15s ease;
}
/* Wishlist (panel lug 2026): il cuore è uno STATO, non un accento. stato = BIANCO
(vuoto→pieno), GESTO = rosso (hover). Il rosso resta al pregio (pill 4K) e all'azione;
un cuore-salvato rosso su ogni poster creerebbe un 2° campo rosso che compete col pregio. */
.dvd-arc__save:hover { color: var(--wp--preset--color--accent); } /* gesto = rosso */
.dvd-arc__save.is-saved { color: var(--wp--preset--color--contrast); } /* stato = bianco */
.dvd-arc__save.is-saved .dvd-icon { fill: currentColor; } /* cuore pieno bianco */
/* === GRIGLIA (default) — muro di copertine, 6/4/2 col === */
.dvd-archive__items.is-view-card {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: start;
gap: clamp(1.2rem, 2.4vw, 1.8rem);
/* padding SOLO verticale: il gutter laterale lo dà già .dvd-archive (root-padding, come
.dvd-nov). Un padding-inline QUI si SOMMEREBBE → margini più larghi di Novità e griglia
più stretta (le cover non arrivavano al bordo). Tolto → stessa larghezza di Novità. */
padding: clamp(1.4rem, 3vw, 2rem) 0;
box-sizing: border-box; width: 100%;
min-width: 0;
}
.is-view-card .dvd-arc {
position: relative; /* ancora il cuore-wishlist (ora fuori dal poster) al top-left card */
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
min-width: 0; /* la card non deve imporre la larghezza intrinseca del titolo/meta */
}
.is-view-card .dvd-arc__poster {
position: relative; display: block;
aspect-ratio: var(--wp--custom--poster--ratio); overflow: hidden;
border-radius: var(--wp--custom--poster--radius); /* raggio-STAMPA unificato (era r-surface 14px: un poster è carta, non card UI) */
background: var(--wp--preset--color--surface-2);
border: 1px solid var(--wp--preset--color--line);
box-sizing: border-box;
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* L'immagine NON deve dettare l'altezza: su uno span-block con solo aspect-ratio, un accordion per la navigazione.
Tutti i valori dai token del design system (preset/custom). Vedi memoria footer.
========================================================================= */
.dvd-footer{
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--muted);
border-top: 1px solid var(--wp--preset--color--line);
font-family: var(--wp--preset--font-family--body);
/* Cintura di sicurezza: la CAUSA è curata alla radice (border-box su __inner,
sotto), ma `clip` contiene comunque qualsiasi futuro sforamento interno
(loghi pagamento nowrap, chevron) senza propagarlo al documento → no zoom iOS.
`clip` (non `hidden`) non crea scroll-container: non tocca sticky/snap. */
overflow-x: clip;
}
.dvd-footer a{ color: var(--wp--preset--color--muted); text-decoration: none; transition: color .15s ease; }
.dvd-footer a:hover{ color: var(--wp--preset--color--contrast); }
.dvd-footer__inner{
/* border-box: senza, il padding-inline (fino a 4rem) si SOMMAVA a max-width →
su viewport stretti l'inner sforava di 48px = causa radice dello zoom iOS.
Con border-box il padding è incluso: matematicamente non può traboccare. */
box-sizing: border-box;
width: 100%;
max-width: 1216px; margin: 0 auto;
padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem) 2rem;
}
/* firma editoriale: filo rosso corto in alto-sinistra (ancora brand) */
.dvd-footer__rule{ display:block; width:52px; height:3px; border-radius:2px;
background: var(--wp--preset--color--primary); margin-bottom: 3rem; }
/* ── GRIGLIA (opzione 3): brand · Esplora · Legale · Contatti. Brand-col stretta (la G
basta come marchio), link vicini al brand, Contatti ampia. ── */
.dvd-footer__grid{
display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 2.4fr;
gap: 1.5rem clamp(2rem, 3.5vw, 3.5rem); align-items: start;
}
/* i grid item hanno min-width:auto di default → si rifiutano di scendere sotto il
contenuto intrinseco (loghi pagamento, link lunghi) e sfondano il container.
min-width:0 li lascia restringere entro la traccia. */
.dvd-footer__col{ min-width: 0; }
.dvd-footer__col > ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.dvd-footer__col li a{ font-size: var(--wp--preset--font-size--small); line-height:1.35; display:inline-block; }
/* titolo colonna: una taglia, un peso, calmo → ancora di scansione */
.dvd-footer__colh{
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--x-small); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color: var(--wp--preset--color--muted-2); margin:0 0 1.5rem; display:block;
}
/* Marchio CG Entertainment: solo la G rossa (favicon), grande e iconica. Il nome legale
sta già sotto, nel blocco legale → il marchio non ripete il testo. */
.dvd-footer__markimg{ display:block; width:52px; height:52px; margin:0 0 1.5rem; }
/* ® marchio registrato in alto a destra della G (19 ott 2026), stesso rosso del marchio
(token primary: la G è #db071b, indistinguibile a quella taglia). Il margine sotto passa
al contenitore, così il ® si ancora all'immagine e non allo spazio sotto. */
.dvd-footer__mark{ position:relative; display:inline-block; margin:0 0 1.5rem; }
.dvd-footer__mark .dvd-footer__markimg{ margin:0; }
/* ALLINEATO AL DISEGNO, non all'immagine (misurato sul PNG: la G parte 4px sotto il
bordo alto e finisce 4,5px prima di quello destro, a 52px). top 2px = 4px della G meno
il margine che il font lascia sopra il simbolo; left = bordo destro della G + 3px. */
.dvd-footer__reg{ position:absolute; top:2px; left:calc(100% - 4.5px); margin-left:3px; /* tarato a occhio dall'utente (4px era troppo basso) */
font-family:var(--wp--preset--font-family--body); font-size:var(--wp--preset--font-size--x-small); font-weight:700; line-height:1;
color:var(--wp--preset--color--primary); }
.dvd-footer__legal{ font-size: var(--wp--preset--font-size--small); line-height:1.7; color: var(--wp--preset--color--muted-2);
margin:0; max-width:42ch; }
.dvd-footer__legal b{ color: var(--wp--preset--color--contrast); font-weight:600; }
.dvd-footer__legal a{ color: var(--wp--preset--color--muted-2); }
.dvd-footer__legal a:hover{ color: var(--wp--preset--color--contrast); }
/* contatti + newsletter + social */
.dvd-footer__contactlead{ font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted-2); line-height:1.6; margin:0 0 .5rem; }
.dvd-footer__mail{ font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small);
font-weight:600; color: var(--wp--preset--color--accent); display:inline-block; }
.dvd-footer__mail:hover{ color: var(--wp--preset--color--accent); }
.dvd-footer__news{ margin-top: 2rem; }
.dvd-footer__newsform{ display:flex; gap:.5rem; max-width:380px; }
.dvd-footer__newsform input{ flex:1; min-width:0; background: var(--wp--preset--color--field);
border:1px solid var(--wp--preset--color--line); border-radius: var(--r-control);
color: var(--wp--preset--color--contrast); padding:10px 14px; font:inherit; font-size: var(--wp--preset--font-size--small); }
.dvd-footer__newsform input::placeholder{ color: var(--wp--preset--color--muted-2); }
.dvd-footer__newsform input:focus{ outline:none; border-color: var(--wp--preset--color--line-2);
box-shadow: 0 0 0 3px rgba(229,9,20,.26); }
.dvd-footer__newsform button{ background: var(--wp--preset--color--primary); color:#fff; border:0;
border-radius: var(--r-control); font-family: var(--wp--preset--font-family--heading);
font-weight:600; font-size: var(--wp--preset--font-size--base); padding:10px 18px; cursor:pointer; transition: background .18s; }
.dvd-footer__newsform button:hover{ background: var(--wp--preset--color--accent); }
.dvd-footer__newsform button:disabled{ opacity:.75; cursor:default; }
/* honeypot anti-bot: fuori schermo, non focusabile visivamente */
/* honeypot anti-bot: nascosto SENZA left:-9999px (che su iOS Safari estende l'area di
layout di 9999px → overflow orizzontale massiccio → tutta la pagina zoomata/tagliata).
Lo comprimiamo a 0 e lo togliamo dal flusso, restando nel DOM (i bot lo compilano). */
.dvd-footer__hp{ position:absolute !important; width:0 !important; height:0 !important;
padding:0 !important; border:0 !important; margin:0 !important;
opacity:0 !important; overflow:hidden !important; pointer-events:none !important;
clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; }
/* ---- Newsletter: validazione + alert (pixel-perfect, token design) ---- */
/* freccia → spinner durante il loading (senza cambiare dimensione del bottone) */
.dvd-footer__newsarrow{ display:inline-block; line-height:1; transition: opacity .15s ease; }
.dvd-footer__news.is-loading .dvd-footer__newsarrow{ opacity:0; }
.dvd-footer__news.is-loading .dvd-footer__newsform button{ position:relative; }
.dvd-footer__news.is-loading .dvd-footer__newsform button::after{
content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
animation: dvd-nl-spin .6s linear infinite; }
@keyframes dvd-nl-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.dvd-footer__news.is-loading .dvd-footer__newsform button::after{ animation-duration: 1.4s; } }
/* messaggio di feedback: nascosto finché vuoto, poi appare con colore per stato */
.dvd-footer__newsmsg{ margin:.6rem 0 0; font-size: var(--wp--preset--font-size--x-small); line-height:1.4; min-height:0;
max-height:0; overflow:hidden; opacity:0; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; }
.dvd-footer__news.is-success .dvd-footer__newsmsg,
.dvd-footer__news.is-error .dvd-footer__newsmsg{ max-height:4em; opacity:1; }
.dvd-footer__news.is-success .dvd-footer__newsmsg{ color: var(--wp--preset--color--success); }
.dvd-footer__news.is-error .dvd-footer__newsmsg{ color: var(--wp--preset--color--error); }
/* bordo del campo che segue lo stato (verde ok / rosso errore) */
.dvd-footer__news.is-success .dvd-footer__newsform input{ border-color: var(--wp--preset--color--success); }
.dvd-footer__news.is-error .dvd-footer__newsform input{ border-color: var(--wp--preset--color--error);
box-shadow: 0 0 0 3px rgba(255,90,99,.20); }
/* errore sul CONSENSO: il campo email è giusto, non va arrossato */
.dvd-footer__news.is-consent .dvd-footer__newsform input{ border-color: var(--wp--preset--color--line); box-shadow:none; }
/* ---- Casella del consenso newsletter (25 ott 2026), condivisa footer + /startup/ ----
cgtv_nl_privacy_html(). Spuntata = BIANCA (stato, mai rossa); errore = bordo error. */
/* testo a `small`, non x-small: il consenso si LEGGE (x-small è solo segnaletica) */
.dvd-nlcheck{ position:relative; display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;
margin-top:.6rem; max-width:380px; cursor:pointer;
font-size: var(--wp--preset--font-size--small); line-height:1.5; color: var(--wp--preset--color--muted); }
.dvd-nlcheck input{ position:absolute; top:0; left:0; width:22px; height:22px; margin:0; opacity:0; cursor:pointer; }
.dvd-nlcheck__box{ width:22px; height:22px; box-sizing:border-box; border-radius:5px; margin-top:1px;
border:1.5px solid var(--wp--preset--color--line-2); background: var(--wp--preset--color--field);
display:grid; place-items:center; }
.dvd-nlcheck input:checked + .dvd-nlcheck__box{ background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.dvd-nlcheck input:checked + .dvd-nlcheck__box::after{ content:""; width:10px; height:5px;
border-left:2px solid var(--wp--preset--color--base); border-bottom:2px solid var(--wp--preset--color--base);
transform: rotate(-45deg) translate(1px,-1px); }
.dvd-nlcheck input:focus-visible + .dvd-nlcheck__box{ box-shadow: var(--wp--custom--focus--ring); }
.dvd-nlcheck.is-error .dvd-nlcheck__box{ border-color: var(--wp--preset--color--error); }
.dvd-nlcheck a{ color: var(--wp--preset--color--contrast); text-decoration: underline dotted;
text-decoration-color: var(--wp--preset--color--line-2); text-underline-offset:3px; }
.dvd-footer__social{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.5rem; }
.dvd-footer__social a{ width:44px; height:44px; border-radius: var(--r-control);
background: var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--line);
display:inline-flex; align-items:center; justify-content:center;
color: var(--wp--preset--color--muted); transition: all .18s ease; }
.dvd-footer__social a:hover{ color:#fff; background: var(--wp--preset--color--surface-2);
border-color: var(--wp--preset--color--line-2); transform: translateY(-2px); }
.dvd-footer__social svg{ width:20px; height:20px; fill: currentColor; }
/* accordion: su DESKTOP i sono `open` di default → liste visibili come colonne
normali, chevron nascosto, summary non-cliccabile. Su mobile un filo di JS toglie `open`
(partono chiusi) e il media-query sotto li rende accordion veri. */
.dvd-footer__acc > summary{ list-style:none; cursor:default; display:block; }
.dvd-footer__acc > summary::-webkit-details-marker{ display:none; }
.dvd-footer__acc > summary::marker{ content:""; }
.dvd-footer__chev{ display:none; } /* chevron nascosto su desktop */
/* ── TRAY pagamenti: fila unica, gruppi separati da hairline sottile ── */
.dvd-footer__pay{ margin-top: clamp(3rem, 5vw, 4rem); padding-top: 2rem;
border-top:1px solid var(--wp--preset--color--line); }
.dvd-footer__paycap{ font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-small);
font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color: var(--wp--preset--color--muted-2); margin:0 0 1.5rem; }
.dvd-footer__paywrap{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
color: var(--wp--preset--color--muted-2); }
.dvd-pay{ display:inline-flex; align-items:center; color:inherit; transition: color .18s ease; }
.dvd-footer__paywrap:hover{ color: var(--wp--preset--color--muted); }
.dvd-pay:hover{ color: var(--wp--preset--color--contrast); }
.dvd-pay svg{ height:26px; width:auto; display:block; fill: currentColor; }
/* Satispay è un WORDMARK orizzontale (aspect ~4.3) mentre le carte sono badge (aspect
~1.56): a parità di height sarebbe ~3× più largo e dominerebbe. Lo riduco per pareggiare
il PESO OTTICO (regola lockup: i wordmark si scalano rispetto ai badge). */
.dvd-pay--satispay svg{ height:19px; }
.dvd-pay__img{ width:auto; display:block; opacity:.92; transition: opacity .18s; }
.dvd-pay:hover .dvd-pay__img{ opacity:1; }
.dvd-pay--cultura .dvd-pay__img{ height:34px; }
.dvd-pay--porcreo .dvd-pay__img{ height:52px; }
.dvd-pay__sep{ width:1px; height:44px; align-self:center; background: var(--wp--preset--color--line); margin:0 .5rem; }
/* ── bottom bar ── */
.dvd-footer__bottom{ margin-top: 3rem; padding-top:1.5rem;
border-top:1px solid var(--wp--preset--color--line);
display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center; }
.dvd-footer__copy{ font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); margin:0; }
.dvd-footer__bottomlinks{ display:flex; flex-wrap:wrap; gap:1.5rem; font-size: var(--wp--preset--font-size--x-small); }
/* ═══════════════ MOBILE (≤860px): accordion navigazione, loghi centrati ═══════════════ */
@media (max-width: 860px){
.dvd-footer__grid{ grid-template-columns: 1fr; gap:0; }
.dvd-footer__brandcol{ margin-bottom: 2rem; }
/* i diventano accordion REALI: summary tappabile ≥52px + chevron */
.dvd-footer__acc{ border-top:1px solid var(--wp--preset--color--line); }
.dvd-footer__acc > summary{ cursor:pointer; display:flex; align-items:center;
justify-content:space-between; min-height:52px; }
.dvd-footer__acc > summary .dvd-footer__colh{ margin:0; font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--small); font-weight:600; letter-spacing:.01em; text-transform:none;
color: var(--wp--preset--color--contrast); }
.dvd-footer__acc[open] > summary .dvd-footer__colh{ color: var(--wp--preset--color--primary); }
.dvd-footer__chev{ display:block; width:20px; height:20px;
color: var(--wp--preset--color--muted-2); transition: transform .25s ease; }
.dvd-footer__acc[open] .dvd-footer__chev{ transform: rotate(180deg); }
/* mobile: accordion nativo → lista visibile solo quando [open] (il JS gestisce
apri/chiudi; il details nativo nasconde da sé il contenuto quando chiuso). */
.dvd-footer__acc[open] > ul{ padding:0 0 1.5rem; gap:0; }
.dvd-footer__acc li a{ display:block; padding:12px 0; font-size: var(--wp--preset--font-size--small);
border-top:1px solid rgba(255,255,255,.04); }
.dvd-footer__acc li:first-child a{ border-top:0; }
/* contatti sempre aperto, come blocco con hairline sopra */
.dvd-footer__contact{ border-top:1px solid var(--wp--preset--color--line); padding-top:1.5rem; margin-top:0; }
.dvd-footer__colh{ margin-bottom: 1rem; }
.dvd-footer__newsform{ max-width:none; }
.dvd-footer__newsform input{ padding:14px 16px; min-height:52px; }
.dvd-footer__newsform button{ min-height:52px; width:56px; padding:0; }
.dvd-footer__social{ gap:.5rem; }
.dvd-footer__social a{ flex:1; height:48px; width:auto; }
/* pagamenti: centrati, wrap, POR CREO su riga sua; via i separatori */
.dvd-footer__paycap{ text-align:center; }
.dvd-footer__paywrap{ justify-content:center; gap:1rem 1.5rem; }
.dvd-pay__sep{ display:none; }
.dvd-pay--porcreo{ flex-basis:100%; justify-content:center; margin-top:.5rem;
padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.05); }
.dvd-pay--porcreo .dvd-pay__img{ height:54px; }
.dvd-footer__bottom{ justify-content:center; text-align:center; flex-direction:column; }
}
/* [21 ott 2026] blocco spostato in landing.css (split per area; righe originali 6707-7823) */
/* ============================================================================
BACK-TO-TOP catalogo (panel lug 2026): pill flottante bottom-right, icona+LABEL
(regola over-45: mai icona sola). NON rosso (navigazione, non azione: un BTT
rosso fisso = falso-CTA che compete con pill 4K e prezzi). z 410 = sopra il
contenuto, sotto sticky-scheda(420)/drawer(450). Nascosto a drawer aperto.
============================================================================ */
.dvd-btt {
position: fixed; right: 21px; bottom: 21px; z-index: 410;
display: inline-flex; align-items: center; gap: 8px; /* ORIZZONTALE: icona accanto al testo, come Filtra/chip-Trailer (coerenza pill del sistema) */
min-height: 48px; padding: 0 18px;
background: var(--wp--preset--color--surface-2);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--r-pill);
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--x-small); font-weight: 700;
cursor: pointer; box-shadow: var(--wp--custom--card--shadow, 0 2px 8px rgba(0,0,0,0.6));
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}
.dvd-btt .dvd-icon { width: 18px; height: 18px; }
.dvd-btt.is-show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1024px) { .dvd-btt { right: 34px; bottom: 34px; } }
@media (hover: hover) { .dvd-btt:hover { background: var(--wp--preset--color--surface-3); border-color: var(--wp--preset--color--line-2); } }
body.dvd-panel-open .dvd-btt { opacity: 0; pointer-events: none; } /* via coi drawer aperti */
@media (prefers-reduced-motion: reduce) { .dvd-btt { transition: opacity 0.15s ease; transform: none; } }
/* =============================================================================
NOVITÀ PER FORMATO — /novita/dvd/ · /novita/blu-ray/ · /novita/4k/
RIVISTO (3 set 2026, decisione committente): la griglia usa LA CARD DEL CATALOGO
(.dvd-archive__items.is-view-card + dvd_archive_item), col contesto formato
passato via override di dvd_selected_formats() — quindi prezzo e pill di QUESTO
formato. La slide piccola (.dvd-nov__slide) resta SOLO ai caroselli. Le regole
.dvd-novf__grid qui sotto servono al solo fallback PHP e possono sparire.
========================================================================== */
/* Larghezza e gap IDENTICI al catalogo: le due griglie mostrano lo stesso
oggetto (il poster) e devono avere lo stesso ritmo. `.dvd-exc` cappa a 1200px
mentre il catalogo (.dvd-archive__container) e la pagina Novità stanno a 1280
→ qui si allarga a 1280, altrimenti le stesse cover risultano più strette.
Il gap è il `clamp` del catalogo, non una coppia di valori Fibonacci: uniforme
sui due assi e fluido, così le colonne respirano uguale a ogni viewport. */
/* GOTCHA MISURATO (inspector, lug 2026) — perché la griglia era più stretta.
Nel CATALOGO padding e max-width stanno su DUE elementi diversi:
.dvd-archive -> padding-inline (root-padding)
.dvd-archive__container -> max-width 1280, SENZA padding
Qui invece ereditavamo `.dvd-exc`, che li mette sullo STESSO elemento
(max-width 1200 + padding-inline). Con `border-box` il padding viene SOTTRATTO
dal max-width → la griglia perdeva ~48px oltre ai 80 del cap più basso.
Fix: si separano i ruoli come nel catalogo — il padding resta a `.dvd-exc`,
la griglia si allarga a 1280 REALI perché il cap sta su un elemento SENZA
padding. Misure attese = quelle del catalogo: w=1280, cover 188px. */
.dvd-novf{
max-width: none; /* il cap NON sta qui: starebbe insieme al padding */
padding-inline: var(--wp--style--root--padding-right, 1.5rem); /* = .dvd-archive */
}
.dvd-novf > *{ /* = .dvd-archive__container: cap SENZA padding */
max-width: 1280px;
width: 100%;
box-sizing: border-box;
margin-inline: auto;
}
/* PROMOZIONE — filtro per formato (19 ott 2026, panel variante A «le pillole del
Supporto»). Le pillole sono quelle del cassetto (.dvd-filter__pill: stessa forma,
selezione = stato, mai rossa); qui in RIGA e CENTRATE sotto la testata, che è
centrata. Conteggio sotto, come il «Mostra N film» del cassetto ma come dato. */
.dvd-promof__fmts { display: flex; flex-direction: column; align-items: center; gap: 13px; margin: 0 0 34px; } /* s2 / s4 della scala Fibonacci */
.dvd-promof__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dvd-promof__pills .dvd-filter__pill { padding: 0.3rem 1.1rem; }
.dvd-promof__count { margin: 0; display: flex; align-items: center; gap: 13px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.dvd-promof__reset { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; color: var(--wp--preset--color--contrast); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dvd-promof__reset[hidden] { display: none; }
/* AL CINEMA, pagina della riga (/al-cinema/film//, 19 ott 2026): stessa griglia di
Novità, SENZA prezzo — qui il film è un titolo da proiettare, non un disco da comprare. */
.dvd-cinf .dvd-arc__price { display: none; }
.dvd-cinf .dvd-arc--static { cursor: default; }
.dvd-novf__grid{
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: start;
gap: clamp(1.2rem, 2.4vw, 1.8rem);
margin-top: var(--pdp-s4, 34px);
}
/* la slide nasce dentro Swiper (larghezza gestita dal carosello): in griglia la
cella la governa, quindi si azzerano le misure che Swiper le impone. */
.dvd-novf__grid .dvd-nov__slide{ width: auto; height: auto; margin: 0; }
/* CODA — "invito editoriale" (opzione B del panel, seduta 3).
NIENTE CTA rosso pieno: in questo progetto il rosso è dell'ACQUISTO e la pagina
serve a far comprare i film qui sopra — un pulsante pieno competerebbe con loro.
Bottone GHOST (bordo + testo), il rosso arriva solo al passaggio del mouse. */
.dvd-novf__end{
margin-top: var(--pdp-s5, 55px);
padding-top: var(--pdp-s4, 34px);
border-top: 1px solid var(--wp--preset--color--line);
text-align: center;
}
/* EYEBROW in Zen Kaku (body), non Bricolage: è la stessa coppia occhiello+titolo
della TESTATA di questa pagina (.dvd-exc__eyebrow è body, .dvd-exc__claim è
heading) — due eyebrow con font diversi nella stessa pagina si notano. Coerente
anche con la regola del progetto: Bricolage = ciò che si GUARDA (insegne,
titoli, numeri), Zen Kaku = ciò che si LEGGE, apparato compreso. */
.dvd-novf__end-eb{
font-family: var(--wp--preset--font-family--body), sans-serif;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
margin: 0;
}
.dvd-novf__end-h{
font-family: var(--wp--preset--font-family--heading), sans-serif;
font-size: var(--wp--preset--font-size--x-large);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
margin: var(--pdp-s2, 13px) 0 0;
}
.dvd-novf__end-p{
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
max-width: 44ch;
margin: var(--pdp-s2, 13px) auto 0;
}
.dvd-novf__end-cta{
display: inline-block;
margin-top: var(--pdp-s3, 21px);
font-family: var(--wp--preset--font-family--heading), sans-serif;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
padding: 13px 26px;
border: 1px solid var(--wp--preset--color--line-2);
border-radius: var(--wp--custom--radius--control);
color: var(--wp--preset--color--contrast);
text-decoration: none;
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.dvd-novf__end-cta:hover,
.dvd-novf__end-cta:focus-visible{
border-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
background: var(--wp--preset--color--surface);
}
/* stessi breakpoint del catalogo: 6 → 4 → 2 colonne */
@media (max-width: 1024px){ .dvd-novf__grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .dvd-novf__grid{ grid-template-columns: repeat(2, 1fr); } }
/* ============================================================================
ARCHIVIO: aggiornamento filtri/ordinamento SENZA ricaricare (lug 2026)
La griglia si sostituisce in pagina; questo è il solo feedback visivo — un velo
breve, non uno spinner: l'attesa è di poche centinaia di ms e uno spinner a
schermo pieno sarebbe più invadente del caricamento stesso.
`pointer-events:none` evita click su card che stanno per essere rimpiazzate.
========================================================================== */
.dvd-archive__items.is-updating {
opacity: .45;
pointer-events: none;
transition: opacity .12s ease;
}
@media (prefers-reduced-motion: reduce) {
.dvd-archive__items.is-updating { transition: none; }
}
/* ============================================================================
RICERCA (Meilisearch) — campo nell'header, risultati al posto del contenuto
Il campo si espande accanto alla lente; i risultati prendono il posto del
, che viene solo NASCOSTO (non rimosso): chiudendo si torna esattamente
a quello che si stava guardando.
Tre strade provate prima e scartate, per non rifarle:
- OVERLAY `position:fixed`: non intercettava la rotella, lo scroll finiva alla
pagina sotto (sulla home, ai banner con lo scroll-snap); il "Mostra altri"
restava ancorato in alto; la lista con overflow proprio dava l'aria da iframe.
- TENDINA di suggerimenti: spezzava la ricerca in due momenti.
- PAGINA /?s= dedicata: costringeva a lasciare la pagina in cui si era.
La griglia è quella del CATALOGO (`.dvd-archive__items.is-view-card`): le
regole della card sono tutte agganciate a `.is-view-card`, quindi il
contenitore si RIUSA invece di ricostruirlo. Misurato al primo tentativo,
quando lo ridichiaravo qui: colonne di larghezza diversa fra loro
(287|262|284|316|238|256 invece di sei uguali) e 526px di sforo orizzontale.
========================================================================= */
/* --- campo che si espande SOPRA le voci nav ---
`position:absolute` ancorato al bordo destro: si SOVRAPPONE alle voci invece
di spingerle. MISURATO col nav-inspector quando stava nel flusso dentro
`.dvd-actions`: occupava 320px, la barra azioni finiva a 1568 su un viewport
da 1465 e cuore e carrello erano FUORI SCHERMO (1472 e 1520). In chiusura
tutto rientrava di colpo, da cui lo spostamento delle icone e il blink.
Cosi' invece NIENTE si muove, ne' all'apertura ne' alla chiusura — ed e' anche
il comportamento di Netflix.
La transizione e' su `transform`+`opacity`, non su `width`: animare la
larghezza fa reflow a ogni frame e lascia il campo largo pochi pixel per
quasi tutta la durata, che e' perche' il focus "prendeva solo agli angoli". */
.dvd-srchf {
position: absolute; right: 0; top: 50%;
display: flex; align-items: center; gap: var(--s1, 8px);
width: clamp(220px, 30vw, 380px); height: 44px;
padding: 0 var(--s2, 13px);
box-sizing: border-box;
background: var(--wp--preset--color--field);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--r-control);
z-index: 20;
transform: translateY(-50%) scaleX(.92);
transform-origin: right center;
opacity: 0; pointer-events: none;
transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, border-color .18s ease;
}
.dvd-srchf.is-open { transform: translateY(-50%) scaleX(1); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
.dvd-srchf { transition: opacity .12s ease; transform: translateY(-50%); }
}
/* la lente vive DENTRO il campo, a sinistra (Netflix): quella dell'header si
nasconde mentre il campo e' aperto, o sarebbe un doppione */
.dvd-srchf__ico {
flex: 0 0 auto; display: flex; align-items: center;
color: var(--wp--preset--color--muted);
}
.dvd-srchf__ico svg { width: 18px; height: 18px; display: block; }
body.dvd-srch-open [data-dvd-search] { opacity: 0; pointer-events: none; }
/* L'input e' NUDO: fondo, bordo e raggio li porta il contenitore `.dvd-srchf`.
theme.json stila `elements.textInput` (fondo field + bordo + radius) su OGNI
input nativo del sito, quindi senza questi reset il campo avrebbe un secondo
bordo INTERNO al proprio: e' il "focus piu' dentro" che si vedeva. Gli
`!important` pareggiano la specificita' delle global-styles inline, che
arrivano dopo questo foglio. */
.dvd-srchf__input {
flex: 1; min-width: 0; height: 100%; box-sizing: border-box;
background: none !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; outline: none !important;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--body);
/* 16px+ evita lo zoom automatico di Safari al focus. */
font-size: var(--wp--preset--font-size--small);
padding: 0;
}
/* Il focus si disegna sul CONTENITORE, cioe' sul bordo che si vede davvero.
Ring canonico del progetto: bordo netto + alone accent, senza glow. */
.dvd-srchf:focus-within {
border-color: var(--wp--preset--color--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}
.dvd-srchf__input::-webkit-search-cancel-button { display: none; }
.dvd-srchf__input::placeholder { color: var(--wp--preset--color--muted-2); }
.dvd-srchf__x {
position: relative; flex: 0 0 auto;
width: 32px; height: 32px; background: none; border: 0; cursor: pointer;
color: var(--wp--preset--color--muted);
}
.dvd-srchf__x::before, .dvd-srchf__x::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 14px; height: 2px; background: currentColor; border-radius: 2px;
}
.dvd-srchf__x::before { transform: translate(-50%,-50%) rotate(45deg); }
.dvd-srchf__x::after { transform: translate(-50%,-50%) rotate(-45deg); }
@media (hover: hover) { .dvd-srchf__x:hover { color: var(--wp--preset--color--contrast); } }
/* Sotto i 640px il campo prende tutta la barra: a quella larghezza logo, campo
e icone non convivono. */
/* Sotto i 640px il campo copre l'intera barra. NON si nasconde nulla con
`display:none`: togliere elementi dal flusso li fa saltare al rientro, ed e'
la seconda meta' del blink in chiusura. Il campo ci passa SOPRA (e' absolute)
e le icone sotto si spengono solo visivamente. */
@media (max-width: 860px) {
.dvd-srchf { width: calc(100vw - 2 * var(--wp--style--root--padding-right, 1.5rem)); }
body.dvd-srch-open .dvd-actions > .dvd-action { opacity: 0; pointer-events: none; }
body.dvd-srch-open .dvd-actions > .dvd-action { transition: opacity .15s ease; }
}
/* --- pannello risultati: NON è fixed, è un blocco nel flusso della pagina, così
lo scroll è quello del documento e non c'è nulla da misurare.
La LARGHEZZA non si ridichiara: il pannello porta la classe `.dvd-archive` e
dentro ha `.dvd-archive__container`, quindi eredita gutter e cap 1280 del
catalogo. Il primo tentativo dichiarava max-width e padding sullo STESSO
elemento (`.dvd-srchp__inner`) e la griglia usciva più stretta del sito: cap e
padding insieme si sottraggono con border-box, ed è la ragione per cui il
catalogo li tiene separati (gotcha già pagato su .dvd-nov). --- */
.dvd-srchp {
opacity: 0; transition: opacity .2s ease;
padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--wp--preset--spacing--70);
}
.dvd-srchp.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dvd-srchp { transition: none; } }
/* HOME: due cose da spegnere, e la seconda è quella che bloccava lo scroll.
1) lo SNAP CSS. La regola del progetto vive dentro
`@media (hover:none) and (pointer:coarse)`, quindi una regola fuori da quel
media query NON la batte su touch: va ripetuta dentro. Fuori serve
comunque per il caso desktop.
2) i BANNER. Nascondere il non basta sulla home: l'hero sta FUORI dal
main, in `.wp-site-blocks`, e ogni banner è alto `100lvh` — restavano lì
sotto il pannello, tenendo la pagina alta 8 schermate e facendo scorrere
quelli invece dei risultati. */
html:has(body.dvd-srch-open) { scroll-snap-type: none !important; }
@media (hover: none) and (pointer: coarse) {
html:has(body.dvd-srch-open) { scroll-snap-type: none !important; }
}
/* I banner e la freccia NON si nascondono piu' qui: il JS nasconde tutti i
fratelli del pannello dentro `.wp-site-blocks` (footer compreso), quindi
l'hero ci ricade dentro. Restava solo la freccia, che e' `position:fixed` e
vive fuori da quel contenitore. */
body.dvd-srch-results .dvd-hero__scrollcue { display: none !important; }
/* 3) l'HEADER torna in FLUSSO. Sulla home e' `fixed` per stare sopra i banner
full-height; con la ricerca aperta i banner non ci sono piu' (punto 2), quindi
non c'e' nulla su cui stare sopra — e restando fisso non occupava spazio nel
flusso, cosi' il conteggio dei risultati gli finiva SOTTO e si leggeva
attraverso il logo. Rimettendolo statico il problema sparisce alla radice,
invece di compensarlo con un padding calcolato in JS. */
body.dvd-srch-results .wp-site-blocks > header.wp-block-template-part:has(> .dvd-header),
body.dvd-srch-results .dvd-header-fixed { position: relative; top: 0; }
.dvd-srchp__count {
margin: 0 0 var(--s3, 21px);
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
}
/* «In 4k non c'è: ecco "paris texas" negli altri formati» — uno STATO, in chiaro,
sulla riga del conteggio; il conteggio segue a capo. */
.dvd-srchp__note { display: block; color: var(--wp--preset--color--contrast); margin-bottom: var(--s1, 8px); }
/* Durante l'aggiornamento la griglia resta al suo posto e si attenua: uno
spinner su una risposta da 50ms lampeggerebbe e basta. */
.dvd-srchp .dvd-archive__items.is-updating,
.dvd-srchp [data-dvd-search-news].is-updating { opacity: .55; }
/* --- DUE SCHEDE: Film · News. Compaiono solo se ci sono articoli; con i soli
film il pannello resta com'era. Scheda attiva = sottolineatura (la guida
componenti WordPress: «apply an underline and color change to the active
tab»), ROSSA perche' e' uno STATO — lo stesso filetto che nel drawer filtri
marca il cassetto aperto — non un gesto. Conteggio in tabular, muted. --- */
.dvd-srchp__tabs {
display: flex; gap: var(--s4, 34px);
margin: 0 0 var(--s4, 34px);
border-bottom: 1px solid var(--wp--preset--color--line);
}
.dvd-srchp__tab {
position: relative;
min-height: 48px; padding: 0 0 var(--s2, 13px);
background: none; border: 0; cursor: pointer;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; font-size: var(--wp--preset--font-size--base);
line-height: 1; color: var(--wp--preset--color--muted);
transition: color .15s ease;
}
.dvd-srchp__tab::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--wp--preset--color--primary);
transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.dvd-srchp__tab.is-active { color: var(--wp--preset--color--contrast); }
.dvd-srchp__tab.is-active::after { transform: scaleX(1); }
@media (hover: hover) { .dvd-srchp__tab:hover { color: var(--wp--preset--color--contrast); } }
.dvd-srchp__tab:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; border-radius: 4px; }
.dvd-srchp__tabn {
margin-left: .45em;
font-weight: 600; font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted-2); font-variant-numeric: tabular-nums;
}
.dvd-srchp__tab.is-active .dvd-srchp__tabn { color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) { .dvd-srchp__tab, .dvd-srchp__tab::after { transition: none; } }
/* Le card articolo sono quelle di /news/ (news.css caricato al bisogno). Il
contenitore `.dvd-news` porta il root-padding e un cap a 1200 sui figli: qui
stiamo GIA' dentro `.dvd-archive` (gutter) + `__container` (cap 1280), quindi
si azzerano — cap e padding non si sommano due volte. */
.dvd-srchp .dvd-news { padding: 0; }
.dvd-srchp .dvd-news > * { max-width: none; }
.dvd-srchp .dvd-news__grid { margin-bottom: 0; }
/* --- zero risultati, motore giù: sempre uno STATO → bianco, mai rosso.
La stessa CARD degli stati vuoti del sito (.dvd-shelf__empty della wishlist:
surface, bordo-card, pastiglia 56px con l'icona di stato, titolo, sottotitolo)
— prima era un titolo nudo allineato a sinistra dentro una griglia vuota, un
vuoto che galleggiava. CTA GHOST come la coda di Novità, non piena: il rosso
è dell'acquisto, e "sfoglia il catalogo" non compra niente. --- */
/* GOTCHA "chi contiene chi": la card stava DENTRO le griglie, e la griglia del
catalogo ha un padding verticale proprio (clamp 1.4-2rem) che .dvd-news__grid
non ha → stessa card, due margini. Ora vive in uno slot suo (.dvd-srchp__none),
fuori dalle griglie e identico nei due pannelli. `[hidden]` con !important:
le griglie hanno `display:grid` esplicito, che batterebbe l'attributo. */
.dvd-srchp [hidden] { display: none !important; }
.dvd-srchp__none { padding: clamp(1.4rem, 3vw, 2rem) 0 0; } /* = il respiro della griglia */
.dvd-srch__none {
max-width: 480px; margin: 0 auto;
padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
background: var(--wp--preset--color--surface);
border: var(--wp--custom--card--border);
border-radius: var(--wp--custom--radius--surface);
box-shadow: var(--wp--custom--card--shadow);
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px;
}
.dvd-srch__none-ico {
width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
border-radius: var(--wp--custom--radius--control); margin-bottom: 4px;
background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--muted);
}
.dvd-srch__none-ico svg { width: 26px; height: 26px; display: block; }
.dvd-srch__none-t {
margin: 0;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--heading);
font-weight: 600; font-size: var(--wp--preset--font-size--medium);
letter-spacing: 0; line-height: 1.25;
}
.dvd-srch__none-s {
margin: 0; max-width: 42ch; line-height: 1.55;
color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small);
}
/* "Ci sono N articoli nella scheda News": un gesto di navigazione → accent */
.dvd-srch__none-alt {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small);
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--wp--preset--color--line-2);
}
@media (hover: hover) { .dvd-srch__none-alt:hover { text-decoration-color: currentColor; } }
.dvd-srch__none-a {
display: inline-block; margin-top: 8px;
min-height: 48px; line-height: 46px; padding: 0 26px;
border: 1px solid var(--wp--preset--color--line-2);
border-radius: var(--wp--custom--radius--control);
color: var(--wp--preset--color--contrast); text-decoration: none;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600; font-size: var(--wp--preset--font-size--small);
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.dvd-srch__none-a:hover, .dvd-srch__none-a:focus-visible {
border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent);
background: var(--wp--preset--color--surface-2);
}
/* --- "Carica altri (N)" + "Visti X di N": il componente del catalogo (.dvd-xmore,
style.css sez. catalogo) con in più lo spinner del bottone, stesso pattern
del bottone "Applica" dei filtri (riusa dvd-spin). --- */
.dvd-srchp .dvd-xmore__btn { position: relative; min-width: 240px; }
.dvd-srchp .dvd-xmore__btn.is-loading { color: transparent; cursor: wait; }
.dvd-srchp .dvd-xmore__btn.is-loading::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 1.15rem; height: 1.15rem; margin: -.575rem 0 0 -.575rem;
border: 2px solid var(--wp--preset--color--line-2);
border-top-color: var(--wp--preset--color--contrast);
border-radius: 50%; animation: dvd-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .dvd-srchp .dvd-xmore__btn.is-loading::after { animation: none; } }
/* Spinner sulla LENTE del campo, e solo oltre i 400ms di attesa (vedi search.js:
sotto il secondo un'animazione in loop e' rumore, non informazione). Riusa
@keyframes dvd-spin come il resto del sito. */
.dvd-srchf.is-busy .dvd-srchf__ico svg { opacity: 0; }
.dvd-srchf.is-busy .dvd-srchf__ico {
position: relative; width: 18px; height: 18px;
}
.dvd-srchf.is-busy .dvd-srchf__ico::after {
content: ""; position: absolute; inset: 0;
border: 2px solid var(--wp--preset--color--line-2);
border-top-color: var(--wp--preset--color--contrast);
border-radius: 50%; animation: dvd-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.dvd-srchf.is-busy .dvd-srchf__ico::after { animation: none; }
}