/* product-pdp.css — layout della scheda prodotto (PDP).
 *
 * Nasce dalla fusione di product-v2.css e product-v3.css, che erano due
 * generazioni successive dello stesso foglio caricate insieme: la v3 aveva
 * sostituito quasi tutta la v2, ma la v2 continuava a viaggiare con 132 regole
 * che nessuna pagina agganciava piu'. Concatenati nell'ordine di caricamento di
 * allora (v2, poi v3), quindi la cascata e' la stessa di prima.
 *
 * Il guscio della pagina prodotto (.product-page, .product-sticky-cta) resta in
 * product.css, perche' lo condivide anche microsoft-365-solutions.
 *
 * Per sapere cosa qui dentro e' ancora vivo:
 *     node scripts/audit-css-usage.mjs --verbose css/product-pdp.css
 */

.v2-hero__title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    color: var(--aml-ink);
}

.v2-hero__title span {
    color: var(--page-accent);
}

.v2-product-code {
    margin: -14px 0 18px;
    color: var(--aml-ink-2);
    font-size: var(--aml-text-sm);
    line-height: 1.5;
    letter-spacing: 0;
}

.v2-product-code__value {
    color: var(--aml-ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: var(--aml-text-sm);
    overflow-wrap: anywhere;
}

.v2-hero__desc {
    font-size: var(--aml-text-lg);
    color: var(--aml-ink-2);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 480px;
}

.v2-pricing-card {
    background: var(--aml-surface);
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-md);
    box-shadow: var(--aml-shadow-lg);
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px 48px;
    align-items: center;
}

@media (max-width: 768px) {
    .v2-pricing-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; }
}

/* Stock magazzino (solo SKU fisici) — riga inventariale muted, anti-CLS */
.v2-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 1.5rem;
    margin: 8px 0 0;
    font-size: var(--aml-text-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--aml-ink-2);
}

.v2-stock__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--aml-ink-2);
}

.v2-stock__text {
    min-width: 0;
}

.v2-stock[data-stock-status="ok"] { color: var(--aml-ink-2); }

.v2-stock[data-stock-status="ok"] .v2-stock__dot { background: var(--aml-ok); }

.v2-stock[data-stock-status="low"] { color: var(--aml-warn); }

.v2-stock[data-stock-status="low"] .v2-stock__dot { background: var(--aml-warn); }

.v2-stock[data-stock-status="out"] { color: var(--aml-danger); }

.v2-stock[data-stock-status="out"] .v2-stock__dot { background: var(--aml-danger); }

.v2-stock[data-stock-status="error"] { color: var(--aml-ink-2); }

.v2-stock[data-stock-status="error"] .v2-stock__dot { background: var(--aml-ink-2); }

.v2-stock[data-stock-status="loading"] .v2-stock__dot { background: var(--aml-line); }

.v2-btn-primary.is-stock-out,
.btn-primary.is-stock-out,
[data-cart-add].is-stock-out {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.v2-btn-primary.is-added {
    background: var(--aml-ok);
    box-shadow: none;
}

@media (max-width: 480px) {
    .v2-pricing-card {
        padding: 24px 20px;
        gap: 20px;
    }
}

@media (max-width: 390px) {
    .v2-pricing-card {
        padding: 22px 16px;
    }
}

/* ── SECTION WRAPPER ── */
.v2-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* Trustpilot micro-widget (post-consent; fallback link always visible) */
.product-trustpilot {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    padding-top: 8px;
}

.product-trustpilot__fallback {
    margin: 0 0 0.75rem;
    font-size: var(--aml-text-base);
    line-height: 1.5;
    font-weight: 500;
    color: var(--aml-ink-2);
}

.product-trustpilot__fallback a {
    color: var(--page-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.product-trustpilot .trustpilot-widget {
    min-height: 40px;
    width: 100%;
}

.product-trustpilot .trustpilot-widget:not(.trustpilot-widget--active) {
    display: none;
}

/* Divider */
.v2-divider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    border: none;
    border-top: 1px solid var(--aml-line);
}

body { background: var(--page-bg); }

/* ── BENTO FIGURE / INFORMATIVA — Full-width breakout ── */

/* Azzera solo l'alto e i lati per la foto a piena larghezza (la didascalia
   gestisce da se' il proprio gutter orizzontale) — il basso resta con lo
   stesso ritmo di .pdp-sec, altrimenti il divider che segue la sezione
   arriva subito dopo l'ultima riga di testo, senza il respiro che hanno
   tutte le altre sezioni prima del proprio <hr>. */
.v2-section--gallery {
    padding: 0 0 clamp(40px, 6vw, 64px);
    /* Override per CLS: altezza stimata precisa per content-visibility: auto */
    contain-intrinsic-size: 0 62.5vw;
}

.bento-figure {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    border-radius: var(--aml-radius-md);
    border: none;
    background: var(--aml-paper);
}

/* Zoom dell'immagine sull'hover */
.bento-img {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5; /* 1024×640 — allineato agli attributi width/height dell'img */
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-figure:hover .bento-img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .bento-figure:hover .bento-img { transform: none; }
}

/* Didascalia fuori dalla foto (ora un <div> fratello di <figure>, non piu'
   un <figcaption> annidato dentro): nello stesso ritmo eyebrow/titolo/testo
   di tutte le altre sezioni della pagina — non la card "glass" ancorata
   sull'immagine di prima, ne' il riquadro/bordo arrotondato che restava
   quando la didascalia viveva ancora dentro .bento-figure (stesso sfondo,
   stesso overflow:hidden e border-radius della foto). La sezione ha
   padding:0 per la foto a piena larghezza, quindi qui serve il gutter di
   pagina esplicito: senza, il testo tocca il bordo della viewport. */
.bento-caption {
    max-width: 62ch;
    margin: 28px auto 0;
    padding: 0 var(--pdp-gutter);
    color: var(--aml-ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bento-kicker {
    display: block;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aml-brand-vivid);
    line-height: 1.2;
}

.bento-title {
    margin: 0;
    font-size: var(--aml-text-h3);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--page-text);
}

.bento-text {
    margin: 0;
    font-size: var(--aml-text-base);
    line-height: 1.55;
    color: var(--pdp-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   Layout corrente della scheda (v3).
   ───────────────────────────────────────────────────────────────────── */

/**
 * PRODUCT PAGE v3 — layout standard delle schede prodotto
 * Scheda prodotto ristrutturata per la conversione: hero + prezzo + CTA in un unico
 * blocco decisionale, trasparenza titolare/membri, confronto Family vs Personal.
 *
 * Caricato dopo product.css. Prefisso .pdp-; gli override sui componenti condivisi
 * (barra sticky, FAQ) sono scopati su body.pdp-page, così una pagina che non adotta
 * ancora il layout v3 resta invariata.
 */

/* ── TOKEN ─────────────────────────────────────────────────────────────────── */
/* Palette istituzionale (ex "pilota" su microsoft-365-family, ora lo standard
   di tutte le pagine prodotto): navy derivato dal blu del logo AML Store, non
   più il nero/blu SaaS. Fissa a prescindere dal toggle chiaro/scuro del sito —
   scelta editoriale, non un'inversione di tema — vedi anche header.js/footer.js
   dove lo stesso ragionamento rende l'header/footer sempre chiari. */
/* I --pdp-* sono ALIAS verso i token globali, mai valori propri: erano
   duplicati a mano e per questo le PDP sono rimaste blu quando --aml-brand
   è passato all'arancione. Se serve un valore che qui non esiste, si aggiunge
   un token in page.css — non si riscrive un literal in questo file. */
.pdp-page {
    --pdp-maxw: 1200px;
    --pdp-gutter: var(--aml-gutter);
    --pdp-radius: var(--aml-radius-md);
    --pdp-surface: var(--aml-surface);
    --pdp-surface-2: var(--aml-paper-2);
    --pdp-border: var(--aml-line);
    --pdp-muted: var(--aml-ink-2);
    --pdp-ok: var(--aml-ok);
    --pdp-navy: var(--aml-navy);
    --pdp-navy-2: var(--aml-navy-2);
    --pdp-trust-bg: var(--aml-trust-bg);
    --pdp-ink: var(--aml-ink);

    /* Le PDP restano chiare a prescindere dal resto del sito: qui si rimappa
       solo la CARTA, non l'accento — l'accento deve seguire il brand. */
    --page-accent: var(--aml-brand);
    --page-text: var(--aml-ink);
    --page-text-secondary: var(--aml-ink-2);
    --page-text-muted: var(--aml-ink-2);
    /* Pagina bianca come nel mockup: il rapporto si inverte rispetto a prima,
       quindi il pannello d'acquisto passa a --pdp-surface-2 (carta chiara). */
    --page-bg: var(--aml-surface);
    --page-border: var(--aml-line);

    /* Font del mockup di riferimento, scopato alla sola PDP (vedi commento
       sul <link> Google Fonts in product_page_lib.py) — non tocca header/
       footer, che leggono --aml-font-sans direttamente e restano Montserrat. */
    --font-sans: 'Plus Jakarta Sans', 'Inter', var(--aml-font-sans), sans-serif;
}

/* ── HERO UNIFICATO (immagine + info + prezzo + CTA nello stesso blocco) ───── */
.pdp-hero {
    position: relative;
    background: var(--pdp-surface);
    color: var(--pdp-ink);
    border-bottom: 1px solid var(--pdp-border);
    overflow: hidden;
    contain: layout paint;
}

/* Sugli hub/confronti (.cmp-hero dentro .pdp-hero) il divider separava la
   hero dalla riga di card subito sotto senza un vero cambio di sezione —
   qui non serve. */
.pdp-hero:has(.cmp-hero) { border-bottom: none; }

.pdp-breadcrumb {
    position: relative;
    z-index: 2;
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: 16px var(--pdp-gutter) 0;
}

.pdp-breadcrumb nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--aml-text-xs);
    color: var(--pdp-muted);
}

.pdp-breadcrumb a { color: var(--pdp-muted); text-decoration: none; }

.pdp-breadcrumb a:hover { color: var(--pdp-ink); }

.pdp-breadcrumb .sep { color: var(--pdp-border); }

.pdp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    /* Split asimmetrico 7/5: informazione a sinistra, acquisto a destra. */
    padding: 20px var(--pdp-gutter) 56px;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 3.5vw, 44px);
    align-items: start;
}

