/* ============================================================================
   THEME DESKTOP — Desktop Overrides
   ============================================================================

   TABLE OF CONTENTS
   -----------------
   1.  BREAKPOINT 1280px    Hero Grid, Header Top Bar, Main Header,
                            Logo, Navigation, Submenu, CTA Buttons,
                            Search, Mobile Hidden, Mega Menu, Scroll State
   2.  BREAKPOINT 1180px    Mega Menu Override
   3.  BREAKPOINT 1280px    USP / Features Bar
   4.  BREAKPOINT 1280px    Bestsellers Slider
   5.  BREAKPOINT 1280px    About Stats
   6.  BREAKPOINT 1280px    Proces Stappen, Feedback, Content, Single Post,
                            Visit Showroom
   7.  BREAKPOINT 1440px    Hero Main Card Min-Width

   ============================================================================ */

/* ==========================================================================
   BREAKPOINT: 1024px
   ========================================================================== */
@media (min-width:1280px) {

    /* --- Hero Grid Overrides --- */
    .hero-grid-container {
        display: grid;        /* Verhouding: Links groot (1.8), Rechts kolom (1) */
        grid-template-columns: 1.8fr 1fr;        /* Harde hoogte voor de strakke bento-look op desktop */
        height: 37.5rem;
        gap: 1.5rem;
    }

    .hero-main-card {
        height: 100%;
    }

    .hero-content {
        padding: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
        max-width: 70%;        /* Voorkom dat tekst achter de knop loopt */
    }

    .hero-subtitle {
        margin-bottom: 0;        /* Op desktop geen margin nodig */
        max-width: 65%;
    }

    .hero-action {
        position: absolute;
        bottom: 2rem;        /* Gelijk aan padding .hero-content */
        right: 2rem;        /* Gelijk aan padding .hero-content */
    }

    .mini-card-content {
        justify-content: flex-end;        /* KNOPPEN RECHTS UITLIJNEN */
    }

    /* --- Header Overrides --- */
    .header-top {
        background: #f6f6f6;
        height: unset;
        padding: 0;
    }

    .header-top .th-grid {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Left zone - Rating Widget */
    .header-top .th-zone--left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .header-top .th-zone--left .th-wysiwyg {
        display: flex;
        align-items: center;
    }

    .header-top .rating-widget {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .header-top .rating-widget .stars {
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
    }

    .header-top .rating-widget .rating-text {
        color: #131313;
        font-family: "Inter", sans-serif;
        font-size: 0.75rem;
        line-height: 150%;
        font-weight: 500;
    }

    /* Center zone - Opening Hours */
    .header-top .th-zone--center {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .header-top .th-zone--center .th-wysiwyg {
        display: flex;
        align-items: center;
    }

    .header-top .th-zone--center p {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #131313;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        line-height: 150%;
        font-weight: 400;
        margin: 0;
    }

    .green-dot {
        display: inline-flex;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #34A853;
        flex-shrink: 0;
    }

    /* Right zone - Secondary Navigation */
    .header-top .th-zone--right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .header-top .th-zone--right .th-btns {
        display: flex;
        flex-direction: row;
        gap: 0;
        align-items: center;
    }

    .header-top .th-zone--right .th-btn {
        border-radius: 3.75rem;
        padding: 0.875rem 1rem;
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
        justify-content: center;
        color: #131313;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        line-height: 150%;
        font-weight: 500;
        text-decoration: none;
        background: transparent;
        border: none;
        transition: opacity 0.2s ease;
    }

    .header-top .th-zone--right .th-btn:hover {
        opacity: 0.7;
    }

    /* Language selector styling */
    .header-top .th-zone--right .th-btn.lang-selector {
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
        font-weight: 400;
    }

    /* ============================================
       MAIN HEADER (Logo, Navigation, CTA Buttons)
       ============================================ */
    .site-header {
        background: #ffffff;
        border-bottom: 1px solid #f6f6f6;
    }

    .site-header .inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    /* ============================================
       LOGO
       ============================================ */
    .site-logo {
        display: flex;
        flex-direction: row;
        gap: 0.625rem;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
        width: 14.125rem;
        height: 4.5rem;
    }

    .site-logo__svg {
        width: 14.125rem;
        height: 2.625rem;
    }

    /* ============================================
       DESKTOP NAVIGATION
       ============================================ */
    .desktop-navigation {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .desktop-navigation .nav-menu, .desktop-navigation #primary-menu {
        display: flex;
        flex-direction: row;
        gap: 0;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .desktop-navigation .nav-menu>li, .desktop-navigation #primary-menu>li {
        position: relative;
    }
    .desktop-navigation .nav-menu>li.desktop-hidden , .desktop-navigation #primary-menu>li.desktop-hidden {display: none;}
    .desktop-navigation .nav-menu>li>a, .desktop-navigation #primary-menu>li>a {
        background: #ffffff;
        border-radius: 0.5rem;
        padding: 0.875rem 1rem;
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
        justify-content: center;
        color: #131313;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        line-height: 150%;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .desktop-navigation .nav-menu>li>a:hover, .desktop-navigation #primary-menu>li>a:hover {
        background-color: #f6f6f6;
    }

    /* Dropdown arrow for items with children */
    .desktop-navigation .nav-menu>li.menu-item-has-children>a::after, .desktop-navigation #primary-menu>li.menu-item-has-children>a::after {
        content: '';
        display: inline-block;
        width: 0.75rem;
        height: 0.4375rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M11.5912 0.876953C11.5912 1.10627 11.5094 1.30338 11.3441 1.46875L6.39978 6.41309C6.31048 6.50235 6.21801 6.5666 6.12244 6.60645C6.02645 6.64645 5.92366 6.66699 5.81482 6.66699C5.70613 6.66699 5.60405 6.64635 5.50818 6.60645H5.5072C5.41163 6.5666 5.31916 6.50235 5.22986 6.41309L0.261108 1.44434C0.0958336 1.27906 0.0178156 1.0865 0.0257568 0.866211C0.0338409 0.64519 0.119916 0.451868 0.285522 0.286133C0.450927 0.120728 0.647919 0.0380878 0.877319 0.0380859C1.10672 0.0380859 1.30371 0.120727 1.46912 0.286133L5.81482 4.63184L10.1859 0.260742C10.3513 0.0954148 10.5436 0.0173279 10.764 0.0253906C10.9851 0.0335061 11.1783 0.12036 11.3441 0.286133C11.5092 0.451387 11.5911 0.647849 11.5912 0.876953Z' fill='black' stroke='black' stroke-width='0.05'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        margin-left: 0.5rem;
    }

    /* Rotate arrow on hover/active */
    .desktop-navigation .nav-menu>li.menu-item-has-children:hover>a::after, .desktop-navigation #primary-menu>li.menu-item-has-children:hover>a::after {
        transform: rotate(180deg);
    }

    /* ============================================
       SUBMENU / DROPDOWN
       ============================================ */
    .desktop-navigation .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0;
        min-width: 12.5rem;
        list-style: none;
        margin: 0;
        z-index: 1000;
    }

    .desktop-navigation .nav-menu>li:hover>.sub-menu, .desktop-navigation #primary-menu>li:hover>.sub-menu {
        display: block;
    }

    .desktop-navigation .sub-menu li {
        margin: 0;
    }

    .desktop-navigation .sub-menu li a {
        display: block;
        padding: 0.625rem 1rem;
        color: #131313;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        line-height: 150%;
        font-weight: 400;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .desktop-navigation .sub-menu li a:hover {
        background-color: #f6f6f6;
    }

    /* ============================================
       CTA BUTTONS
       ============================================ */
    .header-cta-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    /* ============================================
       SEARCH BOX (if present)
       ============================================ */
    .header-search {
        background: #f6f6f6;
        border-radius: 0.5rem;
        border: 1px solid transparent;
        padding: 0.875rem 1rem;
        display: flex;
        flex-direction: row;
        gap: 0.625rem;
        align-items: center;
        justify-content: flex-start;
        width: 13.375rem;
        height: 2.9375rem;
    }

    .header-search input {
        background: transparent;
        border: none;
        outline: none;
        color: #666666;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        font-weight: 500;
        width: 100%;
    }

    .header-search input::placeholder {
        color: #666666;
    }

    .header-search svg, .header-search .search-icon {
        width: 1.125rem;
        height: 1.125rem;
        flex-shrink: 0;
    }

    /* ============================================
       MOBILE ELEMENTS - Hidden on Desktop
       ============================================ */
    .mobile-menu-toggle, .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: flex !important;
    }

    /* ============================================
       MEGA MENU (if applicable)
       ============================================ */
    .nav-menu>li.has-mega>.mega-menu__inner {
        top: 100%;
    }

    /* ============================================
       SCROLLED STATE
       ============================================ */
    .site-header-wrapper.is-scrolled {
        box-shadow: 0 2px 0.625rem rgba(0, 0, 0, 0.05);
    }

}

