/**
 * DESIGN SYSTEM — fonte unica dei token per tutto il sito.
 * Identità istituzionale chiara: nessun tema scuro come stato permanente
 * (era la palette dark "premium SaaS" di header/footer/prodotto, ora
 * ritirata — vedi components/header.js, components/footer.js,
 * css/product-v3.css). --page-* e --pdp-* restano come alias verso i
 * token --aml-* per non dover riscrivere ogni consumer in un colpo solo:
 * i componenti NUOVI devono referenziare --aml-* direttamente, quelli
 * esistenti possono continuare a usare l'alias finché non vengono toccati.
 */
:root {
    /* ── Palette a tre ruoli ────────────────────────────────────────────
       Ogni colore ha UN significato, e i componenti referenziano il ruolo
       (--aml-cta-bg, --aml-trust-ink), mai il colore grezzo:

         arancione  →  agire e risparmiare   (CTA primaria, badge sconto)
         verde      →  rassicurare           (stock, garanzia, pagamenti)
         slate/navy →  tutto il resto        (contenuto, feature, chrome)

       Se per colorare qualcosa serve scrivere var(--aml-cta-bg) su un
       elemento che non è una CTA, l'errore si vede leggendo il codice:
       è quell'attrito il motivo per cui i ruoli esistono. */

    /* ── Scala Arancione Brand (Warm Sunset Palette) ─────────────────── */
    --aml-orange-50: #FFF7ED;
    --aml-orange-100: #FFE8D6;
    --aml-orange-200: #FFD1B3;
    --aml-orange-300: #FFAA7A;
    --aml-orange-400: #FF8442;
    --aml-orange-500: #FF7024;
    --aml-orange-600: #F05A10;
    --aml-orange-700: #C74104;
    --aml-orange-800: #9E3203;
    --aml-orange-900: #7E2702;

    /* ── Scala Slate / Neutrali Scuro ─────────────────────────────────── */
    --aml-slate-50: #F8FAFC;
    --aml-slate-100: #F1F5F9;
    --aml-slate-200: #E2E8F0;
    --aml-slate-300: #CBD5E1;
    --aml-slate-400: #94A3B8;
    --aml-slate-500: #64748B;
    --aml-slate-600: #475569;
    --aml-slate-700: #334155;
    --aml-slate-800: #1E293B;
    --aml-slate-900: #0F172A;
    /* Un gradino sotto slate-900: fondo dell'hero della home, dove i glow
       arancioni devono staccare piu' di quanto facciano sul navy. */
    --aml-slate-950: #090D16;

    /* ── Scala Amber (Copilot AI & Rating Stars) ──────────────────────── */
    --aml-amber-50: #FFFBEB;
    --aml-amber-100: #FEF3C7;
    --aml-amber-200: #FDE68A;
    --aml-amber-400: #FBBF24;
    --aml-amber-600: #D97706;
    --aml-amber-800: #92400E;

    /* Brand — arancione. --aml-navy NON è il brand: è la superficie scura
       (barra annuncio, footer, bottoni secondari) e resta invariata. */
    --aml-navy: var(--aml-slate-900);
    --aml-navy-2: var(--aml-slate-800);
    --aml-brand: var(--aml-orange-700);         /* 5.2:1 su bianco — usato per testo/link/risparmio */
    --aml-brand-hover: var(--aml-orange-800);   /* 7.3:1 */
    --aml-brand-soft: var(--aml-orange-300);
    --aml-brand-vivid: var(--aml-orange-600);   /* 3.6:1 — campiture ampie, titoli accentati, CTA, check */
    --aml-brand-vivid-hover: var(--aml-orange-500); /* hover della CTA: piu' chiaro (hover:bg-orange-500) */

    /* Neutrali */
    --aml-ink: var(--aml-slate-800);
    --aml-ink-2: var(--aml-slate-600);
    --aml-line: var(--aml-slate-200);
    --aml-paper: var(--aml-slate-100);
    --aml-paper-2: var(--aml-slate-50);   /* carta più chiara: fondo delle PDP e delle card interne */
    --aml-surface: #FFFFFF;
    --aml-trust-bg: var(--aml-slate-100);

    /* Semantici */
    --aml-ok: #1F7A52;
    --aml-ok-bg: #E8F3ED;
    --aml-warn: #92400E;
    --aml-warn-bg: #FCF3D9;
    --aml-danger: #B3261E;
    --aml-danger-bg: #FBEAE9;

    /* ── Ruoli applicativi: qui vive la regola dei tre colori ──────────
       I componenti usano QUESTI, non --aml-brand / --aml-ok diretti. */

    /* Agire */
    --aml-cta-bg: var(--aml-brand-vivid);
    --aml-cta-bg-hover: var(--aml-brand-vivid-hover);
    --aml-cta-ink: #FFFFFF;

    /* Risparmiare */
    --aml-save-ink: var(--aml-orange-800);
    --aml-save-bg: var(--aml-orange-50);
    --aml-save-border: var(--aml-orange-200);

    /* Rassicurare */
    --aml-trust-ink: var(--aml-ok);
    --aml-trust-soft: var(--aml-ok-bg);
    --aml-stock-ink: var(--aml-ok);

    /* Raggio / ombra / layout */
    --aml-radius-sm: 6px;
    --aml-radius-md: 8px;
    --aml-radius-lg: 12px;
    --aml-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --aml-shadow-md: 0 2px 8px rgba(20, 32, 51, 0.04);
    --aml-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
    --aml-maxw: 1200px;
    --aml-gutter: clamp(1rem, 4vw, 2rem);

    /* Tipografia (formalizza la scelta esistente, non la cambia).
       Il secondo nome di ogni stack e' il ripiego con le metriche del font vero,
       definito in fonts/montserrat.css e fonts/source-serif.css: regge il testo
       finche' il woff2 non arriva, senza che al cambio si sposti nulla. */
    --aml-font-sans: 'Montserrat', 'Montserrat Fallback', sans-serif;
    --aml-font-display: 'Source Serif 4', 'Source Serif4', 'Source Serif Fallback', Georgia, serif;

    /* Scala tipografica — quattro livelli sotto il titolo, non sei taglie
       indistinguibili tra 10 e 12px. Senza contenitori è la leva
       principale della gerarchia, quindi va tenuta corta. */
    --aml-text-xs: 0.75rem;      /* 12px — badge, note legali */
    --aml-text-sm: 0.875rem;     /* 14px — corpo secondario */
    --aml-text-base: 0.9375rem;  /* 15px — corpo */
    --aml-text-lg: 1.125rem;
    --aml-text-h3: 1.375rem;
    --aml-text-h2: clamp(1.5rem, 3vw, 2rem);
    --aml-text-h1: clamp(2rem, 5vw, 2.75rem);
    --aml-text-price: clamp(1.5rem, 2.5vw, 1.85rem);

    --aml-weight-body: 400;
    --aml-weight-strong: 600;
    --aml-weight-display: 700;
    --aml-weight-price: 900;     /* riservato al prezzo: il piu' pesante della pagina */

    /* Ritmo verticale — sostituisce i bordi tra sezioni: senza filetti,
       lo spazio è l'unico separatore e va tokenizzato o riparte a caso. */
    --aml-section-gap: clamp(3rem, 8vw, 6rem);
    --aml-section-gap-lg: clamp(4.5rem, 11vw, 8rem);
    --aml-stack: 1rem;

    /* ── Alias legacy: un solo posto dove sono definiti i valori reali ── */
    --page-bg: var(--aml-paper);
    --page-border: var(--aml-line);
    --page-text: var(--aml-ink);
    --page-text-secondary: var(--aml-ink-2);
    --page-text-muted: var(--aml-ink-2);
    --page-accent: var(--aml-brand);
    --page-glow: rgba(194, 65, 12, 0.06);
    --font-sans: var(--aml-font-sans);
    --font-display: var(--aml-font-display);
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

::selection {
    background: var(--aml-orange-500);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Scroll progress bar (fissa in cima; markup: .scroll-progress) ───────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--page-accent) 0%, #93c5fd 100%);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
}