.pdp-hero__info { min-width: 0; }

/* Immagine prodotto libera, senza riquadro/sfondo attorno. Autonoma (non piu'
   incolonnata accanto alle tab): dimensione contenuta per non dominare la
   colonna sinistra dell'hero. */
.pdp-media {
    margin: 22px 0 0;
    padding: 0;
    max-width: 320px;
    border-radius: var(--pdp-radius);
}

.pdp-media__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pdp-radius);
}

@media (max-width: 1024px) {
    .pdp-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 20px var(--pdp-gutter) 44px;
    }

    /* Sotto i 1024px l'acquisto (.pdp-buy) va subito dopo l'immagine, prima
       delle tab app: meno scroll per arrivare al box prezzo/CTA. display:
       contents smonta il riquadro di .pdp-hero__info cosi' i suoi figli
       diventano item diretti della grid, riordinabili insieme a .pdp-buy. */
    .pdp-hero__info { display: contents; }

    /* I grid item hanno min-width:auto di default: senza azzerarlo, i figli
       flex/nowrap (es. .pdp-badges) sforano la colonna invece di andare a
       capo, ora che non sono piu' dentro il box di .pdp-hero__info. */
    .pdp-badges,
    .pdp-h1,
    .v2-hero__desc,
    .pdp-media,
    .pdp-buy,
    .pdp-apptabs-block,
    .pdp-keylist,
    .pdp-guide-link {
        min-width: 0;
    }

    .pdp-badges { order: 1; }
    .pdp-h1 { order: 2; }
    .v2-hero__desc { order: 3; }
    .pdp-media { order: 4; }
    .pdp-buy { order: 5; }
    .pdp-apptabs-block { order: 6; }
    .pdp-keylist { order: 7; }
    .pdp-guide-link { order: 8; }
}

@media (max-width: 560px) {
    .pdp-media { max-width: 260px; }
}

.pdp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--page-accent);
}

.pdp-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--page-accent);
}

.pdp-h1 {
    margin: 0 0 8px;
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--pdp-ink);
}

/* Orange-600 come nel mockup (text-orange-600 su "Personal"/"Family" nell'H1):
   testo grande, la regola dei 3.6:1 di --aml-brand-vivid vale qui. */
.pdp-h1 span { color: var(--aml-brand-vivid); }

.pdp-page .v2-product-code {
    margin: 0 0 12px;
}

/* Il validatore pre-commit richiede la classe v2-hero__desc "nuda" tra H1 e codice. */
.pdp-hero__info .v2-hero__desc {
    margin: 0 0 16px;
    max-width: 46ch;
    font-size: var(--aml-text-base);
    line-height: 1.6;
    color: var(--pdp-muted);
}

/* Blocco a piena larghezza sotto immagine+tab (non piu' incolonnato accanto
   all'immagine), con filetto sopra — come nel mockup di riferimento. */
.pdp-keylist {
    list-style: none;
    margin: 0 0 18px;
    padding-top: 14px;
    padding-inline: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--pdp-border);
    display: grid;
    gap: 7px;
}

/* Due colonne come nel concept: i punti chiave sono frasi brevi, in colonna
   singola sprecavano meta' larghezza dell'hero. Sotto i 640px torna a una. */
@media (min-width: 640px) {
    .pdp-keylist {
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
    }
}

/* Marker fuori flusso: il contenuto inline (em, strong…) resta nella stessa riga. */
.pdp-keylist li {
    position: relative;
    padding-left: 24px;
    font-size: var(--aml-text-xs, 12px);
    line-height: 1.5;
    color: var(--aml-slate-700);
}

.pdp-keylist li strong {
    color: var(--aml-slate-900);
    font-weight: 700;
}

.pdp-keylist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--aml-orange-600);
    font-weight: 800;
    line-height: 1.5;
}

.pdp-keylist em {
    font-style: normal;
    color: var(--pdp-muted);
}

.pdp-guide-link {
    margin: 12px 0 0;
    font-size: var(--aml-text-xs, 12px);
}

.pdp-guide-link a,
.pdp-guide-link [data-pdp-guide] {
    color: var(--aml-orange-700);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.pdp-guide-link a:hover,
.pdp-guide-link [data-pdp-guide]:hover {
    color: var(--aml-orange-800);
    text-decoration: underline;
}

/* ── CARD D'ACQUISTO (colonna destra dell'hero, sticky) ───────────────────── */
.pdp-buy {
    position: sticky;
    top: calc(var(--aml-header-offset, 88px) + 16px);
    min-width: 0;
    padding: 24px;
    border-radius: var(--pdp-radius);
    /* Pannello carta su pagina bianca, come nel mockup. */
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

@media (max-width: 1024px) {
    .pdp-buy { position: static; }
}

.pdp-buy__label {
    margin: 0 0 8px;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--page-accent);
}

.pdp-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 6px;
}

.pdp-price-sale {
    font-size: clamp(2rem, 4.5vw, 2.5rem);
    font-weight: var(--aml-weight-price);
    line-height: 1;
    color: var(--page-text);
    white-space: nowrap;
}

.pdp-price-msrp {
    font-size: var(--aml-text-base);
    color: var(--pdp-muted);
    text-decoration: line-through;
}

/* Ruolo "risparmio": e' l'unico elemento oltre alla CTA che puo' essere
   arancione. I colori di prima venivano dal tema scuro ritirato — verde acceso
   su verde traslucido — e sul fondo chiaro erano illeggibili. */
.pdp-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--aml-save-bg);
    border: 1px solid var(--aml-save-border);
    font-size: var(--aml-text-xs);
    font-weight: 800;
    color: var(--aml-save-ink);
}

