/* =============================================================================
   PB Sales App — stylesheet base
   Token, icone e geometria da Figma (PB-App, node 413:681) + docs/design.md.
   Layout: solo tablet landscape (base 1194×834). Rif: assets-ref/Schermate/1-Home.jpg
   ============================================================================= */

/* Transizione cross-documento al cambio pagina (same-origin). Degrada a nessuna
   transizione sui browser che non la supportano. La .sidebar ha un
   view-transition-name dedicato → resta fissa, il resto crossfada. */
@view-transition { navigation: auto; }

/* --- Font brand: FK Grotesk (self-hosted) --- */
@font-face {
    font-family: "FK Grotesk";
    src: url("/assets/fonts/FKGrotesk-Light.woff2") format("woff2"),
         url("/assets/fonts/FKGrotesk-Light.woff") format("woff");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "FK Grotesk";
    src: url("/assets/fonts/FKGrotesk-Regular.woff2") format("woff2"),
         url("/assets/fonts/FKGrotesk-Regular.woff") format("woff");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "FK Grotesk";
    src: url("/assets/fonts/FKGrotesk-Medium.woff2") format("woff2"),
         url("/assets/fonts/FKGrotesk-Medium.woff") format("woff");
    font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Token (variabili Figma) --- */
:root {
    --pb-accent:      #FF0000;   /* logo, badge, accenti */
    --pb-ink:         #0E0E0E;   /* > BLACK <  sidebar, testo, capsula */
    --pb-white:       #FFFFFF;
    --pb-bg:          #DBD9D2;   /* superficie pagina (Figma, campionato) */
    --pb-surface:     #EDECE8;   /* pannello/strip, più chiaro del bg (Figma) */
    --pb-hero-1:      #E6E7EB;   /* banda hero (luce finestra, freddo) */
    --pb-hero-2:      #D2D5DB;
    --pb-border:      #C2BDB8;   /* divider, righe — visibile su #DBD9D2 */
    --pb-row:         #B9B4B0;   /* 3 - RIGHE */
    --pb-text-muted:  #75726F;   /* testo secondario */

    --sidebar-w:      58px;
    --sidebar-gap:    12px;      /* margine capsula dai bordi */
    --content-x:      125px;     /* allineamento testo (x assoluta Figma) */
    --content-r:      125px;     /* margine destro contenuto */

    --font-primary:   "FK Grotesk", "Helvetica Neue", Arial, sans-serif;

    /* Motion — easing raffinato, durate misurate */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint */
    --dur-1:   220ms;
    --dur-2:   420ms;
    --dur-3:   720ms;
    --dur-4:   1100ms;
}

* { box-sizing: border-box; }

/* App tablet: il drag nativo dell'immagine (ghost drag-and-drop) non serve mai
   e ruberebbe i gesti di drag/scroll. Disabilitato globalmente. */
img { -webkit-user-drag: none; }

html { scroll-behavior: smooth; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--pb-bg);
    color: var(--pb-ink);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

.app-shell { position: relative; min-height: 100vh; }

/* =============================================================================
   Sidebar — capsula nera flottante + profilo separato in basso
   ============================================================================= */
.sidebar {
    position: fixed;
    left: var(--sidebar-gap);
    top: 15px;
    bottom: var(--sidebar-gap);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

.sidebar__capsule {
    width: var(--sidebar-w);
    background: var(--pb-ink);
    border-radius: calc(var(--sidebar-w) / 2);
    padding: 5px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar__logo {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--pb-accent);
    display: grid; place-items: center;
}
.sidebar__logo__mark {
    width: 23px; height: 28px;
    background: var(--pb-white);
    -webkit-mask: url("/assets/img/brand.svg") center / contain no-repeat;
            mask: url("/assets/img/brand.svg") center / contain no-repeat;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;       /* gap logo → prima icona (Figma: 108−68) */
}

.nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--pb-white);
}
.nav__item + .nav__item { margin-top: 20px; }   /* step icona 84px */
/* display:block: fuori da un flex/grid lo span resterebbe inline → ::before con
   inset:0 avrebbe containing block 0×0 (icona invisibile, es. nel <button> profilo) */
.nav__icon { position: relative; display: block; width: 48px; height: 48px; }
.nav__icon::before,
.nav__icon::after {
    content: ""; position: absolute; inset: 0;
    background: center / contain no-repeat;
    transition: opacity var(--dur-2) var(--ease);
}
.nav__icon::before { background-image: var(--ic-off); opacity: 1; }
.nav__icon::after  { background-image: var(--ic-on);  opacity: 0; }
.nav__label { font-size: 8px; line-height: 1; letter-spacing: .01em; }

/* hover + current: cross-fade verso icona -active (cerchio chiaro, glifo nero) */
.nav__item:hover .nav__icon::before,
.nav__item.is-active .nav__icon::before,
.sidebar__profile:hover .nav__icon::before { opacity: 0; }
.nav__item:hover .nav__icon::after,
.nav__item.is-active .nav__icon::after,
.sidebar__profile:hover .nav__icon::after { opacity: 1; }

.nav__item, .sidebar__profile { transition: transform var(--dur-2) var(--ease); }
.nav__item:hover, .sidebar__profile:hover { transform: translateY(-1px); }

/* divisore fra gruppo principale e strumenti (Confronta/Presenta) */
.sidebar__divider {
    width: 34px; height: 1px;
    background: rgba(255, 255, 255, .55);
    margin: 20px 0 0;
}
.sidebar__divider + .nav__item { margin-top: 20px; }

/* badge di notifica (Confronta / Presenta): solo pallino rosso, niente numero
   (scelta grafica: il conteggio potrebbe creare problemi → indicatore di presenza). */
.nav__item[data-count]:not([data-count="0"])::after {
    content: "";
    position: absolute; top: 0; left: calc(50% + 14px);   /* perimetro top-right icona 48px, leggermente esterno */
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--pb-accent);
    border: 2px solid var(--pb-ink);
}

.sidebar__account {
    position: relative;
    margin-top: auto;          /* spinge profilo + menu in fondo alla sidebar */
}
.sidebar__profile {
    margin-top: auto;
    width: 48px; height: 48px;
    background: none; border: 0; padding: 0; cursor: pointer;
    display: block;
}

/* ---- Popover account: scelta lingua + logout (rif. Figma 545:1962) ---- */
.account-menu {
    position: absolute;
    left: calc(100% + 14px);   /* a destra del profilo */
    bottom: -4px;
    width: 256px;
    background: var(--pb-ink);
    color: var(--pb-white);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 22px 60px -16px rgba(0, 0, 0, .55);
    z-index: 200;
    /* stato chiuso */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px) scale(.97);
    transform-origin: left bottom;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                visibility 0s linear var(--dur-2);
}
.sidebar__account.is-open .account-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}

