/*
 * Pagina Bundle — restyle 15/10/2026 (fase 2)
 *
 * Solo grafica: struttura, classi e comportamento restano quelli di BundlePlugin
 * (css/style.css del plugin, caricato prima di questo file). Caricato solo sulla pagina
 * Bundle (inc/shop.php), che attiva anche il markup "rifinito" del plugin
 * (filtro erc_bundle_enhanced_cards: titolo su tutte le schede, tabella caratteristiche).
 *
 * Tutte le regole partono da .erc-bundle-page per vincere sul CSS del plugin senza
 * !important; dove il plugin usa !important lo si ripete (segnalato nel commento).
 */

/* ============================================================
   Testata della pagina e barra agganciata (categorie, prezzo, pulsante)
   ============================================================ */
/* "Categorie": la barra subito sotto lo dice già */
.erc-bundle-page .bundle-page-title { display: none; }

.erc-bundle-page #sticky-bundle-wrapper {
    background: #fff;
    border-bottom: 1px solid var(--erc-border);
    box-shadow: var(--erc-shadow-sm);
}
.erc-bundle-page #sticky-bundle-wrapper.is-stuck { box-shadow: var(--erc-shadow); }

/* Header NON agganciato sulla pagina Bundle (20/10/2026): scorre via e resta agganciata solo la
   barra categorie (il JS del plugin legge la posizione calcolata dell'header per sapere da dove
   fissarla). z-index sopra la barra categorie (99999 nel plugin): altrimenti il sottomenu
   "Supporto" (desktop) e il pannello menu (mobile) finiscono dietro (19/10/2026).
   Resta sotto carrellino/popup del plugin (100001+). */
.erc-bundle-page #erc-header-sticky { position: relative; top: auto; z-index: 100000; }

/* Categorie principali */
.erc-bundle-page .bundle-macro-tabs-bar { border-bottom: 1px solid var(--erc-border); }
.erc-bundle-page .macro-tab-button {
    padding: 12px 8px 10px;
    color: var(--erc-text-muted);
    border-bottom-width: 3px;
}
.erc-bundle-page .macro-tab-button .category-name { font-size: 15px; font-weight: 700; }
.erc-bundle-page .macro-tab-button .macro-price { font-size: 13px; color: var(--erc-sage-light); }
.erc-bundle-page .macro-tab-button:hover,
.erc-bundle-page .macro-tab-button.active,
.erc-bundle-page .macro-tab-button.has-macro-color:hover,
.erc-bundle-page .macro-tab-button.has-macro-color.active {
    color: var(--erc-forest);
    border-bottom-color: var(--erc-sage);
}
.erc-bundle-page .macro-tab-button.active .macro-price { color: var(--erc-sage); }