/* Ancora centrata visivamente: 40vh porta il target a metà schermo
   tenendo conto dell'header sticky (utility + barra; offset via --aml-header-offset) */
[id] {
    scroll-margin-top: 40vh;
}

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 10001;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0.65rem 1rem;
    background: var(--page-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--page-bg);
    background-image: radial-gradient(ellipse 120% 80% at 50% -20%, var(--page-glow), transparent 55%);
    color: var(--page-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip; /* previene scroll orizzontale da elementi full-bleed (100vw) */
}

ecommerce-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Riserva CLS prima che il Web Component sia definito */
    min-height: 105px;
}

ecommerce-header:defined {
    min-height: 0;
}

@media (max-width: 767px) {
    ecommerce-header {
        min-height: 64px;
    }
}

main {
    padding: 2.5rem 1.5rem;
    max-width: 1232px;
    margin: 0 auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    isolation: isolate;
}

main.home-page {
    padding: 0;
    max-width: 100%;
}

/* Shared FAQ component: homepage and rich product pages use the same markup. */
.home-section-title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--page-text);
}

.home-faq {
    width: 100%;
    box-sizing: border-box;
}

.home-faq .home-section-title {
    margin-bottom: 1rem;
    text-align: center;
}

.home-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: min(40rem, 100%);
    margin-inline: auto;
    border-top: 1px solid var(--page-border);
}

