/*
 * WooCommerce — Product (base)
 *
 * NOTE: block-specific styles live in /woo/product/blocks/*
 *
 */

/*
 * [MOVED] Estratto da /core/global.css durante la modularizzazione (Step 7).
 * Ordine: questi stili erano precedentemente globali (caricati PRIMA di product.css).
 */

/* ------------------------------------------------------------------
   Stili pagina prodotto singolo (overrides)
------------------------------------------------------------------ */

/* Allarga l'area del contenuto e nasconde la sidebar */
.single-product #left-area {
    /* Rimosso !important; sufficiente specificità per sovrascrivere il tema padre */
    width: 100%;
    padding: 0;
    margin: 0;
}
.single-product #sidebar {
    display: none;
}

/* Titolo prodotto: regola unica (evita conflitti tra selettori duplicati) */
.single-product .product_title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin-bottom: 20px;
    text-align: center;
}

@media (min-width: 992px) {
    .single-product .product_title { text-align: left; }
}

/* Centra e formatta la descrizione breve */
.single-product div.product .woocommerce-product-details__short-description {
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--bspc-text-secondary, #515154);
    max-width: 700px;
    margin: 0 auto 35px auto;
}

/* Nascondi elementi di default che sostituiamo */
.single-product div.product form.cart,
.single-product div.product p.price,
.single-product .woocommerce-tabs ul.tabs,
.single-product .related.products {
	/* Nasconde elementi di default nella pagina prodotto senza usare !important */
	display: none;
}

/*
 * FIX CONTENITORE PAGINA PRODOTTO
 * Centra il contenuto e impedisce che tocchi i bordi su schermi larghi
 */
.single-product #primary {
    max-width: var(--bspc-content-width-wider, 1280px); /* Usa variabile o valore fisso */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* [UI] Fix clamp(): max deve essere >= min (prima bloccava il padding a 20px). */
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
    box-sizing: border-box;
}


/* Fix layout on single product pages: reposition sale badge and prevent overlap - Added on 27 Nov 2025 */
.single-product div.product {
  position: relative;
}
.single-product span.onsale {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  transform: none;
  margin: 0;
}

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


║ Section: STILI PER AVVISO RECUPERO DATI (SE USATO)                        ║
╚══════════════════════════════════════════════════════════════════════════╝
*/
.single-product .product-data-recovery-notice {
    /* [Theme Architect] Classe custom: non serve !important, basta lo scope pagina. */
    margin-top: 25px;
    padding: 18px 22px;
    border: 1px solid var(--bspc-border-medium);
    background-color: #f0f6fc;
    border-left: 4px solid var(--bspc-blue-primary);
    border-radius: 0 var(--bspc-radius-small) var(--bspc-radius-small) 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    box-shadow: var(--bspc-shadow-light);
}

.single-product .product-data-recovery-notice p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--bspc-text-secondary);
}

.single-product .product-data-recovery-notice strong {
    color: var(--bspc-text-primary);
    font-weight: 600;
}

/*
 * 3. BADGE "SERVIZIO IN PROMO"
 */
.woocommerce span.onsale { display: none; } /* Nascondi default */

.bpc-promo-badge {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: var(--bspc-blue-primary);
    border: 1px solid var(--bspc-blue-primary);
    
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 99px;
    box-shadow: 0 4px 10px rgba(0, 113, 227, 0.15);
}

/*
 * 4. ACCORDION
 */

/* ====================================================================
 * SFONDO AMBIENT (STYLE APPLE) PER PAGINA PRODOTTO
 * Queste regole generano uno sfondo con due sfere sfumate
 * (glassmorphism/blur) senza immagini pesanti. Lo sfondo migliora
 * l’estetica senza impattare sulle prestazioni o sul SEO.
 * ==================================================================== */

/* 1. Imposta il colore di base e la posizione relativa del body */
body.single-product {
    background-color: #f5f5f7; /* Grigio chiaro Apple come base */
    position: relative;
}