/* ==========================================================================
   BREAKPOINT: 73.75rem
   ========================================================================== */
@media (min-width:1180px) {
    .nav-menu>li.has-mega>.mega-menu__inner {
        top: 100%;
    }

}

/* ==========================================
   DESKTOP OVERRIDES (>= 64rem)
   ========================================== */
@media (min-width:1280px) {
    body .site .features-section {
        padding: 0.5rem 0;        /* Figma Desktop: padding 0.5rem */
    }

    .features-wrapper {
        flex-direction: row;        /* Desktop: naast elkaar */
        gap: 2.5rem;        /* Figma Desktop: gap 2.5rem */
        align-items: center;
        justify-content: center;        /* Gecentreerd op het scherm */
    }

    .feature-text {
        white-space: nowrap;        /* Zorg dat ze op 1 regel blijven op desktop */
    }

}

/* Desktop Styles */
@media (min-width:1280px) {
    .bestsellers-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    /* Knoppen positioneren */
    .bestsellers-nav {
        display: flex;
        gap: 1rem;
        position: absolute;
        top: 50%;        /* Ongeveer gecentreerd of op specifieke plek */
        width: 100%;
        left: 0;
        pointer-events: none;        /* Klik erdoorheen */
        justify-content: space-between;
        transform: translateY(-50%);

        z-index: 10;
    }

    .nav-btn {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #7a68ae;        /* Primary */
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;        /* Wel klikbaar */
        transition: background 0.2s ease;
    }

    .nav-btn:hover {
        background: #655494;        /* Darker primary */
    }

}