/* freccetta verso il profilo */
.account-menu::before {
    content: "";
    position: absolute;
    left: -7px; bottom: 22px;
    border: 7px solid transparent;
    border-left: 0;
    border-right-color: var(--pb-ink);
}

.account-menu__label {
    margin: 6px 14px 16px;
    font-size: 13px; line-height: 1;
    color: rgba(255, 255, 255, .45);
}

.account-menu__lang,
.account-menu__logout {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 17px 16px;
    border-radius: 12px;
    font-size: 17px; line-height: 1;
    color: var(--pb-white);
    transition: background var(--dur-1) var(--ease);
}
.account-menu__lang + .account-menu__lang { margin-top: 6px; }
.account-menu__lang:hover,
.account-menu__logout:hover { background: rgba(255, 255, 255, .07); }

.account-menu__lang.is-current {
    background: var(--pb-white);
    color: var(--pb-ink);
    font-weight: 500;
}
.account-menu__lang.is-current:hover { background: var(--pb-white); }

.account-menu__check { width: 20px; height: 20px; flex: none; opacity: 0; }
.account-menu__lang.is-current .account-menu__check { opacity: 1; }

.account-menu__divider {
    display: block; height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 16px 0;
}
.account-menu__logout-icon { width: 20px; height: 20px; flex: none; }

/* =============================================================================
   Hero (banda superiore Home, alta 377px)
   ============================================================================= */
.hero {
    position: relative;
    min-height: 377px;
    padding: 42px 0 28px var(--content-x);
    background: var(--pb-hero-1);
    overflow: hidden;
}
.hero__media {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    background: var(--pb-hero-2);   /* segnaposto sotto la foto */
}
.hero__inner { position: relative; z-index: 2; max-width: 600px; }

.eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--pb-ink);
}

.hero__title {
    margin: 0;
    font-size: 70px;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 0;
    color: var(--pb-ink);
}

/* stats */
.stats {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 40px;
}
.stat { padding: 0 34px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--pb-border); }
.stat__label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 400;
    color: #3a3a3a;
}
.stat__value {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.007em;
}

/* =============================================================================
   News (lista aggiornamenti)
   ============================================================================= */
.news {
    background: var(--pb-bg);
    padding: 30px var(--content-r) 40px var(--content-x);
}

.news__item {
    display: grid;
    grid-template-columns: 191px 1fr;
    padding: 22px 0;
    border-bottom: 1px solid var(--pb-border);
}
.news__item:first-child { padding-top: 6px; }

.news__date {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--pb-ink);
    padding-top: 3px;
}
.news__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pb-ink);
}
.news__body {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: var(--pb-text-muted);
    max-width: 753px;
}

/* =============================================================================
   Pagina interna generica + Archivio Prodotti (rif. Figma 413:1678)
   ============================================================================= */
/* Il main riempie sempre l'altezza schermo → il pannello (card chiara) arriva in
   fondo, mai grigio sotto. Window-scroll: niente container con scroll interno. */
.content { display: flex; flex-direction: column; min-height: 100vh; }

.page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 42px var(--content-r) 0 var(--content-x);   /* bottom 0: il pannello tocca il fondo */
}
.page--prodotti { padding-left: 132px; padding-right: 0; }   /* pannello full-bleed a dx */

.page__header { position: relative; min-height: 138px; }
.page__title {
    margin: 0;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--pb-ink);
}

/* Tab categorie (segmented) in basso a destra dell'header */
.tabs {
    position: absolute;
    right: 20px;                      /* margine dx = padding interno pagina → strip allineata alla griglia */
    bottom: 0;                        /* attaccate al top del pannello (Figma 1:1) */
    display: inline-flex;
    align-items: stretch;
    background: var(--pb-surface);
    padding: 5px 5px 0;               /* padding strip simmetrico sx/dx; nessun raggio */
}
.tab {
    display: flex;
    align-items: center;
    height: 41px;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.16px;
    color: rgba(14, 14, 14, .6);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tab:hover { color: var(--pb-ink); }
.tab.is-active {
    background: var(--pb-bg);         /* notch colore pagina, squadrato, a filo col pannello */
    color: var(--pb-ink);
}

/* Pannello chiaro full-bleed a dx, con padding interno: la griglia resta staccata
   dal bordo schermo. La strip tab si allinea al bordo dx della griglia (vedi .tabs). */
.panel {
    margin-top: 0;
    flex: 1 0 auto;                   /* riempie il .page sotto l'header → arriva al fondo schermo */
    background: var(--pb-surface);
    padding: 20px;                    /* padding interno simmetrico (dx = sx) */
}
.panel__empty {
    margin: 0;
    padding: 64px 6px;
    font-size: 16px;
    color: var(--pb-text-muted);
}

/* Griglia prodotti — 4 colonne fluide che riempiono fino al margine dx.
   row-gap ridotto (era 73): la 2ª riga sbircia di default (non sembra vuoto) ed
   entra nella zona di reveal → fade al load; righe successive = fade allo scroll. */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 36px;
}

.product-card { display: flex; flex-direction: column; }
.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 250 / 311;
    overflow: hidden;
    background: #cfccc5;               /* segnaposto durante il blur-up */
}
.product-card__media .media__img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.product-card__title {
    margin: 14px 0 0;
    height: 67px;                      /* area fissa → azioni a 392px come Figma (icone allineate) */
    overflow: hidden;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--pb-ink);
}
.product-card__actions {
    margin-top: 0;
    display: flex;
    gap: 9px;
}
.prod-action {
    width: 34px; height: 34px;
    flex: none;
    border: 1px solid var(--pb-text-muted);
    border-radius: 50%;
    background: none;
    color: var(--pb-text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                transform var(--dur-1) var(--ease);
}
/* over: cerchio grigio pieno, icona bianca */
.prod-action:hover {
    background: var(--pb-text-muted);
    border-color: var(--pb-text-muted);
    color: var(--pb-white);
    transform: translateY(-1px);
}
/* selezionato: già nel confronta → cerchio accent pieno, icona bianca (persistente) */
.prod-action--confronta.is-active {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
    color: var(--pb-white);
}
.prod-action--confronta.is-active:hover {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
}
/* selezionato: già in presentazione → cerchio accent pieno, icona bianca (persistente) */
.prod-action--presenta.is-active {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
    color: var(--pb-white);
}
.prod-action--presenta.is-active:hover {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
}
.prod-action svg { display: block; }
.prod-action--confronta svg { width: 15px; height: auto; }
.prod-action--presenta svg { width: 13px; height: auto; margin-left: 1px; }

/* =============================================================================
   Scheda prodotto (Finestre/Scorrevoli) — rif. Figma 444:14788
   Header (breadcrumb + titolo + azioni) · strip tab (riusa .tabs) · pannello.
   ============================================================================= */
.page--prodotto { padding: 24px 0 0 var(--content-x); }   /* full-bleed pannello a dx; bottom 0 → pannello a fondo schermo */

/* padding-top (non margin sul figlio): evita il margin-collapse che spingeva
   giù header/pannello di 22px. Geometria Figma: azioni y24, breadcrumb y46,
   titolo y66, pannello y181. head: y24→181 = 157px. */
.product-detail__head { position: relative; padding-top: 22px; min-height: 157px; }

.breadcrumb {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--pb-ink);
}
.breadcrumb__cat { color: var(--pb-text-muted); }

