/* 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
 */

/* ─────────────────────────────────────────────────────────────────────
   Componenti ereditati dalla v2 ancora in uso:
   titolo e codice articolo, indicatore di stock, blocco Trustpilot,
   galleria bento, scaffolding delle sezioni.
   ───────────────────────────────────────────────────────────────────── */

.v2-family-bridge__caption,
.bento-caption {
    background: rgba(255, 255, 255, 0.96);
}

.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: 0.78rem;
    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: 0.82rem;
    overflow-wrap: anywhere;
}

.v2-hero__desc {
    font-size: 1.05rem;
    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; }
}

/* Badge omaggio guida Copilot — solo bundle che includono M365 Personal
   (vedi functions/api/_lib/guide.js). */
.v2-pricing-card .pdp-bonus {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0 0;
    margin-top: 9px;
    border-top: 1px solid var(--aml-line);
    border-radius: 0;
    background: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--aml-ink-2);
    text-align: left;
}

.v2-pricing-card .pdp-bonus svg { display: none; }

.v2-pricing-card .pdp-bonus strong { color: var(--aml-ink); font-weight: 700; }

/* 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: 0.8rem;
    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: 0.9rem;
    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 ── */

/* Annulla tutto il padding della sezione per l'immagine galleria */
.v2-section--gallery {
    padding: 0;
    /* 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: 0;
    border: none;
    background: var(--aml-paper);
}

/* Gradiente superiore: sfuma dal colore pagina verso trasparente */
.bento-figure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, var(--page-bg) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Gradiente inferiore: sfuma da trasparente al colore pagina */
.bento-figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--page-bg) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* 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; }
}

/* Glass card caption ancorata in basso a sinistra */
.bento-caption {
    position: absolute;
    bottom: 28px;
    left: 28px;
    right: auto;
    width: auto;
    max-width: min(26rem, calc(100% - 56px));
    padding: 14px 20px 16px 18px;
    box-sizing: border-box;
    color: var(--aml-ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    border-radius: var(--aml-radius-md);
    border: 1px solid var(--aml-line);
    border-left: 3px solid var(--page-accent);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: var(--aml-shadow-lg);
    z-index: 2;
    pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .bento-caption { background: rgba(255, 255, 255, 0.96); }
}

.bento-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--page-accent);
    line-height: 1.2;
}

.bento-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.bento-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    opacity: 0.82;
}

@media (max-width: 640px) {
    .bento-caption {
        bottom: 14px;
        left: 14px;
        max-width: calc(100% - 28px);
        padding: 11px 14px 13px 13px;
        font-size: 0.84rem;
        border-radius: 8px;
        gap: 0.28em;
    }

    .bento-kicker { letter-spacing: 0.12em; }

    .bento-title { font-size: 0.95rem; }

    .bento-text { font-size: 0.82rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   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. */
.pdp-page {
    --pdp-maxw: 1180px;
    --pdp-gutter: clamp(1rem, 4vw, 2rem);
    --pdp-radius: 8px;
    --pdp-surface: #FFFFFF;
    --pdp-surface-2: #F4F6F8;
    --pdp-border: #DCE3EA;
    --pdp-muted: #5F6B7A;
    --pdp-ok: #1F7A52;
    --pdp-navy: #14243A;
    --pdp-navy-2: #1d3454;
    --pdp-trust-bg: #EAF0F6;
    --pdp-ink: #152033;

    /* Rimappa anche i token globali del sito: le pagine prodotto sono chiare
       anche finché il resto del sito (home, ecc.) non è ancora convertito. */
    --page-accent: #3267AC;
    --page-text: #152033;
    --page-text-secondary: #5F6B7A;
    --page-text-muted: #5F6B7A;
    --page-bg: #F4F6F8;
    --page-border: #DCE3EA;
}

/* ── 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;
}

.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: 0.76rem;
    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; }

/* Dentro la colonna sinistra: box prodotto + testo. */
.pdp-hero__split {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 28px);
    align-items: start;
}

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

/* Box prodotto: contenitore pieno con bordo netto, nessun alone. */
.pdp-media {
    margin: 0;
    padding: 20px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
}

.pdp-media__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

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

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

    .pdp-media { max-width: 260px; }
}

