/*
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*/
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;   /* range completo disponibile */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Philosopher';
    src: url('../fonts/philosopher/Philosopher-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Philosopher';
    src: url('../fonts/philosopher/Philosopher-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.color1 { color: #6C9DA7 !important; }
.color2 { color: rgba(108,157,167, .1) !important; }
.color3 { color: #F9FEFF !important; }
.color4 { color: #E9A326 !important; }
.color5 { color: #2F4D51 !important; }
.color6 { color: rgba(243, 204, 137,.5) !important; }
.color6 { color: rgba(108,157,167, .3) !important; }
.color7 { color: #ffffff !important; }
.color8 { color: rgba(249, 254, 255,.5) !important; }
.philosopher { font-family: 'Philosopher', Helvetiva, Arial, sans-serif; }
.nunito { font-family: 'Nunito', Helvetiva, Arial, sans-serif; }

body { font-family: 'Nunito', Helvetiva, Arial, sans-serif; font-size: 18px; font-weight: 400; background-color: #F9FEFF; }
.skip-link { text-align: center; display: block;  width: 100%; background-color: #2F4D51; color: #ffffff; }
:focus-visible, button:focus, button:focus-visible, .btn:focus, .btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: #2F4D51; background-color: transparent !important; box-shadow: none; }
.form-control:focus, .form-control:focus-visible { border-color: #2F4D51; box-shadow: none; background-color: #f6f6f6; }
.btn:focus-visible { border-color: transparent;}
header {
    background-color: #6C9DA7;
    background-image: url(../img/header-express.webp);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
}
.header { }
.header .container { position: relative; }
.maintitle { text-indent: -9999px; }
/*
.claim { position: absolute; top: 50%; right: 50px; width: 350px; text-align: center; font-size: 2.5em; color: #ffffff; line-height: normal; text-shadow: 1px 1px 2px #6C9DA7; }
*/
.claim { width: 100%; position: relative; overflow: auto; height: 200px; margin-top: 10px; }
.claim-text { position: absolute; top: 0; right: 30px; width: 350px; text-align: center; font-size: 2.5em; color: #ffffff; line-height: normal; text-shadow: 1px 1px 2px #6C9DA7; margin-right: 0; }
/*
.lead { position: absolute; bottom: 0; left: 0; }
*/
.lead { width: 100%; position: relative; overflow: auto; }
.lead img { display: block; width: 400px; }
.navbar { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #6C9DA7; margin-bottom: 0; }
.navbar a:focus, .navbar a:focus-visible { outline-color: #ffffff; outline-offset: 2px; outline-style: solid; outline-width: 2px; background-color: transparent; }
#mainHeader {
    transition: opacity .25s ease;
}
#mainHeader.is-hidden {
    opacity: 0;
    pointer-events: none; /* non intercetta click quando nascosto */
}

/* Mini bar sticky/fixed */
#miniBar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;           /* sopra il contenuto */
    background: #fff;        /* o il tuo colore */
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;     /* disattiva click quando nascosta */
}
#miniBar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Badge mini (coerente con quello grande) */
/*
#cartCountBadgeMini {
    top: -6px;
    right: -6px;
    background: #d9534f;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
}

 */
.titolo { font-size: 1.5em; margin-bottom: 0; line-height: normal; }
.btn-cart { width: 60px; height: 60px; padding: 0; border: 0; transition: all .3s }
.btn-cart:hover { width: 60px; height: 60px; padding: 0; border: 0; background: transparent; opacity: .8; }
.btn-cart img { width: 60px; height: 60px; }
.box-carrello {display: flex; justify-content: flex-end; align-items: center; width: unset; }
.text-mobile-cart { /*display: none;*/ }
.text-mobile-cart a { color: #ffffff; text-decoration: none; transition: all .3s; }
.text-mobile-cart:hover { opacity: .8; }
.add-cart-prod { text-decoration: none; text-decoration-color: transparent; text-decoration-thickness: unset;  }
#cartCountBadge, #cartCountBadgeMini { top: 50%; left: 50%; transform: translateX(-50%); font-size: 1em; line-height: normal; text-align: center; color: #ffffff; text-shadow: 1px 1px 2px #6C9DA7; padding: 0; }
#miniBar { background-color: #6C9DA7; }
#main-content { padding-left: 0 !important; padding-right: 0 !important; }
#dove { background-color: rgba(108,157,167, .1); padding: 30px; }
.dove-block1, .dove-block2 { font-size: 2.2em; line-height: normal; }
.dove-block3 { font-size: 1.8em; line-height: normal; }
#featured { padding: 40px; }
.featured-title { font-size: 1.8em; line-height: normal; margin-bottom: 30px; }
.card-brand { background-position: center; background-size: 80%; border-radius: 10px; border: 2px solid #6C9DA7 !important; }
.card-brand a { display: block; height: 80px;}
.card-brand.is-dimmed { opacity: .4; }
.card-brand.is-active { opacity: 1; border: 2px solid #E9A326 !important; }
#oppure { padding: 0 30px 30px 30px; }
#oppure h2 {font-size: 1.8em; line-height: normal;}
#filtersForm { gap: 20px; }
.blocco-filtro { background-color: #ffffff; border-radius: 10px; border: 2px solid #6C9DA7; padding: 20px; min-height: 160px; }
.label-filtro { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px }
.label-filtro-prezzo { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 14px }
.ordinario { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #6C9DA7; padding: 10px; font-size: 1.2em; line-height: normal; font-weight: 600; margin-right: 20px;}
.blocco-filtro-text { font-size: 1.2em; line-height: normal; font-weight: 600; }
.btn-cat-off { color: #6C9DA7; font-size: 1em; transition: all .3s;}
.btn-cat-off:hover { background-color: rgba(233, 161, 38,.5); color: #6C9DA7;}
.btn-cat-on { background-color: rgba(233, 161, 38,.5); font-size: 1em; color: #6C9DA7; transition: all .3s; }
.btn-cat-on:hover { background-color: #6C9DA7; color: #ffffff; }
#prod-grid { padding: 30px 0; }
.min-max div { color: #6C9DA7; font-size: .9em; line-height: normal; font-weight: normal; margin-bottom: 10px; }
.btn-filter { background-color: #6C9DA7; color: #ffffff; border-radius: 5px; border: 1px solid #6C9DA7; margin-bottom: 30px; transition: all .3s; }
.btn-filter:hover { background-color: #ffffff; color: #6C9DA7; border-radius: 5px; border: 1px solid #6C9DA7; margin-bottom: 30px; }
.btn-reset { background-color: #ffffff; color: #2F4D51; border-radius: 5px; border: 1px solid #2F4D51; transition: all .3s; }
.btn-reset:hover { background-color: #2F4D51; color: #ffffff; border-radius: 5px; border: 1px solid #2F4D51; }
#gridContainer>div { margin-bottom: 30px; }
/*
.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    right: -17px;
    top: -2px;
    border-radius: 50%;
    background: #6C9DA7;
}
.noUi-handle:after, .noUi-handle:before { background: transparent; }
.noUi-connect { background-color: #6C9DA7 !important; }
*/
.contatori { margin: 20px 20px 40px 20px; padding: 20px; border: 2px solid #6C9DA7; background-color: #ffffff; border-radius: 10px;}
#gridContainer .card-product { background-color: transparent; border: 0; }
.header-card-prod { min-height: 110px;}
.brand-name { font-size: 1.6em; line-height: normal; font-weight: 700; }
h3.card-title { font-size: 1.09em; line-height: normal; font-weight: 400; }
/*.img-card-prod { border-radius: 20px; border: 2px solid #6C9DA7; }*/
.img-card-prod img { border-radius: 10px; border: 2px solid #6C9DA7; }
.footer-car-prod { width: 96%; margin: 10px 2% 0 2%;  }
.prezzo { font-size: 1.2em; line-height: normal; font-weight: 700; margin-top: 5px; }
.btn-link { text-decoration-color: transparent; text-decoration-thickness: unset; text-decoration: none; }
.btn-link i { font-size: 2.5em; line-height: normal; font-weight: 700; color: #6C9DA7; text-decoration-color: transparent; }
.heart i { margin-left: 10px;}
.text-selected-prod { color: #E9A326 !important; opacity: 1;}
.btn-command {
    background-color: #E9A326 !important;
    color: #ffffff !important;
    border: 0;
    font-size: 1.2em;
    line-height: normal;
    padding: 10px 20px;
    transition: all .3s;
}
.btn-command:hover { background-color: #E9A326 !important; color: #ffffff !important; opacity: .8; }
.page-footer { background-color: #6C9DA7; padding: 30px; margin-top: 80px; }
.page-footer .container {  }
.page-footer .col-12 { display: flex; justify-content: flex-start; align-items: center; }
.logo-footer { max-width: 200px; margin-right: 30px; }
.logo-footer img { width: 200px; }
.indirizzo-footer { font-size: .9em; line-height: normal; font-weight: 400; color: #ffffff; }
.footer-copy { padding: 20px; background: #F9FEFF; }
.footer-copy .row div { font-size: .8em; color: #2F4D51; }
.footer-copy .row div a { color: #6C9DA7; text-decoration: underline; transition: all .3s; }
.footer-copy .row div a:hover { color: #E9A326; text-decoration: underline; }
.footer-copy .row div a:focus, .footer-copy .row div a:focus-visible { outline-color: #2F4D51; outline-offset: 2px; outline-width: 2px; outline-style: solid;  }





.card-product .brand { font-weight:600; font-size:.9rem; text-transform:capitalize; }
.card-product .heart { cursor:pointer; display: flex; align-items: center; }
.price-range { display:flex; gap:.5rem; align-items:center; }

#priceSlider { margin: .25rem 5% 0.5rem 5%; width: 90% }
.noUi-target { box-shadow: none; border: 1px solid #dee2e6; }
.noUi-connect { background: var(--bs-primary); }
.noUi-handle { box-shadow: none; border: 1px solid #adb5bd; }

/* traccia esterna: 2px, colore */
#priceSlider.noUi-target{
    background: #6C9DA7;
    border: 0;
    box-shadow: none;
    height: 2px;
    border-radius: 4px;
    position: relative;
}

/* lascia passare l'extra spessore della connect */
#priceSlider .noUi-connects{
    overflow: visible; /* <-- fondamentale */
}

/* segmento tra le maniglie: 8px, centrato verticalmente */
#priceSlider .noUi-connect{
    background: #6C9DA7;
    height: 8px;                /* spessore richiesto */
    /*top: 50%;*/
    top: calc(50% - 5px);
    transform: translateY(-50%);/* centra rispetto alla traccia da 2px */
    border-radius: 4px;
    z-index: 1;
}

/* maniglie tonde */
#priceSlider .noUi-handle{
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #6C9DA7;
    border: 2px solid #6C9DA7;
    box-shadow: none;
    top: calc(50% - 11px);
    /*top: calc(50% - 9px);*/
    right: -9px;
    cursor: pointer;
    z-index: 2;
}
#priceSlider .noUi-handle:before,
#priceSlider .noUi-handle:after{ display:none; }

/* bolle sotto le maniglie (se usi le “bubbles”) */
#priceSlider .slider-bubble{
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .8rem;
    color: #6C9DA7;
    pointer-events: none;
    background: transparent;
}



.card-product .heart i.bi-heart-fill { color: var(--bs-danger); }
.cat-chip-remove { cursor: pointer; opacity: .9; font-weight: 700; }
.cat-chip-remove:hover { opacity: 1; }


/* CART */
.titolo-cart { font-size: 1.8em; line-height: normal; font-weight: 600; margin-top: 20px; margin-bottom: 20px; }
.btn-cart i { font-size: 3em; line-height: normal; font-weight: 700; color: #ffffff; cursor: pointer; }
.riga-cart-prod { background-color: #ffffff; border-radius: 10px; padding: 20px; border: 2px solid #6C9DA7; margin-bottom: 20px; }
.cart-img-prod img { border-right: 2px solid #6C9DA7; }
.cart-data-prod { position: relative; }
.cart-data-prod .box { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 15px; }
.cart-brand-prod { font-weight: 700; margin-bottom: 5px; font-size: 1.3em; line-height: normal; }
.cart-name-prod { font-size: 1.1em; line-height: normal; font-weight: 400; margin-bottom: 10px;}
.cart-desc-prod { font-size: .9em; line-height: normal; font-weight: 300;}
.cart-qty-prod { position: relative;}
.cart-qty-prod .box { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 15px; }
.cart-qty-prod label { font-size: .9em; line-height: normal; font-weight: 600; text-align: center; width: 100%; }
.cart-qty-prod input { width: 60%; margin: 10px 20%; border: 1px solid #6C9DA7; font-size: 2em; text-align: center; }
.cart-price-prod { font-size: .9em; line-height: normal; font-weight: 600; text-align: center; width: 100%; }
.cart-del-prod { position: relative;}
.cart-del-prod .box { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 15px; }
.box-sconto { margin-top: 60px;}
.totale-prodotti { font-size: 1.5em; line-height: normal; font-weight: 400; text-align: center; }
.totale-sconto { font-size: 1.5em; line-height: normal; font-weight: 400; text-align: center; }
.iva { color: #6C9DA7;}
.totale-totale { font-size: 2.3em; line-height: normal; font-weight: 400; text-align: center; }
.box-coupon { margin-top: 40px; margin-bottom: 30px; }
.box-coupon .input-group { align-items: center; }
.box-coupon label { width: 100%; font-size: 1.2em; line-height: normal; font-weight: 600; text-align: center; }
#couponCode { border-radius: 10px; border: 2px solid #6C9DA7; font-size: 1.2em; line-height: normal; margin-right: 10px; color: #2F4D51; padding: 10px 15px;  }
#applyCoupon { background: #6C9DA7; font-size: 1em; line-height: normal; color: #ffffff; border-radius: 10px; padding: 13px 20px; border: 2px solid #6C9DA7; transition: all .3s; }
#applyCoupon:hover { opacity: .8;}
#removeCoupon { font-size: 1em; line-height: normal; color: #2F4D51; border: 2px solid #2F4D51; border-radius: 10px; padding: 13px 20px; transition: all .3s;  }
#removeCoupon { background-color: transparent; color: #2F4D51; opacity: .8; margin-left: 10px;}
.btn-order button, .btn-send-form, .btn-404 { background-color: #E9A326 !important; color: #ffffff !important; border: 0; font-size: 1.2em; line-height: normal; padding: 10px 20px; transition: all .3s;  }
.btn-order button:hover, .btn-send-form:hover, .btn-404:hover { background-color: #E9A326 !important; color: #ffffff !important; opacity: .8;}
#checkout { margin-top: 80px; margin-bottom: 30px; }
#checkout input[type=text], #checkout input[type=email] {border-radius: 10px; border: 2px solid #6C9DA7; font-size: 1.2em; line-height: normal; padding: 10px 15px; color: #2F4D51; }
#checkout input[type=checkbox] {border-radius: 4px; border: 2px solid #6C9DA7; font-size: 1.2em; color: #2F4D51; }
#checkout textarea { border-radius: 10px !important; border: 2px solid #6C9DA7 !important; font-size: 1.2em !important; line-height: normal; padding: 10px 15px; color: #2F4D51}
#checkout .aceptance label { color: #2F4D51; }
#checkout .form-check { padding-left: 2.5em;}
.mess-ritiro {color: #2F4D51; font-size: 1.2em; line-height: normal; font-weight: 600; }
#orderAlert { text-align: center; }
.alert-info { border: 2px solid #6C9DA7; background: #ffffff; color: #6C9DA7; text-align: center; }
textarea#note::placeholder, input#couponCode::placeholder {
    opacity: 0.5;     /* opacità al 50% */
}
.form-check-label a { color: #6C9DA7; font-weight: 600; text-decoration: none; }
.form-check-label a:hover { opacity: .8;}


/* 404 */
#blocco-404 { width: 100%; min-height: 450px; margin-top: 120px; }
@media (max-width:1200px) {
    .titolo { width: 100%; text-align: center; }
    .navbar>.container { justify-content: flex-end; }
}

@media (max-width: 1024px) {
    header { background-position-x: -50px; background-image: url(../img/header-express-mobile.webp); }
    .claim { height: 150px; }
    .claim-text { width: 100%; font-size: 2em; right: 0; }
    .lead-img { text-align: center; }
    .lead-img img { width: 250px; display: unset; margin-top: 30px; }
    .navbar .container { text-align: center; }
    .box-carrello { width: 100%;  }
    .text-mobile-cart { display: block; font-size: 1.2em; line-height: normal; font-weight: 600; }
    p.titolo { margin-bottom: 20px;}
    .btn-cart { margin-left: 20px; margin-right: 10px;}
    .blocco-filtro {width: 95%; margin-left: auto; margin-right: auto;}

    .heart { display: flex; align-items: center; }
    .heart i { margin-left: 10px;}



    /* CART */
    .riga-cart-prod { width: 90%; margin-left: auto; margin-right: auto; }
    .titolo-cart { text-align: center; }
    .titolo-cart h2 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; font-size: calc(1.2rem + .9vw) }
    .cart-data-prod .box,.cart-qty-prod .box, .cart-del-prod .box { position: relative; }
    .cart-data-prod { margin-bottom: 30px; text-align: center; }
    .cart-img-prod { text-align: center; margin-bottom: 40px; }
    .cart-img-prod img { border-right: 0; width: 60%; margin: 0 auto; }
    .cart-del-prod .box { text-align: center; }
    .cart-del-prod .box .btn-link i { font-size: 2em; }
    .totale-prodotti, .totale-sconto { font-size: 1.2em; }
    .totale-totale { font-size: 1.7em; }
    #checkout { width: 90%; margin-left: auto; margin-right: auto; }
    #checkout input[type=text], #checkout input[type=email], #checkout textarea { font-size: 1em !important; }
    #checkout textarea { height: 120px; min-height: 120px; }
    .btn-send-form  { margin-top: 30px; }
    .page-footer .col-12 { flex-wrap: wrap; }
    .logo-footer { width:100%; max-width: unset; text-align: center; margin-bottom: 20px; }
    .indirizzo-footer { text-align: center; }
    .footer-copy .container .row div { text-align: center; margin-bottom: 15px; }


}