/* ============================================================
   Frontend pubblico — La Mercanti multisito
   Concept ispirato a offique: tipografia fluida (clamp + vw),
   mix di container wide (1200/1600/full-bleed), font Inter,
   bottoni a pillola, card bianche. Identità propria, non copia.
   ============================================================ */

:root {
    --bg: #ffffff;
    --bg-alt: #f6f7f8;
    --ink: #2b2b2b;
    --ink-soft: #6b6b6b;
    --line: #e7e9eb;
    --accent: #0099b8;
    --accent-dark: #007a93;
    --danger: #e74c3c;
    --radius-card: 12px;
    --radius-pill: 999px;
    --font: "Inter", -apple-system, "Segoe UI", sans-serif;
    /* Titoli e scritte grosse: Inter Tight */
    --font-display: "Inter Tight", "Inter", -apple-system, "Segoe UI", sans-serif;
    --header-h: 84px;
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Angoli squircle in stile Apple ovunque ci sia un border-radius:
   superellisse di esponente ~5 come gli angoli continui iOS
   (il parametro CSS è log2 dell'esponente: 2.32 ≈ log2(5);
   la keyword "squircle" equivarrebbe a superellipse(2)).
   I browser senza supporto ignorano la proprietà e mantengono i
   radius normali come fallback. */
* { corner-shape: superellipse(2.32); }

/* Con la superellisse il raggio va molto più alto del radius
   normale (la curva si distribuisce sul lato e il browser clampa):
   solo i browser con supporto squircle usano il raggio grande,
   gli altri restano sul radius classico definito in :root. */
@supports (corner-shape: superellipse(2.32)) {
    :root { --radius-card: 60px; }
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; }

/* Tipografia fluida di base */
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem); }
h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); }

/* Container: mix di larghezze */
.container      { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.wide-container { max-width: 1600px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }

/* Etichetta testi statici (non da DB) — da rimuovere a migrazione completata */
.static-note {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #b03a2e;
    background: #fdecea;
    border-radius: 3px;
    padding: 1px 5px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Variante "manca per questo sito": testo presente nel sistema Testi
   ma senza variante per il sito corrente */
.static-note-missing {
    font-weight: 700;
    color: #b25d00;
    background: #fff3e0;
}

/* ─── Bottoni a pillola ───────────────────────────────────── */
.cta-button {
    display: inline-block;
    padding: clamp(10px, 1.4vw, 13px) clamp(26px, 4vw, 40px);
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.3s ease;
}
.cta-button:hover { background: var(--ink); color: #fff; }
.cta-light { border-color: #fff; background: transparent; color: #fff; }
.cta-light:hover { background: #fff; color: var(--ink); }
.cta-dark { background: var(--ink); color: #fff; }
.cta-dark:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ─── Header fisso ────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: #fff;
    box-shadow: var(--shadow-soft);
    z-index: 1000;
    display: flex;
    align-items: center;
}
.header-placeholder { height: var(--header-h); }
.header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 4vw, 3rem);
    padding: 0 clamp(1rem, 3vw, 2.5rem);
}
.logo { flex-shrink: 0; }
.logo img { height: 60px; width: auto; }
.logo-text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

.main-nav > ul { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem); list-style: none; }
.main-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s ease;
}
.main-nav > ul > li > a:hover { border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: clamp(0.6rem, 1.5vw, 1.2rem); }

.search-form { position: relative; }
.search-input {
    width: clamp(150px, 18vw, 300px);
    padding: clamp(8px, 1.2vw, 11px) 42px clamp(8px, 1.2vw, 11px) 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.12);
}
.search-btn {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 8px;
    color: var(--ink-soft);
    cursor: pointer;
}
.search-btn:hover { color: var(--accent-dark); }

.panel-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
}
.panel-toggle span { width: 24px; height: 2px; background: var(--ink); }

/* Contatti rapidi nell'header (desktop) */
.header-contacts { display: flex; align-items: center; gap: 6px; }
.header-contact {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.header-contact:hover { transform: translateY(-2px); }
.header-contact-phone:hover { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.header-contact-email:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.header-contact-wa { color: #25d366; border-color: rgba(37, 211, 102, 0.5); }
.header-contact-wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
/* Cuore preferiti (pieno). NEUTRO come telefono e mail finche' non c'e' almeno
   un preferito: e' l'assenza di colore a dire "vuoto", non solo la scomparsa del
   contatore. Il rosso arriva con .has-fav, messa da site.js. Il default HTML e'
   lo stato neutro, cosi' chi non ha preferiti non vede un lampo di rosso al
   caricamento. */
.header-contact-fav { position: relative; }
.header-contact-fav svg { fill: currentColor; }
.header-contact-fav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.header-contact-fav.has-fav { color: var(--danger); border-color: rgba(231, 76, 60, 0.5); }
.header-contact-fav.has-fav:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.header-fav-count { position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--accent-dark); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* Pulsante contatti flottante (mobile speed-dial): nascosto su desktop */
.lead-fab { display: none; }

/* ─── Pannello laterale ───────────────────────────────────── */
.side-panel {
    position: fixed;
    top: 0;
    right: clamp(-450px, -32vw, -350px);
    width: clamp(300px, 30vw, 440px);
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1002;
    padding: 28px;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
}
.side-panel.open { right: 0; }
.side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.side-panel-title { font-weight: 600; font-size: 1.1rem; }
.side-panel-close { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.side-panel-list { list-style: none; }
.side-panel-list > li { margin-bottom: 4px; }
.side-panel-list a { display: block; padding: 9px 6px; border-radius: 6px; font-weight: 500; }
.side-panel-list a:hover { background: var(--bg-alt); color: var(--accent-dark); }
.side-panel-list ul { list-style: none; margin-left: 16px; }
.side-panel-list ul a { font-weight: 400; font-size: 0.92rem; color: var(--ink-soft); }
.side-panel-empty { color: var(--ink-soft); font-size: 0.92rem; padding: 4px 6px; font-style: italic; }
.side-panel-head-secondary { margin-top: 28px; }
a.side-panel-title:hover { color: var(--accent-dark); }
/* Pulsanti Ambienti / Brand / Contatti */
.side-panel-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}
.side-panel-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--ink);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.side-panel-btn svg { color: var(--accent-dark); transition: transform 0.2s ease; }
.side-panel-btn:hover { background: #fff; border-color: var(--accent); color: var(--accent-dark); }
.side-panel-btn:hover svg { transform: translateX(3px); }
.panel-contacts { margin-top: 22px; }

/* Accordion nel pannello (Ambienti, Tag): stesso aspetto degli altri pulsanti
   (niente tinta più scura); la voce con sottomenu si riconosce dalla freccia
   verso il BASSO, che ruota verso l'alto quando l'accordion si apre. La lista
   si apre DENTRO al bordo del pulsante (il bordo "si alza"). */
.side-panel-acc { display: flex; flex-direction: column; }
.side-panel-acc-btn {
    width: 100%;
    cursor: pointer;
    font-family: var(--font);
    /* I <button> non ereditano la line-height del body (la reset a "normal"),
       quindi risulterebbero più bassi degli <a>: la forziamo a eredità così
       l'altezza combacia con gli altri pulsanti del pannello. */
    line-height: inherit;
}
.side-panel-acc.open .side-panel-acc-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.side-panel-acc-arrow { transition: transform 0.2s ease; }
/* L'hover degli altri pulsanti trasla la freccia a destra: qui non ha senso. */
.side-panel-acc-btn:hover .side-panel-acc-arrow { transform: none; }
.side-panel-acc.open .side-panel-acc-arrow,
.side-panel-acc.open .side-panel-acc-btn:hover .side-panel-acc-arrow { transform: rotate(180deg); }
.side-panel-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    background: var(--bg-alt);
    border: 1px solid transparent;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}
.side-panel-acc.open .side-panel-acc-body { grid-template-rows: 1fr; border-color: var(--line); }
.side-panel-acc-list {
    list-style: none;
    margin: 0;
    padding: 0 6px;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.side-panel-acc.open .side-panel-acc-list { opacity: 1; padding-top: 6px; padding-bottom: 8px; }
.side-panel-acc-list a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
}
.side-panel-acc-list a:hover { background: rgba(255, 255, 255, 0.55); color: var(--accent-dark); }
.side-panel-acc-empty { padding: 9px 12px; font-size: 0.9rem; color: var(--ink-soft); font-style: italic; }

/* Pallino decorativo davanti alle voci dei sottomenu del pannello
   (categorie e Ambienti): arricchisce il design e guida la lettura.
   Usa inline-block (non flex) per non dipendere dall'ordine delle regole. */
.side-acc-list a::before,
.side-panel-acc-list a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.55;
    vertical-align: middle;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.side-acc-list a:hover::before,
.side-panel-acc-list a:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

/* Accordion categorie nel pannello: una voce aperta per volta */
.side-acc { list-style: none; margin-top: 10px; }
.side-acc-item { border-bottom: 1px solid var(--line); }
.side-acc-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: 0;
    font-family: var(--font);
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    padding: 12px 6px;
    cursor: pointer;
}
.side-acc-item.open .side-acc-btn { color: var(--accent-dark); }
.side-acc-static {
    display: block;
    padding: 12px 6px;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--ink-soft);
}
/* Apertura/chiusura fluida: la riga di griglia passa da 0fr a 1fr
   (anima fino all'altezza naturale del contenuto) */
.side-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.side-acc-item.open .side-acc-body { grid-template-rows: 1fr; }
.side-acc-list {
    list-style: none;
    padding: 0 6px; /* niente padding verticale: impedirebbe il collasso a 0 */
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.side-acc-list > li:last-child { padding-bottom: 12px; }
.side-acc-item.open .side-acc-list { opacity: 1; }
.side-acc-list a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.side-acc-list a:hover { background: var(--bg-alt); color: var(--accent-dark); }
.panel-logo img { height: 40px; width: auto; }
.panel-logo .logo-text { font-size: 1.2rem; }
.panel-search { margin-bottom: 8px; }
.panel-search .search-input { width: 100%; }
.panel-contacts a { display: flex; align-items: center; gap: 10px; }
.panel-contacts .panel-wa:hover { color: #25d366; }
.side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1001;
}

/* ─── Hero full-bleed con slide ───────────────────────────── */
.hero {
    position: relative;
    width: 100%;
    height: clamp(380px, 56vh, 620px);
    overflow: hidden;
    background: var(--bg-alt);
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.hero-slide.active { opacity: 1; }
.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 22, 24, 0.55) 0%, rgba(20, 22, 24, 0.15) 60%, rgba(20, 22, 24, 0) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
}
.hero-brand {
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.85;
}
.hero-content h2 {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
    max-width: 14ch;
}
.hero-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}
.hero-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot.active { background: #fff; transform: scale(1.2); }

/* ─── Sezione categorie: testo gigante + griglia ──────────── */
.categories-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.categories-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
/* Intro (titolo+descrizione) a sinistra, griglia quadrata a destra. */
.categories-text { margin-bottom: 0; align-self: center; }
/* Intro home: H1 (titolo), H2 (sottotitolo), descrizione (p). */
.categories-h1 {
    font-size: clamp(2rem, 3.2vw, 3.8rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
}
.categories-subtitle {
    margin-top: clamp(0.6rem, 1.2vw, 1rem);
    font-size: clamp(1.1rem, 1.6vw, 1.55rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-soft);
}
.categories-desc {
    margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 54ch;
}
.categories-desc > :first-child { margin-top: 0; }
.categories-desc > :last-child { margin-bottom: 0; }
.categories-main { width: 100%; }
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
}
.category-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-alt);
    display: block;
}
.category-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.category-card:hover img { transform: scale(1.05); }
.category-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(1rem, 2vw, 1.6rem);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
    color: #fff;
}
.category-overlay h3 {
    font-size: clamp(1.1rem, 2.4vw, 1.9rem);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ─── Più venduti: titolo a sinistra + slider ─────────────── */
.bestsellers-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.bestsellers-container {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-left: clamp(1.5rem, 8vw, 9rem);
}
.bestsellers-left { flex: 0 0 auto; max-width: 260px; }
.bestsellers-left h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 22px; }
.slider-controls { display: flex; gap: 12px; }
.slider-nav {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--accent-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}
.slider-nav:hover { background: var(--ink); }
/* Freccia disabilitata (bordo dello slider): grigia e non cliccabile, ma visibile */
.slider-nav.is-disabled { background: var(--bg-alt); color: var(--ink-soft); cursor: default; pointer-events: none; }
.slider-nav.is-disabled:hover { background: var(--bg-alt); }
/* Lo slider è uno scroll-container: l'ombra hover delle card viene tagliata
   ai suoi bordi. Il padding della track fa spazio all'ombra (sotto e ai lati);
   il margin-left negativo compensa il padding sinistro così le card restano
   allineate al contenitore. */
.products-slider { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; margin-left: -14px; }
.products-slider::-webkit-scrollbar { display: none; }
/* Dentro il contenitore 1600 lo slider parte allineato a sinistra ma
   si estende a destra fino al bordo della finestra (full-bleed). */
.wide-container .products-slider { margin-right: calc(50% - 50vw); }
.products-track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.6rem);
    padding: 8px 24px 30px 14px;
}
.products-track .product-card {
    flex: 0 0 clamp(220px, 22vw, 300px);
}

/* ─── Card prodotto ───────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}
.product-card {
    position: relative;
    display: block;
}
.product-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.04); }

/* Card "a riquadro" (forma classica) negli slider/caroselli e nei
   correlati (Potrebbe interessarti); nelle griglie di pagina resta
   la versione senza cornice. */