/* Sottocategorie (Indoor, Outdoor, Trinciati…) come pillole */
.erc-bundle-page .sticky-bundle-row { padding: 10px 16px; gap: 16px; }
.erc-bundle-page .tab-titles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.erc-bundle-page .tab-titles li { min-width: 0; margin: 0; }
.erc-bundle-page .tab-titles li a.subcategory-button {
    display: flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid var(--erc-border);
    border-radius: 999px;
    background: #fff;
    color: var(--erc-text-dark);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.erc-bundle-page .tab-titles li a.subcategory-button:hover { border-color: var(--erc-sage); }
.erc-bundle-page .tab-titles li a.subcategory-button.active,
.erc-bundle-page .subcategory-button.has-macro-color.active {
    background: var(--erc-forest);
    border-color: var(--erc-forest);
    color: #fff;
}
.erc-bundle-page .subcategory-button .category-info { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.erc-bundle-page .subcategory-button .category-name { font-size: 14px; font-weight: 700; }
.erc-bundle-page .subcategory-button .category-price { font-size: 13px; font-weight: 700; color: var(--erc-sage); }
.erc-bundle-page .subcategory-button .per-gram { margin-left: 2px; font-size: 11px; color: var(--erc-text-muted); }
.erc-bundle-page .subcategory-button.active .category-price,
.erc-bundle-page .subcategory-button.active .per-gram { color: #cfe0d5; }

/* Risparmio al grammo accanto al totale (es. "-1.00€/g") */
.erc-bundle-page .savings-display { color: var(--erc-sage); font-weight: 700; }

/* Prezzo totale + "Procedi al pagamento" */
.erc-bundle-page .bundle-price-actions-col { gap: 16px; }
.erc-bundle-page .bundle-price-container .d-flex { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.erc-bundle-page .strong-price { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erc-text-muted); }
.erc-bundle-page #bundle-total-price { margin: 2px 0 0; font-size: 26px; font-weight: 800; color: var(--erc-forest); }
.erc-bundle-page #bundle-total-price.has-discount { font-size: 15px; color: var(--erc-text-muted); }
.erc-bundle-page .bundle-buttons { margin: 0; }
.erc-bundle-page .bundle-buttons .add-bundle-to-cart {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--erc-accent);
    color: var(--erc-on-accent);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(243, 154, 43, .3);
}
.erc-bundle-page .bundle-buttons .add-bundle-to-cart:hover,
.erc-bundle-page .bundle-buttons .add-bundle-to-cart:focus {
    background: var(--erc-accent-dark);
    border: 0;
    color: var(--erc-on-accent);
}

/* ============================================================
   Griglia e schede prodotto
   ============================================================ */
.erc-bundle-page .tab-content,
.erc-bundle-page .direct-products-content { padding: 24px 16px; } /* direct-: categorie senza sottocategorie (Olio) */
.erc-bundle-page .bundle-form { gap: 20px; }

.erc-bundle-page .bundle-product-wrapper {
    position: relative;
    margin: 0;
    padding: 20px;
    background: var(--erc-surface);
    border: 1px solid var(--erc-border);
    border-radius: var(--erc-radius-lg);
    box-shadow: var(--erc-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.erc-bundle-page .bundle-product-wrapper:hover {
    transform: none;
    border-color: var(--erc-mint-strong);
    box-shadow: var(--erc-shadow);
}
/* Scheda con quantità > 0 (stato già calcolato dal plugin su .input-grammi) */
.erc-bundle-page .bundle-product-wrapper:has(.input-grammi.change-bg) { border-color: var(--erc-sage); }

.erc-bundle-page .bundle-product { gap: 24px; align-items: stretch; }

/* Colonna immagine: fondo chiaro, immagine centrata */
.erc-bundle-page .bundle-product > .col-lg-6:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    background: #fff; /* le foto prodotto hanno fondo bianco: su un fondo colorato farebbero un riquadro */
    border-radius: var(--erc-radius);
}
/* Swiper misura la larghezza del contenitore: in una colonna flex senza un limite esplicito
   si allarga sul proprio contenuto all'infinito (stesso problema già visto in erc-shop.css). */
.erc-bundle-page .bundle-product > .col-lg-6:first-child > .swiper { width: 100%; min-width: 0; max-width: 100%; }
.erc-bundle-page .bundle-tabs .bundle-product img.product-thumbnail {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: var(--erc-radius-sm);
}
.erc-bundle-page .swiper-wrapper { margin-bottom: 22px; }
.erc-bundle-page .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: var(--erc-border-strong) !important; opacity: 1 !important; } /* !important: come nel plugin */
.erc-bundle-page .swiper-pagination-bullet-active { width: 20px !important; border-radius: 999px; background: var(--erc-sage) !important; }

/* "Al momento non disponibile": capsula discreta sull'immagine */
.erc-bundle-page .product-title-out {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border: 1px solid #f1d0cc;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--erc-danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: var(--erc-shadow-sm);
}
.erc-bundle-page .product-title-out::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.erc-bundle-page .bundle-product-wrapper:has(.product-title-out) .product-thumbnail { opacity: .55; filter: grayscale(.6); }

/* Colonna testo: titolo, caratteristiche, aromi e quantità in fondo */
.erc-bundle-page .bundle-product > .col-lg-6:last-child { display: flex; flex-direction: column; min-width: 0; }
.erc-bundle-page .bundle-product-content { flex: 0 0 auto; }

.erc-bundle-page .bundle-product-title,
.erc-bundle-page .bundle-product-non-scaglioni .bundle-product-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--erc-forest);
}

.erc-bundle-page .aromi-flex { display: block; }
.erc-bundle-page .product-summary { color: var(--erc-text); font-size: 14px; line-height: 1.55; }
.erc-bundle-page .product-summary ul { margin: 0 0 0 18px; }

/* Caratteristiche (Aspetto / Aroma / Sapore / CBD) */
.erc-bundle-page .erc-specs {
    margin: 0;
    padding: 2px 14px;
    background: var(--erc-bg);
    border: 1px solid var(--erc-border);
    border-radius: var(--erc-radius);
}
.erc-bundle-page .erc-spec {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--erc-border);
}
.erc-bundle-page .erc-spec:last-child { border-bottom: 0; }
.erc-bundle-page .erc-spec dt {
    margin: 0;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--erc-sage);
}
.erc-bundle-page .erc-spec dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--erc-text-dark); }
.erc-bundle-page .erc-specs-note { margin: 8px 0 0; font-size: 12px; color: var(--erc-text-muted); }

/* Aromi: piccole etichette con icona. 04/11/2026 (cliente): senza bordo, icone più piccole,
   centrate e tutte su una riga (se non c'entrano le etichette si stringono, non vanno a capo) */
.erc-bundle-page .product-aromi { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px 10px; margin: 14px 0 0; }
.erc-bundle-page .aroma-item {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 4px;
    max-width: none;
    padding: 2px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}