/* ============================================================================
   DESKTOP STYLES (Vanaf iPad Landscape / Desktop - 64rem)
   ============================================================================ */
@media (min-width:1280px) {
    .section-about-stats .about-content-card {

        /* flex-direction: row; */ /* Naast elkaar */

        /* align-items: center; */
        justify-content: space-between;
        padding: 3rem 3.5rem;
        gap: 4rem;
    }

    .section-about-stats .about-text-container {
        flex: 1;        /* max-width: 50%; */

        /* Zorgt dat tekst niet te breed wordt t.o.v. cijfers */
    }

    .section-about-stats .paragraph p {
        font-size: 2rem; /* De grote desktop tekst uit Figma */
        line-height: 130%;
    }

    .section-about-stats .stats-section {
        flex-direction: row; /* Cijfers naast elkaar */
        flex: 1;
        gap: 1.5rem;
    }

    .section-about-stats .stat-item {
        padding: 2rem;
        align-items: flex-start;
    }

    .section-about-stats .stat-value {
        font-size: 3.5rem; /* Groter font voor desktop */
    }

    .section-about-stats .stat-description {
        font-size: 1.125rem;
    }

}

/* ---------------------------------------------------------
   DESKTOP STYLES (>= 64rem)
   --------------------------------------------------------- */
@media (min-width:1280px) {
    .desktop-only {
        display: flex !important;
    }

    .mobile-only {
        display: none !important;
    }

    /* Container naast elkaar */
    .component-7 {
        flex-direction: row;
        height: 35rem; /* Vaste hoogte uit design */
        gap: 2rem;
    }

    /* Kaart logica */
    .process-card {
        width: auto; /* Reset width */
        height: 100%; /* Vul container hoogte */
        flex: 1; /* Inactief is smal (1 deel) */
        min-width: 0; /* Zorg dat padding niet mee krimpt */

        /* Smoothere transitie voor flex */
        transition: flex 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    /* Actieve kaart */
    .process-card.is-active {
        flex: 11; /* Actief is breed (11 delen) */
    }

    /* FIX VOOR VERSPRINGENDE TEKST */

    /* We geven de tekst-container een vaste breedte. */

    /* Omdat de parent overflow:hidden heeft, wordt de tekst 'gemasked' ipv ingedeukt. */
    .process-card__text {
        width: 37.5rem; /* Vaste breedte, breed genoeg voor je content */
        max-width: none; /* Voorkom aanpassing aan parent */
        display: flex;        /* Langzamere, smoothere transitie voor tekst */
        opacity: 0;
        visibility: hidden;
        transform: translateY(1.875rem); /* Iets grotere afstand voor meer effect */
        transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s 0.8s; /* Visibility pas na fade-out */
    }

    /* Actieve tekst zichtbaar maken */
    .process-card.is-active .process-card__text {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.25s, transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.25s, visibility 0s 0s; /* Visibility direct zichtbaar */
    }

    .centered-content .section-title {
        margin-bottom: 0;
        font-size: 2.5rem;
    }

    .single-post .section-content-row .section-title {
        font-size: 2.5rem;
    }

    .single-post .hero-image {
        margin-top: 4.5rem;
    }

    /* Visit Showroom: button rechtsonder */
    .showroom-content {
        position: relative;
    }

    .showroom-inner-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        justify-content: flex-end;
    }

    .showroom-inner-content .btn-white {
        position: absolute;
        right: 2rem;
        bottom: 2rem;
    }

    .showroom-text {
        margin-bottom: 0;
    }

}

@media (min-width:1440px) {
    .hero-main-card {
        min-width: 63.75rem;
    }

}