.products-track .product-card,
.product-section .product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.products-track .product-card:hover,
.product-section .product-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.products-track .product-card-img,
.product-section .product-card-img {
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 0;
}
.products-track .product-card-img img,
.product-section .product-card-img img { object-fit: cover; }
.products-track .product-card:hover .product-card-img img,
.product-section .product-card:hover .product-card-img img { transform: none; }
.products-track .product-card-body,
.product-section .product-card-body { padding: clamp(0.9rem, 1.8vw, 1.3rem); border-top: 1px solid var(--line); }
.product-card-noimg {
    width: 48px; height: 48px;
    border: 1px dashed var(--line);
    border-radius: 50%;
}
.product-badge {
    position: absolute;
    top: clamp(0.6rem, 1.5vw, 1rem);
    font-size: clamp(0.68rem, 1vw, 0.8rem);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    color: #fff;
}
.badge-sconto { left: clamp(0.6rem, 1.5vw, 1rem); background: var(--danger); }
.badge-pronta { left: clamp(0.6rem, 1.5vw, 1rem); background: var(--accent-dark); }
.product-card-body { padding: 14px 0 0; }
.product-card-brand {
    display: block;
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 6px;
}
.product-card-name {
    font-size: clamp(0.98rem, 1.3vw, 1.15rem);
    font-weight: 600;
    margin-bottom: 8px;
}
.product-card-pricing { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.original-price {
    font-size: clamp(0.8rem, 1.1vw, 0.92rem);
    color: #999;
    text-decoration: line-through;
}
.final-price {
    font-size: clamp(0.95rem, 1.3vw, 1.12rem);
    font-weight: 600;
    color: var(--ink);
}
/* Unità di misura a destra del prezzo (es. "/ m³") */
.price-um {
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    color: #777;
    margin-left: -4px; /* compensa il gap del flex: resta attaccata al prezzo */
    white-space: nowrap;
}

/* ─── Intro entità (designer/brand): foto, testo, paese e sito web ─ */
.entity-intro-section { padding: clamp(1.2rem, 2.5vw, 2rem) 0 0; }
.entity-intro {
    display: flex;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: flex-start;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 14px);
    padding: clamp(1.2rem, 2.5vw, 2rem);
}
.entity-intro-img { flex: 0 0 clamp(140px, 18vw, 220px); border-radius: var(--radius-card, 14px); overflow: hidden; }
.entity-intro-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.entity-intro-body { flex: 1 1 auto; min-width: 0; }
.entity-intro-desc { color: var(--ink-soft); line-height: 1.65; max-width: 72ch; }
.entity-intro-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 1rem; font-size: 0.92rem; font-weight: 600; }
.entity-intro-paese, .entity-intro-web { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.entity-intro-web:hover { color: var(--accent, #0099b8); }
@media (max-width: 640px) {
    .entity-intro { flex-direction: column; }
    .entity-intro-img { flex-basis: auto; width: 160px; }
}

/* ─── Catalogo / sezioni generiche ────────────────────────── */
.catalog-section, .brands-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.section-title-count {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--bg-alt);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    vertical-align: middle;
    margin-left: 10px;
}

.brand-strip {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.8rem, 2vw, 1.4rem) clamp(2rem, 4vw, 3.5rem);
    list-style: none;
}
.brand-strip li {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}
.brand-strip a { transition: color 0.2s ease; }
.brand-strip a:hover { color: var(--accent-dark); }

/* ─── Testata pagina interna ──────────────────────────────── */
.page-head { padding: clamp(2rem, 4vw, 3rem) 0 0.5rem; }
.page-head h1 { margin-bottom: 14px; max-width: 760px; }
.page-head-desc { max-width: 760px; color: var(--ink-soft); }

/* Pillola semi-trasparente con blur: leggibile su qualsiasi sfondo */
.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-soft);
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.breadcrumb a:hover { color: var(--accent-dark); }

/* Sulla scheda prodotto il breadcrumb non ha contenitore: solo testo. Il
   colore (nero su sfondo chiaro, bianco su scuro) viene deciso via JS in base
   alla luminosità dell'immagine, e aggiornato al cambio immagine. */
.product-page .breadcrumb {
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    color: var(--ink);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}
.product-page .breadcrumb a { color: var(--ink); }
.product-page .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.product-page .breadcrumb.breadcrumb-on-dark,
.product-page .breadcrumb.breadcrumb-on-dark a { color: #fff; }
.product-page .breadcrumb.breadcrumb-on-dark { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

.empty-state { padding: clamp(2rem, 4vw, 3rem) 0; color: var(--ink-soft); font-style: italic; }

/* ─── Scheda prodotto ─────────────────────────────────────── */
.product-page { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Scheda prodotto: sfondo = immagine selezionata blurrata su tutta la
   pagina (velo bianco crescente verso il basso per la leggibilità),
   cornice 1600px, thumbs numerate in overlay con frecce. */
.product-page { position: relative; overflow: hidden; }
/* Sfondo prodotto in DUE elementi distinti:
   1) .product-page-bg — l'immagine blurrata (~900px) che sfuma gradualmente
      verso il bianco grazie al velo ::after che arriva a bianco pieno;
   2) .product-page-bg-fade — elemento SEMPRE bianco che copre il resto. */
.product-page-bg {
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    height: 980px;
    background-size: cover;
    background-position: center top;
    filter: blur(12px) saturate(1.05);
    z-index: 0;
}
/* Velo: parte tenue in alto e diventa bianco pieno entro ~900px, così
   l'immagine sfuma gradualmente nel bianco. */
.product-page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.45) 460px, #fff 940px);
}
/* Elemento 2: sempre bianco. Trasparente sopra (per agganciarsi alla
   sfumatura dell'immagine) e bianco pieno per tutto il resto della pagina. */
.product-page-bg-fade {
    position: absolute;
    top: 780px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 160px);
}
.product-page > :not(.product-page-bg):not(.product-page-bg-fade) { position: relative; z-index: 1; }

.product-hero {
    position: relative;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.product-hero-frame {
    position: relative;
    max-width: 1600px;
    margin: 0 clamp(16px, 3vw, 44px);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1600px) {
    .product-hero-frame { margin: 0 auto; }
}
/* L'immagine principale ora sta dentro <picture> (WebP + srcset): il
   selettore copre entrambe le strutture, stessi angoli arrotondati. */
.product-hero-frame > picture {
    display: block;
    width: 100%;
    height: 100%;
}
.product-hero-frame > img,
.product-hero-frame > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}
/* ── "La scelta giusta" (scheda prodotto) ─────────────────────────────
   Due colonne AFFIANCATE con divisore verticale quando entrambe compilate
   (mockup 07/09); si impilano sotto i 760px. Una sola colonna = piena
   larghezza (niente classe .due). */
/* Passaporto e Scelta giusta: CHIUSI sono due label affiancate; il blocco
   APERTO si allarga a tutta la riga (grid-column 1/-1) e la Scelta giusta
   ritrova le sue due colonne interne come prima (richiesta 08/09). */
.product-acc-row.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.product-acc-row.due .product-block { margin-top: 0; }
.product-acc-row.due .product-block.open { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .product-acc-row.due { grid-template-columns: 1fr; }
    .product-acc-row.due .product-block.open { grid-column: auto; }
}

.product-scelta-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem 0; }
.product-scelta-cols.due { grid-template-columns: 1fr 1fr; column-gap: 0; }
.product-scelta-cols.due .product-scelta-col:first-child { padding-right: 2rem; }
.product-scelta-cols.due .product-scelta-col:last-child {
    padding-left: 2rem;
    border-left: 1px solid var(--line);
}
.product-scelta-subtitle {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}
.product-scelta-nota {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--muted, #6b6b6b);
}
.product-scelta-nota a { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 760px) {
    .product-scelta-cols.due { grid-template-columns: 1fr; }
    .product-scelta-cols.due .product-scelta-col:first-child { padding-right: 0; }
    .product-scelta-cols.due .product-scelta-col:last-child { padding-left: 0; border-left: 0; }
}

.product-hero-thumbs-wrap {
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 2vw, 24px);
    transform: translateX(-50%);
    max-width: 90%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-hero-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 2px;
}
.product-hero-thumbs::-webkit-scrollbar { display: none; }
.product-thumb {
    position: relative;
    flex: 0 0 auto;
    width: clamp(68px, 7vw, 100px);
    aspect-ratio: 4 / 3;
    background: #fff;
    border: 0;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-thumb:hover { transform: translateY(-2px); }
.product-thumb.active { box-shadow: 0 0 0 2px var(--accent), var(--shadow-soft); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Numero: visibile solo sulla thumbnail selezionata, più grande */
.product-thumb-num {
    position: absolute;
    top: 5px; left: 5px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    pointer-events: none;
}
.product-thumb.active .product-thumb-num { display: flex; }
.thumbs-nav {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.thumbs-nav:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
/* il display:flex sopra vincerebbe sull'attributo hidden del browser */
.thumbs-nav[hidden] { display: none; }

.product-info { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

.product-info-brand {
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-dark);
}
.product-info h1 { margin: 0 0 8px; }
.product-info-brand { display: block; margin-bottom: 4px; text-decoration: none; transition: color 0.15s ease; }
.product-info-brand:hover { color: var(--accent); text-decoration: underline; }
.product-info-designer { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }
.product-info-designer a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.product-info-designer a:hover { color: var(--accent-dark); text-decoration: underline; }
.product-info-price {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.product-info-price .final-price {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
}
/* "+IVA" piccolo accanto al prezzo (solo siti con nazione default Italia) */
.product-info-price .price-iva {
    margin-left: -8px;
    align-self: flex-end;
    padding-bottom: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.product-info-price .original-price {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--ink-soft);
}
.product-info-price .product-badge { position: static; align-self: flex-start; }
.product-info-short { color: var(--ink-soft); margin-bottom: 28px; }
.product-info-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.product-info-code { font-size: 13px; color: var(--ink-soft); }

/* ── Contenuto sotto la gallery ───────────────────────────────────────
   1) Blocco titolo (info) a piena larghezza 1600, senza filetto laterale.
   2) Fascia editoriale: a sinistra descrizione (+ scheda tecnica), a destra
      una colonna di moduli (meta, documenti, kit) ben spaziati. */
.product-content {
    max-width: 1600px;
    margin: 0 auto clamp(2.2rem, 4.5vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 3.6vw, 3rem);
}
.product-block { min-width: 0; }
.product-block-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

/* Blocco titolo: pannello a piena larghezza, leggibile sullo sfondo
   sfocato, senza bordo/filetto laterale. */
.product-info {
    margin: 0;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.5rem, 2.6vw, 2.6rem) clamp(1.6rem, 3vw, 3rem);
}

/* ── Fascia editoriale ────────────────────────────────────────────────
   Descrizione (sinistra) ampia che riempie lo spazio + colonna moduli
   (destra) di larghezza contenuta e ben spaziata. */
.product-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px);
    gap: clamp(1.8rem, 3.2vw, 3.4rem);
    align-items: start;
}
.product-editorial-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 2.6vw, 2.2rem);
}
.product-editorial-aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2vw, 1.7rem);
}
.product-editorial-aside > .product-block { max-width: none; margin: 0; }
/* Senza descrizione né scheda tecnica: i moduli prendono tutta la fascia
   in riga fluida invece di restare stretti a destra. */
.product-editorial:has(> .product-editorial-main:empty) { grid-template-columns: 1fr; }
.product-editorial:has(> .product-editorial-main:empty) .product-editorial-aside {
    flex-direction: row;
    flex-wrap: wrap;
}
.product-editorial:has(> .product-editorial-main:empty) .product-editorial-aside > .product-block {
    flex: 1 1 clamp(280px, 30%, 420px);
}

/* Card descrizione: pannello leggibile sullo sfondo sfocato */
.product-desc {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.5rem, 2.6vw, 2.8rem);
}
.product-desc .product-richtext { max-width: none; color: var(--ink); }

/* Kit campioni: banner invitante, a scomparsa, nella colonna destra.
   Sfondo unico (gradiente blu) condiviso tra stato chiuso e aperto. */