.erc-bundle-page .aroma-icon { flex-shrink: 0; width: 18px; height: 18px; margin: 0; }
.erc-bundle-page .aroma-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Da tablet/desktop la colonna di testo è stretta (~260px): lì vanno a capo, centrate, invece di
   troncare i nomi. La riga unica vale per il telefono, dove la scheda è a tutta larghezza. */
@media (min-width: 601px) {
    .erc-bundle-page .product-aromi { flex-wrap: wrap; }
}
/* Telefoni molto stretti (320px): un po' più compatte per restare su una riga senza troncare */
@media (max-width: 359px) {
    .erc-bundle-page .product-aromi { gap: 4px 7px; }
    .erc-bundle-page .aroma-item { gap: 3px; font-size: 11px; }
    .erc-bundle-page .aroma-icon { width: 16px; height: 16px; }
}

.erc-bundle-page .description-toggle { color: var(--erc-sage); }

/* Descrizione breve dei Cannabis Light (descrizione principale del prodotto, 02/11/2026) */
/* Sopra le icone degli aromi e in grassetto 600 dal 04/11/2026 */
.erc-bundle-page .product-intro { margin: 12px 0 0; color: var(--erc-text); font-size: 14px; font-weight: 600; line-height: 1.55; }
.erc-bundle-page .product-intro p { margin: 0 0 6px; }
.erc-bundle-page .product-intro p:last-child { margin-bottom: 0; }

/* Testi incollati con carattere e grandezza propri (es. Linea capelli: Times New Roman
   "large"): si usa quello della scheda come negli altri prodotti (02/11/2026) */
.erc-bundle-page .product-summary [style*="font"],
.erc-bundle-page .product-summary-mobile [style*="font"],
.erc-bundle-page .product-intro [style*="font"],
.erc-bundle-page .product-summary font,
.erc-bundle-page .product-summary-mobile font {
    font-family: inherit !important; /* !important: battono lo style inline del testo */
    font-size: inherit !important;
}

/* Variazioni: "Inserisci la quantità per Olio CBD 5%" leggibile, non in maiuscoletto */
.erc-bundle-page .var-shared-qty-wrapper .qty-label { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--erc-text-dark); }

/* ============================================================
   Selettore quantità (+ / −)
   ============================================================ */
.erc-bundle-page .qty-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--erc-text-muted);
}
.erc-bundle-page .bundle-product > .col-lg-6:last-child > .qty-label { margin-top: auto; padding-top: 16px; }

