/**
 * Stili pagina /personalizzazione (template `page-personalizzazione.php`).
 *
 * Riferimento canonico: `Servizio Personalizzazione/From Claude Design/
 * Personalizzazione v11 — Hero bianco + immagini reali.html`. Le sezioni di
 * questo file replicano lo stato finale risolto del file v11 (le cascate
 * legacy V1-V6 sono state collassate, non riportate).
 *
 * Scope: tutti i selettori sono incapsulati sotto `.dmt-page-personalizzazione`
 * per evitare bleed sulle altre pagine del tema. Le CSS custom properties della
 * pagina (--dark, --cream, --beige, --ink-cognac, ecc.) vivono qui — la
 * `style.css` globale non le definisce.
 *
 * Caricato condizionalmente da `inc/enqueue.php` solo se
 * `is_page( 'personalizzazione' )`.
 */

.dmt-page-personalizzazione {
    --dark: #000205;
    --cream: #F9E5CF;
    --cream-deep: #EBC9A4;
    --beige: #f1f2ec;
    --beige-deep: #e6e7df;
    --white: #ffffff;
    --separator: #dad9d4;
    --text-secondary: #565656;
    --ink-cognac: #7A4A2E;
    --ink-cognac-soft: #a36c4a;

    /* Texture carta — noise SVG riutilizzabile, opacità bassa.
       Applicata via .has-paper sulle sezioni che la richiedono. */
    --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0 0.09  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.32'/></svg>");
}

/* Texture carta sui blocchi che la richiedono (services, gallery, cta) */
.dmt-page-personalizzazione .has-paper { position: relative; isolation: isolate; }
.dmt-page-personalizzazione .has-paper::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--paper-noise);
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.dmt-page-personalizzazione .has-paper > * { position: relative; z-index: 1; }

/* Vincolo 140rem solo per la FAQ (vedi brief 1.ter — il footer del tema usa
   la stessa utility .max-width, romperebbe la sua larghezza se applicato
   globalmente). Gallery/products usano la utility default. */
.dmt-page-personalizzazione .section-faq .max-width {
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;
}

/* Bottoni hero (replica mockup — coabitano con il sistema tema globale) */
.dmt-page-personalizzazione .button {
    display: inline-block; padding: 1.4rem 3.2rem;
    font-family: var(--ff-default); font-size: 1.6rem; font-weight: 600;
    text-align: center; border-radius: 0; cursor: pointer;
    transition: all .25s; text-decoration: none; letter-spacing: 0.02em;
    line-height: 1; min-width: 0;
}
.dmt-page-personalizzazione .button-primary {
    background: var(--dark); color: var(--cream); border: 1px solid var(--dark);
}
.dmt-page-personalizzazione .button-primary:hover {
    background: transparent;
}
.dmt-page-personalizzazione .button-primary--inverted {
    background: var(--dark); color: var(--cream); border: 1px solid var(--dark);
}
/* Hover allineato alla "main CTA standard" del tema (vedi `.single_add_to_cart_button:hover`
   in `product-page-woocommerce-style.css`): solo schiaritura minima del nero, niente
   inversione di colori. Coerenza con add-to-cart scheda prodotto e CTA personalizza grid. */
.dmt-page-personalizzazione .button-primary--inverted:hover {
    background: #111418;
}
.dmt-page-personalizzazione .button-ghost {
    background: #fff; color: var(--dark); border: 1px solid var(--dark);
}
/* Hover allineato al tasto personalizza della scheda prodotto (vedi
   `.button.button-secondary.dmt-personalizza-cta:hover` in `product-page-woocommerce-style.css`):
   sfondo beige chiaro #f1f2ec, testo nero. Pattern "fill leggero" coerente. */
.dmt-page-personalizzazione .button-ghost:hover {
    background: #f1f2ec; color: #000205;
}
.dmt-page-personalizzazione .button-ghost--dark {
    background: transparent; color: var(--dark); border: 1px solid var(--dark);
}
.dmt-page-personalizzazione .button-ghost--dark:hover {
    background: var(--dark); color: var(--white);
}
.dmt-page-personalizzazione .button-secondary {
    background: var(--beige); color: var(--dark); border: 1px solid var(--dark);
}

.dmt-page-personalizzazione .section-cta#contattaci .button-secondary{background:#fff}

/* =============================================
   1. HERO — sfondo bianco + collage 6 img + pattern crocette full-bleed
   (decisione Cowork 29 apr sera: hero bianco, no beige)
============================================= */
.dmt-page-personalizzazione .hero--figma {
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 100vh;
    padding: 12rem 1.6rem 10rem;
    position: relative; overflow: hidden;
}
/* Halo radiale cognac al centro — sfuma la piattezza del bianco */
.dmt-page-personalizzazione .hero--figma::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 120rem; height: 120rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
        rgba(122, 74, 46, 0.10) 0%,
        rgba(122, 74, 46, 0.04) 30%,
        transparent 60%);
    pointer-events: none; z-index: 0;
}
/* Texture carta multiply su light */
.dmt-page-personalizzazione .hero--figma::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--paper-noise);
    background-size: 220px 220px;
    opacity: .35;
    mix-blend-mode: multiply;
    pointer-events: none; z-index: 0;
}
/* Pattern crocette full-bleed (continuità con CTA) */
.dmt-page-personalizzazione .hero-pattern {
    position: absolute;
    inset: -10%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.32 91.96'><path d='M7.08 1L4.04 4.03M4.04 4.03L1 7.06M4.04 4.03L7.08 7.06M4.04 4.03L1 1M35.24 46.98L32.20 50.01M32.20 50.01L29.16 53.04M32.20 50.01L35.24 53.04M32.20 50.01L29.16 46.98' stroke='%237A4A2E' stroke-width='0.6' fill='none'/></svg>");
    background-repeat: repeat;
    background-size: 3.6rem 5.8rem;
    transform: rotate(-6deg);
    transform-origin: center;
    opacity: .22;
    pointer-events: none;
    z-index: 1;
}
/* Anello bleed (rimosso su decisione utente, ma preservo classe per non rompere markup) */
.dmt-page-personalizzazione .hero-ring--bleed { display: none !important; }
/* Crocette top-left SVG (legacy) — disattivate, sostituite da .hero-pattern full-bleed */
.dmt-page-personalizzazione .hero-crosses--tl { display: none !important; }

.dmt-page-personalizzazione .hero--figma .hero-text {
    position: relative; z-index: 1; max-width: 80rem;
    overflow: hidden;
    /* Le foto hero (z-index 1) sotto al testo sono cliccabili → aprono il
       viewer. Lascio passare i click attraverso le aree del testo non
       interattive. CTA group resta cliccabile via override sotto. */
    pointer-events: none;
}
.dmt-page-personalizzazione .hero--figma .hero-text .hero-cta-group {
    pointer-events: auto;
}
.dmt-page-personalizzazione .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 1.2rem;
    font-family: var(--ff-default);
    font-size: 1.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 4px;
    line-height: 1.2;
    color: var(--ink-cognac);
    margin: 0;
}
.dmt-page-personalizzazione .hero-eyebrow::before,
.dmt-page-personalizzazione .hero-eyebrow::after {
    content: ''; display: block; width: 3.2rem; height: 1px;
    background: var(--ink-cognac); opacity: .55;
}
.dmt-page-personalizzazione .hero--figma h1 {
    font-size: 4rem; font-weight: 400; color: var(--dark);
    line-height: 1.15; margin-bottom: 2.4rem;max-width:48rem;margin-left:auto;margin-right: auto;
    font-family: var(--ff-heading);text-transform: uppercase;
}
.dmt-page-personalizzazione .hero--figma .hero-subtitle {
    font-size: 2.4rem; font-weight: 400; color: var(--dark);
    line-height: 1.3; opacity: .72; margin: 0 auto 3.2rem;
    max-width: 48rem; /* allineato a h1 default */
    font-family: var(--ff-default);
}
.dmt-page-personalizzazione .hero-collage {
    position: absolute; inset: 0; z-index: 1; overflow: hidden;
    background: #fff;
}
.dmt-page-personalizzazione .hero--figma .collage-img {
    position: absolute; width: 20%; max-width: 25rem;
    aspect-ratio: 4/5; object-fit: cover;
    box-shadow: 0 6px 28px rgba(0,0,0,0.18), 0 0 0 .6rem var(--cream);
    filter: sepia(.06) contrast(.96);
    background: var(--cream-deep);
}

.dmt-page-personalizzazione .hero--figma .collage-img{box-shadow: 0 6px 28px rgba(0,0,0,0.18);}

/* Rotazioni e scale estratte in custom property `--collage-rot` /
   `--collage-scale` per poter animare `transform` (rotate+scale) in entry
   senza sovrascriverle, e per variare proporzioni per immagine.
   Scale variabili (0.65-1.05) creano profondità: alcune foto "vicine"
   (scale ~1), altre "lontane" (scale ~.7). Liberano spazio nel layout
   per accogliere le posizioni extra 7 e 8 senza affollamento. */