/* Etichetta prezzo e badge sconto sulla stessa riga, come nel mockup. */
.pdp-buy__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Riga risparmio, sopra la nota tasse/consegna — in evidenza, come nel
   mockup di riferimento (arancione, prima del testo neutro sotto). Orange-700
   come "Risparmi €X..." nel mockup, non 800: --aml-save-ink resta all'800
   perche' lo usa anche il badge sconto, che quel tono lo vuole davvero. */
.pdp-price-save {
    margin: 0 0 4px;
    font-size: var(--aml-text-sm);
    font-weight: 600;
    color: var(--aml-brand);
}

.pdp-price-save strong { font-weight: 800; }

.pdp-price-note {
    margin: 0 0 14px;
    font-size: var(--aml-text-sm);
    line-height: 1.5;
    color: var(--pdp-muted);
}

.pdp-price-note strong { color: var(--page-text); font-weight: 700; }

/* Regione attivazione / meta prodotto — token --aml-* (design system page.css) */
/* .pdp-price-meta: stesso aspetto di .pdp-meta-row (i chip generati dal
   template, es. costo per persona) ma classe diversa apposta — add-
   activation-region-badge.py riconosce una pagina gia' patchata cercando
   "pdp-meta-row"+"pdp-meta-chip" nel testo; condividere la classe farebbe
   credere allo script che il badge regione c'e' gia' e lo farebbe saltare. */
.pdp-meta-row,
.pdp-price-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    width: 100%;
}

.pdp-meta-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.5em;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--aml-line);
    border-radius: var(--aml-radius-sm);
    background: var(--aml-trust-bg);
    font-size: var(--aml-text-sm);
    line-height: 1.4;
    color: var(--aml-ink);
}

.pdp-meta-chip strong {
    font-weight: 700;
    color: var(--aml-ink);
}

.pdp-cross {
    margin: 0 0 12px;
    font-size: var(--aml-text-sm);
}

.pdp-cross a {
    color: var(--aml-brand);
    font-weight: 650;
}

.pdp-cross a:hover {
    text-decoration: underline;
}

.pdp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    border: none;
    border-radius: 6px;
    background: var(--aml-cta-bg);
    color: var(--aml-cta-ink);
    font-family: inherit;
    font-size: var(--aml-text-base);
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

.pdp-btn-primary:hover { background: var(--aml-cta-bg-hover); }

.pdp-btn-primary:active { background: var(--pdp-navy); }

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

.pdp-btn-primary svg { width: 20px; height: 20px; flex-shrink: 0; }

.pdp-btn-primary.is-added {
    background: var(--pdp-ok);
}

.pdp-delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: var(--aml-text-sm);
    font-weight: 600;
    color: var(--page-text);
    text-align: center;
}

.pdp-delivery svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--pdp-ok); }

/* Riquadro consegna: contenitore piatto sotto la CTA. */
.pdp-buy .pdp-delivery {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
    font-size: var(--aml-text-sm);
}

/* Etichetta dei metodi di pagamento, come nel prototipo. */
.pdp-pay__label {
    margin: 0 0 9px;
    font-size: var(--aml-text-xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pdp-muted);
}

.pdp-pay__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Nella card prezzo la riga consegna occupa tutta la larghezza, sotto prezzo e CTA.
   La card è bianca in tema chiaro: il colore dell'hero scuro sarebbe illeggibile. */
.v2-pricing-card .pdp-delivery {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin: 0;
    text-align: left;
}

.pdp-assur {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--pdp-border);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 16px;
    font-size: var(--aml-text-sm);
    color: var(--pdp-muted);
}

.pdp-assur li {
    position: relative;
    padding-left: 20px;
    line-height: 1.4;
}

.pdp-assur li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pdp-ok);
    font-weight: 700;
}

@media (max-width: 520px) {
    .pdp-assur { grid-template-columns: 1fr; }
}

/* .pdp-pay: etichetta + riga loghi in colonna. Oggi lo emette solo
   apply-payment-logos.py sulle pagine scritte a mano (windows-11-home):
   le schede generate mostrano i pagamenti nella trustbar sotto l'hero. */
.pdp-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pdp-border);
}

.pdp-pay__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 16px;
    opacity: 0.75;
}

.pdp-pay__logo[data-brand='PayPal'] { width: 52px; }

.pdp-pay__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── SEZIONI ──────────────────────────────────────────────────────────────── */
.pdp-sec {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) 0;
}

.pdp-sec--tight { padding-block: clamp(28px, 4vw, 44px); }

.pdp-sec__eyebrow {
    margin: 0 0 8px;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Orange-600 come nel mockup (tutti gli eyebrow: "PER OGNI TUA ESIGENZA",
       "FACILE E VELOCE", "DOMANDE FREQUENTI" usano text-orange-600, non 700). */
    color: var(--aml-brand-vivid);
}

.pdp-sec__title {
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--page-text);
}

.pdp-sec__sub {
    margin: 0 0 28px;
    max-width: 68ch;
    font-size: var(--aml-text-base);
    line-height: 1.6;
    color: var(--pdp-muted);
}

.pdp-overview__copy {
    display: grid;
    gap: 14px;
    max-width: 82ch;
    font-size: var(--aml-text-base);
    line-height: 1.75;
    color: var(--pdp-muted);
}

.pdp-overview__copy p { margin: 0; }

.pdp-divider {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--pdp-border);
}

/* ── COSA RICEVI: fascia numerica ─────────────────────────────────────────── */
.pdp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-stat {
    padding: 20px 20px 18px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
}

.pdp-stat__value {
    /* Neutro, non accento: sono numeri descrittivi (persone, TB, mesi), non
       un'azione o uno sconto — l'arancione qui competerebbe con la CTA. */
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--page-text);
}

.pdp-stat__label {
    display: block;
    margin-top: 6px;
    font-size: var(--aml-text-base);
    font-weight: 700;
    color: var(--page-text);
}

.pdp-stat__note {
    display: block;
    margin-top: 4px;
    font-size: var(--aml-text-sm);
    line-height: 1.45;
    color: var(--pdp-muted);
}

@media (max-width: 900px) {
    .pdp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .pdp-stats { grid-template-columns: 1fr; }
}

/* ── BENEFICI (sezione "perché sceglierlo" - Stile Editoriale/Minimal) ──────── */
.pdp-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 0;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

/* Benefici a layout aperto ed editoriale: niente box, ombre o angoli arrotondati.
   L'unico bordo e' il separatore orizzontale fra le righe della griglia a due
   colonne; l'ultima riga ne resta priva sia quando e' piena (conteggio pari) sia
   quando resta spaiata (conteggio dispari). */
.pdp-card {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    padding: 24px 0;
    border: none;
    border-bottom: 1px solid var(--pdp-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.pdp-card:last-child,
.pdp-card:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.pdp-card:hover {
    box-shadow: none;
    transform: none;
}

/* Icona vettoriale pura senza box o quadrati di sfondo */
.pdp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: 1;
    width: 24px;
    height: 24px;
    align-self: center;
    margin: 0;
    background: transparent !important;
    border-radius: 0;
    color: #007a87; /* Ottanio brand ESET / clean dark teal */
    font-size: var(--aml-text-base);
    line-height: 1;
    flex-shrink: 0;
}

.pdp-card__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.pdp-card__icon--a,
.pdp-card__icon--blue { color: #007a87; background: transparent !important; }
.pdp-card__icon--teal { color: #0d9488; background: transparent !important; }
.pdp-card__icon--b,
.pdp-card__icon--purple { color: #0284c7; background: transparent !important; }
.pdp-card__icon--dark { color: var(--pdp-navy); background: transparent !important; }

.pdp-card__title {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--page-text);
}

.pdp-card__body {
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    font-size: var(--aml-text-sm);
    line-height: 1.6;
    color: var(--pdp-muted);
}

@media (max-width: 768px) {
    .pdp-cards {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .pdp-card {
        padding: 20px 0;
    }
    /* Colonna singola: il separatore torna su ogni card tranne l'ultima. */
    .pdp-card:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid var(--pdp-border);
    }
    .pdp-card:last-child {
        border-bottom: none;
    }
}

/* ── TABELLE DI CONFRONTO E SPECIFICHE ─────────────────────────────────────── */
.pdp-tablewrap {
    overflow-x: auto;
    border-radius: var(--pdp-radius);
    border: 1px solid var(--pdp-border);
    background: var(--pdp-surface);
}

.pdp-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: var(--aml-text-base);
}

.pdp-table th,
.pdp-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pdp-border);
    line-height: 1.45;
}