.erc-bundle-page .input-grammi {
    margin-top: 0;
    padding: 6px;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--erc-border-strong);
    border-radius: var(--erc-radius);
    box-shadow: none;
}
.erc-bundle-page .input-grammi.change-bg {
    background: var(--erc-mint);
    border-color: var(--erc-sage);
    box-shadow: 0 0 0 3px rgba(45, 90, 64, .14);
}
.erc-bundle-page .quantity-wrapper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.erc-bundle-page .quantity-decrement,
.erc-bundle-page .quantity-increment {
    width: 48px !important; /* !important: il plugin lo forza a 70px sotto i 600px */
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--erc-mint);
    color: var(--erc-forest);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
    touch-action: manipulation;
}
.erc-bundle-page .quantity-decrement:hover,
.erc-bundle-page .quantity-increment:hover { background: var(--erc-sage); color: #fff; }
.erc-bundle-page .quantity-decrement:active,
.erc-bundle-page .quantity-increment:active { transform: scale(.94); }
.erc-bundle-page .input-grammi.change-bg .quantity-decrement,
.erc-bundle-page .input-grammi.change-bg .quantity-increment { background: #fff; }
.erc-bundle-page .input-grammi.change-bg .quantity-decrement:hover,
.erc-bundle-page .input-grammi.change-bg .quantity-increment:hover { background: var(--erc-sage); }

.erc-bundle-page .input-grammi input,
.erc-bundle-page .product-quantity-bundle {
    width: 100% !important;  /* !important: il plugin forza 50% / 40px */
    height: 48px !important;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--erc-forest);
    -moz-appearance: textfield;
}
.erc-bundle-page .product-quantity-bundle[data-is-scaglioni="1"] { width: 100%; font-size: 24px; color: var(--erc-forest); }
.erc-bundle-page .input-grammi.change-bg .product-quantity-bundle { background: transparent !important; }
.erc-bundle-page .grammi-label { font-size: 12px; font-weight: 700; color: var(--erc-sage); }
.erc-bundle-page .grammi-label:empty { display: none; }

/* Varianti con input condiviso: il numero lo mostra il badge sulla card */
.erc-bundle-page .var-shared-qty-wrapper { margin-top: auto; }
.erc-bundle-page .var-shared-qty-wrapper .qty-label { text-align: center; }
.erc-bundle-page .var-shared-qty-input { color: transparent; }

/* ============================================================
   Varianti (taglie/colori) e trinciati: tessere selezionabili
   ============================================================ */
.erc-bundle-page .variation-attribute-title { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--erc-text-muted); }
.erc-bundle-page .trinciati-cards-row,
.erc-bundle-page .var-cards-row { gap: 8px; padding: 0 0 12px; margin: 0; }
.erc-bundle-page .trinciati-variation-row,
.erc-bundle-page .var-card-row {
    min-width: 84px;
    padding: 10px 8px;
    border: 1px solid var(--erc-border-strong);
    border-radius: var(--erc-radius);
    background: #fff;
    box-shadow: none;
}
.erc-bundle-page .trinciati-variation-row:hover:not(.out-of-stock),
.erc-bundle-page .var-card-row:hover:not(.out-of-stock) { border-color: var(--erc-sage); }
.erc-bundle-page .trinciati-variation-row.active,
.erc-bundle-page .var-card-row.active {
    border-color: var(--erc-forest);
    background: var(--erc-mint);
    box-shadow: 0 0 0 2px var(--erc-forest);
}
.erc-bundle-page .trinciati-card-label { font-size: 14px; font-weight: 800; color: var(--erc-text-dark); }
.erc-bundle-page .trinciati-card-price { font-size: 13px; font-weight: 700; color: var(--erc-sage); }
.erc-bundle-page .var-card-badge { background: var(--erc-forest); box-shadow: 0 0 0 2px #fff; }
.erc-bundle-page .variation-oos-badge { background: #fff; color: var(--erc-danger); border: 1px solid #f1d0cc; border-radius: 999px; }
.erc-bundle-page .trinciati-variation-row.out-of-stock,
.erc-bundle-page .var-card-row.out-of-stock { filter: none; opacity: .6; }
.erc-bundle-page .trinciati-deselect-btn { border-radius: 999px; border-color: var(--erc-border-strong); color: var(--erc-text-muted); }

/* ============================================================
   Barra notifiche desktop e barra in basso (mobile)
   ============================================================ */
.erc-bundle-page .mobile-deal-bar { box-shadow: 0 -6px 24px rgba(16, 24, 20, .14); border-top: 1px solid var(--erc-border); }
.erc-bundle-page #mobile-scaglioni-total { color: var(--erc-forest); }
.erc-bundle-page .deal-bar-button .add-bundle-to-cart,
.erc-bundle-page .bundle-buttons-mobile .add-bundle-to-cart {
    border-radius: 999px;
    background: var(--erc-accent);
    color: var(--erc-on-accent);
    font-weight: 800;
}

/* Desktop: suggerimenti ("Aggiungi il tuo primo grammo…") come avviso flottante in basso,
   invece della fascia verde a tutta larghezza */
@media (min-width: 993px) {
    .erc-bundle-page .notification-bar-desktop.notification-bar-visible {
        left: 50%;
        bottom: 20px;
        width: auto;
        max-width: min(680px, calc(100% - 48px));
        transform: translateX(-50%);
        padding: 12px 24px;
        border-radius: 999px;
        background: var(--erc-forest);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        box-shadow: var(--erc-shadow-lg);
    }
    .erc-bundle-page .notification-bar-desktop.notification-bar-cart-change { background: var(--erc-sage); color: #fff; }
    /* il plugin a volte rende visibile la barra prima di riempirla */
    .erc-bundle-page .notification-bar-desktop.notification-bar-visible:empty { display: none; }
}

/* Tab in basso (02/11/2026): Prezzi · Spedizione · Fidelity · Carrello */
@media (max-width: 992px) {
    .erc-bundle-page #erc-float-bar { border-top-color: var(--erc-border); box-shadow: 0 -4px 18px rgba(16, 24, 20, .10); }
    .erc-bundle-page .erc-float-btn { color: var(--erc-forest); }
    .erc-bundle-page .erc-float-btn.is-active { background: var(--erc-mint); }
    .erc-bundle-page #erc-float-cart-btn { background: var(--erc-accent); color: var(--erc-on-accent); }
    .erc-bundle-page #erc-float-cart-btn .erc-float-cart-total { font-size: 13px; font-weight: 800; color: inherit; }
    .erc-bundle-page #erc-float-cart-btn.is-active { box-shadow: inset 0 0 0 2px var(--erc-forest); }
    /* la pagina finisce sopra tab e barra in basso */
    body.erc-bundle-page { padding-bottom: var(--erc-tabbar-h, 60px); }
    .erc-bundle-page .erc-popup-header { border-bottom-color: var(--erc-border); }
    .erc-bundle-page .erc-popup-title { color: var(--erc-forest); font-weight: 800; }
    .erc-bundle-page .erc-popup-close { background: var(--erc-bg); color: var(--erc-text-dark); }
}


/* ============================================================
   Riepilogo ordine: popup desktop (.desktop-bundle-popup) e carrellino mobile (#erc-cart-popup)
   Stesso contenuto (buildCartBody in product-bundle.js), stessa grafica.
   ============================================================ */
.erc-bundle-page .desktop-bundle-popup-overlay,
.erc-bundle-page .erc-cart-popup-overlay { background: rgba(16, 30, 22, .55); }

.erc-bundle-page .desktop-bundle-popup-content {
    max-width: 540px;
    border-radius: 20px;
    box-shadow: var(--erc-shadow-lg);
    display: flex;
    flex-direction: column;
}
.erc-bundle-page .desktop-bundle-popup-header,
.erc-bundle-page .erc-cart-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #fff;
    color: var(--erc-text-dark);
    border-bottom: 1px solid var(--erc-border);
}
.erc-bundle-page .desktop-bundle-popup-header h3,
.erc-bundle-page .erc-cart-popup-title {
    flex: 1;
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--erc-forest);
}
/* SALVA / SVUOTA: azioni secondarie, non pulsanti principali */
.erc-bundle-page .erc-cart-header-icon-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--erc-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--erc-text-muted);
    font-size: 11px;
    font-weight: 700;
}
.erc-bundle-page .erc-cart-header-icon-btn:hover { border-color: var(--erc-sage); background: var(--erc-mint); color: var(--erc-forest); }
.erc-bundle-page [id^="erc-cart-clear-btn"]:hover { border-color: #f1d0cc; background: #fdf3f2; color: var(--erc-danger); }
.erc-bundle-page .desktop-bundle-popup-close,
.erc-bundle-page .erc-cart-popup-close {
    /* 48px e × più grande (28/10/2026, richiesta cliente: era 40px) */
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--erc-bg);
    color: var(--erc-text-dark);
    font-size: 32px;
    line-height: 1;
    transition: background-color .15s ease;
}
.erc-bundle-page .desktop-bundle-popup-close:hover,
.erc-bundle-page .erc-cart-popup-close:hover { transform: none; background: var(--erc-mint); color: var(--erc-forest); }