.dmt-page-personalizzazione .hero--figma .collage-img {
    transform: rotate(var(--collage-rot, 0deg)) scale(var(--collage-scale, 1));
}
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(1) { top: 5%;    left: 5%;    width: 18%; --collage-rot: -5deg; --collage-scale: .92; }
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(2) { top: 15%;   right: 8%;   width: 15%; --collage-rot:  4deg; --collage-scale: 1.0; } /* hero-2 scale up */
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(3) { top: 45%;   left: -8%;   width: 20%; --collage-rot: -3deg; --collage-scale: .75; } /* hero-1 scale down */
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(4) { top: 55%;   right: 10%;  width: 16%; --collage-rot:  6deg; --collage-scale: .72; }
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(5) { bottom: 10%; left: 8%;   width: 19%; --collage-rot:  2deg; --collage-scale: .7; } /* hero-3 scale down */
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(6) { bottom: 8%; right: 5%;   width: 17%; --collage-rot: -4deg; --collage-scale: .85; display: none; }
/* 2 nuove immagini (decisione 2026-05-06): scale ridotte per non affollare.
   Posizione 7: estremo-sinistra-alto, sopra la 1.
   Posizione 8: estremo-destra-basso, sotto la 4 e sopra la 6.
   Visibili da ≥768px (tablet+desktop). */
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(7) { top: 30%;  left: 20%;   width: 13%; --collage-rot:  7deg; --collage-scale: .55; display: none; } /* hero-1 TEMP, scale down ulteriore */
.dmt-page-personalizzazione .hero--figma .collage-img:nth-child(8) { bottom: 28%; right: 22%; width: 14%; --collage-rot: -6deg; --collage-scale: .32; display: none; } /* hero-3 TEMP, scale down */

/* ==========================================================================
   Hero collage — entrance animation (desktop ≥768px) (2026-05-06)
   Adattamento del pattern telescope-replica-v3 (file Cowork). Niente blur
   per stay performante. Solo translate + scale + opacity con stagger
   individuale per immagine via custom property `--d`. Ogni immagine parte
   da una posizione offset (--tx/--ty) e arriva alla sua posizione finale.
   La scale finale moltiplica `--collage-scale` (per immagine, già definita
   sopra) — l'animazione preserva la profondità del collage.
   Trigger: classe `.is-in` aggiunta su `.hero-collage` via JS al window.load
   (vedi `initHeroEntrance` in dmt-personalizzazione-page.js).
   Su mobile (≤767px) non si applica: c'è già il marquee scrolling.
   ========================================================================== */