/* 2. Pseudo-elementi per le luci sfumate */
body.single-product::before,
body.single-product::after {
    content: '';
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    /* [Performance Engineer] Blur più leggero per ridurre paint cost su mobile/low-end. */
    filter: blur(70px);
    opacity: 0.45;
    pointer-events: none;
}

/* Luce Blu (in alto a sinistra) */
body.single-product::before {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.15) 0%, rgba(0, 113, 227, 0) 70%);
    top: -10%;
    left: -10%;
}

/* Luce Verde/Acqua (in basso a destra) */
body.single-product::after {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(52, 199, 89, 0.1) 0%, rgba(52, 199, 89, 0) 70%);
    bottom: -10%;
    right: -10%;
}

/* 3. Rendi trasparenti i container generici per far filtrare lo sfondo */
.single-product #primary,
.single-product .site-content {
    background: transparent;
}

/* 4. Fix Mobile: luci più leggere per evitare jank su dispositivi low-end */
@media (max-width: 768px) {
    body.single-product::before,
    body.single-product::after {
        /* [Performance Engineer] Manteniamo l'effetto “ambient” ma più leggero su mobile. */
        filter: blur(70px);
        opacity: 0.45;
        /* Le luci devono essere GRANDI su mobile per coprire lo schermo */
        width: 110vw;
        height: 110vw;
    }

    /* Posizionamento specifico per mobile */
    body.single-product::before {
        top: -20%;
        left: -50%;
        background: radial-gradient(circle, rgba(0,113,227,0.25) 0%, rgba(0,113,227,0) 70%);
    }
    body.single-product::after {
        bottom: -20%;
        right: -50%;
        background: radial-gradient(circle, rgba(52,199,89,0.2) 0%, rgba(52,199,89,0) 70%);
    }
}

/* [Accessibility Specialist] Rispetta riduzione animazioni/effetti: rimuove lo sfondo “glow”. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
    body.single-product::before,
    body.single-product::after {
        content: none;
    }
}

/* ─────────────────────────────────────────────
   Breadcrumbs e Trust Badges
   ────────────────────────────────────────────*/

/*
 * ====================================================================
 * Single product layout: larghezza coerente e prevenzione overflow
 *
 * Su alcune pagine prodotto la somma di margini, padding o larghezze
 * fisse generava un micro-scroll orizzontale indesiderato. Per
 * correggere ciò e garantire uniformità, i principali blocchi della
 * pagina (.bpc-section, accordion, faq, seo text, related, CTA, trust
 * badges) vengono limitati in larghezza e centrati. Il valore
 * max-width corrisponde a quello usato altrove nel tema. Nei break
 * point mobile la sezione occupa quasi tutta la viewport con un
 * margine laterale minimo.
 */