.product-detail__title {
    margin: 9px 0 0;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.48px;
    color: var(--pb-ink);
}

/* Azioni rapide in alto a destra (Confronto / Presentazione) */
.product-detail__actions {
    position: absolute;
    top: 0;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.detail-action {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--pb-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.14px;
}
.detail-action__ico {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--pb-ink);
    color: var(--pb-surface);
    display: grid;
    place-items: center;
    transition: transform var(--dur-1) var(--ease);
}
.detail-action__ico svg { display: block; height: auto; }
/* glifi alle dimensioni naturali Figma dentro al cerchio 26px (erano troppo grandi) */
.detail-action:first-child .detail-action__ico svg { width: 12px; }              /* confronto ⇄ 12.3×13.9 */
.detail-action:last-child  .detail-action__ico svg { width: 10px; margin-left: 1px; } /* play ▶ 10.1×11.7, nudge ottico */
.detail-action:hover .detail-action__ico { transform: translateY(-1px); }
/* selezionato: già nel confronta → cerchio icona accent (persistente) */
.detail-action.is-active .detail-action__ico { background: var(--pb-accent); color: var(--pb-white); }

/* .panel--prodotto non ridichiara il padding: il box contenuto (padding 20px,
   bg, full-height) vive in .panel — contenitore unico e uguale per tutte le viste.
   Le viste interne riempiono e non ridefiniscono larghezza/padding. */

/* --- Panoramica: galleria (3 col) + descrizione + specifiche --- */
.overview {
    display: grid;
    grid-template-columns: 510fr 249fr 250fr;
    column-gap: 10px;
    row-gap: 22px;
}
.overview__hero  { grid-column: 1; grid-row: 1; }
.overview__stack { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: 1fr 1fr; row-gap: 10px; }
.overview__all   { grid-column: 3; grid-row: 1; }
.overview__desc  { grid-column: 1; grid-row: 2; }
.overview__specs { grid-column: 2 / 4; grid-row: 2; }

/* Form factor fisso (~1.32, come iPad) a ogni larghezza — solo scala, niente distorsione:
   l'hero definisce l'altezza della riga via aspect-ratio; stack e "all" si stirano alla riga.
   Le immagini riempiono frame a dimensione definita (position:absolute): una sorgente
   verticale non gonfia più la riga (prima l'altezza auto seguiva l'aspect intrinseco → i
   riquadri diventavano verticali oltre l'iPad). Il crop resta orizzontale ovunque. */
.overview__hero { aspect-ratio: 568 / 430; }
.overview__stack, .overview__all { align-self: stretch; }
.overview__hero .media__img,
.overview__tile .media__img { position: absolute; inset: 0; }
.overview__hero, .overview__tile { display: block; }   /* .media fornisce position/overflow/placeholder */
/* Riquadri Panoramica cliccabili (foto gallery → zoom): reset button, eredita box .media */
button.overview__hero, button.overview__tile {
    width: 100%; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: zoom-in;
}

/* "Vedi tutte le foto" — blocco colore-pagina, testo + freccia in basso */
.overview__all {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 30px;
    background: var(--pb-bg);
    transition: background var(--dur-1) var(--ease);
}
.overview__all:hover { background: #d2d0c8; }
/* Gallery vuota: il riquadro resta ma non promette un'apertura che non arriverebbe. */
.overview__all--vuoto { cursor: default; }
.overview__all--vuoto:hover { background: var(--pb-bg); }
.overview__all-label {
    max-width: 7ch;
    font-size: 24px;
    line-height: 1.2;
    color: var(--pb-ink);
}
.overview__all-arrow { flex: none; color: var(--pb-ink); transition: transform var(--dur-1) var(--ease); }
.overview__all-arrow svg { display: block; width: 14px; height: 14px; }
.overview__all:hover .overview__all-arrow { transform: translate(2px, -2px); }

/* Descrizione */
.overview__desc p {
    margin: 0;
    /* margine dx costante (no cap fisso): il testo riempie la colonna meno ~62px (gap
       dell'originale a larghezza ref) → non tocca il bordo foto e scala sugli schermi larghi. */
    padding-right: 62px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.1px;
    color: var(--pb-ink);
}

/* Specifiche tecniche — 2 colonne, righe con divisore (ultima senza) */
.overview__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-content: start;
}
.spec {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 10px;
    align-items: start;
    padding: 13px 0 16px;
    border-bottom: 1px solid var(--pb-border);
}
.spec:last-child { border-bottom: 0; }
.spec__ico { width: 20px; padding-top: 2px; }
.spec__ico img { display: block; width: 100%; height: 18px; object-fit: contain; object-position: left center; }
.spec__label {
    margin: 0;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.09px;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}
.spec__value {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--pb-ink);
}

/* --- Finiture: sotto-tab Interno/Esterno + griglia campioni (rif. Figma 444:14982) --- */
.subtabs { display: flex; gap: 28px; margin: 0 0 40px; }
.subtab {
    position: relative;
    padding-bottom: 8px;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    color: var(--pb-text-muted);
    opacity: .3;
    transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.subtab:hover { opacity: .6; }
.subtab.is-active { color: var(--pb-ink); opacity: 1; }
.subtab.is-active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--pb-ink);
}

.finishes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 46px;
}
.finish {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: zoom-in;
}
.finish__swatch {
    aspect-ratio: 250 / 311;            /* .media: position/overflow/placeholder */
    transition: transform var(--dur-2) var(--ease);
}
.finish:hover .finish__swatch { transform: scale(1.02); }
.finish__swatch .media__img { width: 100%; height: 100%; object-fit: cover; }
.finish__cat {
    margin: 13px 0 0;
    font-size: 11px;
    line-height: 1;
    opacity: .8;
    text-transform: capitalize;
    color: var(--pb-ink);
}
.finish__name {
    margin: 6px 0 0;
    font-size: 20px;
    line-height: 1.1;
    color: var(--pb-ink);
}

/* --- Risorse tecniche: nessun cap/padding proprio — riempie il box di .panel
   (larghezza governata dal contenitore comune). Nome = 1fr, formato + download a destra. --- */