@media (min-width: 768px) {
    .dmt-page-personalizzazione .hero--figma .collage-img {
        opacity: 0;
        /* Stato iniziale: usa `--collage-rot-from` se definita (per nth-child
           2/4/5/7 — più drammatica), altrimenti fallback a `--collage-rot`
           (rotazione finale, niente cambio). */
        transform:
            translate3d(var(--tx, 0), var(--ty, 0), 0)
            rotate(var(--collage-rot-from, var(--collage-rot, 0deg)))
            scale(calc(var(--collage-scale, 1) * .78));
        will-change: transform, opacity;
        cursor: pointer; /* le img sono cliccabili: aprono il viewer hero */
        /* Easing allineato a hero-telescope-replica-v8 (ease-tile).
           Duration 2s (era 3s telescope) per stay snappier — su un
           e-commerce italiano artigianale 3s era troppo cinematografico. */
        transition:
            transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0s),
            opacity   1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0s);
    }

    .dmt-page-personalizzazione .hero--figma.is-in .collage-img {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            rotate(var(--collage-rot, 0deg))
            scale(var(--collage-scale, 1));
    }

    /* Hover desktop "pic": tilt opposto leggero (rotation invertita e
       attenuata al 40% via calc). Es. immagine -5deg → hover +2deg.
       Transition rapida .4s (override dei 2s di entrata, sennò hover
       lentissimo). Solo dopo che l'entrata è completata (.is-in attivo). */
    .dmt-page-personalizzazione .hero--figma.is-in .collage-img:hover {
        transform:
            translate3d(0, 0, 0)
            rotate(calc(var(--collage-rot, 0deg) * -0.4))
            scale(var(--collage-scale, 1));
        transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Rotation iniziale "drammatica" per 4 immagini su 8 (varietà). Le altre
       (1, 3, 6, 8) usano la rotation finale come iniziale (no rotation
       animata in entry, solo translate + scale). */
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(2) { --collage-rot-from:  18deg; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(4) { --collage-rot-from: -10deg; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(5) { --collage-rot-from:  15deg; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(7) { --collage-rot-from: -12deg; }

    /* Stagger + offset di approccio per ognuna delle 8 immagini.
       I valori --tx/--ty sono "da dove parte" (px da posizione finale).
       Direzioni distribuite per dare un effetto "convergenza" naturale. */
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(1) { --d: .20s; --tx:  60px; --ty:  30px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(2) { --d: .45s; --tx:   0px; --ty:  70px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(3) { --d: .30s; --tx: -20px; --ty:  80px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(4) { --d: .55s; --tx: -40px; --ty:  60px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(5) { --d: .65s; --tx: -60px; --ty:  50px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(6) { --d: .35s; --tx: -70px; --ty:   0px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(7) { --d: .40s; --tx:  30px; --ty: -70px; }
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(8) { --d: .50s; --tx: -30px; --ty: -50px; }
}

/* prefers-reduced-motion: skip animazione, stato finale immediato */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .hero--figma .collage-img {
        transition: none;
        opacity: 1;
        transform: rotate(var(--collage-rot, 0deg)) scale(var(--collage-scale, 1));
    }
}

/* ==========================================================================
   Hero text — entrance animation (tutti i breakpoint)
   Coordinata con l'animazione collage (scatenata dalla stessa classe
   `.hero--figma.is-in`). Cascata corta sui 4 figli: eyebrow → h1 →
   subtitle → cta-group. Stesso easing del collage per coerenza visiva.
   Funziona anche su mobile (il testo è statico in entrambi i breakpoint).
   ========================================================================== */

.dmt-page-personalizzazione .hero--figma .hero-text > * {
    opacity: 0;
    transform: translateY(75%);
    will-change: transform, opacity;
    /* Easing ease-out-expo classico (cubic-bezier(0.16, 1, 0.3, 1)) per
       entrata morbida fin dall'inizio. Duration 2s allineato a v8. */
    transition:
        transform 2s cubic-bezier(0.16, 1, 0.3, 1) var(--d-text, 0s),
        opacity   2s cubic-bezier(0.16, 1, 0.3, 1) var(--d-text, 0s);
}

.dmt-page-personalizzazione .hero--figma.is-in .hero-text > * {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger del testo — incrementi 0.25s tra elementi (più elevato del
   precedente 0.15s) per dare più cadenza alla cascata. */
.dmt-page-personalizzazione .hero--figma .hero-text > *:nth-child(1) { --d-text:    0s; }
.dmt-page-personalizzazione .hero--figma .hero-text > *:nth-child(2) { --d-text:  .25s; }
.dmt-page-personalizzazione .hero--figma .hero-text > *:nth-child(3) { --d-text:  .50s; }
.dmt-page-personalizzazione .hero--figma .hero-text > *:nth-child(4) { --d-text:  .75s; }

/* Animazione disabilitata per:
   - utenti con preferenza reduced-motion (a11y)
   - mobile ≤767px (decisione UX: copy hero subito leggibile, no entrance animata) */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
    .dmt-page-personalizzazione .hero--figma .hero-text > * {
        transition: none;
        opacity: 1;
        transform: none;
    }
}
/* Mobile: 3 immagini visibili (1, 4, 5) per evitare addensamento */
@media (max-width: 767px) {
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(2),
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(3) { display: none; }
}

@media (min-width: 1280px) {
    .dmt-page-personalizzazione .hero--figma h1 {
        font-size: 5.8rem; font-weight: 400; line-height: 1.2;
    }
    /* nth-child 6, 7, 8 visibili solo da ≥1280px: a viewport tablet (768-
       1279px) lo spazio non è sufficiente per 8 immagini senza affollamento
       (anche con scale ridotte). */
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(6),
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(7),
    .dmt-page-personalizzazione .hero--figma .collage-img:nth-child(8) { display: block; }
}

@media (min-width: 1920px) {
    .dmt-page-personalizzazione .hero--figma h1 {
        font-size: 6.4rem;
        max-width: 53rem;
    }
    .dmt-page-personalizzazione .hero--figma .hero-subtitle,
    .dmt-page-personalizzazione .hero-cta-group {
        max-width: 53rem;
    }
}
.dmt-page-personalizzazione .hero-cta-group {
    display: flex; flex-direction: column; gap: 1.2rem; align-items: center;
    /* max-width allineato a h1/subtitle (default 48rem). margin: 0 auto
       per centrare nel parent .hero-text. */
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
/* Mobile (<768px): bottoni full-width — il min-width: 38rem (~608px) era
   inadeguato sul viewport stretto, faceva traboccare i bottoni oltre il
   container. Su mobile è più sensato 100% rispetto al .hero-text padded. */
.dmt-page-personalizzazione .hero-cta-group .button { width: 100%; }
@media (min-width: 768px) {
    .dmt-page-personalizzazione .hero-cta-group {
        flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.6rem;
    }
    /* min-width 22rem: 2 bottoni + gap 1.6rem in 48rem = (48-1.6)/2 = 23.2rem
       per bottone → ridotto a 22 per restare su 1 riga. Era 34rem → forzava
       wrap a 2 righe nel container ridotto. */
    .dmt-page-personalizzazione .hero-cta-group .button { width: auto; min-width: 22rem; }
    .dmt-page-personalizzazione .hero-tertiary { margin-top: .4rem; }
}
.dmt-page-personalizzazione .hero-tertiary {
    display: inline-block;
    font-family: var(--ff-default);
    font-size: 1.4rem; color: var(--dark); opacity: .6;
    margin-top: 2rem;
    text-decoration: underline; text-underline-offset: .3rem;
}
.dmt-page-personalizzazione .hero-tertiary:hover { opacity: 1; }

/* =============================================
   2. TIMELINE — Come funziona (two-column 35/65 desktop, stack mobile)
============================================= */
.dmt-page-personalizzazione .section-howworks {
    padding: 6rem 0 4rem;
    background: var(--white);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 10rem;
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .section-howworks { scroll-margin-top: 12rem; }
}
.dmt-page-personalizzazione .hw-layout {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}
.dmt-page-personalizzazione .hw-section-heading { padding: 0; margin-bottom: 0; }
.dmt-page-personalizzazione .hw-section-heading .hw-eyebrow {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px;
    line-height: 1.2;
    color: var(--text-secondary);
    margin: 0 0 2.4rem;
}
.dmt-page-personalizzazione .section-howworks h2 {
    font-family: var(--ff-heading);
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    font-weight: 500;
    color: var(--dark);
    margin: 0;
    max-width: 40rem;
    text-transform: uppercase;
    line-height: 1.5;    
}
.dmt-page-personalizzazione .hw-image-col { display: none; } /* legacy column */
.dmt-page-personalizzazione .hw-timeline-col { padding: 0; }

.dmt-page-personalizzazione .tl-inner {
    position: relative;
    padding-left: 5.2rem;
}
.dmt-page-personalizzazione .tl-inner::after { display: none; }

.dmt-page-personalizzazione .tl-step {
    position: relative;
    padding-bottom: 2.4rem;
}
.dmt-page-personalizzazione .tl-step:last-child { padding-bottom: 0; }
/* Mobile: linea verticale tratteggiata per ogni step tranne l'ultimo
   (Decisione Cowork 29 apr sera: la linea va da -3.4rem dal bordo sx step,
   centro pallino: -5.2rem + 1.8rem raggio dot = -3.4rem) */
.dmt-page-personalizzazione .tl-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -3.4rem;
    top: 3.8rem;
    bottom: -.2rem;
    width: 1px;
    background-image: linear-gradient(to bottom, var(--ink-cognac) 0 4px, transparent 4px 8px);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    opacity: .5;
}
.dmt-page-personalizzazione .tl-dot-wrap {
    position: absolute;
    left: -5.2rem;
    top: .2rem;
    z-index: 2;
}
.dmt-page-personalizzazione .tl-dot {
    width: 3.6rem; height: 3.6rem;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--ink-cognac);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 var(--ink-cognac);
}
.dmt-page-personalizzazione .tl-num {
    display: flex; align-items: center; justify-content: center; line-height: 0;
}
.dmt-page-personalizzazione .tl-num svg { width: 2rem; height: 2rem; fill: var(--dark); }

.dmt-page-personalizzazione .tl-box { padding: 0; position: relative; }
.dmt-page-personalizzazione .tl-label {
    font-family: var(--ff-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 5.6rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink-cognac);
    opacity: .35;
    margin-bottom: .8rem;
}
.dmt-page-personalizzazione .tl-step h3 {
    font-family: var(--ff-default);
    font-size: 1.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    line-height: 1.3; color: var(--dark);
    margin-bottom: .6rem;
}
.dmt-page-personalizzazione .tl-step p {
    font-family: var(--ff-default);
    font-size: 1.8rem; font-weight: 500;
    color: var(--text-secondary); line-height: 1.35;
    margin: 0;
    text-align: left;
}

/* Tablet+: two-column esterno + timeline orizzontale interna */
@media (min-width: 768px) {
    .dmt-page-personalizzazione .section-howworks { padding: 7rem 0 6rem; }
    .dmt-page-personalizzazione .hw-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.4rem;
    }
    .dmt-page-personalizzazione .hw-section-heading {
        width: calc(35% - 1.2rem);
        flex-shrink: 0;
        padding-right: 0;
    }
    .dmt-page-personalizzazione .hw-timeline-col {
        width: calc(65% - 1.2rem);
        flex-shrink: 0;
    }
    .dmt-page-personalizzazione .tl-inner {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        padding-left: 0;
    }
    /* Desktop: linea orizzontale unica sul container, nascondo le verticali per-step */
    .dmt-page-personalizzazione .tl-step:not(:last-child)::before { display: none; }
    .dmt-page-personalizzazione .tl-inner::after {
        display: block;
        content: '';
        position: absolute;
        background-image: linear-gradient(to right, var(--ink-cognac) 0 4px, transparent 4px 8px);
        background-size: 8px 1px;
        background-repeat: repeat-x;
        opacity: .5;
        top: 1.8rem;
        left: 1.8rem;
        right: calc(25% - 3.3rem);
        bottom: auto;
        height: 1px;
        width: auto;
    }
    .dmt-page-personalizzazione .tl-step {
        flex: 1;
        min-width: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
    .dmt-page-personalizzazione .tl-dot-wrap {
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: .4rem;
    }
    /* .dmt-page-personalizzazione .tl-step h3 { font-size: 1.8rem; } */
    .dmt-page-personalizzazione .tl-step p { font-size: 1.8rem; }
}
@media (min-width: 1280px) {
    .dmt-page-personalizzazione .section-howworks { padding: 4.4rem 0 7rem; }
    .dmt-page-personalizzazione .tl-inner { gap: 2.4rem; }
    .dmt-page-personalizzazione .tl-inner::after { right: calc(25% - 3.6rem); }
    /* .dmt-page-personalizzazione .tl-step h3 { font-size: 1.9rem; } */
    /* .dmt-page-personalizzazione .tl-step p { font-size: 1.5rem; } */
}

/* Animazioni stagger reveal */
.dmt-page-personalizzazione .tl-dot-wrap {
    opacity: 0;
    transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
    transform: scale(.7);
}
.dmt-page-personalizzazione .tl-box {
    opacity: 0;
    transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1);
    transform: translateY(1rem);
}
.dmt-page-personalizzazione .tl-dot-wrap.is-visible { opacity: 1; transform: scale(1); }
.dmt-page-personalizzazione .tl-box.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .tl-dot-wrap,
    .dmt-page-personalizzazione .tl-box {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* =============================================
   3. SERVICES — Editorial list svc-row + cursor follower (V7 / Claude Design)
   sostituisce le card grid del mockup-unificato
============================================= */
.dmt-page-personalizzazione .services {
    padding: 8.8rem 0;
    background: var(--beige);
    position: relative;
    overflow: visible;
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .services { padding: 12.8rem 0; }
}
/* Cerchi decorativi services rimossi su decisione utente */
.dmt-page-personalizzazione .services-circle { display: none !important; }

/* Container — niente max-width restrittivo (decisione Cowork 29 apr sera) */
.dmt-page-personalizzazione .container-services {
    width: 100%;
    padding: 0 1.6rem;
    margin: 0 auto;
}
@media (min-width: 1280px) {
    .dmt-page-personalizzazione .container-services { padding: 0 4.8rem; }
}

.dmt-page-personalizzazione .services-header {
    text-align: center;
    margin-bottom: 8.8rem;
}
.dmt-page-personalizzazione .services-header .label {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px;
    line-height: 1.2;
    color: var(--text-secondary);
    margin: 0 0 2.4rem;
}
.dmt-page-personalizzazione .services-header h2 {
    font-family: var(--ff-heading);
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--dark);
    margin: 0 auto;
    text-transform: uppercase;       
    max-width: 50rem;    
}

/* Services list — niente max-width (decisione Cowork) */
.dmt-page-personalizzazione .services-list { position: relative; }

.dmt-page-personalizzazione .svc-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem 0;
    padding: 3.2rem 0;
    position: relative;
    transition: opacity .35s ease, border-color .4s ease;
    border-top: 1px solid #dad9d4;
}
.dmt-page-personalizzazione .svc-row:last-of-type {
    border-bottom: 1px solid #dad9d4;
}

/* -----------------------------------------------------------------------------
   Animation entry — reveal staggered su scroll (IntersectionObserver in JS).
   Stato iniziale: figli invisibili + traslati in basso. La row applica
   `.is-visible` quando il JS osserva l'entrata in viewport. Stagger interno
   via `transition-delay` sui figli (roman → title → desc → media).
--------------------------------------------------------------------------- */
.dmt-page-personalizzazione .svc-row > .svc-row__roman,
.dmt-page-personalizzazione .svc-row > .svc-row__title-block,
.dmt-page-personalizzazione .svc-row > .svc-row__desc-block,
.dmt-page-personalizzazione .svc-row > .svc-row__media {
    opacity: 0;
    transform: translateY(1.8rem);
    transition: opacity .8s cubic-bezier(.19, 1, .22, 1), transform .8s cubic-bezier(.19, 1, .22, 1);
}
.dmt-page-personalizzazione .svc-row.is-visible > .svc-row__roman    { transition-delay: .15s; opacity: 1; transform: none; }
.dmt-page-personalizzazione .svc-row.is-visible > .svc-row__title-block { transition-delay: .25s; opacity: 1; transform: none; }
.dmt-page-personalizzazione .svc-row.is-visible > .svc-row__desc-block  { transition-delay: .35s; opacity: 1; transform: none; }
.dmt-page-personalizzazione .svc-row.is-visible > .svc-row__media       { transition-delay: .45s; opacity: 1; transform: none; }

/* JS-pre-hydration safety: prima che il JS giri, le row sono già nascoste
   sopra. Se il JS è disabilitato/fallisce, dopo 1s revealiamo via fallback CSS
   (rimuoviamo lo stato iniziale forzando la visibilità). */
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .svc-row > .svc-row__roman,
    .dmt-page-personalizzazione .svc-row > .svc-row__title-block,
    .dmt-page-personalizzazione .svc-row > .svc-row__desc-block,
    .dmt-page-personalizzazione .svc-row > .svc-row__media {
        opacity: 1; transform: none; transition: none;
    }
}
.dmt-page-personalizzazione .svc-row__roman {
    font-family: var(--ff-default);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: .04em;
    line-height: 1;
    text-align: right;
}
.dmt-page-personalizzazione .svc-row__title {
    font-size: clamp(2.6rem, 3.4vw, 3.4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--dark);
    margin: 0 0 .9rem;
}
.dmt-page-personalizzazione .svc-row__eyebrow {
    display: block;
    font-family: var(--ff-default);
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    margin: 0;
    color: var(--ink-cognac);
    opacity: .70;
}
.dmt-page-personalizzazione .svc-row__desc {
    font-family: var(--ff-default);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dark);
    margin: 0;
}
/* Mobile: immagine inline (portrait 4/5) sotto titolo */
.dmt-page-personalizzazione .svc-row__media {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--cream);
    overflow: hidden;
    margin-top: .4rem;
}
.dmt-page-personalizzazione .svc-row__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Cursor follower — visibile solo desktop con pointer fine, attivato da JS */
.dmt-page-personalizzazione .svc-cursor {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 22rem;
    aspect-ratio: 4/5;
    pointer-events: none;
    z-index: 50;
    transform: translate3d(-9999px, -9999px, 0);
    opacity: 0;
    transition: opacity .35s ease;
    will-change: transform, opacity;
}
.dmt-page-personalizzazione .svc-cursor__inner {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--cream);
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,.22);
    /* Rotazione dipendente dall'item hovered (classi `.is-svc-0|1|2` aggiunte
       dal JS sull'`.svc-cursor` outer al mouseenter di ogni .svc-row).
       Range molto stretto (1.5° tra min e max) + easing ease-in-out cubico
       morbido — variazione percepibile ma quasi senza "scatto" tra row. */
    --cursor-rotate: 3deg;
    transform: rotate(var(--cursor-rotate));
    transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.dmt-page-personalizzazione .svc-cursor.is-svc-0 .svc-cursor__inner { --cursor-rotate: -2deg; }
.dmt-page-personalizzazione .svc-cursor.is-svc-1 .svc-cursor__inner { --cursor-rotate:  3deg; }
.dmt-page-personalizzazione .svc-cursor.is-svc-2 .svc-cursor__inner { --cursor-rotate: -1deg; }
.dmt-page-personalizzazione .svc-cursor__inner img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}
.dmt-page-personalizzazione .svc-cursor__inner img.is-active { opacity: 1; }

