/*
 * BresciaPC Theme - core.css
 *
 * Layout utility e componenti riutilizzabili su più pagine.
 */

/*
 * global.css
 *
 * Consolidated global styles.
 * merged from legacy theme assets/css/global/base.css + assets/css/modules/shell.css + print.css
 */

/*
 * BresciaPC - Global Base
 * Tokens, reset, typography, generic layout.
 * NOTE: style.css now contains ONLY theme metadata.
 */

/*
 * ==========================================================================
 * STANDARD DI SVILUPPO TEMPLATE (v4.0)
 * ==========================================================================
 * 1. Tutti i Custom Page Templates devono risiedere nella cartella /pages/.
 * 2. I file CSS specifici devono essere in /pages/<slug>/<slug>.css.
 * 3. I file JS specifici devono essere in /pages/<slug>/<slug>.js.
 * 4. Il sistema caricherà automaticamente gli asset se i nomi file coincidono.
 */

/* ------------------------------------------------------------------
   [Performance Engineer] Utilities condivise (SSOT)
   Spostate qui da vari /pages/* per ridurre duplicazione CSS e migliorare cache.
------------------------------------------------------------------ */

/*
 * [Theme Architect] SSOT layout
 * .container è usato nei template legacy (index.php), .container-xl nei template più nuovi.
 */
/* [Audit] Contenitori unificati: usano --bspc-page-gutter per spaziatura coerente */
.container,
.container-xl { max-width: var(--bspc-content-width, 1120px); margin: 0 auto; padding: 0 var(--bspc-page-gutter, 16px); position: relative; z-index: 2; } /* [Audit v6.0 #deepscan-5] */

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards; }

/* [v5.0.4] .reveal is now handled by IntersectionObserver in main.js.
 * Initial hidden state is set here; JS triggers the transition on scroll.
 * Falls back to immediate display if JS is disabled (via noscript or reduced motion). */
.reveal,
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(.23,1,.32,1), transform 0.6s cubic-bezier(.23,1,.32,1);
}
.reveal.is-visible,
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------------
   [Theme Architect / Performance Engineer] Delay animazioni (SSOT)
   Usare in combinazione con .fade-in-up / .reveal per evitare collisioni.
------------------------------------------------------------------ */

.fade-in-up.delay-1, .reveal.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2, .reveal.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3, .reveal.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4, .reveal.delay-4 { animation-delay: 0.4s; }


/* ------------------------------------------------------------------
   [Theme Architect / Performance Engineer] Utility "Apple" condivise
   Usate in più template (FAQ/Contatti) per evitare duplicazioni.
------------------------------------------------------------------ */

.bpc-container { max-width: var(--bspc-content-width-wider, 1200px); margin: 0 auto; padding: 0 var(--bspc-page-gutter, 16px); position: relative; z-index: 2; box-sizing: border-box; } /* [Audit v6.0 #deepscan-5] */

.ambient-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; z-index: 0; pointer-events: none; }

.ambient-orb.orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: rgba(0, 102, 204, 0.15); }

.ambient-orb.orb-2 { bottom: 10%; right: -10%; width: 40vw; height: 40vw; background: rgba(52, 199, 89, 0.1); }

/*
╔══════════════════════════════════════════════════════════════════════════╗
║ Section: PADDING GLOBALE PER HEADER FISSO                                 ║
╚══════════════════════════════════════════════════════════════════════════╝
*/
/*
 * Aggiunge un padding-top al contenitore principale della pagina per compensare
 * l'altezza dell'header fisso, evitando che i contenuti vengano nascosti.
 * Le variabili --header-height-* sono definite in assets/css/common.css.
 */
/*
 * Adatta il padding per il nuovo contenitore principale (#main-content)
 */
/*
 * [v5.0.5] Header è position:sticky (in-flow) → NON serve padding-top
 * per compensarne l'altezza. Il vecchio padding era un residuo di quando
 * l'header era position:fixed. Rimosso per eliminare il gap vuoto tra
 * header e contenuto su homepage, single product, ecc.
 * Le categorie WooCommerce (layout.css) avevano già padding-top:0.
 */
#primary {
    padding-top: 0;
}

/* ==========================================================================
   Stili Finali e Robusti per Archivi WooCommerce (v3.0)
   ========================================================================== */