.pdp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.7rem;
    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);
}

.pdp-h1 span { color: var(--page-accent); }

.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: 1rem;
    line-height: 1.6;
    color: var(--pdp-muted);
}

.pdp-keylist {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 7px;
}

/* Marker fuori flusso: il contenuto inline (em, strong…) resta nella stessa riga. */
.pdp-keylist li {
    position: relative;
    padding-left: 26px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--pdp-ink);
}

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

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

/* ── CARD D'ACQUISTO (colonna destra dell'hero, sticky) ───────────────────── */
.pdp-buy {
    position: sticky;
    top: calc(var(--aml-header-offset, 88px) + 16px);
    min-width: 0;
    padding: 22px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface);
    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: 0.69rem;
    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: 800;
    line-height: 1;
    color: var(--page-text);
    white-space: nowrap;
}

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

.pdp-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(6, 78, 59, 0.55);
    border: 1px solid rgba(6, 95, 70, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    color: #34d399;
}

.pdp-price-note {
    margin: 0 0 14px;
    font-size: 0.8rem;
    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-meta-row {
    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: 0.8rem;
    line-height: 1.4;
    color: var(--aml-ink);
}

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

.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(--page-accent);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

.pdp-btn-primary:hover { background: var(--aml-brand-hover, #26507f); }

.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);
}

/* Trust sintetico sotto CTA — non pill cluster */
.pdp-trust-line {
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    color: var(--aml-ink-2);
}

.pdp-delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 0.83rem;
    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: 0.8rem;
}

/* Etichetta dei metodi di pagamento, come nel prototipo. */
.pdp-pay__label {
    margin: 0 0 9px;
    font-size: 0.69rem;
    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;
}

/* Badge omaggio guida Copilot — solo prodotti idonei (vedi functions/api/_lib/guide.js:
   Personal, Family, bundle che li contengono). Stesso linguaggio cromatico del box
   guida nell'email di conferma (templates.js), per coerenza cross-canale. */
.pdp-bonus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--page-accent) 30%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--page-text);
    text-align: left;
}

.pdp-bonus svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--page-accent); }

.pdp-bonus strong { color: var(--page-accent); }

.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: 0.78rem;
    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: pagine scritte a mano (etichetta + riga loghi, in colonna).
   .v2-payment-row: pagine generate, riga di soli loghi senza etichetta. */
.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-buy .v2-payment-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    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; }

/* Nota pagamenti testuale: sostituisce i 6 loghi nel pannello acquisto
   (vedi _render_pay_note in product_page_lib.py). */
.pdp-page .pf-pay-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pdp-border);
    font-size: 0.8rem;
    color: var(--pdp-muted);
}

.pdp-page .pf-pay-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--pdp-muted); }

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

/* ── 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: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--page-accent, #003182);
}

.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: 0.95rem;
    line-height: 1.6;
    color: var(--pdp-muted);
}

.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 {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--page-accent, #003182);
}

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

.pdp-stat__note {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    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; }
}

/* ── CARD DEI BENEFICI (sezione "perché sceglierlo" delle pagine generate) ── */
.pdp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.pdp-card__label {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--page-accent, #003182);
}

.pdp-card__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--page-text);
}

.pdp-card__body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--pdp-muted);
}

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

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

/* ── TABELLE DI CONFRONTO ─────────────────────────────────────────────────── */
.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: 0.9rem;
}

.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: 0.75rem;
    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; }

.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: 0.76rem;
    font-weight: 500;
    color: var(--pdp-muted);
}

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

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

/* ── APP INCLUSE ──────────────────────────────────────────────────────────── */
.pdp-apps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-app {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 14px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--page-text);
    text-align: center;
}

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

.pdp-app__tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--page-accent, #003182);
}

.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: 0.88rem;
    font-weight: 700;
    color: var(--page-accent, #003182);
    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: 0.82rem;
    font-weight: 700;
    color: var(--page-text);
    line-height: 1.2;
}

.pdp-seat__quota {
    font-size: 0.76rem;
    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, #003182);
    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, #003182);
    font-weight: 800;
}