@media (min-width: 768px) {
    .dmt-page-personalizzazione .svc-row {
        grid-template-columns: 6rem 1.5fr 1fr;
        gap: 0 4rem;
        align-items: start;
        padding: 4rem 0;
        cursor: default;
    }
    .dmt-page-personalizzazione .svc-row__roman { padding-top: .9rem;text-align: left; }
    .dmt-page-personalizzazione .svc-row__media { display: none; }
    .dmt-page-personalizzazione .svc-row__eyebrow{margin-bottom:2.4rem}    
    .dmt-page-personalizzazione .svc-row__desc{margin:0 auto;font-size:2.1rem;line-height: 1.35;font-weight:400;max-width: 24rem;}


    /* Cursor-follower behavior: dimm le altre row in hover */
    .dmt-page-personalizzazione .services-list:hover .svc-row { opacity: .35; }
    .dmt-page-personalizzazione .services-list .svc-row:hover { opacity: 1; }
    .dmt-page-personalizzazione .svc-cursor.is-enabled { display: block; }
    .dmt-page-personalizzazione .svc-cursor.is-visible { opacity: 1; }

    /* -----------------------------------------------------------------------
       Microinterazione hover (solo desktop hover-capable, dopo entry reveal).
       Roman scala leggermente, title shifta a destra, eyebrow recupera opacità,
       border-top diventa cognac. Tutto su transition condivisa con la row.
    -------------------------------------------------------------------------- */
    .dmt-page-personalizzazione .svc-row__roman,
    .dmt-page-personalizzazione .svc-row__title,
    .dmt-page-personalizzazione .svc-row__eyebrow {
        transition: transform .4s cubic-bezier(.19, 1, .22, 1),
                    color .35s ease,
                    opacity .35s ease;
    }
    .dmt-page-personalizzazione .services-list .svc-row:hover {
        border-top-color: var(--ink-cognac);
    }
    .dmt-page-personalizzazione .services-list .svc-row:hover .svc-row__roman {
        transform: scale(1.12);
        color: var(--ink-cognac);
    }
    .dmt-page-personalizzazione .services-list .svc-row:hover .svc-row__title {
        transform: translateX(.6rem);
    }
    .dmt-page-personalizzazione .services-list .svc-row:hover .svc-row__eyebrow {
        opacity: 1;
    }
}
@media (min-width: 1100px) {
    .dmt-page-personalizzazione .svc-row {
        grid-template-columns: 7rem 1.7fr 1fr;
        gap: 0 5rem;
        padding: 4.8rem 0;
    }
    .dmt-page-personalizzazione .svc-cursor { width: 30rem; }
}
@media (min-width: 1400px) {
    .dmt-page-personalizzazione .svc-row {
        grid-template-columns: 8rem 2fr 1fr;
        gap: 0 6rem;
    }
    .dmt-page-personalizzazione .svc-cursor { width: 36rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .svc-cursor,
    .dmt-page-personalizzazione .svc-cursor__inner img { transition: none !important; }
}

.dmt-page-personalizzazione .services-price-global {
    text-align: center;
    margin-top: 3.2rem;
    font-family: var(--ff-default);
    font-size: 1.5rem; font-weight: 500;
    color: var(--text-secondary);
}
.dmt-page-personalizzazione .services-price-global strong {
    color: var(--dark); font-weight: 700;
}

/* =============================================
   4. PRODOTTI PERSONALIZZABILI — Griglia con pill filter + badge cognac
============================================= */
.dmt-page-personalizzazione .section-products {
    padding: 8rem 0;
    background: var(--white);
    scroll-margin-top: 10rem;
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .section-products { scroll-margin-top: 12rem; }
}
.dmt-page-personalizzazione .section-products .products-header {
    padding: 0 1.6rem;
    margin-bottom: 1.2rem;max-width: 66rem;
}
.dmt-page-personalizzazione .section-products h2 {
    font-family: var(--ff-heading);
    font-size: clamp(2.4rem, 2.2vw, 3.2rem);
    font-weight: 500;
    color: var(--dark);
    margin: 0 0 1.6rem;
    text-transform: uppercase;
    line-height: 1.2;
}
.dmt-page-personalizzazione .section-products .section-sub {
    font-family: var(--ff-default);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--dark);
    line-height: 1.3;
    opacity: .85;
    margin: 0 0 3.2rem;
}

.dmt-page-personalizzazione .pill-filters {
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: .8rem;
    padding: 2.4rem 1.6rem 0;
    margin-bottom: 0;
}
.dmt-page-personalizzazione .pill-filter {
    font-family: var(--ff-default);
    font-size: 1.4rem; font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--separator);
    padding: .6rem 1.8rem;
    cursor: pointer;
    transition: all .2s ease;
    letter-spacing: .3px;
    border-radius: 0;text-transform: uppercase;
}
.dmt-page-personalizzazione .pill-filter:hover {
    border-color: var(--dark); color: var(--dark);
}
.dmt-page-personalizzazione .pill-filter.active {
    background: var(--dark); color: var(--cream);
    border-color: var(--dark);
}

/* Products grid — replica del pattern theme archive */
.dmt-page-personalizzazione .products-grid {
    display: flex; flex-wrap: wrap;
    gap: .8rem;row-gap: 3.2rem;
    padding: 3.2rem 1.6rem 4.4rem;
    margin: 0;
    list-style: none;
}
.dmt-page-personalizzazione .products-grid li {
    list-style: none;
    width: calc(50% - .4rem);
    transition: opacity .3s ease, transform .3s ease;
}
.dmt-page-personalizzazione .products-grid li.hidden { display: none; }

/* Card prodotto: niente overflow sul wrapper esterno (info + CTA possono
   respirare). L'overflow: hidden è LOCALE al `.card-product__media` — è quello
   che fa da "cornice fissa" entro cui l'immagine può zoomare senza coprire
   né info né CTA sottostanti. */