.single-product .bpc-section,
.single-product .product-variations-accordion,
.single-product .bspc-faq-accordion,
.single-product .bpc-product-seo-text,
.single-product .apple-related-section,
.single-product .bspc-applecom-cta,
.single-product .bpc-trust-badges {
    max-width: var(--bspc-content-width, 1120px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------
 * Allinea anche la galleria prodotto e la sezione "Come funziona"
 * Il markup WooCommerce usa .woocommerce-product-gallery come
 * contenitore principale per l'immagine e le miniature, mentre il
 * template del blocco "Come funziona" applica .how-it-works-section.
 * Senza queste regole la galleria su mobile rimane spostata verso
 * destra a causa del padding del wrapper, e la sezione "Come funziona"
 * non eredita la stessa larghezza degli altri blocchi.  Aggiungendo
 * questi selettori allo scope .single-product centralizziamo la
 * larghezza e la centratura in modo coerente con gli altri blocchi.
 */
.single-product .woocommerce-product-gallery,
.single-product .how-it-works-section {
    max-width: var(--bspc-content-width, 1120px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery,
    .single-product .how-it-works-section {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .single-product .bpc-section,
    .single-product .product-variations-accordion,
    .single-product .bspc-faq-accordion,
    .single-product .bpc-product-seo-text,
    .single-product .apple-related-section,
    .single-product .bspc-applecom-cta,
    .single-product .bpc-trust-badges {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * ====================================================================
 * Spaziatura verticale uniforme
 *
 * Centralizziamo la definizione dei margini superiore e inferiore per
 * i principali blocchi della pagina prodotto. Le definizioni locali
 * di margin nei CSS dei blocchi sono state rimosse, così che qui
 * possiamo controllare in modo coerente l’intervallo tra le sezioni.
 * Per schermi piccoli riduciamo leggermente lo spazio.
 * ====================================================================
 */
.single-product .product-variations-accordion,
.single-product .bspc-faq-accordion,
.single-product .bpc-product-seo-text,
.single-product .apple-related-section,
.single-product .bspc-applecom-cta,
.single-product .bpc-trust-badges,
.single-product .product-full-description.bpc-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .single-product .product-variations-accordion,
    .single-product .bspc-faq-accordion,
    .single-product .bpc-product-seo-text,
    .single-product .apple-related-section,
    .single-product .bspc-applecom-cta,
    .single-product .bpc-trust-badges,
    .single-product .product-full-description.bpc-section {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/*
 * ====================================================================
 * Uniformità card (border-radius, shadow e bordo)
 *
 * Tutte le card all’interno della pagina prodotto che utilizzano la
 * classe `.bpc-card-unified` devono presentare lo stesso raggio di
 * curvatura, ombra e colore del bordo. Poiché altre pagine del
 * tema potrebbero usare valori differenti, applichiamo queste
 * modifiche solo nello scope `.single-product`.
 * ====================================================================
 */
.single-product .bpc-card-unified {
    border-radius: var(--bspc-radius-large, 18px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .single-product .bpc-card-unified {
        border-radius: var(--bspc-radius-large, 18px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    }
}

/*
 * ====================================================================
 * Shipping box (Istruzioni di imballaggio e spedizione)
 *
 * Il widget della spedizione utilizzato nella pagina prodotto non
 * eredita automaticamente le larghezze e i margini definiti per gli
 * altri blocchi.  Aggiungiamo qui la classe del box di spedizione
 * (bspc-shipping-box) per assicurare che sia centrata e che abbia
 * una spaziatura verticale coerente.  In precedenza questa sezione
 * poteva sovrapporsi o aderire troppo al blocco precedente.
 * ====================================================================
 */
.single-product .bspc-shipping-box {
    max-width: var(--bspc-content-width, 1120px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    margin-top: 60px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .single-product .bspc-shipping-box {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/*
 * ====================================================================
 * Stili della sezione "Come funziona" all'interno del prodotto
 *
 * Poiché il template della sezione non include classi card-unified,
 * definiamo qui lo sfondo, il bordo e l'ombra per il contenitore e
 * per le card dei singoli step. Questo mantiene la coerenza con
 * l'estetica Apple adottata dalle altre sezioni della pagina prodotto.
 * ====================================================================
 */
.single-product .how-it-works-section {
    /* Applica uno sfondo neutro e un bordo trasparente */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--bspc-radius-large, 18px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    padding: 2.5rem 1.5rem;
}
.single-product .how-it-works-header .section-title {
    margin-bottom: 0.5rem;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    color: var(--bspc-text-primary, #1d1d1f);
}
.single-product .how-it-works-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    color: var(--bspc-text-secondary, #86868b);
    font-size: 1rem;
}
.single-product .how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
.single-product .how-step-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--bspc-radius-medium, 16px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.single-product .how-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.single-product .how-step-card .step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f0f0f2;
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    line-height: 1;
    pointer-events: none;
}
.single-product .how-step-card .step-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bspc-text-primary, #1d1d1f);
    position: relative;
}
.single-product .how-step-card .step-desc {
    font-size: 0.95rem;
    color: var(--bspc-text-secondary, #86868b);
    line-height: 1.5;
    margin: 0;
    position: relative;
}

@media (max-width: 768px) {
    .single-product .how-it-works-section {
        padding: 2rem 1rem;
    }
    .single-product .how-it-works-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .single-product .how-step-card {
        padding: 1.25rem;
    }
}