.kit-box {
    /* Sfondo: grafica La Mercanti ancorata in alto sopra il gradiente blu;
       man mano che il banner si apre, lo sfondo si rivela. La grafica è bianca
       semi-trasparente: la sovrapponiamo più volte per renderla ben visibile. */
    background:
        url("/public/assets/img/la-mercanti-grafica.png") no-repeat center top / 100% auto,
        url("/public/assets/img/la-mercanti-grafica.png") no-repeat center top / 100% auto,
        url("/public/assets/img/la-mercanti-grafica.png") no-repeat center top / 100% auto,
        url("/public/assets/img/la-mercanti-grafica.png") no-repeat center top / 100% auto,
        linear-gradient(135deg, #1583cc, #0a5394);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px rgba(10, 83, 148, 0.26);
    overflow: hidden;
    transition: filter 0.2s ease;
}
.kit-box:not(.open):hover { filter: brightness(1.05); }
/* Da chiuso pulsa leggermente (solo bagliore, niente scala: il titolo resta
   immobile); da aperto si ferma. */
@keyframes kitPulse {
    0%, 100% { box-shadow: 0 12px 32px rgba(10, 83, 148, 0.22); }
    50% { box-shadow: 0 16px 42px rgba(10, 83, 148, 0.44); }
}
.kit-box:not(.open) { animation: kitPulse 2.4s ease-in-out infinite; }
.kit-box.open { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .kit-box:not(.open) { animation: none; }
}
.kit-box-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    /* altezza da chiuso raddoppiata; box abbastanza alto da avere lo stesso
       arrotondamento (squircle non clampato) sia chiuso che aperto */
    padding: 50px 22px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font);
    text-align: center;
}
/* Da chiuso: banner, testo grande e indicatore centrati */
.kit-box-title {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    letter-spacing: 0.01em;
    color: #fff;
}
.kit-box-chevron { flex: 0 0 auto; color: #fff; transition: transform 0.2s ease; }
/* Una volta aperto non si richiude. Il padding-top resta 50px (titolo fermo);
   riduciamo solo il padding sotto al titolo per avvicinare il form. */
.kit-box.open .kit-box-head { padding: 50px 22px 16px; cursor: default; }
.kit-box.open .kit-box-head:hover { filter: none; }
.kit-box-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.kit-box.open .kit-box-body { grid-template-rows: 1fr; }
.kit-box-content {
    overflow: hidden;
    min-height: 0;
    padding: 0 18px; }
.kit-box-content > :last-child { margin-bottom: 30px; }
.kit-box-testo { font-size: 0.88rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 14px; }
.kit-box-form { display: flex; flex-direction: column; gap: 12px; }
/* Tutto in tinta accento: campo note translucido con testo bianco */
.kit-box-note {
    width: 100%;
    min-height: 150px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.kit-box-note::placeholder { color: rgba(255, 255, 255, 0.7); }
.kit-box-note:focus { border-color: #fff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
/* Blocco CTA omogeneo al resto: prezzo bianco centrato + pulsante evidente */
.kit-box-cta-panel {
    margin-top: 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kit-box-price-big {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    margin-bottom: 12px;
}
.kit-box-price-iva {
    margin-left: 6px;
    font-size: 0.42em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
/* Pulsante acquista evidente: bianco su accento, in risalto */
.kit-box-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 13px 20px;
    border: 0;
    border-radius: 11px;
    background: #fff;
    color: #0a5394;
    font-family: var(--font);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    max-width: 180px;
}
.kit-box-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24); }
.kit-box-cta:active { transform: translateY(0); }
/* Nota "Importo scalato dal tuo primo ordine": bianca, centrata, senza icona */
.kit-box-rimborso {
    margin: 11px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
}
.kit-box-cta:disabled { opacity: 0.7; cursor: wait; }
.kit-box-errore { font-size: 0.82rem; color: var(--danger); }
.kit-box-errore[hidden] { display: none; }

/* Banner esito pagamento (ritorno da Stripe) */
.pagamento-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.pagamento-ok { background: rgba(22, 163, 74, 0.12); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.35); }
.pagamento-annullato { background: rgba(217, 119, 6, 0.1); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.3); }

/* Terna meta (origine / garanzia / consegna): card unica con righe
   divise da filetti e icona tonda accentata. Vive nella colonna destra. */
.product-meta {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.product-meta-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}
/* Divisore interno rientrato di 10px a sinistra e a destra */
.product-meta-row + .product-meta-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--line);
}
.product-meta-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent-dark);
    background: linear-gradient(135deg, rgb(200 200 200 / 12%), rgb(205 205 205 / 20%));
    border-radius: 50%;
    overflow: hidden;
}
.product-meta-flag { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; display: block; }
.product-meta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-meta-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}
.product-meta-value { font-weight: 700; font-size: 0.98rem; }
.product-meta-prefix { font-weight: 400; color: var(--ink-soft); }

/* Scheda tecnica: accordion a scomparsa (chiuso di default) */
.product-spec {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.product-spec-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    transition: background 0.2s ease;
}
.product-spec-toggle-label { display: inline-flex; align-items: center; gap: 10px; }
.product-spec-toggle-label svg { flex: 0 0 auto; color: var(--accent-dark); }
.product-spec-chevron { flex: 0 0 auto; color: var(--accent-dark); transition: transform 0.25s ease; }
.product-spec.open .product-spec-chevron { transform: rotate(180deg); }
.product-spec-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.product-spec.open .product-spec-body { grid-template-rows: 1fr; }