.dmt-page-personalizzazione .card-product {
    width: 100%;
    display: block;
    position: relative;
}
.dmt-page-personalizzazione .card-product__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--beige-deep);
}
.dmt-page-personalizzazione .card-product__media img,
.dmt-page-personalizzazione .card-product .card-product-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Transizione premium: durata lunga (1.2s) + easing expo-out
       (cubic-bezier(.19,1,.22,1)) — partenza rapida, decelerazione
       drammatica. Pattern Aesop/Cubitts. Origin centro-basso enfatizza
       il punto focale del papillon (tipicamente basso-centro) facendo
       "crescere verso l'alto" l'immagine invece di simmetricamente. */
    transform-origin: center 65%;
    transition: transform 1.2s cubic-bezier(.19,1,.22,1);
    will-change: transform;
}
/* .dmt-page-personalizzazione .card-product:hover .card-product__media img {
    transform: scale(1.06);
} */
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .card-product__media img { transition: none; }
    /* .dmt-page-personalizzazione .card-product:hover .card-product__media img { transform: none; } */
}
.dmt-page-personalizzazione .card-product .card-info { padding: .8rem 0 0; }
.dmt-page-personalizzazione .card-product .card-title {
    font-family: var(--ff-default);
    font-size: 1.6rem; font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 .2rem; line-height: 1.2;
    color: var(--dark);
}
.dmt-page-personalizzazione .card-product .card-price {
    display: block;
    font-family: var(--ff-default);line-height: 1;
    font-size: 1.6rem; font-weight: 500;
    margin-top: .2rem;
    color: var(--dark);
}
/* Nota "+ €5 con personalizzazione" inline dentro `.card-price` — informazione
   critica accanto al prezzo per evitare la frizione "vedo prezzo card →
   arrivo a scheda prodotto, sorpresa". Inline (non block) per fondersi
   visivamente col prezzo come continuazione, peso ridotto per gerarchia. */
.dmt-page-personalizzazione .card-product .card-price-note {
    margin-left: .4rem;
    font-family: var(--ff-default);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .2px;
}
.dmt-page-personalizzazione .card-product .card-price-note__plus {
    font-size: 2.4rem; /* relativo a card-price-note */
    font-weight: 500;
    line-height: 1;
    vertical-align: -1px; /* compensa il leggero shift verso l'alto del + più grande */
}
/* Badge cognac top-left dell'immagine */
.dmt-page-personalizzazione .card-product .card-type-badge {
    position: absolute;
    top: .8rem; left: .8rem;
    font-family: var(--ff-default);
    font-size: 1.4rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ink-cognac);    
    padding: .3rem .8rem;
    z-index: 2;
    border: 1px solid var(--ink-cognac);    
}

/* CTA dual: Personalizza + Vedi dettagli */
.dmt-page-personalizzazione .card-cta-wrap {
    display: flex; flex-direction: column;
    gap: .6rem; margin-top: 1.6rem;
}
.dmt-page-personalizzazione .card-cta-primary {
    display: block; width: 100%; text-align: center;
    padding: .8rem 1.6rem;
    font-family: var(--ff-default);
    font-size: 1.4rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    background: var(--dark); color: var(--white);
    border: 1px solid var(--dark);
    cursor: pointer; transition: background-color .3s;
    text-decoration: none; line-height: 1; border-radius: 0;
}
.dmt-page-personalizzazione .card-cta-primary:hover {
    background: #111418;
}
.dmt-page-personalizzazione .card-cta-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .8rem 1.6rem;
    font-family: var(--ff-default);
    font-size: 1.4rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    background: transparent; color: var(--dark);
    border: 1px solid var(--dark);
    cursor: pointer;
    text-decoration: none; line-height: 1; border-radius: 0;
}
/* Freccia come pseudo-elemento per poterla animare in modo indipendente
   dal testo. Shift di .4rem a destra al hover, easing morbido. */
.dmt-page-personalizzazione .card-cta-secondary::after {
    content: '\2192'; /* → */
    display: inline-block;
    transition: transform .35s cubic-bezier(.19, 1, .22, 1);
}
.dmt-page-personalizzazione .card-cta-secondary:hover::after {
    transform: translateX(.4rem);
}

@media (min-width: 768px) {
    .dmt-page-personalizzazione .section-products .section-sub { margin-bottom: 0; }
    .dmt-page-personalizzazione .section-products .products-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 1.6rem;
        margin-bottom: 0;
    }
    .dmt-page-personalizzazione .section-products .products-top .products-header {
        padding: 0; margin-bottom: 0; text-align: left; flex: 1;
    }
    .dmt-page-personalizzazione .section-products .products-top .pill-filters {
        padding: 0; margin-bottom: 0; justify-content: flex-end;
    }

    .dmt-page-personalizzazione .card-product .card-type-badge{top: 1.6rem; left: 1.6rem;} 

}
@media (min-width: 992px) {
    .dmt-page-personalizzazione .products-grid { gap: 1.6rem; }
    .dmt-page-personalizzazione .products-grid li {
        width: calc((100% - 2 * 1.6rem) / 3);
    }
    /* Desktop: side-by-side CTAs */
    .dmt-page-personalizzazione .card-cta-wrap {
        flex-direction: row; gap: .8rem;
    }
    .dmt-page-personalizzazione .card-cta-primary{ width: auto; flex: 1; }
    .dmt-page-personalizzazione .card-cta-secondary { width: auto; }
}
@media (min-width: 1280px) {
    .dmt-page-personalizzazione .section-products .products-top { padding: 0 4.8rem; }
    .dmt-page-personalizzazione .products-grid {
        padding: 3.2rem 4.8rem 4.4rem; gap: 2.4rem;row-gap: 4.8rem;
    }
    .dmt-page-personalizzazione .products-grid li {
        width: calc((100% - 3 * 2.4rem) / 4);
    }
}

/* =============================================
   5. GALLERY — Masonry CSS columns + lightbox custom
============================================= */
.dmt-page-personalizzazione .section-gallery {
    padding: 8rem 0;
    background: var(--dark);
    overflow: hidden;
}
.dmt-page-personalizzazione .section-gallery .gallery-header {
    margin-bottom: 3.2rem;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1.6rem; flex-wrap: wrap;
}
.dmt-page-personalizzazione .section-gallery h2 {
    font-family: var(--ff-heading);
    font-size: clamp(2.4rem, 2.2vw, 3.2rem);
    font-weight: 500;
    color: var(--cream);
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

/* CTA "Apri galleria" — visibile su tutti i breakpoint, allineata in basso
   al titolo via `align-items: flex-end` del .gallery-header. Su mobile,
   `flex-wrap: wrap` del .gallery-header lascia che il bottone vada a capo
   sotto il titolo se lo spazio è insufficiente. */
.dmt-page-personalizzazione .section-gallery .gallery-header__open {
    flex-shrink: 0;
    padding: 1rem 1.8rem;
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--cream);
    border-radius: 0;
    font-family: var(--ff-default);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.dmt-page-personalizzazione .section-gallery .gallery-header__open:hover,
.dmt-page-personalizzazione .section-gallery .gallery-header__open:focus-visible {
    background: var(--cream);
    color: var(--dark);
    outline: none;
}

.dmt-page-personalizzazione .gallery-masonry {
    column-count: 2;
    column-gap: .8rem;
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .gallery-masonry {
        column-count: 3; column-gap: 1.2rem;
    }
}
@media (min-width: 1280px) {
    .dmt-page-personalizzazione .gallery-masonry {
        column-count: 4; column-gap: 1.6rem;
    }
}
.dmt-page-personalizzazione .masonry-item {
    break-inside: avoid;
    margin: 0 0 .8rem;
    overflow: hidden;
    cursor: pointer;
    background: var(--beige);
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .masonry-item { margin-bottom: 1.2rem; }
}
@media (min-width: 1280px) {
    .dmt-page-personalizzazione .masonry-item { margin-bottom: 1.6rem; }
}
.dmt-page-personalizzazione .masonry-item img {
    width: 100%; height: auto; display: block;
    transition: transform .4s ease, opacity .25s ease;
}
.dmt-page-personalizzazione .masonry-item:hover img { transform: scale(1.03); }

/* -----------------------------------------------------------------------------
   3.PG.b §3.9 — Override Block Gallery di Gutenberg
   WP 6.9 renderizza:
     <figure class="wp-block-gallery has-nested-images is-cropped is-layout-flex …">
       <figure class="wp-block-image size-large"> <img/> </figure>
       …
     </figure>
   Il `column-count` masonry sta SUL `.gallery-masonry` (regola legacy 3.PG.a).
   Il `.wp-block-gallery` deve essere SOLO un wrapper trasparente — `display:contents`
   farebbe svanire il box dal layout, ma WP gli applica regole core con flex/grid
   che dobbiamo annullare. Lo rendiamo un `display:block` che NON crea proprio
   contesto di colonna (niente column-count qui!) e lascia che siano i `figure.wp-block-image`
   figli a essere distribuiti dal `column-count` del NONNO `.gallery-masonry`.
--------------------------------------------------------------------------- */
body .dmt-page-personalizzazione .gallery-masonry > .wp-block-gallery,
body .dmt-page-personalizzazione .gallery-masonry > .wp-block-gallery.has-nested-images,
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery,
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images {
    display: contents !important;
}
/* Selettore specifico anche per `:first-child:last-child` (caso "una sola immagine"
   che WP regge con `width: 100%`). Uso `:where()` per non aumentare la specificità
   ulteriormente — le mie regole con `body .dmt-page-personalizzazione` ce l'hanno già */
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery .wp-block-image,
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image,
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:last-child {
    break-inside: avoid !important;
    margin: 0 0 .8rem !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    display: block !important;
    overflow: hidden;
    background: var(--beige);
}
@media (min-width: 768px) {
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery .wp-block-image,
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image,
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:last-child { margin-bottom: 1.2rem !important; }
}
@media (min-width: 1280px) {
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery .wp-block-image,
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image,
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
    body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:last-child { margin-bottom: 1.6rem !important; }
}
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery .wp-block-image img,
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    object-fit: cover;
    transition: transform .4s ease, opacity .25s ease;
}
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery .wp-block-image:hover img { transform: scale(1.03); }
body .dmt-page-personalizzazione .gallery-masonry .wp-block-gallery figcaption { display: none !important; }

