/* Lettertypes inladen */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #f7f8f9; }
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }

/* De Rode Bestel Knop */
.btn-slowdown { 
    background-color: #9F1D22; color: #fff !important; padding: 12px 24px; 
    border-radius: 4px; text-decoration: none; font-weight: bold; 
    display: inline-block; text-transform: uppercase; font-size: 14px; 
    border: none; cursor: pointer; transition: 0.3s;
}
.btn-slowdown:hover { background-color: #7a1519; }

/* De Producten Layout (Horizontaal zoals screenshot) */
.sd-product-row { 
    display: flex; gap: 40px; margin-bottom: 60px; align-items: center; 
    background: #fff; padding: 30px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.sd-product-image { flex: 0 0 270px; }
.sd-product-image img { width: 100%; height: auto; border-radius: 8px; }
.sd-product-info h3 { font-size: 26px; color: #222; margin-bottom: 15px; }
.sd-product-info p { color: #555; line-height: 1.6; }

/* Lijstjes (Sterkte, Arabica etc) */
.sd-product-info ul { list-style: none; padding-left: 0; margin-bottom: 25px; }
.sd-product-info ul li { position: relative; padding-left: 25px; margin-bottom: 8px; color: #333; }
.sd-product-info ul li::before { 
    content: "•"; position: absolute; left: 0; color: #9F1D22; font-size: 20px; line-height: 1; 
}

/* Mobiel */
@media (max-width: 768px) { 
    .sd-product-row { flex-direction: column; text-align: left; gap: 20px; padding: 20px;} 
    .sd-product-image { flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0 auto; }
}

/* Slider CSS (Van de originele site) */
.lhs-hero{ position:relative; overflow:hidden; width:100%; background:#000; aspect-ratio: 1920 / 520; }
.lhs-track{position:relative;height:100%}
.lhs-slide{ display:block; position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.lhs-slide.is-active{opacity:1;pointer-events:auto}
.lhs-img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; z-index:0; }
.lhs-nav{ 

position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: 0;
    background: rgba(0, 0, 0, .35);
    color: #fff !important;
    width: 44px;
    height: 44px;
    border-radius: 999px !important;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .35) !important;
    padding: 5px !important;
}
.lhs-prev{left:14px} .lhs-next{right:14px}

/* --- Super Moderne Bootstrap 5 Cards --- */
.sd-modern-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.02);
    overflow: hidden;
}

.sd-modern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(159, 29, 34, 0.08); /* Subtiele rode gloed */
}

.sd-img-wrapper {
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.sd-img-wrapper img {
    max-height: 280px;
    object-fit: contain;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.1)); /* Realistische product schaduw */
}

.sd-modern-card:hover .sd-img-wrapper img {
    transform: scale(1.05); /* Zoomt iets in bij hover */
}

.sd-modern-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111!important;
    margin-bottom: 1rem;
}

.sd-modern-card p {
    color: #555!important;
    font-size: 0.95rem;
    line-height: 1.6;
}

.sd-btn-modern {
    background-color: #9F1D22;
    color: #ffffff !important;
    border: 2px solid #9F1D22;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.sd-btn-modern:hover {
    background-color: transparent;
    color: #9F1D22 !important;
}

/* Bolletjes lijst in de kaart */
.sd-modern-card ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.sd-modern-card ul li { position: relative; padding-left: 20px; margin-bottom: 6px; font-size: 0.9rem; color: #444; }
.sd-modern-card ul li::before { 
    content: "•"; position: absolute; left: 0; color: #9F1D22; font-weight: bold; font-size: 1.2rem; line-height: 1.2; 
}

/* =========================================================
   MOBIELE MENU FIX VOOR SLOWDOWN COFFEE (Donkere Header)
   ========================================================= */
@media (max-width: 991px) {
    /* 1. Maak de achtergrond van het mobiele uitklapmenu massief wit */
    #sdNavbar {
        background-color: #ffffff !important;
        padding: 15px !important;
        border-radius: 0 0 12px 12px !important; /* Mooie afgeronde hoeken onderaan */
        box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
        
        /* Zorgt dat hij mooi over de slider heen valt */
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        top: 100% !important;
        z-index: 9999 !important;
    }

    /* 2. Normale links donkergrijs/zwart maken voor perfect contrast */
    .sd-navbar .sd-nav-link {
        color: #111111 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: block !important;
    }

    /* 3. De rode hover/active state (is nu perfect leesbaar op wit) */
    .sd-navbar .sd-nav-link:hover, 
    .sd-navbar .sd-nav-link.active {
        color: #9F1D22 !important; 
        background-color: #fdfdfd !important;
    }

    /* 4. Dropdown (sub-items zoals de smaken) een subtiele grijze tint geven */
    .sd-navbar .dropdown-menu {
        background-color: #f9f9f9 !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    .sd-navbar .dropdown-item {
        color: #444444 !important;
        padding: 12px 35px !important; /* Iets meer inspringen */
        font-size: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .sd-navbar .dropdown-item:hover {
        color: #9F1D22 !important;
        background-color: #ffffff !important;
    }
    
    /* 5. Winkelmandje tekst + icoon leesbaar maken */
    .sd-navbar .sd-cart {
        color: #111111 !important;
        padding: 15px 20px !important;
        display: inline-flex !important;
        width: 100% !important;
    }
    .sd-navbar .sd-cart:hover {
        color: #9F1D22 !important;
    }
}
/* =========================================================
   HAMBURGER ICOON FIX (Witte streepjes op zwarte header)
   ========================================================= */
@media (max-width: 991px) {
    /* 1. Forceer een 100% witte SVG voor de hamburger streepjes */
    .sd-navbar .navbar-toggler-icon {
        background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e) !important;
         filter: none !important; 
    }

    /* 2. Zorg dat de knop zelf geen lelijke rand krijgt bij het klikken */
    .sd-navbar .navbar-toggler {
        border: 1px solid #050505 !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }
    
    /* 3. Haal die lelijke blauwe of zwarte glow weg als je er met je vinger op tikt */
    .sd-navbar .navbar-toggler:focus,
    .sd-navbar .navbar-toggler:active {
        box-shadow: none !important;
        outline: none !important;
    }
}