.pdp-table tbody tr:last-child th,
.pdp-table tbody tr:last-child td { border-bottom: none; }

.pdp-table thead th {
    font-size: var(--aml-text-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pdp-muted);
    background: var(--pdp-surface-2);
    white-space: nowrap;
}

.pdp-table tbody th {
    font-weight: 600;
    color: var(--page-text);
}

.pdp-table td {
    width: 22%;
    text-align: center;
    color: var(--pdp-muted);
}

.pdp-table thead th:not(:first-child) { text-align: center; }

.pdp-table .pdp-yes { color: var(--pdp-ok); font-weight: 800; }

.pdp-table .pdp-no { color: var(--page-text-muted, #888); font-weight: 700; }

/* Stile aperto per scheda tecnica / requisiti di sistema (stile Apple / Logitech) */
.pdp-tablewrap--open,
.pdp-tablewrap:has(.pdp-table--specs) {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow-x: visible;
}

.pdp-table--specs {
    min-width: 0;
    width: 100%;
}

.pdp-table--specs thead th {
    padding: 10px 0;
    background: transparent;
    border-top: none;
    border-bottom: 2px solid var(--pdp-navy);
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pdp-muted);
}

.pdp-table--specs thead th:not(:first-child) {
    text-align: left;
}

.pdp-table--specs tbody th,
.pdp-table--specs tbody td {
    padding: 16px 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--pdp-border);
    line-height: 1.5;
}

.pdp-table--specs tbody tr:last-child th,
.pdp-table--specs tbody tr:last-child td {
    border-bottom: 1px solid var(--pdp-border);
}

.pdp-table--specs tbody th {
    width: 32%;
    font-weight: 700;
    color: var(--pdp-navy);
    font-size: var(--aml-text-base);
}

.pdp-table--specs tbody td {
    width: auto;
    text-align: left;
    color: var(--page-text);
    font-weight: 500;
    font-size: var(--aml-text-base);
}

.pdp-table tbody tr.pdp-row--flag th,
.pdp-table tbody tr.pdp-row--flag td {
    background: color-mix(in srgb, var(--page-accent) 7%, transparent);
}

.pdp-table__hint {
    display: block;
    margin-top: 3px;
    font-size: var(--aml-text-xs);
    font-weight: 500;
    color: var(--pdp-muted);
}

.pdp-table-foot {
    margin: 12px 0 0;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--pdp-muted);
}

.pdp-table-foot a {
    color: var(--page-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── ALTRE APP (elenco a comparsa dentro le tab dell'hero) ───────────────────
   Le prime 6 app vivono nelle tab qui sopra; questo e' solo l'elenco delle
   restanti, aperto su richiesta — righe piatte con hairline, non piu' una
   card per app: era una griglia a se' che duplicava le tab, tolta dopo il
   confronto col mockup (le app compaiono una volta sola). */
.pdp-apps {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-app {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--pdp-border);
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--page-text);
    text-align: left;
}

.pdp-app:last-child { border-bottom: none; }

.pdp-app img { width: 24px; height: 24px; }

.pdp-apps-more {
    margin-top: 12px;
    border-radius: var(--pdp-radius);
    border: 1px solid var(--pdp-border);
    background: var(--pdp-surface-2);
}

.pdp-apps-more > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--page-accent);
    cursor: pointer;
    list-style: none;
}

.pdp-apps-more > summary::-webkit-details-marker { display: none; }

.pdp-apps-more > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.pdp-apps-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.pdp-apps-more > summary:focus-visible { outline: 2px solid var(--page-accent); outline-offset: -2px; }

.pdp-apps-more__body { padding: 0 16px 16px; }

.pdp-apps-more .pdp-apps { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 760px) {
    .pdp-apps,
    .pdp-apps-more .pdp-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
    .pdp-apps,
    .pdp-apps-more .pdp-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── SPLIT immagine + testo (55 / 45) ─────────────────────────────────────── */
.pdp-split {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: clamp(20px, 3.5vw, 40px);
    align-items: center;
}

.pdp-split__media {
    margin: 0;
    border-radius: var(--pdp-radius);
    overflow: hidden;
    border: 1px solid var(--pdp-border);
}

.pdp-split__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.pdp-split__body h2 { margin-top: 0; }

/* Sei postazioni: la ripetizione la fa la griglia, non sei righe di testo uguali. */
.pdp-seats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
}

.pdp-seat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
    text-align: center;
}

.pdp-seat__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--page-text) 8%, transparent);
    color: var(--pdp-muted);
}

.pdp-seat__avatar svg { width: 20px; height: 20px; }

.pdp-seat__role {
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--page-text);
    line-height: 1.2;
}

.pdp-seat__quota {
    font-size: var(--aml-text-xs);
    font-weight: 600;
    color: var(--pdp-muted);
}

/* Il titolare è l'unica postazione diversa: lo si vede prima di leggere. */
.pdp-seat--owner {
    border-color: color-mix(in srgb, var(--page-accent) 45%, transparent);
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
}

.pdp-seat--owner .pdp-seat__avatar {
    background: var(--page-accent);
    color: #fff;
}

/* Nessun badge: sballerebbe l'altezza della prima riga. La differenza sta nel testo. */
.pdp-seat--owner .pdp-seat__quota b {
    color: var(--page-accent);
    font-weight: 800;
}

.pdp-seats__foot {
    margin: 12px 0 0;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--pdp-muted);
}

@media (max-width: 1024px) {
    .pdp-seats { gap: 8px; }

    .pdp-seat { padding: 12px 6px 10px; }

    .pdp-seat__role { font-size: var(--aml-text-sm); }
}

@media (max-width: 420px) {
    .pdp-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .pdp-split { grid-template-columns: 1fr; }
}

/* ── COME FUNZIONA ────────────────────────────────────────────────────────── */
.pdp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pdp-step;
}

/* Flat, come nel mockup: numero grande in testo (non un badge/cerchio),
   titolo, corpo — impilati, senza riquadro. */
.pdp-step {
    padding: 0;
}

.pdp-step::before {
    counter-increment: pdp-step;
    content: counter(pdp-step) ".";
    display: block;
    margin: 0 0 6px;
    font-size: var(--aml-text-h3);
    font-weight: 800;
    /* Orange-600 come nel mockup ("01." "02." "03." sono text-orange-600). */
    color: var(--aml-brand-vivid);
    line-height: 1;
}

.pdp-step h3 {
    margin: 0 0 5px;
    font-size: var(--aml-text-base);
    font-weight: 700;
    color: var(--page-text);
}

.pdp-step p {
    margin: 0;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--pdp-muted);
}

.pdp-step a { color: var(--page-accent); font-weight: 600; }

@media (max-width: 820px) {
    .pdp-steps { grid-template-columns: 1fr; }
}

.pdp-note {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: var(--pdp-radius);
    border: 1px solid color-mix(in srgb, var(--aml-ok) 28%, transparent);
    background: var(--aml-ok-bg);
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--page-text);
}

.pdp-note svg { width: 20px; height: 20px; color: var(--aml-ok); }

.pdp-note strong { font-weight: 800; }

/* Trustpilot Micro TrustBox nella buy card (sotto CTA) */
.pdp-buy-trustpilot {
    margin: 12px 0 4px;
    min-height: 40px;
    width: 100%;
}

.pdp-buy-trustpilot .trustpilot-widget {
    min-height: 40px;
}

.pdp-page .product-trustpilot {
    max-width: 100%;
    padding-top: 0;
}

.pdp-page .product-trustpilot__fallback { margin-bottom: 0; }

