/* ==========================================================================
   SHOP - stili comuni a tutti i siti (cartella /shop)
   Caricato da /shop/inc/head_shop.asp (incluso nell'<head> di ogni sito) con lo shop acceso.
   Contiene solo gli stili delle parti dello shop: ricerca con anteprima nell'header,
   requisiti della password, errori dei campi, quantita' del carrello.
   Le differenze di grafica di un sito vanno nel suo css/custom.css (es. --rl-su per
   spostare il pannello dei risultati rispetto al campo di ricerca).
   ========================================================================== */

/* Ricerca con anteprima nell'header - Webmonster 09/2026 - schede affiancate */
.big-search-header {
    position: relative;
}

/* Campo di ricerca dell'header (Porto "big search"): come nel tema, solo la linea sotto.
   Il riquadro giallo/nero del focus (css/accessibility.css) qui e' sostituito da una linea
   piu' spessa del colore principale, sempre visibile quando si scrive (accessibile). */
#header .header-nav-features-search-reveal-big-search .big-search-header .form-control,
#header .header-nav-features-search-reveal-big-search .big-search-header .form-control:focus {
    border: 0 !important;
    border-bottom: 2px solid var(--primary, #0088cc) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 22px !important;
    padding-left: 0;
}
#header .header-nav-features-search-reveal-big-search .big-search-header .form-control:focus-visible {
    outline: none !important;
    box-shadow: 0 3px 0 0 var(--primary, #0088cc) !important;
}
#header .header-nav-features-search-reveal-big-search .header-nav-features-search-hide-icon:focus-visible {
    outline: 2px solid var(--primary, #0088cc) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

.ricerca-live {
    /* --rl-su: di quanto il pannello sale rispetto alla posizione sotto il campo di ricerca
       --rl-spazio-sotto: spazio libero da lasciare in fondo alla finestra */
    --rl-su: 0px;
    --rl-spazio-sotto: 120px;
    position: absolute;
    /* subito sotto il campo, qualunque sia l'altezza dell'header: il campo e' centrato in verticale
       nel riquadro della ricerca (alto quanto l'header), quindi meta' altezza + il campo */
    top: calc(50% + 28px);
    left: 0;
    right: 0;
    z-index: 1060;
    margin-top: calc(0px - var(--rl-su));
    padding: 12px 16px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    max-height: calc(100vh - var(--rl-spazio-sotto) - 120px);
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
    line-height: 1.3;
}

    .ricerca-live[hidden] {
        display: none;
    }

    .ricerca-live.rl-caricamento {
        opacity: .6;
    }

    .ricerca-live b {
        font-weight: 700;
        color: var(--primary, #0088cc);
    }

    /* intestazione: categorie a sinistra, pulsante "Vedi tutti i risultati" a destra */
    .ricerca-live .rl-testata {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .ricerca-live .rl-titolo-sezione {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #999;
        margin-right: 4px;
    }

    .ricerca-live .rl-tutti {
        flex: 0 0 auto;
        white-space: nowrap;
        font-weight: 600;
        padding-right: 14px;
    }

    .ricerca-live .rl-freccia {
        display: inline-block;
        margin-left: 8px;
        font-size: 1.2em;
        line-height: 1;
    }

    /* griglia: 6 schede affiancate su desktop */
    .ricerca-live .rl-griglia {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .ricerca-live .rl-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 10px;
        border: 1px solid #ececec;
        border-radius: 4px;
        color: #333;
        text-decoration: none;
        transition: border-color .15s, box-shadow .15s;
    }

        .ricerca-live .rl-card:hover, .ricerca-live .rl-card:focus {
            border-color: #ccc;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
            outline: none;
            color: #333;
        }

    .ricerca-live .rl-badges {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 22px;
    }

    .ricerca-live .rl-offerta {
        font-weight: 700;
        font-size: 13px;
        color: var(--primary, #0088cc);
        border-bottom: 2px solid currentColor;
        padding-bottom: 2px;
    }

    .ricerca-live .rl-sconto {
        margin-left: auto;
    }

    .ricerca-live .rl-img {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        margin: 6px 0 8px;
    }

        .ricerca-live .rl-img img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .ricerca-live .rl-nome {
        flex: 1 1 auto;
        font-size: 13px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        min-height: 3.9em;
    }

    .ricerca-live .rl-prezzo {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        margin-top: 8px;
    }

    .ricerca-live .rl-prezzo-vendita {
        font-size: 16px;
        font-weight: 700;
        color: var(--primary, #0088cc);
    }

    .ricerca-live .rl-prezzo del {
        font-size: 13px;
        color: #aaa;
    }

    /* categorie */
    .ricerca-live .rl-categorie {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .ricerca-live .rl-cat {
        padding: 4px 10px;
        border: 1px solid #e5e5e5;
        border-radius: 20px;
        color: #444;
        text-decoration: none;
        font-size: 13px;
    }

        .ricerca-live .rl-cat span {
            color: #999;
        }

        .ricerca-live .rl-cat:hover, .ricerca-live .rl-cat:focus {
            border-color: #999;
            outline: none;
        }

    .ricerca-live .rl-vuoto {
        padding: 6px 0;
        color: #888;
    }

    /* "Mostra altri prodotti" */
    .ricerca-live .rl-altri-box {
        text-align: center;
        margin-top: 14px;
    }

    .ricerca-live .rl-altri {
        min-width: 220px;
    }

        .ricerca-live .rl-altri.rl-attendi {
            opacity: .6;
            cursor: wait;
        }

/* schermi piu' piccoli: 3 schede per riga su tablet, 2 su telefono */
@media (max-width: 991px) {
    .ricerca-live .rl-griglia {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .ricerca-live {
        position: fixed;
        left: 8px;
        right: 8px;
        top: auto;
        margin-top: 6px;
        max-height: 70vh;
        padding: 10px;
    }

        .ricerca-live .rl-griglia {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .ricerca-live .rl-testata {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .ricerca-live .rl-tutti {
            text-align: center;
        }
}

/* ==========================================================================
   Requisiti password (elenco accanto al campo password, vedi /shop/js/shop.js)
   Ogni voce diventa verde con la spunta quando il requisito e' soddisfatto.
   ========================================================================== */
.pwd-req-title { margin: 6px 0 2px 0; font-size: .9rem; color: #212529; }
.pwd-req { list-style: none; margin: 0 0 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.pwd-req li { font-size: .9rem; line-height: 1.5; color: #5a5a5a; white-space: nowrap; }
.pwd-req li i { width: 1.2em; text-align: center; margin-right: 2px; }
.pwd-req li.ok { color: #1e7e34; }
@media (prefers-reduced-motion: no-preference) {
    .pwd-req li { transition: color .15s ease; }
}

/* ==========================================================================
   Messaggi di errore dei campi con un tasto accanto (es. password con
   "mostra/nascondi"): il messaggio va sotto, a tutta larghezza, senza
   spostare il tasto a capo.
   ========================================================================== */
.input-group > [id$="-error"] {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
}

/* Carrello: il tasto - (quantita' minima) e il tasto + (quantita' massima) non vengono mostrati quando
   sono disattivati. Restano nella pagina e mantengono il loro spazio, cosi' la casella non si sposta. */
form.cart .quantity .minus:disabled,
form.cart .quantity .plus:disabled { visibility: hidden; }

/* ==========================================================================
   Schede prodotto ed etichette come in RGV (Porto 9.5).
   Porto 12 non ha piu' .badge-success/.badge-warning/.badge-danger e mette
   sotto le immagini un fondo azzurrino (#F7F9FC): qui tornano i valori di RGV.
   ========================================================================== */
.badge-success { background-color: #28a745; color: #FFF; }
.badge-warning { background-color: #ffc107 !important; color: #555 !important; text-transform: uppercase; }
.badge-danger { background-color: #dc3545; color: #FFF; }
.badge-info { background-color: #17a2b8; color: #FFF; }
.badge-dark { background-color: #212529; color: #FFF; }

.product .product-thumb-info { background: #ffffff; }

.price del { color: #555; font-size: 0.85em; }
.price .sale + .amount { font-size: 0.85em; }

.shop_table td { padding: 15px 5px; }
.shop_table .product-thumbnail .product-thumbnail-wrapper .product-thumbnail-remove { font-size: 1rem; width: 24px; height: 24px; }

.pagination > li > a, .pagination > li > span { cursor: pointer; }
.radiobig { height: 25px; width: 25px; margin-right: 5px; }

ul.nav-list li a { padding: 8px 0 8px 22px; font-size: 0.9em; }
ul.nav-list li a:before { top: 8px; left: 4px; }
aside ul.nav-list > li > a { color: #666; font-size: 1.04em; padding: 8px 0 8px 12px; }

@media (max-width: 767px) {
    .shop table.cart .product-thumbnail { width: 7%; }
    .shop .quantity { margin: 0 5px 15px 0; width: 75px; }
    .shop .quantity.quantity { height: 25px; }
    .shop .quantity.quantity .minus,
    .shop .quantity.quantity .plus { height: 25px; width: 25px; }
    .shop .quantity.quantity .qty { height: 25px; width: 75px; padding: 0 25px; margin-left: 0; }
}

/* Pannello "Filtra" delle categorie (#fQuick0, #fQuick1...): in Porto 12 .toggle-quaternary usa il colore
   quaternary del sito, che in Value Store e' quasi bianco: titoli, quadratini con il + e opzioni si leggono in scuro */
[id^="fQuick"] .toggle-quaternary .toggle .toggle-content label { color: #212529; }
[id^="fQuick"] .toggle-quaternary .toggle > .toggle-title,
[id^="fQuick"] .toggle-quaternary .toggle.active > .toggle-title { color: #212529; background-color: transparent; }
[id^="fQuick"] .toggle-quaternary.toggle-simple .toggle > .toggle-title:after { background-color: #e9ecef; }
[id^="fQuick"] .toggle-quaternary.toggle-simple .toggle > .toggle-title:before { color: #212529; }

/* Pagina Shop (/it/shop.html, shop-products.asp): il nome della categoria va sotto l'immagine, su una fascia
   bianca, e non sopra la foto (in RGV si leggeva solo perche' le sue immagini hanno molto bianco in basso).
   Passando sopra con il mouse resta l'effetto di Porto: foto scurita con descrizione e pulsante "Scopri". */
.shop-categorie .thumb-info.thumb-info-swap-content .thumb-info-wrapper { padding-bottom: 64px; background: #fff; }
.shop-categorie .thumb-info.thumb-info-swap-content .thumb-info-wrapper > img.pb-3 { padding-bottom: 0 !important; }
.shop-categorie .thumb-info.thumb-info-swap-content .thumb-info-title.bottom-30 { bottom: 12px !important; }

/* Scheda prodotto: logo della marca sotto il titolo, con link alla pagina della marca */
.scheda-marca-logo { display: block; width: auto; height: auto; max-width: 120px; max-height: 60px; }

/* Pagina della marca: intestazione chiara con il logo della marca come sfondo, testi scuri */
.page-header-marca h1,
.page-header-marca .sub-title,
.page-header-marca .fa-store,
.page-header-marca .breadcrumb li,
.page-header-marca .breadcrumb li a,
.page-header-marca .breadcrumb > li + li:before { color: #212529 !important; }
/* il logo della marca si ripete nell'intestazione e scorre lentamente (in loop); fermo per chi ha chiesto
   meno movimento (sistema operativo o opzione "Riduci animazioni" del pannello di accessibilita') */
.page-header-marca {
    background-repeat: repeat !important;
    background-size: 200px auto !important;
    animation: marca-logo-scorre 40s linear infinite;
}
@keyframes marca-logo-scorre {
    from { background-position: 0 50%; }
    to { background-position: -400px 50%; }
}
@media (prefers-reduced-motion: reduce) { .page-header-marca { animation: none; } }
body.stop-animations .page-header-marca { animation: none; }

/* Pannello laterale "Richiedi informazioni": titolo compatto */
.side-panel-wrapper #pannello-contatti-titolo { font-size: 1rem; line-height: 1.4; letter-spacing: 0; padding-right: 30px; }

/* Confezioni (10/2026): scelta pezzo singolo / confezione intera nella scheda, etichetta nel carrello, nota negli elenchi */
.shop-conf { border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; padding: .5rem .75rem; }
.shop-conf legend { float: none; width: auto; font-size: .75rem; margin-bottom: .25rem; }
.shop-conf .form-check { margin-bottom: .25rem; }
.shop-conf .form-check-label { cursor: pointer; }
.shop-conf-riga { color: #6c757d; }
/* dentro .price (text-5) eredita il testo grande del prezzo: dimensione fissa e piccola */
.price .shop-nota-conf, .shop-nota-conf { color: #6c757d; font-size: .7rem !important; font-weight: 400 !important; line-height: 1.3; letter-spacing: 0; margin-top: 6px; }
/* Avvisi del sito nella barra in alto (SitoAvvisiHeader): il testo scritto con l'editor resta sulla stessa riga del titolo */
.avviso-top-riga + .avviso-top-riga { margin-top: 4px; }
.avviso-top-testo, .avviso-top-testo p, .avviso-top-testo span, .avviso-top-testo div { font-size: inherit !important; line-height: inherit !important; color:#ffffff; }
.avviso-top-testo p { display: inline; margin: 0; }
.avviso-top-testo a { color: inherit; text-decoration: underline; }