/* --- Variabili CSS Globali (se non già definite) --- */
/*
 * Le variabili CSS di base sono ora definite unicamente in
 * assets/css/common.css per evitare duplicazioni e conflitti.
 * Eventuali ridefinizioni qui sono state rimosse. Se è necessario
 * personalizzare un valore, farlo in common.css.
 */

/*
 * =====================================================================
 * Fix overflow e miglioramenti generali
 *
 * Le seguenti regole risolvono problemi di scrollbar orizzontale
 * osservati su varie pagine e nascondono elementi inutili come il
 * pulsante verticale "scroll to top" del tema precedente. Inoltre rendono più
 * armoniosa la barra di ricerca dell'header.
 */

/* Evita la comparsa della barra di scorrimento orizzontale su tutto il sito */

/* Rimozione dell'elemento scroll-to-top non più necessario */

/* Migliora l'allineamento della barra di ricerca nel header desktop */

/*
 * Eliminazione di pulsanti fluttuanti indesiderati
 *
 * Alcuni plugin inseriscono pulsanti fissi per lo scroll o per la gestione
 * del banner cookie che interferiscono con il design pulito
 * del sito. Le regole seguenti nascondono quei pulsanti. In caso di
 * ulteriori modifiche si consiglia di ispezionare l'HTML e regolare le
 * classi di conseguenza.
 */
#scroll-top,
 .scroll-top,
 .scrollToTop,
 .scroll-to-top {
    /* Nasconde pulsanti fluttuanti indesiderati senza usare !important */
    display: none;
}

/* Nasconde il pulsante "Carica di più" nelle griglie categoria quando non necessario.
   Se in futuro verrà implementata una logica dinamica per caricare altre pagine,
   rimuovere questa regola o applicarla condizionalmente via JS. */
.apple-load-more {
    display: none;
}

/* Stile base per la pagina Informazioni Statica */
.info-static-page .info-static-section {
    max-width: var(--bspc-content-width, 1120px);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(25px, 4vw, 40px);
    border-bottom: 1px solid var(--bspc-border-light, var(--bspc-border-light));
}
.info-static-page .info-static-section:last-of-type {
    border-bottom: none;
}
.info-static-page .info-static-section h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-top: 0;
    margin-bottom: 0.5em;
    color: var(--bspc-text-primary, var(--bspc-text-primary));
}
.info-static-page .info-static-section p,
.info-static-page .info-static-section li {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bspc-text-secondary, var(--bspc-text-secondary));
}
.info-static-page .info-static-section ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 1em;
}
.info-static-page .info-static-section li strong {
    font-weight: 600;
    color: var(--bspc-text-primary, var(--bspc-text-primary));
}
.info-static-page .cta-section {
    text-align: center;
    padding: clamp(40px, 5vw, 60px);
    background-color: var(--bspc-bg-light, var(--bspc-bg-light));
}
.info-static-page .cta-section h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin-bottom: 0.5em;
}
.info-static-page .cta-section p {
    font-size: 1rem;
    margin-bottom: 1.2em;
    color: var(--bspc-text-secondary, var(--bspc-text-secondary));
}
.info-static-page .cta-section .button {
    background-color: var(--bspc-blue-primary, var(--bspc-blue-primary));
    color: var(--bspc-bg-white);
    padding: 12px 24px;
    border-radius: var(--bspc-radius-small, 8px);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.info-static-page .cta-section .button:hover {
    background-color: var(--bspc-blue-hover, var(--bspc-blue-hover));
}

/* [Theme Architect] Regole di validazione .bspc-form spostate in woo/appointments/appointments.css per modularità (SSOT). */

/* ------------------------------------------------------------------
   Classi layout utility
------------------------------------------------------------------ */

.bpc-section {
	max-width: var(--bspc-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bspc-page-gutter);
	padding-right: var(--bspc-page-gutter);
	box-sizing: border-box;
}

.bpc-section.bpc-section-wider {
	max-width: var(--bspc-content-width-wider);
}

/* [Audit] Rimosso media query separato: --bspc-page-gutter è già responsivo con clamp() */

/*
╔══════════════════════════════════════════════════════════════════════════╗


║ Section: COMPONENTI RIUTILIZZABILI - BOTTONI E CARD                       ║
╚══════════════════════════════════════════════════════════════════════════╝
*/
/*
 * Componente base per i bottoni (primary). Utilizzabile su link (<a>) o
 * elementi <button>. Viene fornita una variante secondaria e una variante
 * outline per coprire i casi d’uso più comuni. In questo modo gli stili
 * dei bottoni sono centralizzati, riducendo la duplicazione tra i vari
 * template (homepage, categorie, prodotto, contatti).
 */
/* [Theme Architect] SSOT bottoni: stile base in core + varianti per Woo/modali. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2em; /* [Audit v6.0 #11] Inconsistent with .bpc-btn (0 24px) - consolidation needed */
    font-size: 1rem;
    font-weight: 600;      /* [Audit] era 600 - confermato */
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--bspc-radius-medium);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s var(--bspc-ease-apple), color 0.2s var(--bspc-ease-apple), border-color 0.2s var(--bspc-ease-apple), transform 0.2s var(--bspc-ease-apple);
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
}
.btn:hover,
.btn:focus {
    background-color: var(--bspc-blue-hover);
    color: var(--bspc-bg-white);
}
/* v6.4.x Sprint 7 - Micro-interaction: press feedback */
.btn:active {
    transform: scale(0.97);
}
.btn:disabled,
.btn[aria-disabled="true"],
.btn:disabled:hover {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
}