/* ── FAQ per argomento (override del componente condiviso) ────────────────── */
.pdp-page .home-faq .home-section-title,
.pdp-faq__title {
    font-family: var(--font-sans);
    text-align: left;
    background: none;
    -webkit-text-fill-color: var(--page-text);
    color: var(--page-text);
}

.pdp-faq-group + .pdp-faq-group { margin-top: 26px; }

.pdp-faq-group__title {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: var(--aml-text-sm);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--page-accent);
}

.pdp-page .home-faq-list { max-width: 100%; }

@media (min-width: 1024px) {
    .pdp-page .home-faq-list { max-width: 100%; }
}

/* Accordion secondario (requisiti / condizioni): stessa meccanica, peso minore */
.pdp-acc .home-faq-item { background: transparent; box-shadow: none; }

.pdp-acc .home-faq-item summary { font-size: var(--aml-text-base); font-weight: 700; }

.pdp-acc .home-faq-item summary::before { content: '+'; }

.pdp-acc .home-faq-body { font-size: var(--aml-text-sm); }

/* ── BARRA STICKY COMPATTA (desktop) / BARRA INFERIORE (mobile) ───────────── */

/* Superficie piatta: il componente condiviso usa vetro smerigliato (blur +
   saturate) e un'ombra tinta d'accento. Override scopato su .pdp-page, così le
   pagine non ancora convertite restano invariate. */
.pdp-page .product-sticky-cta {
    background: var(--pdp-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    border-bottom: 1px solid var(--pdp-border);
    box-shadow: none;
}

.pdp-page .product-sticky-cta.product-sticky-cta--visible {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* Titolo e prezzi usano i token globali del sito (--page-text ecc.): fissati
   sopra a livello di .pdp-page, restano leggibili anche se l'utente ha il
   tema scuro salvato da un'altra pagina non ancora convertita. */
.pdp-page .product-sticky-cta__title,
.pdp-page .product-sticky-cta__sale { color: var(--page-text); }

.pdp-page .product-sticky-cta__msrp { color: var(--pdp-muted); }

.pdp-page .product-sticky-cta__thumb {
    background: var(--pdp-surface-2);
    border-color: var(--pdp-border);
}

.pdp-page .product-sticky-cta__inner {
    max-width: var(--pdp-maxw);
    min-height: 0;
    padding: 14px var(--pdp-gutter);
    gap: 16px;
    flex-wrap: nowrap;
}

.pdp-page .product-sticky-cta__title {
    font-size: var(--aml-text-base);
    font-weight: 700;
}

.pdp-page .product-sticky-cta__prices {
    padding: 0;
    border: none;
    background: none;
    gap: 10px;
}

.pdp-page .product-sticky-cta__sale { font-size: 1.35rem; }

.pdp-page .product-sticky-cta__msrp { font-size: var(--aml-text-base); }

.pdp-page .product-sticky-cta .btn-primary {
    padding: 0.8rem 1.6rem;
    font-size: var(--aml-text-base);
}

.pdp-page .product-sticky-cta .btn-primary svg { width: 20px; height: 20px; }

/* L'header principale si ritira quando compare la barra prodotto: su un notebook
   header + barra + contenuto costavano ~150px di altezza utile. */
.pdp-page ecommerce-header {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (min-width: 769px) {
    html.pdp-nav-hidden .pdp-page ecommerce-header { transform: translateY(-100%); }

    html.pdp-nav-hidden .product-sticky-cta { top: 0; }

    .pdp-page .product-sticky-cta { transition-property: transform, opacity, box-shadow, top; }
}

@media (max-width: 768px) {
    /* Barra inferiore: prezzo + CTA, niente sottrazione di altezza in alto. */
    .pdp-page .product-sticky-cta {
        top: auto;
        bottom: 0;
        transform: translateY(115%);
        border-top: 1px solid var(--page-border);
        border-bottom: none;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
    }

    .pdp-page .product-sticky-cta.product-sticky-cta--visible {
        transform: translateY(0);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.26);
    }

    .pdp-page .product-sticky-cta__inner {
        padding: 12px max(0.85rem, env(safe-area-inset-left, 0px))
            calc(12px + env(safe-area-inset-bottom, 0px))
            max(0.85rem, env(safe-area-inset-right, 0px));
        gap: 12px;
    }

    /* Nome prodotto + riga di consegna: spazio troppo stretto per entrambi
       insieme al prezzo e alla CTA, restano fuori come gia' faceva il titolo.
       La miniatura resta: senza il titolo e' l'unico riferimento visivo al
       prodotto nella barra. */
    .pdp-page .product-sticky-cta__name { display: none; }

    .pdp-page .product-sticky-cta__thumb {
        width: 34px;
        height: 34px;
    }

    .pdp-page .product-sticky-cta__prices {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }

    .pdp-page .product-sticky-cta__msrp {
        font-size: var(--aml-text-sm);
        white-space: nowrap;
    }

    .pdp-page .product-sticky-cta__sale {
        font-size: var(--aml-text-lg);
        white-space: nowrap;
    }

    .pdp-page .product-sticky-cta .btn-primary {
        flex: 0 0 auto;
        padding: 0.75rem 1.3rem;
        font-size: var(--aml-text-base);
        gap: 0.4rem;
    }

    .pdp-page .product-sticky-cta .btn-primary svg { width: 17px; height: 17px; }
}

@media (max-width: 380px) {
    .pdp-page .product-sticky-cta__msrp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-page ecommerce-header,
    .pdp-btn-primary { transition: none; }

    .pdp-btn-primary:hover { transform: none; }
}

/* Il badge percentuale era nascosto ("sconto sobrio: prezzo barrato +
   risparmio in euro bastano"). Il mockup di riferimento lo mostra accanto
   all'etichetta prezzo, quindi torna visibile: la regola qui sotto e' stata
   rimossa di proposito, non persa. Per tornare indietro basta rimettere
   .pdp-page .pdp-price-badge { display: none; } */

/* ── FASCIA DI FIDUCIA (sotto l'hero, su tutte le pagine prodotto) ────────── */
.pf-trustbar {
    border-bottom: 1px solid var(--pdp-border);
    background: var(--pdp-surface-2);
    padding: 18px 0;
}

.pf-trustbar__inner {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: 0 var(--pdp-gutter);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0;
}

.pf-trustbar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 24px;
    border: none;
    border-right: 1px solid var(--pdp-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.pf-trustbar__item:first-child {
    padding-left: 0;
}

.pf-trustbar__item:last-child {
    border-right: none;
    padding-right: 0;
}

.pf-trustbar__item:hover {
    box-shadow: none;
    transform: none;
}

.pf-trustbar__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--pdp-navy);
}

.pf-trustbar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pf-trustbar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-trustbar__text strong {
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--pdp-navy);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.pf-trustbar__text > span {
    font-size: var(--aml-text-xs);
    color: var(--pdp-muted);
    line-height: 1.35;
}

@media (max-width: 992px) {
    .pf-trustbar__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 16px;
    }
    .pf-trustbar__item {
        padding: 4px 16px;
    }
    .pf-trustbar__item:nth-child(2n+1) {
        padding-left: 0;
    }
    .pf-trustbar__item:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 580px) {
    .pf-trustbar__inner {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .pf-trustbar__item {
        border-right: none;
        padding: 2px 0;
    }
}

/* ── FAQ/REQUISITI: niente cerchi "?" (il chevron basta), due colonne
   indipendenti invece di una griglia a righe. Lo stile "a card" (bordo
   radius + ombra) non si applica più qui: la lista con separatori arriva
   già dalla regola base .home-faq-item in page.css, condivisa da tutto il
   sito — niente più override che la smentiva solo sulle PDP. ──────────────── */
.pdp-page .home-faq-item summary::before { display: none; }

.pdp-page .pf-faq-col { display: contents; }

@media (min-width: 1024px) {
    .pdp-page .home-faq-list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .pdp-page .pf-faq-col {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ── FAQ principale: nessun gruppo, una sola .home-faq-list piatta. Lo
   stile (separatori, non card) arriva ormai dalla regola base condivisa in
   page.css — qui serve solo forzare il layout a griglia: senza .pf-faq-col,
   la regola .pdp-page qui sopra metterebbe le domande in un'unica riga
   invece che a due colonne. L'ID batte le regole a due classi qui sopra. */
#faq .home-faq-list {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    #faq .home-faq-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 40px;
    }
}

/* ── CONCEPT RETAIL: badge hero, selettore versione, tab app ────────────────
   Blocchi introdotti con il passaggio allo stile del concept. Consumano i
   token globali tramite gli alias --pdp-*: nessun literal in questo file. */

.pdp-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.pdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--aml-radius-sm, 6px);
    background: var(--aml-save-bg);
    border: 1px solid var(--aml-save-border);
    color: var(--aml-save-ink);
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pdp-badges .v2-product-code {
    margin: 0 0 0 auto;
}