.resources { padding-top: 50px; }
.res-section + .res-section { margin-top: 84px; }
.res-section__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.314px;
    color: var(--pb-ink);
}
.res-item {
    display: grid;
    grid-template-columns: 1fr 237px 102px;
    align-items: center;
    min-height: 80px;
    border-bottom: 1px solid var(--pb-border);
}
.res-item:last-child { border-bottom: 0; }
.res-item__name {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.13px;
    color: var(--pb-ink);
}
.res-item__icon { width: 18px; height: auto; flex: none; display: block; }
.res-item__format { font-size: 13px; line-height: 1.4; color: var(--pb-text-muted); }
.res-item__dl {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: end;                /* bordo dx ancorato al bordo contenuto (allineato a Panoramica) */
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.65px;
    text-transform: uppercase;
    color: var(--pb-ink);
    transition: opacity var(--dur-1) var(--ease);
}
.res-item__dl:hover { opacity: .6; }
.res-item__dl-arrow { width: 13px; height: auto; flex: none; transition: transform var(--dur-1) var(--ease); }
.res-item__dl:hover .res-item__dl-arrow { transform: translateY(2px); }

/* --- Progetti correlati: griglia 2 col (rif. Figma 444:15377) --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 48px;
}
.project-card { display: flex; flex-direction: column; }
.project-card__media { aspect-ratio: 508 / 311; }   /* .media: pos/overflow/placeholder */
.project-card__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.project-card__title {
    margin: 18px 0 0;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--pb-ink);
}
.project-card__meta {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.13px;
    color: var(--pb-text-muted);
}
.project-card__play { margin-top: 18px; }   /* aspetto da .prod-action--presenta */

/* =============================================================================
   Presentazione — builder (rif. Figma 413:1344) + player fullscreen (413:2418/2496)
   ============================================================================= */
.page--presenta { padding-left: 132px; padding-right: 0; }   /* pannello full-bleed a dx */
/* pannello = colonna: lista in alto, barra spinta in fondo (margin-top:auto) e
   ancorata allo schermo (sticky); la lista scorre sotto la barra */
.page--presenta .panel { display: flex; flex-direction: column; }

/* Lista riordinabile: handle · thumb 112×80 · titolo · cestino. Riga 130, hairline
   a tutta larghezza pannello; contenuto rientrato 20 (Figma 1:1). */
.present-list { list-style: none; margin: 0; padding: 0; }
.present-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 130px;
    padding: 0 20px;
    border-bottom: 1px solid var(--pb-border);
    background: var(--pb-surface);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    -webkit-user-select: none; user-select: none;   /* drag handle al tocco: niente selezione testo */
}
.present-row:last-child { border-bottom: 0; }
.present-row.is-removing { opacity: 0; transform: translateX(-14px); pointer-events: none; }

/* Frecce su/giù per il riordino (target ampi, affidabili su tablet) */
.present-row__move {
    flex: none; display: flex; flex-direction: column; gap: 6px; margin-right: 33px;
}
.present-row__arrow {
    width: 40px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--pb-border); background: var(--pb-surface); color: var(--pb-ink);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.present-row__arrow:hover { background: var(--pb-bg); }
.present-row__arrow:disabled { opacity: .28; cursor: default; }
.present-row__arrow svg { display: block; width: 18px; height: 18px; }

.present-row__thumb {
    flex: none; width: 112px; height: 80px;
    margin-right: 62px;
    background: #cfccc5;
}
.present-row__thumb .media__img { width: 100%; height: 100%; object-fit: cover; }

.present-row__title {
    flex: 1; min-width: 0;
    font-size: 23px; font-weight: 400; line-height: 1.2;
    color: var(--pb-ink);
}