/* Lista con separatori, non card: un solo stile di accordion su tutto il
   sito (homepage + ogni pagina prodotto, FAQ e Requisiti inclusi) invece di
   varianti diverse per sezione. */
.home-faq-item {
    min-width: 0;
    overflow: hidden;
    border: none;
    border-bottom: 1px solid var(--page-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

.home-faq-item summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 1rem 1.1rem;
    color: var(--page-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    overflow-wrap: break-word;
    cursor: pointer;
}

.home-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Il chevron (::after) basta a comunicare l'interazione: il cerchio con "?"
   è rumore, non informazione. */
.home-faq-item summary::before { display: none; }

.home-faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--page-accent);
    border-bottom: 2px solid var(--page-accent);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.home-faq-item[open] summary::after {
    transform: rotate(-135deg);
}

.home-faq-item[open] summary::before {
    background: var(--page-accent);
    color: #fff;
}

.home-faq-item summary:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: -2px;
}

.home-faq-item:hover {
    background: var(--aml-paper-2);
}

.home-faq-list .home-faq-item[open] {
    border-color: var(--page-border);
    box-shadow: none;
}

.home-faq-body {
    height: auto;
    overflow: hidden;
    padding: 0 1.1rem 1.1rem;
    color: var(--page-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-faq-body p {
    margin: 0;
}

.home-faq-body p + p {
    margin-top: 0.75rem;
}

.home-faq-body a {
    color: var(--page-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    word-break: break-word;
}

.home-faq-body a:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .home-faq-list {
        max-width: min(48rem, 100%);
    }
}

@media (min-width: 1024px) {
    .home-faq-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        max-width: min(64rem, 100%);
    }
}

@media (max-width: 767px) {
    .home-section-title {
        font-size: 1.35rem;
    }

    .home-faq-item summary {
        font-size: 0.9rem;
    }

    .home-faq-body {
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-faq-item,
    .home-faq-item summary::before,
    .home-faq-item summary::after,
    .home-faq-body {
        transition: none;
    }
}

h1 {
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--page-text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

p.subtitle {
    line-height: 1.8;
    color: var(--page-text-secondary);
    font-weight: 500;
    margin-bottom: 3rem;
    max-width: 65ch;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 6 per riga da desktop in su: le card si comprimono di conseguenza,
   stessa logica delle card "più venduti" in home. */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1rem;
    }

    .product-grid .product-card {
        min-height: 0;
        padding: 1rem 0.85rem;
        gap: 0.65rem;
    }

    .product-grid .product-card-media {
        height: 140px;
        padding: 0.6rem;
    }

    .product-grid .product-card-name {
        font-size: 0.92rem;
    }

    .product-grid .product-card-blurb {
        font-size: 0.78rem;
    }
}

.product-card {
    background: var(--aml-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--aml-radius-md);
    box-shadow: var(--aml-shadow-sm);
    min-height: 430px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--aml-shadow-lg);
    border-color: color-mix(in srgb, var(--aml-ink) 12%, var(--page-border));
}

.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.product-card--link:focus {
    outline: none;
}

a.product-card--link:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* display:flex, non grid: in una riga di grid implicita (auto) l'altezza
   percentuale di un figlio non si risolve, anche se il contenitore ha
   un'altezza esplicita (per evitare una dipendenza circolare nel motore di
   layout) - la larghezza percentuale invece si risolve, quindi l'<img> sotto
   (che ha width/height="400" in HTML, aspect-ratio implicito 1/1) diventava
   sempre un quadrato pari alla sua larghezza risolta, sforando sotto al
   riquadro quando questo non era quadrato. Con flex l'altezza del
   contenitore e' definita anche per il figlio, niente ambiguita'. */