/* Alias semantico: usato nei template (.btn btn--primary). */
.btn--primary {
    border: 1px solid var(--bspc-blue-primary);
}
.btn--primary:hover,
.btn--primary:focus {
    border-color: var(--bspc-blue-hover);
}

/* Variante secondaria: per azioni meno importanti */
.btn--secondary {
    background-color: var(--bspc-green-primary);
    color: var(--bspc-bg-white);
}
.btn--secondary:hover,
.btn--secondary:focus {
    background-color: var(--bspc-green-hover);
    color: var(--bspc-bg-white);
}
/* Variante outline: bordo colorato su sfondo trasparente */
.btn--outline {
    background-color: transparent;
    color: var(--bspc-blue-primary);
    border: 2px solid var(--bspc-blue-primary);
}
.btn--outline:hover,
.btn--outline:focus {
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
}

/* ==================================================================
   v6.4.x - Sistema bottoni unificato .bpc-btn (CRO Audit Sprint 1)

   Famiglia consolidata che copre tutte le varianti del tema.
   Le classi storiche (.btn-apple, .bspc-btn-primary, etc.) restano
   intatte sopra - questo blocco è ADDITIVO.

   Varianti:  --primary | --secondary | --whatsapp | --ghost | --danger
   Taglie:    --sm (36px) | --md (44px, default) | --lg (52px)
   Stati:     :hover | :active | :focus-visible | :disabled | .is-loading
   ================================================================== */

/* ── Base ── */
.bpc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    font-family: var(--bspc-font-family);
    font-size: var(--bspc-font-md);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--bspc-radius-pill);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* v6.5.2 Spring physics - il rimbalzo avviene al RILASCIO, non alla pressione */
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.25s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

/* ── Variante: Primary (blu pieno) ── */
.bpc-btn--primary {
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
}

/* ── Variante: Secondary (outlined blu) ── */
.bpc-btn--secondary {
    background-color: transparent;
    color: var(--bspc-blue-primary);
    border-color: var(--bspc-blue-primary);
}

/* ── Variante: WhatsApp (verde pieno + icona) ── */
.bpc-btn--whatsapp {
    background-color: var(--bspc-whatsapp-strong);
    color: var(--bspc-bg-white);
}

