/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   Desktop theme served to all devices - these rules make it responsive
   ========================================================================== */

/* --- GLOBAL: prevent horizontal scroll on all pages --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
img, video, iframe, table, pre {
    max-width: 100%;
}
* {
    box-sizing: border-box;
}

/* --- LUMA BASE RESETS — desktop only (keep off-canvas nav on mobile) --- */
@media only screen and (min-width: 769px) {
    .nav-sections {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        transition: none !important;
    }
    .nav-sections-item-title {
        display: none !important;
    }
    .nav-sections-item-content {
        display: block !important;
        float: none !important;
        margin-top: 0 !important;
    }
    .nav-sections-item-content > * {
        display: none !important;
    }
    .nav-sections-item-content > .navigation {
        display: block !important;
    }
    .navigation {
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        width: 100% !important;
        height: inherit !important;
        overflow: inherit !important;
        padding: 0 !important;
        z-index: 3 !important;
    }
    .nav-toggle {
        display: none !important;
    }
    .nav-open .page-wrapper {
        left: 0 !important;
        overflow: visible !important;
    }
}

/* --- NAVIGATION: tablet horizontal bar (769-1024px) --- */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .nav-sections .navigation .level0 > .level-top {
        padding: 0 12px !important;
        font-size: 13px !important;
        height: 48px;
        line-height: 48px;
    }
    .nav-sections .navigation .level0.active > .level-top,
    .nav-sections .navigation .level0.has-active > .level-top {
        height: 48px;
        line-height: 48px;
    }
}