.product-card-media {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stessa lingua visiva del badge sconto in PDP (.pdp-price-badge): il
   ruolo "risparmio" e' arancione ovunque sul sito, mai verde. */
.product-card-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 1;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--aml-save-ink);
    background: var(--aml-save-bg);
    border: 1px solid var(--aml-save-border);
    box-shadow: var(--aml-shadow-sm);
    pointer-events: none;
}

.product-card-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--aml-ink) 16%, transparent));
    transition: transform 0.2s ease;
}

.product-card:hover .product-card-img {
    transform: translateY(-2px) scale(1.02);
}

.product-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--page-text);
    line-height: 1.3;
}

.product-card-blurb {
    font-size: 0.875rem;
    color: var(--page-text-secondary);
    margin: 0;
    line-height: 1.45;
    flex: 1;
}

.product-card-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--page-text);
    margin: 0;
    margin-top: auto;
}

/* Blocco prezzi compatto per card catalogo / homepage.
   −% in riga col prezzo; padding-bottom conserva lo spazio verso il CTA
   che prima dava la seconda riga dello sconto. */
.product-card-price-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
    padding-bottom: 1.65rem;
}

.product-card-price-block__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.product-card-price-block__msrp {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--page-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.product-card-price-block__sale {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--page-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.product-card-price-block__save {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    background: var(--aml-save-bg);
    color: var(--aml-save-ink);
    border: 1px solid var(--aml-save-border);
    white-space: nowrap;
    flex-shrink: 0;
}

.product-card-foot {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

.product-card-foot .btn-cta-primary {
    width: 100%;
}

/* CTA catalogo — stesso linguaggio del pulsante principale scheda prodotto (.v2-btn-primary / .btn-primary) */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.85rem 1.35rem;
    box-sizing: border-box;
    background: var(--page-accent, #003182);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--page-accent) 35%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--page-accent) 45%, transparent);
    filter: brightness(1.06);
}

.btn-cta-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn-cta-primary:focus-visible {
    outline: 2px solid var(--page-accent, #003182);
    outline-offset: 3px;
}

/* Feedback dopo “Aggiungi al carrello” (stesso verde usato in scheda prodotto) */
.btn-cta-primary.is-added {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.btn-cta-primary.is-added:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
    filter: brightness(1.05);
}

.product-card-add {
    flex-shrink: 0;
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .product-card {
        transition: none;
    }

    .product-card:hover {
        transform: none;
    }

    .btn-cta-primary,
    .btn-cta-primary:hover,
    .btn-cta-primary:active,
    .btn-cta-primary.is-added:hover {
        transition: none;
        transform: none;
        filter: none;
    }
}

.skeleton-img {
    background: var(--aml-paper);
    height: 200px;
    border-radius: var(--aml-radius-sm);
    display: grid;
    place-items: center;
    color: var(--page-text-muted);
    border: 1px solid var(--page-border);
}

.skeleton-img svg {
    width: 48px;
    height: 48px;
}

.skeleton-text {
    background: color-mix(in srgb, var(--aml-ink) 12%, var(--aml-paper));
    height: 16px;
    border-radius: 4px;
    width: 90%;
}

.skeleton-text.short {
    width: 60%;
}

.product-card-skel-grow {
    flex: 1 1 auto;
    min-height: 0.75rem;
}

.product-card-skel-btn {
    flex-shrink: 0;
    min-height: 44px;
}

.skeleton-text.price {
    width: 30%;
    height: 24px;
    margin-top: 0;
    background: color-mix(in srgb, var(--aml-ink) 18%, var(--aml-paper));
}

ecommerce-footer {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* --- Pagine legali / testo lungo ---
   Stesso linguaggio visivo di about.css: card su sfondo --aml-paper,
   accenti brand sui titoli di sezione, bullet colorati. Nessuna modifica
   all'HTML: la card si adatta alla struttura h1/.legal-meta/p/h2 già
   condivisa da cookie-policy, privacy-policy, terms e returns. */
.legal-doc {
    max-width: 52rem;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
    background: var(--aml-surface);
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-lg);
    box-shadow: var(--aml-shadow-sm);
}

.legal-doc h1 {
    font-family: var(--aml-font-display);
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--aml-ink);
    margin: 0 0 0.75rem;
}

.legal-doc .legal-meta {
    display: inline-block;
    margin: 0 0 1.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--aml-trust-bg);
    color: var(--aml-brand);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Paragrafo introduttivo (subito dopo il chip data): leggermente più
   grande e con misura di riga contenuta, come i "lede" del sito. */
.legal-doc h1 + .legal-meta + p {
    font-size: 1.02rem;
    color: var(--aml-ink-2);
    max-width: 62ch;
}

.legal-doc h2 {
    position: relative;
    margin: 2.5rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--aml-line);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--aml-ink);
}

.legal-doc h2::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.6rem;
    border-radius: 2px;
    background: var(--aml-brand);
    vertical-align: middle;
    transform: translateY(-2px);
}