.erc-bundle-page .desktop-bundle-popup-body,
.erc-bundle-page .erc-cart-popup-body { padding: 16px 20px 0; }

/* Accedi per procedere */
.erc-bundle-page .bundle-login-banner {
    background: var(--erc-mint);
    border: 1px solid var(--erc-mint-strong);
    border-radius: var(--erc-radius);
    color: var(--erc-forest);
    font-weight: 600;
}
.erc-bundle-page .bundle-login-banner-btn { min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--erc-forest); }
.erc-bundle-page .bundle-login-banner-btn:hover { background: var(--erc-sage); }

/* Gruppi e righe prodotto */
.erc-bundle-page .cart-macro-title {
    margin: 18px 0 4px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--erc-forest);
}
.erc-bundle-page .cart-category-title,
.erc-bundle-page .cart-category-title.has-category-color {
    margin: 10px 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--erc-text-muted);
    text-decoration: none;
}
.erc-bundle-page .category-total-grams {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--erc-mint);
    color: var(--erc-forest);
    font-size: 12px;
    font-weight: 700;
}
.erc-bundle-page .cart-section-divider { margin: 8px 0; border: 0; border-top: 1px solid var(--erc-border); }

.erc-bundle-page .cart-item-row { gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--erc-border); }
.erc-bundle-page .cart-item-row:last-child { border-bottom: 0; }
.erc-bundle-page .cart-item-img {
    width: 56px;
    height: 56px;
    padding: 4px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--erc-border);
    border-radius: 10px;
}
.erc-bundle-page .cart-item-name { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--erc-text-dark); white-space: normal; }
.erc-bundle-page .cart-item-name .variation-info {
    display: block;
    width: auto;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--erc-text-muted);
}

/* Quantità: gruppo unico − n + */
.erc-bundle-page .cart-quantity-controls {
    gap: 0;
    border: 1px solid var(--erc-border-strong);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
.erc-bundle-page .cart-qty-btn,
.erc-bundle-page .desktop-bundle-popup-body .cart-qty-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--erc-forest);
    font-size: 18px;
    font-weight: 600;
}
.erc-bundle-page .cart-qty-btn:hover { background: var(--erc-mint); }
.erc-bundle-page .cart-qty-btn.minus,
.erc-bundle-page .cart-qty-btn.plus { color: var(--erc-forest); }
.erc-bundle-page .cart-qty-btn[data-is-trinciati="1"] { color: var(--erc-danger); }
.erc-bundle-page .cart-qty-display { min-width: 34px; font-size: 14px; font-weight: 800; color: var(--erc-text-dark); }

/* Totali */
.erc-bundle-page .cart-price-grid {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--erc-bg);
    border: 1px solid var(--erc-border);
    border-radius: var(--erc-radius);
    font-size: 14px;
}
.erc-bundle-page .price-row { padding: 3px 0; color: var(--erc-text); }
.erc-bundle-page .total-row { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--erc-border-strong); font-size: 18px; color: var(--erc-forest); }
.erc-bundle-page .discount-row { color: var(--erc-sage); }


