/* ════════════════════════════════════════════════════════════════════════
prodotto-vb.css — RESTYLE PRODOTTO · VARIANTE B · SEZIONE 1: .cfg-card
------------------------------------------------------------------------
Look "variante-b" applicato alle card di selezione del configuratore e
all'intestazione step numerata. SOLO override estetici: nessuna modifica
al markup PHP, ai ganci JS (.sel / aria-pressed restano quelli usati da
js/configuratore.js:261-262), ai data-* o agli id.
Caricato DOPO css/pages.css (vince per ordine sorgente, a parità di
specificità). Isolato e rimovibile: basta togliere il .
TOKEN: la variante-b usa gli STESSI valori dei token reali già definiti
in css/style.css :root (--bg-card #0D0D1A, CMYK --cyan/--magenta/--yellow,
font --f-display/--f-ui/--f-mono, raggi --r-sm/--r-md). Non ridefiniti qui
per evitare duplicazioni: si referenziano direttamente le var() del sito.
ACCENTO: cyan fisso (var(--cyan)). --cat-accent è scoping delle pagine
CATEGORIA (.vb-cat, categoria-stampa.css), non del configuratore prodotto.
COLOR-CODING PRESERVATO: le card --magenta/--yellow/--blue mantengono il
loro stato selezionato colorato (semantica: fronte/retro, finiture). Le
varianti di layout --delivery/--qty mantengono griglia e disposizione.
════════════════════════════════════════════════════════════════════════ */
/* ─── Griglia card ─────────────────────────────────────────────────────────
Da colonne fisse 120px a colonne fluide minmax: le card riempiono la riga
(look variante-b). Esclude le griglie a layout proprio (qty/delivery/grafica). */
.cfg-cards:not(.cfg-cards--qty):not(.cfg-cards--delivery):not(.cfg-cards--grafica) {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.65rem;
}
.cfg-cards--wide:not(.cfg-cards--qty):not(.cfg-cards--delivery):not(.cfg-cards--grafica) {
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
/* ─── Cornice card ─────────────────────────────────────────────────────────
Props universali e sicure (bg/bordo/raggio/transizione). */
.cfg-card {
background: var(--bg-card);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
color: var(--text);
transition: border-color 0.14s, background 0.14s, transform 0.12s, box-shadow 0.14s;
}
/* Props di disposizione: allineamento a sinistra in stile variante-b.
Escluse le varianti row/compact che hanno layout proprio. */
.cfg-card:not(.cfg-card--delivery):not(.cfg-card--qty) {
align-items: stretch;
justify-content: flex-start;
text-align: left;
gap: 0.3rem;
padding: 0.95rem 0.8rem 0.85rem;
min-height: 0;
}
/* hover: sollevamento + bordo chiaro neutro. Escluse le color-variant così
conservano il loro hover colorato (magenta/yellow/blue). */
.cfg-card:hover { transform: translateY(-2px); }
.cfg-card:not(.cfg-card--magenta):not(.cfg-card--yellow):not(.cfg-card--blue):hover {
border-color: rgba(255, 255, 255, 0.28);
background: var(--bg-card);
}
/* selezionato (plain): bordo + glow accento cyan, stile variante-b (inset).
Stilati ENTRAMBI i ganci (.sel e aria-pressed) anche se il JS li tiene
allineati. Escluse le color-variant: mantengono il loro sel colorato. */
.cfg-card.sel:not(.cfg-card--magenta):not(.cfg-card--yellow):not(.cfg-card--blue),
.cfg-card[aria-pressed="true"]:not(.cfg-card--magenta):not(.cfg-card--yellow):not(.cfg-card--blue) {
border-color: var(--cyan);
background: rgba(0, 212, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.5);
}
/* ─── Spunta (check) ───────────────────────────────────────────────────────
Quadratino in alto a destra, visibile solo quando selezionata (eredita
opacity:0 → 1 da pages.css). Cambia solo forma: da cerchio a quadrato. */
.cfg-card__check {
top: 0.6rem; right: 0.6rem;
width: 18px; height: 18px;
border-radius: 4px;
border: 1px solid var(--border-2);
transform: scale(0.7);
}
.cfg-card.sel .cfg-card__check { transform: scale(1); }
/* sel: riempimento accento + spunta scura (plain; color-variant invariate). */
.cfg-card.sel:not(.cfg-card--magenta):not(.cfg-card--yellow):not(.cfg-card--blue) .cfg-card__check {
background: var(--cyan);
border-color: var(--cyan);
color: #07070F;
}
.cfg-card__check svg { width: 12px; height: 12px; }
/* ─── ICONA NUDA + INGRANDITA (verbatim mockup, righe 167-169) ─────────────
Il mockup NON ha box dietro l'icona: ".cfg-card__icon{color:var(--text-2);
margin-bottom:.35rem}" + ".cfg-card.sel .cfg-card__icon{color:cyan}" +
"svg{34px}". pages.css invece le mette un RIQUADRO (1268: 58px, raggio 12px,
background rgba .04, display:flex centrato) e tinte di sfondo in hover/sel
(1284-1305): è il box chiaro che si intravede.
Qui lo ANNULLO del tutto e lascio SOLO color + margin, come il mockup:
· niente width/height/min-width/padding/border/border-radius del box;
· display:block (no flex-centering) → l'svg sta a SINISTRA come nel mockup;
· background:none !important → copre default + hover + sel + color-variant
in un colpo (le regole pages NON sono !important, quindi !important vince
a prescindere dalla specificità).
SCOPE: solo card a colonna. Escludo --delivery e --qty (layout a RIGA con
box-icona proprio, 1353-1359), come già in Sez.1: lì il riquadro è voluto.
DIMENSIONE svg → 48px (non 34): le nostre sprite (viewBox 64, disegno in
porzione ridotta del canvas) a 34px apparivano piccole; 48px le rende grandi
come nel mockup ed è un compromesso ragionevole anche per le legacy (viewBox
24, che riempiono il canvas). Gli accenti CMYK fissi nei path delle sprite
(rect fill cyan/magenta) restano: voluto. */
.cfg-card:not(.cfg-card--delivery):not(.cfg-card--qty) .cfg-card__icon {
display: block;
width: auto;
height: auto;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none !important;
color: var(--text-2);
margin-bottom: 0.5rem;
}
/* SVG a 76px = stessa resa del catalogo icone (.it .ic{width:76px;height:76px}).
L'ingrandimento lo fa il box CSS, NON lo sprite: lo scale(1.25) sui formati è
stato rimosso da icone.svg, quindi tutte le icone hanno lo STESSO stroke 2.4
→ tratto e dimensione uniformi tra i gruppi. I formati mantengono la scala ISO
interna naturale (A6 data > gloss. Dimensioni ALZATE in v7 per leggibilità
(prima erano troppo piccole): nome .9rem, data .82rem, gloss .64rem
(la pill è in SEZIONE 6). La data ("MAR 7 LUG", scritta dal JS nello
stesso span .ptv2-speed-sub) e lo restano nei loro
elementi: NESSUNA modifica al JS. Lo spazio recuperato togliendo l'a capo
della gloss (sotto) è usato per gap più ariosi. */
.ptv2-speed-name {
font-size: 0.9rem !important;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.ptv2-speed-sub {
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important; /* mantiene "gg lav."/.ptv2-gl minuscoli */
margin-top: 0.3rem;
opacity: 0.85;
}
/* "gg lavorativi (non festivi)" su UNA sola riga: il JS la scrive con un
(configuratore.js ~1094: innerHTML '…gg lavorativi (non festivi)…').
Lo neutralizzo via CSS — br{display:none} — e forzo nowrap così le due
parti restano sulla stessa riga. Nessuna modifica al JS. */
.ptv2-gl {
font-size: 0.64rem;
opacity: 0.75;
margin-top: 0.15rem;
white-space: nowrap;
}
.ptv2-gl br { display: none; }
/* ─── B · Pill +0%/+20%/+50% → vedi SEZIONE 6 ────────────────────────────
La pill di Standard NON è più un ::after qui: dalla v5 le tre pill sono
reali, figlie dirette del
, impilate in basso
(testatina verbatim mockup). Stile e posizionamento nella SEZIONE 6. */
/* ─── G · Celle: padding compatto mockup (th .7/.9 sopra, td .65/.9) ──────
pages.css forza .9rem 1rem !important su entrambe → serve !important. */
.ptv2-td-price,
.ptv2-td-qty { padding: 0.65rem 0.9rem !important; }
/* ─── G · Quantità: mono bianca/bold (mockup .pt-qty) ────────────────────*/
.ptv2-td-qty {
font-family: var(--f-mono);
font-weight: 700;
color: #fff !important;
}
/* ─── C · "TIR. NN" sotto la quantità via counter CSS (mockup .pt-tier) ───
Numerazione progressiva delle righe, zero-padded, senza toccare il markup
(il JS scrive solo "NNN pz" nella cella). */
#ptv2-body { counter-reset: tir; }
.ptv2-row { counter-increment: tir; }
.ptv2-td-qty::after {
content: "TIR. " counter(tir, decimal-leading-zero);
display: block;
margin-top: 0.1rem;
font-family: var(--f-mono);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
/* ─── G · Prezzi: mono .84rem bianco (mockup: celle €, non display 1.1rem)
pages.css impone display/900/1.1rem !important → override !important. Il
prezzo della cella SELEZIONATA resta colorato (regole .ptv2-sel, 0,3,0). */
.ptv2-price {
font-family: var(--f-mono) !important;
font-size: 0.84rem !important;
font-weight: 500 !important;
color: #fff !important;
letter-spacing: 0 !important;
}
/* ─── E · Zebra corpo verbatim (mockup 190-191) ──────────────────────────
#ptv2-body alza la specificità (1,2,0) sopra le pages.css
.ptv2-row:nth-child() (0,2,0) — niente !important. Le tinte di colonna
(.ptv2-td-*, !important) restano sopra; lo zebra traspare dalla colonna
Quantità (cella trasparente). */
#ptv2-body .ptv2-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
#ptv2-body .ptv2-row:nth-child(even) { background: rgba(0, 0, 0, 0.18); }
/* hover riga → tinta cyan tenue (mockup 192) */
#ptv2-body .ptv2-row:hover { background: rgba(0, 212, 255, 0.06); }
/* ─── D · Selezione: barra-riga cyan + tinta di riga (mockup 193, 554) ────
Il JS marca la CELLA (td.ptv2-sel), non la riga: :has() porta la tinta
sulla
che contiene la cella selezionata. La regola sta DOPO zebra e
hover (stessa specificità 1,2,0) → vince anche durante l'hover di riga.
La BARRA (mockup: box-shadow inset su
) è applicata alla cella
Quantità: con border-collapse:collapse il box-shadow su
non viene
renderizzato, sul td (bordo sinistro della riga) è robusto e identico.
L'evidenziazione della CELLA selezionata (glow di colonna) resta gestita
dalle .ptv2-td-*.ptv2-sel esistenti — invariata, color-coding preservato. */
#ptv2-body .ptv2-row:has(.ptv2-sel) { background: rgba(0, 212, 255, 0.14); }
#ptv2-body .ptv2-row:has(.ptv2-sel) .ptv2-td-qty {
box-shadow: inset 3px 0 0 var(--cyan);
}
}
/* ════════════════════════════════════════════════════════════════════════
SEZIONE 4 — RIFINITURE TABELLA (≥768px) · identità verbatim col mockup
------------------------------------------------------------------------
Allinea i dettagli residui al mockup (_design-proposta/variante-b/
prodotto-mockup.html, righe 176-195 e 550-556). SOLO CSS, scope desktop/
tablet: sotto i 768px nulla cambia (mobile = Tempo 2, tabella in scroll).
La DATA reale nell'header (delivery-engine, es. "MAR 7 LUG") NON è toccata:
resta nel suo span .ptv2-speed-sub, nessuna modifica al JS/markup.
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* ─── 1 · Via le barre verticali colorate spesse ─────────────────────────
Il mockup separa le colonne SOLO con la tinta di sfondo: nessun bordo
verticale. Le barre cyan/magenta/giallo full-height del reale sono il
border-left:3px di pages.css (3279-3286) + SEZIONE 2 (Standard). Le azzero
— header inclusa — e tolgo anche il filo destro della colonna Quantità
(mockup: zero separatori verticali). L'identità di colonna resta affidata
alla tinta header .06 e alla corsia di sfondo nel corpo, come nel mockup. */
.ptv2-th-std, .ptv2-td-std,
.ptv2-th-fast, .ptv2-td-fast,
.ptv2-th-urg, .ptv2-td-urg { border-left: 0 !important; }
.ptv2-td-qty,
.ptv2-th-qty { border-right: 0 !important; }
/* ─── 2 · Separatori orizzontali netti come il mockup (righe 194-195) ─────
border-bottom 1px var(--border) a livello di CELLA: con border-collapse:
collapse il bordo di cella vince su quello di riga di pages.css (tr,
rgba .05) e rende il filo nitido. Ultima riga senza bordo. */
.ptv2-row td { border-bottom: 1px solid var(--border); }
.ptv2-row:last-child td { border-bottom: 0; }
/* ─── 3 · Header e celle allineati a SINISTRA (mockup: th + tbody td left)
pages.css centra header (.ptv2-th-speed) e prezzi (.ptv2-td-price); il
mockup è interamente left. Nome/data/pill ereditano l'allineamento del th,
così l'intera colonna (testatina + prezzi) è a filo sinistro. */
.ptv2-th-speed { text-align: left !important; }
.ptv2-td-price { text-align: left !important; }
/* ─── 4 · Padding/altezza righe: GIÀ verbatim dalla SEZIONE 3 ─────────────
th .7rem .9rem, td .65rem .9rem (mockup 182 e 194): nessuna ulteriore
modifica — la diversa percezione di spaziatura era data dalle barre
verticali e dalla centratura, ora corretti ai punti 1 e 3. */
}
/* ════════════════════════════════════════════════════════════════════════
SEZIONE 5 — CONDIZIONI DI DIMENSIONAMENTO COLONNE = MOCKUP (≥768px)
------------------------------------------------------------------------
Obiettivo: far AUTO-dimensionare le colonne come nel mockup
(~176|195|195|220px) replicandone le CONDIZIONI, senza imporre width.
DIVERGENZE pages.css individuate (tutte ≥768px; le regole mobile <768
restano intatte — Tempo 2):
· 2205 .price-table border-collapse: collapse → mockup: SEPARATE
· 2970 .pricetable-v2 table-layout: FIXED → mockup: auto
↑ CAUSA PRIMARIA: con 'fixed' le colonne ignorano il contenuto
e si distribuiscono in modo uniforme/da width esplicite.
· 2985 .ptv2-th-qty width: 110px → mockup: nessuna width
· 2990 .ptv2-th-speed min-width: 130px → mockup: nessuna min-width
· 2974 th padding .875rem 1rem → mockup .7/.9 (già fix Sez.3)
· 3279-3286 border-left:3px colorati (occupano larghezza) → già rimossi Sez.4
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* 1 · Modello tabella del mockup: SEPARATE + border-spacing 0, width 100%,
table-layout AUTO (mai fixed) → le larghezze nascono dal contenuto.
(I separatori orizzontali della Sez.4 sono a livello di cella: restano
nitidi anche in separate; la barra-selezione e lo zebra non cambiano.) */
.price-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.pricetable-v2 { table-layout: auto; }
/* 3 · Via le larghezze esplicite → colonne in AUTO, nessuna forzatura.
Annulla width:110px (Quantità) e min-width:130px (colonne velocità). */
.ptv2-th-qty { width: auto; }
.ptv2-th-speed { min-width: 0; }
/* 6 · nowrap su intestazioni e celle (mockup 182, 194): impedisce il
ritorno a capo che falserebbe la larghezza misurata della colonna.
La data (.ptv2-speed-sub) e lo conservano il wrap proprio
(regole esistenti), così la data reale del delivery-engine resta intatta. */
.ptv2-head-row th,
.ptv2-row td { white-space: nowrap; }
}
/* ════════════════════════════════════════════════════════════════════════
SEZIONE 6 — TESTATINA: pill % IN BASSO su riga propria (verbatim mockup)
------------------------------------------------------------------------
Disposizione testatina impilata come il mockup:
1. NOME (.ptv2-speed-name) — in alto, grande
2. DATA reale (.ptv2-speed-sub) — sotto (scritta dal JS, NON toccata)
3. "gg lavorativi…" (.ptv2-gl) — piccola (dentro la data)
4. PILL % (.ptv2-pct) — in basso, su riga propria
PERCHÉ NON CSS-ONLY PURO (order): 'order' riordina solo i figli DIRETTI del
contenitore flex. La pill +20%/+50% era una NIPOTE (dentro .ptv2-speed-name)
e quella +0% un ::after del nome → irraggiungibili da order sul
.
MICRO-MODIFICA MARKUP (stampa-config.php, autorizzata): la è
stata estratta da .ptv2-speed-name e resa FIGLIA DIRETTA del
, dopo la
data (per Standard aggiunta una +0% reale al posto del ::after).
Così, in flusso blocco normale (th = table-cell, figli impilati), la pill
finisce IN BASSO DA SOLA: niente display:flex/order sul
(che
altererebbe il dimensionamento table-cell della Sez.5). Classi e contenuto
preservati; id ptv2-hd-*, data-*, .ptv2-sel e JS invariati.
EFFETTO COLLATERALE POSITIVO: tolta la pill inline, la larghezza colonna ora
è guidata dal solo nome ("Prioritaria") come nel mockup → le colonne
velocità si avvicinano a 195/220 senza l'allargamento da "Veloce +20%".
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* Pill su riga propria sotto la data, stile mockup (riga 188): contorno
currentColor, raggio pill, piccola, sfondo trasparente. Override dello
stile "riempito"/inline di pages.css (3333-3349) e del margin-left (3339). */
.ptv2-pct {
display: inline-block;
margin: 0.35rem 0 0 0 !important; /* gap dalla gloss; annulla margin-left inline */
padding: 0.08rem 0.42rem !important;
font-size: 0.62rem !important;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
border: 1px solid currentColor !important;
border-radius: var(--r-pill);
background: transparent !important;
vertical-align: baseline;
opacity: 0.9;
}
/* colore pill = colore corsia (currentColor governa bordo + testo) */
.ptv2-th-std .ptv2-pct { color: var(--cyan) !important; }
.ptv2-th-fast .ptv2-pct { color: var(--magenta) !important; }
.ptv2-th-urg .ptv2-pct { color: var(--yellow) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
SEZIONE 7 — CARD: nuovo layout (icona grande sx + testo compatto) · GLOBALE
------------------------------------------------------------------------
Layout card validato su formato/lato, ora ESTESO a TUTTE le .cfg-card a
colonna della pagina prodotto (rimosso l'isolamento per-step #step-*) per
uniformare l'intera pagina. Parte dal layout variante-b (icona alto-sx,
testo sotto-sx) + distanze "mockup Corrado":
1) icona più GRANDE e NUDA (60px, vs 76 di Sez.1 / 34 del mockup), a SINISTRA;
2) icona più VICINA al bordo sup-sinistro (padding sup/sx ridotto);
3) righe testo RAVVICINATE + titolo un filo più grande (1rem) per prominenza.
Resto INVARIATO: check quadrato alto-destra, badge, bordo + inset-glow cyan in
.sel; color-coding --magenta/--yellow/--blue/--verifica-paid preservato (qui
si toccano solo dimensioni/distanze, mai i colori di stato).
SCOPE = stesse esclusioni della Sez.1: tutte le card a COLONNA, escluse
--delivery e --qty (layout a RIGA con box-icona proprio). Selettori a pari
specificità della Sez.1 → vincono per ordine sorgente (SEZIONE 7 dopo Sez.1).
Nessuna modifica a markup/JS: solo override estetici sui ganci .cfg-card__*.
CARD "GRAFICA"/"VERIFICA" (card larghe, .cfg-cards--grafica 2 col): label +
sub + prezzo stanno nel wrapper .cfg-card-text → gli do lo stesso ritmo
verticale e tengo il prezzo (.cfg-card__price-sup, +€) distinto poco sotto.
SCALA ISO FORMATI PRESERVATA: box svg FISSO (60px) → le sprite ic-formato-*
disegnano il foglio in proporzione nello stesso viewBox 64 → A6 righe 40, 89-157). SOLO override estetici: pages.css è caricato prima,
quindi queste regole vincono a pari specificità. GANCI INTATTI — #gallery-main
/ #gallery-img / .prod-thumb[data-src/-alt/-target] / .sel / .gallery-placeholder
/ data-product-* / itemprop NON sono toccati.
MICRO-MARKUP aggiunto in stampa-config.php (autorizzato): wrapper .gallery-stage
attorno a #gallery-main + righelli/quote/bleed; in ogni head;
numeri step zero-padded (str_pad). Le quote .dim-x/.dim-y sono rese server-side
dal formato selezionato e sincronizzate live da uno script passivo in coda pagina.
════════════════════════════════════════════════════════════════════════ */
/* ─── 1 · Sfondo quadrettato (griglia 46px) SCOPATO alla pagina prodotto ───
mockup riga 40 (lì su body). Qui solo su .product-page → copre l'intera
pagina prodotto senza toccare body/pages.css globale. */
.product-page {
background-color: var(--bg);
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 46px 46px;
}
/* ─── 2 · Intro: spaziatura + griglia 1fr/1fr (mockup 89, 93) ──────────────*/
.prod-intro { padding: 1.6rem 0 2.4rem; }
.prod-intro-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
}
/* ─── 3 · Breadcrumb mono "press ticket" (mockup 90) ──────────────────────*/
.breadcrumb {
font-family: var(--f-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
gap: 0.5rem;
margin-bottom: 1.6rem;
}
/* ─── 4 · GALLERY CHROME: stage + righelli + quote + bleed + crop-mark ─────
mockup 96-114. .gallery-stage avvolge #gallery-main (markup); righelli e
quote sono assoluti dentro lo stage (che ha il padding per ospitarli). */
.prod-gallery-main {
aspect-ratio: 1 / 1; /* mockup 105 (era 4/3 in pages.css) */
border-color: var(--border-2);
}
.gallery-stage { position: relative; padding: 30px 30px 16px 30px; }
.ruler-x {
position: absolute; top: 8px; left: 30px; right: 30px; height: 16px;
border-bottom: 1px solid var(--border-2);
background-image: repeating-linear-gradient(90deg, var(--border-2) 0 1px, transparent 1px 100%);
background-size: 11px 7px; background-position: bottom; background-repeat: repeat-x;
}
.ruler-y {
position: absolute; left: 8px; top: 30px; bottom: 16px; width: 16px;
border-right: 1px solid var(--border-2);
background-image: repeating-linear-gradient(0deg, var(--border-2) 0 1px, transparent 1px 100%);
background-size: 7px 11px; background-position: right; background-repeat: repeat-y;
}
.dim-x {
position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
font-family: var(--f-mono); font-size: 0.6rem; color: var(--cyan);
letter-spacing: 0.1em; background: var(--bg); padding: 0 0.4rem;
}
.dim-y {
position: absolute; left: -8px; top: 50%;
transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center;
font-family: var(--f-mono); font-size: 0.6rem; color: var(--magenta);
letter-spacing: 0.1em; background: var(--bg); padding: 0 0.4rem; white-space: nowrap;
}
.bleed-tag {
position: absolute; right: 34px; top: 34px;
font-family: var(--f-mono); font-size: 0.54rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-2);
border: 1px dashed var(--border-2); border-radius: 3px; padding: 0.12rem 0.4rem; z-index: 4;
}
/* crop-mark agli angoli dell'anteprima (mockup 107-109) */
.prod-gallery-main::before,
.prod-gallery-main::after {
content: ""; position: absolute; width: 18px; height: 18px; z-index: 3; opacity: 0.6;
}
.prod-gallery-main::before { top: 9px; left: 9px; border-top: 1.5px solid var(--text-2); border-left: 1.5px solid var(--text-2); }
.prod-gallery-main::after { bottom: 9px; right: 9px; border-bottom: 1.5px solid var(--text-2); border-right: 1.5px solid var(--text-2); }
/* ─── 5 · PRODUCT INFO verbatim (mockup 130-142) ──────────────────────────
Da flex-gap (pages.css) a flusso a blocco con i margini del mockup. */
.prod-info { display: block; }
.prod-badge {
gap: 0.4rem;
font-family: var(--f-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
border: 1px solid rgba(0, 212, 255, 0.35);
background: rgba(0, 212, 255, 0.08);
border-radius: var(--r-pill);
padding: 0.3rem 0.7rem;
margin-bottom: 1rem;
}
.prod-badge::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--cyan); display: inline-block; flex-shrink: 0;
}
.prod-title {
font-weight: 800;
font-size: clamp(2.4rem, 5.5vw, 3.8rem);
line-height: 0.92;
letter-spacing: -0.01em;
margin: 0;
}
.prod-title-sub {
font-family: var(--f-ui);
color: var(--text-2);
font-size: 0.96rem;
margin: 0.5rem 0 0;
}
.prod-reviews { margin: 1rem 0 1.2rem; }
.prod-stars { letter-spacing: 0.12em; font-size: 1rem; }
.prod-desc {
font-size: 0.98rem;
line-height: 1.6;
color: var(--text-2);
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0 0 1.4rem;
}
.prod-highlights { gap: 0.6rem; margin: 0; }
.prod-hl-item { font-size: 0.9rem; color: #dcdcec; }
.prod-hl-item svg { width: 18px; height: 18px; }
/* ─── 6 · Etichetta intro configuratore (mockup 147): box → border-left ────*/
.cfg-intro-label {
font-family: var(--f-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
border: 0;
border-left: 3px solid var(--cyan);
border-radius: 0;
background: none;
padding: 0.3rem 0 0.3rem 0.7rem;
margin-bottom: 1.6rem;
display: block;
}
.cfg-intro-label::before { content: none; display: none; }
/* ─── 7 · Step SENZA box-cornice (mockup: .prod-body pulito, .cfg-block solo
margine). pages.css mette bg-card+bordo+padding ad OGNI .cfg-block: lo annullo
per gli step, ECCETTO .prod-upload-block (resta una card). ───────────────*/
.cfg-block:not(.prod-upload-block) {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin-bottom: 1.8rem;
}
/* ─── 8 · Scritte SPEC laterali (mockup 157): mono, spinte a destra ────────*/
.cfg-spec-no {
margin-left: auto;
font-family: var(--f-mono);
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
/* soggetti: la toggle-btn è già a destra (margin-left:auto); la spec resta a
filo titolo per non litigare con due auto-margin. */
#step-soggetti .cfg-spec-no { margin-left: 0; }
/* ─── 9 · Info button (mockup 155-156): cerchio 20px, bordo border-2,
trasparente, hover cyan. pages.css (riga 5978) lo fa 22px con bordo/sfondo
cyan: riallineo al mockup. L'svg "i" interno resta (gancio tooltip). ─────*/
.cfg-info-btn {
width: 20px; height: 20px;
margin-left: 0.1rem;
border-radius: 50%;
border: 1px solid var(--border-2);
background: transparent;
color: var(--text-3);
opacity: 1;
}
.cfg-info-btn:hover,
.cfg-info-btn:focus-visible,
.cfg-info-btn.is-open {
color: var(--cyan);
border-color: var(--cyan);
background: transparent;
}
.cfg-info-btn svg { width: 13px; height: 13px; }
/* ─── 10 · Body grid: config + summary 372px (mockup 145-146) ──────────────*/
.prod-body { padding: 2.4rem 0; }
.prod-body-grid {
grid-template-columns: minmax(0, 1fr) 372px;
gap: clamp(20px, 2.6vw, 40px);
}
/* ─── 11 · Wrapper .cfg SENZA cornice (mockup: nessun box attorno agli step)
.cfg (css/style.css:1938) ha bg-card + bordo + radius + overflow:hidden →
è il riquadro attorno all'INTERO configuratore (gli step in loop). Nel mockup
non esiste un wrapper equivalente: gli step stanno su fondo pulito (solo il
quadrettato di .product-page). Azzero box + overflow (così i badge .sel a
top:-8px della prima riga non vengono clippati). .cfg non ha padding → la
spaziatura resta data da .cfg-block (margin-bottom 1.8rem): nulla da toccare.
Le .cfg-card mantengono il loro bg/bordo proprio (non toccate). ───────────*/
.cfg {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
/* ─── Mobile: spec-no upload a capo (mockup 757-758), e nessun box-cornice da
compensare (gli step sono già senza riquadro). ──────────────────────────*/
@media (max-width: 767px) {
.prod-upload-block .cfg-spec-no { margin-left: 0; flex: 0 0 100%; }
}
/* ─── 12 · ZONA CARICAMENTO FILE — restyle estetico verbatim variante-b ───────
Firma della sezione: dropzone "prepara il file" con crop-mark (tratteggio
diagonale 45° = taglio + squadrette angolari di registro). Solo ASPETTO.
pages.css (2537+) resta la base FUNZIONALE: stati .has-file/.uploading/
.dragover, .upload-input, .upload-body e i nodi runtime .uprev-* /.
.upload-progress-* NON si toccano. Gli override del resting-state sono scoped
a .prod-upload-block (specificità ≥ pages.css) e limitati a :not(.has-file)
così quando un file è caricato resta la veste "file presente" di pages.css. */
/* card contenitore (resta una card) */
.prod-upload-block {
border: 1px solid var(--border-2);
border-radius: var(--r-lg);
background: var(--bg-card);
padding: 1.5rem;
}
/* dropzone: hatch diagonale + bordo dashed */
.prod-upload-block .upload-zone:not(.has-file) {
position: relative;
border: 1.5px dashed var(--border-2);
border-radius: var(--r-md);
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 12px, transparent 12px 24px),
var(--bg-input);
padding: 2.4rem 1.5rem;
text-align: center;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.prod-upload-block .upload-zone:not(.has-file):hover {
border-color: var(--cyan);
background: rgba(0,212,255,.04);
}
/* CROP-MARK: squadrette angolari (registro di taglio) — solo a riposo */
.prod-upload-block .upload-zone:not(.has-file)::before,
.prod-upload-block .upload-zone:not(.has-file)::after {
content: "";
position: absolute;
width: 16px; height: 16px;
opacity: .5;
}
.prod-upload-block .upload-zone:not(.has-file)::before {
top: 10px; left: 10px;
border-top: 1.5px solid var(--text-2);
border-left: 1.5px solid var(--text-2);
}
.prod-upload-block .upload-zone:not(.has-file)::after {
bottom: 10px; right: 10px;
border-bottom: 1.5px solid var(--text-2);
border-right: 1.5px solid var(--text-2);
}
/* annullo il gap di .upload-body (pages.css) per ottenere il ritmo del mockup,
affidato ai margini espliciti di icona/hint qui sotto */
.prod-upload-block .upload-body { gap: 0; }
/* icona: cerchio cyan. Nel markup reale .upload-icon È lo