/* --- BASISHUISSTIJL & AANPASSINGEN --- */

    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

    body {
        color: #202020;
        background-color: #fff;
        /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;*/
        font-family:  "Nunito", sans-serif;
        /*"Comfortaa", sans-serif; "Nunito", sans-serif; "Fredoka", sans-serif; Raleway,sans-serif;*/
        margin: 0;
    }

    h1, h2, h3, h4, h5, h6{
        color: #ff0000;
        font-weight: 700;
    }

    .cookies__actions form button,
    .cookies__actions button {
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        font: inherit !important;
        width: 100%;
        height: 100%;
        padding: 0.5rem 1rem;
        cursor: pointer;

    }

    #cookies-policy .cookiesBtn__link{
        padding: 0 !important;
    }

    #cookies-policy .cookies__category input:checked+.cookies__box:after {
        background: #ff0000 !important;
        opacity: 1;
    }

    .text-outline-white {
        -webkit-text-stroke: 4px #ffffff; 
        /* Dwing de browser om de vulling over de rand te tekenen */
        paint-order: stroke fill;
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4));
    }

    .text-outline-white-fat {
        -webkit-text-stroke: 7px #ffffff; 
        /* Dwing de browser om de vulling over de rand te tekenen */
        paint-order: stroke fill;
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4));
    }

    .text-bg-white{
        background-color: rgba(255,255,255,0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: 6px;
        padding: 6px 16px;
        display: inline-block;
    }

    .text-red{
        color: #ff0000;
    }

    /* --- NAVIGATIE CONTAINER & BREAKPOINTS --- */
    .navigation {
        position: sticky;
        top: 0;
        z-index: 1000;
        /*background: #1a1919;*/
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease-in-out;
    }

    .navigation.is-hidden {
        transform: translateY(-100%);
    }

    /* Bovenste balk (Topbar) */
    .top-bar {
        /*background-color: #242222;*/
        background-color: #fff;
        height: 2rem;
        font-size: 0.75rem;
        /*color: #d1d1d1;*/
        color: #202020;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .top-bar-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    /* Hoofdbalk (Mainbar) */
    .main-bar {
        /*background-color: #1a1919;*/
        background-color: #fff;
        height: 3.5rem;
        display: flex;
        align-items: center;
        border-radius: 0px 0px 16px 16px;
    }

    @media (min-width: 1280px) {
        .top-bar { height: 3rem; font-size: 0.85rem; }
        .main-bar { height: 4.5rem; }
    }

    /* Logo Styling */
    .brand-logo {
        display: block;
        height: 44px;
        width: 120px;
        background: url(/img/hupple_logo.svg);
        background-repeat: no-repeat;
        background-size: 120px;
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));

    }

    /* --- HEADER BLOCK STYLING (Hoofdmenu & Iconen) --- */
    .header-block-link,
    .top-bar-block-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        /*color: #ffffff;*/
        color: #202020;
        text-decoration: none;
        padding: 0 1.25rem;
        font-size: 0.85rem;
        letter-spacing: 0.03em;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .top-bar-block-link {
        /*color: #d1d1d1;*/
        color: #202020;
        font-size: 0.8rem;
        padding: 0 1rem;
    }

    .header-block-link.px-2 {
        padding: 0 0.75rem;
    }

    .header-block-link:hover,
    .header-block-link:focus,
    .top-bar-block-link:hover,
    .top-bar-block-link:focus {
        /*background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;*/
        background-color: rgba(255, 0, 0, 0.05);
        color: #ff0000;
    }

    /* De witte lijn ONDERAAN het block */
    .header-block-link::after,
    .top-bar-block-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ff0000;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        pointer-events: none;
    }

    .header-block-link:hover::after,
    .header-block-link:focus::after,
    .header-block-link.active::after,
    .top-bar-block-link:hover::after,
    .top-bar-block-link:focus::after {
        transform: scaleX(1);
    }

    /* Wrapper specifiek voor iconen */
    .icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .cart-badge {
        position: absolute;
        bottom: -6px;
        right: -10px;
        background-color: #ff0000;
        border: 2px solid #fff;
        color: #fff;
        font-size: 0.65rem;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        line-height: 1;
        z-index: 2;
    }

    /* --- RESPONSIVE INDELINGEN --- */
    .top-bar-desktop { display: none; }
    .top-bar-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .main-bar-desktop { display: none; }
    .main-bar-tablet { display: none; }
    .main-bar-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    @media (min-width: 640px) {
        .main-bar-mobile { display: none; }
        .main-bar-tablet {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            width: 100%;
            height: 100%;
            align-items: center;
        }
    }

    @media (min-width: 1280px) {
        .top-bar-mobile { display: none; }
        .top-bar-desktop {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            width: 100%;
            height: 100%;
            align-items: center;
        }
        .main-bar-tablet { display: none; }
        .main-bar-desktop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
        }
    }

    /* --- OFFCANVAS / HAMBURGER MENU STYLING --- */
    .offcanvas-dark {
        background-color: #1a1919;
        color: #ffffff;
        width: 320px !important;
    }
    .offcanvas-dark .btn-close {
        filter: invert(1);
    }
    .menu-category-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #fff;
        text-decoration: none;
        font-size: 0.95rem;
    }

    .offcanvas-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .offcanvas-body::-webkit-scrollbar {
        width: 4px;
    }
    .offcanvas-body::-webkit-scrollbar-track {
        background: transparent;
    }
    .offcanvas-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    /* --- HERO BANNER & SWIPER --- */
    .heroBanner {
        position: relative;
        height: 512px;
        top: -20px;
    }
    @media (min-width: 640px) { .heroBanner { height: 504px; } }
    @media (min-width: 1024px) { .heroBanner { height: 480px; } }
    @media (min-width: 1280px) { .heroBanner { height: 560px; } }
    @media (min-width: 2560px) { .heroBanner { height: 800px; } }

    .hero-slide {
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: end;
        justify-content: center;
    }
    .hero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        /*background: rgba(0, 0, 0, 0.25);*/
        background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 40%);
        pointer-events: none;
    }
    .hero-caption {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #fff;
        max-width: 600px;
        padding: 0 20px;
        bottom: 50px;
    }

    /* --- PILL BUTTONS OVER HERO --- */
    .pill-container-wrapper {
        position: absolute;
        top: 26px;
        left: 0;
        right: 0;
        z-index: 20;
        pointer-events: none;
    }
    .pill-scroll-bar {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 15px;
        scrollbar-width: none;
        pointer-events: auto;
        cursor: grab;
        user-select: none;
    }
    .pill-scroll-bar:active {
        cursor: grabbing;
    }
    @media (min-width: 992px) {
        .pill-scroll-bar {
            justify-content: center;
        }
    }
    .pill-btn {
        background: rgba(26, 25, 25, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #ffffff;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 0.8rem;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: all 0.2s;
    }
    .pill-btn:hover {
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
    }

    /* --- HERO SWIPER CONTROLS --- */
    .hero-controls-bar {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        z-index: 20;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        pointer-events: none;
    }
    .hero-controls-bar * {
        pointer-events: auto;
    }
    .hero-swiper .swiper-pagination {
        position: static !important;
        display: flex;
        gap: 6px;
        width: auto !important;
    }
    .hero-swiper .swiper-pagination-bullet {
        background: #202020;
        opacity: 0.4;
        width: 6px;
        height: 6px;
        margin: 0 !important;
        transition: all 0.3s;
    }
    .hero-swiper .swiper-pagination-bullet-active {
        opacity: 1;
        transform: scale(1.3);
    }
    .hero-arrows {
        display: flex;
        gap: 8px;
    }
    .hero-arrow-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(0, 0, 0, 0.3);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
    }
    .hero-arrow-btn:hover {
        background: rgba(0, 0, 0, 0.7);
        border-color: #ffffff;
    }

    /* --- SEARCH OVERLAY STYLES --- */
    .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #ff0000;
        z-index: 2000;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);*/
        padding: 2rem 1rem 2.5rem 1rem;
    }
    .search-overlay.is-active {
        transform: translateY(0);
    }
    .search-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .search-backdrop.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    .search-input-wrapper {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
    }
    .search-input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        color: #ffffff;
        font-size: 1.4rem;
        /*font-family: Georgia, 'Times New Roman', serif;*/
        padding: 12px 45px 12px 40px;
        outline: none;
        transition: border-color 0.2s;
    }
    .search-input:focus {
        border-bottom-color: #ffffff;
    }
    .search-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
        /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;*/
        font-size: 1rem;
    }
    .search-icon-inside {
        position: absolute;
        left: 0;
        top: 66%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 1);
        pointer-events: none;
    }
    .search-close-btn {
        position: absolute;
        right: 0;
        top: 66%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #ffffff;
        opacity: 0.9;
        padding: 8px;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.2s;
    }
    .search-close-btn:hover {
        opacity: 1;
        transform: translateY(-50%) rotate(90deg);
    }
    .popular-searches {
        max-width: 800px;
        margin: 1.5rem auto 0 auto;
    }
    .search-tag {
        display: inline-block;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 0.8rem;
        padding: 5px 14px;
        border-radius: 20px;
        text-decoration: none;
        margin-right: 8px;
        margin-bottom: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s;
        cursor: pointer;
    }
    .search-tag:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    /* --- TAAL & REGIO OVERLAY STYLES --- */
    .language-modal .modal-content {
        background-color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        color: #202020;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    }
    .language-modal .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1.25rem 1.5rem;
    }
    .language-modal .btn-close-white {
        filter: invert(0) grayscale(100%) brightness(200%);
        opacity: 0.7;
        transition: opacity 0.2s, transform 0.2s;
    }
    .language-modal .btn-close-white:hover {
        opacity: 1;
        transform: rotate(90deg);
    }
    .language-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #202020;
        text-decoration: none;
        transition: all 0.25s ease;
        cursor: pointer;
    }
    .language-option:hover {
        background: rgba(0, 0, 0, 0.12);
        border-color: rgba(0, 0, 0, 0.3);
        color: #202020;
        transform: translateY(-1px);
    }
    .language-option.is-active {
        background: rgba(255, 0, 0, 0.18);
        border-color: rgba(255, 0, 0, 0.18);
        color: #202020;
        font-weight: 500;
    }
    .language-flag {
        font-size: 1.25rem;
        margin-right: 12px;
        line-height: 1;
    }

    /* --- STORY FADE SLIDER STYLING --- */
    .story-fade-swiper, .lifestyle-fade-swiper {
        width: 100%;
        height: 420px; /* Aanpasbare hoogte */
        position: relative;
    }

    .story-fade-swiper .swiper-slide, .lifestyle-fade-swiper .swiper-slide {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .story-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Gradient overlay onder de tekst voor betere leesbaarheid */
    .story-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px 24px 20px 24px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
        color: #ffffff;
        z-index: 2;
    }

    .story-tag {
        display: inline-block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 4px;
    }

    .story-title {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0;
        line-height: 1.3;
    }

    /* Afbeelding container styling */
    .img-wrapper {
      aspect-ratio: 1 / 1; /* Standaard vierkant (voor desktop en mobiel blok 1 & 2) */
      overflow: hidden;
    }

    .impact-img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Zorgt dat de afbeelding niet vervormt maar netjes bijsnijdt */
      display: block;
    }

    /* Op mobiel krijgt de 3de afbeelding een bredere banner-verhouding */
    @media (max-width: 767.98px) {
      .col-12 .img-wrapper {
        aspect-ratio: 21 / 9; /* Liggende banner verhouding op mobiel */
      }
    }

    /* Strikte stijlen voor de minimalistische knoppen */
    /*.btn-outline-dark {
      letter-spacing: 1px;
      font-size: 0.75rem;
      padding-top: 10px;
      padding-bottom: 10px;
      border-color: #333;
    }*/
    .bg-red{
        background-color: #ff0000;
    }

    .btn-outline-danger{
        letter-spacing: 1px;
        font-size: 0.75rem;
        padding-top: 10px;
        padding-bottom: 10px;
        border-color: #FF0000;
        color: #FF0000;
      
    }

    .btn-outline-danger:hover{
        background-color: #ff0000;
    }

    .btn-danger{
        letter-spacing: 1px;
        font-size: 0.75rem;
        padding-top: 10px;
        padding-bottom: 10px;
        border-color: #fff;
        border: 2px solid;
        color: #fff;
        background-color: #ff0000;
    }

    .btn-danger:hover{
        background-color: #fff;
        color: #ff0000;
        border-color: #ff0000;
    }

    .btn-shadow{
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4));
    }

    .product-img-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1; /* Houdt de afbeeldingen altijd netjes vierkant */
    }

    .classics-img-wrapper {
        position: relative;
        width: 100%;
    }

    .product-card-swiper {
        width: 100%;
        height: 100%;
    }

    .product-card-swiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- 1. RONDE NAVIGATIEKNOPPEN --- */
    .custom-swiper-nav .swiper-button-prev,
    .custom-swiper-nav .swiper-button-next {
        position: static; /* Haalt de standaard absolute positionering weg */
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 50%;
        border: 1px solid #d3d3d3;
        background-color: #ffffff;
        color: #111111;
        transition: all 0.2s ease-in-out;
    }

    /* Pijltjes in de knoppen schalen */
    .custom-swiper-nav .swiper-button-prev::after,
    .custom-swiper-nav .swiper-button-next::after {
        font-size: 13px;
        font-weight: bold;
    }

    /* Hover effect voor de knoppen */
    .custom-swiper-nav .swiper-button-prev:hover,
    .custom-swiper-nav .swiper-button-next:hover {
        border-color: #111111;
        background-color: #111111;
        color: #ffffff;
    }

    /* Vervaagde knop als je aan het begin/einde bent */
    .custom-swiper-nav .swiper-button-disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* --- 2. RITUALS INDICATIEBALK (SCROLLBAR) --- */
    .custom-scrollbar-wrapper {
        height: 2px;
        background-color: #e5e5e5; /* Lichte achtergrondlijn */
        position: relative;
    }

    .custom-scrollbar-wrapper .swiper-scrollbar {
        position: static;
        height: 2px;
        background: transparent;
        border-radius: 0;
    }

    /* De zwarte actieve indicator die verschuift */
    .custom-scrollbar-wrapper .swiper-scrollbar-drag {
        background: #111111;
        border-radius: 0;
        height: 2px;
    }

    .classic-img-top{
        width:100%;
    }

    @media (min-width: 640px) { .classic-img-top { width: 70%; } }