/* ── Variante: Ghost (trasparente, link contestuale) ── */
.bpc-btn--ghost {
    background-color: transparent;
    color: var(--bspc-blue-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Variante: Danger (azioni distruttive) ── */
.bpc-btn--danger {
    background-color: var(--bspc-red-error);
    color: var(--bspc-bg-white);
}

/* ── Taglie ── */
.bpc-btn--sm {
    height: 36px;
    padding: 0 16px;
    font-size: var(--bspc-font-base-sm);
}

.bpc-btn--md {
    /* Default - valori già in .bpc-btn base */
    height: 44px;
    padding: 0 24px;
    font-size: var(--bspc-font-md);
}

.bpc-btn--lg {
    height: 52px;
    padding: 0 32px;
    font-size: var(--bspc-font-lg);
}

/* ── Hover (opacity, non cambio colore brand) ── */
@media (hover: hover) {
    .bpc-btn--primary:hover {
        opacity: 0.9;
        box-shadow: 0 0 15px rgba(0, 102, 204, 0.4), 0 4px 12px rgba(0, 102, 204, 0.15);
    }

    .bpc-btn--secondary:hover {
        background-color: var(--bspc-blue-soft);
    }

    .bpc-btn--whatsapp:hover {
        opacity: 0.9;
        box-shadow: 0 0 12px rgba(37, 211, 102, 0.35), 0 4px 10px rgba(37, 211, 102, 0.12);
    }

    .bpc-btn--ghost:hover {
        text-decoration-thickness: 2px;
    }

    .bpc-btn--danger:hover {
        opacity: 0.9;
    }
}

/* ── Active (press) - v6.5.2 Spring: compressione istantanea ── */
.bpc-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s linear;
}

/* Stessa fisica su .btn legacy per coerenza */
.btn {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.95); transition: transform 0.1s linear; }

/* ── Focus visible ── */
.bpc-btn:focus-visible {
    box-shadow: var(--bspc-focus-ring); /* [Audit v6.0 #79] */
    outline: none;
}

/* ── Disabled ── */
.bpc-btn:disabled,
.bpc-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Loading state ── */
.bpc-btn.is-loading {
    position: relative;
    pointer-events: none;
}

.bpc-btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bpc-btn-spin 0.6s linear infinite;
    margin-left: 8px;
    flex-shrink: 0;
}

@keyframes bpc-btn-spin {
    to { transform: rotate(360deg); }
}

/* ── Backward-compat: alias classi storiche ── */
/* .btn-apple nelle home/dati pages mappa a .bpc-btn--primary pill.
   NON sovrascriviamo .btn-apple - quei file hanno già stili propri.
   Qui creiamo solo mapping per nuovi usi. */


/*
 * Componente card riutilizzabile. Usato per listare prodotti, servizi
 * o elementi di categoria. Definisce un contenitore con ombra e bordo
 * arrotondato che supporta overflow nascosto per contenere immagini.
 */
.bpc-card {
    background-color: var(--bspc-bg-white);
    border: 1px solid var(--bspc-border-light);
    border-radius: var(--bspc-radius-large);
    box-shadow: var(--bspc-shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--bspc-transition-fast), box-shadow var(--bspc-transition-fast), border-color var(--bspc-transition-fast);
}

/* Apple-style hover: subtle lift + shadow increase */
a.bpc-card:hover,
a.bpc-card-universal:hover {
    transform: translateY(-2px);
    box-shadow: var(--bspc-card-shadow-hover);
    border-color: var(--bspc-border-medium);
}
a.bpc-card:active,
a.bpc-card-universal:active {
    transform: scale(0.98);
}
.bpc-card__image {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Ensure that images inside the image wrapper scale correctly */
.bpc-card__image img {
    display: block;
    width: 100%;
    height: auto;
}
.bpc-card__body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bpc-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bspc-text-primary);
    margin-bottom: 0.5rem;
}
.bpc-card__text {
    font-size: 0.9rem;
    color: var(--bspc-text-secondary);
    flex: 1;
}
.bpc-card__actions {
    margin-top: 1rem;
}

/*
 * ====================================================================
 * COMPONENTE CARD UNIFICATA (Apple Style)
 *
 * Questa classe fornisce una base coerente per i contenitori "card"
 * utilizzati in diverse sezioni della pagina prodotto (CTA, descrizione,
 * testo SEO ecc.). Invece di duplicare stili come sfondo glass, bordi,
 * raggio e ombra in ciascun blocco, definiamo qui un singolo punto
 * di verità (SSOT) che può essere riutilizzato ovunque mediante
 * l'aggiunta della classe `.bpc-card-unified` al contenitore. Le
 * dimensioni interne (padding) sono gestite in modo responsivo per
 * adattarsi sia al mobile che al desktop. Per eventuali personalizzazioni
 * specifiche (es. margini personalizzati o layout interno), i file
 * delle sezioni dovrebbero sovrascrivere soltanto ciò che è diverso.
 */