.present-row__remove {
    flex: none; width: 40px; height: 40px;
    margin-left: 16px;
    display: grid; place-items: center;
    padding: 0; border: 0; background: none;
    color: var(--pb-ink);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.present-row__remove:hover { color: var(--pb-accent); transform: translateY(-1px); }
.present-row__remove svg { width: 18px; height: 20px; }

/* Barra "Avvia presentazione" — nera, sticky in basso al pannello. L'intera barra
   è il bottone (area di click ampia, non solo il testo): "play" → apre il player. */
.present-bar {
    position: sticky; bottom: 20px;
    margin-top: auto;       /* lista corta → barra spinta in fondo al pannello (= fondo schermo) */
    width: 100%;
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 28px;
    border: 0;
    background: var(--pb-ink);
    color: var(--pb-white);
    font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.16px;
    text-align: right;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}
.present-bar:not([disabled]):hover { background: #1c1c1c; }
.present-bar:not([disabled]):hover .present-bar__ico { transform: translateX(-2px); }
.present-bar[disabled] { opacity: .5; cursor: default; }
.present-bar__ico { display: inline-flex; transition: transform var(--dur-1) var(--ease); }
.present-bar__ico svg { display: block; width: 13px; height: 15px; }

/* --- Player: overlay nero fullscreen, slide impilate (solo l'attiva visibile) --- */
.present-player {
    position: fixed; inset: 0; z-index: 1100;
    background: #000;
    opacity: 0; visibility: hidden;
    pointer-events: none;   /* chiuso = inerte: la slide attiva è visibility:visible
                               (override del parent) e copre il viewport → senza questo
                               intercetterebbe i click su menu/lista anche da invisibile */
    transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.present-player.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-2) var(--ease); }

.present-player__deck { position: absolute; inset: 0 0 72px; }   /* spazio per la toolbar */
.pslide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transform: translateX(14px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.pslide.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

/* Slide prodotto: immagine sx (738/1194) + colonna info dx */
.pslide--prodotto { display: grid; grid-template-columns: 738fr 456fr; }
.pslide__media { display: block; height: 100%; background: #000; }
.pslide__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.pslide__info { align-self: center; padding: 0 60px 0 55px; max-width: 432px; }

.pslide__eyebrow {
    margin: 0;
    font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.55px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.pslide__eyebrow-sub { color: var(--pb-white); }
.pslide__title {
    margin: 14px 0 0;
    font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.36px;
    color: var(--pb-white);
}
.pslide__desc {
    margin: 22px 0 0;
    max-width: 350px;
    font-size: 14px; line-height: 1.6; letter-spacing: -0.1px;
    color: rgba(255, 255, 255, .7);
}

/* Specifiche: riusa .spec in tema scuro (icone forzate a bianco) */
.pslide__specs { margin-top: 38px; }
.pslide__specs .spec {
    grid-template-columns: 18px 1fr;
    column-gap: 30px;
    padding: 12px 0 13px;
    border-color: rgba(255, 255, 255, .16);
}
.pslide__specs .spec__ico { width: 18px; padding-top: 1px; }
.pslide__specs .spec__ico img { width: 100%; height: 18px; filter: brightness(0) invert(1); }
.pslide__specs .spec__label { font-size: 11px; letter-spacing: 0.3px; color: rgba(255, 255, 255, .5); }
.pslide__specs .spec__value { color: var(--pb-white); }

/* Slide progetto: header (eyebrow+titolo sx, meta 2×2 dx) + hero full-width */
.pslide--progetto { display: flex; flex-direction: column; }
.pslide__phead {
    flex: none;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 40px;
    padding: 48px 30px 28px;
}
.pslide--progetto .pslide__title { margin-top: 13px; }
.pslide__meta {
    flex: none; margin: 0;
    display: grid; grid-template-columns: repeat(2, 276px); column-gap: 10px;
}
.pslide__meta-cell { padding: 10px 0 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.pslide__meta-cell dt {
    margin: 0; font-size: 11px; line-height: 1; letter-spacing: 0.3px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, .5);
}
.pslide__meta-cell dd { margin: 7px 0 0; font-size: 17px; line-height: 1.1; color: var(--pb-white); }

.pslide__hero { display: block; flex: 1; min-height: 0; background: #000; }
.pslide__hero .media__img { width: 100%; height: 100%; object-fit: cover; }

/* Carousel foto interno alla slide (prime 3 foto overview): cross-fade + frecce laterali */
.pslide__media, .pslide__hero { position: relative; overflow: hidden; }
.pcarousel, .pcarousel__viewport { position: absolute; inset: 0; }
/* .pcarousel prefisso: l'item ha anche classe .media, il cui position:relative (def. dopo,
   riga ~1310) vincerebbe a parità di specificità → item in flusso, impilati in verticale
   (solo il 1° visibile, gli altri clippati = "neri"). Il prefisso alza la specificità. */
.pcarousel .pcarousel__item { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.pcarousel .pcarousel__item.is-active { opacity: 1; }
/* foto SEMPRE visibili: il cross-fade lo fa .pcarousel__item, non il blur-up del singolo
   img (che su slide nascoste/lazy del player non scatterebbe → foto nere) */
.pcarousel__item .media__img { width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; transform: none !important; filter: none !important; }
.pcarousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff;
    cursor: pointer; z-index: 2;
    transition: background var(--dur-1) var(--ease);
}
.pcarousel__arrow:hover { background: rgba(0, 0, 0, .72); }
.pcarousel__arrow svg { width: 22px; height: 22px; }
.pcarousel__arrow--prev { left: 18px; }
.pcarousel__arrow--next { right: 18px; }

/* Toolbar player: Termina (sx) · Vedi scheda (centro) · Indietro/Avanti (dx) */
.present-player__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 30px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.pbar__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 0; border: 0; background: none;
    color: var(--pb-white);
    font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.14px;
    cursor: pointer;
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pbar__btn:hover { opacity: .65; }
.pbar__btn--end { justify-self: start; }
.pbar__btn--detail { justify-self: center; }
.pbar__nav { justify-self: end; display: inline-flex; align-items: center; gap: 34px; }
.pbar__btn--prev:hover { transform: translateX(-2px); }
.pbar__btn--next:hover { transform: translateX(2px); }
.pbar__btn svg { display: block; width: 17px; height: 14px; }

/* =============================================================================
   Gallery — layer nero fullscreen sopra tutta la scheda (rif. Figma 444:15082).
   Rail miniature scrollabile a sx + stage foto/video a dx (titolo sopra, desc sotto).
   ============================================================================= */
.gallery {
    position: fixed; inset: 0; z-index: 1100;
    background: #000;
    display: flex;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.gallery.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease); }

/* Rail miniature — 2 col, scroll verticale (scrollbar nascosta) */
.gallery__rail { flex: none; width: 158px; margin-left: 30px; padding: 16px 0 48px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.gallery__rail::-webkit-scrollbar { width: 0; height: 0; }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.gallery__thumb {
    position: relative;
    aspect-ratio: 74.6 / 49.7;
    padding: 0; border: 0; background: #1a1a1a;
    overflow: hidden; cursor: pointer;
    outline: 2px solid transparent; outline-offset: -2px;
    opacity: .8;
    transition: outline-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { outline-color: var(--pb-white); opacity: 1; }
.gallery__badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.gallery__badge svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }

/* Stage — titolo, media (foto/video), descrizione */
.gallery__stage { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 92px 30px 30px 33px; }
.gallery__title { margin: 0 0 16px; font-size: 21px; line-height: 1.2; color: rgba(255, 255, 255, .5); }
.gallery__media { position: relative; flex: 1; min-height: 0; }
.gallery__img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.gallery__desc { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.gallery__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gallery__play[hidden] { display: none; }   /* [hidden] da solo verrebbe sovrascritto da display:grid */
.gallery__play svg { width: 64px; height: 64px; }

/* Close — cerchio bianco, X nera, in alto a dx */
.gallery__close {
    position: absolute; top: 20px; right: 30px;
    width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: var(--pb-white); color: var(--pb-ink);
    display: grid; place-items: center; cursor: pointer; z-index: 2;
    transition: transform var(--dur-1) var(--ease);
}
.gallery__close:hover { transform: scale(1.06); }
.gallery__close svg { width: 20px; height: 20px; }

/* =============================================================================
   Lightbox riutilizzabile (zoom finiture). Trigger: [data-zoom].
   ============================================================================= */
html.no-scroll { overflow: hidden; }

.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    padding: 40px 88px;
    background: rgba(14, 14, 14, .9);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.lightbox.is-open {
    opacity: 1; visibility: visible;
    transition: opacity var(--dur-2) var(--ease);
}

.lightbox__figure {
    margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    opacity: 0; transform: scale(.94);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.lightbox.is-open .lightbox__figure { opacity: 1; transform: none; }

.lightbox__media { display: block; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .65); }
.lightbox__img {
    display: block;
    max-width: min(92vw, 1600px);
    max-height: 84vh;
    width: auto; height: auto;
    object-fit: contain;
}
/* Gli swatch finiture restano piccoli: il campione va letto, non riempie lo schermo. */
.lightbox[data-group="finiture"] .lightbox__img {
    max-width: min(78vw, 720px);
    max-height: 74vh;
}
.lightbox__caption { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--pb-white); text-align: center; }
.lightbox__sub  { font-size: 12px; opacity: .55; text-transform: capitalize; }
.lightbox__name { font-size: 20px; }

.lightbox__close, .lightbox__nav {
    position: absolute;
    border: 0; cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--pb-white);
    display: grid; place-items: center;
    transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox[data-single="true"] .lightbox__nav { display: none; }

/* Pagina 404 */
.page--error { padding-top: 96px; }
.error__code { margin: 0; font-size: 88px; font-weight: 400; line-height: 1; color: var(--pb-border); }
.error__title { margin: 18px 0 8px; font-size: 32px; font-weight: 400; letter-spacing: -0.4px; }
.error__text { margin: 0 0 28px; font-size: 15px; color: var(--pb-text-muted); }
.error__home {
    display: inline-block;
    padding: 12px 24px;
    background: var(--pb-ink);
    color: var(--pb-white);
    border-radius: 10px;
    font-size: 14px;
    transition: transform var(--dur-1) var(--ease);
}
.error__home:hover { transform: translateY(-1px); }

/* =============================================================================
   Accesso — login (rif. Figma 413:650). Schermata standalone (layout auth):
   foto full-bleed + overlay, card centrata con form. Token esistenti.
   ============================================================================= */
.login {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: var(--pb-ink);
    overflow: hidden;
}
/* img diretta (no .media: il suo position:relative, definito dopo, romperebbe il fill) */
.login__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }   /* overlay (assoluto → fuori dal grid) */

.login__card {
    position: relative; z-index: 1;
    box-sizing: border-box;
    width: 469px;
    padding: 35px 36px 31px;
    background: var(--pb-bg);
    display: flex; flex-direction: column;
}
.login__title {
    margin: 0;
    font-size: 36px; font-weight: 500; line-height: 1.45; letter-spacing: -0.36px;
    color: var(--pb-ink);
}
.login__sub {
    margin: 2px 0 0;
    font-size: 16px; line-height: 1.6;
    color: var(--pb-text-muted);
}

.login__field { display: block; margin-top: 26px; }
.login__field:first-of-type { margin-top: 40px; }   /* "Nome utente" a y256 (Figma) */
.login__label {
    display: block; margin: 0 0 8px;
    font-size: 15px; font-weight: 500; line-height: 1;
    color: var(--pb-ink);
}
.login__control {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    height: 50px;
    padding: 0 18px;
    background: rgba(237, 236, 232, .5);       /* #edece8 @ 50% (Figma opacity .5) */
    border: 1px solid rgba(117, 114, 111, .5);
}
.login__ico { flex: none; width: 18px; height: 20px; display: inline-flex; align-items: center; color: var(--pb-ink); }
.login__ico svg { display: block; width: 100%; height: auto; }
.login__input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font-family: inherit; font-size: 12px; letter-spacing: 0.12px;
    color: var(--pb-ink);
}
.login__input::placeholder { color: var(--pb-ink); opacity: .7; }

/* select Lingua: native nascosta, caret custom a dx */
.login__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; }
.login__caret { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 12px; color: var(--pb-ink); pointer-events: none; }
.login__caret svg { display: block; width: 100%; height: auto; }

/* Resta collegato — checkbox custom, allineato a destra sopra il bottone */
.login__remember {
    display: flex; align-items: center; gap: 8px;
    align-self: flex-end;
    margin: 38px 0 0;
    cursor: pointer;
}
.login__remember-label { font-size: 12px; letter-spacing: 0.24px; color: var(--pb-ink); }
.login__checkbox { position: absolute; width: 0; height: 0; opacity: 0; }
.login__box {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--pb-ink);
    color: transparent;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.login__box svg { width: 12px; height: 12px; }
.login__checkbox:checked + .login__box { background: var(--pb-ink); color: var(--pb-white); }
.login__checkbox:focus-visible + .login__box { outline: 2px solid var(--pb-ink); outline-offset: 2px; }

.login__submit {
    margin-top: 22px;
    height: 57px;
    border: 0;
    background: var(--pb-ink);
    color: var(--pb-bg);
    font-family: inherit; font-size: 18px; font-weight: 500; letter-spacing: -0.18px;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}
.login__submit:hover { background: #1c1c1c; }

/* Login — messaggio errore credenziali */
.login__error {
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 0, 0, .10);
    color: var(--pb-accent);
    font-size: 14px;
}

/* =============================================================================
   Gate device — app SOLO tablet (landscape). Phone (qualsiasi orientamento) o
   schermo troppo basso → overlay "usa un tablet"; tablet in portrait → "ruota".
   ============================================================================= */
.orientation-lock {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: var(--pb-ink); color: #fff;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px; gap: 18px;
}
.orientation-lock svg { width: 56px; height: 56px; }
.orientation-lock p { margin: 0; font-size: 18px; max-width: 320px; }
.device-gate__rotate, .device-gate__size { display: none; }

/* Phone (lato corto piccolo: portrait stretto o landscape basso) → usa un tablet */
@media (max-width: 600px), (orientation: landscape) and (max-height: 600px) {
    .orientation-lock { display: flex; }
    .orientation-lock .device-gate__size { display: block; }
    .app-shell, .login { display: none; }
}
/* Tablet in portrait (non phone) → ruota in orizzontale */
@media (orientation: portrait) and (min-width: 601px) {
    .orientation-lock { display: flex; }
    .orientation-lock .device-gate__rotate { display: block; }
    .app-shell, .login { display: none; }
}

/* =============================================================================
   Motion — reveal on scroll, blur-up immagini, parallasse. Premium, sobrio.
   Stati nascosti gated dietro html.js → senza JS si vede tutto.
   ============================================================================= */

/* Reveal singolo */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
    will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Reveal con stagger dei figli diretti */
html.js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
    will-change: opacity, transform;
}
html.js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
html.js [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 80ms; }
html.js [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 190ms; }
html.js [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 300ms; }
html.js [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 410ms; }
html.js [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 520ms; }

/* Immagini — blur-up da segnaposto */
.media { position: relative; overflow: hidden; background: var(--ph, var(--pb-hero-2)); }
.media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.js .media__img {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(16px);
    transition: opacity var(--dur-4) var(--ease),
                transform var(--dur-4) var(--ease),
                filter var(--dur-4) var(--ease);
    will-change: opacity, transform, filter;
}
html.js .media__img.is-loaded { opacity: 1; transform: scale(1); filter: blur(0); }

/* Layer parallasse: a riposo riempie esatto (framing intatto), lo zoom durante
   lo scroll crea lo slack per il drift senza mostrare bordi. */
.media__parallax {
    position: absolute; inset: 0;
    transform-origin: center;
    will-change: transform;
}

/* Sidebar: persistente tra le pagine (niente entrata al load → sembra fissa).
   view-transition-name la rende elemento condiviso tra documenti: stessi pixel
   old/new → nessun fade visibile, resta ancorata mentre il resto crossfada. */
.sidebar { view-transition-name: pb-sidebar; }

/* Accessibilità: nessuna animazione se richiesto */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-reveal],
    html.js [data-reveal-stagger] > *,
    html.js .media__img {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .media__parallax { transform: none !important; }
    .lightbox__figure { transform: none !important; }
    .finish__swatch { transition: none !important; }
}