/* pannello interno: contenuto vero della scheda tecnica */
.product-spec-panel {
    overflow: hidden;
    min-height: 0;
    max-width: none;
    padding: 0 clamp(1.2rem, 2.5vw, 2rem);
    opacity: 0;
    transition: opacity 0.25s ease, padding 0.3s ease;
}
.product-spec.open .product-spec-panel {
    opacity: 1;
    padding-top: clamp(1rem, 2vw, 1.6rem);
    padding-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.product-spec-panel .product-richtext { max-width: none; }
.product-spec-panel .product-richtext table { background: #fff; border-radius: 10px; overflow: hidden; }
.product-spec-panel .product-richtext tr:nth-child(even) { background: var(--bg-alt); }
.product-spec-panel .product-richtext td,
.product-spec-panel .product-richtext th { border: 0; border-bottom: 1px solid var(--line); }
.product-spec-panel .product-richtext tr:last-child td { border-bottom: 0; }
/* Testi fissi della scheda tecnica: intro sopra, footer (azienda/contatti) sotto.
   Il footer NON si vede a schermo: appare solo nella stampa PDF del passaporto. */
.product-spec-intro { margin-bottom: 1.2rem; color: var(--ink-soft); font-size: 0.92rem; }
.product-spec-foot { display: none; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; }
.product-spec-foot > div + div { margin-top: 0.6rem; }
/* Pulsante "Stampa PDF" del passaporto (centrato) */
.product-spec-actions { display: flex; justify-content: center; margin-top: 1.4rem; }
.product-spec-print { display: inline-flex; align-items: center; gap: 8px; padding: 0.55rem 1.2rem; font-size: 0.88rem; }

/* ─── Stampa "Passaporto prodotto": si stampa SOLO il blocco specifiche ───
   Attivata da body.print-passport (aggiunta dal pulsante Stampa PDF via JS).
   Catena DOM reale: main > .product-page > .wide-container > .product-content
   > .product-editorial > .product-editorial-main > .product-spec.
   Il primo selettore (figli diretti del body) elimina anche header, footer e
   i widget di terze parti appesi al body (es. chatbot). */
@media print {
    body.print-passport > *:not(main),
    body.print-passport main > *:not(.product-page),
    body.print-passport .product-page > *:not(.wide-container),
    body.print-passport .product-page .wide-container > *:not(.product-content),
    body.print-passport .product-content > *:not(.product-editorial),
    body.print-passport .product-editorial-aside,
    body.print-passport .product-editorial-main > *:not(.product-spec),
    body.print-passport .product-spec-chevron,
    body.print-passport .product-spec-actions,
    /* "La scelta giusta" condivide la classe product-spec ma NON va nel PDF
       del passaporto. */
    body.print-passport .product-scelta { display: none !important; }
    body.print-passport .product-content,
    body.print-passport .product-editorial,
    body.print-passport .product-editorial-main { display: block !important; }
    /* Accordion forzato aperto, senza sfondi/bordi da schermo */
    body.print-passport .product-spec { border: 0 !important; background: #fff !important; box-shadow: none !important; }
    body.print-passport .product-spec-body { grid-template-rows: 1fr !important; }
    body.print-passport .product-spec-panel { opacity: 1 !important; overflow: visible !important; padding: 0 !important; }
    body.print-passport .product-spec-toggle { pointer-events: none; background: #fff !important; padding: 0 0 12px !important; }
    /* Footer aziendale del passaporto: visibile solo in stampa */
    body.print-passport .product-spec-foot { display: block !important; }
}

/* Documenti scaricabili: card contenitore + chip compatte affiancate */
.product-docs-block {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.8rem);
}
.product-docs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Chip documento: icona + nome affiancato, sempre visibili (niente tooltip) */
.product-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: #fff;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-doc:hover {  box-shadow: var(--shadow-soft); }
.product-doc-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.product-doc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.product-doc-nome { font-weight: 600; font-size: 0.85rem; line-height: 0.7; color: var(--ink); }
.product-doc-tipologia { display: block; font-size: 0.72rem; font-weight: 600; line-height: 1.2; color: var(--ink-soft); }

/* ─── Offerte: immagine (3 box sopra) + sezione acquisto + footer richiesta ── */
.product-offers-wrap { position: relative; }
.product-offers { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.6rem); }
/* Con più offerte: carosello orizzontale con scroll-snap */
.product-offers-wrap.has-multi .product-offers {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.product-offers-wrap.has-multi .product-offers::-webkit-scrollbar { display: none; }
.product-offers-wrap.has-multi .offer-card { flex: 0 0 100%; scroll-snap-align: center; }
/* Frecce di scorrimento: subito sotto al carosello, allineate a destra */
.offer-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.offer-arrow {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: #fff; color: var(--ink);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.offer-arrow:hover { background: var(--bg-alt); border-color: var(--accent); transform: translateY(-2px); }
/* Le frecce restano entrambe visibili: quella inutilizzabile è grigetta */
.offer-arrow:disabled { opacity: 0.32; cursor: default; }
.offer-arrow:disabled:hover { background: #fff; border-color: var(--line); transform: none; }
.offer-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
}
/* Immagine 1000×400 con i 3 box sopra */
.offer-media { position: relative; aspect-ratio: 1000 / 400; background: var(--bg-alt); }
.offer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-box {
    position: absolute; z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 9px 13px;
    color: var(--ink);
}
/* Info offerta: unico riquadro in alto a sinistra (nome, modalità, descrizione) */
.offer-box-info {
    top: 14px; left: 14px; max-width: 46%;
    display: flex; flex-direction: column; gap: 3px; text-align: left;
}
.offer-info-nome { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.offer-info-mod { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dark); }
.offer-info-desc {
    font-size: 0.82rem; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* m³ / unità di misura: sempre in alto a destra */
.offer-box-unita { top: 14px; right: 14px; font-weight: 800; font-size: 0.88rem; color: var(--accent-dark); }
/* Sezione acquisto (Stripe): riquadro overlay in basso a destra sulla foto */
.offer-buy {
    position: absolute; z-index: 3; right: 14px; bottom: 14px;
    width: clamp(230px, 42%, 300px); max-width: calc(100% - 28px);
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}
.offer-buy-fields { display: flex; gap: 8px; }
.offer-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.offer-buy-fields .offer-field:last-child { flex: 0 0 70px; }
.offer-buy-fields .offer-field-qty { flex: 0 0 96px; }
/* Regola globale: tutti i select del sito hanno la freccia custom staccata
   ~16px dal bordo destro (con spazio a destra della freccia). I componenti
   sotto usano background-color (non lo shorthand) per non cancellare l'icona. */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 42px;
}

.offer-field select, .offer-field input {
    width: 100%; height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--font); font-size: 0.85rem; font-weight: 400; color: var(--ink); background-color: #fff; outline: none;
}
.offer-field select { padding-right: 30px; }
.offer-field select:focus, .offer-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.12); }
/* Stepper quantità: numero a destra, +/- impilati a sinistra */
.offer-qty {
    display: flex; align-items: stretch; height: 38px;
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
}
.offer-qty-btns { display: flex; flex-direction: column; flex: 0 0 26px; border-left: 1px solid var(--line); }
.offer-qty-btn {
    flex: 1 1 0; width: 100%; padding: 0; margin: 0; border: 0; background: var(--bg-alt);
    color: var(--accent-dark); font-family: var(--font); font-weight: 800; font-size: 0.95rem; line-height: 1;
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.offer-qty-btn + .offer-qty-btn { border-top: 1px solid var(--line); }
.offer-qty-btn:hover:not(:disabled) { background: var(--accent-dark); color: #fff; }
.offer-qty-btn:disabled { color: #c2c7cd; cursor: default; background: var(--bg-alt); }
.offer-qty input[data-offer-qta] {
    flex: 1 1 auto; width: auto; min-width: 0;
    border: 0; border-radius: 0; padding: 7px 4px;
    text-align: center; font-size: 0.95rem; font-weight: 800; color: var(--ink);
    -moz-appearance: textfield;
}
.offer-qty input[data-offer-qta]:focus { border: 0; box-shadow: none; }
.offer-qty input[data-offer-qta]::-webkit-outer-spin-button,
.offer-qty input[data-offer-qta]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Nazione unica: testo statico al posto del select */
.offer-field-static { display: flex; align-items: center; height: 38px; padding: 0 2px; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.offer-resa { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.offer-buy-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.offer-buy-price { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--accent-dark); text-align: center; }
/* "+IVA" più piccola del prezzo (imponibile mostrato, IVA esclusa) */
.offer-price-iva { font-family: var(--font); font-size: 0.6em; font-weight: 600; color: var(--ink-soft); white-space: nowrap; margin-left: 0.3em; }
/* Suffisso unità di misura "/m³" attaccato al prezzo, leggermente più piccolo */
.offer-price-unit { font-family: var(--font); font-size: 0.62em; font-weight: 700; color: var(--ink-soft); }

/* ─── Offerta informativa: slogan + prezzo "a partire da" + freccia sconto ── */
.offer-info-price-box {
    right: 14px; bottom: 14px; max-width: calc(100% - 28px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    text-align: right;
    padding: 9px 13px 15px 13px;
}
/* Slogan evidente sopra il prezzo */
.offer-info-slogan {
    align-self: stretch;
    font-family: var(--font-display); font-weight: 800; font-size: clamp(0.92rem, 1.8vw, 1.12rem);
    line-height: 1.15; color: var(--accent-dark);
}
/* "Da" e prezzo affiancati; badge sconto sotto, allineato a sinistra. */
.offer-info-price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0px; }
.offer-info-price { display: inline-flex; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 6px; }
.offer-info-price-pre { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); }
.offer-info-price-val { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--ink); white-space: nowrap; }
/* Badge sconto a "segnalibro": sotto il prezzo, con freccettina rivolta verso
   l'alto, a sinistra (non centrata). Font ridimensionabile col box. */
.offer-sconto-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 9px 11px 13px;
    border-radius: 15px;
    background: var(--danger, #e23b3b);
    color: #fff;
    font-family: var(--font);
    font-weight: 800;
    font-size: clamp(0.82rem, 1.6vw, 1.03rem);
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin: 8px 0 0;
}
.offer-sconto-arrow::before {
    content: "";
    position: absolute;
    left: 16px;
    top: -7px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--danger, #e23b3b);
}
.offer-cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 30px; border: 0; border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; font-family: var(--font); font-weight: 800; font-size: 1rem;
    cursor: pointer; position: relative; overflow: hidden;
    transition: transform 0.18s ease, filter 0.2s ease;
}
.offer-cta-buy { background: linear-gradient(135deg, #16a34a, #15803d); }
.offer-buy .offer-cta-buy { width: 100%; padding: 10px 18px; font-size: 0.92rem; }
.offer-cta > span { position: relative; z-index: 1; }
.offer-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.offer-cta:active { transform: none; }
.offer-cta:disabled { opacity: 0.7; cursor: wait; }
.offer-cta::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); }
/* Buy now: riflesso luminoso sempre attivo, continuo e lento (non più all'hover) */
.offer-cta-buy::after { animation: offer-shine 3.6s ease-in-out infinite; }
@keyframes offer-shine { 0% { left: -75%; } 45% { left: 130%; } 100% { left: 130%; } }
.offer-buy-err { font-size: 0.8rem; color: var(--danger); margin: 0; }
.offer-buy-err[hidden] { display: none; }
/* Footer grigio (prolungamento sotto la foto): titolo/domanda + CTA → form */
.offer-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.9rem, 2vw, 1.3rem);
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    cursor: pointer;
}
.offer-foot-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-foot-title { font-weight: 700; font-size: 0.92rem; margin: 0; color: var(--ink); }
.offer-foot-q { font-size: 0.82rem; margin: 0; color: var(--ink-soft); }
.offer-foot-cta {
    flex: 0 0 auto;
    padding: 11px 22px; border: 1px solid var(--accent); border-radius: var(--radius-card);
    background: #fff; color: var(--accent-dark); font-family: var(--font); font-weight: 800; font-size: 0.92rem;
    cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.offer-foot:hover .offer-foot-cta,
.offer-foot-cta:hover { background: var(--accent-dark); color: #fff; }

/* ─── Form preventivo (modale unico) ──────────────────────── */
.offer-form-overlay {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem) 1rem;
    background: rgba(15, 25, 35, 0.55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.offer-form-overlay[hidden] { display: none; }
.offer-form-box {
    position: relative;
    width: min(560px, 100%);
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.offer-form-close {
    position: absolute; top: 10px; right: 14px;
    width: 34px; height: 34px; border: 0; background: none;
    font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.offer-form-title { margin: 0 0 2px; }
.offer-form-sub { margin: 0 0 14px; color: var(--accent-dark); font-weight: 600; }
.offer-form-sub[hidden] { display: none; }
.offer-form { display: flex; flex-direction: column; gap: 12px; }
.offer-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offer-form-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.offer-form-field span { font-weight: 600; }
.offer-form-field input,
.offer-form-field textarea,
.offer-form-field select {
    width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--font); font-size: 0.92rem; font-weight: 400; color: var(--ink);
    background-color: #fff; outline: none; resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.offer-form-field select { padding-right: 40px; }
.offer-form-field input:focus,
.offer-form-field textarea:focus,
.offer-form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.12); }
.offer-form-check { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--ink); }
.offer-form-check input { margin-top: 3px; flex: 0 0 auto; }
.offer-form-security span { font-weight: 700; color: var(--ink); }
.offer-form-security input { max-width: 120px; }
/* Honeypot: invisibile agli umani */
.offer-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.offer-form-submit { justify-content: center; margin-top: 2px; }
.offer-form-msg { font-size: 0.9rem; font-weight: 600; margin: 0; }
.offer-form-msg[hidden] { display: none; }
.offer-form-ok { color: #15803d; }
.offer-form-err { color: var(--danger); }

/* ─── Form preventivo: wizard (header prodotto + step) ─────── */
.offer-form-head { display: flex; align-items: center; gap: 12px; padding-right: 34px; margin-bottom: 12px; }
.offer-form-thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.offer-form-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offer-form-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.offer-form-prod { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.2; }
.offer-form-cat { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.offer-form-head .offer-form-sub { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.offer-form-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.offer-form-step { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--line); transition: background 0.25s ease; }
.offer-form-step.is-active { background: var(--accent); }
.offer-step { display: flex; flex-direction: column; gap: 12px; }
.offer-step[hidden] { display: none; }
.offer-form-badge {
    align-self: flex-start; margin: 0;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0, 153, 184, 0.1); color: var(--accent-dark);
    font-size: 0.74rem; font-weight: 700;
}
.offer-form-badge-soft { background: var(--bg-alt); color: var(--ink-soft); }
.offer-form-help { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.offer-form-field small { font-weight: 500; color: var(--ink-soft); }
.offer-form-consent { margin: 0; font-size: 0.76rem; color: var(--ink-soft); text-align: center; }
.offer-form-consent strong { color: var(--ink); font-weight: 700; }
.offer-form-consent a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; }
.offer-form-consent a:hover { color: var(--accent); }
.offer-form-skip {
    align-self: center; margin: -4px 0 0; padding: 4px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font); font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline;
}
.offer-form-skip:hover { color: var(--accent-dark); }

/* Card di scelta (radio nascosti) */
.offer-choice { display: grid; gap: 8px; }
.offer-choice-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-choice-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-choice-opt { position: relative; display: block; cursor: pointer; }
.offer-choice-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.offer-choice-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 100%; min-height: 52px; padding: 8px 6px; text-align: center;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.2;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.offer-choice-card strong { font-size: 1rem; font-weight: 800; }
.offer-choice-card small { font-weight: 500; color: var(--ink-soft); font-size: 0.72rem; }
.offer-choice-opt:hover .offer-choice-card { border-color: var(--accent); }
.offer-choice-opt input:checked + .offer-choice-card {
    border-color: var(--accent); background: rgba(0, 153, 184, 0.08);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.offer-choice-opt input:focus-visible + .offer-choice-card { box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.2); }

/* Step 3: thank you */
.offer-step-thanks { align-items: center; text-align: center; gap: 10px; }
.offer-thanks-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 4px 0 2px; border-radius: 50%;
    background: rgba(0, 153, 184, 0.12); color: var(--accent-dark);
}
.offer-thanks-title { margin: 0; }
.offer-thanks-sub { margin: 0; color: var(--ink-soft); font-size: 0.92rem; max-width: 42ch; }
.offer-thanks-timeline {
    list-style: none; width: 100%; margin: 6px 0 2px; padding: 16px;
    display: flex; flex-direction: column; gap: 13px;
    background: var(--bg-alt); border-radius: var(--radius-card); text-align: left;
}
.offer-thanks-timeline li { display: flex; gap: 11px; align-items: flex-start; }
.offer-thanks-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.offer-thanks-timeline strong { display: block; font-size: 0.9rem; color: var(--ink); }
.offer-thanks-timeline small { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.4; }
.dot-now { background: #22c55e; }
.dot-soon { background: #f59e0b; }
.dot-mail { background: #3b82f6; }

.product-section { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.product-section h2 { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.product-section-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 2.5vw, 28px);
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.product-section-head h2 { margin-bottom: 0; }
.product-section-head .slider-nav { width: 40px; height: 40px; }
.product-richtext { max-width: 860px; color: var(--ink-soft); }
.product-richtext p { margin-bottom: 1em; }
/* Titoli H2 dei contenuti importati dagli editor (TinyMCE): respiro coerente.
   Su desktop ~50px sopra e ~30px sotto; ridotti su mobile. Agganciati alle
   "sovraclassi" dei contenitori editor (.product-richtext, .collapsible-content,
   .accordion-body delle FAQ/HowTo). */
.product-richtext h2,
.collapsible-content h2,
.accordion-body h2 { margin-top: 50px; margin-bottom: 30px; line-height: 1.25; }
@media (max-width: 680px) {
    .product-richtext h2,
    .collapsible-content h2,
    .accordion-body h2 { margin-top: 32px; margin-bottom: 20px; }
}
.product-richtext ul, .product-richtext ol,
.collapsible-content ul, .collapsible-content ol,
.accordion-body ul, .accordion-body ol { margin: 0 0 1em 20px; }
.product-richtext table { border-collapse: collapse; width: 100%; }
.product-richtext td, .product-richtext th { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
/* Link dentro i contenuti rich-text (editor): riconoscibili e coerenti col tema.
   Senza questa regola i link ricadono sul reset globale `a { color: inherit;
   text-decoration: none }` e diventano invisibili nel testo. */
.product-richtext a,
.magazine-article-body a,
.entity-intro-desc a { color: var(--accent-dark); text-decoration: underline; }
.product-richtext a:hover,
.magazine-article-body a:hover,
.entity-intro-desc a:hover { color: var(--accent); }

/* ─── Pagina errore ───────────────────────────────────────── */
.error-page { text-align: center; padding: clamp(4rem, 10vw, 7rem) 0; }
.error-code { font-size: clamp(4rem, 10vw, 6.5rem); font-weight: 700; color: var(--line); line-height: 1; }
.error-page h1 { margin: 10px 0 12px; }
.error-page p { color: var(--ink-soft); margin-bottom: 30px; }

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer { background: #1f2326; color: rgba(255, 255, 255, 0.7); }
.footer-container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(3rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 3vw, 2.5rem);
}
.footer-logo { display: block; font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-logo-img { max-height: 48px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-col h3 {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }

/* Social: fila di icone tonde */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-social li { margin-bottom: 0; }
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer-social a:hover {
    color: #fff;
    border-color: var(--accent-dark);
    background: var(--accent-dark);
}

/* Recensioni: sotto le social ("Resta ispirato"), con icona link esterno a dx. */
/* selettore più specifico per battere `.footer-col p` */
.footer-col .footer-recensioni-title { margin: 18px 0 10px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.footer-recensioni-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-recensioni-list li { margin: 0; }
.footer-recensioni-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-recensioni-list a:hover { color: #fff; }
.footer-recensioni-ext { flex: 0 0 auto; opacity: 0.65; }
.footer-recensioni-list a:hover .footer-recensioni-ext { opacity: 1; }

/* Colonna "Info": link alle pagine CMS selezionate + Tag. Con la colonna
   presente la griglia passa a 4 colonne (footer-grid-4 dal template). */
.footer-grid-4 { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
/* Interlinea come i dati società (.footer-col p: 6px): il gap della lista era
   8px e si sommava agli 8px di margine dei li (feedback 10/09). */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-links li { margin: 0; }
.footer-links a { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: #fff; }

/* Selettore siti/lingue */
.footer-siti-select {
    width: 100%;
    max-width: 260px;
    padding: 10px 40px 10px 14px;
    background-color: transparent;
    /* footer scuro → freccia chiara */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.footer-siti-select:hover,
.footer-siti-select:focus { border-color: var(--accent); outline: none; }
.footer-siti-select option { background: #1f2326; color: #fff; }
.footer-col p { font-size: 0.9rem; margin-bottom: 6px; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 0.82rem;
}

/* ─── Mega menu desktop ───────────────────────────────────────
   Il pannello è ancorato all'header fisso (.site-header è il
   containing block): largo quanto l'header, da bordo a bordo. */
.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    font-family: var(--font);
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 500;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.nav-dropdown-btn svg { transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown.open .nav-dropdown-btn { border-bottom-color: var(--accent); }
.nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }
.nav-mega {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.25);
    padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.5rem) clamp(1.1rem, 2vw, 1.6rem);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    display: none;
    z-index: 1001;
}
.nav-dropdown.open .nav-mega { display: block; animation: megaIn 0.22s ease; }
@keyframes megaIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
/* Categorie a tre pannelli: principali chiuse a sinistra, le
   sottocategorie si aprono al centro, anteprima immagine a destra */
.nav-mega-cat {
    display: grid;
    grid-template-columns: minmax(260px, 400px) minmax(240px, 360px) 1fr;
    gap: clamp(1.2rem, 2.5vw, 2.4rem);
    align-items: stretch;
}
.nav-mega-cat-main {
    max-height: min(56vh, 560px);
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--line);
    padding-right: clamp(0.8rem, 1.5vw, 1.4rem);
}
.nav-mega-cat-mainvoce {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    padding: 9px 12px;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-mega-cat-mainvoce:hover,
.nav-mega-cat-mainvoce.active { background: var(--bg-alt); color: var(--accent-dark); }
.nav-mega-cat-subs {
    max-height: min(56vh, 560px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.nav-mega-cat-sublist { display: none; }
.nav-mega-cat-sublist.active { display: block; animation: megaIn 0.18s ease; }
.nav-mega-cat-sublist a {
    display: block;
    padding: 8px 0;
    font-size: 0.95rem;
    color: var(--ink);
    border-bottom: 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.nav-mega-cat-sublist a:hover { color: var(--accent-dark); padding-left: 6px; }
.nav-mega-cat-preview {
    position: relative;
    min-height: 360px;
    max-height: min(56vh, 560px);
    max-width: 600px;
    width: 100%;
    justify-self: start;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.nav-mega-cat-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-mega-cat-preview img[hidden] { display: none; }
.nav-mega-cat-preview-nome {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 40px 20px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
}
.nav-mega-links a {
    display: block;
    padding: 7px 0;
    font-size: 0.92rem;
    color: var(--ink);
    border-bottom: 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.nav-mega-links a:hover { color: var(--accent-dark); padding-left: 6px; }
.nav-mega-links {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px clamp(1.2rem, 2.5vw, 2rem);
}
.nav-mega-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
}
.nav-mega-tiles a {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.nav-mega-tiles img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.nav-mega-tiles a:hover img { transform: scale(1.05); }
.nav-mega-tiles span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}
.nav-mega-empty { color: var(--ink-soft); font-size: 0.92rem; font-style: italic; }
.nav-mega-all {
    margin-top: clamp(1.2rem, 2vw, 1.8rem);
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
}
.nav-mega-all a { font-weight: 600; font-size: 0.92rem; color: var(--accent-dark); border-bottom: 0; }
.nav-mega-all a:hover { color: var(--ink); }

/* ─── Pagine indice (categorie, ambienti, brand) ──────────── */
.index-group:not(:first-child) { margin-top: clamp(2.4rem, 5vw, 4rem); }

/* Ordinamento brand: switch segmentato sobrio (segmento attivo bianco) */
.brand-sort { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.brand-sort-label { color: var(--ink-soft); font-size: 0.9rem; }
.brand-switch { display: inline-flex; padding: 4px; gap: 2px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; }
.brand-switch-opt { padding: 7px 18px; border: 0; background: transparent; cursor: pointer; font-family: inherit; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease; }
.brand-switch-opt:hover { color: var(--ink); }
.brand-switch-opt.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }

.brand-index {
    transition: opacity 0.16s ease;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
/* Card brand: immagine sopra con il logo che sporge in basso a destra,
   nome e numero prodotti sotto. Le card riempiono la riga della griglia
   così hanno tutte la stessa altezza. */
.brand-index li { display: flex; }
.brand-index a {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding-bottom: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brand-index a:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); }
.brand-index-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.brand-index-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-index-logobox {
    position: absolute;
    right: 14px;
    bottom: -22px; /* il logo esce un po' sotto l'immagine */
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 0;
    overflow: hidden;
}
.brand-index-logobox img { width: 100%; height: 100%; object-fit: cover; }
.brand-index-iniziali {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    border-radius: 10px;
}
/* Immagine di testata visibile sulle SERP di sottocategoria (feedback 07/09). */
.page-head-img { margin: 1rem 0 1.25rem; max-width: 860px; }
.page-head-img img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* Facade video: locandina con play, l'iframe nasce al click (feedback 07/09). */
.video-facade { position: relative; display: block; width: min(420px, 100%); border: 0; padding: 0; margin: .5rem 0 0; cursor: pointer; border-radius: 12px; overflow: hidden; background: #000; }
.video-facade img { width: 100%; height: auto; display: block; opacity: .92; transition: opacity .2s, transform .3s; }
.video-facade:hover img { opacity: 1; transform: scale(1.02); }
.video-facade-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-facade-play svg { width: 54px; height: 54px; padding: 14px; box-sizing: border-box; color: #fff; background: rgba(0,0,0,.55); border-radius: 50%; transition: background .2s; }
.video-facade:hover .video-facade-play svg { background: var(--accent, #3f8a8c); }

/* Breadcrumb sull'hero scuro degli ambienti (feedback 07/09). */
.ambiente-breadcrumb { margin: 0 0 1rem; font-size: .85rem; }
.ambiente-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.ambiente-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.ambiente-breadcrumb span { color: rgba(255,255,255,.55); }

/* h2 vero (feedback 07/09): azzera i margini di default del titolo. */
.brand-index-nome { font-weight: 600; font-size: 1.05rem; margin: 32px 0 0; padding: 0 16px; }
/* Riga "specialità — città" sotto il nome del marchio. */
.brand-index-meta { display: block; color: var(--ink-soft); font-size: .82rem; margin-top: 2px; padding: 0 16px; }
/* Select del filtro per specialità, accanto all'ordinamento. */
.brand-filter-select { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 10px; font-size: .9rem; color: var(--ink); background: #fff; margin-right: auto; }
.brand-index-count { font-size: 0.85rem; color: var(--ink-soft); padding: 0 16px; margin-top: 2px; }

/* ─── Pagina contatti ─────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    background: var(--bg-alt);
    border-radius: var(--radius-card);
    transition: background 0.2s ease;
}
a.contact-card:hover { background: var(--line); }
.contact-card svg { color: var(--accent-dark); }
.contact-card-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.contact-card-value { font-weight: 600; word-break: break-word; }
.contact-legal { margin-top: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink-soft); font-size: 0.92rem; }
.contact-social-title { margin-top: clamp(2rem, 4vw, 3rem); }

/* ─── Icone contatto header ───────────────────────────────── */
.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
}
.header-icon:hover { background: var(--bg-alt); color: var(--accent-dark); }
.header-icon-wa:hover { color: #25d366; }

/* ─── Card prodotto: corpo info + azioni ──────────────────── */
.product-card-img { display: flex; }
.product-card-body { display: flex; flex-direction: column; }
/* Riga nome + prezzo. Il prezzo è allineato alla base del nome (align-items:
   baseline). Il nome CRESCE (flex 1 1 auto): quando nome e prezzo stanno sulla
   stessa riga è il nome a spingere il prezzo contro il bordo destro; quando lo
   spazio non basta (card strette) il prezzo va a capo e riparte da SINISTRA,
   sotto il nome — mai sovrapposto, mai "sospeso" a destra da solo. */
.product-card-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
}
.product-card-name-link { display: block; flex: 1 1 auto; min-width: 0; }
.product-card-name { font-weight: 700; margin-bottom: 0; }
.product-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 6px;
    flex: 0 0 auto;
    max-width: 100%;
}
/* Se il blocco prezzo da solo è più largo della card (unità di misura lunghe)
   può spezzarsi internamente (barrato / importo / unità) invece di uscire. */
.product-card-pricing { flex-wrap: wrap; justify-content: flex-end; }
.product-card-fly {
    position: absolute;
    top: clamp(0.6rem, 1.5vw, 1rem);
    right: clamp(0.6rem, 1.5vw, 1rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 2;
}
.product-card-fly .product-badge { position: static; }
.fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    /* Contorno scuro morbido: il cuore resta leggibile su qualsiasi sfondo */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.0)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    transition: color 0.2s ease, transform 0.2s ease;
}
.fav-btn:hover { color: var(--danger); transform: scale(1.1); }
.fav-btn.active { color: var(--danger); filter: inherit; }
.fav-btn.active svg { fill: var(--danger); }

/* Cuore preferiti nella scheda prodotto: card chiara, quindi grigio scuro
   (non bianco). Sta sulla stessa riga del titolo e resta allineato alla
   PRIMA riga anche quando il titolo va a capo (align-items: flex-start).
   La dimensione è in em, quindi cresce col font del titolo. */
.product-info-head { display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 24px); }
.product-info-head h1 { flex: 1 1 auto; min-width: 0; }
.fav-btn-product {
    flex: 0 0 auto;
    /* font-size del titolo → il cuore (in em) è proporzionato al titolo */
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.6rem);
    /* stessa altezza di una riga del titolo: il cuore si centra sulla 1ª riga */
    height: 1.12em;
    padding: 0;
    color: var(--ink-soft, #6b7280);
    filter: none;
}
.fav-btn-product svg { width: 0.62em; height: 0.62em; display: block; }
.fav-btn-product:hover { color: var(--danger); }
.badge-novita { background: var(--ink); }
.badge-novita .static-note { display: none; }

/* ─── Leggi di più ────────────────────────────────────────── */
.collapsible .collapsible-content { overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.collapsible.collapsed .collapsible-content {
    max-height: 120px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.collapsible-toggle {
    margin-top: 10px;
    background: none;
    border: 0;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
    padding: 0;
}
.collapsible-toggle:hover { text-decoration: underline; }
/* Sottocategoria: su mobile breadcrumb, titolo e descrizione con padding extra
   (allineati tra loro). */
@media (max-width: 680px) {
    .page-head-pad .breadcrumb,
    .page-head-pad h1,
    .page-head-pad .collapsible { padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); }
}

/* ─── Overlay video ───────────────────────────────────────── */
.video-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: clamp(24px, 3.5vw, 40px) 0;
}
/* Nella colonna destra il pulsante video occupa tutta la larghezza del blocco. */
.product-video-block .video-open-btn { width: 100%; justify-content: center; margin: 0; }
.video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
/* display:flex sopra vincerebbe sull'attributo hidden del browser */
.video-overlay[hidden] { display: none; }
.video-overlay-box {
    position: relative;
    width: min(960px, 100%);
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.video-overlay-close {
    position: absolute;
    top: 8px; right: 12px;
    z-index: 2;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.video-overlay-embed { aspect-ratio: 16 / 9; }
.video-overlay-embed iframe, .video-overlay-embed video { width: 100%; height: 100%; border: 0; }

/* ─── Filtri SERP ─────────────────────────────────────────── */
.serp-section { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
.serp-filters {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.serp-filters-groups {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.6rem);
    flex-wrap: wrap;
}
.filter-group { position: relative; }
.filter-group summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    transition: border-color 0.2s ease;
    user-select: none;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary:hover, .filter-group[open] summary { border-color: var(--accent); }
/* Numerino dei filtri selezionati nel gruppo, in alto a destra del pulsante
   (stesso stile del contatore preferiti nell'header — richiesta 10/09). */
.filter-group summary { position: relative; }
.filter-count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--accent-dark); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* Reset filtri: testo-link dopo l'ultimo filtro, solo con filtri attivi. */
.filter-reset { font-size: 0.92rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.filter-reset:hover { color: var(--accent); }
.filter-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 12px;
}
.filter-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
}
.filter-options label:hover { background: var(--bg-alt); }
.filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    /* line-height ridotta: con align-items:center il testo (che ha più spazio
       sopra per gli ascendenti) risultava otticamente alzato rispetto al
       checkbox. line-height:1 stringe il box del testo e lo ricentra. */
    line-height: 1;
    cursor: pointer;
}
.serp-sort { display: flex; align-items: center; gap: 10px; }
.serp-sort-label { font-size: 0.9rem; color: var(--ink-soft); }
.serp-sort select {
    font-family: var(--font);
    font-size: 0.92rem;
    padding: 9px 40px 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background-color: #fff;
    cursor: pointer;
}

/* ─── Ambienti ────────────────────────────────────────────── */
.ambienti-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.ambienti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 300px), 1fr));
    gap: clamp(1.4rem, 2.6vw, 2.2rem);
}

/* ─── Visti di recente ────────────────────────────────────── */
.recent-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--bg-alt);
    overflow: hidden; /* lo slider full-bleed non deve creare scroll orizzontale */
    border-top: 1px solid var(--line);
}
.product-card-recent { flex: 0 0 clamp(200px, 20vw, 260px); }
.product-card-recent .product-card-body { display: block; }
.product-card-recent .product-card-name,
.product-card-recent .product-card-pricing { display: block; }

/* ─── Approfondimenti ─────────────────────────────────────── */
.approfondimenti-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.approfondimenti-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* Riga di fondo SERP categoria: Approfondimenti a sinistra e, alla sua
   destra, "Guarda il video" (richiesta 10/09). Allineati in alto così la
   lista degli approfondimenti si apre sotto senza spostare il video. */
.approf-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.approf-row .video-btn-row { margin: 0; display: flex; }
/* Pulsante video con le STESSE misure del pulsante Approfondimenti
   (padding, font, interlinea): stessa altezza sulla riga. */
.approf-row .video-open-btn { margin: 0; padding: 12px 22px; font-weight: 600; line-height: 1.6; }
/* La lista dei link vive FUORI dal <details> (ultimo elemento della riga):
   nascosta finché è chiuso, a tutta riga sotto i pulsanti quando è aperto. */
.approf-row .approf-row-list { display: none; flex-basis: 100%; }
.approf-row .approf-toggle-box[open] ~ .approf-row-list { display: flex; }
/* Pulsante "Approfondimenti" con +: apre i pulsanti-link (sottocategoria). */
.approf-toggle-box { display: inline-block; }
.approf-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 12px 22px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    transition: background 0.2s ease, color 0.2s ease;
}
.approf-toggle-btn::-webkit-details-marker { display: none; }
.approf-toggle-btn:hover { background: var(--ink); color: #fff; }
.approf-toggle-plus { font-size: 1.35rem; line-height: 1; transition: transform 0.25s ease; }
.approf-toggle-box[open] .approf-toggle-plus { transform: rotate(45deg); }
.approf-toggle-box[open] { display: block; }
/* Lista animata (altezza via JS): padding-top nel flusso così entra nell'animazione. */
.approf-toggle-box .approfondimenti-list,
.approf-row-list { overflow: hidden; padding-top: 18px; transition: height 0.28s ease; }
@media (prefers-reduced-motion: reduce) {
    .approf-toggle-box .approfondimenti-list, .approf-row-list { transition: none; }
}

/* ─── Card staff (pagina chi siamo, HTML con classi dall'editor — restyling
   08/09): card GRANDI orizzontali, foto e nome a sinistra, bio a destra con
   due azioni: "Guarda il video" (popup, niente anteprima inline) e LinkedIn
   come LOGO. Arrotondamenti marcati come le card del sito. ─── */
.page-content:has(.staff-grid) { max-width: none; }
/* Intro: meno aria sopra (si avvicina al titolo), più respiro sotto prima
   delle card (richiesta 08/09). */
.catalog-section:has(.staff-grid) { padding-top: 0.75rem; }
/* Anche .page-content .staff-intro: l'intro sta nel rich text della pagina,
   e la regola generica .page-content p altrimenti vince sul margine. */
.staff-intro, .page-content .staff-intro { max-width: 720px; color: var(--ink-soft); margin: 0 0 clamp(4.5rem, 7vw, 6.5rem); line-height: 1.7; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); gap: clamp(24px, 3vw, 70px); }
/* Riga persona SENZA contenitore: a sinistra la card in stile "più
   richiesti" (foto, ruolo in maiuscoletto accent, nome), accanto il testo
   nudo con i pulsanti impilati uno per riga (richiesta 08/09). */
.staff-card { display: flex; gap: clamp(18px, 2.5vw, 28px); align-items: flex-start; }
.staff-side { flex: 0 0 clamp(200px, 22vw, 260px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.staff-side:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.staff-foto { order: 1; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; margin: 0; }
.staff-ruolo { order: 2; display: block; border-top: 1px solid var(--line); padding: 14px 16px 0; color: var(--accent-dark); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.staff-nome { order: 3; display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.3; padding: 4px 16px 16px; }
.staff-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.staff-bio { color: var(--ink-soft); line-height: 1.65; font-size: .95rem; }
.staff-bio p { margin: 0 0 1em; }
.staff-bio p:last-child { margin-bottom: 0; }
/* Pulsanti UNO PER RIGA, senza contenitore. */
.staff-actions { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Bottone video: pill scura con icona play, apre il POPUP (niente iframe in card). */
.staff-video-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--accent-dark, #007a93); color: #fff; font-weight: 600; font-size: .9rem; padding: 10px 20px; border-radius: 999px; text-decoration: none; transition: background .2s; }
.staff-video-btn:hover { background: #00566d; color: #fff; }
/* La regola generica .page-content a (colore accent + underline) non deve
   toccare i bottoni delle card staff (segnalazione 08/09). */
.page-content .staff-video-btn, .page-content .staff-video-btn:hover { color: #fff; text-decoration: none; }
.page-content a.staff-linkedin { text-decoration: none; }
.staff-video-btn::before { content: ''; width: 12px; height: 12px; flex: 0 0 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3l16 9-16 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3l16 9-16 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* LinkedIn: SOLO il logo (richiesta 08/09), quadrotto blu brand arrotondato. */
.staff-linkedin { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; background: #0a66c2; border-radius: 10px; text-decoration: none; overflow: hidden; text-indent: -9999px; position: relative; transition: background .2s; }
.staff-linkedin:hover { background: #084d92; }
.staff-linkedin::after { content: ''; position: absolute; inset: 9px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.24 8.31h4.52V23H.24zM8.34 8.31h4.33v2h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V23h-4.52v-7.1c0-1.7-.03-3.88-2.36-3.88-2.37 0-2.73 1.85-2.73 3.76V23H8.34z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.24 8.31h4.52V23H.24zM8.34 8.31h4.33v2h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V23h-4.52v-7.1c0-1.7-.03-3.88-2.36-3.88-2.37 0-2.73 1.85-2.73 3.76V23H8.34z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 560px) {
    .staff-card { flex-direction: column; align-items: center; }
    .staff-side { flex-basis: auto; width: min(280px, 100%); }
    .staff-actions { align-items: center; align-self: center; }
}

/* Popup video staff (richiesta 08/09): backdrop scuro, box 16:9, il video
   parte all'apertura e si ferma alla chiusura (l'iframe viene rimosso). */
.staff-video-overlay { position: fixed; inset: 0; background: rgba(15, 18, 20, .72); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.staff-video-overlay[hidden] { display: none; }
.staff-video-box { position: relative; width: min(960px, 100%); }
.staff-video-frame { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; }
.staff-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.staff-video-close { position: absolute; top: -42px; right: 0; border: 0; background: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.staff-video-close:hover { opacity: .8; }

/* Accordion della pagina FAQ statica (contenuto dall'editor — richiesta 07/09):
   card più ariose come da mockup, domanda in evidenza, risposta morbida. */
.accordion-faq-statica { margin-top: 1.25rem; }
.accordion-faq-statica .accordion-item { margin-bottom: 14px; border-radius: 12px; }
.accordion-faq-statica .accordion-item summary { font-size: 1.05rem; line-height: 1.45; padding: 18px 54px 18px 22px; }
.accordion-faq-statica .accordion-body { padding: 0 54px 18px 22px; line-height: 1.7; }
.accordion-faq-statica .accordion-body p { margin: 0 0 1em; }
.accordion-faq-statica .accordion-body p:last-child { margin-bottom: 0; }

/* ─── FAQ + HowTo accordion ───────────────────────────────── */
.faq-howto-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.faq-howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.accordion-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
}
.accordion-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    /* padding destro ampio: lascia spazio al marcatore +/× senza sovrapporre il testo */
    padding: 14px 50px 14px 18px;
    position: relative;
    user-select: none;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--ink-soft);
}
.accordion-item[open] summary::after { content: '\2212'; }
.accordion-body { padding: 0 50px 16px 18px; color: var(--ink-soft); }
.howto-desc { color: var(--ink-soft); margin-bottom: 16px; }
/* FAQ (sx) + How to (dx) sempre al 50% (articolo e categoria). La colonna
   eventualmente vuota mantiene comunque la sua metà, così l'altra resta in posizione. */
.faq-howto-grid .faq-col,
.faq-howto-grid .howto-col { min-width: 0; }
/* Accordion animati (data-accordion-single): altezza del corpo animata via JS
   (height in px → transition). overflow:hidden per non far traboccare il testo. */
[data-accordion-single] .accordion-body {
    overflow: hidden;
    transition: height 0.28s ease;
}
[data-accordion-single] .accordion-item summary::after { transition: transform 0.28s ease; }
[data-accordion-single] .accordion-item[open] summary::after { content: '+'; transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
    [data-accordion-single] .accordion-body { transition: none; }
    [data-accordion-single] .accordion-item summary::after { transition: none; }
}

/* ─── Responsive ──────────────────────────────────────────── */
/* Sotto i 768px: niente icone contatti nell'header, compare il FAB flottante */
@media (max-width: 768px) {
    .header-contacts { display: none; }
    .lead-fab {
        display: block; position: fixed; right: 16px; bottom: 16px; z-index: 60;
        width: 56px; height: 56px;
    }
    .lead-fab-main {
        position: absolute; right: 0; bottom: 0; z-index: 2;
        width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
        transition: transform 0.25s ease, box-shadow 0.2s ease;
    }
    .lead-fab.open .lead-fab-main { transform: rotate(90deg); }
    .lead-fab-icon-close { display: none; }
    .lead-fab.open .lead-fab-icon-open { display: none; }
    .lead-fab.open .lead-fab-icon-close { display: block; }
    .lead-fab-action {
        position: absolute; right: 6px; bottom: 6px;
        width: 44px; height: 44px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
        transform: translate(0, 0) scale(0.3); opacity: 0; pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25), opacity 0.2s ease;
    }
    .lead-fab-phone { background: var(--accent-dark); }
    .lead-fab-email { background: var(--ink); }
    .lead-fab-wa { background: #25d366; }
    .lead-fab.open .lead-fab-action { opacity: 1; pointer-events: auto; }
    .lead-fab.open .lead-fab-wa    { transform: translate(-76px, 0) scale(1); transition-delay: 0.03s; }
    .lead-fab.open .lead-fab-email { transform: translate(-54px, -54px) scale(1); transition-delay: 0.07s; }
    .lead-fab.open .lead-fab-phone { transform: translate(0, -76px) scale(1); transition-delay: 0.11s; }
}

/* Scheda prodotto: passa a una colonna già a 1280px */
@media (max-width: 1280px) {
    .product-content { gap: clamp(1.5rem, 4vw, 2.4rem); }
    .product-editorial { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); }
    .product-editorial-aside > .product-kit { max-width: 560px; }
}

@media (max-width: 1024px) {
    .main-nav { display: none; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .categories-container { grid-template-columns: 1fr; }
    .categories-text { width: 100%; }
    .categories-main { max-width: none; width: 100%; }
    .categories-grid { max-width: none; width: 100%; grid-template-columns: repeat(2, 1fr); }
    .bestsellers-container { flex-direction: column; align-items: flex-start; padding-right: clamp(1.5rem, 8vw, 9rem); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .header-actions .search-form { display: none; }
    .product-grid { grid-template-columns: 1fr; }
    .offer-form-grid { grid-template-columns: 1fr; }
    .offer-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Su mobile: niente carosello/frecce, le offerte si impilano (evita gli
       spazi vuoti tra card di altezza diversa). L'immagine torna in flusso ed
       è più alta per dare spazio ai testi sopra; la sezione acquisto va sotto,
       a tutta larghezza e compatta. */
    .offer-nav { display: none; }
    .product-offers-wrap.has-multi .product-offers { flex-direction: column; overflow-x: visible; scroll-snap-type: none; }
    .product-offers-wrap.has-multi .offer-card { flex: 0 0 auto; width: 100%; scroll-snap-align: none; }
    .offer-media { aspect-ratio: auto; }
    .offer-img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
    .offer-buy { position: static; width: auto; max-width: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: clamp(0.7rem, 3.5vw, 1rem); gap: 6px; }
    /* Offerta acquisto: foto più alta e riquadro d'acquisto sovrapposto
       dentro la foto, come su desktop */
    .offer-acquisto .offer-media { aspect-ratio: 4 / 5; }
    .offer-acquisto .offer-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
    .offer-acquisto .offer-buy {
        position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none;
        border: 1px solid var(--line); border-radius: var(--radius-card);
        background: rgba(255, 255, 255, 0.96);
        padding: 10px 12px; gap: 6px;
    }
    .offer-buy-fields { gap: 6px; }
    .offer-buy-fields .offer-field:last-child { flex: 0 0 84px; }
    .offer-field { font-size: 0.68rem; }
    .offer-field select, .offer-field input { padding: 6px 8px; font-size: 0.82rem; }
    .offer-resa { font-size: 0.74rem; }
    .offer-buy-price { font-size: clamp(1.05rem, 4.5vw, 1.3rem); }
    .offer-buy .offer-cta-buy { padding: 9px 16px; font-size: 0.88rem; }
    .offer-box { padding: 6px 9px; }
    .offer-box-info { max-width: 56%; }
    .offer-info-desc { -webkit-line-clamp: 2; }
    /* Offerta informativa: blocco prezzo ancorato in basso, leggibile su foto corta */
    .offer-info-price-box { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 8px 11px; gap: 6px; }
    .offer-info-slogan { font-size: clamp(0.86rem, 4vw, 1rem); }
    .offer-info-price-val { font-size: clamp(1.05rem, 4.5vw, 1.3rem); }
    .offer-foot { flex-direction: column; align-items: stretch; }
    .offer-foot-cta { width: 100%; }
    .categories-grid { grid-template-columns: 1fr; }
    .product-hero-frame { aspect-ratio: 4 / 5; }
    .side-panel { width: 90vw; right: -95vw; }
    .footer-grid { grid-template-columns: 1fr; }
    .faq-howto-grid { grid-template-columns: 1fr; }
    /* Su mobile (impilate) nascondo la colonna vuota: niente gap fantasma. */
    .faq-howto-grid > div:not(:has(*)) { display: none; }
    .serp-filters { flex-direction: column; }
}

/* ─── Magazine: indice articoli + articolo singolo ────────────────────── */
.magazine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.magazine-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card, 14px); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.magazine-card:hover { border-color: var(--accent, #0099b8); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.magazine-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.magazine-card-media { position: relative; aspect-ratio: 16 / 10; background: #f3f4f6; display: block; }
.magazine-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magazine-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: #c4c8cc; }
/* Ritmo verticale uniforme: il gap (16px) è lo stesso spazio sopra l'autore,
   sopra/sotto il tag categoria e sotto il titolo. */
.magazine-card-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 18px; flex: 1; }
/* Un solo colore per i badge categoria (max 2-3 colori nel sito, 09/09):
   il colore per-categoria del CMS (--cat) NON viene piu' usato. */
.magazine-card-cat { align-self: flex-start; font-size: 0.68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent-dark, #007a93); padding: 3px 9px; border-radius: 999px; }
/* Categoria come LINK all'hub: badge sopra la copertina, fuori dall'anchor
   della card (niente <a> annidati). */
.magazine-card-cat--badge { position: absolute; top: 10px; left: 10px; z-index: 2; text-decoration: none; box-shadow: 0 1px 6px rgba(0, 0, 0, .28); }
a.magazine-card-cat--badge:hover, a.magazine-card-cat--badge:focus-visible { background: #00566d; text-decoration: none; color: #fff; }
a.magazine-article-cat { text-decoration: none; }
a.magazine-article-cat:hover { background: #00566d; color: #fff; }
.magazine-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; line-height: 1.25; color: var(--ink); }
.magazine-card-excerpt { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.magazine-card-meta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 0.78rem; color: var(--ink-soft); }
.magazine-card-autore { font-weight: 700; }

.magazine-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.magazine-pager-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; color: var(--ink); transition: background .2s ease, color .2s ease; }
.magazine-pager-btn:hover { background: var(--ink); color: #fff; }
.magazine-pager-info { font-weight: 700; color: var(--ink-soft); }

.magazine-article-cat { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent-dark, #007a93); padding: 4px 11px; border-radius: 999px; margin-bottom: 10px; }
.magazine-article-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-soft); font-size: 0.9rem; margin-top: 8px; }
.magazine-article-wrap { max-width: 820px; }
.magazine-article-cover { margin: 0 0 clamp(20px, 3vw, 32px); border-radius: var(--radius-card, 14px); overflow: hidden; }
.magazine-article-cover img { width: 100%; height: auto; display: block; }
.magazine-article-body { font-size: 1.05rem; line-height: 1.7; }
.magazine-article-back { margin-top: clamp(28px, 4vw, 44px); }
.magazine-article-back a { font-weight: 700; text-decoration: none; color: var(--accent-dark, #007a91); }
/* Firma autore linkata nella meta dell'articolo */
.magazine-article-autore { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.magazine-article-autore:hover { text-decoration: underline; }

/* ─── Pagina autore Magazine ──────────────────────────────── */
.magazine-author-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); margin-top: 14px; }
.magazine-author-avatar { flex-shrink: 0; width: clamp(72px, 12vw, 104px); height: clamp(72px, 12vw, 104px); border-radius: 50%; overflow: hidden; background: var(--surface-2, #eef1f2); display: flex; align-items: center; justify-content: center; }
.magazine-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magazine-author-initials { font-size: 2rem; font-weight: 800; color: var(--ink-soft); }
.magazine-author-info h1 { margin: 0; }
.magazine-author-role { margin: 4px 0 0; color: var(--accent-dark); font-weight: 700; font-size: 0.95rem; }
.magazine-author-bio { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; max-width: 720px; }

@media (max-width: 1100px) { .magazine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .magazine-grid { grid-template-columns: 1fr; } .magazine-author-head { flex-direction: column; align-items: flex-start; } }

/* ─── Pagina Ambiente: hero full-screen + descrizione estesa ──────────── */
.ambiente-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}
.ambiente-hero-noimg { background: var(--accent-dark, #007a91); }
.ambiente-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.30) 100%);
}
.ambiente-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding-top: clamp(28px, 5vw, 56px);
    padding-bottom: clamp(28px, 5vw, 60px);
}
.ambiente-hero h1 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    line-height: 1.05;
    margin: 0;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.ambiente-hero-desc {
    color: rgba(255,255,255,0.94);
    max-width: 720px;
    margin: 0.9rem auto 0;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.ambiente-hero-desc p { margin: 0 0 0.5em; }
.ambiente-hero-desc p:last-child { margin-bottom: 0; }
/* Categorie collegate nell'hero: pillole centrate sopra l'immagine. */
.ambiente-categorie {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.ambiente-categorie a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ambiente-categorie a:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Ispirazioni: slider orizzontale di immagini dell'ambiente, con zoom al click. */
.ambiente-ispirazioni-section { padding: clamp(2.2rem, 4.5vw, 4rem) 0 0; }
.ambiente-ispirazioni-section .product-section-head { margin-bottom: 1.2rem; justify-content: space-between; }
.ispirazioni-slider {
    display: flex;
    gap: clamp(14px, 2vw, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
    /* Wide sul lato destro: lo slider sborda fino al bordo destro del viewport. */
    margin-right: calc((100% - 100vw) / 2);
    padding-right: clamp(16px, 4vw, 60px);
}
/* Immagini ingrandite rispetto alla base "4 per riga" (×1.26 = ~10% più strette
   del precedente ×1.4); aspect-ratio 3/4 = ~20% più basse. */
.ispirazione-item {
    margin: 0;
    flex: 0 0 calc((100% - 3 * clamp(14px, 2vw, 22px)) / 4 * 1.26);
    min-width: 0;
    scroll-snap-align: start;
}
@media (max-width: 680px) {
    .ispirazione-item { flex-basis: calc((100% - clamp(14px, 2vw, 22px)) / 2 * 1.26); }
}
.ispirazione-zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-alt);
}
.ispirazione-zoom img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.ispirazione-zoom:hover img { transform: scale(1.05); }
.ispirazione-zoom-icon {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ispirazione-zoom:hover .ispirazione-zoom-icon,
.ispirazione-zoom:focus-visible .ispirazione-zoom-icon { opacity: 1; }
.ispirazione-brand { margin: 10px 2px 0; font-weight: 700; font-size: 0.9rem; }
.ispirazione-brand a { color: var(--ink); text-decoration: none; }
.ispirazione-brand a:hover { color: var(--accent-dark, #007a91); }

/* Lightbox (zoom immagine a tutto schermo) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(0,0,0,0.9);
    /* Apertura/chiusura morbida */
    opacity: 0;
    transition: opacity 0.32s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-card);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.is-open .lightbox-img { transform: scale(1); }
.lightbox-close {
    position: absolute;
    top: clamp(8px, 2vw, 22px);
    right: clamp(14px, 2.5vw, 30px);
    background: none;
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
}
.ambiente-desc-section { padding: clamp(2.2rem, 4.5vw, 4rem) 0; }
/* Descrizione estesa senza box: sopra 1280 su 2 colonne; sotto su 1 colonna con
   grande padding a destra che cala al restringersi fino a uguagliare il sinistro
   (0) a 768px. */
.ambiente-desc {
    max-width: none;
    color: var(--ink);
    padding: 0;
}
@media (min-width: 1281px) {
    .ambiente-desc { column-count: 2; column-gap: clamp(2.5rem, 4vw, 4.5rem); }
}
@media (max-width: 1280px) {
    .ambiente-desc { padding-right: clamp(0px, calc((100vw - 768px) * 0.5), 18rem); }
}
/* Mobile: padding orizzontale (doppio) attorno alla descrizione */
@media (max-width: 768px) {
    .ambiente-desc { padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); }
}

/* ─── Ambiente: lista prodotti abbinati (una riga per prodotto) ────────── */
.ambiente-prodotti-lista { display: flex; flex-direction: column; }
/* Solo una linea divisoria in basso tra le righe (no riquadri). */
.ambiente-prodotto-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
}
.ambiente-prodotto-row:last-child { border-bottom: 0; }
/* Sottocategoria a destra, a mo' di pulsante */
.ambiente-prodotto-sub {
    display: inline-block;
    padding: 9px 18px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-weight: 600;
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.ambiente-prodotto-sub:hover { background: var(--ink); color: #fff; }
/* Prodotto a destra: nome + immagine 100x100, tutto cliccabile */
.ambiente-prodotto-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    min-width: 0;
}
.ambiente-prodotto-nome { font-weight: 700; min-width: 0; }
.ambiente-prodotto-link:hover .ambiente-prodotto-nome { color: var(--accent-dark, #007a91); }
.ambiente-prodotto-img {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ambiente-prodotto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 680px) {
    .ambiente-prodotto-row { flex-wrap: wrap; gap: 10px; }
    .ambiente-prodotto-nome { text-align: left; }
}

/* ─── Ambiente: categorie collegate (stile mega menu: testi sx, immagine dx) ── */
.ambiente-categorie-section { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.ambiente-categorie-mega {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
}
/* Testi a sinistra, senza box: solo link */
.ambiente-categorie-list { display: flex; flex-direction: column; }
.ambiente-categoria-voce {
    padding: 10px 2px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    line-height: 1.2;
    border-bottom: 1px solid var(--line);
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.ambiente-categoria-voce:last-child { border-bottom: 0; }
.ambiente-categoria-voce:hover { color: var(--accent-dark); padding-left: 8px; }
/* Immagine grande a destra (anteprima che segue l'hover) */
/* Immagine grande a destra, cliccabile, meno schiacciata (4/3), squircle. */
.ambiente-categorie-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.ambiente-categorie-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ambiente-categorie-preview img[hidden] { display: none; }
.ambiente-categorie-preview-nome {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 40px 20px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
}
/* Mobile: solo immagini impilate, cliccabili (no lista testi). */
.ambiente-categorie-mobile { display: none; }
.ambiente-categoria-mcard {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-alt);
}
.ambiente-categoria-mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
    .ambiente-categorie-mega { display: none; }
    .ambiente-categorie-mobile { display: flex; flex-direction: column; gap: 14px; }
}

/* ============================================================
   HOME — hero slider, categorie, ambienti, più richiesti, FAQ, brand
   ============================================================ */
.narrow-container { max-width: 880px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.section-title-center { text-align: center; }
.home-head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.home-head-sub { color: var(--ink-soft); max-width: 60ch; margin-top: .6rem; font-size: 1.05rem; }

/* Hero */
.home-hero { position: relative; width: 100%; height: calc(100svh - var(--header-h)); min-height: 520px; overflow: hidden; background: #0c0e10; color: #fff; }
.hh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hh-slide.active { opacity: 1; z-index: 1; }
.hh-slide.leaving { opacity: 1; z-index: 2; } /* resta visibile mentre il contenuto esce */
.hh-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); }
/* L'hero è un <img> vero (LCP con WebP e priorità — feedback 07/09). */
.hh-bg picture { display: block; width: 100%; height: 100%; }
.hh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hh-thumb picture { display: block; width: 100%; height: 100%; }
.hh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-slide.active .hh-bg { animation: hhkb 8s ease-out forwards; }
@keyframes hhkb { to { transform: scale(1.16); } }
.hh-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.42), transparent 58%); }
.hh-inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: clamp(1.2rem, 4vw, 3.4rem); }
.hh-card { background: #fff; color: var(--ink); border-radius: var(--radius-card); padding: clamp(1.8rem, 3.2vw, 3.2rem); max-width: 660px; width: 100%; min-height: clamp(330px, 42vh, 470px); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.hh-eyebrow { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark); background: rgba(0,153,184,.1); padding: .45rem .9rem; border-radius: 999px; margin-bottom: 1.2rem; }
.hh-title { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); margin-bottom: .9rem; color: #1c1c1c; }
.hh-sub { color: var(--ink-soft); font-size: clamp(1rem, .94rem + .3vw, 1.18rem); line-height: 1.6; margin-bottom: 1.3rem; max-width: 32em; }
.hh-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; }
.hh-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.7rem; border-radius: 999px; font-weight: 600; border: 2px solid transparent; transition: .25s; font-size: 1rem; }
.hh-btn-primary { background: var(--accent-dark); color: #fff; }
.hh-btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.hh-btn-ghost { border-color: var(--line); color: var(--ink); }
.hh-btn-ghost:hover { border-color: var(--ink); }
/* Contenuto sequenziale: il vecchio esce (leaving), poi il nuovo entra (active).
   La regola .leaving è dopo .active così vince quando coesistono. */
.hh-card { opacity: 0; }
.hh-slide.active .hh-card { animation: hhcardin .7s .12s cubic-bezier(.16,1,.3,1) both; }
.hh-slide.leaving .hh-card { animation: hhcardout .4s ease forwards; }
@keyframes hhcardin { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes hhcardout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-18px); } }
.hh-thumbs { position: absolute; right: clamp(1.2rem, 4vw, 3.4rem); bottom: clamp(1.2rem, 4vw, 3.4rem); z-index: 3; display: flex; gap: .7rem; }
.hh-thumb { width: 78px; height: 98px; border-radius: 16px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: .3s; background-size: cover; background-position: center; background-color: #222; opacity: .62; }
.hh-thumb.active { border-color: #fff; opacity: 1; transform: translateY(-6px); }
.hh-arrows { position: absolute; right: clamp(1.2rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); z-index: 3; display: none; flex-direction: column; gap: .7rem; }
.hh-arrows button { width: 54px; height: 54px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: .25s; display: flex; align-items: center; justify-content: center; }
.hh-arrows button:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hh-dots { position: absolute; left: clamp(1.2rem, 5vw, 2rem); bottom: clamp(1.3rem, 5vw, 2rem); z-index: 3; display: none; gap: .6rem; }
.hh-dot { width: 42px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.32); border: none; cursor: pointer; position: relative; overflow: hidden; padding: 0; }
.hh-dot span { position: absolute; inset: 0; width: 0; background: #fff; border-radius: 999px; }
.hh-dot.active span { animation: hhfill 6500ms linear forwards; }
@keyframes hhfill { to { width: 100%; } }
@media (max-width: 1180px) { .hh-thumbs { display: none; } .hh-arrows { display: flex; } }
@media (max-width: 768px) {
  .hh-arrows { display: none; } .hh-dots { display: flex; }
  .hh-slide::after { background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 48%), linear-gradient(90deg, rgba(0,0,0,.25), transparent 60%); }
  .hh-inner { padding: clamp(1.3rem, 6vw, 2rem); padding-bottom: clamp(3.4rem, 12vw, 4.2rem); }
  .hh-card { background: transparent; box-shadow: none; padding: 0; max-width: 100%; min-height: 0; color: #fff; }
  .hh-title { color: #fff; } .hh-sub { color: rgba(255,255,255,.86); }
  .hh-eyebrow { background: rgba(255,255,255,.16); color: #fff; }
  .hh-btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
  .hh-btn-ghost:hover { background: #fff; color: var(--ink); }
}

/* 4 categorie principali */
.home-cats { padding: clamp(2.6rem, 5vw, 4.5rem) 0; }
.home-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.home-cat { position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-alt); }
.home-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-cat:hover img { transform: scale(1.06); }
.home-cat-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 55%); }
.home-cat-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: clamp(1rem, 1.6vw, 1.4rem); color: #fff; }
.home-cat-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); line-height: 1.15; }
.home-cat-arrow { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; transition: .3s; }
.home-cat:hover .home-cat-arrow { background: var(--accent); transform: translateX(3px); }
@media (max-width: 980px) { .home-cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-cats-grid { grid-template-columns: 1fr; } .home-cat { aspect-ratio: 16/10; } }

/* Ambienti slider */
.home-amb { padding: clamp(2rem, 4vw, 3.5rem) 0; overflow-x: clip; }
.home-amb-slider { display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
/* Filo destro: la slitta parte allineata a sinistra nel contenitore 1600 ma
   esce a destra fino al bordo del viewport (più card visibili verso destra). */
.home-amb-slider { margin-right: calc(50% - 50vw); }
.home-amb-card { position: relative; flex: 0 0 clamp(240px, 26vw, 330px); aspect-ratio: 7/9; border-radius: var(--radius-card); overflow: hidden; scroll-snap-align: start; background: var(--bg-alt); }
.home-amb-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-amb-card:hover img { transform: scale(1.05); }
.home-amb-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 52%); }
.home-amb-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 1.6vw, 1.4rem); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem); }

/* Più richiesti */
.home-pop { padding: clamp(2rem, 4vw, 3.5rem) 0; background: var(--bg-alt); overflow-x: clip; }
/* Padding laterale = spazio per l'ombra hover (scroll-container: la taglia);
   margin-left negativo per tenere la prima card allineata al contenitore.
   scroll-padding-left: senza, lo snap allinea la card al bordo dello scrollport
   scrollando via il padding — e l'ombra torna tagliata a sinistra. */
.home-pop-slider { display: flex; gap: clamp(14px, 1.8vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 14px 34px; scrollbar-width: thin; margin-left: -14px; scroll-padding-left: 14px; }
/* Filo destro (come ambienti): esce oltre i 1600 fino al bordo destro. */
.home-pop-slider { margin-right: calc(50% - 50vw); }
/* Spaziatore finale: un po' di padding dopo l'ultima card (scroll a fondo). */
.home-amb-slider::after, .home-pop-slider::after { content: ''; flex: 0 0 clamp(1rem, 3vw, 2.5rem); }
.home-pop-card { position: relative; flex: 0 0 clamp(230px, 24vw, 300px); scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.home-pop-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.1); transform: translateY(-3px); }
.home-pop-num { position: absolute; top: 10px; left: 14px; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); line-height: 1; }
.home-pop-img { display: block; aspect-ratio: 1; background: var(--bg-alt); }
.home-pop-img img { width: 100%; height: 100%; object-fit: cover; }
.home-pop-body { padding: clamp(.9rem, 1.4vw, 1.2rem); }
.home-pop-brand { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: .25rem; }
.home-pop-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }

/* ── Fascia CTA: Calcolatore TCO ──────────────────────────────── */
.tco-band {
    position: relative;
    overflow: hidden;
    margin: clamp(2.6rem, 5vw, 4.5rem) 0;
    padding: clamp(2.4rem, 5vw, 4rem) 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    isolation: isolate;
}
/* forme decorative di sfondo */
.tco-band-shape { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.tco-band-shape-1 { width: clamp(220px, 30vw, 460px); height: clamp(220px, 30vw, 460px); top: -28%; right: -6%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.tco-band-shape-2 { width: clamp(160px, 22vw, 320px); height: clamp(160px, 22vw, 320px); bottom: -34%; left: -4%; border: 2px solid rgba(255,255,255,.16); }
.tco-band-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 3.5vw, 3rem);
}
.tco-band-graphic { flex: 0 0 auto; width: clamp(78px, 9vw, 120px); }
.tco-band-graphic svg { width: 100%; height: auto; display: block; }
.tco-band-text { flex: 1 1 auto; }
.tco-band-eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.8);
    margin-bottom: .55rem;
}
.tco-band-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.9rem);
    font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
    margin: 0;
}
.tco-band-sub {
    margin-top: clamp(.6rem, 1.2vw, 1rem);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.45;
    color: rgba(255,255,255,.9);
    max-width: 58ch;
}
.tco-band-btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 760px) {
    .tco-band-inner { flex-direction: column; text-align: center; gap: clamp(1.1rem, 4vw, 1.8rem); }
    .tco-band-sub { margin-left: auto; margin-right: auto; }
    .tco-band-btn { width: 100%; max-width: 340px; text-align: center; }
}

/* FAQ (riusa .accordion) */
.video-btn-row { margin: 1.1em 0 0; }

/* «Vedi anche» sulle pagine tag: le sottocategorie del relatedLink,
   visibili come pillole (correzione 08/09). */
.tag-vedi-anche { margin-top: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--line); padding-top: 1.4rem; }
.tag-vedi-anche-titolo { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .7rem; }
.tag-vedi-anche ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-vedi-anche a { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); padding: 7px 16px; text-decoration: none; color: var(--ink); transition: border-color .2s, color .2s; }
.tag-vedi-anche a:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Contatti: mappa e card delle sedi (09/09). */
.contact-sedi-title { margin-top: clamp(2rem, 4vw, 3rem); }
.sedi-map { height: clamp(340px, 52vh, 540px); border-radius: var(--radius-card, 12px); overflow: hidden; border: 1px solid var(--line); margin-top: 20px; }
.sedi-map .leaflet-tile { filter: grayscale(1); }
.sedi-map .leaflet-top, .sedi-map .leaflet-bottom, .sedi-map .leaflet-control { z-index: 500; }
.sedi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sede-card { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-card, 12px); background: #fff; padding: 22px 26px; line-height: 1.6; }
/* L'immagine si adatta all'altezza dei dati (assoluta nel suo riquadro,
   così la sua altezza naturale non gonfia la card), mai il contrario. */
.sede-card.has-img { display: flex; gap: clamp(18px, 3vw, 32px); align-items: stretch; padding: 0; overflow: hidden; }
/* Colonna foto QUADRATA: aspect-ratio 1:1 sulla larghezza della colonna,
   è lei a dare l'altezza alla card. */
.sede-card-img { flex: 0 0 clamp(280px, 36%, 440px); position: relative; aspect-ratio: 1 / 1; }
.sede-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sede-card.has-img .sede-card-body { padding: 26px 32px 26px 0; align-self: center; display: flex; flex-direction: column; justify-content: center; }
.sede-card-nome { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; margin-bottom: 10px; }
.sede-card-riga { color: var(--ink-soft); font-size: 1.05rem; }
.sede-card-riga a { color: var(--accent-dark); text-decoration: underline; }
.sede-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sede-maps-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dark); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: .95rem; }
.sede-maps-btn:hover { background: #00566d; color: #fff; }
.sede-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.sede-social a { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; align-items: center; justify-content: center; color: var(--ink); transition: color .15s, border-color .15s; }
.sede-social a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 640px) {
    .sede-card.has-img { flex-direction: column; }
    .sede-card-img { flex: none; aspect-ratio: 1 / 1; }
    .sede-card.has-img .sede-card-body { padding: 18px 20px; }
}

/* ── Mappa del sito HTML ─────────────────────────────────────── */
.mappa-sito h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 30px 0 12px; }
.mappa-sito-lista { list-style: none; margin: 0; padding: 0; }
.mappa-sito-lista > li { margin: 6px 0; font-weight: 600; }
.mappa-sito-lista a { color: var(--ink); text-decoration: none; }
.mappa-sito-lista a:hover { color: var(--brand, #0091af); text-decoration: underline; }
.mappa-sito-lista ul { list-style: none; margin: 4px 0 16px; padding-left: 18px; border-left: 2px solid var(--line); font-weight: 400; }
.mappa-sito-lista ul li { margin: 3px 0; }
.footer-mappa-sito { margin-top: 4px; }
.footer-mappa-sito a { color: inherit; }


/* Brand: riquadro con 6 loghi + "Vedi tutti i brand" */
.home-brands { padding: clamp(2.2rem, 4vw, 3.6rem) 0 clamp(2.8rem, 5vw, 4.4rem); }
.home-brands-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 14px);
    background: #fff;
    padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.6rem);
    text-align: center;
}
.home-brands-grid {
    margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.8rem, 2vw, 1.6rem);
    align-items: center;
}
/* Loghi ben visibili: niente grigio/trasparenza, colore pieno sempre. */
.home-brand { display: flex; align-items: center; justify-content: center; height: 132px; padding: 0 clamp(0.6rem, 1.5vw, 1.4rem); transition: transform .25s; }
.home-brand:hover { transform: scale(1.06); }
.home-brand img { max-height: 116px; max-width: 100%; width: auto; object-fit: contain; }
.home-brand span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4rem); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-brands-all { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 900px) { .home-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-brand { height: 92px; } .home-brand img { max-height: 80px; } }