/* --- HAMBURGER MENU — mobile --- */
@media only screen and (max-width: 768px) {
    /* Hamburger toggle button */
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 50% !important;
        left: 10px !important;
        transform: translateY(-50%);
        z-index: 20;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #f0eaf5 !important;
        border: none;
        padding: 0;
    }
    .nav-toggle:before {
        content: "☰" !important;
        font-family: inherit !important;
        font-weight: 400 !important;
        color: #6b2fa0 !important;
        font-size: 22px !important;
        line-height: 1;
    }
    .nav-toggle span {
        display: none;
    }

    /* Off-canvas nav panel */
    .nav-sections {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 280px !important;
        height: 100% !important;
        background-color: #ffffff !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        padding-top: 0 !important;
    }
    .nav-open .nav-sections {
        left: 0 !important;
    }
    .nav-open .page-wrapper {
        left: 280px !important;
        transition: left 0.3s ease !important;
    }

    /* Nav section tabs */
    .nav-sections-items {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .nav-sections-item-title {
        display: block !important;
        flex: 1;
        text-align: center;
        border-bottom: 2px solid transparent;
        background: #f5f5f5;
    }
    .nav-sections-item-title.active {
        background: #fff;
        border-bottom-color: #6b2fa0;
    }
    .nav-sections-item-title a {
        display: block;
        padding: 12px 8px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: #666;
        text-decoration: none;
        letter-spacing: 0.03em;
    }
    .nav-sections-item-title.active a {
        color: #6b2fa0;
    }
    .nav-sections-item-content {
        display: none !important;
        padding: 0 !important;
        width: 100%;
        order: 10;
    }
    .nav-sections-item-content.active {
        display: block !important;
    }
    /* Fallback: show first tab content when no .active class has been set yet (JS not loaded) */
    .nav-sections-items:not(:has(.nav-sections-item-title.active)) .nav-sections-item-title:first-child + .nav-sections-item-content {
        display: block !important;
    }
    .nav-sections-item-content > * {
        display: block !important;
    }
    .nav-sections-item-content > .navigation {
        display: block !important;
    }

    /* Mobile brands list */
    .mobile-brands-list {
        list-style: none;
        padding: 0;
        margin: 0;
        columns: 1;
    }
    .mobile-brands-list li {
        break-inside: avoid;
        border-bottom: 1px solid #eee;
    }
    .mobile-brands-list li a {
        display: block;
        padding: 10px 16px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }
    .mobile-brands-list li a:hover {
        color: #6b2fa0;
        background: #f0eaf5;
    }

    /* Navigation list styling */
    .navigation {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .navigation > ul {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    .navigation .level0 {
        display: block !important;
        border-bottom: 1px solid #eee;
    }
    .nav-sections .navigation .level0 > .level-top,
    .navigation .level0 > .level-top {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 16px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #333 !important;
        height: auto !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em;
        text-align: left !important;
    }
    .nav-sections .navigation .level0.active > .level-top,
    .navigation .level0.active > .level-top {
        color: #6b2fa0 !important;
        border-bottom: none !important;
    }
    /* Dropdown arrow alignment */
    .navigation .level0.parent > .level-top::after,
    .nav-sections .navigation .level0.parent > .level-top::after {
        position: static !important;
        flex-shrink: 0;
        margin-left: auto;
        font-size: 12px !important;
        color: #999 !important;
        text-align: right !important;
        transition: transform 0.2s ease;
    }
    .navigation .level0.parent.submenu-open > .level-top::after {
        color: #6b2fa0 !important;
        transform: rotate(180deg);
    }

    /* Submenus - toggle on click only (high specificity to override styles-m.css) */
    .sections.nav-sections .navigation .level0 > .submenu,
    .navigation .level0 > ul.submenu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: #f9f9f9 !important;
        padding: 0 !important;
    }
    .sections.nav-sections .navigation .level0.submenu-open > .submenu,
    .navigation .level0.submenu-open > ul.submenu {
        display: block !important;
    }
    .navigation .level0 .submenu li {
        border-bottom: 1px solid #eee;
    }
    .navigation .level0 .submenu a {
        padding: 12px 20px 12px 36px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #555 !important;
        display: block;
        text-transform: uppercase !important;
        letter-spacing: 0.02em;
    }
    .navigation .level0 .submenu a:hover {
        color: #6b2fa0 !important;
        background-color: #f0eaf5 !important;
    }

    /* Menu header with close button */
    .nav-sections::before {
        content: none;
    }
    /* Close button (injected via JS) */
    .nav-close-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #999;
        font-size: 20px;
        cursor: pointer;
        z-index: 1000;
        border-radius: 50%;
        background: transparent;
        border: none;
        padding: 0;
    }
    .nav-close-btn:hover {
        color: #6b2fa0;
        background: #f0eaf5;
    }
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media only screen and (max-width: 1024px) {

    /* --- HEADER --- */
    .top.usps {
        width: 100%;
        display: block;
        text-align: center;
    }
    .top.usps ul li {
        margin-right: 12px;
        font-size: 11px;
    }
    .top.link {
        width: 100%;
        display: block;
        text-align: center;
    }

    /* Header middle */
    .page-wrapper .header.content {
        padding: 10px 15px;
    }
    strong.logo,
    .header.content .logo {
        max-width: 120px;
    }
    .header_right {
        max-width: none;
    }

    /* Search */
    .block.block-search {
        max-width: 300px;
        padding-left: 10px;
    }

    /* Login + minicart */
    .login_link {
        max-width: 120px;
        margin-left: 10px;
        font-size: 13px;
    }
    .topline_header .minicart-wrapper {
        max-width: 80px;
        margin-left: 10px;
    }

    /* --- NAVIGATION (tablet only, not mobile hamburger) --- */

    /* --- HOMEPAGE --- */
    .homepage-hero .banner-item {
        height: 400px;
    }
    .homepage-hero .banner-image,
    .homepage-hero .banner-image img,
    .homepage-hero .banner-item > a {
        height: 400px;
    }
    .homepage-hero .banner-item::after {
        height: 400px;
        width: 60%;
    }
    .homepage-hero .hero-content {
        left: 40px;
        max-width: 50%;
    }
    .homepage-hero .hero-headline {
        font-size: 40px;
        line-height: 44px;
    }
    .homepage-hero .hero-subheadline {
        font-size: 16px;
        line-height: 24px;
    }
    .homepage-hero .owl-dots {
        left: 40px !important;
    }

    /* Categories */
    .homepage-categories .cat-item {
        flex: 0 0 calc(25% - 12px) !important;
        width: auto !important;
    }

    /* Section titles */
    .homepage-section-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .homepage-categories h2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .homepage-bestsellers .content-heading .title,
    .homepage-deals .content-heading .title {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    /* Brands section */
    .homepage-brands {
        gap: 40px;
    }
    .homepage-brands .brands-left {
        flex: 0 0 45%;
        width: 45%;
        height: auto;
    }
    .homepage-brands .brands-left img {
        width: 100%;
        height: auto;
    }
    .homepage-brands .brands-title {
        font-size: 28px;
        line-height: 34px;
    }

    /* Store section */
    .homepage-store .store-image {
        flex: 0 0 45%;
    }
    .homepage-store .store-image img {
        width: 100%;
        height: auto;
    }

    /* USP bars */
    .homepage-usps .usp-item {
        font-size: 14px;
        gap: 8px;
    }
    .homepage-usps .usp-icon {
        width: 32px;
        height: 32px;
    }

    /* Footer */
    .footer.blocks:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 30px;
    }
    .footer.content {
        flex-wrap: wrap !important;
        padding: 40px 20px !important;
    }
    .footer-newsletter-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    /* Copyright */
    .page-wrapper > .copyright .copyright-logo {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Product grid */
    .catalog-category-view.page-products.page-layout-1column .products-grid .product-item {
        width: 33.33%;
    }

    /* Product page */
    body.page-layout-1column .product.media {
        width: 50%;
    }
    body.page-layout-1column .product-info-main {
        width: 48%;
    }
}


@media only screen and (max-width: 768px) {

    /* --- HEADER TOP BAR --- */
    .page-wrapper .page-header .panel.wrapper {
        font-size: 10px;
    }
    .page-wrapper .page-header .panel.wrapper {
        display: none !important;
    }
    /* Disable sticky header on mobile */
    header.page-header {
        position: relative !important;
    }
    .btn-aanmelden-top {
        display: none;
    }

    /* --- HEADER MIDDLE --- */
    .page-wrapper .header.content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 10px 8px 52px !important;
        position: relative;
    }
    strong.logo,
    .header.content .logo,
    .page-wrapper .header.content .logo {
        max-width: 110px !important;
        flex-shrink: 0;
        margin-right: auto !important;
    }
    .header.content .logo img {
        max-height: 40px !important;
        width: auto !important;
    }
    .header_right {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end !important;
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0;
        gap: 4px;
    }
    .topline_header {
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important;
        width: auto !important;
        gap: 4px;
    }
    /* Search: icon toggle with dropdown */
    .topline_header .block.block-search {
        order: 1 !important;
        flex-shrink: 0;
        max-width: none;
        padding-left: 0;
        width: 36px !important;
        height: 36px;
        position: static;
        margin-left: 0;
    }
    .block-search .block-title {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #f0eaf5;
        cursor: pointer;
    }
    .block-search .block-title strong {
        font-size: 0;
    }
    .block-search .block-title:before {
        content: '\e615';
        font-family: 'luma-icons';
        font-size: 16px;
        color: #6b2fa0;
        font-weight: normal;
    }
    .block-search .block-content {
        position: static;
    }
    .block-search #search_mini_form {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 100;
    }
    .block-search.active .block-title {
        background: #6b2fa0;
    }
    .block-search.active .block-title:before {
        color: #fff;
    }
    .block-search.active #search_mini_form {
        display: block !important;
    }
    .block-search .control {
        margin: 0;
        border: none;
    }
    .block-search input#search {
        height: 40px;
        font-size: 15px;
        width: 100% !important;
        border: 2px solid #6b2fa0;
        border-radius: 8px;
        padding: 0 40px 0 12px;
    }
    .block-search #search_mini_form .actions,
    .block-search .action.search,
    .topline_header .block-search .action.search {
        display: none !important;
    }
    .login_link {
        order: 3 !important;
        flex-shrink: 0;
        max-width: none;
        margin-left: 0;
        width: 36px !important;
        height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }
    .login_link li {
        line-height: 0;
    }
    .login_link li a {
        font-size: 0;
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }
    .login_link li a:before {
        font-size: 20px;
    }
    .topline_header .minicart-wrapper {
        order: 2 !important;
        flex-shrink: 0;
        max-width: none;
        margin-left: 0;
        padding: 0;
        width: 36px !important;
        height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .minicart-wrapper .action.showcart .counter.qty {
        font-size: 14px;
        min-width: 40px;
    }
    select#brandMenuItem {
        display: none;
    }

    /* Navigation handled by hamburger menu CSS above */

    /* --- MINICART PANEL --- */
    .topline_header .minicart-wrapper .block-minicart {
        width: 85% !important;
        padding: 50px 15px 160px;
    }
    .topline_header .minicart-items-wrapper {
        width: calc(100% - 30px);
    }
    .topline_header .minicart-footer {
        width: calc(85% - 30px);
        right: 15px;
    }
    .topline_header .minicart-items .product-item-details {
        padding-left: 90px;
        width: auto;
    }

    /* --- HOMEPAGE HERO --- */
    .homepage-hero {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    /* Before owl carousel inits: hide extra slides, show only first */
    .homepage-hero .custom-slider:not(.owl-loaded) .banner-item {
        display: none;
    }
    .homepage-hero .custom-slider:not(.owl-loaded) .banner-item:first-child {
        display: block;
    }
    /* Same for instagram carousel */
    .instagram-grid:not(.owl-loaded) .insta-photo {
        display: none;
    }
    .instagram-grid:not(.owl-loaded) .insta-photo:first-child {
        display: block;
    }
    .homepage-hero .banner-item {
        height: 320px;
    }
    .homepage-hero .banner-image,
    .homepage-hero .banner-image img,
    .homepage-hero .banner-item > a {
        height: 320px;
    }
    .homepage-hero .banner-item::after {
        height: 320px;
        width: 70%;
    }
    .homepage-hero .hero-content {
        left: 20px;
        max-width: 60%;
    }
    .homepage-hero .hero-headline {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 8px;
    }
    .homepage-hero .hero-subheadline {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }
    .homepage-hero .hero-cta {
        font-size: 14px;
        padding: 0 24px;
        height: 40px;
        line-height: 38px;
    }
    .homepage-hero .owl-dots {
        left: 20px !important;
        bottom: 12px !important;
    }

    /* --- HOMEPAGE SECTIONS — spacing between blocks --- */
    .homepage-categories-wrapper,
    .homepage-bestsellers,
    .homepage-brands-wrapper,
    .homepage-store-wrapper,
    .homepage-instagram-wrapper,
    .homepage-alles-voor-haar-wrapper,
    .homepage-cta-wrapper {
        margin-top: 16px !important;
    }
    .homepage-section-title {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 10px !important;
    }
    .homepage-categories h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .homepage-bestsellers .content-heading .title,
    .homepage-deals .content-heading .title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .btn-bekijk-alles {
        font-size: 14px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
    }
    .homepage-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Categories - 2 columns */
    .homepage-categories-wrapper {
        padding: 16px 15px !important;
    }
    .homepage-categories .category-grid {
        flex-wrap: wrap !important;
        gap: 12px;
    }
    .homepage-categories .cat-item {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
    }
    .homepage-categories .cat-item span {
        font-size: 14px;
    }

    /* USP bar */
    .homepage-usp-bar {
        height: auto !important;
    }
    .homepage-usps {
        flex-wrap: wrap;
        gap: 6px 0;
        justify-content: flex-start !important;
        padding: 12px 10px !important;
        height: auto !important;
    }
    .homepage-usps .usp-item {
        font-size: 12px;
        flex: 0 0 50%;
        justify-content: flex-start;
    }

    /* Bestsellers + Deals */
    .homepage-bestsellers,
    .homepage-deals {
        padding: 16px 0 !important;
    }
    .homepage-bestsellers > .homepage-section-header,
    .homepage-bestsellers > .product-slider,
    .homepage-bestsellers > div,
    .homepage-deals .deals-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* Product sliders: 2 items per row (override OWL inline styles) */
    .homepage-bestsellers .owl-carousel .owl-stage,
    .homepage-deals .owl-carousel .owl-stage {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        transform: none !important;
        transition: none !important;
    }
    .homepage-bestsellers .owl-carousel .owl-item,
    .homepage-deals .owl-carousel .owl-item {
        width: 50% !important;
        min-width: 50% !important;
        flex: 0 0 50% !important;
        margin-right: 0 !important;
        margin-bottom: 16px !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }
    .homepage-bestsellers .owl-carousel .product-item,
    .homepage-deals .owl-carousel .product-item {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex: 1;
    }
    .homepage-bestsellers .owl-carousel .product-item-info,
    .homepage-deals .owl-carousel .product-item-info {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
    }
    .homepage-bestsellers .owl-carousel .product-item-details,
    .homepage-deals .owl-carousel .product-item-details {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .homepage-bestsellers .owl-carousel .product-item-name,
    .homepage-deals .owl-carousel .product-item-name {
        min-height: 36px;
    }
    .homepage-bestsellers .product-item-name a,
    .homepage-deals .product-item-name a {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3;
    }
    .homepage-bestsellers .price-box .price,
    .homepage-deals .price-box .price {
        font-size: 14px !important;
    }
    .homepage-bestsellers .owl-carousel .product-item-inner,
    .homepage-deals .owl-carousel .product-item-inner {
        margin-top: auto;
    }
    .homepage-bestsellers .owl-carousel .owl-stage-outer,
    .homepage-deals .owl-carousel .owl-stage-outer {
        overflow: visible !important;
    }

    /* USP second bar */
    .homepage-usp-second {
        height: auto !important;
    }
    .usp-second-inner {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 16px 15px !important;
        gap: 8px 0;
        justify-content: flex-start !important;
    }
    .usp-second-item {
        flex: 0 0 100%;
        font-size: 14px !important;
        justify-content: flex-start;
        padding: 4px 0;
    }
    .usp-second-icon {
        width: 28px;
        height: 28px;
    }

    /* Brands section */
    .homepage-brands-wrapper {
        padding: 16px 15px !important;
    }
    .homepage-brands {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .homepage-brands .brands-left {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
    }
    .homepage-brands .brands-left img {
        width: 100% !important;
        height: auto !important;
    }
    .homepage-brands .brands-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }
    .homepage-brands .brands-right p {
        font-size: 15px;
        line-height: 26px;
    }
    .homepage-brands-logos {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        justify-items: center;
        align-items: center;
    }
    .homepage-brands-logos .brand-logo-item {
        width: 100% !important;
        height: 60px !important;
        flex: none !important;
    }
    .homepage-brands-logos .brand-logo-item img {
        max-width: 100% !important;
        max-height: 45px !important;
        object-fit: contain !important;
    }

    /* Store section */
    .homepage-store-wrapper {
        padding: 0 !important;
    }
    .homepage-store {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .homepage-store .store-image {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
    }
    .homepage-store .store-image img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
    }
    .homepage-store .store-text {
        padding: 16px 15px !important;
    }
    .homepage-store .store-text h2 {
        font-size: 24px !important;
    }

    /* Instagram */
    .homepage-instagram-wrapper {
        padding: 16px 15px !important;
    }
    .homepage-instagram .insta-photo {
        height: 350px !important;
        background: none !important;
        overflow: hidden;
        border-radius: 8px;
    }
    .homepage-instagram .insta-photo img {
        width: 100% !important;
        height: 350px !important;
        object-fit: cover;
    }
    .homepage-instagram h2 {
        font-size: 24px !important;
    }

    /* Alles voor haar */
    .homepage-alles-voor-haar-wrapper {
        padding: 16px 15px !important;
    }
    .homepage-alles-voor-haar .text-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* CTA boxes */
    .homepage-cta-wrapper {
        padding: 16px 15px !important;
    }
    .homepage-cta-boxes {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    .cta-box {
        max-width: 100% !important;
        padding: 24px 20px !important;
        text-align: center;
    }
    .cta-box a.cta-button {
        display: inline-block;
        min-width: 160px;
        font-size: 14px !important;
        padding: 10px 24px !important;
    }

    /* Trust bar */
    .footer-trust-bar {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 15px !important;
    }
    .footer-trust-bar .trust-item {
        border-right: none !important;
        padding: 0 !important;
    }

    /* --- FOOTER --- */
    .footer.content {
        display: block !important;
        padding: 16px 15px !important;
    }
    .footer.blocks {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 24px !important;
    }
    .footer.blocks:first-child {
        flex: none !important;
        width: 100% !important;
    }
    .footer-newsletter-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    .footer-newsletter-subtitle {
        font-size: 16px !important;
    }
    .footer-newsletter-form {
        flex-direction: column !important;
    }
    .footer-newsletter-form input[type="email"] {
        width: 100% !important;
    }
    .footer-newsletter-form button {
        width: 100% !important;
        max-width: 200px !important;
    }
    .footer.blocks h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    .footer.blocks a,
    .footer.blocks li,
    .footer.blocks p {
        font-size: 14px !important;
        line-height: 28px !important;
    }

    /* Copyright bar */
    .page-wrapper > .copyright {
        padding: 16px 0 !important;
    }
    .page-wrapper > .copyright .copyright-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 15px !important;
        gap: 12px !important;
    }
    .page-wrapper > .copyright .copyright-logo {
        flex: none !important;
        width: auto !important;
    }
    .page-wrapper > .copyright .copyright-logo .footer-logo {
        height: 32px !important;
    }
    .page-wrapper > .copyright .left-copy {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        white-space: normal !important;
    }
    .page-wrapper > .copyright .left-copy ul {
        flex-wrap: wrap !important;
        gap: 4px 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .page-wrapper > .copyright .left-copy ul li a {
        font-size: 13px;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
    }
    .page-wrapper > .copyright .left-copy span {
        font-size: 13px;
        color: rgba(255,255,255,0.7);
    }

    /* --- CATEGORY PAGE --- */
    .products-grid .product-items {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .catalog-category-view.page-products.page-layout-1column .products-grid .product-item {
        width: 50% !important;
        margin-left: 0;
        margin-bottom: 0;
        padding: 0 6px 12px !important;
        display: flex !important;
    }
    .products-grid .product-item .product-item-info {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .products-grid .product-item .product-item-details {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .products-grid .product-item .product-item-inner {
        margin-top: auto !important;
        text-align: center;
    }
    .products-grid .product-item .product-item-actions,
    .products-grid .product-item .actions-primary,
    .products-grid .product-item .actions-primary form {
        display: flex !important;
        justify-content: center !important;
    }
    .products-grid .product-item .action.tocart,
    .products-grid .product-item .action.primary,
    .products-grid .product-item .action.primary.nineyardsSeeDetails {
        display: inline-block !important;
        margin: 8px 0 0 !important;
        padding: 8px 12px !important;
        text-align: center;
        font-size: 12px !important;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }
    .products-grid .product-item .action.primary span::after {
        display: none !important;
    }
    /* Homepage product slider buttons - smaller on mobile */
    .homepage-bestsellers .action.primary,
    .homepage-deals .action.primary {
        font-size: 11px !important;
        padding: 6px 10px !important;
        margin: 4px 0 0 !important;
    }
    .category-image {
        max-height: 180px;
    }
    .category-description {
        column-count: 1 !important;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Reduce whitespace between title and toolbar on category pages */
    .page-products .columns {
        padding-top: 10px !important;
    }

    /* Reorder: filter above sorter above pager */
    .page-products .niks-ajax-wrapper,
    .page-products .column.main {
        display: flex !important;
        flex-direction: column !important;
    }
    .page-products .block.filter {
        order: 1 !important;
    }
    .page-products .toolbar-products {
        order: 2 !important;
    }
    .page-products .pages {
        order: 3 !important;
    }
    .page-products .products.wrapper {
        order: 4 !important;
    }
    /* Hide bottom toolbar (Magento renders two sets) */
    .page-products .products.wrapper ~ .toolbar-products {
        display: none !important;
    }
    /* Show bottom pager */
    .page-products .products.wrapper ~ .pages {
        display: block !important;
        order: 4 !important;
    }

    /* Toolbar */
    body.page-layout-1column .toolbar-products {
        height: auto;
        text-align: right;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 4px 0 0 0;
        margin-bottom: 2px !important;
        border: none !important;
    }
    .toolbar-products > * {
        margin-top: 0 !important;
    }
    .toolbar-products .limiter {
        display: none !important;
    }
    .toolbar-products .toolbar-amount {
        display: none !important;
    }
    .page-products .toolbar-sorter.sorter {
        margin-right: 0;
        width: 100%;
        text-align: right;
    }
    .page-products .sorter-label {
        display: none;
    }
    .page-products .sorter-options {
        height: 36px;
        font-size: 13px;
        border-radius: 6px;
        border: 1px solid #ddd;
        padding: 0 8px;
    }
    /* Pager: arrows only on mobile */
    .pages {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
        position: static !important;
        clear: both;
    }
    .pages .pages-label {
        display: none !important;
    }
    .pages .items {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: center;
        align-items: center;
    }
    .pages .item {
        display: inline-flex !important;
    }
    .pages .item a,
    .pages .item strong {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        display: inline-block;
        font-size: 14px;
        border-radius: 6px;
    }
    .pages .item.current strong {
        background: #6b2fa0;
        color: #fff;
        border-radius: 6px;
    }
    .pages .item.pages-item-previous a,
    .pages .item.pages-item-next a {
        background: #f0eaf5;
        color: #6b2fa0;
        font-weight: 600;
        padding: 0 12px;
        border-radius: 6px;
        white-space: nowrap;
    }

    /* Filter as collapsible */
    #layered-filter-block {
        width: 100% !important;
        margin: 5px 0 5px 0;
        display: block !important;
        position: relative !important;
    }
    .filter-title {
        display: block !important;
        position: static !important;
        height: auto !important;
    }
    .filter-title strong {
        display: flex !important;
        position: static !important;
        align-items: center;
        justify-content: center;
        background: #f0eaf5;
        color: #6b2fa0;
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .filter-title strong:before {
        content: '\e615';
        font-family: 'luma-icons';
        margin-right: 8px;
        font-size: 14px;
    }
    .filter-content {
        display: none;
    }
    .filter-active .filter-content,
    #layered-filter-block.active .filter-content {
        display: block;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #fff !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }
    .filter-close-btn {
        display: block;
        width: 100%;
        padding: 12px;
        margin-top: 12px;
        background: #6b2fa0;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
    }
    .filter-options {
        display: block !important;
        margin-top: 20px !important;
    }
    .filter-options-item {
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }
    .filter-options-title {
        font-size: 14px;
        font-weight: 600;
    }
    .filter-options-content {
        display: block !important;
    }
    .filter-option {
        width: 100%;
    }
    .page-title-wrapper h1.page-title {
        font-size: 20px;
    }
    .catalog-category-view .block.filter {
        margin-top: 10px !important;
    }

    /* --- PRODUCT PAGE --- */
    body.page-layout-1column .product.media {
        width: 100% !important;
        margin-right: 0 !important;
    }
    body.page-layout-1column .product-info-main {
        width: 100% !important;
    }
    .product.media .loading-mask,
    .product.media .fotorama__stage {
        height: 340px !important;
    }
    .fotorama__stage__shaft.fotorama__grab {
        max-width: 100% !important;
    }
    .product-info-main h1.page-title {
        font-size: 20px;
    }
    #product-login-button,
    button#product-addtocart-button,
    button#product-updatecart-button {
        min-width: 180px !important;
        font-size: 16px;
        padding: 12px 0;
    }
    .login-text,
    .field.qty {
        width: 130px;
    }
    .box-tocart input#qty {
        width: 70px;
    }

    /* Related products ("Ook interessant voor jou") */
    .block.row:has(.products-related) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .products-related .owl-carousel .owl-stage {
        display: flex !important;
    }
    .products-related .owl-carousel .owl-item {
        display: flex !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }
    .products-related .owl-carousel .owl-item .product-item-info {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .products-related .owl-carousel .owl-item .product-item-details {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .products-related .owl-carousel .owl-item .product-item-inner {
        margin-top: auto;
    }
    .products-related .owl-stage-outer {
        overflow: hidden !important;
    }

    /* --- SEARCH RESULTS --- */
    .catalogsearch-result-index .products.products-grid {
        margin-top: 20px;
    }

    /* --- MISC --- */
    #maincontent {
        margin-bottom: 40px;
    }
    .columns .column.main {
        padding: 0 10px;
    }
    .top-container .breadcrumbs {
        font-size: 11px;
    }
    .link_under_nav {
        display: none;
    }

    /* Contact page */
    .col2,
    .contact.info,
    form#contact-form {
        width: 100% !important;
    }
    form#contact-form {
        margin-left: 0 !important;
    }

    /* AiSearch layover mobile */
    body .sp_popup {
        position: fixed !important;
        width: 100% !important;
        top: 150px !important;
        top: var(--aisearch-popup-top, 150px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: calc(100vh - 150px) !important;
        height: var(--aisearch-popup-height, calc(100vh - var(--aisearch-popup-top, 150px))) !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        background: #fff;
    }
    body .sp_block {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        border: none !important;
        border-top: 2px solid #c8b4eb !important;
    }
    body .sp_block_scroll {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body .sp_block_left {
        width: 100% !important;
        float: none !important;
        border-right: none !important;
        border-bottom: 1px solid #eee;
        min-height: auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    body .sp_block_right {
        width: 100% !important;
        float: none !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body .sp_title_objects_right {
        position: static !important;
        margin-bottom: 8px;
    }
    body .sp_title_objects_right h4 {
        font-size: 13px !important;
        line-height: 1.3;
    }
    body .sp_objects {
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body .sp_product {
        width: calc(50% - 5px) !important;
        height: auto !important;
        float: none !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }
    body .sp_product:nth-child(2n+2) {
        margin-right: 0 !important;
    }
    body .sp_img {
        width: 100% !important;
        height: 120px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body .sp_img img {
        max-width: 100% !important;
        max-height: 110px !important;
        position: static !important;
        margin: auto;
    }
    body .sp_desc {
        width: 100% !important;
        height: auto !important;
        padding: 4px 0 !important;
    }
    body .sp_productname {
        height: auto !important;
        max-height: 36px;
    }
    body .sp_more {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body .sp_close {
        float: none !important;
        text-align: right;
        margin: 4px 8px !important;
    }
    body .sp_close--bottom {
        padding: 8px 12px !important;
    }
    body .sp_loader {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        margin: 8px 0;
    }
    body .sp_header {
        width: 100% !important;
        float: none !important;
    }
    body .sp_amount {
        position: static !important;
        float: none !important;
    }
    body .sp_pref_left,
    body .sp_pref_right {
        width: 100% !important;
        float: none !important;
        border-right: none !important;
    }

    /* Account pages */
    .customer-account-create .field.field-name-firstname,
    .customer-account-create .field.field-name-lastname,
    .customer-account-create .field.password,
    .customer-account-create .field.confirmation {
        width: 100%;
    }
    .customer-account-login .login-container {
        display: block !important;
    }
    .customer-account-login .login-container .block {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .customer-account-login .block-customer-login {
        border-right: none !important;
        padding-right: 0 !important;
    }
    .customer-account-index .block,
    .customer-account-index .column.main .block {
        width: 100% !important;
    }
    .account .page-title-wrapper {
        margin-bottom: 16px;
    }
    .account .column.main .block:not(.widget) .block-title {
        font-size: 18px;
    }
    /* Account sidebar on mobile */
    .account .sidebar-main {
        width: 100% !important;
        order: -1;
        margin-bottom: 16px;
    }
    .account .column.main {
        width: 100% !important;
    }
    .account .columns {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Cart page */
    .checkout-cart-index .cart-container {
        display: block !important;
    }
    .checkout-cart-index .form-cart {
        width: 100% !important;
    }
    .checkout-cart-index .cart-summary {
        width: 100% !important;
        float: none !important;
        margin-top: 20px;
    }
    .checkout-cart-index .cart.table-wrapper .col.item {
        width: 100% !important;
    }
    .checkout-cart-index .cart.table-wrapper .product-item-photo {
        max-width: 80px;
    }
    .checkout-cart-index .cart.table-wrapper .product-item-details {
        padding-left: 10px;
    }
    .checkout-cart-index .cart.table-wrapper .col.qty .input-text.qty {
        width: 50px;
    }
    .cart-totals .table-wrapper {
        overflow-x: auto;
    }

    /* Checkout page */
    .checkout-index-index .opc-wrapper {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }
    .checkout-index-index .opc-sidebar {
        width: 100% !important;
        float: none !important;
        margin-top: 20px;
    }
    .checkout-index-index .checkout-shipping-address .field {
        width: 100% !important;
    }
    .checkout-index-index .form-login .fieldset .field {
        width: 100% !important;
    }
    .checkout-index-index .opc-block-summary {
        padding: 15px !important;
    }

    /* Wishlist */
    .wishlist-index-index .products-grid .product-item {
        width: 50% !important;
    }
    .wishlist-index-index .product-item-photo {
        width: 100%;
    }

    /* Blog */
    ol.post-list.grid {
        grid-template-columns: 1fr 1fr;
    }
    ol.post-list.grid li.item {
        width: 100%;
    }

    /* CMS pages */
    .cms-page-view .column.main {
        padding: 0 15px;
    }
    .cms-page-view .column.main img {
        max-width: 100%;
        height: auto;
    }
    .cms-page-view .column.main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


@media only screen and (max-width: 480px) {

    /* Header - stack USPs */
    .top.usps ul li {
        font-size: 9px;
        margin-right: 6px;
    }
    .top.usps ul li:nth-child(n+4) {
        display: none;
    }

    /* Hero */
    .homepage-hero .banner-item {
        height: 260px;
    }
    .homepage-hero .banner-image,
    .homepage-hero .banner-image img,
    .homepage-hero .banner-item > a {
        height: 260px;
    }
    .homepage-hero .banner-item::after {
        height: 260px;
    }
    .homepage-hero .hero-headline {
        font-size: 22px;
        line-height: 26px;
    }
    .homepage-hero .hero-subheadline {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 12px;
    }
    .homepage-hero .hero-cta {
        font-size: 12px;
        padding: 0 16px;
        height: 36px;
        line-height: 34px;
    }

    /* Categories - 2 col on small screens */
    .homepage-categories .cat-item {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
    }
    .homepage-categories .cat-item span {
        font-size: 12px;
    }

    /* USP items - 2 columns on mobile */
    .homepage-usps .usp-item {
        flex: 0 0 50%;
        justify-content: flex-start;
    }

    /* USP second */
    .usp-second-item {
        flex: 0 0 100% !important;
        font-size: 13px !important;
    }

    /* Product items */
    .product-item-name {
        font-size: 13px;
        line-height: 1.3;
        height: auto;
        max-height: 52px;
        overflow: hidden;
        margin-bottom: 6px;
    }
    .product-item-name a {
        color: #333;
    }
    .product-item .product-item-info {
        padding: 8px;
    }
    .product-item .price-box {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .product-item .action.primary {
        font-size: 12px;
        min-width: 0;
        width: 100%;
        padding: 8px 10px;
        text-align: center;
        border-radius: 6px;
    }

    /* Brand logos - 3 per row, smaller on tiny screens */
    .homepage-brands-logos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    .homepage-brands-logos .brand-logo-item img {
        max-height: 35px !important;
    }

    /* Footer newsletter */
    .footer-newsletter-title {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    /* Blog */
    ol.post-list.grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 768px) {
  .block-collapsible-nav {
    top: -1px !important;
  }
}