/* =============================================================================
   Scheda editoriale (Altri prodotti: Maniglie/Zanzariere) — rif. Figma 2.3
   Pannello scrollabile = sequenza di blocchi flessibili separati da divisori.
   Larghezza contenuto = 1029px @1194 (content-x + padding pannello) → mappa 1:1.
   ============================================================================= */
.editorial { display: block; }
.editorial > * { margin: 0; }
.editorial > * + * { margin-top: 44px; }
.blk-divisore { margin-top: 56px; }       /* più aria prima della riga */
.blk-divisore + * { margin-top: 34px; }   /* meno dopo, fino al titolo sezione */

/* immagine full-width */
.blk-immagine { display: block; width: 100%; }
.blk-immagine .media__img { width: 100%; height: 100%; object-fit: cover; }

/* intro: eyebrow (col sx 259) + heading grande (col dx) */
.blk-intro {
    display: grid;
    grid-template-columns: 259px 1fr;
    align-items: start;
    padding: 12px 0 4px;
}
.blk-intro__eyebrow {
    margin: 6px 0 0;
    /* la colonna è fissa a 259 e la griglia non ha gap: senza questo respiro un eyebrow
       lungo arriva a filo del testo grande. Con l'eyebrow su più righe serve anche
       un'interlinea leggibile: a 1 le righe si toccavano. */
    padding-right: 24px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--pb-ink);
}
.blk-intro__text {
    margin: 0;
    max-width: 706px;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--pb-ink);
}