/* -----------------------------------------------------------------------------
   Viewer overlay (lightbox custom — replica mockup)
   Selettori scoped a `.dmt-page-personalizzazione` (markup nel template) E a
   `body > .gallery-viewer` (eventuale re-parent sul body — no-op se non usato).
--------------------------------------------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer,
body > .gallery-viewer {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 2, 5, .94);
    z-index: 100;
    justify-content: center; align-items: center;
    cursor: zoom-out;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease-out;
}
.dmt-page-personalizzazione .gallery-viewer.is-open,
body > .gallery-viewer.is-open { display: flex; opacity: 1; }

.dmt-page-personalizzazione .gallery-viewer img,
body > .gallery-viewer img {
    max-width: 90vw; max-height: 85vh;
    object-fit: contain;
    cursor: default;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
    animation: dmtViewerImgIn .35s cubic-bezier(.19, 1, .22, 1) both;
}

@keyframes dmtViewerImgIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* -- Controlli (close + nav prev/next) -------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__close,
.dmt-page-personalizzazione .gallery-viewer__nav,
body > .gallery-viewer .gallery-viewer__close,
body > .gallery-viewer .gallery-viewer__nav {
    position: absolute;
    /* z-index: 2 sopra l'img (che ha animation con transform → stacking
       context). Senza questo, su mobile nav-prev (DOM PRIMA dell'img)
       finiva visivamente sotto la foto. Allineato a counter e thumbs
       che hanno già z-index: 2. */
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 4.8rem; height: 4.8rem;
    padding: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: var(--white);
    font-family: var(--ff-default);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.dmt-page-personalizzazione .gallery-viewer__close:hover,
.dmt-page-personalizzazione .gallery-viewer__nav:hover,
body > .gallery-viewer .gallery-viewer__close:hover,
body > .gallery-viewer .gallery-viewer__nav:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
}
.dmt-page-personalizzazione .gallery-viewer__close:focus-visible,
.dmt-page-personalizzazione .gallery-viewer__nav:focus-visible,
body > .gallery-viewer .gallery-viewer__close:focus-visible,
body > .gallery-viewer .gallery-viewer__nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 3px;
}
.dmt-page-personalizzazione .gallery-viewer__close:active,
.dmt-page-personalizzazione .gallery-viewer__nav:active,
body > .gallery-viewer .gallery-viewer__close:active,
body > .gallery-viewer .gallery-viewer__nav:active { transform: scale(.94); }

/* -- Icone SVG (Phosphor) dentro i controlli ------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__close svg,
.dmt-page-personalizzazione .gallery-viewer__nav svg,
body > .gallery-viewer .gallery-viewer__close svg,
body > .gallery-viewer .gallery-viewer__nav svg {
    display: block;
    width: 60%; height: 60%;
    pointer-events: none;
}

/* -- Close (X) -------------------------------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__close,
body > .gallery-viewer .gallery-viewer__close {
    top: 2rem; right: 2rem;
}

/* -- Nav prev/next ---------------------------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__nav,
body > .gallery-viewer .gallery-viewer__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 5.6rem; height: 5.6rem;
}
.dmt-page-personalizzazione .gallery-viewer__nav:active,
body > .gallery-viewer .gallery-viewer__nav:active { transform: translateY(-50%) scale(.94); }
.dmt-page-personalizzazione .gallery-viewer__nav--prev,
body > .gallery-viewer .gallery-viewer__nav--prev { left: 2.4rem; }
.dmt-page-personalizzazione .gallery-viewer__nav--next,
body > .gallery-viewer .gallery-viewer__nav--next { right: 2.4rem; }

/* -- Mobile tweaks ---------------------------------------------------------- */
@media (max-width: 600px) {
    .dmt-page-personalizzazione .gallery-viewer__close,
    body > .gallery-viewer .gallery-viewer__close { top: 1.2rem; right: 1.2rem; width: 4rem; height: 4rem; }
    /* Frecce mobile: più visibili sopra foto orizzontali chiare. Aumento
       opacità background (.08 → .4) + border (.18 → .35) + aggiungo
       backdrop-filter blur (effetto glass). Dimensione ridotta a 3.6rem
       per compensare il maggior contrasto e restare poco ingombranti. */
    .dmt-page-personalizzazione .gallery-viewer__nav,
    body > .gallery-viewer .gallery-viewer__nav {
        width: 3.6rem; height: 3.6rem; font-size: 2.4rem;
        background: rgba(255, 255, 255, .4);
        border-color: rgba(255, 255, 255, .35);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .dmt-page-personalizzazione .gallery-viewer__nav:hover,
    body > .gallery-viewer .gallery-viewer__nav:hover {
        background: rgba(255, 255, 255, .55);
        border-color: rgba(255, 255, 255, .55);
    }
    .dmt-page-personalizzazione .gallery-viewer__nav--prev,
    body > .gallery-viewer .gallery-viewer__nav--prev { left: 1rem; }
    .dmt-page-personalizzazione .gallery-viewer__nav--next,
    body > .gallery-viewer .gallery-viewer__nav--next { right: 1rem; }
    .dmt-page-personalizzazione .gallery-viewer img,
    body > .gallery-viewer img { max-width: 96vw; max-height: 78vh; }
}

/* -- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .gallery-viewer,
    body > .gallery-viewer { transition: none; }
    .dmt-page-personalizzazione .gallery-viewer img,
    body > .gallery-viewer img { animation: none; }
    .dmt-page-personalizzazione .gallery-viewer__close,
    .dmt-page-personalizzazione .gallery-viewer__nav,
    body > .gallery-viewer .gallery-viewer__close,
    body > .gallery-viewer .gallery-viewer__nav { transition: none; }
}

/* -- Counter "X / Y" (top-center) ------------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__counter,
body > .gallery-viewer .gallery-viewer__counter {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: .6rem 1.4rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: var(--ff-default);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .05em;
    border-radius: 999px;
    pointer-events: none; /* il counter non blocca i click di chiusura sull'overlay */
    user-select: none;
}

/* -- Thumbnails strip (bottom) ---------------------------------------------- */
.dmt-page-personalizzazione .gallery-viewer__thumbs,
body > .gallery-viewer .gallery-viewer__thumbs {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .8rem;
    max-width: calc(100vw - 3.2rem);
    padding: .8rem 1rem;
    background: rgba(0, 0, 0, .45);
    border-radius: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Hide scrollbar (cosmetico) — il scroll funziona via touch/swipe/wheel */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.4) transparent;
    -webkit-overflow-scrolling: touch;
}
.dmt-page-personalizzazione .gallery-viewer__thumbs::-webkit-scrollbar,
body > .gallery-viewer .gallery-viewer__thumbs::-webkit-scrollbar {
    height: 4px;
}
.dmt-page-personalizzazione .gallery-viewer__thumbs::-webkit-scrollbar-thumb,
body > .gallery-viewer .gallery-viewer__thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .35);
    border-radius: 2px;
}