/* Magazine in home: ultimi articoli + link all'indice */
.home-mag { padding: clamp(2.2rem, 4vw, 3.6rem) 0 0; }
.home-mag .product-section-head { justify-content: space-between; }
.section-head-link { font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.section-head-link:hover { color: var(--accent, #0099b8); }

/* Beyond the desk: riquadro immagine + CTA */
.home-beyond { padding: clamp(2.2rem, 4vw, 3.6rem) 0 0; }
.home-beyond-box {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-card, 14px);
    overflow: hidden;
    background: var(--ink, #1d1d1f);
    color: #fff;
    text-decoration: none;
}
.home-beyond-media { flex: 1 1 55%; min-height: clamp(220px, 30vw, 380px); background: #2a2a2c; }
.home-beyond-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-beyond-body {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.6rem, 1.2vw, 1rem);
    padding: clamp(1.6rem, 4vw, 3.2rem);
}
.home-beyond-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.home-beyond-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.12; }
.home-beyond-sub { font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.55; opacity: .85; max-width: 46ch; }
.home-beyond-btn { margin-top: clamp(0.4rem, 1vw, 0.8rem); background: #fff; color: var(--ink, #1d1d1f); }
.home-beyond-box:hover .home-beyond-btn { background: var(--accent-dark, #007a93); color: #fff; }
@media (max-width: 760px) { .home-beyond-box { flex-direction: column; } .home-beyond-media { min-height: 200px; } }

/* Tag cloud in home + tendina tag nel menu */
.home-tags { padding: clamp(2.2rem, 4vw, 3.6rem) 0 clamp(2.8rem, 5vw, 4.4rem); }
.home-tags-cloud { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.home-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.home-tag:hover { border-color: var(--accent, #0099b8); color: var(--accent, #0099b8); }
/* Indice tag (/{segmento-tag}): lista verticale a tutta pagina, un tag per
   riga con nome a sinistra e conteggio prodotti a destra. */
.tags-index-list { list-style: none; margin: 0; padding: 0; }
.tags-index-list li { border-bottom: 1px solid var(--line); }
.tags-index-list li:first-child { border-top: 1px solid var(--line); }
.tags-index-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(0.9rem, 1.6vw, 1.2rem) 4px;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}
.tags-index-list a:hover .tags-index-nome { color: var(--accent, #0099b8); }
.tags-index-nome { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
.tags-index-count { flex: 0 0 auto; font-size: 0.85rem; color: var(--ink-soft); }

/* ── Modale Checkout Stripe embedded (offerta, kit, ...) ── */
.stripe-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(20,20,20,.55); display: flex; align-items: flex-start; justify-content: center; padding: clamp(12px, 4vw, 48px); overflow-y: auto; }
.stripe-modal-overlay[hidden] { display: none; }
.stripe-modal-box { position: relative; background: #fff; border-radius: var(--radius-card, 12px); width: 100%; max-width: 560px; padding: clamp(1.2rem, 3vw, 2rem); box-shadow: 0 18px 60px rgba(0,0,0,.25); }
.stripe-modal-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--ink-soft, #777); cursor: pointer; border-radius: 50%; }
.stripe-modal-close:hover { background: var(--bg-alt, #f0f0f0); }
.stripe-modal-mount { min-height: 340px; margin-top: 8px; }
/* Header valuta del modale: solo il selettore valuta, senza box/sfondo
   (il riepilogo prodotto+totale lo mostra già il checkout Stripe). */
.stripe-modal-cur { max-width: 412px; margin: 6px auto 2px; }
.stripe-modal-cur[hidden] { display: none; }
/* Riga selettori: impilati → ognuno a tutta larghezza del box (come lo Stripe
   embed) e centrato; affiancati su schermi più larghi, a larghezza fissa. */
.stripe-cur-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.stripe-ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stripe-ctrl .stripe-cur-sel { width: 100%; box-sizing: border-box; }
@media (min-width: 520px) {
  .stripe-cur-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px 16px; }
  .stripe-ctrl { flex: 0 1 240px; }
}
/* Checkout con scelta valuta (.is-split via JS): modale larga 1060px così su
   desktop l'embedded Stripe va in two-pane (riepilogo a sinistra). Riga
   selettori a tutta larghezza del box ma mai oltre (box-sizing border-box). */
.stripe-modal-box.is-split { max-width: 1060px; }
.stripe-modal-box.is-split .stripe-modal-cur { max-width: none; width: 100%; margin: 0 0 14px; box-sizing: border-box; }
.stripe-cur-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-soft, #6b6b6b); }
.stripe-cur-sel { padding: 7px 32px 7px 12px; border: 1px solid var(--line, #e7e9eb); border-radius: 10px; color: var(--ink, #2b2b2b); font-size: .95rem; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 13px; }
.stripe-cur-sel:focus { outline: none; border-color: var(--accent, #0099b8); box-shadow: 0 0 0 3px rgba(0,153,184,.12); }
.stripe-cur-sel:disabled { opacity: .5; cursor: wait; }
.stripe-cur-price { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--ink, #2b2b2b); }
.stripe-cur-iva { font-family: var(--font); font-size: .72rem; font-weight: 600; color: var(--ink-soft, #6b6b6b); }
.stripe-modal-loading { display: flex; align-items: center; justify-content: center; min-height: 340px; color: var(--ink-soft, #6b6b6b); font-size: 1.6rem; }
.stripe-modal-err { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 1rem; text-align: center; color: #b23b3b; font-size: .95rem; }
.stripe-modal-done { text-align: center; padding: 1.6rem 1rem 1.2rem; }
.stripe-modal-check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #1a6b3c; color: #fff; font-size: 1.8rem; margin-bottom: 1rem; }
.stripe-modal-done p { font-size: 1.1rem; color: var(--ink, #222); }
/* A pagamento completato (is-done via JS) il box si adatta al messaggio:
   niente min-height del mount, larghezza ridotta. */
.stripe-modal-box.is-done { max-width: 420px; }
.stripe-modal-box.is-done .stripe-modal-mount { min-height: 0; }