/* ════════════════════════════════════════════════════════════════════════
CATEGORIA "STAMPA" — VESTE GRAFICA "VARIANTE B"
Tema: foglio di stampa / campionario (crop-mark, control-strip CMYK,
pallini di quadricromia, scheda di lavoro).
⚠️ Caricato SOLO da stampa/index.html. Tutte le regole sono scoped sotto
`.vb-cat` (classe aggiunta al , accanto a data-category="stampa")
per non alterare gli stili globali usati dalle altre categorie.
⚠️ Ganci dinamici invariati: #cat-grid (contenitore), #fp-track, .fp-card,
#cat-sidebar, .cat-sort-row. Le card dentro #cat-grid e #fp-track sono
iniettate da dynamic-products.js.
NB: su questa pagina () il renderer emette le card
prodotto come .swatch (look "campione su foglio" del mockup, con foto reale);
le altre categorie e la ricerca continuano a usare .cat-grid-card globale.
════════════════════════════════════════════════════════════════════════ */
.vb-cat {
--f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
/* griglia di registro tenue come nel mockup */
.vb-cat main {
background-image:
linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
background-size: 46px 46px;
}
/* ════════════ RIGA CMYK SOTTILE SOTTO L'HERO ════════════
Sostituisce la vecchia control-strip a 24 segmenti (.ink-strip, rimossa dal
markup): una riga 1px sfumata cyan→magenta→giallo. La si ottiene ridefinendo
l'::after dell'hero (che in pages.css è una riga cyan 1px): così la riga
vecchia NON crea doppione e non serve markup aggiuntivo. */
.vb-cat .cat-index-hero::after {
height: 1px;
background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
}
/* eventuale .ink-strip residua resta nascosta (markup rimosso da stampa/index.html) */
.vb-cat .ink-strip { display: none; }
/* ════════════ HERO CATEGORIA (immagine + scrim + spec sheet) ════════════ */
/* GAP barra CMYK ↔ hero: i padding-top globali (css/style.css, !important) sono
tarati su header + respiro estetico (120/128/235), ma la categoria vuole la
foto hero FLUSH sotto la barra CMYK. Riallineo l'offset all'altezza REALE
dell'header (misurata in headless Chrome 2026-06-25) SOLO per questa pagina,
a tutti i breakpoint:
- mobile (<768): header 105px (globale era 120 → 15px striscia nera)
- tablet (768–1023): header 111px (globale era 128 → 17px striscia nera)
- desktop (≥1024): header 217px (override era 213 → 4px di overlap)
!important per vincere sul body{padding-top:…!important} globale; scoped
body.vb-cat → tocca SOLO le pagine categoria. */
body.vb-cat { padding-top: 105px !important; }
@media (min-width: 768px) and (max-width: 1023px) {
body.vb-cat { padding-top: 111px !important; }
}
@media (min-width: 1024px) {
body.vb-cat { padding-top: 217px !important; }
}
.vb-cat .cat-index-hero {
/* L'header fisso è già scavalcato dal padding-top di : qui serve solo
un respiro interno, non clearare l'header. Fascia più bassa e contenuta. */
min-height: 300px;
padding: 2.4rem 0 2.6rem;
display: flex;
align-items: flex-end;
}
/* scrim orizzontale per leggibilità del titolo sopra l'immagine reale */
.vb-cat .cat-index-hero.cat-hero-bg-stampa {
background-image:
linear-gradient(180deg, rgba(7,7,15,.30), rgba(7,7,15,.92)),
linear-gradient(90deg, rgba(7,7,15,.90), rgba(7,7,15,.30) 60%, rgba(7,7,15,.05)),
url('../images/categories/stampa.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* layout a due colonne: testo + riquadro spec a destra */
.vb-cat .cat-index-hero-content {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: end;
}
.vb-cat .cat-hero-text { min-width: 0; }
.vb-cat .cat-breadcrumb {
font-family: var(--f-mono);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-3);
}
.vb-cat .cat-breadcrumb-current { color: var(--text-2); font-weight: 500; }
/* tag pill "Categoria · Stampa" */
.vb-cat .vb-hero-tag {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--f-mono);
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
background: color-mix(in srgb, var(--cat-accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--cat-accent) 40%, transparent);
border-radius: var(--r-pill, 999px);
padding: .3rem .7rem;
margin-bottom: 1rem;
}
/* eyebrow: da pill a riga tecnica con dot luminoso */
.vb-cat .cat-index-eyebrow {
background: none;
border: 0;
border-radius: 0;
padding: 0;
font-family: var(--f-mono);
letter-spacing: .22em;
margin-bottom: .7rem;
}
.vb-cat .cat-index-eyebrow-dot { box-shadow: 0 0 14px var(--cat-accent); }
.vb-cat .cat-index-h1 {
font-size: clamp(3rem, 8vw, 6rem);
line-height: .92;
text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.vb-cat .cat-index-h1 em {
font-style: italic;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1.4px var(--cat-accent);
}
.vb-cat .cat-index-desc { color: #d6d6e6; max-width: 56ch; font-size: 1.02rem; }
/* spec sheet a destra del titolo */
.vb-cat .cat-spec {
font-family: var(--f-mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-2);
border: 1px solid var(--border-2);
border-radius: var(--r-md, 12px);
padding: 1rem 1.1rem;
background: rgba(7,7,15,.74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 18px 50px rgba(0,0,0,.5);
min-width: 208px;
}
.vb-cat .cat-spec .row {
display: flex; justify-content: space-between; gap: 1.4rem;
padding: .32rem 0; border-bottom: 1px dashed var(--border-2);
}
.vb-cat .cat-spec .row:last-child { border-bottom: 0; }
.vb-cat .cat-spec .k { color: var(--text-3); }
.vb-cat .cat-spec .v { color: #fff; }
.vb-cat .cat-spec .v.c { color: var(--cat-accent); }
/* ════════════ SIDEBAR — "SCHEDA DI LAVORO / JOB TICKET" ════════════ */
.vb-cat #cat-sidebar-filters {
border: 1px solid var(--border-2);
border-radius: var(--r-md, 12px);
overflow: hidden;
background:
repeating-linear-gradient(180deg, transparent 0 33px, rgba(255,255,255,.022) 33px 34px),
var(--bg-card);
}
@media (min-width: 961px) {
.vb-cat #cat-sidebar-filters { position: sticky; top: 18px; }
}
/* intestazione scheda */
.vb-cat .cat-jobticket-hd {
display: flex; justify-content: space-between; align-items: center;
padding: .7rem .9rem; border-bottom: 1px solid var(--border-2);
background: #0a0a16;
}
.vb-cat .cat-jobticket-hd .t {
font-family: var(--f-mono); font-size: .64rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--text-2);
}
.vb-cat .cat-jobticket-hd .n { font-family: var(--f-mono); font-size: .64rem; color: var(--cat-accent); }
.vb-cat .cat-filter-block {
padding: 1.05rem .95rem;
border-bottom: 1px dashed var(--border-2);
border-radius: 0;
background: none;
}
.vb-cat .cat-filter-block:last-child { border-bottom: 0; }
.vb-cat .cat-filter-title {
font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--text-2);
display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem;
}
.vb-cat .cat-filter-title::before {
content: ""; width: 7px; height: 7px; background: var(--magenta);
border-radius: 1px; transform: rotate(45deg); flex-shrink: 0;
}
.vb-cat .cat-price-labels {
font-family: var(--f-mono); font-size: .72rem; color: var(--text-2);
}
.vb-cat .cat-price-value, .vb-cat .cat-price-labels span span { color: #fff; }
/* range con riempimento CMYK */
.vb-cat .cat-range-slider {
-webkit-appearance: none; appearance: none;
width: 100%; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--cyan), var(--magenta));
outline: none; margin: .4rem 0 1rem;
}
.vb-cat .cat-range-slider::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 3px solid var(--cat-accent); cursor: pointer;
box-shadow: 0 0 12px color-mix(in srgb, var(--cat-accent) 50%, transparent);
}
.vb-cat .cat-range-slider::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%; background: #fff;
border: 3px solid var(--cat-accent); cursor: pointer;
}
.vb-cat .cat-filter-checks label {
font-size: .84rem; color: var(--text-2); gap: .55rem;
}
.vb-cat .cat-filter-checks input { accent-color: var(--cat-accent); }
/* nav categorie */
.vb-cat .cat-nav-link {
font-family: var(--f-ui); font-size: .86rem; color: var(--text-2);
border-radius: var(--r-sm, 6px); padding: .5rem .55rem;
}
.vb-cat .cat-nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.vb-cat .cat-nav-link--active { color: var(--cat-accent); background: color-mix(in srgb, var(--cat-accent) 8%, transparent); }
.vb-cat .cat-nav-link--active::after { content: none; }
.vb-cat .cat-nav-link-count {
font-family: var(--f-mono); font-size: .66rem; color: var(--text-3);
border: 1px solid var(--border-2); border-radius: var(--r-pill, 999px);
padding: .05rem .42rem;
}
.vb-cat .cat-nav-link--active .cat-nav-link-count {
color: var(--cat-accent); border-color: color-mix(in srgb, var(--cat-accent) 40%, transparent);
}
/* contatto rapido */
.vb-cat .cat-contact-block { background: #0a0a16; }
.vb-cat .cat-contact-icon {
background: rgba(255,45,120,.12); border: 1px solid rgba(255,45,120,.35);
color: var(--magenta); border-radius: var(--r-sm, 6px);
}
.vb-cat .cat-contact-submit {
background: var(--magenta); border: 0; border-radius: var(--r-sm, 6px);
font-family: var(--f-ui); font-weight: 700;
}
.vb-cat .cat-contact-submit:hover { background: #ff4d8e; }
.vb-cat .cat-contact-privacy {
display: flex; align-items: flex-start; gap: .4rem;
font-family: var(--f-ui); font-size: .68rem; color: var(--text-3);
line-height: 1.4; cursor: pointer;
}
.vb-cat .cat-contact-privacy input { width: 13px; height: 13px; accent-color: var(--magenta); flex-shrink: 0; margin-top: 1px; }
.vb-cat .cat-contact-privacy a { color: var(--text-2); text-decoration: underline; }
.vb-cat .cat-contact-msg { display: none; font-family: var(--f-ui); font-size: .7rem; line-height: 1.4; }
.vb-cat .cat-contact-msg.is-ok { display: block; color: #34d399; }
.vb-cat .cat-contact-msg.is-err { display: block; color: #ff6b6b; }
/* ════════════ TOOLBAR ORDINAMENTO ════════════ */
.vb-cat .cat-sort-row {
border: 1px solid var(--border-2); border-radius: var(--r-md, 12px);
background: var(--bg-card);
/* il base .cat-sort-row ha padding orizzontale 0 → "2 prodotti…" toccava il bordo */
padding: .7rem .95rem;
margin-bottom: 1.4rem;
}
.vb-cat .cat-count {
font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--text-2);
}
.vb-cat .cat-count strong { color: #fff; font-size: 1rem; }
.vb-cat .cat-sort-select {
font-family: var(--f-ui); font-size: .82rem; color: #fff;
background: var(--bg-input, #0A0A17);
border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px);
padding: .45rem 2rem .45rem .7rem; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right .55rem center; background-size: 13px;
}
/* ════════════ GRIGLIA — CARD "CAMPIONE SU FOGLIO" (.swatch, variante B) ════════════
Markup .swatch generato da js/dynamic-products.js (renderCatGridCard) quando
. Regole .swatch portate dal mockup categoria-mockup.html.
ADATTAMENTI: l'area immagine ospita la FOTO REALE del prodotto (![]()
); sigla
formato (.swatch__dim) e pill formato (.swatch__fmt) NON sono generate né
stilizzate, perché il DB non ha un campo formato. */
.vb-cat .cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.vb-cat .swatch {
position: relative; display: flex; flex-direction: column;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-md, 12px); overflow: hidden;
text-decoration: none; color: inherit;
transition: transform .18s, border-color .18s, box-shadow .18s;
}
.vb-cat .swatch:hover {
transform: translateY(-3px); border-color: var(--border-2);
box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
/* crop-mark agli angoli */
.vb-cat .swatch::before,
.vb-cat .swatch::after {
content: ""; position: absolute; width: 13px; height: 13px;
pointer-events: none; z-index: 3; opacity: .55;
}
.vb-cat .swatch::before {
top: 7px; left: 7px;
border-top: 1.5px solid var(--text-2); border-left: 1.5px solid var(--text-2);
}
.vb-cat .swatch::after {
bottom: 7px; right: 7px;
border-bottom: 1.5px solid var(--text-2); border-right: 1.5px solid var(--text-2);
}
.vb-cat .swatch__img {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(--border);
}
/* pallino di quadricromia (decorativo, ciclo C/M/Y/K per posizione card) */
.vb-cat .swatch__dot {
position: absolute; left: 10px; top: 9px; z-index: 2;
width: 13px; height: 13px; border-radius: 50%;
border: 2px solid rgba(7,7,15,.65); background: var(--cat-accent);
}
.vb-cat .cat-grid .swatch:nth-child(4n+2) .swatch__dot { background: var(--magenta); }
.vb-cat .cat-grid .swatch:nth-child(4n+3) .swatch__dot { background: var(--yellow); }
.vb-cat .cat-grid .swatch:nth-child(4n+4) .swatch__dot { background: #fff; opacity: .85; }
/* badge (basso-dx): promo gialla / testuale cyan */
.vb-cat .swatch__badge {
position: absolute; right: 10px; bottom: 9px; z-index: 2;
font-family: var(--f-mono); font-size: .58rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: .2rem .45rem; border-radius: 3px;
}
.vb-cat .swatch__badge.badge--promo { background: var(--yellow); color: #07070F; }
.vb-cat .swatch__badge.badge--new {
background: color-mix(in srgb, var(--cat-accent) 16%, transparent); color: var(--cat-accent); border: 1px solid color-mix(in srgb, var(--cat-accent) 40%, transparent);
}
.vb-cat .swatch__body {
display: flex; flex-direction: column; flex: 1; gap: .4rem;
padding: .85rem .9rem 1rem;
}
.vb-cat .swatch__name {
font-family: var(--f-display); font-weight: 700; font-size: 1.32rem;
line-height: 1; text-transform: uppercase; letter-spacing: .01em;
}
.vb-cat .swatch__desc {
font-size: .78rem; color: var(--text-2); line-height: 1.5; flex: 1; margin: 0;
}
.vb-cat .swatch__foot {
display: flex; justify-content: space-between; align-items: flex-end;
margin-top: .4rem; padding-top: .7rem; border-top: 1px dashed var(--border-2);
}
.vb-cat .swatch__price {
font-family: var(--f-mono); font-size: .64rem; color: var(--text-3);
text-transform: uppercase; letter-spacing: .08em;
}
.vb-cat .swatch__price b {
display: block; font-family: var(--f-ui); font-size: 1.18rem;
color: #fff; letter-spacing: 0; margin-top: .12rem;
}
/* CTA: testo cyan + freccia svg (niente pill piena) */
.vb-cat .swatch__cta {
font-family: var(--f-ui); font-weight: 700; font-size: .78rem;
color: var(--cat-accent); display: inline-flex; align-items: center; gap: .3rem;
flex-shrink: 0;
}
.vb-cat .swatch__cta svg { width: 14px; height: 14px; transition: transform .15s; }
.vb-cat .swatch:hover .swatch__cta svg { transform: translateX(3px); }
/* ════════════ PERCHÉ SCEGLIERCI ════════════ */
.vb-cat .cat-why-section {
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(13,13,26,.5), transparent);
}
.vb-cat .cat-why-heading {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: .6rem;
}
.vb-cat .cat-why-heading em { color: var(--cat-accent); }
.vb-cat .why-logo { height: 40px; width: auto; display: inline-block; }
.vb-cat .cat-why-item { background: var(--bg-card); position: relative; }
.vb-cat .cat-why-item::before {
content: attr(data-n); position: absolute; top: 1.1rem; right: 1.2rem;
font-family: var(--f-mono); font-size: .66rem; color: var(--text-3);
letter-spacing: .1em;
}
.vb-cat .cat-why-item:nth-child(1) .cat-why-icon {
color: var(--cat-accent); background: color-mix(in srgb, var(--cat-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cat-accent) 32%, transparent);
}
.vb-cat .cat-why-item:nth-child(2) .cat-why-icon {
color: var(--magenta); background: rgba(255,45,120,.1); border: 1px solid rgba(255,45,120,.32);
}
.vb-cat .cat-why-item:nth-child(3) .cat-why-icon {
color: var(--yellow); background: rgba(255,214,0,.1); border: 1px solid rgba(255,214,0,.32);
}
.vb-cat .cat-why-title { font-family: var(--f-ui); font-weight: 700; }
/* ════════════ PRODOTTI IN EVIDENZA (carosello) ════════════ */
.vb-cat .fp-section { padding: 3rem 0 3.4rem; }
.vb-cat .eyebrow {
font-family: var(--f-mono); letter-spacing: .22em; color: var(--magenta);
}
.vb-cat .fp-title { font-family: var(--f-display); text-transform: uppercase; }
.vb-cat .fp-arrow {
border: 1px solid var(--border-2); background: var(--bg-card); color: var(--text-2);
}
.vb-cat .fp-arrow:hover { color: #fff; border-color: var(--cat-accent); }
.vb-cat .fp-card { border: 1px solid var(--border); background: var(--bg-card); }
.vb-cat .fp-card:hover { transform: translateY(-3px); border-color: var(--border-2); }
.vb-cat .fp-visual { border-bottom: 1px solid var(--border); }
.vb-cat .fp-visual--c { background: color-mix(in srgb, var(--cat-accent) 7%, transparent); color: var(--cat-accent); }
.vb-cat .fp-visual--m { background: rgba(255,45,120,.07); color: var(--magenta); }
.vb-cat .fp-visual--y { background: rgba(255,214,0,.07); color: var(--yellow); }
.vb-cat .fp-visual--k { background: rgba(255,255,255,.05); color: #cfcfe6; }
.vb-cat .fp-name { font-family: var(--f-display); text-transform: uppercase; }
.vb-cat .fp-bottom { border-top: 1px dashed var(--border-2); }
.vb-cat .fp-cta { font-family: var(--f-mono); font-size: .66rem; color: var(--cat-accent); letter-spacing: .08em; text-transform: uppercase; }
/* ════════════ TESTO SEO — "nota di reparto" (colophon) ════════════ */
.vb-cat .cat-seo {
padding: 3.2rem 0 3.8rem;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, rgba(13,13,26,.35), transparent);
}
/* 2 colonne: testo SEO a sinistra + box FAQ a destra (riempie il vuoto).
Sotto ≤767 collassa a 1 colonna (FAQ sotto il testo). */
.vb-cat .cat-seo-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 2.8rem;
align-items: start;
}
.vb-cat .cat-seo-inner {
position: relative;
padding-left: 1.6rem;
}
.vb-cat .cat-seo-inner::before {
content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem;
width: 2px; border-radius: 2px;
background: linear-gradient(180deg, var(--cat-accent), transparent);
}
.vb-cat .cat-seo-eyebrow {
display: flex; align-items: center; gap: .55rem;
font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--text-3);
margin: 0 0 .9rem;
}
.vb-cat .cat-seo-eyebrow::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--cat-accent); flex: 0 0 auto;
}
.vb-cat .cat-seo-title {
font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
font-size: clamp(1.55rem, 3.6vw, 2.25rem); line-height: 1.08;
letter-spacing: .01em; color: #fff; margin: 0 0 1.1rem;
}
.vb-cat .cat-seo-body p {
font-family: var(--f-ui); font-size: .95rem; line-height: 1.72;
color: var(--text-2); margin: 0 0 1rem; max-width: 70ch;
}
.vb-cat .cat-seo-body p:last-child { margin: 0; }
.vb-cat .cat-seo-body a {
font-family: var(--f-mono); font-size: .9em; letter-spacing: .02em;
color: var(--cat-accent); text-decoration: none; white-space: nowrap;
border-bottom: 1px solid color-mix(in srgb, var(--cat-accent) 38%, transparent);
transition: border-color .15s;
}
.vb-cat .cat-seo-body a:hover { border-bottom-color: var(--cat-accent); }
/* ─── FAQ: accordion nativi (zero JS), accento = colore categoria ─── */
.vb-cat .cat-seo-faq { align-self: start; }
.vb-cat .cat-seo-faq-label {
display: block; font-family: var(--f-mono);
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-2); border-left: 3px solid var(--cat-accent);
padding: .3rem 0 .3rem .7rem; margin: 0 0 1.1rem;
}
.vb-cat .cat-seo-faq-item {
background: var(--bg-card); border: 1px solid var(--border-2);
border-radius: var(--r-sm, 6px); margin-bottom: .6rem;
transition: border-color .18s;
}
.vb-cat .cat-seo-faq-item:last-child { margin-bottom: 0; }
.vb-cat .cat-seo-faq-item:hover,
.vb-cat .cat-seo-faq-item[open] { border-color: var(--cat-accent); }
.vb-cat .cat-seo-faq-item summary {
display: flex; align-items: center; gap: .7rem; list-style: none;
cursor: pointer; padding: .85rem .95rem;
font-family: var(--f-ui); font-size: .86rem; font-weight: 600;
line-height: 1.35; color: #fff; transition: color .18s;
}
.vb-cat .cat-seo-faq-item summary::-webkit-details-marker { display: none; }
.vb-cat .cat-seo-faq-item summary:hover,
.vb-cat .cat-seo-faq-item[open] summary { color: var(--cat-accent); }
.vb-cat .cat-seo-faq-item summary:focus-visible {
outline: 2px solid var(--cat-accent); outline-offset: -2px; border-radius: var(--r-sm, 6px);
}
/* Marker +/× : il "+" ruota di 45° in stato [open] */
.vb-cat .cat-seo-faq-item summary::after {
content: '+'; margin-left: auto; flex-shrink: 0;
font-family: var(--f-mono); font-size: 1.15rem; font-weight: 400; line-height: 1;
color: var(--cat-accent); transition: transform .22s ease;
}
.vb-cat .cat-seo-faq-item[open] summary::after { transform: rotate(45deg); }
.vb-cat .cat-seo-faq-answer {
margin: 0 .95rem; padding: .8rem 0 .9rem;
border-top: 1px solid var(--border);
font-family: var(--f-ui); font-size: .82rem; line-height: 1.6; color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
.vb-cat .cat-seo-faq-item summary::after { transition: none; }
}
/* ════════════ FOOTER — solo ritocchi tipografici variante B ════════════ */
.vb-cat .footer-slogan strong { font-family: var(--f-display); }
.vb-cat .footer-col-title,
.vb-cat .footer-mepa strong,
.vb-cat .footer-pay-label { font-family: var(--f-mono); }
/* ════════════ SIDEBAR — desktop vs accordion (mobile/iPad) ════════════ */
/* Desktop: scheda di lavoro sempre visibile, toggle nascosto. */
.vb-cat .cat-sidebar { position: relative; top: auto; }
.vb-cat .cat-sidebar-toggle { display: none; }
/* Neutralizza la regola del template base `.cat-sidebar.is-open ~ *{display:flex}`:
il fratello qui è .cat-grid-wrap e deve restare in flusso normale (block). */
.vb-cat .cat-sidebar.is-open ~ * { display: block; }
/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 980px) {
.vb-cat .cat-index-hero-content { grid-template-columns: 1fr; }
.vb-cat .cat-spec { justify-self: start; margin-top: 1.1rem; }
}
/* TABLET + MOBILE (≤1023) — la "Scheda di Lavoro" diventa un accordion chiuso. */
@media (max-width: 1023px) {
.vb-cat .cat-sidebar { position: static; gap: 0; }
.vb-cat .cat-sidebar-toggle {
display: flex; align-items: center; gap: .7rem; width: 100%;
padding: .85rem 1rem; background: var(--bg-card); color: #fff;
border: 1px solid var(--border-2); border-radius: var(--r-md, 12px);
cursor: pointer; text-align: left; text-transform: none; letter-spacing: normal;
font-family: var(--f-ui);
}
.vb-cat .cat-sidebar-toggle:hover { border-color: var(--cat-accent); }
.vb-cat .cst-ico {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--cat-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cat-accent) 30%, transparent); color: var(--cat-accent);
}
.vb-cat .cst-ico svg { width: 18px; height: 18px; }
.vb-cat .cst-txt {
display: flex; flex-direction: column;
font-family: var(--f-ui); font-weight: 700; font-size: .92rem; line-height: 1.2;
}
.vb-cat .cst-txt small {
font-family: var(--f-mono); font-weight: 500; font-size: .56rem;
letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-top: .22rem;
}
.vb-cat .cst-chev {
width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto;
color: var(--text-2); transition: transform .22s;
}
.vb-cat .cat-sidebar.is-open .cst-chev { transform: rotate(180deg); }
/* la scheda è chiusa di default e si apre col toggle */
.vb-cat #cat-sidebar-filters { display: none; margin-top: .8rem; }
.vb-cat .cat-sidebar.is-open #cat-sidebar-filters { display: block; }
/* griglia a 2 colonne su tablet/iPad */
.vb-cat .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
/* SOLO TABLET/iPad (768–1023) — scheda aperta su due colonne affiancate. */
@media (min-width: 768px) and (max-width: 1023px) {
.vb-cat .cat-sidebar.is-open #cat-sidebar-filters { display: grid; grid-template-columns: 1fr 1fr; }
.vb-cat .cat-sidebar.is-open .cat-jobticket-hd { grid-column: 1 / -1; }
.vb-cat .cat-sidebar.is-open .cat-filter-block:nth-child(2) { grid-column: 1; grid-row: 2; } /* Fascia di Prezzo */
.vb-cat .cat-sidebar.is-open .cat-filter-block:nth-child(3) {
grid-column: 2; grid-row: 2 / 4; border-left: 1px dashed var(--border-2); /* Categorie (colonna destra) */
}
.vb-cat .cat-sidebar.is-open .cat-filter-block:nth-child(4) { grid-column: 1; grid-row: 3; } /* Hai Dubbi? */
.vb-cat .cat-sidebar.is-open .cat-filter-block { border-bottom: 1px dashed var(--border-2); }
.vb-cat .cat-sidebar.is-open .cat-filter-block:last-child { border-bottom: 0; }
}
/* MOBILE (≤767) */
@media (max-width: 767px) {
.vb-cat .cat-index-hero { min-height: 280px; }
.vb-cat .cat-index-h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.vb-cat .cat-spec { display: none; }
/* card prodotti una per riga */
.vb-cat .cat-grid { grid-template-columns: 1fr; }
.vb-cat .why-logo { height: 32px; }
.vb-cat .cat-seo { padding: 2.4rem 0 2.8rem; }
.vb-cat .cat-seo-inner { padding-left: 1.1rem; }
/* FAQ sotto il testo (1 colonna) */
.vb-cat .cat-seo-grid { grid-template-columns: 1fr; gap: 2rem; }
}