.bpc-card-unified {
    background-color: var(--bspc-bg-white);             /* [Audit] rimosso glass - sfondo solido */
    border: 1px solid var(--bspc-border-light);
    border-radius: var(--bspc-radius-large, 22px);
    box-shadow: var(--bspc-shadow-light);
    padding: 22px 22px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .bpc-card-unified {
        padding: 18px 16px;
        border-radius: var(--bspc-radius-medium, 14px);
        box-shadow: var(--bspc-shadow-light);
    }
}

/* -------------------------------------------------------------
 * Sezione FAQ e Call to Action nelle categorie WooCommerce
 * Uniforma il look della CTA e rende l’allineamento centrato.    
 * La sezione FAQ è già stilizzata in components/faq/faq.css.      
 */
.category-cta-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 4vw, 3.5rem);
    max-width: 1120px;
    text-align: left;
    margin: clamp(2.5rem, 6vw, 5rem) auto;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid color-mix(in srgb, var(--bspc-blue-primary) 14%, transparent);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bspc-blue-primary) 8%, #fff), #fff 62%);
    box-shadow: 0 18px 50px rgba(22, 55, 92, .09);
}

.category-cta-section__copy {
    max-width: 720px;
}

.category-cta-section__eyebrow {
    display: block;
    margin-bottom: .4rem;
    color: var(--bspc-blue-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.category-cta-section h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.12;
}

.category-cta-section p {
    margin: 0;
    color: var(--bspc-text-secondary, #526174);
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
    line-height: 1.65;
}

.category-cta-section .bspc-btn,
.category-cta-section .bspc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex: 0 0 auto;
    gap: .55rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--bspc-radius-medium);
    background-color: var(--bspc-blue-primary);
    color: var(--bspc-bg-white);
    box-shadow: var(--bspc-shadow-light);
    transition: background-color .2s var(--bspc-ease-apple);
}

@media (max-width: 767.98px) {
    .category-cta-section {
        display: block;
        margin-right: var(--bspc-mobile-padding);
        margin-left: var(--bspc-mobile-padding);
        text-align: center;
    }

    .category-cta-section .bspc-btn,
    .category-cta-section .bspc-btn-primary {
        width: 100%;
        margin-top: 1.3rem;
    }
}

.category-cta-section .bspc-btn:hover,
.category-cta-section .bspc-btn:focus-visible,
.category-cta-section .bspc-btn-primary:hover,
.category-cta-section .bspc-btn-primary:focus-visible {
    background-color: var(--bspc-blue-hover);
    color: var(--bspc-bg-white);
}

/* ------------------------------------------------------------------
   Transizioni dei pulsanti globali
   [Audit] Unificate con --bspc-ease-apple per coerenza
------------------------------------------------------------------ */
.bspc-btn,
.bspc-btn-primary {
    transition: transform 0.2s var(--bspc-ease-apple), box-shadow 0.2s var(--bspc-ease-apple), background-color 0.2s var(--bspc-ease-apple);
}
.bspc-btn:active,
.bspc-btn-primary:active {
    transform: scale(0.98);
}


/* ==================================================================
   [CRO v5.0.4] Sticky CTA Mobile Bar
   Visible only on viewports ≤ 768px. Hidden on desktop.
   ================================================================== */
.bpc-sticky-cta {
    display: none;
}

@media (max-width: 767.98px) {
    .bpc-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-dock, 1020);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--bspc-border-light);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
        gap: 10px;
        align-items: center;
    }

    .bpc-sticky-cta__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 600;
        border-radius: var(--bspc-radius-medium, 14px);
        font-size: var(--bspc-font-base);
        transition: transform var(--bspc-transition-fast), background-color var(--bspc-transition-fast);
    }

    .bpc-sticky-cta__btn:active {
        transform: scale(0.96);
    }

    .bpc-sticky-cta__btn--primary {
        flex: 1;
        padding: 14px 20px;
        background: var(--bspc-blue-primary, var(--bspc-blue-primary));
        color: var(--bspc-bg-white) !important;
    }

    .bpc-sticky-cta__btn--wa {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        background: var(--bspc-whatsapp-strong);
        color: var(--bspc-bg-white) !important;
        border-radius: 50%;
    }

    /* Prevent content from being hidden behind sticky bar */
    body.single-product #primary,
    body.tax-product_cat #primary {
        padding-bottom: 80px;
    }
}