/* Sconto punti, credito reso, grammi omaggio: stessa scheda chiara, colori del sito
   (prima azzurro, verde e giallo diversi per ogni sezione) */
.erc-bundle-page .cart-discount-section,
.erc-bundle-page .cart-credit-section,
.erc-bundle-page .cart-gift-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--erc-border);
    border-radius: var(--erc-radius);
}
.erc-bundle-page .discount-title,
.erc-bundle-page .credit-title,
.erc-bundle-page .gift-title { color: var(--erc-forest); font-size: 15px !important; font-weight: 800; } /* !important: come nel plugin */
.erc-bundle-page .discount-toggle-icon,
.erc-bundle-page .gift-toggle-icon { color: var(--erc-text-muted); }
.erc-bundle-page .discount-points-badge,
.erc-bundle-page .credit-balance-badge,
.erc-bundle-page .gift-counter { background: var(--erc-mint); color: var(--erc-forest); }
.erc-bundle-page .discount-description,
.erc-bundle-page .credit-description,
.erc-bundle-page .gift-description { color: var(--erc-text-muted); }
.erc-bundle-page .discount-qty-btn,
.erc-bundle-page .credit-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--erc-border-strong);
    background: #fff;
    color: var(--erc-forest);
}
.erc-bundle-page .discount-qty-btn:hover,
.erc-bundle-page .credit-qty-btn:hover { background: var(--erc-forest); border-color: var(--erc-forest); color: #fff; }
.erc-bundle-page .discount-points-input,
.erc-bundle-page .credit-amount-input { height: 40px; border: 1px solid var(--erc-border-strong); border-radius: 10px; color: var(--erc-forest); }
.erc-bundle-page .discount-preview,
.erc-bundle-page .credit-preview { background: var(--erc-mint); color: var(--erc-text-dark); border-radius: 10px; }
.erc-bundle-page .discount-preview strong,
.erc-bundle-page .credit-preview strong { color: var(--erc-forest); }
.erc-bundle-page .gift-separator { border-top: 1px solid var(--erc-border) !important; } /* !important: come nel plugin */
.erc-bundle-page .gift-qty-btn { width: 32px; height: 32px; border-color: var(--erc-border-strong); color: var(--erc-forest); }
.erc-bundle-page .gift-qty-btn.plus { background: var(--erc-forest); border-color: var(--erc-forest); color: #fff; }
.erc-bundle-page .gift-qty-btn:hover:not(:disabled),
.erc-bundle-page .gift-qty-btn.plus:hover:not(:disabled) { background: var(--erc-sage); border-color: var(--erc-sage); color: #fff; }
.erc-bundle-page .gift-accordion-toggle { border-radius: 10px; }

/* "Procedi al pagamento": sempre visibile in fondo al riepilogo, anche con tanti prodotti */
.erc-bundle-page .add-bundle-to-cart-popup-confirm {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 54px;
    margin: 16px 0 0;
    border-radius: 999px;
    background: var(--erc-accent);
    color: var(--erc-on-accent);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 -16px 16px -4px #fff, 0 6px 16px rgba(243, 154, 43, .3);
    transition: background-color .15s ease;
}
.erc-bundle-page .add-bundle-to-cart-popup-confirm:hover { background: var(--erc-accent-dark); color: var(--erc-on-accent); }
/* "Vai al carrello" (28/10/2026): azione secondaria sotto "Procedi al pagamento" */
.erc-bundle-page .erc-go-to-cart {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 10px 0 0;
    border: 1px solid var(--erc-forest);
    border-radius: 999px;
    background: #fff;
    color: var(--erc-forest);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.erc-bundle-page .erc-go-to-cart:hover { background: var(--erc-mint); }
/* Scorrendo il riepilogo fino in fondo la pagina dietro non deve muoversi (28/10/2026) */
.erc-bundle-page .erc-cart-popup-body,
.erc-bundle-page .desktop-bundle-popup-body,
.erc-bundle-page .erc-cart-popup-panel { overscroll-behavior: contain; }

/* Sconto punti e credito (28/10/2026, "troppo strette"): descrizione su tutta la riga, sotto
   − valore + e l'anteprima affiancati (prima tre colonne: testo schiacciato, anteprima tagliata) */
.erc-bundle-page .discount-section-content,
.erc-bundle-page .credit-section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
.erc-bundle-page .discount-description,
.erc-bundle-page .credit-description { flex: 1 1 100%; width: auto; margin: 0; font-size: 13px; line-height: 1.45; }
.erc-bundle-page .discount-input-row,
.erc-bundle-page .credit-input-row { flex: 0 0 auto; margin: 0; padding: 0; gap: 8px; justify-content: flex-start; }
.erc-bundle-page .discount-points-input,
.erc-bundle-page .credit-amount-input { width: 76px; }
.erc-bundle-page .discount-preview,
.erc-bundle-page .credit-preview { flex: 1 1 110px; min-width: 0; margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.3; text-align: center; }
.erc-bundle-page .desktop-bundle-popup-body::after,
.erc-bundle-page .erc-cart-popup-body::after { content: ""; display: block; height: 16px; }

/* ============================================================
   Responsive
   ============================================================ */
/* Tablet (601–1200px): il plugin impila immagine e testo in ogni scheda */
@media (max-width: 1200px) and (min-width: 601px) {
    .erc-bundle-page .bundle-product > .col-lg-6:first-child { margin-bottom: 16px; }
    .erc-bundle-page .bundle-tabs .bundle-product img.product-thumbnail { max-height: 240px; }
}

@media (max-width: 992px) {
    .erc-bundle-page .sticky-bundle-row { padding: 0; }
    .erc-bundle-page .tab-titles { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
    .erc-bundle-page .tab-titles li a.subcategory-button { padding: 6px 12px; }
    .erc-bundle-page .macro-tab-button .category-name { font-size: 13px; }
}

/* Telefoni: una scheda per riga, immagine più bassa, quantità a tutta larghezza */
@media (max-width: 600px) {
    /* Sottocategorie (Indoor, Outdoor, Trinciati…) più piccole da telefono (04/11/2026, cliente).
       Il file generato erc-mobile-text.css toglie poi 1px anche a queste. */
    .erc-bundle-page .tab-titles li a.subcategory-button { padding: 5px 11px; }
    .erc-bundle-page .subcategory-button .category-info { gap: 6px; }
    .erc-bundle-page .subcategory-button .category-name { font-size: 13px; }
    .erc-bundle-page .subcategory-button .category-price { font-size: 12px; }
    .erc-bundle-page .subcategory-button .per-gram { font-size: 11px; }
    .erc-bundle-page .tab-content,
    .erc-bundle-page .direct-products-content { padding: 14px 10px; }
    .erc-bundle-page .bundle-product-wrapper { margin: 0 0 14px; padding: 14px !important; } /* !important: il plugin azzera il padding */
    .erc-bundle-page .bundle-tabs .bundle-product > .col-lg-6:first-child { padding: 10px !important; margin-bottom: 14px; }
    .erc-bundle-page .bundle-tabs .bundle-product img.product-thumbnail { max-height: 210px; }
    .erc-bundle-page .product-title-out { position: absolute; top: 10px; left: 10px; display: inline-flex; }

    /* Cannabis Light: il nome è già nell'immagine — titolo solo per i lettori di schermo */
    .erc-bundle-page .bundle-product-title-scaglioni {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap;
    }
    .erc-bundle-page .bundle-product-title { font-size: 18px; }

    /* Cannabis Light (02/11/2026): icone aromi, sotto la descrizione breve e "Altro" come
       nelle altre categorie (link, non più bottone a capsula) che apre le caratteristiche */
    .erc-bundle-page .aromi-flex { display: block; }
    .erc-bundle-page .product-aromi { margin: 12px 0 0; justify-content: center; }
    .erc-bundle-page .info-icon {
        display: inline-block;
        margin: 10px 0 0;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        color: var(--erc-sage);
    }
    .erc-bundle-page .product-summary-mobile { margin-top: 10px; }

    .erc-bundle-page .bundle-product > .col-lg-6:last-child > .qty-label { padding-top: 14px; }
    .erc-bundle-page .quantity-wrapper { grid-template-columns: 52px 1fr 52px; }
    .erc-bundle-page .quantity-decrement,
    .erc-bundle-page .quantity-increment { width: 52px !important; height: 52px; }
}


/* X di chiusura disegnata con due barre (28/10/2026): il carattere "×" del font cadeva sotto il
   centro del cerchio. Vale per carrellino, popup desktop e riepilogo della barra in basso. */
.erc-bundle-page .desktop-bundle-popup-close,
.erc-bundle-page .erc-cart-popup-close { position: relative; }
.erc-bundle-page .desktop-bundle-popup-close,
.erc-bundle-page .erc-cart-popup-close,
.erc-bundle-page .cart-close-btn { font-size: 0 !important; } /* !important: il plugin fissa la dimensione del carattere; .cart-close-btn resta absolute (plugin) */
.erc-bundle-page .desktop-bundle-popup-close::before,
.erc-bundle-page .desktop-bundle-popup-close::after,
.erc-bundle-page .erc-cart-popup-close::before,
.erc-bundle-page .erc-cart-popup-close::after,
.erc-bundle-page .cart-close-btn::before,
.erc-bundle-page .cart-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.erc-bundle-page .desktop-bundle-popup-close::after,
.erc-bundle-page .erc-cart-popup-close::after,
.erc-bundle-page .cart-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Riepilogo della barra in basso (#mobile-deal-bar): X grande come nel carrellino */
.erc-bundle-page .cart-close-btn {
    top: 8px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--erc-border);
    border-radius: 50%;
    background: #fff;
    color: var(--erc-text-dark);
}
.erc-bundle-page .cart-expandable-header { min-height: 60px; padding-right: 60px; padding-left: 60px; display: flex; align-items: center; justify-content: center; }
.erc-bundle-page .cart-expandable-header h3 { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--erc-forest); }
.erc-bundle-page .cart-items-list .erc-go-to-cart { margin-top: 12px; }

/* Scroll "a slide" da telefono (04/11/2026, cliente): ogni prodotto si aggancia appena sotto il
   menu compatto. La classe html.erc-snap la mette/toglie BundlePlugin (spenta con un "Altro"
   aperto); --erc-snap-top = altezza del menu compatto, dal JS. Si usa scroll-margin sui prodotti
   e NON scroll-padding sulla pagina: col padding la cima (header) non era un punto di aggancio
   valido e all'apertura il browser saltava subito al primo prodotto. */
@media (max-width: 600px) {
    html.erc-snap { scroll-snap-type: y mandatory; }
    html.erc-snap .erc-bundle-page .bundle-product-wrapper { scroll-snap-align: start; scroll-margin-top: var(--erc-snap-top, 0px); }
    /* #erc-header è display:contents (nessun box, non aggancia): si usa la sua prima riga */
    html.erc-snap .erc-topbar { scroll-snap-align: start; }
    html.erc-snap #erc-footer { scroll-snap-align: end; }
    /* Prodotto più alto dello spazio libero (classe dal JS, 04/11/2026): secondo aggancio sul fondo,
       appena sopra la barra in basso, così card variazioni e quantità si raggiungono sempre.
       La colonna di testo finisce 15px sopra il fondo della scheda (padding). */
    html.erc-snap .erc-bundle-page .bundle-product-wrapper.erc-snap-tall > .col-lg-6:last-child {
        scroll-snap-align: end;
        scroll-margin-bottom: calc(var(--erc-snap-bottom, 0px) + 15px);
    }
}

/* Telefono (04/11/2026, cliente): card variazione più strette, tutte su una riga se ci stanno
   (es. Olio CBD 5% · 10% · 20% · 30%; prima 2 e 2, alte ~65px). Con più variazioni vanno a capo. */
@media (max-width: 600px) {
    .erc-bundle-page .variation-attribute-title { margin: 10px 0 4px; }
    .erc-bundle-page .var-cards-row { gap: 6px; padding: 0 0 8px; }
    .erc-bundle-page .var-cards-row > .var-card-row,
    .erc-bundle-page .var-cards-row:has(> :nth-child(4)):not(:has(> :nth-child(5))) > .var-card-row {
        flex: 1 1 0;
        min-width: 64px;
        padding: 6px 4px;
        gap: 0;
    }
    .erc-bundle-page .var-card-row .trinciati-card-label { font-size: 13px; line-height: 1.25; }
    .erc-bundle-page .var-card-row .trinciati-card-price { font-size: 12px; line-height: 1.25; }
    .erc-bundle-page .var-card-badge { top: -7px; right: -7px; width: 20px; height: 20px; font-size: 11px; }
}

/* Barra in basso unica (04/11/2026, cliente): messaggio della categoria e tab sono un solo blocco.
   Niente barretta, niente angoli e ombra propri della barra messaggi, una riga sola
   (categoria + messaggio, il messaggio va su 2 righe al massimo), tab più bassi. */
@media (max-width: 992px) {
    :root { --erc-tabbar-h: calc(52px + env(safe-area-inset-bottom, 0px)); }
    .erc-bundle-page .mobile-deal-bar .barretta { display: none !important; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px 5px;
        border-radius: 0;
        border-top: 1px solid var(--erc-border);
        box-shadow: 0 -4px 18px rgba(16, 24, 20, .10);
    }
    .erc-bundle-page .mobile-deal-bar:not(.expanded)::after { display: none; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) > .mobile-category-header { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) #mobile-category-name {
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--erc-mint);
        color: var(--erc-forest);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) #mobile-category-name::before { content: none; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) .mobile-category-total { font-size: 13px; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) > #notification-bar { flex: 1 1 auto; min-width: 0; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) #notification-bar .notification {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0 !important; /* !important: batte quello del plugin */
        font-size: 12px !important;
        line-height: 1.3;
    }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) #notification-bar .notification.hidden { display: none; }
    .erc-bundle-page .mobile-deal-bar:not(.expanded) > .deal-bar-section { display: none; }
    /* tab attaccati alla barra messaggi: niente bordo/ombra in mezzo */
    .erc-bundle-page #erc-float-bar { border-top: 0; box-shadow: none; }
    .erc-bundle-page .erc-float-btn { margin: 4px 0; gap: 2px; }
}