.pdp-seats__foot {
    margin: 12px 0 0;
    font-size: 0.84rem;
    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: 0.78rem; }
}

@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: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pdp-step;
}

.pdp-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    padding: 18px 18px 16px;
    border-radius: var(--pdp-radius);
    background: var(--pdp-surface-2);
    border: 1px solid var(--pdp-border);
}

.pdp-step::before {
    counter-increment: pdp-step;
    content: counter(pdp-step);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--page-accent, #003182);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

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

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

.pdp-step a { color: var(--page-accent, #003182); 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(--page-accent) 30%, transparent);
    background: color-mix(in srgb, var(--page-accent) 8%, transparent);
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--page-text);
}

.pdp-note svg { width: 20px; height: 20px; color: var(--page-accent, #003182); }

.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: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--page-accent, #003182);
}

.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: 0.92rem; font-weight: 700; }

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

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

/* ── CTA FINALE ───────────────────────────────────────────────────────────── */
/* Banda navy a tutta larghezza, come la fascia istituzionale sopra: stesso
   trattamento "banda", non "card" arrotondata staccata dai bordi. */
.pdp-final {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--pdp-navy);
    border: none;
    color: #fff;
    display: block;
}

.pdp-final__inner {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px) var(--pdp-gutter);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px 32px;
    align-items: center;
}

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

    .pdp-final .pdp-btn-primary { width: 100%; }
}

.pdp-final h2 {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
}

.pdp-final p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

.pdp-final__price {
    display: block;
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.pdp-final__price small {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.pdp-final .pdp-btn-primary { width: auto; }

/* Fascia lifestyle: la didascalia del componente condiviso è a vetro smerigliato
   (blur + saturate). Qui diventa un pannello pieno, coerente col resto. */
.pdp-page .bento-caption,
.pdp-page .v2-family-bridge__caption {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}

/* ── 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__prices {
    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: 1rem;
    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: 0.95rem; }

.pdp-page .product-sticky-cta .btn-primary {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
}

.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;
    }

    .pdp-page .product-sticky-cta__title { display: none; }

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

    .pdp-page .product-sticky-cta__msrp {
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .pdp-page .product-sticky-cta__sale {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    .pdp-page .product-sticky-cta .btn-primary {
        flex: 0 0 auto;
        padding: 0.75rem 1.3rem;
        font-size: 0.92rem;
        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; }
}

/* ── SCONTO SOBRIO: prezzo barrato + risparmio in euro bastano ───────────── */
.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-trust-bg);
}

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

.pf-trustbar__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

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

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

.pf-trustbar__text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pdp-navy);
    letter-spacing: -0.005em;
}

.pf-trustbar__text > span {
    font-size: 0.8rem;
    color: var(--pdp-muted);
}

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

@media (max-width: 480px) {
    .pf-trustbar__inner { grid-template-columns: 1fr; }
}

/* ── FASCIA ISTITUZIONALE NAVY (prima delle FAQ, su tutte le pagine prodotto) ── */
.pf-institutional {
    background: var(--pdp-navy);
    color: #ffffff;
}

.pf-institutional__inner {
    max-width: var(--pdp-maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) var(--pdp-gutter);
}

.pf-institutional__title {
    margin: 0 0 24px;
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    max-width: 40ch;
}

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

.pf-institutional__grid li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-inline-start: 14px;
    border-inline-start: 2px solid rgba(255, 255, 255, 0.25);
}

.pf-institutional__grid li strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
}

.pf-institutional__grid li span {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

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

@media (max-width: 480px) {
    .pf-institutional__grid { grid-template-columns: 1fr; }
}

/* ── FAQ/REQUISITI: niente cerchi "?" (il chevron basta), due colonne
   indipendenti invece di una griglia a righe ──────────────────────────────── */
.pdp-page .home-faq-item summary::before { display: none; }

.pdp-page .home-faq-item {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(20, 32, 51, 0.04);
}

.pdp-page .home-faq-list .home-faq-item[open] {
    border-color: #9eb9d7;
    box-shadow: 0 2px 8px rgba(20, 32, 51, 0.04);
}

.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;
    }
}