/* media-testo: immagine quadrata 508 + testo, allineati al centro verticale */
.blk-media-testo { display: grid; align-items: center; column-gap: 100px; }
.blk-media-testo--sx { grid-template-columns: 508px 1fr; }
.blk-media-testo--dx { grid-template-columns: 1fr 508px; }
/* grid-row:1 esplicito su entrambi: senza, l'auto-placement sparse spinge il
   testo (col1, dopo l'immagine in col2) in riga 2 → blocco più alto e testo basso. */
.blk-media-testo--dx .blk-media-testo__media { grid-column: 2; grid-row: 1; }
.blk-media-testo--dx .blk-media-testo__text  { grid-column: 1; grid-row: 1; padding-left: 89px; }
.blk-media-testo__media { display: block; width: 508px; aspect-ratio: 1 / 1; }
.blk-media-testo__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.blk-media-testo__text { max-width: 378px; }
.blk-media-testo__title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.32px;
    color: var(--pb-ink);
}
.blk-media-testo__body {
    margin: 18px 0 0;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.077px;
    color: var(--pb-text-muted);
}

/* divisore */
.blk-divisore { border: 0; border-top: 1px solid var(--pb-border); height: 0; width: 100%; }

/* carosello: titolo + track scorrevole orizzontale */
.blk-carosello__title {
    margin: 0 0 27px;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--pb-ink);
}
.carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;            /* niente selezione testo durante il drag */
    touch-action: pan-x;          /* su touch: pan orizzontale netto */
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel.is-dragging .finish { pointer-events: none; }
.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    column-gap: 10px;
}
.carousel__item { scroll-snap-align: start; }

/* card carosello: riusa .finish; varianti fit + pallini.
   Le card statiche (article) non hanno il cursore zoom; le finiture (button) sì. */
.finish.carousel__item { cursor: default; }
.finish.carousel__item[data-zoom] { cursor: zoom-in; }
.finish--cover .finish__swatch .media__img { object-fit: cover; }
.finish--contain .finish__swatch { background: var(--pb-white); }
.finish--contain .finish__swatch .media__img { object-fit: contain; padding: 20px; }
/* nome senza eyebrow (es. Finiture): stacco maggiore dallo swatch */
.finish__swatch + .finish__name { margin-top: 14px; }

/* pallini finiture in basso a destra dello swatch */
.finish__dots {
    position: absolute;
    right: 16px;
    bottom: 13px;
    display: flex;
    gap: 8px;
    z-index: 1;
}
.finish__dot {
    width: 24px;
    height: 23px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(14, 14, 14, .06);
}

/* =============================================================================
   Focus — archivio (rif. Figma 444:16407) + scheda editoriale (444:16373)
   Archivio = griglia prodotti senza azioni. Scheda = header eyebrow + titolo
   (no breadcrumb/azioni/tab) + sequenza blocchi (riusa .editorial / .blk-*).
   ============================================================================= */
.page--focus { padding-left: 132px; padding-right: 0; }   /* pannello full-bleed a dx */

.focus-card { display: flex; flex-direction: column; }
.focus-card__media {
    position: relative;
    display: block;
    aspect-ratio: 250 / 311;
    overflow: hidden;
    background: #cfccc5;               /* segnaposto durante il blur-up */
}
.focus-card__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.focus-card__title {
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--pb-ink);
}

/* Scheda: header eyebrow (uppercase muted) + titolo 64px. Geometria Figma:
   eyebrow y57, titolo y66, pannello y181 → stessa griglia dell'header prodotto. */
.focus-detail__head { position: relative; padding-top: 22px; min-height: 157px; }
.focus-detail__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}
.focus-detail__title {
    margin: 9px 0 0;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.64px;
    color: var(--pb-ink);
}

/* =============================================================================
   Confronta (rif. Figma 413:714, 1:1) — header solo titolo + pannello con tabella
   comparativa. Header = una card prodotto (immagine + cestino + titolo) per colonna,
   allineata alle colonne valori: head e righe condividono la stessa grid-template
   (etichette + N colonne prodotto). Colonne rimovibili via JS (--cmp-n).
   Geometria: label col 240, colonna prodotto 250, gap 10 (pitch 260) → tot 1020.
   ============================================================================= */
.page--confronta { padding-left: 132px; padding-right: 0; }   /* pannello full-bleed a dx */

/* Carousel orizzontale: la tabella (max-content) scorre dentro il pannello quando
   le colonne superano la larghezza. Drag/touch via [data-carousel]; scrollbar
   nascosta (coerente con l'app). La colonna etichette resta fissa (sticky). */
.compare-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.compare-scroll::-webkit-scrollbar { height: 0; }
.compare-scroll.is-dragging { cursor: grabbing; }

.compare {
    --cmp-label: 240px;     /* colonna etichette */
    --cmp-col: 250px;       /* colonna prodotto (card 250) */
    --cmp-gap: 10px;        /* gap colonne → pitch 260 (Figma) */
    width: max-content;     /* la tabella scorre dentro .compare-scroll */
    padding-top: 4px;
}

/* griglia condivisa head/righe: etichette + N colonne prodotto */
.compare__head,
.compare__row {
    display: grid;
    grid-template-columns: var(--cmp-label) repeat(var(--cmp-n, 3), var(--cmp-col));
    column-gap: var(--cmp-gap);
}

/* --- Header: card prodotto + titolo (Figma card 250x311, titolo 23px) --- */
.compare__head { align-items: start; }
.compare__col { min-width: 0; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }

/* Colonna etichette fissa: lo spacer dell'header + le label restano a sinistra
   mentre i prodotti scorrono. Sfondo opaco + box-shadow coprono i prodotti dietro
   (incluso il gap colonne). */
.compare__spacer {
    position: sticky; left: 0; z-index: 2;
    align-self: stretch;
    background: var(--pb-surface);
    box-shadow: var(--cmp-gap) 0 0 var(--pb-surface);
}

.compare__card {
    position: relative;
    aspect-ratio: 250 / 311;
    background: #cfccc5;               /* segnaposto durante il blur-up */
}
.compare__trash {                      /* cerchio bianco in alto a dx (Figma 30px, top10/right13) */
    position: absolute;
    top: 10px;
    right: 13px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pb-white);
    color: var(--pb-ink);
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.compare__trash svg { width: 15px; height: 15px; }
.compare__trash:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(14, 14, 14, .18); }
.compare__title {
    margin: 15px 0 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--pb-ink);
}