.dmt-page-personalizzazione .gallery-viewer__thumb,
body > .gallery-viewer .gallery-viewer__thumb {
    flex-shrink: 0;
    width: 5.2rem;
    height: 5.2rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: .4rem;
    background-color: rgba(255, 255, 255, .08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease, transform .15s ease;
    /* Reset bottone */
    font: inherit;
    color: inherit;
}
.dmt-page-personalizzazione .gallery-viewer__thumb:hover,
.dmt-page-personalizzazione .gallery-viewer__thumb:focus-visible,
body > .gallery-viewer .gallery-viewer__thumb:hover,
body > .gallery-viewer .gallery-viewer__thumb:focus-visible {
    opacity: .85;
    outline: none;
}
.dmt-page-personalizzazione .gallery-viewer__thumb.is-active,
body > .gallery-viewer .gallery-viewer__thumb.is-active {
    opacity: 1;
    border-color: #fff;
    transform: translateY(-2px);
}
.dmt-page-personalizzazione .gallery-viewer__thumb:focus-visible,
body > .gallery-viewer .gallery-viewer__thumb:focus-visible {
    box-shadow: 0 0 0 2px var(--ink-cognac, #7A4A2E);
}

/* Mobile: thumbs più piccoli, counter più stretto, padding ridotti */
@media (max-width: 600px) {
    .dmt-page-personalizzazione .gallery-viewer__counter,
    body > .gallery-viewer .gallery-viewer__counter {
        top: 1.2rem;
        font-size: 1.3rem;
        padding: .5rem 1.2rem;
    }
    .dmt-page-personalizzazione .gallery-viewer__thumbs,
    body > .gallery-viewer .gallery-viewer__thumbs {
        bottom: 1rem;
        gap: .6rem;
        padding: .6rem .8rem;
        max-width: calc(100vw - 1.6rem);
    }
    .dmt-page-personalizzazione .gallery-viewer__thumb,
    body > .gallery-viewer .gallery-viewer__thumb {
        width: 4.2rem;
        height: 4.2rem;
    }
}

/* Reduced-motion: niente translateY sul thumb attivo, niente transitions */
@media (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .gallery-viewer__thumb,
    body > .gallery-viewer .gallery-viewer__thumb {
        transition: none;
    }
    .dmt-page-personalizzazione .gallery-viewer__thumb.is-active,
    body > .gallery-viewer .gallery-viewer__thumb.is-active {
        transform: none;
    }
}

/* =============================================
   6. FAQ
============================================= */
.dmt-page-personalizzazione .section-faq { padding: 8rem 0; }
.dmt-page-personalizzazione .section-faq h2 {
    font-family: var(--ff-heading);
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--dark);
    margin: 0 0 4.8rem;
    text-transform: uppercase;
    max-width: 50rem;
}
.dmt-page-personalizzazione .faq-list {
    list-style: none; padding: 0; margin: 0;
}
.dmt-page-personalizzazione .faq-item {
    border-bottom: 1px solid var(--separator);
}
.dmt-page-personalizzazione .faq-item:first-child {
    border-top: 1px solid var(--separator);
}
.dmt-page-personalizzazione .faq-item summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2rem 0; cursor: pointer; list-style: none;
}
.dmt-page-personalizzazione .faq-item summary::-webkit-details-marker { display: none; }
.dmt-page-personalizzazione .faq-item summary::marker { display: none; content: ""; }
.dmt-page-personalizzazione .faq-item summary h3 {
    font-family: var(--ff-default);
    font-size: 1.8rem; font-weight: 600;
    margin: 0; line-height: 1.3;
    color: var(--dark);
}
.dmt-page-personalizzazione .faq-icon {
    position: relative; width: 2rem; height: 2rem;
    flex-shrink: 0; margin-left: 1.6rem;
}
.dmt-page-personalizzazione .faq-icon::before,
.dmt-page-personalizzazione .faq-icon::after {
    content: ''; position: absolute; background: var(--dark);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    transition: transform .3s;
}
.dmt-page-personalizzazione .faq-icon::before { width: 1.4rem; height: 1px; }
.dmt-page-personalizzazione .faq-icon::after { width: 1px; height: 1.4rem; }
.dmt-page-personalizzazione .faq-item[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.dmt-page-personalizzazione .faq-answer {
    padding: 0 0 2.4rem;
    font-family: var(--ff-default);
    font-size: 1.6rem; font-weight: 400;
    color: var(--text-secondary); line-height: 1.7;
}
.dmt-page-personalizzazione .faq-answer strong {
    color: var(--dark); font-weight: 600;
}
.dmt-page-personalizzazione .faq-answer p {
    max-width: 66rem;
    font-weight: 400;
    line-height: 1.3;
}

/* =============================================
   7. CTA FINALE — sfondo beige (integrazione visiva col footer)
   con pattern crocette full-bleed (V4)
============================================= */
.dmt-page-personalizzazione .section-cta {
    padding: 8rem 0;
    background: var(--beige);
    color: var(--dark);
    position: relative;
    overflow: hidden;
}
/* -----------------------------------------------------------------------------
   Layout media-text — adattato da test-features-mediatext.html (Cowork ref).
   Mobile: stack verticale (testo sopra, immagine sotto). Desktop ≥768: 2 col
   1fr 1fr, testo sx, immagine dx. Override del `text-align: center` originario
   della section-cta sul .section-cta__text per allineamento sx editoriale.
--------------------------------------------------------------------------- */
.dmt-page-personalizzazione .section-cta__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
.dmt-page-personalizzazione .section-cta__text {
    text-align: left;
}
.dmt-page-personalizzazione .section-cta__media {
    width: 100%;
}
.dmt-page-personalizzazione .section-cta__img {
    width: 100%;
    height: auto;
    aspect-ratio: 845 / 711;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .dmt-page-personalizzazione .section-cta__layout {
        grid-template-columns: 1fr 1fr;
        gap: 8.8rem;
    }
}
@media (min-width: 1024px) {
    .dmt-page-personalizzazione .section-cta__layout { gap: 4.8rem; }
}

.dmt-page-personalizzazione .section-cta#contattaci{
    background: #fff;
    border-top: 1px solid var(--separator);    
}

.dmt-page-personalizzazione .section-cta > * { position: relative; z-index: 1; }
/* Decorazioni legacy (target/half/dot/crosses) — disattivate su decisione utente */
.dmt-page-personalizzazione .cta-crosses,
.dmt-page-personalizzazione .cta-dot,
.dmt-page-personalizzazione .cta-target,
.dmt-page-personalizzazione .cta-half { display: none !important; }

.dmt-page-personalizzazione .section-cta > .max-width {
    position: relative; z-index: 2;
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;
}
.dmt-page-personalizzazione .section-cta h2,
.dmt-page-personalizzazione .section-tail-cta h2 {
    font-family: var(--ff-heading);
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--dark);
    margin: 0 0 1.6rem;
    text-transform: uppercase;
    max-width: 50rem;
}

.dmt-page-personalizzazione .section-tail-cta h2{margin:0 auto 2.4rem}


.dmt-page-personalizzazione .section-cta p {
    font-family: var(--ff-default);
    margin: 0 0 2.4rem;
    max-width: 45rem;
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--dark);
    line-height: 1.3;
    opacity: .85;    
}

.dmt-page-personalizzazione .section-tail-cta p{max-width: 40rem;margin: 0 auto 2.4rem;}

.dmt-page-personalizzazione .cta-buttons {
    display: flex; flex-direction: column; gap: 1.2rem;
    align-items: flex-start; justify-content: flex-start;
}
.dmt-page-personalizzazione .cta-buttons .button { min-width: 28rem; }
/* Hover bottone primary CTA — stesso effetto del card-cta-primary della grid
   prodotti: schiarimento leggero del fondo nero (no invert color). */
.dmt-page-personalizzazione .cta-buttons .button-primary {
    transition: background-color .3s;
}
.dmt-page-personalizzazione .cta-buttons .button-primary:hover {
    background: #111418;
}
.dmt-page-personalizzazione .cta-contacts {
    display: flex; flex-direction: column; gap: .8rem;
    align-items: center; margin-top: .8rem;
    width: 28rem; max-width: 100%;
}
.dmt-page-personalizzazione .cta-phone {
    font-family: var(--ff-default);
    font-size: 1.6rem; font-weight: 600;
    color: var(--dark); letter-spacing: .5px;
}
/* Icona dentro il pulsante CTA (es. WhatsApp logo) — flex inline, gap col testo */
.dmt-page-personalizzazione .cta-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}
.dmt-page-personalizzazione .cta-buttons .button-icon {
    flex-shrink: 0;
}

.dmt-page-personalizzazione .section-tail-cta .cta-buttons .button{margin: auto;}

@media (min-width: 768px) {
    .dmt-page-personalizzazione .cta-buttons {
        flex-direction: row; gap: 1.6rem;
    }
}

/* =============================================
   FALLBACK — placeholder coerente brand per immagini mancanti
   (foundation pass: hero collage / service cards / gallery possono non avere
   ancora gli asset caricati; la sostituzione viene fatta da JS sull'evento
   `error` del tag <img>, vedi js/dmt-personalizzazione-page.js)
============================================= */
.dmt-page-personalizzazione img.is-broken,
.dmt-page-personalizzazione img[data-broken="1"] {
    background: var(--beige-deep) !important;
    position: relative;
}
.dmt-page-personalizzazione .img-fallback {
    background: var(--beige-deep);
    background-image:
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(122, 74, 46, 0.08) 10px 11px);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-cognac);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 1.1rem; letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    padding: 1.6rem;
    width: 100%;
    aspect-ratio: 4/5;
}
.dmt-page-personalizzazione .hero-collage .img-fallback {
    aspect-ratio: 4/5;
    background: rgba(249, 229, 207, 0.18);
    background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(122, 74, 46, 0.10) 12px 13px);
    border: 1px solid rgba(122, 74, 46, 0.25);
    color: var(--ink-cognac);
    box-shadow: 0 6px 28px rgba(0,0,0,0.08), 0 0 0 .6rem var(--cream);
}
.dmt-page-personalizzazione .svc-row .img-fallback,
.dmt-page-personalizzazione .svc-cursor .img-fallback {
    aspect-ratio: 4/5;
}
.dmt-page-personalizzazione .masonry-item .img-fallback {
    aspect-ratio: 3/4;
}
.dmt-page-personalizzazione .card-product .img-fallback {
    aspect-ratio: 4/5;
}


/* =============================================
   3.PG.c §5 — TAIL CTA WhatsApp diretta
   Mini-fascia post-FAQ, canale unico WhatsApp (no modal). Stile sobrio:
   sfondo neutro chiaro (NON beige saturato come .section-cta piena),
   border-top sottile, contenuto centrato max 56rem.
============================================= */
.dmt-page-personalizzazione .section-tail-cta {
    padding: 6rem 0 7rem;overflow: hidden;
    background: var(--beige);
    border-top: 1px solid var(--separator);
}
/* Pattern crocette ruotato — stesso ::after della .section-cta per coerenza */
.dmt-page-personalizzazione .section-tail-cta::after {
    content: '';
    position: absolute;
    inset: -50%;
    height: 200%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.32 91.96'><path d='M7.08 1L4.04 4.03M4.04 4.03L1 7.06M4.04 4.03L7.08 7.06M4.04 4.03L1 1M35.24 46.98L32.20 50.01M32.20 50.01L29.16 53.04M32.20 50.01L35.24 53.04M32.20 50.01L29.16 46.98' stroke='%23000' stroke-width='0.5' fill='none'/></svg>");
    background-repeat: repeat;
    background-size: 3.2rem 5.2rem;
    transform: rotate(-6deg);
    transform-origin: center;
    opacity: .25;
    pointer-events: none;
    z-index: 0;
}
.dmt-page-personalizzazione .tail-cta-content {
    margin: 0 auto;
    padding: 0 1.6rem;
}