/* Selettore versione: stesso aspetto del segmented control del concept, ma la
   variante non attiva e' un link alla sua pagina — vedi VARIANT_SETS in
   scripts/product_page_lib.py per il perche'. */
.pdp-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 16px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
}

.pdp-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 8px;
    border-radius: calc(var(--pdp-radius) - 2px);
    text-align: center;
    text-decoration: none;
    color: var(--pdp-muted);
    font-size: var(--aml-text-sm);
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdp-plan b {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pdp-plan span {
    font-size: var(--aml-text-xs);
    font-weight: 500;
}

.pdp-plan:hover {
    background: var(--pdp-surface);
    color: var(--pdp-ink);
}

.pdp-plan.is-current {
    background: var(--pdp-surface);
    color: var(--pdp-ink);
    border: 1px solid var(--pdp-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.pdp-plan:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
}

/* Tab app: radio + label, nessun JS. Il pannello visibile e' scelto dal
   :checked del radio corrispondente, cosi' le tab restano usabili da
   tastiera e non dipendono dal caricamento di uno script.

   La riga delle tab (.pdp-apptabs__row) scorre in orizzontale a QUALSIASI
   larghezza, non solo sotto i 640px: con 6 app (Word/Excel/PowerPoint/
   Outlook/OneDrive/Teams, contro le 4 del mockup di riferimento) la riga
   andava a capo su piu' righe gia' a schermo intero — tagliare le app per
   farle stare su una riga sola avrebbe voluto dire mostrare un elenco meno
   completo di quello vero. Lo scroll tiene tutte le app e risolve il
   problema visivo senza toccare il contenuto. */
.pdp-apptabs {
    margin: 22px 0 16px;
}

/* Frecce di scroll: su desktop non c'e' lo swipe del touch, e senza la
   scrollbar (nascosta sotto) non resta nessun indizio che ci sono altre app
   fuori dallo schermo. Mostrate via JS (product-v3.js) solo se la riga scorre
   davvero, nascoste su touch dove lo swipe basta gia'. */
.pdp-apptabs__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdp-apptabs__wrap .pdp-apptabs__row {
    flex: 1 1 auto;
    min-width: 0;
}

.pdp-apptabs__nav {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--pdp-border);
    background: var(--pdp-surface);
    color: var(--pdp-ink);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pdp-apptabs__nav svg {
    width: 16px;
    height: 16px;
}

.pdp-apptabs__nav:hover {
    background: var(--pdp-surface-2);
}

.pdp-apptabs__nav:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.pdp-apptabs__wrap--scrollable .pdp-apptabs__nav {
    display: inline-flex;
}

@media (hover: none) and (pointer: coarse) {
    .pdp-apptabs__nav { display: none !important; }
}

/* Stesso segmented control di .pdp-plans (selettore Personal/Family): un solo
   linguaggio visivo per i "pulsanti a pillola" della pagina, non un pattern
   nuovo. Lo scroll orizzontale resta (vedi commento sopra sulle 6 app), ma
   senza la barra di scroll grigia del browser — resta scorrevole con drag,
   swipe e tastiera, solo l'indicatore visivo sparisce. */
.pdp-apptabs__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pdp-apptabs__row::-webkit-scrollbar {
    display: none;
}

.pdp-apptab__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pdp-apptab {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 8px 12px;
    border-radius: calc(var(--pdp-radius) - 2px);
    color: var(--pdp-muted);
    font-size: var(--aml-text-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pdp-apptab:hover {
    color: var(--pdp-ink);
}

.pdp-apppanels {
    padding: 14px 0 0;
}

.pdp-apppanel {
    display: none;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--aml-text-base);
    font-weight: 700;
    color: var(--pdp-ink);
}

.pdp-apptab__radio:focus-visible + .pdp-apptab {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
}

/* Tab attiva e pannello corrispondente. Una coppia di regole per ogni chiave
   nota di APP_NAMES (product_page_lib.py): l'elenco e' chiuso, quindi si puo'
   risolvere in CSS statico senza JS. */
#pdp-apptab-word:checked ~ label[for="pdp-apptab-word"],
#pdp-apptab-excel:checked ~ label[for="pdp-apptab-excel"],
#pdp-apptab-powerpoint:checked ~ label[for="pdp-apptab-powerpoint"],
#pdp-apptab-outlook:checked ~ label[for="pdp-apptab-outlook"],
#pdp-apptab-onenote:checked ~ label[for="pdp-apptab-onenote"],
#pdp-apptab-onedrive:checked ~ label[for="pdp-apptab-onedrive"],
#pdp-apptab-teams:checked ~ label[for="pdp-apptab-teams"],
#pdp-apptab-defender:checked ~ label[for="pdp-apptab-defender"],
#pdp-apptab-copilot:checked ~ label[for="pdp-apptab-copilot"],
#pdp-apptab-designer:checked ~ label[for="pdp-apptab-designer"],
#pdp-apptab-clipchamp:checked ~ label[for="pdp-apptab-clipchamp"],
#pdp-apptab-publisher:checked ~ label[for="pdp-apptab-publisher"],
#pdp-apptab-access:checked ~ label[for="pdp-apptab-access"] {
    /* Pillola bianca sollevata, stessa resa di .pdp-plan.is-current — non piu'
       la sottolineatura arancione del mockup, per coerenza col resto della
       pagina dopo il passaggio a segmented control. */
    background: var(--pdp-surface);
    color: var(--pdp-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* :has() invece di ~: da quando le tab sono in .pdp-apptabs__row (per lo
   scroll orizzontale), il radio non e' piu' fratello diretto di .pdp-apppanels
   ma nipote — il combinatore ~ non li raggiunge piu', serve risalire al
   contenitore comune. */
.pdp-apptabs:has(#pdp-apptab-word:checked) .pdp-apppanels .pdp-apppanel[data-app="word"],
.pdp-apptabs:has(#pdp-apptab-excel:checked) .pdp-apppanels .pdp-apppanel[data-app="excel"],
.pdp-apptabs:has(#pdp-apptab-powerpoint:checked) .pdp-apppanels .pdp-apppanel[data-app="powerpoint"],
.pdp-apptabs:has(#pdp-apptab-outlook:checked) .pdp-apppanels .pdp-apppanel[data-app="outlook"],
.pdp-apptabs:has(#pdp-apptab-onenote:checked) .pdp-apppanels .pdp-apppanel[data-app="onenote"],
.pdp-apptabs:has(#pdp-apptab-onedrive:checked) .pdp-apppanels .pdp-apppanel[data-app="onedrive"],
.pdp-apptabs:has(#pdp-apptab-teams:checked) .pdp-apppanels .pdp-apppanel[data-app="teams"],
.pdp-apptabs:has(#pdp-apptab-defender:checked) .pdp-apppanels .pdp-apppanel[data-app="defender"],
.pdp-apptabs:has(#pdp-apptab-copilot:checked) .pdp-apppanels .pdp-apppanel[data-app="copilot"],
.pdp-apptabs:has(#pdp-apptab-designer:checked) .pdp-apppanels .pdp-apppanel[data-app="designer"],
.pdp-apptabs:has(#pdp-apptab-clipchamp:checked) .pdp-apppanels .pdp-apppanel[data-app="clipchamp"],
.pdp-apptabs:has(#pdp-apptab-publisher:checked) .pdp-apppanels .pdp-apppanel[data-app="publisher"],
.pdp-apptabs:has(#pdp-apptab-access:checked) .pdp-apppanels .pdp-apppanel[data-app="access"] {
    display: flex;
}

/* ── MODALE ATTIVAZIONE ─────────────────────────────────────────────────────
   <dialog> nativo: centratura, backdrop, focus trap e chiusura con Esc sono
   del browser. Qui c'e' solo la veste. */

.pdp-guide-link {
    margin: 4px 0 0;
    font-size: var(--aml-text-sm);
}

.pdp-guide-link a {
    color: var(--page-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.pdp-dialog {
    width: min(34rem, calc(100vw - 2rem));
    padding: 24px;
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface);
    color: var(--pdp-ink);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

.pdp-dialog::backdrop {
    background: color-mix(in srgb, var(--aml-navy) 55%, transparent);
}

.pdp-dialog__title {
    margin: 0 0 14px;
    font-size: var(--aml-text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pdp-dialog__steps {
    margin: 0;
    padding-left: 1.2em;
    display: grid;
    gap: 10px;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--pdp-muted);
}

.pdp-dialog__steps strong {
    display: block;
    color: var(--pdp-ink);
    font-weight: 700;
}

.pdp-dialog__steps a {
    color: var(--page-accent);
    font-weight: 600;
}

.pdp-dialog__foot {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--pdp-border);
    text-align: right;
}

.pdp-dialog__close {
    padding: 9px 16px;
    border: none;
    border-radius: calc(var(--pdp-radius) - 2px);
    background: var(--pdp-navy);
    color: var(--pdp-surface);
    font-family: inherit;
    font-size: var(--aml-text-sm);
    font-weight: 700;
    cursor: pointer;
}

.pdp-dialog__close:hover {
    background: var(--pdp-navy-2);
}

/* ── DISPONIBILITA' E CTA SECONDARIA ────────────────────────────────────────
   La disponibilita' e' verde, non arancione come nel concept: nella palette a
   tre ruoli l'arancione resta a CTA e sconto, il verde alla rassicurazione.
   Vedi i token --aml-trust-* in page.css. */

.pdp-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pdp-avail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

/* Verde fiducia, non arancione: "disponibile/consegna immediata" e' un
   segnale di stato/garanzia, non un'azione — regola dei tre ruoli stabilita
   in sessione. L'arancione resta riservato alla CTA. */
.pdp-avail__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--aml-trust-soft);
    color: var(--aml-trust-ink);
    font-size: var(--aml-text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdp-avail__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aml-trust-ink);
    flex-shrink: 0;
    animation: pdpPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pdpPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(0.85); }
}

.pdp-avail__eta {
    font-size: var(--aml-text-xs);
    font-weight: 500;
    color: var(--pdp-muted);
}

/* Ghost button per "Aggiungi al carrello" */
.pdp-btn-ghost,
.pdp-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid var(--aml-slate-300);
    background: transparent;
    color: var(--aml-slate-800);
    font-family: inherit;
    font-size: var(--aml-text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pdp-btn-ghost:hover,
.pdp-btn-secondary:hover {
    background: var(--aml-slate-100);
    border-color: var(--aml-slate-400);
    color: var(--aml-slate-900);
}

.pdp-btn-ghost:active,
.pdp-btn-secondary:active {
    background: var(--aml-slate-200);
}

.pdp-btn-ghost svg,
.pdp-btn-secondary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--aml-orange-600);
}

.pdp-btn-ghost.is-added,
.pdp-btn-secondary.is-added {
    background: var(--aml-ok-bg);
    border-color: var(--aml-ok);
    color: var(--aml-ok);
}

.pdp-btn-ghost.is-added svg,
.pdp-btn-secondary.is-added svg {
    color: var(--aml-ok);
}

/* PayPal Express: terzo percorso sotto le due CTA, separato da un filetto
   semplice (niente "oppure" — vedi report UX/CRO PayPal Express Checkout). */
.pdp-paypal-sep {
    margin: 16px 0 14px;
    border: none;
    border-top: 1px solid var(--pdp-border);
}

.pdp-paypal-express__buttons {
    min-height: 45px;
}

.pdp-paypal-express__loading {
    margin: 8px 0 0;
    font-size: var(--aml-text-sm);
    color: var(--pdp-muted);
    text-align: center;
}

.pdp-paypal-express__error {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--aml-danger-bg);
    color: var(--aml-danger);
    font-size: var(--aml-text-sm);
    font-weight: 600;
    text-align: center;
}

.pdp-paypal-express__error[hidden],
.pdp-paypal-express__loading[hidden] {
    display: none;
}

/* Discreta di proposito: spiega il bottone, non deve competere con le CTA. */
.pdp-paypal-express__microcopy {
    margin: 8px 0 0;
    font-size: var(--aml-text-xs);
    font-weight: 400;
    color: var(--pdp-muted);
    text-align: center;
}

/* Il pannello tiene solo le due garanzie principali: niente colonne, sono due
   righe che devono leggersi come chiusura della card. */
.pdp-buy .pdp-assur {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pdp-border);
}

/* Etichetta sopra il selettore versione, come nel mockup. */
.pdp-plans__label {
    margin: 0 0 6px;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pdp-muted);
}

/* Secondo badge dell'hero: stessa forma del primo, tono neutro per non
   aggiungere un terzo colore accanto ad arancione e verde. */
.pdp-badge--alt {
    background: var(--pdp-surface-2);
    border-color: var(--pdp-border);
    color: var(--pdp-ink);
}

/* Pannello della tab app: icona + nome + descrizione dell'app. */
.pdp-apppanel__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pdp-apppanel__desc {
    font-size: var(--aml-text-sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--pdp-muted);
}

/* Senza questa regola il <b> del nome app eredita "bolder" dal 700 di
   .pdp-apppanel e il browser lo risolve a 900 (tabella CSS2 bolder/lighter) —
   troppo pesante rispetto al font-semibold (600) del mockup. */
.pdp-apppanel__text b {
    font-weight: 600;
}

/* ── RECENSIONI TRUSTPILOT (reali, vedi REVIEWS_IT in product_page_lib.py) ──
   Flat come le altre sezioni: niente card, solo spazio e un hairline tra le
   colonne su desktop. Il link in alto porta alla pagina Trustpilot vera. */
.pdp-reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pdp-reviews__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: var(--aml-text-sm);
}

.pdp-reviews__tp {
    /* Verde Trustpilot (brand esterno, come il blu PayPal in checkout.css —
       non e' un colore del nostro design system, e' l'identita' reale del
       servizio). Font-bold (700) come nel mockup, non 800. */
    font-weight: 700;
    color: #059669;
    white-space: nowrap;
}

.pdp-reviews__stars {
    color: #FBBF24;
    letter-spacing: 0.05em;
}

/* Solo le stelle del riepilogo aggregato (dentro .pdp-reviews__rating) sono
   verdi come nel mockup — le stelle sulle singole recensioni restano ambra,
   la convenzione universale di rating. */
.pdp-reviews__rating .pdp-reviews__stars {
    color: #10B981;
}

.pdp-reviews__count {
    color: var(--pdp-muted);
    font-weight: 500;
}

.pdp-reviews__cta {
    font-size: var(--aml-text-sm);
    font-weight: 700;
    color: var(--page-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pdp-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.pdp-reviews__grid li {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: var(--pdp-radius);
    border: 1px solid var(--pdp-border);
    background: var(--pdp-surface-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pdp-reviews__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.pdp-reviews__grid .pdp-reviews__name {
    display: inline-block;
    font-weight: 700;
    color: var(--page-text);
    font-size: var(--aml-text-sm);
}

.pdp-reviews__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--aml-ok);
    background: var(--aml-ok-bg);
    padding: 2px 8px;
    border-radius: 12px;
}

.pdp-reviews__badge svg {
    flex-shrink: 0;
}

.pdp-reviews__grid .pdp-reviews__stars {
    display: block;
    margin: 4px 0 10px;
    font-size: 0.85rem;
    color: #f59e0b;
}

.pdp-reviews__grid p,
.pdp-reviews__grid .pdp-reviews__quote {
    margin: 0;
    font-size: var(--aml-text-sm);
    line-height: 1.6;
    color: var(--pdp-muted);
}

@media (max-width: 820px) {
    .pdp-reviews__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── CLEAN UNDERLINE TABS & INTERACTIVE APP WORKSPACE (MOCKUP ACCURATE) ── */
.pdp-tabs-clean {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--aml-slate-200);
    font-size: var(--aml-text-xs);
    font-weight: 700;
    color: var(--aml-slate-600);
    gap: 24px;
    margin-top: 22px;
    /* Sei tab non entrano nella larghezza di un telefono: senza scroll qui
       l'eccedenza (Copilot, OneDrive) veniva tagliata da .pdp-hero
       {overflow:hidden} e non era piu' raggiungibile. Stesso trattamento
       della variante semplice .pdp-apptabs__row, scrollbar nascosta. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pdp-tabs-clean::-webkit-scrollbar {
    display: none;
}

/* I bottoni non devono restringersi per far entrare tutto: si scorre. */
.pdp-tabs-clean .pdp-tab-btn {
    flex-shrink: 0;
}

.pdp-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--aml-slate-600);
    font-family: inherit;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pdp-tab-btn:hover {
    color: var(--aml-slate-900);
}

.pdp-tab-btn.active {
    color: var(--aml-orange-600);
    border-bottom-color: var(--aml-orange-600);
    font-weight: 800;
}

.pdp-tab-btn img,
.pdp-tab-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pdp-preview-workspace {
    padding: 16px 0 20px;
}

.pdp-preview-panel {
    display: none;
}

.pdp-preview-panel.active {
    display: block;
}

.pdp-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--aml-text-xs);
    color: var(--aml-slate-600);
    margin-bottom: 10px;
}

.pdp-preview-filename {
    font-weight: 600;
    color: var(--aml-slate-800);
}

.pdp-preview-copilot-tag {
    color: var(--aml-orange-700);
    background: var(--aml-orange-50);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.pdp-preview-docbox {
    padding: 16px;
    background: var(--aml-slate-50);
    border-radius: 12px;
    font-size: var(--aml-text-xs);
    color: var(--aml-slate-700);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 12px;
}

/* App senza demo dedicata (oggi Outlook, Copilot): stessa cornice del
   docbox ma senza corsivo, non e' una citazione tra virgolette. */
.pdp-preview-text {
    padding: 16px;
    background: var(--aml-slate-50);
    border-radius: 12px;
    font-size: var(--aml-text-xs);
    color: var(--aml-slate-700);
    line-height: 1.6;
}

.pdp-preview-callout {
    font-size: var(--aml-text-xs);
    color: var(--aml-orange-900);
    background: color-mix(in srgb, var(--aml-orange-50) 70%, transparent);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--aml-orange-100);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pdp-preview-callout svg {
    width: 16px;
    height: 16px;
    color: var(--aml-orange-600);
    flex-shrink: 0;
    margin-top: 1px;
}

.pdp-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
    font-size: var(--aml-text-xs);
}

.pdp-stat-card {
    padding: 12px;
    background: var(--aml-slate-50);
    border-radius: 12px;
}

.pdp-stat-card--highlight {
    background: color-mix(in srgb, var(--aml-orange-50) 80%, transparent);
    border: 1px solid var(--aml-orange-100);
}

.pdp-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--aml-slate-400);
    letter-spacing: 0.04em;
}

.pdp-stat-card--highlight .pdp-stat-label {
    color: var(--aml-orange-700);
}

.pdp-stat-val {
    font-weight: 800;
    color: var(--aml-slate-800);
    margin-top: 4px;
    font-size: 14px;
}

.pdp-stat-card--highlight .pdp-stat-val {
    color: var(--aml-orange-900);
}

.pdp-slide-preview {
    background: var(--aml-slate-900);
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    font-size: var(--aml-text-xs);
}

.pdp-slide-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--aml-orange-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.pdp-slide-title {
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 4px;
}

.pdp-slide-desc {
    font-size: 11px;
    color: var(--aml-slate-300);
}

.pdp-cloud-progress-wrap {
    margin-top: 8px;
}

.pdp-cloud-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--aml-text-xs);
    color: var(--aml-slate-600);
    font-weight: 500;
    margin-bottom: 6px;
}

.pdp-cloud-progress-info strong {
    color: var(--aml-orange-600);
    font-weight: 700;
}

.pdp-cloud-track {
    width: 100%;
    background: var(--aml-slate-100);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.pdp-cloud-bar {
    background: var(--aml-orange-500);
    height: 100%;
    border-radius: 999px;
    width: 34%;
}

/* ── CONFRONTO: hero, verdetti, tabella head-to-head ────────────────────────
   Usate dalle pagine "vs" (es. windows-11-home-vs-pro) e dalla sezione guida
   aggiunta in coda agli hub di categoria (vedi scripts/catalog_hub_content.py).
   Riusano le variabili --pdp-* definite da .pdp-page, quindi vanno sempre
   dentro un contenitore con quella classe. */
.cmp-hero {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
}

.cmp-hero__eyebrow {
    margin: 0 0 10px;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aml-brand-vivid);
}

.cmp-hero__title {
    margin: 0 0 14px;
    font-family: var(--font-sans);
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--page-text);
}

.cmp-hero__lede {
    margin: 0;
    max-width: 68ch;
    font-size: var(--aml-text-base);
    line-height: 1.65;
    color: var(--pdp-muted);
}

.cmp-verdict {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.cmp-verdict__card {
    padding: 22px 22px 20px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
}

.cmp-verdict__img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 14px;
}

.cmp-verdict__card h3 {
    margin: 0 0 8px;
    font-size: var(--aml-text-lg);
    font-weight: 800;
    color: var(--page-text);
}

.cmp-verdict__card p {
    margin: 0 0 14px;
    font-size: var(--aml-text-sm);
    line-height: 1.55;
    color: var(--pdp-muted);
}

.cmp-verdict__price {
    display: block;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    color: var(--page-text);
    margin-bottom: 14px;
}

.cmp-verdict__card .pdp-btn-ghost,
.cmp-verdict__card .pdp-btn-primary {
    width: 100%;
    justify-content: center;
}

.cmp-table-wrap {
    max-width: var(--pdp-maxw);
    margin: clamp(24px, 4vw, 36px) auto 0;
    overflow-x: auto;
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-radius);
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--aml-text-sm);
    min-width: 560px;
}

.cmp-table caption {
    text-align: left;
    padding: 14px 18px 0;
    font-size: var(--aml-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pdp-muted);
}

.cmp-table th,
.cmp-table td {
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid var(--pdp-border);
    vertical-align: top;
}

.cmp-table thead th {
    background: var(--pdp-surface-2);
    font-weight: 800;
    color: var(--page-text);
    white-space: nowrap;
}

.cmp-table tbody th {
    font-weight: 600;
    color: var(--page-text);
    white-space: nowrap;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

.cmp-table td {
    color: var(--pdp-muted);
}

.cmp-verdict--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .cmp-verdict--3 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .cmp-verdict { grid-template-columns: 1fr; }
}

/* ── GUIDA HUB: mini-confronto marche + link ai confronti dedicati ─────────
   Sezione in coda alle pagine categoria (antivirus, sistemi operativi,
   suite office): genera-a-runtime da build_catalog_page, non tocca il
   product-grid dinamico. */
.hub-guide {
    background: var(--aml-paper-2, var(--pdp-surface-2));
    padding-block: clamp(40px, 6vw, 64px);
}

.hub-guide__inner {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
}

.hub-guide__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.hub-guide__link-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--pdp-radius);
    background: var(--aml-surface);
    border: 1px solid var(--pdp-border);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.hub-guide__link-card:hover { border-color: var(--aml-brand-vivid); }

.hub-guide__link-card strong {
    font-size: var(--aml-text-base);
    color: var(--page-text);
}

.hub-guide__link-card span {
    font-size: var(--aml-text-sm);
    color: var(--pdp-muted);
}