.legal-doc h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-doc p,
.legal-doc li {
    color: var(--aml-ink-2);
    line-height: 1.75;
    font-size: 0.95rem;
}

.legal-doc p {
    margin: 0 0 1rem;
}

.legal-doc ul {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.legal-doc li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.35rem;
}

.legal-doc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aml-brand);
}

.legal-doc a {
    color: var(--aml-brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--aml-brand) 35%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s ease;
}

.legal-doc a:hover {
    text-decoration-color: var(--aml-brand);
}

.cookie-panel-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.75rem 1.4rem;
    border: none;
    border-radius: var(--aml-radius-sm);
    background: var(--aml-brand);
    color: var(--aml-surface);
    font-weight: 700;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--aml-shadow-md);
    transition: background-color 0.15s ease;
}

.cookie-panel-trigger:hover {
    background: var(--aml-brand-hover);
}

.cookie-panel-trigger:focus-visible {
    outline: 2px solid var(--aml-brand);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .legal-doc {
        padding: 1.5rem 1.25rem;
        border-radius: var(--aml-radius-md);
    }
}

/* ─── Checkout stepper (cart → checkout → conferma) ────────────────────────── */

.checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 2.25rem;
    gap: 0;
    list-style: none;
    padding: 0;
}

.checkout-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    z-index: 1;
}

.checkout-stepper__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.checkout-stepper__step--done .checkout-stepper__dot {
    background: var(--page-accent);
    color: #fff;
    border: 2px solid var(--page-accent);
}

.checkout-stepper__step--done .checkout-stepper__dot:hover   { opacity: 0.85; }

.checkout-stepper__step--done .checkout-stepper__dot:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
}

.checkout-stepper__step--active .checkout-stepper__dot {
    background: var(--page-accent);
    color: #fff;
    border: 2px solid var(--page-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--page-accent) 18%, transparent);
    cursor: default;
}

.checkout-stepper__step--next .checkout-stepper__dot {
    background: transparent;
    color: var(--page-text-muted);
    border: 2px solid var(--page-border);
    cursor: default;
}

.checkout-stepper__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.checkout-stepper__step--done   .checkout-stepper__label { color: var(--page-accent); }
.checkout-stepper__step--active .checkout-stepper__label { color: var(--page-text); }
.checkout-stepper__step--next   .checkout-stepper__label { color: var(--page-text-muted); }

.checkout-stepper__line {
    flex: 1;
    min-width: 40px;
    max-width: 90px;
    height: 2px;
    margin-bottom: 1.35rem;
    border-radius: 1px;
    transition: background 0.25s ease;
}

.checkout-stepper__line--done { background: var(--page-accent); }
.checkout-stepper__line--next { background: var(--page-border); }

@media (prefers-reduced-motion: reduce) {
    .checkout-stepper__dot,
    .checkout-stepper__label,
    .checkout-stepper__line { transition: none; }
}

@media (max-width: 400px) {
    .checkout-stepper__step--next .checkout-stepper__label { display: none; }
    .checkout-stepper__line { min-width: 24px; }
}