/* ==================================================================
   [CRO v5.0.4] Social Proof Badge (hero area)
   ================================================================== */
.bpc-social-proof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: var(--bspc-font-sm);
    font-weight: 600;
    color: var(--bspc-text-primary, var(--bspc-text-primary));
    margin-bottom: 16px;
}

.bpc-social-proof__stars {
    color: var(--bspc-star-color, var(--bspc-star-color));
    letter-spacing: 1px;
}

/* ==================================================================
   [CRO v5.0.4] Mini Testimonial (near CTAs)
   ================================================================== */
.bpc-mini-testimonial {
    text-align: center;
    margin: 20px auto;
    max-width: 480px;
    padding: 16px;
    font-size: var(--bspc-font-base-sm);
    color: var(--bspc-text-light, var(--bspc-text-light));
    font-style: italic;
    line-height: 1.5;
}

.bpc-mini-testimonial__quote {
    display: block;
    margin-bottom: 6px;
    font-size: var(--bspc-font-base);
    color: var(--bspc-text-secondary, var(--bspc-text-secondary));
}

.bpc-mini-testimonial__author {
    font-style: normal;
    font-weight: 600;
    font-size: var(--bspc-font-sm);
    color: var(--bspc-text-primary, var(--bspc-text-primary));
}

/* ==================================================================
   [Audit v5.0.7] Performance mobile: riduce backdrop-filter
   Su schermi piccoli, il blur GPU è costoso. Lo disabilitiamo
   sugli elementi decorativi delle pagine template, mantenendolo
   solo dove serve davvero (header, modali, login card).
   ================================================================== */
@media (max-width: 767.98px) {
    .bpc-breadcrumb-list,
    .bpc-card-unified,
    .ambient-orb {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Riduce i blur decorativi delle orb a valori meno costosi */
    .ambient-orb {
        filter: blur(40px);
    }
}

/* ==========================================================
   v6.4.x Sprint 7 - Reusable empty-state component
   Apple-style empty state with icon, message and optional CTA.
   Usage: .bpc-empty-state > .bpc-empty-state__icon
                            > .bpc-empty-state__title
                            > .bpc-empty-state__desc
                            > .bpc-empty-state__cta (optional)
   ========================================================== */
.bpc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 8vw, 80px) 20px;
    gap: 12px;
}

.bpc-empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bspc-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: var(--bspc-text-placeholder, #aab0b8);
}

.bpc-empty-state__icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bpc-empty-state__title {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--bspc-text-primary);
    margin: 0;
    line-height: 1.3;
}

.bpc-empty-state__desc {
    font-size: var(--bspc-font-base-sm, 15px);
    color: var(--bspc-text-secondary);
    line-height: 1.5;
    max-width: 340px;
    margin: 0;
}

.bpc-empty-state__cta {
    margin-top: 8px;
}

/* ==========================================================
   v6.4.x Sprint 7 - Skeleton / shimmer loading placeholder
   Usage: .bpc-skeleton (block shimmer)
          .bpc-skeleton--text (inline text line)
          .bpc-skeleton--circle (avatar / icon)
          .bpc-skeleton--card (product card placeholder)
   ========================================================== */
/* ==========================================================
   v6.5.2 - Skeleton / Apple Breathe (sostituisce shimmer)
   Il loader ora "respira" (opacity + scala) invece di scorrere:
   comportamento coerente con le HIG iOS.
   ========================================================== */
@keyframes appleBreathe {
    0%   { opacity: 0.4; transform: scale(0.995); }
    100% { opacity: 1;   transform: scale(1);    }
}

.bpc-skeleton {
    background: var(--bspc-bg-light);
    animation: appleBreathe 1.5s ease-in-out infinite alternate;
    border-radius: var(--bspc-radius-small, 8px);
    transform-origin: center;
    will-change: opacity, transform;
}

.bpc-skeleton--text {
    height: 14px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.bpc-skeleton--text:last-child {
    width: 60%;
}

.bpc-skeleton--circle {
    border-radius: 50%;
}

.bpc-skeleton--card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--bspc-radius-medium, 12px);
    border: 1px solid var(--bspc-border-light, rgba(0,0,0,0.06));
    background: var(--bspc-bg-white, #fff);
}