/* Override: la tail-cta usa il markup `.section-cta__text` (h2 + p +
   .cta-buttons + .cta-contacts) ma centrato (vs. allineato a sx della
   section-cta principale media-text). */
.dmt-page-personalizzazione .section-tail-cta .section-cta__text {
    text-align: center;
}
.dmt-page-personalizzazione .section-tail-cta .cta-buttons {
    align-items: center;
}
.dmt-page-personalizzazione .section-tail-cta .cta-contacts {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .dmt-page-personalizzazione .section-tail-cta {
        padding: 4.8rem 0 5.6rem;
    }
}

/* ==========================================================================
   Hero collage — marquee scorrevole infinito su mobile (≤767px) (2026-05-05)
   Pattern riusato dal test Cowork `Servizio Personalizzazione/test-marquee-
   mixed-ratio.html` (variante B: mixed ratio, stessa altezza). Su desktop
   il collage statico resta esattamente com'è (.collage-img--clone hidden).

   Note tecniche:
   - Solo `.hero-pattern` nascosto su mobile: `.hero-ring--bleed` e
     `.hero-crosses--tl` sono già `display:none !important` da foundation.
   - Fade laterale via sovrascrittura di `.hero--figma::before` e `::after`:
     su mobile l'halo radiale cognac (::before riga ~109) e il paper-noise
     (::after riga ~122) vengono SOSTITUITI dai gradient fade. Trade-off
     accettato: effetti decorativi marginali su viewport piccolo, il fade
     aggiunge più valore percettivo.
   - `.hero--figma` perde `min-height: 100vh` su mobile: senza il collage
     statico in absolute che riempiva 100vh, il min-height creerebbe vuoti
     sopra/sotto il marquee. Padding ridotto coerentemente.
   - Background `#ffffff` esplicito per il gradient fade: la var --cream
     vale `#F9E5CF` (burro brand), creerebbe discontinuità di colore col
     bg bianco dell'hero (riga ~101).
   ========================================================================== */

/* Desktop: nascondi i cloni — sono solo per il marquee mobile */
@media (min-width: 768px) {
    .dmt-page-personalizzazione .hero-collage .collage-img--clone {
        display: none !important;
    }
}

/* Mobile: trasformazione in marquee scorrevole infinito */
@media (max-width: 767px) {

    /* Hero compatta: niente più 100vh forzati, padding ridotti.
       Senza il collage absolute che riempiva la section, 100vh creerebbe
       vuoti vistosi sopra/sotto il marquee.
       `flex-direction: column-reverse` (decisione Danilo): stack verticale
       evita il caos del flex row default che cercava di mettere `.hero-collage`
       (width:max-content) e `.hero-text` orizzontalmente nel viewport mobile.
       `align-items: stretch` dà al marquee tutta la larghezza disponibile,
       il fade laterale clippato dal parent con overflow:hidden. */
    .dmt-page-personalizzazione .hero--figma {
        min-height: 0;
        padding: 12rem 0 4rem;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 3.2rem;
    }

    /* Padding laterale solo sul testo: la `.hero--figma` ha padding-left/right
       a 0 perché il marquee deve estendersi fino al bordo viewport per il
       fade. Il testo invece va rientrato per leggibilità. */
    .dmt-page-personalizzazione .hero--figma .hero-text {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    /* Subtitle ridotto su mobile: 2.4rem desktop è troppo per il viewport
       stretto, scende a 1.8rem con peso 500. */
    .dmt-page-personalizzazione .hero--figma .hero-subtitle {
        font-size: 1.8rem;
        font-weight: 500;
    }

    /* H1, subtitle e CTA group più stretti su mobile per controllo del
       wrapping (default 48rem troppo per viewport ≤375px). Stesso
       max-width per coerenza visiva. */
    .dmt-page-personalizzazione .hero--figma h1,
    .dmt-page-personalizzazione .hero--figma .hero-subtitle,
    .dmt-page-personalizzazione .hero-cta-group {
        max-width: 33rem;
    }

    /* Container marquee: annulla layout collage statico, diventa flex track.
       NIENTE `gap`: il gap distribuito tra gli 11 spazi tra le 12 immagini
       romperebbe la simmetria 6+6 necessaria per il seamless loop a -50%
       (prima metà avrebbe 5 gap + 1 di mezzo, seconda metà solo 5 → scatto
       al wrap). Lo spazio tra immagini è gestito via `margin-right` su
       ciascuna .collage-img → 12 margin uguali, 6 per metà, simmetria. */
    .dmt-page-personalizzazione .hero-collage {
        position: relative;
        inset: auto;
        height: auto;
        overflow: hidden;
        background: transparent;

        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: max-content;
        /* Durata 55s (era 40s) bilanciata sul nuovo numero di immagini:
           con 16 totali (8+8 cloni) invece di 12, mantiene la stessa
           velocità lineare in pixel/secondo del marquee originale. */
        animation: dmtHeroMarquee 55s linear infinite;
        will-change: transform;
    }

    /* Reset rotazioni e position absolute originali — tutte e 12 in flex
       flow.
       `!important` su width/max-width: gli `:nth-child(N)` desktop hanno
       specificità 0,4,0 (es. `.collage-img:nth-child(1) { width:18% }`)
       e batterebbero il mio reset 0,3,0 senza `!important`. Senza questi
       !important le immagini renderizzavano come "fette verticali" perché
       manteneva `width: 18%` invece di `auto`.
       NB: `height` e `aspect-ratio` NON sono nel reset, sono dichiarati
       sotto su odd/even con valori alternati (variante "Mixed ratio +
       Mixed height"). Width auto + aspect-ratio + height esplicita = il
       browser calcola la larghezza per ciascuna immagine.
       `align-items: center` sul container `.hero-collage` (già impostato
       sopra) verticalizza al centro le immagini di altezza diversa →
       ritmo ondulato. */
    .dmt-page-personalizzazione .hero-collage .collage-img,
    .dmt-page-personalizzazione .hero-collage .img-fallback {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        flex-shrink: 0;
        width: auto !important;
        max-width: none !important;
        margin: 0 .8rem 0 0; /* gap orizzontale via margin → simmetria 6+6 per seamless */
        object-fit: cover;
        display: block !important;
        box-shadow: 0 6px 28px rgba(0,0,0,.18);
        filter: none;
        background: transparent;
        cursor: pointer; /* aprono il viewer hero al tap */
    }

    /* Pattern alternato — dispari "alte e strette" / pari "basse e larghe".
       Differenza altezza: 30rem vs 22rem (+/- 8rem). Differenza larghezza
       (calcolata): odd 30 × 4/5 = 24rem; even 22 × 5/4 = 27.5rem.
       `!important` per battere `aspect-ratio: 4/5` desktop (specificità 0,3,0). */
    .dmt-page-personalizzazione .hero-collage .collage-img:nth-child(odd) {
        height: 30rem !important;
        aspect-ratio: 4 / 5 !important;
    }
    .dmt-page-personalizzazione .hero-collage .collage-img:nth-child(even) {
        height: 22rem !important;
        aspect-ratio: 5 / 4 !important;
    }

    /* Pattern crocette full-bleed nascosto durante marquee — si sovrapporrebbe
       alle immagini scorrevoli creando rumore visivo. */
    .dmt-page-personalizzazione .hero--figma .hero-pattern {
        display: none;
    }

    /* Pause on touch: tap and hold ferma il marquee per consultare le foto */
    .dmt-page-personalizzazione .hero-collage:active {
        animation-play-state: paused;
    }

    /* Disattiva ::before halo radiale e ::after paper-noise di .hero--figma
       solo su mobile: si sovrapporrebbero al marquee creando rumore visivo.
       Il fade laterale è stato rimosso (decisione 2026-05-05: marquee a
       taglio netto sui bordi viewport, niente velo bianco). */
    .dmt-page-personalizzazione .hero--figma::before,
    .dmt-page-personalizzazione .hero--figma::after {
        display: none;
    }

    @keyframes dmtHeroMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}

/* Range intermedio 500-767px (mobile largo / tablet portrait): max-width
   33rem (528px) lasciava ~239px di vuoto laterale su viewport 767px.
   Override a 42rem (672px) per riempire meglio. Solo questo cambio,
   le altre regole mobile restano invariate. */
@media (min-width: 500px) and (max-width: 767px) {
    .dmt-page-personalizzazione .hero--figma h1,
    .dmt-page-personalizzazione .hero--figma .hero-subtitle,
    .dmt-page-personalizzazione .hero-cta-group {
        max-width: 42rem;
    }
}

/* prefers-reduced-motion: reduce — marquee disattivato, fallback scroll
   orizzontale manuale con scroll-snap. A11y rispettata. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .dmt-page-personalizzazione .hero-collage {
        animation: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .dmt-page-personalizzazione .hero-collage .collage-img,
    .dmt-page-personalizzazione .hero-collage .img-fallback {
        scroll-snap-align: start;
    }
}