/* --- Righe specifiche: hairline + etichetta (10px uppercase) + valori (16px) --- */
.compare__rows { margin-top: 26px; }   /* stacco titolo → prima riga (Figma y407) */
.compare__row {
    position: relative;
    align-items: start;
    padding: 30px 0 20px;              /* valore +30 sotto la riga; pitch ~69/74 (Figma) */
}
.compare__row::before {                /* hairline: z3 → resta visibile sopra la label sticky */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 11px;
    height: 1px;
    z-index: 3;
    background: var(--pb-row);
}
.compare__label {
    position: sticky; left: 0; z-index: 2;
    align-self: stretch;
    box-sizing: border-box;
    padding: 4px 80px 0 0;             /* contenuto largo 160 (240-80) → wrap 2 righe come Figma */
    background: var(--pb-surface);
    box-shadow: var(--cmp-gap) 0 0 var(--pb-surface);   /* copre il gap mentre i prodotti scorrono */
    font-size: 10px;
    font-weight: 500;                  /* FK Grotesk Medium come le altre label uppercase (era 400 → troppo light) */
    line-height: 1.3;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}
.compare__val {
    min-width: 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--pb-ink);
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

/* collasso morbido alla rimozione colonna */
.compare__col.is-removing,
.compare__val.is-removing {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* =============================================================================
   Progetti — archivio (rif. Figma 413:1766) + scheda (413:1261 / 413:1311).
   Archivio: riusa .page__header/.tabs/.projects-grid (2 col, card landscape).
   Scheda: header riusa .product-detail__* ; Panoramica riusa la griglia .overview
   (hero + 2 thumb + "Vedi tutte le foto") con riga 2 = descrizione + metadati.
   Tab Prodotti = .products-grid + card prodotto riusate (prodotti correlati).
   ============================================================================= */
.page--progetti { padding-left: 132px; padding-right: 0; }   /* pannello full-bleed a dx */

/* card archivio: titolo cliccabile senza stile link */
.project-card__title-link { color: inherit; text-decoration: none; }

/* Panoramica: riga media identica alla scheda prodotto; gap media→riga 2 = Figma */
.overview--progetto { row-gap: 27px; }

.proj-desc { grid-column: 1; grid-row: 2; }
.proj-desc p {
    margin: 0;
    /* margine dx costante (no cap fisso): ~49px dell'originale → testo non a filo foto, scala. */
    padding-right: 49px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: var(--pb-ink);
}

/* Metadati: 2 colonne (Tipologia/Architetto · Location/Anno), righe con divisore sopra */
.proj-meta {
    grid-column: 2 / 4;
    grid-row: 2;
    display: grid;
    grid-template-columns: 246px 1fr;
    column-gap: 14px;
    align-content: start;
}
.proj-meta__col { display: flex; flex-direction: column; }
.proj-field {
    height: 68px;
    padding: 16px 0 0;
    border-top: 1px solid var(--pb-border);
}
.proj-field__label {
    margin: 0;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}
.proj-field__value {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.1px;
    color: var(--pb-ink);
}

/* =============================================================================
   Azienda (rif. Figma 413:991 / 413:3653 / 429:3654 / 413:1149)
   Pagina editoriale a 4 tab. Header archivio-style (titolo + pill) su pannello
   .panel--prodotto + block builder (.editorial). Riusa .page--prodotto per la
   geometria (padding-left 125, full-bleed dx), override solo padding-top.
   ============================================================================= */
.page--azienda { padding-top: 42px; }   /* titolo a y43 come archivio (vs 24 di .page--prodotto) */
/* Tab = componente .tabs riusato identico agli altri archivi (Prodotti/Progetti/Focus):
   strip squadrata, notch attivo attaccato al pannello. Nessun variant dedicato. */

/* coppia: due immagini quadrate affiancate (508 + 509, gap 12 = 1029) */
.blk-coppia { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.blk-coppia__item { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.blk-coppia__item .media__img { width: 100%; height: 100%; object-fit: cover; }

/* sezione: heading nella colonna testo (indent 259), numero opzionale + titolo + paragrafo */
.blk-sezione { padding-left: 259px; }
.blk-sezione__num {
    margin: 0 0 4px;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.44px;
    color: var(--pb-ink);
}
.blk-sezione__title {
    margin: 0;
    max-width: 723px;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.44px;
    color: var(--pb-ink);
}
.blk-sezione__body {
    margin: 15px 0 0;
    max-width: 613px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: var(--pb-text-muted);
}

/* stats: righe label / numero grande / unità, divisore in alto, colonne 0/257/570 */
.blk-stats__row {
    display: grid;
    grid-template-columns: 257px 313px 1fr;
    align-items: start;
    padding-top: 22px;
    min-height: 157px;
    border-top: 1px solid var(--pb-border);
}
.blk-stats__label {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}
.blk-stats__num {
    margin: 0;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1.6px;
    color: var(--pb-ink);
}
.blk-stats__unit {
    margin: 20px 0 0;
    max-width: 200px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.1px;
    color: var(--pb-text-muted);
}

/* timeline: riga = immagine landscape (508×264) + anno + testo (col dx, gap 100) */
.blk-timeline__row {
    display: grid;
    grid-template-columns: 508px 1fr;
    column-gap: 100px;
    align-items: center;
}
.blk-timeline__row + .blk-timeline__row { margin-top: 20px; }
.blk-timeline__media { display: block; aspect-ratio: 508 / 264; overflow: hidden; }
.blk-timeline__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.blk-timeline__year {
    margin: 0;
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.96px;
    color: var(--pb-ink);
}
.blk-timeline__desc {
    margin: 12px 0 0;
    max-width: 368px;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: -0.1px;
    color: var(--pb-text-muted);
}

/* intro Azienda: larghezza colonna come Figma (770). Produzione = testo lungo
   con corpo più piccolo (Figma: 3 righe, h132) → override solo su quel tab. */
.page--azienda .blk-intro__text { max-width: 770px; }
.page--az-produzione .blk-intro__text { font-size: 32px; line-height: 1.375; }

/* Spaziature verticali specifiche Azienda (override del 44px di default .editorial) */
.page--azienda .blk-intro { margin-top: 24px; }
.page--azienda .blk-divisore { margin-top: 36px; }
.page--azienda .blk-divisore + * { margin-top: 46px; }
.page--azienda .blk-sezione { margin-top: 90px; }
.page--azienda .blk-sezione + * { margin-top: 45px; }
.page--azienda .blk-immagine + .blk-coppia,
.page--azienda .blk-coppia + .blk-coppia { margin-top: 12px; }
.page--azienda .blk-stats + * { margin-top: 8px; }