html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
.logo-elise {
    font-family: 'Serathine', cursive; /* cursive come fallback */
    font-weight: bold; /* se vuoi uno stile pił elegante */
    font-size: 3.0rem;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
/* Centra tutto il brand */
.navbar-brand {
    text-align: center;
}
html {
  position: relative;
  min-height: 100%;
}
.navbar-nav {
    justify-content: center;
}
body {
    margin-bottom: 60px;

    @media (max-width: 768px) {
        .hero {
            min-height: 50vh;
        }
    }
}
body
{
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Oppure solo per mobile */
@media (max-width: 992px) {
    .navbar {
        border-bottom: none;
        background: transparent;
    }
}
.brand-accent {
    color: #e83e8c;
}
/* Hero con margine per lasciare spazio al pulsante hamburger */
.hero {
    position: relative;
    min-height: 65vh;
    background-image: url('../images/day.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    margin-top: -40px; /* spazio sopra per il pulsante */
}

.navbar-toggler {
    z-index: 2000; /* sopra overlay e immagine */
    top: -15px !important; /* alza il pulsante di 15px */
}
 
}

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        z-index: 1000; /* overlay sotto il pulsante */
    }



.hero-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    padding: 2rem;
}

/* Horizontal product scroller */
.product-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 75%; /* mobile: big cards */
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.product-card {
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .product-scroller {
        grid-auto-columns: 45%;
    }
}

@media (min-width: 768px) {
    .product-scroller {
        grid-auto-columns: 30%;
    }
}

@media (min-width: 1200px) {
    .product-scroller {
        grid-auto-columns: 22%;
    }
}

.shadow-soft {
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.price {
    font-weight: 600;
}

/* Hide default scrollbar in webkit for a cleaner look */
.product-scroller::-webkit-scrollbar {
    height: 10px;
}

.product-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.product-scroller::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 6px;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

    .card:hover {
        transform: translateY(-5px);
    }

    .card img {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        height: 250px;
        object-fit: cover;
    }

.price {
    color: #d4af37;
    font-weight: bold;
    font-size: 1.2rem;
}


/* Tooltip personalizzato */
.tooltip .tooltip-inner {
    background-color: #333;   /* sfondo scuro elegante */
    color: #fff;              /* testo bianco */
    font-weight: 500;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;       /* bordi arrotondati */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Freccetta tooltip */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #333 !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #333 !important;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #333 !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #333 !important;
}



@media (max-width: 768px) {
    #tabCarrello thead {
        display: none;
    }

    #tabCarrello tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
    }

    #tabCarrello tbody td {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border: none;
    }

        #tabCarrello tbody td::before {
            content: attr(data-label);
            font-weight: bold;
        }

        #tabCarrello tbody td img {
            margin-right: 10px;
        }
}
.cart-full svg path {
/*    fill: pink !important;*/
}

#cartBadge {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
}