.bpc-skeleton--card .bpc-skeleton__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--bspc-radius-small, 8px);
}

.bpc-skeleton--card .bpc-skeleton__line {
    height: 14px;
    border-radius: 4px;
}

.bpc-skeleton--card .bpc-skeleton__line:nth-child(2) { width: 70%; }
.bpc-skeleton--card .bpc-skeleton__line:nth-child(3) { width: 40%; }

@media (prefers-reduced-motion: reduce) {
    .bpc-skeleton {
        animation: none;
    }
}

/* [Audit v6.0 #lcp-2] Aspect ratio for CLS reduction */
.bpc-aspect-hero { aspect-ratio: 16/5; }
.bpc-aspect-card { aspect-ratio: 4/3; }
.bpc-aspect-thumb { aspect-ratio: 1/1; }

/* ==========================================================
   v6.5.2 - Magic Underline (prose links)
   Linea che si "disegna" da destra a sinistra all'hover
   (effetto Apple/Stripe-style). Esclude .bpc-btn--ghost
   che usa un underline statico deliberatamente.
   ========================================================== */
.bpc-prose a:not(.bpc-btn):not(.bpc-btn--ghost) {
    position: relative;
    text-decoration: none;
    color: var(--bspc-blue-primary);
    transition: color 0.2s ease;
}
.bpc-prose a:not(.bpc-btn):not(.bpc-btn--ghost)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.bpc-prose a:not(.bpc-btn):not(.bpc-btn--ghost):hover::after,
.bpc-prose a:not(.bpc-btn):not(.bpc-btn--ghost):focus-visible::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ==========================================================
   v6.5.2 - Reduced motion safeguards
   Disattiva spring, breathe, underline-draw su richiesta utente.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .bpc-btn,
    .btn {
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }
    .bpc-btn:active,
    .btn:active { transform: none; }

    .bpc-skeleton { animation: none; opacity: 0.7; }

    .bpc-prose a::after {
        transition: none !important;
        transform: scaleX(1);
    }
}

/* [7.2.0 · dark fix] Sticky CTA prodotto: il bianco 0.92 era hardcodato →
   in dark mode la barra restava chiara. Stesso vetro scuro della home. */
@media (max-width: 767.98px) {
  [data-theme="dark"] .bpc-sticky-cta {
    background: rgba(28, 28, 30, 0.92);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bpc-sticky-cta {
      background: rgba(28, 28, 30, 0.92);
      border-top-color: rgba(255, 255, 255, 0.1);
    }
  }
}

/* ==========================================================
   Turnstile interaction-only: zero layout shift while silent

   Cloudflare can leave a sized internal container even when an
   interaction-only widget only contains its hidden response input.
   Keep the slot renderable (never display:none), but remove it from the
   document flow until Cloudflare actually injects its challenge iframe.
   :has() is supported by current Safari/iOS and modern browsers; older
   browsers safely fall back to the visible, server-verified widget slot.
   ========================================================== */
.bpc-turnstile-slot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-block: 12px;
  overflow: visible;
}

.bpc-turnstile-slot > .cf-turnstile {
  display: block;
  max-width: 100%;
}

@supports selector(.bpc-turnstile-slot:has(.cf-turnstile iframe)) {
  .bpc-turnstile-slot:not(:has(.cf-turnstile iframe)) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .bpc-turnstile-slot[data-bpc-turnstile-state="error"] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-block: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }
}

.bpc-turnstile-status {
  margin: 0;
  color: #b42318;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

[data-theme="dark"] .bpc-turnstile-status {
  color: #ffb4ab;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bpc-turnstile-status {
    color: #ffb4ab;
  }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~   [A11Y 7.60.0] NIENTE ZOOM AUTOMATICO QUANDO SI SCRIVE     ~
~                                                             ~
~   iOS ingrandisce la pagina da solo appena tocchi un campo   ~
~   con testo sotto i 16px, e poi resta ingrandita. Sui campi  ~
~   di /contattaci/ e /come-prenotare/ la misura era 13,33px   ~
~   - il valore predefinito del browser, mai impostato - ed e' ~
~   esattamente il difetto gia' corretto nella posta.          ~
~   Solo fino a 834px: sul desktop il problema non esiste e i  ~
~   moduli mantengono la loro misura.                          ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 834px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px;
    }
}