/*
Theme Name: Sarlemijn Custom Child Theme
Theme URI: jouw project URL
Description: Mijn custom design voor Sarlemijn.
Author: Jouw Naam
Template: storefront
Version: 1.0.0
*/

/* System font stack — geen Google Fonts download nodig */
body, button, input, select, textarea,
.storefront-sorting, .woocommerce-ordering {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


/* ==========================================================================
   HEADER OPMAAK FIXES (PADDING EN Z-INDEX)
   ========================================================================== */

/* 1. Verwijder de ongewenste top-margin/padding van Storefront/WordPress */
#masthead.site-header, 
.site-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Fix voor de WordPress Admin Bar (voorkomt dat de body omlaag wordt geduwd) */
html.wp-toolbar body { 
    margin-top: 0 !important;
}

/* Zorg dat de header boven de Admin Bar blijft, indien nodig */
#masthead.site-header {
    z-index: 9999; 
    position: relative; /* Zorg dat z-index werkt */
}
/* ==========================================================================
   CUSTOM ALIGNMENT FIXES
   ========================================================================== */

/* Corrigeer de verticale uitlijning van de zoekbalk t.o.v. het 2-regelige logo. */
.search-align-fix {
    /* Trek de zoekbalk iets naar beneden. Pas deze waarde aan indien nodig. */
    margin-top: 5px; 
}

/* ==========================================================================
   PRODUCT SINGLE PAGINA STYLING FIXES
   ========================================================================== */
   
   /* Fix: verwijder extra margin rond de prijs en maak prijs compacter */
.product-price p.price,
.product-price .price,
p.price {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block;
}

/* Optionele: kleinere ruimte boven/onder de prijscontainer */
.product-price {
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
}

.product-brand-name {
    color: #000 !important;
}

/* Producttitel kleur aanpassen naar #D00E50 en groter op desktop */
.product_title.entry-title,
.product-title.entry-title {
    color: #D00E50 !important;
}

@media (min-width: 1024px) { /* lg breakpoint */
    .product_title.entry-title,
    .product-title.entry-title {
        font-size: 2rem !important; /* 48px, was text-3xl (30px) */
        line-height: 1.1 !important;
    }
}

/* FIX: Overschrijf de standaard margin van de Storefront breadcrumb */
.storefront-breadcrumb {
    margin-bottom: 1rem !important; /* 16px, was ~20px */
}

/* NIEUW: Verwijder de extra padding binnen de breadcrumb voor correcte uitlijning */
.storefront-breadcrumb .col-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Zorg dat prijs getoond wordt met passend font-weight/size */
.product-price .price {
    font-weight: 400 !important;
    font-size: 1.625rem; /* pas aan indien nodig */
    font-weight: 800;
}

/* ==========================================================================
   SUBBRAND CARD STYLING FIXES
   ========================================================================== */

/* Maak thumbnail-border duidelijker en iets groter */
.subbrand-card .subbrand-thumb img,
.subbrand-card .empty-thumb {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: contain;
    display: block;
    background: #fff;
}

/* Brillance (subbrand naam) groter en in accentkleur */
.subbrand-card .subbrand-name {
    font-size: 1.2rem; /* groter */
    color: #d31d5a;     /* paarse accentkleur */
    font-weight: 500;
}

/* Bekijk CTA: iets groter, zwart en zonder pijl */
.subbrand-card .subbrand-cta {
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Kleinere afstand onder hero / compactere grid spacing */
.subbrand-debug { margin-top: 0.5rem; margin-bottom: 0.75rem; }

/* HORIZONTALE SUBBRAND SCROLLER */
.subbrand-scroll{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  align-items: stretch;
}

/* visible scrollbar styling (optional) */
.subbrand-scroll::-webkit-scrollbar{ height:8px; }
.subbrand-scroll::-webkit-scrollbar-thumb{ background:#e9cfd9; border-radius:8px; }

/* card width: 5 per view on desktop */
.subbrand-card{
  flex: 0 0 calc(20% - 0.8rem);
  max-width: calc(20% - 0.8rem);
  scroll-snap-align: start;
  align-items: center;
}

/* tablet: 3 per view */
@media (max-width: 1023px){
  .subbrand-card{ flex:0 0 calc(33.333% - 0.66rem); max-width: calc(33.333% - 0.66rem); }
}

/* mobile: 2 per view */
@media (max-width: 640px){
  .subbrand-card{ flex:0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
}

/* small visual fixes */
.subbrand-card .subbrand-thumb img,
.subbrand-card .empty-thumb{
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  display:block;
}

/* prevent text selection while dragging */
.subbrand-scroll.dragging, .subbrand-scroll.dragging *{ user-select: none; -webkit-user-select: none; }

/* reduce vertical gap between hero and subbrands */
.brand-hero + .subbrand-scroll { margin-top: 0.5rem; }

/* Mini brand search: white with purple border and clear (X) button */
.mini-search-wrapper { position: relative; }
.mini-search-input {
    background: #fff;
    border: 2px solid #d31d5a; /* paarse rand */
    border-radius: 8px;
    padding: 10px 36px 10px 12px; /* ruimte rechts voor clear knop */
    color: #333;
    box-shadow: none;
}
.mini-search-input::placeholder { color: #bfa1ab; }

/* clear knop (X) rechts in het veld */
.mini-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #d31d5a;
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mini-search-clear.hidden { display: none; }

/* kleine focus styling */
.mini-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(211,29,90,0.08);
}

/* Forceer mini search wit achtergrond en paarse rand (ook bij autofill) */
.mini-search-input {
    background: #ffffff !important;
    border-color: #d31d5a !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    color: #333 !important;
}

/* Houd de paarse rand op hover/focus */
.mini-search-input:hover,
.mini-search-input:focus,
.mini-search-input:active {
    border-color: #d31d5a !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(211,29,90,0.06) !important;
}

/* Voorkom grijze autofill achtergrond in Chrome */
.mini-search-input:-webkit-autofill,
.mini-search-input:-webkit-autofill:focus,
.mini-search-input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #333 !important;
}

/* Placeholder kleur iets lichter */
.mini-search-input::placeholder { color: #bfa1ab !important; }


/* stronger pink->white gradient, plus soft white veil to make image vager */
.custom-hero {
    background-image: url('https://sarlemijn.com/wp-content/uploads/2026/03/9d71fec58f4fbf23ea7b19379e049d7b5f42915f-1-scaled-1-resized-to-medium.jpeg');
    background-size: cover;
    background-position: center;
    min-height: 520px;
}

/* soft white veil under the gradient to fade the photo overall */
.custom-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.32); /* adjust 0.2-0.45 to taste */
    z-index: 1;
    pointer-events: none;
}

/* stronger left pink that fades to full white on the right */
.custom-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(211,29,90,0.95) 0%,
        rgba(211,29,90,0.65) 28%,
        rgba(255, 157, 182, 0.82) 62%,
        rgb(252, 233, 239, 0.82) 100%);
    z-index: 2;
    pointer-events: none;
}

/* content above overlays */
.custom-hero-inner{
    position: relative;
    z-index: 3;
    padding-left: 3rem;
    padding-right: 2rem;
}

/* prevent weird word-break on the hero title and allow longer lines */
.custom-hero-inner h1 {
    white-space: normal !important;
    word-break: normal !important;
    hyphens: auto;
    max-width: 68rem; /* increase/decrease to taste */
    line-height: 1.05;
}

/* keep text white on large hero; on small screens it switches in the existing rules */
.custom-hero-inner h1,
.custom-hero-inner p {
    color: #ffffff;
}

/* Minder ruimte tussen hero en intro sectie */
/* reduce top gap for the intro H2 under the hero */
.custom-hero-wrap + section h2,
.custom-hero-wrap + section .text-3xl {
    margin-top: 20px !important;
}
/* Optioneel: iets minder min-height als hero te hoog voelt */
.custom-hero {
    min-height: 320px; /* verlaag indien nodig (default was 380px) */
}

/* Nieuw binnen: full-width top->bottom roze naar wit gradient */
.nieuw-binnen-section {
    width: 100%;
    box-sizing: border-box;
    /* full-bleed vertical gradient: adjust alpha/stops to taste */
    background: linear-gradient(180deg,
        rgba(211,29,90,0.10) 0%,
        rgba(211,29,90,0.06) 18%,
        rgba(255,255,255,0.80) 60%,
        #ffffff 100%);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.nieuw-binnen-populair {
    background: linear-gradient(180deg,
        #ffffff 0%,
        rgba(255,255,255,0.88) 20%,
        rgba(211,29,90,0.06) 60%,
        rgba(211,29,90,0.12) 100%);
}

/* Houd inhoud gecentreerd en wit achtergrond voor controls if necessary */
.nieuw-binnen-section .product-slider-container,
.nieuw-binnen-section .product-slider-track li {
    background: transparent;
}

/* Optioneel: subtiele divider color under header to blend with gradient */
.nieuw-binnen-section header {
    border-color: rgba(211,29,90,0.06);
}

/* Responsive tweak: minder vertical padding on small screens */
@media (max-width: 768px) {
    .nieuw-binnen-section { padding-top: 2rem; padding-bottom: 2rem; }
    .nieuw-binnen-section .product-slider-track li { width: calc(50% - 1rem); } /* fallback narrow slides */
}

/* Mid CTA banner (white section with purple/pink rounded banner) */
.mid-cta-section { background: #fff; }

.mid-cta-banner{
    /* Breder: gebruik volle breedte van container en grotere max-width */
    width: 100%;
    max-width: 1200px; /* verhoogd zodat banner breder wordt */
    margin-left: auto;
    margin-right: auto;

    /* Vast egale kleur (geen gradient) zoals gevraagd */
    background: #d21b52;

    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 2rem;
    background-size: cover;
    background-position: center;

    /* Zorg dat de banner binnen de witte section ruimte houdt op kleinere schermen */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Kleine aanpassingen tekst / knop */
.mid-cta-title {
    font-size: 1.75rem;
    line-height: 1.05;
    color: #fff;
}

.mid-cta-sub {
    opacity: 0.95;
    margin-bottom: 0.75rem;
    color: #fff;
}

.mid-cta-btn {
    background: #ffffff;
    color: #d21b52;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 6px 12px rgba(210,27,82,0.12);
    text-decoration: none;
    display: inline-block;
}

/* Responsive */
@media (max-width: 1024px) {
    .mid-cta-banner { max-width: 940px; }
}
@media (max-width: 768px) {
    .mid-cta-banner { padding: 1rem; border-radius: 10px; }
    .mid-cta-title { font-size: 1.25rem; }
}

/* Shop op merk (light pink rounded brand buttons) */
.shop-merks-section { background: #fff; }

.shop-merks-section .brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    align-items: center;
    justify-items: center;
    max-width: 100px;
    margin: 0 auto;
}

/* Each brand 'button' */
.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    height: 104px;
    background: #ffffff;                      /* wit */
    border: 1px solid rgba(210,29,90,0.16);   /* subtiele roze rand */
    border-radius: 12px;
    padding: 0.75rem;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

/* Hover emphasis: duidelijkere roze rand en lichte lift */
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(210,29,90,0.06);
    border-color: #d21b52;
}

/* Logo inside card */
.brand-card img {
    max-height: 68px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: none; /* zorg dat logo kleuren behouden blijven */
}

/* Fallback brand name when no image */
.brand-card .brand-name {
    font-weight: 600;
    color: #c2185b;
    font-size: 0.95rem;
}

/* Responsive tweaks */
@media (max-width: 640px) {
    .brand-card { height: 72px; border-radius: 10px; }
    .shop-merks-section .brand-grid { gap: 0.75rem; }
}

/* Shop op categorie — roze achtergrond, draggable carousel */
.shop-categorie-section {
    background: #fff2f6; /* zacht roze achtergrond voor de hele sectie */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.categorie-carousel { position: relative; }

.categorie-track-wrapper {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding: 0.25rem 1rem; /* minder horizontale ruimte */
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.categorie-track { display: flex; gap: 1rem; align-items: stretch; }

/* kaart / knop - image onder overlay, label erboven */
.categorie-card {
    width: 260px;
    height: 140px;
    border-radius: 12px;
    display: block;
    background-color: #f8eaf0; /* fallback */
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    transition: transform .16s ease, box-shadow .16s ease;
    text-decoration: none;
    border: 1px solid rgba(210,29,90,0.06);
    position: relative; /* nodig voor overlay & label */
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* sterke paarse overlay zodat image nauwelijks zichtbaar is */
.categorie-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(210,29,90,0.84); /* pas opacity indien nodig */
    z-index: 2;
}

/* categorie label (wit, boven de overlay) */
.categorie-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.0rem;
    z-index: 3; /* boven overlay */
    text-align: center;
    padding: 0 8px;
    pointer-events: none;
}

/* hover: iets minder overlay opacity zodat image even zichtbaar wordt */
.categorie-card:hover::after {
    background: rgba(210,29,90,0.70);
}

/* responsive tweaks */
@media (max-width: 1024px) {
    .categorie-card { width: 220px; height: 128px; }
}
@media (max-width: 640px) {
    .categorie-card { width: 180px; height: 110px; }
}

/* betere container spacing en minder full-bleed gevoel */
.shop-categorie-section .max-w-7xl {
    max-width: 1100px; /* gelijk aan andere secties */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.shop-merks-section,
.shop-categorie-section {
    /* maak de secties duidelijk hoger */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* extra ruimte onder de section header */
.shop-merks-section header,
.shop-categorie-section .w-1\/4 {
    margin-bottom: 24px !important;
}

/* zorg dat de inner container niet uitrekt en past bij andere secties */
.shop-merks-section .max-w-7xl,
.shop-categorie-section .max-w-7xl,
.shop-categorie-section .max-w-7xl > .flex,
.shop-merks-section .brand-grid {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* als je nog utility-classes (py-12) gebruikt die conflicteren: overschrijf die ook */
section.shop-merks-section.py-12,
section.shop-categorie-section.py-12 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}


/* Blog section */
.blog-section { background: #fff; padding-top: 50px; padding-bottom: 50px; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1280px; /* FIX: Verbreed van 1100px naar 1280px */
    margin: 0 auto;
}

.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,0.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }

.blog-card-link { text-decoration: none; color: inherit; display: block; }

.blog-card-hero {
    width: 100%;
    height: 220px; /* FIX: Verhoogd van 200px naar 240px */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

/* placeholder if no image */
.blog-card-hero.placeholder { background: linear-gradient(180deg,#fbf6f8,#f6f0f2); }

.blog-card-body { padding: 28px; } /* FIX: Verhoogd van 18px naar 28px */

.blog-card-cat {
    font-size: 12px;
    color: #9b6b7a;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.blog-card-title {
    color: #d21b52;
    font-size: 20px; /* FIX: Verhoogd van 18px naar 20px */
    font-weight: 700;
    margin: 0 0 10px 0;
}

.blog-card-cta {
    color: #d21b52;
    font-weight: 600;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-hero { height: 180px; }
}

/* Product shop card adjustments */
.product-card { list-style: none; padding: 0; }
.product-image {
    position: relative;
    background: #fff;
    padding-top: 100%;     /* houdt de kaart vierkant */
    height: 0;             /* hoogte wordt via padding-top bepaald */
    overflow: hidden;
}
.product-image img,
.product-image .product-card-thumb {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    padding: 25px;
}
.product-brand { color: #9b6b7a; font-size: 12px; margin-bottom: 6px; }
.product-title a { color: #d21b52; text-decoration: none; }
.product-price { color: #d21b52; }
.product-buy-row .qty-input { width: 72px; text-align: center; border: 1px solid #ece7ea; background: #fff; }
.inline-add-to-cart { gap: 10px; }
.btn-add-to-cart { display: inline-flex; align-items: center; gap: 8px; }
.btn-view-product { display: inline-block; }

/* Vergroot product gallery image: maak hoofdafbeelding groter en centreer */
.product-gallery-wrapper { 
    /* verhoog de minimale hoogte zodat de grijze achtergrond groter wordt */
    min-height: 680px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zorg dat de WooCommerce gallery wrapper ook centreert */
.woocommerce-product-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Laat de hoofdafbeelding groter renderen (ongeveer 3x groter dan kleine weergave) */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper .wp-post-image {
    width: auto !important;
    max-width: 480px !important; /* vergroot naar ca. 480px breed */
    height: auto !important;
    object-fit: contain !important;
}

/* Optioneel: voorkom dat thumbnails de layout krimpen */
.woocommerce-product-gallery__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Strakkere spacing voor product cards */
.product-card .p-5,
.product-card .product-card-body {
    padding: 12px !important;
    gap: 6px !important; /* overschrijf flex gap uit utility classes */
}

/* Verwijder standaard margins op titels/teksten */
.product-card .product-brand,
.product-card .product-title,
.product-card .product-price,
.product-card .product-buy-row,
.product-card .product-card-body > .text-xs {
    margin: 0 !important;
    padding: 0 !important;
}

/* Specifieke kleine spacing tussen regels */
.product-card .product-brand { margin-bottom: 4px !important; font-size: 12px; }
.product-card .product-title { margin-bottom: 4px !important; line-height: 1.15; font-size: 15px; }
.product-card .product-price { margin-bottom: 6px !important; }

/* Compact buy row */
.product-buy-row { margin-top: 6px !important; margin-bottom: 6px !important; }
.product-buy-row .qty-input { margin: 0 !important; vertical-align: middle; }

/* Stock lijn compacter */
.product-card .text-xs.font-semibold { margin-top: 6px !important; }

/* Verwijder extra witte ruimte onder image */
.product-card .product-image .absolute.inset-0 { padding: 6px !important; }

/* Mobile: even strakker */
@media (max-width: 640px) {
    .product-card .p-5 { padding: 10px !important; gap: 6px !important; }
    .product-buy-row { gap: 8px !important; }
}

.product-buy-row .inline-add-to-cart,
.product-buy-row .qty-input,
.product-buy-row .btn-add-to-cart {
    margin: 0 !important;
    vertical-align: middle;
}

/* ========================================================================== */
/* Mega menu styling voor "Merken" */
/* ========================================================================== */
.header-bottom-bar {
    position: relative;
    overflow: visible; /* voorkom afknippen */
}

.category-menu-list > li.mega-menu-parent {
    position: static;
}

.category-menu-list > li.mega-menu-parent > a {
    position: relative;
    z-index: 3;
}

.category-menu-list > li.mega-menu-parent .mega-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(122, 37, 82, 0.12);
    border-bottom: 3px solid #f4d3e1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 2;
}

/* Mega-lade: laat paneel 1px overlappen met de menubalk */
.category-menu-list > li.mega-menu-parent .mega-menu-panel {
    top: calc(100% - 1px); /* trekt ‘m 1px omhoog */
}

/* Binnenkant: geen top-glow, subtiele toprand zodat het uit de rij komt */
.mega-menu-panel-inner {
    /* schaduw alleen naar beneden (negatieve spread reduceert glow boven) */
    box-shadow: 0 24px 60px -20px rgba(122, 37, 82, 0.16) !important;
    border-top: 1px solid #f1dfeb;     /* subtiele toprand */
    border-bottom: 3px solid #f4d3e1;  /* bestaande onderrand */
    border-radius: 0 0 12px 12px;      /* geen afgeronde top-rand */
}

/* Optioneel: verwijder elke topglow volledig door te clippen binnen het panel */
.category-menu-list > li.mega-menu-parent .mega-menu-panel {
    overflow: hidden; /* knipt evt. restschaduw boven af */
}

.category-menu-list > li.mega-menu-parent:hover .mega-menu-panel,
.category-menu-list > li.mega-menu-parent:focus-within .mega-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-panel-inner {
    max-width: 1200px; /* was 1120px */
    width: 100%;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    gap: 48px;
}

.mega-menu-left {
    flex: 1 1 0;
}

.mega-menu-search {
    margin-bottom: 20px;
}

.mega-menu-search-input {
    width: 100%;
    border: 1px solid #e7cddb;
    border-radius: 9999px;
    padding: 13px 22px;
    font-size: 16px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(210, 27, 82, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mega-menu-search-input:focus,
.mega-menu-search-input:hover {
    outline: none;
    border-color: #d21b52;
    box-shadow: 0 0 0 3px rgba(210, 27, 82, 0.15);
}

.mega-menu-list-wrapper {
    max-height: 230px; /* Hoogte voor ca. 5 rijen (5 * (itemhoogte + gap)) */
    overflow-y: auto;
    padding-right: 12px;
}

.mega-menu-brand-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: column; /* BELANGRIJK: vult eerst kolommen, dan rijen */
    grid-template-rows: repeat(5, auto); /* Definieer 5 rijen */
    gap: 8px 24px;
}

.mega-menu-brand-list li {
    margin: 0;
}

.mega-menu-brand-list a {
    display: block;
    padding: 6px 0;
    color: #31232a;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mega-menu-brand-list a:hover,
.mega-menu-brand-list a:focus {
    color: #d21b52;
}

.mega-menu-right {
    flex: 0 0 240px;
    padding-left: 32px;
    border-left: 1px solid #f1dfeb;
}

.mega-menu-right-title {
    font-size: 18px;
    font-weight: 700;
    color: #7a1b56;
    margin-bottom: 12px;
}

.mega-menu-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.mega-menu-top-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #31232a;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease, transform 0.15s ease;
}

.mega-menu-top-list li a::before {
    content: "★";
    color: #d21b52;
    font-size: 14px;
}

.mega-menu-top-list li a:hover,
.mega-menu-top-list li a:focus {
    color: #d21d5a;
    transform: translateX(4px);
}

.mega-menu-list-wrapper::-webkit-scrollbar {
    width: 8px;
}

.mega-menu-list-wrapper::-webkit-scrollbar-track {
    background: #fbeff5;
    border-radius: 8px;
}

.mega-menu-list-wrapper::-webkit-scrollbar-thumb {
    background: #d58aa7;
    border-radius: 8px;
}

@media (max-width: 1023px) {
    .category-menu-list > li.mega-menu-parent .mega-menu-panel {
        position: static;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
    }

    .mega-menu-panel-inner {
        flex-direction: column;
        padding: 16px 20px 24px;
        gap: 24px;
    }

    .mega-menu-right {
        border-left: none;
        padding-left: 0;
    }

    .mega-menu-brand-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .mega-menu-list-wrapper {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* === Mega menu container moet over volledige header kunnen vallen === */
.header-bottom-bar {
    position: relative;
    overflow: visible; /* voorkom afknippen */
}

/* === BELANGRIJK: voorkom dat transform op <li> de containing block wordt === */
/* Zet algemene transform uit (overschrijft de eerdere translateZ(0)) */
.category-menu-list > li {
    transform: none;
}

/* Houd de kleine hover-lift voor andere items, maar NIET voor 'Merken' */
.category-menu-list > li:hover {
    transform: translateY(-1px);
}

/* Specifiek voor mega parent: nooit transformeren (ook niet bij hover) */
.category-menu-list > li.mega-menu-parent,
.category-menu-list > li.mega-menu-parent:hover {
    transform: none !important;
}

/* Mega-panel moet over de volle breedte van de header kunnen */
.category-menu-list > li.mega-menu-parent {
    position: static; /* offset parent = .header-bottom-bar */
}

/* Reset standaard dropdown-styling voor submenu binnen mega */
.category-menu-list > li.mega-menu-parent ul.sub-menu {
    position: static;
    top: auto; left: auto;
    display: block;          /* we tonen via het mega-panel */
    min-width: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
}

/* Paneel full-bleed; inner gecentreerd op 1200px (desktop headerbreedte) */
.category-menu-list > li.mega-menu-parent .mega-menu-panel {
    position: absolute;
    left: 0; right: 0; top: 100%;
    width: 100%;
}

.mega-menu-panel-inner {
    max-width: 1200px; /* was 1120px */
    width: 100%;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    gap: 48px;
}

/* Mega-lade: achtergrond en schaduw alleen binnen de container laten vallen */
.category-menu-list > li.mega-menu-parent .mega-menu-panel {
    background: transparent !important; /* was wit over full page */
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* De zichtbare lade (wit + schaduw) is nu alleen de inner container */
.mega-menu-panel-inner {
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(122, 37, 82, 0.12);
    border-bottom: 3px solid #f4d3e1;
    max-width: 1200px;      /* gelijk aan header-breedte */
    margin: 0 auto;         /* centreer binnen de header */
    padding: 32px 40px;
}

/* Mobile: schaduw/border weghalen zoals eerder bedoeld */
@media (max-width: 1023px) {
    .mega-menu-panel-inner {
        box-shadow: none;
        border: 0;
    }
}

/* ===== Mobiele header ===== */
.mobile-header {
    display: none;
    height: 56px;
    background: #d21d5a; /* paars */
    color: #fff;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
}
.mobile-header .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    border: 0;
}
.mobile-header .icon-btn:hover { background: rgba(255,255,255,0.12); }
.mobile-left, .mobile-right { display:flex; align-items:center; gap:6px; }
.mobile-logo img { height: 28px; width: auto; display:block; }

/* Zoekbalk (mobiel) — altijd zichtbaar onder mobile header */
.mobile-search-panel {
    background: #ffffff;
    border-bottom: 1px solid #f1dfeb;
    padding: 10px;
    z-index: 9999;
}
.mobile-search-panel.active { transform: translateY(0); }
.mobile-search-panel form { display:flex; gap:8px; }
.mobile-search-panel input {
    flex: 1 1 auto;
    border: 1px solid #d21b52;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
}
.mobile-search-panel button {
    border: 0; background: #d21b52; color: #fff;
    border-radius: 10px; padding: 0 12px;
}

/* Off-canvas mobiele menu */
.mobile-menu-overlay {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: 138px;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}
.mobile-drawer {
    position: fixed;
    top: 138px;
    left: 0;
    width: 84vw; max-width: 360px;
    height: calc(100vh - 138px);
    background: #fff;
    box-shadow: 4px 0 30px rgba(0,0,0,0.2);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 9999;
    display: flex; flex-direction: column;
}
.mobile-drawer-header {
    display:flex; align-items:center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #f2e6ee;
    font-weight: 700; color: #d21d5a;
}
.mobile-menu-list { list-style:none; margin:0; padding: 8px 0; }
.mobile-menu-list > li > a {
    display:block; padding: 14px 16px;
    text-decoration:none;
    color:#31232a; font-weight:600;
    border-bottom: 1px solid #f6edf3;
}
.mobile-menu-list li.menu-item-has-children > a { position: relative; }
.mobile-menu-list li.menu-item-has-children > a::after{
    content:""; width:8px; height:8px;
    border-right:2px solid #d21d5a; border-bottom:2px solid #d21d5a;
    position:absolute; right:16px; top:50%; transform: translateY(-50%) rotate(45deg);
}
.mobile-menu-list .sub-menu {
    list-style:none; margin: 0; padding: 0 0 8px 12px;
    display: none; background: #fff;
}
.mobile-menu-list li.open > .sub-menu { display:block; }
.mobile-menu-list .sub-menu a {
    padding: 12px 16px; font-weight: 500; color: #4b3a41;
    border-bottom: 1px dashed #f3e6ef;
}

/* Toon mobiel, verberg desktop header op kleine schermen */
@media (max-width: 1023px) {
    /* Voorkom horizontaal scrollen op mobiel (voorkomt header uitrekken) */
    html, body, #page {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .mobile-header { display:flex; }
    .header-top-bar, .header-bottom-bar { display:none !important; }
    body.mobile-menu-open .mobile-drawer { transform: translateX(0); }
    body.mobile-menu-open #mobileMenuOverlay { display:block; }

    /* Hele site-header wordt fixed bovenaan op mobiel */
    #masthead.site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }

    /* Spacer via body padding: announcement(~30px) + header(56px) + zoekbalk(~52px) */
    body {
        padding-top: 138px;
    }

    /* WP Admin Bar correctie */
    .admin-bar #masthead.site-header {
        top: 32px;
    }
    body.admin-bar {
        padding-top: 170px;
    }
}

/* Desktop laat overlay/drawer nooit zien zonder class */
@media (min-width: 1024px) {
    #mobileMenuOverlay { display:none !important; }
}

/* Kleine polishing voor tap targets */
@media (hover: none) {
    .mobile-header .icon-btn:hover { background: transparent; }
}

/* CSS var voor mobiele header-hoogte (gebruikt door overlay/drawer) */
:root { --mobile-header-h: 56px; }


/* DESKTOP / BASIS: laat alle items gewoon naast elkaar zien (zoals nu) */
.announcement-bar {
    background: #d21d5a;
    color: #fff;
    width: 100%;
}

.announcement-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6px 16px;
}

.announcement-list {
    list-style: none;
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
    gap: 100px;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    line-height: 1.2;
    flex-wrap: wrap;
}

.announcement-list li {
    white-space: nowrap;
    opacity: .95;
}

.announcement-list strong {
    font-weight: 700;
    color: #fff;
}

/* MOBIEL: smalle balk, 1 item tegelijk via .is-active die je JS al zet */
@media (max-width: 1023px) {
    .announcement-inner {
        padding: 4px 10px;
    }

    .announcement-list {
        position: relative;
        display: block;        /* we gaan de li's stacken */
        height: 1.2em;         /* vaste, kleine hoogte */
        gap: 0;
        justify-content: center;
        flex-wrap: nowrap;
        font-size: 11px;
    }

    .announcement-list li {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .announcement-list li.is-active {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zorg dat overlay/drawer echt onder de mobiele header beginnen */
.mobile-menu-overlay { top: 138px; }
.mobile-drawer { top: 138px; height: calc(100vh - 138px); }

/* Desktop header: iets meer verticale ademruimte */
.header-top-bar .max-w-7xl {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
}

/* Middenkolom met zoekbalk centreren */
.header-search-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 4px 16px 0; /* iets naar beneden */
}

/* Moderne grote zoekbalk */
.header-search-form { position: relative; width: 100%; max-width: 720px; }
.header-search-input {
    width: 100%;
    height: 52px;
    padding: 0 56px 0 18px;             /* ruimte voor knop rechts */
    border: 2px solid #f1dfeb;
    border-radius: 9999px;
    background: #ffffff;
    font-size: 16px;
    color: #31232a;
    box-shadow: 0 10px 24px rgba(210,29,82,0.06);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s;
    margin-top: 30px;
}
.header-search-input::placeholder { color: #bfa1ab; }
.header-search-input:focus {
    outline: none;
    border-color: #d21b52;
    box-shadow: 0 0 0 4px rgba(210,29,82,0.12);
    background: #fff;
}

/* Ronde zoekknop in het veld */
.header-search-submit {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border: 0;
    border-radius: 9999px;
    background: #d21b52;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(210,29,82,0.18);
    cursor: pointer;
        margin-top: 15px;
}
.header-search-submit:hover { filter: brightness(1.05); }

/* Verwijder oude fix die ‘m omhoog duwde */
.search-align-fix { margin-top: 0 !important; }
/* === Minimalistische desktop navigatie (zwarte tekst, gecentreerd) === */
.header-bottom-bar .main-category-nav { display: flex; justify-content: center; }
.header-bottom-bar .main-category-nav .category-menu-list {
    justify-content: center;
    gap: 28px;                         /* ruimte tussen items */
    background: transparent !important;
    padding: o !important;
}

/* Items: geen blok-achtergrond, auto-breedte, lagere hoogte */
.category-menu-list > li {
    flex: 0 0 auto !important;
    background: transparent !important;
height: auto !important; /* FIX: Verwijder vaste hoogte */
    margin: 0 !important;
    transform: none !important;        /* geen lift op hover */
    border: 0 !important;
}

/* Verwijder overlap-hack */
.category-menu-list > li + li { margin-left: 0 !important; }

/* Tekststijl en centreren */
.category-menu-list > li > a {
    color: #1f2937 !important;         /* bijna zwart */
    font-weight: 600;
    font-size: 15px;
    line-height: 44px !important;
    padding: 0 !important;
    text-decoration: none;
    text-align: center;
    background: transparent !important;
}

/* Hover/focus: paarse tekstkleur */
.category-menu-list > li > a:hover,
.category-menu-list > li:focus-within > a,
.category-menu-list > li.current-menu-item > a,
.category-menu-list > li.current_page_item > a {
    color: #d21d5a !important;
}

/* Optionele subtiele scheiders tussen items */
.category-menu-list > li + li { position: relative; }
.category-menu-list > li + li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(0,0,0,0.12);
}

/* Verwijder chevron icoontje bij items met submenu (clean look) */
.category-menu-list > li.menu-item-has-children > a { padding-right: 0 !important; }
.category-menu-list > li.menu-item-has-children > a::after { display: none !important; }

/* Zorg dat mega-menu gedrag ongewijzigd blijft */
.category-menu-list > li.mega-menu-parent,
.category-menu-list > li.mega-menu-parent:hover {
    transform: none !important;
    background: transparent !important;
}

/* Iets meer lucht boven/onder de navigatiebalk */
.header-bottom-bar { padding: 0px 0; }

/* Sticky desktop header (onder announcement bar) */
.sticky-header {
    position: sticky;
    top: var(--sticky-top, 0px);
    z-index: 9998;
    background: #fff; /* zodat menu/zoekbalk niet transparant is */
}
.sticky-header.is-stuck {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Op mobiel geen desktop-sticky nodig (je hebt daar al een mobiele sticky header) */
@media (max-width: 1023px) {
    .sticky-header { position: static; box-shadow: none; }
}

/* CSS var voor sticky header positie/hoogte (gebruikt door sticky-header class) */
:root { --sticky-top: 0px; --sticky-h: 0px; }

/* Default: mobiel geen fixed (je hebt al mobile header) */
.sticky-header {
    background: #fff;
    z-index: 9998;
}

/* Desktop: fixed header */
@media (min-width: 1024px) {
    .sticky-header {
        position: fixed;
        top: var(--sticky-top);
        left: 0;
        right: 0;
        width: 100%;
        box-shadow: none;
        transition: top .18s ease; /* soepel omhoog/omlaag */
    }
    .sticky-header.is-stuck {
        box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    }
    /* Spacer neemt de hoogte van de fixed header over */
    .sticky-spacer {
        height: var(--sticky-h);
        width: 100%;
    }
}

/* Mobiel: geen spacer nodig */
@media (max-width: 1023px) {
    .sticky-spacer { height: 0; }
    .sticky-header { position: static; }
}
/* Zoekbalk verticaal exact in het midden van de header-rij (desktop) */
@media (min-width: 1024px) {
  /* Maak de hele topbar-rij een flex container en centreer verticaal */
  .header-top-bar .max-w-7xl {
    display: flex !important;
    align-items: center !important;
  }

  /* Centreer de search-container zelf */
  .header-search-center {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Centreer ook de inhoud van het formulier */
  .header-search-form {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Verwijder alle verticale marges op het veld en centreer de knop in het veld */
  .header-search-input {
    height: 44px !important;
    line-height: 44px !important;
    margin: 0 !important;
  }
  .header-search-submit {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* Verberg 'Clear' (reset variaties) en prijs/voorraad onder variaties */
form.variations_form .reset_variations { display: none !important; }
.single_variation .price,
.woocommerce-variation-price,
.single_variation .stock,
.woocommerce-variation-availability { display: none !important; }

/* Add-to-cart rij zoals voorbeeld */
.sarlemijn-atc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sarlemijn-atc .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6e0e4;
    border-radius: 12px;
    overflow: hidden;
    height: 44px;
    background: #fff;
}
.sarlemijn-atc .quantity input.qty {
    width: 68px;
    height: 100%;
    text-align: center;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-weight: 600;
}
.sarlemijn-atc .qty-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #fff;
    color: #d21b52;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.sarlemijn-atc .qty-minus { border-right: 1px solid #f0e8ec; }
.sarlemijn-atc .qty-plus  { border-left: 1px solid #f0e8ec; }

/* Groen CTA – actief (simple product of variatie geselecteerd) */
.sarlemijn-atc .single_add_to_cart_button,
.sarlemijn-atc button.single_add_to_cart_button.button.alt {
    background: #1fb54a !important;
    color: #fff !important;
    border-radius: 10px !important;
    height: 44px;
    padding: 0 18px !important;
    font-weight: 700 !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(31,181,74,0.22);
}
.sarlemijn-atc .single_add_to_cart_button:hover { filter: brightness(1.05); }

/* Variable product: knop disabled tot variatie geselecteerd */
.sarlemijn-atc .single_add_to_cart_button.disabled,
.sarlemijn-atc .single_add_to_cart_button:disabled,
.sarlemijn-atc .single_add_to_cart_button.wc-variation-is-unavailable {
    background: #d1d5db !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Betaalmethodes badges */
.payment-badges {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 10px 0 0 0;
    padding: 0;
    align-items: center;
}
.payment-badges .pm {
    height: 30px; min-width: 44px;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #c2c2c2;
}
.pm-ideal      { background:#ff2e83; }
.pm-applepay   { background:#000; }
.pm-visa       { background:#1a1f71; }
.pm-klarna     { background:#ffb3c7; color:#3a2a2a; }
.pm-mastercard { background:#eb001b; }
.pm-maestro    { background:#0a4aaa; }
.pm-bancontact { background:#0055ff; }
.pm-gpay       { background:#4285f4; }

/* Maak de knop + qty op 1 regel (breekt netjes naar 2e regel op kleine breedte) */
@media (max-width: 520px){
  .sarlemijn-atc { gap: 10px; }
}

/* Grote image kaart: vierkant, 1px border, extra witruimte */
#main-product-image-wrapper{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 18px;               /* was 14px -> iets meer witruimte */
  aspect-ratio: 1 / 1;         /* even hoog als breed */
}

/* Fallback voor oude browsers zonder aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  #main-product-image-wrapper { position: relative; }
  #main-product-image-wrapper::before{ content:""; display:block; padding-top:100%; }
  #main-product-image-wrapper > *{ position:absolute; inset:14px; }
}

/* Foto netjes gecentreerd met ruimte eromheen */
#main-product-image{
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: 92% !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Breadcrumb: echt links, geen extra ruimte */
.sarlemijn-product-container .product-breadcrumb{
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;   /* overschrijft eerdere negatieve margins */
  margin-right: 0 !important;
}
.sarlemijn-product-container .product-breadcrumb .woocommerce-breadcrumb{
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  line-height: 1.25;
}
/* --- Product rich content onder vergelijkbare producten --- */
.prc-title{
  color:#d21d5a;
  font-weight:800;
  font-size: clamp(22px, 2.4vw, 28px);
  margin:0 0 18px 0;
  padding-bottom:6px;
  border-bottom:3px solid #d21d5a;
  display:inline-block;
}
.prc-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 32px);
}
@media(min-width:1024px){
  .prc-grid{ grid-template-columns: 1fr 1fr; }
}
.prc-col h3{
  color:#111827;
  font-weight:800;
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 24px 0 8px;
}
.prc-col p{ margin: 0 0 12px; line-height:1.7; color:#374151; }

/* Voordelen kaart */
.benefits-card{
  margin-top: 28px;
  background:#fde7f1;
  border-radius:14px;
  padding:20px;
}
.benefits-card h3{
  color:#d21d5a;
  margin:0 0 10px 0;
}
.checklist{
  list-style:none;
  margin:0; padding:0;
}
.checklist li{
  position:relative;
  padding-left:28px;
  margin:10px 0;
  color:#374151;
}
.checklist li::before{
  content:'✓';
  position:absolute; left:0; top:0;
  color:#d21d5a; font-weight:700;
}

/* --- Custom footer (scoped) --- */
.sarlemijn-footer{
  position: relative;
  background:#fff;
  overflow:hidden;
  border-top:1px solid #f6d7e3;

  /* Watermark vars */
  --wm-size: clamp(120px, 18vw, 420px);
  --wm-overlap: 0.25;              /* 25% onder glassy bar laten vallen */
  --wm-color: #f4cdd8;
  --wm-weight: 600;                /* minder bold */
  --wm-bottom-gap: 14px;           /* net niet tegen de bodem */
}

/* NIEUW: Styling voor de nieuwsbrief-aanmelding */
.sf-newsletter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-newsletter input[type="email"] {
  width: 100%;
  border: 1px solid #e5e7eb; /* Subtiele grijze rand */
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  background: #fff;
  box-shadow: none;
  -webkit-appearance: none;
}

.sf-newsletter input[type="email"]:focus {
  outline: none;
  border-color: #d21b52;
  box-shadow: 0 0 0 3px rgba(210, 27, 82, 0.1);
}

.sf-newsletter button[type="submit"] {
  width: 100%;
  background-color: #C6A661;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: filter .15s ease;
}

.sf-newsletter button[type="submit"]:hover {
  filter: brightness(1.05);
}


/* oude pseudo-watermark uit */
.sarlemijn-footer::after{ content: none !important; }

/* Container: +50px witruimte boven watermark */
.sarlemijn-footer .sf-container{
  max-width:1700px;
  margin:0 auto;
  padding:28px 24px 0px;          /* 50px extra onder */
  margin-top: 50px;
  position:relative;
  z-index:1;
}

/* H4 styling in footer (specifieker zodat niets het overschrijft) */
.sarlemijn-footer .sf-col h4{
  color:#d21d5a !important;
  font-weight:700 !important;
  margin:0 0 12px !important;
  font-size:16px;
}

/* Watermerk */
.footer-watermark{
  text-align:center;
  font-size: var(--wm-size);
  font-weight: var(--wm-weight);
  line-height: 1;
  color: var(--wm-color);
  margin: 0;
  padding-bottom: var(--wm-bottom-gap);
  pointer-events:none;
  user-select:none;
}

/* Glassy credits full width + overlap 1/4 */
.footer-credits{
  position: relative;
  z-index: 2;
  margin-top: calc(var(--wm-size) * -1 * var(--wm-overlap));
  background: rgba(255,255,255,0.6);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 -1px 0 rgba(210,27,82,0.05) inset, 0 6px 24px rgba(0,0,0,0.06);
  border-top: 1px solid rgba(255,255,255,0.75);
}

.footer-credits .sf-container{
  display: flex;
  align-items: center;
  justify-content: center;           /* tekst exact in het midden */
  text-align: center;
}

/* kleine fixes */
.sarlemijn-footer .sf-list{ margin:0; padding:0; list-style:none; }
.sarlemijn-footer .sf-list a{ color:#333; text-decoration:none; }
.sarlemijn-footer .sf-list a:hover{ color:#d21d5a; }
.sarlemijn-footer .sf-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 1.2fr;
  gap:40px 48px;
}
@media (max-width: 1024px){ .sarlemijn-footer .sf-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .sarlemijn-footer .sf-grid{ grid-template-columns:1fr; } }

/* Verwijder grijze ruimte rondom footer uit parent theme */
.site-content, #content, .content-area { margin-bottom:0 !important; padding-bottom:0 !important; }
.site-footer { margin-top:0 !important; padding-top:0 !important; background:#fff !important; }
.site-footer .col-full{ max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }

/* Optioneel: iets minder verticale padding in de footer zelf */
.sarlemijn-footer .sf-container{ padding-top: 28px; padding-bottom: 18px; }
.footer-credits .sf-container{ padding-top: 12px; padding-bottom: 12px; }

/* Footer mobile layout */
@media (max-width:1023px){
  .sarlemijn-footer .sf-container{ padding-left:16px; padding-right:16px; }
  .sarlemijn-footer .sf-grid{ grid-template-columns: 1fr; gap: 10px 0; }

  .sarlemijn-footer .col-brand{ text-align: center; }
  .sarlemijn-footer .sf-logo img{ max-width: 160px; height:auto; margin: 0 auto 6px; }

  /* Accordion button */
  .sarlemijn-footer .sf-acc-btn{
    -webkit-appearance: none; appearance: none;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #f1dfeb;
    border-radius: 10px;
    padding: 12px 42px 12px 14px;
    color: #d21d5a;
    font-weight: 700;
    cursor: pointer;
    position: relative;
  }
  /* caret */
  .sarlemijn-footer .sf-acc-btn::after{
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid #d21d5a; border-bottom: 2px solid #d21d5a;
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .18s ease;
  }
  .sarlemijn-footer .sf-acc-btn[aria-expanded="true"]::after{
    transform: translateY(-50%) rotate(-135deg);
  }
  .sarlemijn-footer .sf-acc-panel{ border-left: 2px solid #fde7f1; margin: 6px 0 10px 6px; padding: 6px 0 4px 10px; }
  .sarlemijn-footer .sf-acc-panel[hidden]{ display:none; }

  /* Lists inside panels */
  .sarlemijn-footer .sf-list li{ margin: 8px 0; }
  .sarlemijn-footer .sf-list a{ color:#333; text-decoration:none; }

  /* Watermark fits in one line on small screens */
  .sarlemijn-footer{ --wm-size: clamp(56px, 18vw, 96px); }
  .footer-watermark{ white-space: nowrap; overflow: hidden; }
}

/* Desktop: show panels as normal (always open) */
@media (min-width:1024px){
  .sarlemijn-footer .sf-acc-btn{ all: unset; color: #d21d5a !important; font-weight:700 !important; }
  .sarlemijn-footer .sf-acc-panel{ display:block !important; border:0; padding:0; margin:0; }
}
/* ...existing code... */

/* ========================================================================== */
/*  DEFINITIEVE MEGA MENU STYLING
/* ========================================================================== */

/* Zorg dat de navigatiebalk de positionering van het paneel kan bepalen */
.header-bottom-bar {
    position: relative !important;
}

/* Het 'Merken' menu-item zelf */
.mega-test-parent {
    position: static !important;
}

/* Het uitklap-paneel (de onzichtbare hover-brug) */
.mega-test-panel {
    /* Positionering */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;

    /* FIX: Maak de onzichtbare brug hoger om het gat te dichten */
    padding-top: 15px !important;
    margin-top: -15px !important;

    /* Maak de container zelf onzichtbaar */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* Interactie & Animatie met 0.5s vertraging bij verdwijnen */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease 0.5s, transform 0.2s ease 0.5s, visibility 0s linear 0.7s !important;
}

/* Toon het paneel bij hover (zonder vertraging) */
.mega-test-parent:hover > .mega-test-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
}

/* De zichtbare binnenkant van het paneel */
.mega-test-inner {
    /* Uiterlijk */
    background: #ffffff !important;
    /* FIX: Aangepaste schaduw die niet naar boven 'gloeit' */
    box-shadow: 0 15px 30px -5px rgba(122, 37, 82, 0.15) !important;
    border-bottom: 3px solid #f4d3e1 !important;
    border-radius: 0 0 12px 12px !important;
    
    /* FIX: Layout centreren via CSS, niet via JS */
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 32px 40px !important;
    display: flex !important;
    gap: 48px !important;
    align-items: flex-start !important;
}

.mega-test-left {
    flex: 1 !important;
    min-width: 0 !important;
}

.mega-test-right {
    flex: 0 0 240px !important;
    width: 240px !important;
    padding-left: 32px !important;
    border-left: 1px solid #f1dfeb !important;
}

/* Styling van de content */
.mega-test-right h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7a1b56 !important;
    margin: 0 0 12px 0 !important;
}
.mega-test-right ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
}
.mega-test-right ul a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #31232a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}
.mega-test-right ul a:hover {
    color: #d21d5a !important;
    transform: translateX(4px) !important;
}
.mega-test-right ul a::before {
    content: "★" !important;
    color: #d21b52 !important;
    font-size: 14px !important;
}

.mega-test-search-input {
    width: 100% !important;
    border: 1px solid #e7cddb !important;
    border-radius: 9999px !important;
    padding: 13px 22px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(210, 27, 82, 0.05) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    margin-bottom: 20px !important;
}
.mega-test-search-input:focus,
.mega-test-search-input:hover {
    outline: none !important;
    border-color: #d21b52 !important;
    box-shadow: 0 0 0 3px rgba(210, 27, 82, 0.15) !important;
}

.mega-test-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px 24px !important;
}

/* Merken als platte tekst, geen knoppen */
.mega-test-grid-item {
    display: block !important;
    padding: 6px 0 !important;
    color: #31232a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    border-radius: 0 !important;
}
.mega-test-grid-item:hover {
    color: #d21b52 !important;
    background: transparent !important;
}

/* Alleen op desktop tonen */
@media (max-width: 1023px) {
    .mega-test-panel {
        display: none !important;
    }
}
/* ...existing code... */

/* ========================================================================== */
/*  WINKELWAGEN OVERZICHT STYLING
/* ========================================================================== */
.sar-cart-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #374151; /* Equivalent to text-gray-700 */
}

.sar-cart-usps li {
    position: relative;
    padding-left: 26px; /* Ruimte voor het vinkje */
    margin-bottom: 8px;
}

.sar-cart-usps li:last-child {
    margin-bottom: 0;
}

.sar-cart-usps li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    color: #d21b52; /* De roze kleur */
    font-weight: 700;
    font-size: 18px;
}

.sar-cart-totals {
    border-top: 1px solid #fce4ec; /* Lichte roze lijn */
    padding-top: 1rem;
    font-size: 15px;
}

.sar-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.sar-totals-row:last-child {
    margin-bottom: 0;
}

.payment-badges.justify-center {
    justify-content: center;
}

/* ========================================================================== */
/*  BLOG CARD & GRID STYLING
/* ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,0.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.blog-card:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
}

.blog-card-link { 
    text-decoration: none; 
    color: inherit; 
    display: block; 
}

.blog-card-hero {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.blog-card-hero.placeholder { 
    background: linear-gradient(180deg,#fbf6f8,#f6f0f2); 
}

.blog-card-body { 
    padding: 28px; 
}

.blog-card-cat {
    font-size: 12px;
    color: #9b6b7a;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.blog-card-title {
    color: #d21b52;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.blog-card-cta {
    color: #d21b52;
    font-weight: 600;
    font-size: 14px;
}

/* Responsive aanpassingen */
@media (max-width: 1024px) {
    .blog-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
    }
}
@media (max-width: 640px) {
    .blog-grid { 
        grid-template-columns: 1fr; 
    }
    .blog-card-hero { 
        height: 180px; 
    }
}

/* ========================================================================== */
/*  SINGLE BLOG POST STYLING
/* ========================================================================== */
.sar-single-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    background-color: #fce4ec; /* Fallback kleur */
}
.sar-single-hero.has-background {
    background-size: cover;
    background-position: center;
    color: white;
}
/* Donkere overlay voor leesbaarheid */
.sar-single-hero.has-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.sar-single-hero .hero-content {
    position: relative;
    z-index: 1;
}
.sar-single-hero .entry-title {
    font-size: 2.5rem; /* 40px */
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
    .sar-single-hero .entry-title {
        font-size: 3.5rem; /* 56px */
    }
}

/* Breadcrumbs styling */
.woocommerce-breadcrumb {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
}
.woocommerce-breadcrumb a {
    color: #d21b52;
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* Content styling (Tailwind Prose is al actief) */
.entry-content h2 {
    color: #d21b52;
    font-weight: 700;
}
.entry-content ul {
    list-style-type: disc;
}
.entry-content ol {
    list-style-type: decimal;
}

/* ========================================================================== */
/*  STYLING VOOR DE NIEUWE WOOCOMMERCE CHECKOUT BLOCK
/* ========================================================================== */

/* Hoofdkleur voor knoppen en actieve elementen */
.wc-block-checkout__main .wc-block-components-button,
.wc-block-checkout__main .wc-block-components-button:hover {
    background-color: #1fb54a !important; /* Jouw groene kleur */
    color: white !important;
}

/* Accentkleur voor links, actieve radiobuttons en focus-ringen */
.wc-block-checkout__main a,
.wc-block-components-radio-control__input:checked + label::before,
.wc-block-components-text-input:focus,
.wc-block-components-select-control__input:focus {
    color: #d21b52 !important; /* Jouw roze kleur */
    border-color: #d21b52 !important;
    box-shadow: 0 0 0 1px #d21b52 !important;
}

/* Zorg dat de rechterkolom (Order Summary) een witte achtergrond heeft */
.wc-block-checkout__sidebar {
    background-color: #f7fafc; /* Lichte grijze achtergrond, vergelijkbaar met voorbeeld */
    padding: 1.5rem;
    border-radius: 0.5rem;
}

/* Checkout: sidebar weg, content full-width, block gecentreerd */
body.woocommerce-checkout #primary.content-area {
    width: 100% !important;
    float: none !important;
    margin: 0 auto;
}
body.woocommerce-checkout #secondary.widget-area {
    display: none !important;
}
body.woocommerce-checkout .col-full {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
body.woocommerce-checkout .entry-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.wc-block-checkout {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/*  B2B / B2C WELKOMST-POPUP
/* ========================================================================== */
.sar-popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(31, 35, 41, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.sar-popup-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    opacity: 0;
    animation: popup-fade-in 0.3s ease forwards;
}

@keyframes popup-fade-in {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.sar-popup-title {
    font-size: 2rem;
    font-weight: 800;
    color: #d21b52; /* Roze kleur */
    margin: 0 0 0.5rem;
}

.sar-popup-text {
    font-size: 1.125rem;
    color: #4b5563; /* Grijze tekst */
    margin: 0 0 2rem;
}

.sar-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.sar-popup-btn {
    display: inline-block;
    padding: 1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sar-popup-btn.btn-b2c {
    background-color: #f3f4f6; /* Lichtgrijs */
    color: #1f2937;
    border-color: #e5e7eb;
}
.sar-popup-btn.btn-b2c:hover {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

.sar-popup-btn.btn-b2b {
    background-color: #d21b52; /* Roze kleur */
    color: #ffffff;
    border-color: #d21b52;
}
.sar-popup-btn.btn-b2b:hover {
    filter: brightness(1.1);
}


/* Container styling */
.my-account-page .woocommerce {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    overflow: visible;
}

/* Form layout for login/register */
.woocommerce-account .u-columns.col2-set,
.woocommerce-account #customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    width: 100% !important;
    overflow: visible;
}

/* Card styling for each column */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Form headings (Inloggen / Registreren) */
.woocommerce-account h2 {
    font-size: 36px;
    font-weight: bold;
    color: #d11a69; /* Roze kleur uit het voorbeeld */
    margin-top: 0;
    margin-bottom: 25px;
}

/* Spacing for form rows */
.woocommerce-account .form-row {
    margin-bottom: 20px;
    padding: 0;
}

/* Labels for all fields */
.woocommerce-account .form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 15px;
}

/* Input fields and Select dropdowns (targets standard and B2B plugin fields) */
.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row .select2-container .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    height: auto;
    width: 100%;
    font-size: 16px;
    box-shadow: none;
}

/* Specific styling for Select2 dropdowns */
.woocommerce-account .form-row .select2-container .select2-selection--single {
    height: 54px; /* Match padding of other inputs */
    padding: 15px;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 22px; /* Vertically center text */
    padding-left: 0;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px;
}

.woocommerce-account .form-row select {
    cursor: pointer;
    padding-right: 30px; /* Make space for arrow */
}

.woocommerce-account .form-row .input-text:focus,
.woocommerce-account .form-row select:focus {
    border-color: #d11a69;
    box-shadow: 0 0 0 3px rgba(209, 26, 105, 0.1);
    outline: none;
}

/* "Onthouden" checkbox label */
.woocommerce-account .form-row label[for="rememberme"] {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
}

/* Button styling */
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
    background-color: #d11a69;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Add some space above the button */
}

.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover {
    background-color: #b9175e;
}

/* "Wachtwoord vergeten?" link */
.woocommerce-account .lost_password {
    margin-top: 15px;
}

.woocommerce-account .lost_password a {
    color: #d11a69;
    text-decoration: none;
}

.woocommerce-account .lost_password a:hover {
    text-decoration: underline;
}

/* Privacy policy text */
.woocommerce-form-register .woocommerce-privacy-policy-text {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .my-account-page .woocommerce {
        margin: 0 auto 16px;
        padding: 0 10px;
    }
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account #customer_login {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2,
    .woocommerce-account .col2-set .col-1,
    .woocommerce-account .col2-set .col-2 {
        padding: 20px 16px;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
    .woocommerce-account h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .woocommerce-account .form-row .input-text,
    .woocommerce-account .form-row select {
        padding: 12px;
        font-size: 15px;
    }
    .woocommerce-account .woocommerce-form-login .button,
    .woocommerce-account .woocommerce-form-register .button {
        padding: 12px 24px;
    }
    .sar-reg-option {
        padding: 12px 14px;
        gap: 12px;
    }
    .sar-reg-option-text strong {
        font-size: 14px;
    }
    .sar-reg-option-text span {
        font-size: 12px;
    }
    .sar-reg-option-icon svg {
        width: 26px;
        height: 26px;
    }
}

/* Input fields and Select dropdowns (targets standard and B2B plugin fields) */
.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row .select2-container .select2-selection--single,
.woocommerce-account p.form-row input.b2bking_custom_registration_field {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    height: auto;
    width: 100%;
    font-size: 16px;
    box-shadow: none;
}
.woocommerce-account .form-row select {
    cursor: pointer;
    padding-right: 30px; /* Make space for arrow */
}

.woocommerce-account .form-row .input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account p.form-row input.b2bking_custom_registration_field:focus {
    border-color: #d11a69;
    box-shadow: 0 0 0 3px rgba(209, 26, 105, 0.1);
    outline: none;
}

/* ==========================================================================
   Mijn Account Pagina - Ingelogde Weergave (DEFINITIEVE FIX)
   ========================================================================== */

/* Gebruik Flexbox voor de hoofd layout */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap; /* Zorgt voor correcte weergave op mobiel */
    gap: 40px;
    align-items: flex-start;
}

/* Navigatie menu styling */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 280px; /* Niet groeien, niet krimpen, basisbreedte 280px */
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Content area styling */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1; /* Groeit om de resterende ruimte te vullen */
    min-width: 0; /* Voorkomt dat de content te breed wordt en de layout breekt */
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 40px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Navigatie menu items */
.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 5px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

/* Hover state voor menu-items */
.woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
    background-color: #fdeaf2; /* Lichtroze achtergrond */
    color: #d11a69;
}

/* Actieve menu-item */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #d11a69;
    color: #ffffff;
}

/* Styling voor links en paragrafen in de content */
.woocommerce-MyAccount-content p {
    line-height: 1.6;
}

.woocommerce-MyAccount-content a {
    color: #d11a69;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* Styling voor formulieren binnen de accountpagina */
.woocommerce-MyAccount-content .form-row {
    padding: 0;
    margin-bottom: 20px;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 15px;
    height: auto;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus {
    border-color: #d11a69;
    box-shadow: 0 0 0 3px rgba(209, 26, 105, 0.1);
    outline: none;
}

.woocommerce-MyAccount-content .button {
    background-color: #d11a69;
    color: #ffffff;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: bold;
}
.woocommerce-MyAccount-content .button:hover {
    background-color: #b9175e;
    color: #ffffff;
}

/* Responsive voor mobiel: stapel de kolommen */
@media (max-width: 992px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        flex-basis: 100%; /* Beide nemen de volledige breedte in */
    }
}



/* Koppen en volledige rijvelden (span beide kolommen) */
.sar-registration-container h3,
.sar-registration-container .form-row.form-row-wide,
.sar-registration-container .woocommerce-error,
.sar-registration-container .form-row p.notice {
    grid-column: 1 / -1;
}

/* Zorg dat twee-kolom velden netjes in kolommen vallen */
.sar-registration-container .form-row.form-row-first { grid-column: auto; }
.sar-registration-container .form-row.form-row-last  { grid-column: auto; }

/* Labels */
.sar-registration-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

/* Inputs / selects (zelfde als Mijn Account) */
.sar-registration-container .input-text,
.sar-registration-container input[type="text"],
.sar-registration-container input[type="email"],
.sar-registration-container input[type="tel"],
.sar-registration-container input[type="password"],
.sar-registration-container select,
.sar-registration-container input.b2bking_custom_registration_field,
.sar-registration-container input.b2bking_custom_field_req_required {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    width: 100% !important;
    font-size: 15px !important;
    box-shadow: none !important;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
}

/* Focus state */
.sar-registration-container .input-text:focus,
.sar-registration-container select:focus,
.sar-registration-container input.b2bking_custom_registration_field:focus {
    border-color: #d11a69 !important;
    box-shadow: 0 0 0 3px rgba(209,26,105,0.08) !important;
    outline: none !important;
}

/* Submit knop */
.sar-registration-container button[type="submit"],
.sar-registration-container .button {
    background-color: #d11a69;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
}
.sar-registration-container button[type="submit"]:hover,
.sar-registration-container .button:hover {
    background-color: #b9175e;
}

/* Kleinere spacing onder inputs */
.sar-registration-container .form-row { margin-bottom: 14px; }

/* Responsive: stapel kolommen op mobiel */
@media (max-width: 992px) {
    .sar-registration-container form .space-y-8 {
        grid-template-columns: 1fr;
    }
    .sar-registration-container h3,
    .sar-registration-container .form-row.form-row-wide {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   SHOP OP CATEGORIE - GRID LAYOUT
   ========================================================================== */

.shop-categorie-section {
    background: #fff; /* Witte achtergrond */
}

.categorie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem; /* 24px */
}

.categorie-card-new {
    display: block;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f3f4f6; /* Lichte grijze rand */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* AANGEPAST: Subtiele standaard schaduw */
}

.categorie-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* AANGEPAST: Iets sterkere hover schaduw */
}

.categorie-card-new__image {
    aspect-ratio: 1 / 1; /* AANGEPAST: Maakt de afbeelding vierkant (hoger) */
    overflow: hidden;
}

.categorie-card-new__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.categorie-card-new__footer {
    display: flex;
    align-items: center;
    justify-content: center; /* AANGEPAST: Centreert de titel */
    padding: 1rem; /* 16px */
}

.categorie-card-new__label {
    font-weight: 700;
    color: #1F2937;      /* standaard bijna-zwart / default tekstkleur */
    font-size: 1rem;     /* 16px */
}

.categorie-card-new__icon {
    display: none; /* Verberg het icoon, aangezien het niet in je HTML staat */
}


/* AANGEPAST: Mobiel is nu een swipeable rij i.p.v. grid */
@media (max-width: 768px) {
    .categorie-grid {
        display: flex;               /* Maak er een rij van */
        overflow-x: auto;            /* Sta horizontaal scrollen toe */
        gap: 12px;                   /* Ruimte tussen kaarten */
        padding-bottom: 20px;        /* Ruimte onderaan voor touch-gemak */
        scroll-snap-type: x mandatory; /* Zorgt voor lekker 'klik' effect */
        -webkit-overflow-scrolling: touch; /* Smooth scroll op iPhone */
        
        /* Reset grid eigenschappen */
        grid-template-columns: none;

        /* DE FIX: Zelfde logica als bij producten */
        /* 1. Trek container over de randen */
        margin-left: -30px !important;
        margin-right: -30px !important;
        width: auto !important;

        /* 2. Compenseer met padding (15px margin + 15px witruimte = 30px) */
        padding-left: 30px !important;     
        padding-right: 30px !important;
        
        /* 3. Zorg dat de snap begint na de padding */
        scroll-padding-left: 30px !important;
    }

    /* Verberg de lelijke scrollbalk (maar hou wel scrollbaar) */
    .categorie-grid::-webkit-scrollbar { display: none; }
    .categorie-grid { -ms-overflow-style: none; scrollbar-width: none; }

    .categorie-card-new {
        flex: 0 0 140px;  /* Vaste breedte: pas aan naar 150px of 160px als je ze breder wilt */
        width: 140px;
        scroll-snap-align: start; /* Zorgt dat hij netjes stopt bij een kaart */
    }
    
    /* Zorg dat de afbeelding vierkant blijft binnen de nieuwe breedte */
    .categorie-card-new__image {
        aspect-ratio: 1 / 1;
    }
}


.custom-hero {
    min-height: 620px; /* verhoog indien nodig (was 320px) */
}

/* ==========================================================================
   NIEUW BINNEN SECTIE (DESIGN 2025) - DEFINITIEF
   ========================================================================== */

/* --- Sectie Achtergrond & Layout --- */
.new-arrivals-section-2025 {
    background-image: url('https://sarlemijn.com/wp-content/uploads/2026/03/Group-77-2-resized-to-large.jpeg');
    background-size: cover;
    background-position: center;
    padding-top: 4rem;    /* 64px */
    padding-bottom: 4rem; /* 64px */
}

/* NIEUW: Achtergrond voor de populaire producten sectie */
.popular-products-section-2025 {
    background-image: url('https://sarlemijn.com/wp-content/uploads/2026/03/Group-78-1-resized-to-large.jpeg');
    background-size: cover;
    background-position: center;
}

/* --- Product Kaart Styling --- */
.product-card-new {
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07);
    border-color: #d1d5db;
}

/* --- Tekst Styling in de Kaart --- */
.product-card-new .product-card-brand {
    font-size: 0.75rem; /* 12px */
    text-transform: uppercase;
    color: #e18da9; /* Lichtroze/paars */
    font-weight: 600;
    letter-spacing: 0.05em;
}

.product-card-new .product-card-title a {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: #d21b52; /* Donkerroze */
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cart icon in button: default hidden on desktop */
.product-card-new .sar-atc-icon {
    display: none;
}
.product-card-new .sar-atc-label {
    display: inline;
}
.product-card-new .product-card-title a:hover {
    text-decoration: underline;
}

.product-card-new .product-card-price {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    color: #1f2937; /* Bijna zwart */
}

.product-card-new .product-card-price del {
    color: #9ca3af; /* Grijs */
    font-weight: 500;
    margin-right: 0.5rem;
}
/* --- Compacte hoeveelheid en bredere, lagere Voeg toe knop --- */
.product-card-new form.cart {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Hoeveelheidskiezer — compacter */
.product-card-new .quantity {
    display: flex;
    align-items: center;
    background-color: #f3f4f6;
    border-radius: 6px;
    height: 30px; /* lager */
    overflow: hidden;
}

.product-card-new .quantity .qty-btn {
    width: 28px;           /* smaller */
    height: 100%;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-card-new .quantity input.qty {
    width: 34px;           /* smaller */
    height: 100%;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    -moz-appearance: textfield;
}

/* Verberg spin buttons */
.product-card-new .quantity input.qty::-webkit-outer-spin-button,
.product-card-new .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* "Voeg toe" knop — lager en breder */
.product-card-new form.cart .single_add_to_cart_button {
    flex-grow: 1;
    background-color: #32B742 !important; /* gewenste groen */
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 0 16px !important;   /* horizontale padding voor breedte */
    font-weight: 500 !important;
    text-align: center;
    transition: background-color 0.18s;
    height: 30px;                  /* lager */
    min-width: 150px;              /* zorgt dat knop breder wordt */
    line-height: 30px !important;  /* verticale uitlijning tekst */
    border: none;
    box-shadow: none;
    font-size: 0.98rem;
}

.product-card-new form.cart .single_add_to_cart_button:hover {
    background-color: #289a38 !important;
}

/* Opties selecteren knop (variabel product) dezelfde compacte hoogte */
.product-card-new .add_to_cart_button {
    height: 30px;
    line-height: 30px;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-size: 0.98rem;
}

/* kleinere knoppen op very small screens */
@media (max-width: 420px) {
    .product-card-new .quantity .qty-btn { width: 26px; }
    .product-card-new .quantity input.qty { width: 30px; }
    .product-card-new form.cart .single_add_to_cart_button { min-width: 120px; padding: 0 12px !important; }
}
.product-card-new .add_to_cart_button:hover {
    background-color: #16a34a !important;
}

/* Verberg "bekijk winkelmand" link na toevoegen */
.product-card-new .added_to_cart {
    display: none !important;
}

/* ==========================================================================
   NIEUWE SHOP OP MERK SECTIE
   ========================================================================== */
.brand-cards-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem; /* 24px */
}

.brand-card-block {
    display: block;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Grijze rand */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand-card-block:hover {
    transform: translateY(-5px);
    border-color: #d21b52; /* Roze rand op hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.brand-card-block__image {
    aspect-ratio: 16 / 9;
    background-color: #f9fafb; /* Lichte achtergrond voor afbeelding */
}

.brand-card-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-card-block__footer {
    padding: 1rem;
    text-align: center;
}

.brand-card-block__name {
    font-weight: 700;
    color: #1f2937; /* Bijna zwart */
    font-size: 1.125rem;
}

/* Responsive voor mobiel */
@media (max-width: 768px) {
    .brand-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .brand-card-block__name {
        font-size: 1rem;
    }
}

/* ==========================================================================
   VERNIEUWDE BLOG SECTIE STYLING
   ========================================================================== */
.new-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* 24px */
}

.new-blog-card {
    background-color: #ffffff; /* Lichtgrijs */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f3f4f6;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.new-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.new-blog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.new-blog-card-text-content {
    padding: 1.75rem; /* 28px */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.new-blog-card-date {
    font-size: 0.875rem; /* 14px */
    color: #6b7280; /* Grijs */
    margin-bottom: 0.75rem; /* 12px */
}

.new-blog-card-title {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #d21b52; /* Roze */
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
}

.new-blog-card-excerpt {
    font-size: 1rem; /* 16px */
    color: #4b5563; /* Donkergrijs */
    line-height: 1.6;
    margin: 0;
}

.new-blog-card-image-content {
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    border-top: 1px solid #f3f4f6;
}

.new-blog-card-cta {
    position: absolute;
    bottom: 1rem; /* 16px */
    left: 1rem; /* 16px */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #4b5563;
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 9999px;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Responsive aanpassingen */
@media (max-width: 1024px) {
    .new-blog-grid {
        grid-template-columns: 1fr; /* Stapel op tablet */
    }
}

/* ==========================================================================
   NIEUWE CONTACT BANNER
   ========================================================================== */
.contact-banner {
    position: relative;
    background-image: url('images/hulp-nodig-banner.webp');
    background-size: cover;
    background-position: center;
    min-height: 380px;
    border-radius: 1.5rem; /* 24px */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.contact-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(210, 29, 90, 0.8); /* Roze overlay voor leesbaarheid */
}

.contact-banner-content {
    position: relative;
    z-index: 10;
    color: white;
}

.contact-banner-title {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 2rem 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.contact-banner-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.contact-btn {
    display: inline-block;
    background-color: #be185d; /* Donker roze */
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: 1px solid rgba(255,255,255,0.3);
}

.contact-btn:hover {
    background-color: #9d174d; /* Iets donkerder roze */
}

@media (max-width: 768px) {
    .contact-banner-title {
        font-size: 1.875rem; /* 30px */
    }
    .contact-banner-buttons {
        flex-direction: column;
    }
}


/* ==========================================================================
   FILIALEN & CONTACT PAGINA
   ========================================================================== */
.filialen-hero-section .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: #6b7280;
}
.filialen-hero-section .woocommerce-breadcrumb a {
    color: #D21D5A;
}

/* ==========================================================================
   MERKEN PAGINA TEMPLATE (AANGEPASTE STIJL)
   ========================================================================== */
.alphabet-nav {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
}

.alpha-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #374151;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.alpha-button:hover {
    background-color: #D21D5A;
    color: #ffffff;
}

/* Verwijder achtergrond en padding van de groep container */
.brand-group {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.brand-letter-heading {
    font-size: 2rem; /* Iets kleiner voor een strakkere look */
    font-weight: 700;
    color: #D21D5A;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem 1.5rem;
    padding-top: 1rem; /* Ruimte tussen de lijn en de merken */
}

.brand-link {
    display: block;
    padding: 0.25rem 0;
    color: #374151;
    text-decoration: none;
    transition: color 0.2s;
}

.brand-link:hover {
    color: #D21D5A;
}

/* Responsive grid voor grotere schermen */
@media (min-width: 640px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.storefront-breadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    position: static;   /* geen verschuiving meer */
    left: 0 !important;
}

/* Alleen op desktop een kleine correctie, NIET op mobiel */
@media (min-width: 1024px) {
    .storefront-breadcrumb {
        position: relative;
        left: -20px;     /* desnoods een subtiele shift, pas aan naar smaak */
    }
}

/* ==========================================================================
   VERNIEUWDE FILIALEN SECTIE
   ========================================================================== */
.filiaal-card-new {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #ffffff;
    border-radius: 1.5rem; /* 24px */
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .filiaal-card-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.filiaal-info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filiaal-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border: 1px solid #D21D5A;
    color: #D21D5A;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.filiaal-title {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: #D21D5A;
    margin-top: -0.5rem; /* dichter bij de tag */
}

.info-label {
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.info-data {
    color: #D21D5A;
    font-weight: 500;
    line-height: 1.6;
}

.info-data-link {
    color: #D21D5A;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
}
.info-data-link:hover {
    text-decoration: underline;
}

.openingstijden-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    color: #D21D5A;
    font-weight: 500;
}

.filiaal-map {
    min-height: 400px;
}

@media (min-width: 1024px) {
    .filiaal-map {
        min-height: auto; /* Reset min-height op desktop */
    }
}

/* ==========================================================================
   HAARPRODUCTEN MEGA MENU
   ========================================================================== */

/* De binnenkant van het paneel: 4 kolommen */
.haarproducten-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px 32px !important;
    align-items: flex-start !important;
}

/* Styling voor elke kolom */
.hp-mega-col h3 {
    font-size: 1rem !important; /* 16px */
    font-weight: 700 !important;
    color: #1f2937 !important; /* Bijna zwart */
    margin: 0 0 1rem 0 !important;
    text-transform: none !important;
}

.hp-mega-col ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 0.75rem !important; /* 12px */
}

/* De 4e kolom heeft meerdere kopjes, dus iets meer ruimte ertussen */
.hp-mega-col h3 + ul {
    margin-bottom: 1.5rem !important; /* 24px */
}

.hp-mega-col a {
    font-size: 0.9375rem !important; /* 15px */
    color: #4b5563 !important; /* Donkergrijs */
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.hp-mega-col a:hover {
    color: #d21b52 !important; /* Roze */
}

/* Subtiele voorraad indicator onder de prijs, boven de amount/Voeg toe rij */
.stock-indicator-block {
    display: flex;
    justify-content: flex-start; /* links uitlijnen */
    margin: 6px 0 8px 0;
    width: 100%; /* zorgt dat de indicator zich ten opzichte van de kaartbreedte positioneert */
}

/* Wrapper voor stock + form op 1 rij op mobiel */
.sar-stock-cart-row {
    /* default: stack */
}
.stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
}

.stock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #32B742;
    box-shadow: 0 0 0 4px rgba(50,183,66,0.08);
    flex: 0 0 9px;
}

.stock-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    opacity: 0.95;
    white-space: nowrap;
}

/* kleine screens: nog subtieler */
@media (max-width: 420px) {
    .stock-indicator-block { justify-content: flex-start; } /* op mobiel liever links */
    .stock-dot { width: 6px; height: 6px; flex: 0 0 6px; box-shadow: 0 0 0 3px rgba(50,183,66,0.06); }
    .stock-text { font-size: 0.72rem; }
}


/* Category/brand hero and subterm cards */
.text-category-purple { color: #D21D5A; } /* of pas hex aan */

/* horizontale scroll rij voor subcategories */
.subbrand-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.subbrand-card {
    min-width: 220px;
    max-width: 320px;
    flex: 0 0 auto;
    align-items: center;
    text-decoration: none;
}
.subbrand-thumb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.empty-thumb { border-radius: 8px; background: #f8fafc; }

/* Verwijder card / border / shadow rond category/brand image in category-hero */
.category-hero .flex-shrink-0,
.category-hero .flex-shrink-0 img {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
}

/* Optioneel: behoud lichte afronding maar geen kaart-gevoel */
.category-hero .flex-shrink-0 img {
    border-radius: 6px !important; /* of 0px als je geen afronding wilt */
    max-width: 160px; /* zorg dat de grootte consistent blijft; pas aan indien nodig */
    height: auto !important;
}

/* ========================================================================== */
/*  MOBIELE HEADER + ZOEK + HAMBURGER MENU (HERSTEL)                          */
/* ========================================================================== */

/* Hoogte-variabele voor mobiele header (gebruikt in JS/CSS) */
:root {
    --mobile-header-h: 56px;
}

.mobile-header {
    display: none;
    height: var(--mobile-header-h);
    background-color: #ffffff;
    color: #111827;
    border-bottom: none; 
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10000;
}

/* NIEUW: Zorgt dat het logo altijd exact in het midden staat */
.mobile-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Zorg dat hij niet onder andere dingen valt */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* AANGEPAST: Logo groter gemaakt */
.mobile-logo img {
    height: 42px; /* Was 28px. Pas aan naar wens (max 50px ivm header hoogte) */
    width: auto;
    display: block;
    object-fit: contain;
}

.mobile-left,
.mobile-right {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Zorg dat deze elementen bovenop blijven liggen als het scherm heel smal wordt */
    position: relative; 
    z-index: 2;
}

.mobile-header .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #d21b52;
    cursor: pointer;
}

.mobile-header .icon-btn:hover {
    background: rgba(210,29,82,0.06);
}

.mobile-header .mobile-logo img {
    max-height: 44px;
    height: auto;
    width: auto;
    display: block;
}

/* ===== Mobiele zoekbalk direct onder header ===== */
@media (max-width: 1023px) {
    .mobile-search-panel {
        position: sticky;
        top: var(--mobile-header-h);
        left: 0;
        right: 0;
        z-index: 9999;
        background-color: #ffffff;
        border-bottom: 1px solid #f3f4f6;
        padding: 6px 14px 14px;
        margin: 0;
        transform: none !important;
        transition: none !important;
    }

    .mobile-search-panel form {
        position: relative;
        width: 100%;
        margin: 0;
    }

    .mobile-search-panel input[type="search"] {
        width: 100%;
        border: 1px solid #d21b52;
        border-radius: 10px;
        padding: 6px 34px 6px 10px; /* ruimte voor icoon rechts */
        font-size: 14px;
        height: 34px;
        line-height: 34px;
        outline: none;
        box-sizing: border-box;
        margin: 0;
        background: #ffffff;
    }

    .mobile-search-panel button[type="submit"] {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #d21b52;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }

    .mobile-search-panel button[type="submit"] svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== Smooth animatie: header + search weg bij open menu ===== */
@media (max-width: 1023px) {
    .mobile-header,
    .mobile-search-panel {
        transform: translateY(0);
        opacity: 1;
        transition: transform 0.22s ease, opacity 0.22s ease;
        will-change: transform, opacity;
    }

    body.mobile-menu-open .mobile-header,
    body.mobile-menu-open .mobile-search-panel {
        transform: translateY(-10px);
        opacity: 0;
    }
}

/* ===== Off‑canvas mobiel menu (hamburger drawer) ===== */

/* Overlay achter het menu */
#mobileMenuOverlay,
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    display: none;
}

/* De drawer zelf */
#mobileMenu,
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 420px;
    height: 100vh;
    background: #ffffff;
    box-shadow: 6px 0 30px rgba(0,0,0,0.25);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

/* Open state via body‑class (JS zet/haalt deze) */
body.mobile-menu-open #mobileMenu,
body.mobile-menu-open .mobile-drawer {
    transform: translateX(0);
}
body.mobile-menu-open #mobileMenuOverlay,
body.mobile-menu-open .mobile-menu-overlay {
    display: block;
}

/* Menu‑lijst in de drawer */
.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mobile-menu-list > li {
    border-bottom: 1px solid #f6edf3;
}

.mobile-menu-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #31232a;
    text-decoration: none;
}

.mobile-menu-list > li > a:hover {
    background-color: #fdf2f7;
}

/* Submenu pijltje + open/close */
.mobile-menu-list li.menu-item-has-children > a::after {
    content: '▾';
    font-size: 12px;
    margin-left: 8px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.mobile-menu-list li.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
}

.mobile-menu-list li.menu-item-has-children > ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 18px;
    display: none;
    background: #fff;
}

.mobile-menu-list li.menu-item-has-children.open > ul.sub-menu {
    display: block;
}

.mobile-menu-list li.menu-item-has-children > ul.sub-menu > li > a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
}

.mobile-menu-list li.menu-item-has-children > ul.sub-menu > li > a:hover {
    background-color: #f9fafb;
}

/* Alleen op mobiel tonen; desktop gebruikt de normale header */
@media (max-width: 1023px) {
    .mobile-header {
        display: flex;
    }

    .header-top-bar,
    .header-bottom-bar {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    #mobileMenuOverlay,
    .mobile-menu-overlay,
    #mobileMenu,
    .mobile-drawer,
    .mobile-header,
    .mobile-search-panel {
        display: none !important;
    }
}

/* Fix: footer-col-full mag niet naar links uit beeld schuiven (mobiel) */
@media (max-width: 1023px) {
    .site-footer .col-full {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.site-footer {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===================== MOBIELE DETAILPANELEN ===================== */
.mobile-subpanel {
    flex: 1 1 auto;
    display: none;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.mobile-subpanel.is-active {
    display: flex;
}

.mobile-subpanel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.mobile-subpanel-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 6px 8px;
    cursor: pointer;
    color: #d21b52;
    font-size: 14px;
}

.mobile-subpanel-back-icon {
    font-size: 18px;
    line-height: 1;
}

.mobile-subpanel-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #9ca3af;
}

.mobile-subpanel-title-wrap {
    padding: 12px 16px 6px;
    border-bottom: 1px solid #f3f4f6;
}

.mobile-subpanel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.mobile-subpanel-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

.mobile-subpanel-list li {
    border-bottom: 1px solid #f9fafb;
}

.mobile-subpanel-link {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    color: #111827;
    font-size: 15px;
}

.mobile-subpanel-link:hover {
    background: #fdf2f7;
    color: #d21b52;
}


/* Overlay achter het menu */
#mobileMenuOverlay,
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 10001 !important; /* AANGEPAST: Hoger dan header (10000) */
    display: none;
}

/* De drawer zelf */
#mobileMenu,
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 420px;
    height: 100vh;
    background: #ffffff;
    box-shadow: 6px 0 30px rgba(0,0,0,0.25);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 10002 !important; /* AANGEPAST: Hoger dan overlay en header */
    display: flex;
    flex-direction: column;
}
.mobile-header .icon-btn:hover {
    background: rgba(210,29,82,0.06);
}

/* NIEUW: Cart badge styling voor mobiel */
.mobile-cart-btn {
    position: relative;
    overflow: visible !important; /* Zorg dat badge buiten de knop mag steken */
}

.mobile-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #d21b52; /* Roze achtergrond */
    color: #ffffff;            /* Witte tekst */
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 10px;       /* Rondje/Ovaal */
    min-width: 16px;
    text-align: center;
    border: 2px solid #ffffff; /* Witte rand om los te komen van icoon */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


.mobile-header .icon-btn:hover {
    background: rgba(210,29,82,0.06);
}

/* NIEUW: Cart badge styling voor mobiel */
.mobile-cart-btn {
    position: relative;
    overflow: visible !important; /* Zorg dat badge buiten de knop mag steken */
}

.mobile-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #d21b52; /* Roze achtergrond */
    color: #ffffff;            /* Witte tekst */
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 10px;       /* Rondje/Ovaal */
    min-width: 16px;
    text-align: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive Hero aanpassingen */
@media (max-width: 768px) {
    .custom-hero {
        /* BELANGRIJK: Forceer de hoogte naar 0/auto zodat hij krimpt naar de inhoud */
        min-height: 0 !important;
        height: auto !important;
        
        /* Zet flex uit zodat hij niet probeert te centreren in een onzichtbaar groot blok */
        display: block !important; 
        
        /* Zorg dat de achtergrondafbeelding netjes blijft */
        background-position: 65% center;
    }
    
    /* Dit zorgt dat de inner-div de baas is over de hoogte */
    .custom-hero-inner {
        height: auto !important;
    }
}

/* NIEUW: Op mobiel veel minder padding (compact) */
@media (max-width: 768px) {
    .shop-merks-section,
    .shop-categorie-section,
    section.shop-merks-section.py-12,
    section.shop-categorie-section.py-12 {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    /* Ook de header in die secties iets minder marge geven */
    .shop-merks-section header,
    .shop-categorie-section header {
        margin-bottom: 12px !important;
    }
}

/* Mobiele aanpassingen voor product cards in sliders */
@media (max-width: 768px) {
    
    /* 1. Container aanpassen voor scrollen (negeer JS slider effect) */
    .new-slider-container,
    .popular-slider-container {
        overflow: visible !important; /* Zorg dat schaduwen niet afgekapt worden */
    }

    .new-slider-track,
    .popular-slider-track,
    .related-slider-track {
        display: flex !important;
        overflow-x: auto !important;
        transform: none !important;
        gap: 12px !important;
        
        /* DE FIX: */
        /* 1. We trekken de balk 15px naar links (zodat je tot de rand kan swipen) */
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: auto !important;

        /* 2. We geven 30px padding: 15px compensatie + 15px échte witruimte */
        padding-left: 30px !important;     
        padding-right: 30px !important;
        

           /* 3. DE FIX: Dit vertelt de browser dat de 'snap' pas na 30px begint */
        /* Hierdoor blijft de padding zichtbaar bij het laden! */
        scroll-padding-left: 30px !important;
        
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    /* Verberg de scrollbalk maar hou wel de functie */
    .new-slider-track::-webkit-scrollbar,
    .popular-slider-track::-webkit-scrollbar {
        display: none;
    }

    /* 2. De kaarten zelf: kleiner en vaste breedte */
    .new-slider-track li,
    .popular-slider-track li,
    .related-slider-track li {
        width: 220px !important;        /* breder dan eerst (bijv. 170px) */
        flex: 0 0 220px !important;
        max-width: 220px !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }

       /* Zorg dat de kaart zelf full‑height is (zelfde truuk als homepage) */
    .related-slider-track li .product-card-new {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* 3. Verberg navigatieknoppen (pijltjes) en bolletjes */
    .new-slider-prev, .new-slider-next, .new-slider-dots,
    .popular-slider-prev, .popular-slider-next, .popular-slider-dots {
        display: none !important;
    }

    /* 4. Verberg de quantity selector (+/- 1) */
    .product-card-new .quantity {
        display: none !important;
    }

    /* 5. Stock + button op 1 rij */
    .product-card-new .stock-indicator-block {
        margin: 4px 0 0 0 !important;
    }

    .product-card-new form.cart {
        width: auto !important;
        flex-shrink: 0;
    }

    .product-card-new form.cart .single_add_to_cart_button,
    .product-card-new .add_to_cart_button {
        width: auto !important;
        min-width: unset !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
    }

    /* 6. Winkelmand icon tonen, tekst verbergen op mobiel */
    .product-card-new .sar-atc-label {
        display: none !important;
    }
    .product-card-new .sar-atc-icon {
        display: inline-block !important;
        width: 22px;
        height: 22px;
    }

    /* 7. Stock indicator + form op 1 rij */
    .product-card-new .sar-stock-cart-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
    }

    .product-card-new .sar-stock-cart-row .stock-indicator-block {
        margin: 0 !important;
        flex: 1;
    }

    /* 8. Minder padding in kaart, minder ruimte boven merk */
    .product-card-new .p-4 {
        padding: 6px 10px 10px !important;
    }

    .product-card-new .mb-2 {
        margin-bottom: 4px !important;
    }

    /* 9. Titel kleiner op mobiel */
    .product-card-new .product-card-title a {
        font-size: 14px !important;
    }

    /* 10. Prijs minder marge */
    .product-card-new .product-card-price {
        margin-bottom: 2px !important;
    }
    
}

/* MOBIELE BLOG SWIPE AANPASSINGEN */
@media (max-width: 768px) {
    .new-blog-grid {
        display: flex !important;            
        overflow-x: auto !important;         
        gap: 16px !important;                
        padding-bottom: 24px !important;     
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
        /* Reset grid eigenschappen */
        grid-template-columns: none !important;

        /* Full bleed logica: trek container over de randen */
        margin-left: -30px !important;
        margin-right: -30px !important;
        width: auto !important;

        /* Padding compensatie (15px margin + 15px witruimte = 30px) */
        padding-left: 30px !important;     
        padding-right: 30px !important;
        
        /* Zorg dat de snap begint na de padding */
        scroll-padding-left: 30px !important;
    }

    /* Verberg scrollbalk */
    .new-blog-grid::-webkit-scrollbar { display: none; }
    .new-blog-grid { -ms-overflow-style: none; scrollbar-width: none; }

    /* De blog kaart zelf */
    .new-blog-card {
        flex: 0 0 280px !important;      
        width: 280px !important;
        max-width: 280px !important;
        scroll-snap-align: start;
        height: auto !important;         
    }
    
    /* Afbeelding hoogte iets aanpassen voor mobiel */
    .new-blog-card-image-content {
        height: 180px !important;
    }
}

/* MOBIELE BLOG KAART COMPACTER MAKEN */
@media (max-width: 768px) {
    /* Titel iets kleiner en minder marge */
    .new-blog-card-title {
        font-size: 1.25rem !important;   /* ~20px, was 24px */
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }

    /* Datum wat dichter op de titel */
    .new-blog-card-date {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    /* Excerpt max 2 regels met ... */
    .new-blog-card-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;      /* MAX 2 REGELS */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    /* Iets minder padding in tekstblok zodat kaart lager wordt */
    .new-blog-card-text-content {
        padding: 1.25rem !important; /* 20px ipv 28px */
    }
}

/* --- Sectie Achtergrond & Layout --- */
.new-arrivals-section-2025 {
    /* 1. Fallback kleur (lichtroze) voor als de afbeelding traag is */
    background-color: #fce7f3;
    
    /* 2. CSS Gradient die lijkt op je afbeelding (laadt direct!) */
    background-image: 
                      url('https://sarlemijn.com/wp-content/uploads/2026/03/Group-77-2-resized-to-large.jpeg');
    
    background-size: cover;
    background-position: center;
    padding-top: 4rem;    
    padding-bottom: 4rem; 
}

/* NIEUW: Achtergrond voor de populaire producten sectie */
.popular-products-section-2025 {
    /* 1. Fallback kleur */
    background-color: #fff1f2;

    /* 2. CSS Gradient fallback */
    background-image: 
                      url('https://sarlemijn.com/wp-content/uploads/2026/03/Group-78-1-resized-to-large.jpeg');
                      
    background-size: cover;
    background-position: center;
}

/* MOBIELE KOPJES (H2/H3) 19px EN ZELFDE STIJL */
@media (max-width: 768px) {
    /* Hero subkop + alle sectie-titels */
    h2,
    h3,
    .shop-categorie-section h2,
    .shop-merks-section-new h2,
    .new-arrivals-section-2025 h2,
    .popular-products-section-2025 h2,
    .blog-section-new h2 {
        font-size: 19px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }

    /* Hero hoofd-titel iets los houden (mag groter blijven) */
    .custom-hero-inner h1 {
        margin-bottom: 10px !important;
    }
}


@media (max-width: 768px) {
    /* Alle sectie-headers met titel + knop naast elkaar */
    .shop-categorie-section header,
    .shop-merks-section-new > .max-w-7xl > header,
    .new-arrivals-section-2025 > .max-w-7xl > header,
    .popular-products-section-2025 > .max-w-7xl > header,
    .blog-section-new > .max-w-7xl > .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 16px !important; /* VASTE hoogte onder elke kop */
    }

    /* Zorg dat de titel zelf geen extra marges toevoegt */
    .shop-categorie-section h2,
    .shop-merks-section-new h2,
    .new-arrivals-section-2025 h2,
    .popular-products-section-2025 h2,
    .blog-section-new h2 {
        margin: 0 !important;
    }
}
/* MOBIEL: achtergrond Nieuw binnen & Populair minder hoog maken */
@media (max-width: 768px) {
    .new-arrivals-section-2025,
    .popular-products-section-2025 {
        /* veel minder verticale ruimte */
        padding-top: 24px !important;   /* was 4rem (=64px) */
        padding-bottom: 32px !important;
    }

    /* header (titel + 'Bekijk alles') dichter op de kaarten */
    .new-arrivals-section-2025 > .max-w-7xl > header,
    .popular-products-section-2025 > .max-w-7xl > header {
        margin-bottom: 16px !important;  /* was 32px */
    }
}

/* DESKTOP: eventueel ook wat compacter als je wilt */
@media (min-width: 769px) {
    .new-arrivals-section-2025,
    .popular-products-section-2025 {
        padding-top: 32px;   /* i.p.v. 64px */
        padding-bottom: 32px;
    }
}

@media (max-width: 1023px) {
    .mobile-all-link-wrap {
        padding: 14px 20px;
        border-bottom: 1px solid #f3f3f3;
        background: #ffffff;
    }

    .mobile-all-link {
        display: inline-block;
        color: #d21b52;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-all-link:hover {
        background: #fdf2f7;
    }
}

/* SHOP / MERK ARCHIVE – MOBIEL OPSCHONEN */
@media (max-width: 768px) {

    /* Breadcrumb verbergen op shop/merk/category pagina's */
    .sarlemijn-shop-wrap .woocommerce-breadcrumb,
    .sarlemijn-shop-wrap .storefront-breadcrumb {
        display: none !important;
    }

    /* Brand / category titel kleiner */
    .sarlemijn-shop-wrap .category-hero h1 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }

    /* Description compacter (basis) */
    .sarlemijn-shop-wrap .category-hero .term-description {
        font-size: 14px;
        line-height: 1.5;
        color: #4b5563;
        margin-top: 4px;
    }

    /* Image in hero verbergen op mobiel */
    .sarlemijn-shop-wrap .category-hero .flex-shrink-0 {
        display: none !important;
    }
}

/* Archive hero description: Lees meer knop stijl */
.sar-hero-readmore {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #d21d5a;
    cursor: pointer;
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
}

/* Archive hero description: 2 regels + Lees meer op mobiel */
@media (max-width: 768px) {
    .sar-hero-desc {
        font-size: 14px;
        line-height: 1.5;
        margin: 4px 0 0 0;
        color: #4b5563;
        display: -webkit-box;
        -webkit-line-clamp: 2;      /* MAX 2 regels */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sar-hero-desc.is-expanded {
        -webkit-line-clamp: unset;
        display: block;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .sarlemijn-shop-wrap .mt-2 a.inline-flex {
        display: none !important;  /* Terug verbergen */
    }
}

@media (max-width: 768px) {
    /* Haal de 32px top-padding bij de hero weg op mobiel */
    .sarlemijn-shop-wrap .category-hero {
        padding-top: 12px !important;
        padding-bottom: 4px !important;
    }

    /* Lees meer knop compact */
    .sar-hero-readmore {
        margin-top: 2px;
        margin-bottom: 0;
    }
}

/* MOBIEL: sorteerbalk (storefront-sorting) verbergen op shop/merk/category pagina's */
@media (max-width: 768px) {
    .sarlemijn-shop-wrap .storefront-sorting,
    .sarlemijn-shop-wrap .woocommerce-ordering,
    .sarlemijn-shop-wrap .woocommerce-result-count {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    /* Verberg de volledige desktop header op mobiel */
    .sticky-header,
    .header-top-bar,
    .header-bottom-bar,
    #sticky-spacer {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Zorg dat de site-content direct onder de mobile header begint */
    #masthead.site-header {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Mobiel: kleine 'Filteren' knop rechtsboven */
@media (max-width: 768px) {
    .sar-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 10px;           /* pill shape */
        border: 1px solid #d21b52;       /* roze rand */
        background: #ffffff;
        color: #d21b52;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }

    .sar-mobile-filter-btn:hover {
        background: #fdf2f7;
    }

    .sar-mobile-filter-icon {
        font-size: 14px;
        line-height: 1;
        display: inline-block;
        transform: translateY(-1px);    /* optisch centreren */
    }
}



/* MOBIEL: simpele subtiele subbrand-knoppen */
@media (max-width: 768px) {

    /* Container: iets minder marge */
    .subbrand-scroll {
        gap: 8px !important;
        padding-bottom: 0px !important;
        margin-bottom: 16px !important;
    }

    /* Kaartje zelf: lage, smalle pill */
    .subbrand-card {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(210,29,82,0.18) !important;
        box-shadow: none !important;
        min-width: auto !important;
        max-width: none !important;
        background: #ffffff !important;
    }

    /* Thumbnail links wat groter */
    .subbrand-thumb {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .subbrand-thumb img,
    .subbrand-thumb .empty-thumb {
        width: 100% !important;
        height: 100% !important;
        border-radius: 9999px !important;
        object-fit: contain !important;
        background: transparent !important;
    }

    /* Alleen titel, verticaal gecentreerd */
    .subbrand-body {
        display: flex !important;
        align-items: center !important;
        min-height: 40px !important; /* gelijk aan thumb */
    }

    .subbrand-name {
        font-size: 16px !important;   /* groter, beter leesbaar */
        font-weight: 600 !important;
        color: #111827 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    /* 'Bekijk' volledig weg op mobiel */
    .subbrand-cta {
        display: none !important;
    }
}

/* Subbrand scrollbalk volledig verbergen (ook dat roze staafje) */
.subbrand-scroll::-webkit-scrollbar {
    display: none !important;
}
.subbrand-scroll {
    -ms-overflow-style: none;    /* IE/Edge */
    scrollbar-width: none;       /* Firefox */
}

.sar-section-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d21b52;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.sar-section-link:hover {
    text-decoration: underline;
}

/* Op mobiel extra subtiel en consistent */
@media (max-width: 768px) {
    .sar-section-link {
        font-size: 13px;
        font-weight: 600;
        color: #d21b52;
        text-decoration: none;
    }
}
.sar-section-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d21b52;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.sar-section-link:hover {
    text-decoration: underline;
}

/* Op mobiel extra subtiel en consistent */
@media (max-width: 768px) {
    .sar-section-link {
        font-size: 14px;
        font-weight: 600;
        color: #d21b52;
        text-decoration: none;
    }
}

/* ========================================================================== */
/*  NIEUWE SHOP OP MERK SECTIE (vierkante logo-kaarten)                       */
/* ========================================================================== */

.brand-cards-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem; /* 24px */
}

/* Kaart zelf: vierkant blok met border + schaduw */
.brand-card-block {
    display: block;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Vierkante image container: 1:1 */
.brand-card-block__image {
    aspect-ratio: 1 / 1;          /* ALTIJD vierkant */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;                /* beetje witruimte rondom logo */
}

/* Logo binnen kaart: maximaal vullen, niet afsnijden */
.brand-card-block__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* NIET cover -> niets wordt afgesneden */
}

/* Hover: iets sterkere schaduw + roze rand */
.brand-card-block:hover {
    transform: translateY(-4px);
    border-color: #d21b52;
    box-shadow: 0 12px 26px rgba(210,29,82,0.10);
}

/* Desktop / tablet grid */
@media (max-width: 1024px) {
    .brand-cards-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Mobiel: 2 per rij, nette vierkante tegels */
@media (max-width: 768px) {
    .brand-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brand-card-block {
        border-radius: 14px;
    }

    .brand-card-block__image {
        padding: 10px;
    }
}
/* SHOP OP MERK – swipeable rij op mobiel */
@media (max-width: 768px) {

    /* Container: van grid naar horizontale slider */
    .shop-merks-section-new .brand-cards-row {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding-bottom: 20px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* full‑bleed effect zoals andere sliders */
        margin-left: -30px !important;
        margin-right: -30px !important;
        width: auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        scroll-padding-left: 30px !important;
    }

    /* Scrollbar verbergen maar wel kunnen swipen */
    .shop-merks-section-new .brand-cards-row::-webkit-scrollbar {
        display: none;
    }
    .shop-merks-section-new .brand-cards-row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Kaartjes zelf: kleiner, swipe‑tile */
    .shop-merks-section-new .brand-card-block {
        flex: 0 0 140px !important;   /* breedte kaart */
        width: 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start;
        border-radius: 14px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.05);
    }

    .shop-merks-section-new .brand-card-block__image {
        padding: 10px;               /* iets minder padding */
    }
}

/* MOBIEL: padding Shop op merk sectie (16px boven/onder) */
@media (max-width: 768px) {
    section.shop-merks-section-new,
    .shop-merks-section-new {
        padding-top: 32px !important;
        padding-bottom: 16px !important;
    }
}

@media (max-width: 768px) {


    /* SHOP OP MERK – padding mobiel */
    section.shop-merks-section-new,
    .shop-merks-section-new {
        padding-top: 32px !important;   /* HIER waardes naar wens */
        padding-bottom: 16px !important;
    }
    .shop-merks-section-new header {
        margin-bottom: 12px !important;
    }

    /* BLOG – padding mobiel */
    section.blog-section-new,
    .blog-section-new {
        padding-top: 16px !important;   /* bv. 32px boven */
        padding-bottom: 32px !important;/* bv. 32px onder */
    }
    .blog-section-new header,
    .blog-section-new > .max-w-7xl > .flex {
        margin-bottom: 12px !important;
    }
}


/* ========================================================================== */
/* MOBIELE FILTER DRAWER (rechts)                                            */
/* ========================================================================== */

@media (max-width: 1024px) {

    body.sar-filter-open {
        overflow: hidden;
    }

    .sar-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 10000;
    }

    .sar-filter-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 82vw;
        max-width: 380px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -6px 0 24px rgba(15,23,42,0.25);
        transform: translateX(100%);
        transition: transform 0.22s ease;
        z-index: 10001;
        display: flex;
        flex-direction: column;
    }

    body.sar-filter-open .sar-filter-drawer[aria-hidden="false"] {
        transform: translateX(0);
    }

    .sar-filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
        background: #ffffff;
    }

    .sar-filter-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    .sar-filter-close {
        border: 0;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: #9ca3af;
        padding: 0;
    }

    .sar-filter-reset {
        border: 0;
        background: transparent;
        color: #d21b52;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 0;
    }

    .sar-filter-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 12px;
    }

    .sar-filter-group {
        border-bottom: 1px solid #f3f4f6;
    }

    .sar-filter-group-btn {
        width: 100%;
        border: 0;
        background: #ffffff;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        cursor: pointer;
    }

    .sar-filter-group-btn .chevron {
        font-size: 18px;
        color: #9ca3af;
        transition: transform 0.2s ease;
    }

    .sar-filter-group-content {
        display: none;
        padding: 0 18px 12px;
    }

    .sar-filter-group-content.is-open {
        display: block;
    }

    .sar-filter-check {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-size: 14px;
        color: #374151;
        cursor: pointer;
    }

    .sar-filter-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        accent-color: #d21b52;
    }

    .sar-filter-scroll {
        max-height: 220px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .sar-filter-scroll::-webkit-scrollbar {
        width: 4px;
    }
    .sar-filter-scroll::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 999px;
    }

    .sar-price-row {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }

    .sar-price-row label {
        flex: 1 1 0;
        font-size: 12px;
        color: #6b7280;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sar-price-row input[type="number"] {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        padding: 6px 8px;
        font-size: 13px;
    }

    .sar-filter-footer {
        padding: 10px 14px 14px;
        border-top: 1px solid #f3f4f6;
        background: #ffffff;
    }

    .sar-filter-apply {
        width: 100%;
        border: 0;
        border-radius: 9999px;
        background: #d21b52;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        padding: 10px 16px;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(210,29,82,0.18);
    }

    .sar-filter-apply:hover {
        filter: brightness(1.05);
    }
}

/* SINGLE PRODUCT – mobiel: back knop + full‑bleed image */
@media (max-width: 768px) {

    .sarlemijn-product-container .product-breadcrumb {
        display: none !important;
    }

    .product-breadcrumb-mobile {
        display: block;
        margin-bottom: 10px;
        padding-left: 10px;  /* iets lucht t.o.v. schermrand */
    }

    .back-button-simple {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        background: transparent;
        padding: 4px 0;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;              /* rustig grijs */
        cursor: pointer;
    }

    .back-button-simple .back-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .back-button-simple svg {
        display: block;
    }

    .back-button-simple:hover {
        color: #374151;
    }

    .product-breadcrumb-desktop {
        display: none;
    }
}

/* SINGLE PRODUCT – mobiele typografie & spacing boven info-blok */
@media (max-width: 768px) {

    /* Merk boven titel: minder ruimte, iets kleiner */
    .sarlemijn-product-container .product-brand-name {
        font-size: 14px !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 2px !important;   /* was meer -> compacter */
        display: block;
    }

    /* Titel: 16px op mobiel */
    .sarlemijn-product-container .product_title.entry-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;      /* kleine ruimte onder titel */
    }


    .sarlemijn-product-container .woocommerce-product-rating .woocommerce-review-link,
    .sarlemijn-product-container .no-reviews-placeholder {
        font-size: 12px !important;
    }

    /* Prijs: 20px, duidelijke marge erboven/onder */
    .sarlemijn-product-container .product-price {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .sarlemijn-product-container .product-price .price,
    .sarlemijn-product-container .product-price {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    /* Oud prijsje binnen .price mag iets kleiner blijven */
    .sarlemijn-product-container .product-price del {
        font-size: 22px !important;
    }
}

@media (max-width: 768px) {
    .sarlemijn-atc {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;          /* naast elkaar blijven */
    }

    .sarlemijn-atc .quantity {
        flex: 0 0 auto;             /* vaste breedte, niet oprekken */
    }

    .sarlemijn-atc .single_add_to_cart_button {
        flex: 1 1 auto;             /* knop pakt alle resterende breedte */
        justify-content: center;
        display: inline-flex;
        gap: 6px;                   /* ruimte tussen tekst en icoon */
        font-size: 14px;
    }

    /* Icoon in de knop iets kleiner en netjes uitgelijnd */
    .sar-cart-icon {
        font-size: 16px;
        line-height: 1;
        margin-left: 2px;
    }
}

/* Desktop: ook tekst + icoon in één lijn houden */
.sarlemijn-atc .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sar-cart-icon {
    font-size: 16px;
    line-height: 1;
}


.sarlemijn-atc {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; /* belangrijk: nooit automatisch onder elkaar */
}

/* MOBIEL: qty vaste breedte, knop vult rest, alles op 1 rij */
@media (max-width: 768px) {
    .sarlemijn-atc {
        width: 100%;
        align-items: stretch;
        gap: 10px;
    }

    .sarlemijn-atc .quantity {
        flex: 0 0 120px;
        max-width: 120px;
    }

    .sarlemijn-atc .single_add_to_cart_button {
        flex: 1 1 auto;
        width: 220px !important;
        max-width: none !important;
        box-sizing: border-box;
        justify-content: center;
        display: inline-flex;
        gap: 6px;
    }
}

.add-to-cart-section form.cart {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Extra zekerheid: container zelf geen extra marge */
.add-to-cart-section {
    margin-top: 0 !important;
    padding-top: 16px !important;
}

.sar-review-form-card {
    background: #ffffff;
    border: 1px solid #f3e8ff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.sar-review-form-card.hidden { display: none; }

.sar-rating-stars {
    display: inline-flex;
    gap: 4px;
}

.sar-rating-stars .sar-star {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 2px;
}
.sar-rating-stars .sar-star.is-active {
    color: #C6A661; /* goud */
}

/* Review bedankt-bericht */
.sar-review-thanks {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}
.sar-review-thanks p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
}
.sar-review-thanks small {
    font-weight: 400;
    color: #6b7280;
    font-size: 13px;
}

/* Dark loader (voor knoppen met donkere achtergrond) */
.sar-loader-dark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: #d21b52;
    border-radius: 50%;
    animation: sar-spin-review 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes sar-spin-review {
    to { transform: rotate(360deg); }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 9999px;
    border: none;
    background-color: #d21b52;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.btn-primary:hover {
    filter: brightness(1.05);
}

/* RELATED: voeg‑toe‑rij zonder extra marge/padding */
.product-related-section .product-card-new form.cart {
    margin: 0 !important;
    padding: 16px 0 !important;          /* haalt die 16px 0px weg */
    gap: 0.5rem !important;         /* alleen kleine ruimte tussen qty en knop */
}

/* Iets minder ruimte onder de prijs in related cards */
.product-related-section .product-card-new .product-card-price {
    margin-bottom: 8px !important;
}

/* RELATED: qty exact zelfde stijl als homepage cards */
.product-related-section .product-card-new .quantity {
    display: flex !important;
    align-items: center !important;
    background-color: #f3f4f6 !important;
    border-radius: 6px !important;
    height: 30px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* zelfde buttons als homepage */
.product-related-section .product-card-new .quantity .qty-btn {
    width: 28px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* zelfde input als homepage */
.product-related-section .product-card-new .quantity input.qty {
    width: 34px !important;
    height: 100% !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    font-size: 0.95rem !important;
    -moz-appearance: textfield;
}

/* spin buttons weg */
.product-related-section .product-card-new .quantity input.qty::-webkit-outer-spin-button,
.product-related-section .product-card-new .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* MOBIEL: Vergelijkbare producten -> swipe rij + alleen 'Voeg toe' */
@media (max-width: 768px) {

    /* 1. Maak van de grid een horizontale swipe‑rij */
    .product-related-section .related-inner > .grid {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-bottom: 18px;
        margin-left: -30px;          /* trek tot rand scherm */
        margin-right: -30px;
        padding-left: 30px;          /* compenseer negatieve margin */
        padding-right: 30px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* Verberg scrollbalk */
    .product-related-section .related-inner > .grid::-webkit-scrollbar {
        display: none;
    }
    .product-related-section .related-inner > .grid {
        scrollbar-width: none;       /* Firefox */
    }

    /* 1 kaart per “tile” (iets smaller dan volledig scherm) */
    .product-related-section .related-inner > .grid > * {
        flex: 0 0 78vw;              /* pas desnoods aan naar 70–80 */
        max-width: 78vw;
        scroll-snap-align: start;
    }

    /* 2. Amount verbergen, knop full‑width onderin de kaart */
    .product-related-section .product-card-new .quantity {
        display: none !important;
    }

    .product-related-section .product-card-new form.cart {
        display: block !important;
    }

}


/* MOBIEL: Vergelijkbare producten = zelfde kaartbreedte als Nieuw binnen (2 per rij) */
@media (max-width: 768px) {

    /* roze blok echt full‑width, zelfde white‑space als homepage secties */
    .product-related-section.product-related-full {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 0;
        padding-right: 0;
    }

    .product-related-section .related-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px; /* zelfde padding als .px-4 container */
    }

    /* zelfde “track” gevoel als sliders: 2 kaarten breed + swipe */
    .product-related-section .related-inner > .grid {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 8px !important;              /* ≈ px-1 links + rechts per kaart */
        padding-bottom: 18px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .product-related-section .related-inner > .grid::-webkit-scrollbar {
        display: none;
    }

    /* kaartbreedte ≈ w-1/2 uit Nieuw binnen (2 tegelijk in beeld) */
    .product-related-section .related-inner > .grid > * {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        scroll-snap-align: start;
    }

    /* amount weg, alleen brede Voeg toe knop zoals in sliders */
    .product-related-section .product-card-new .quantity {
        display: none !important;
    }

    .product-related-section .product-card-new form.cart {
        display: block !important;
        margin-top: 0;
    }
}

@media (max-width: 768px) {

    /* Track: zelfde als .new-slider-track / .popular-slider-track */
    .product-related-section .related-inner > .grid {
        display: flex !important;
        overflow-x: auto !important;
        transform: none !important;
        gap: 12px !important;

        /* full‑bleed + start‑padding, precies jouw fix */
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        scroll-padding-left: 15px !important;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    .product-related-section .related-inner > .grid::-webkit-scrollbar {
        display: none;
    }

    /* Cards: exact zelfde breedte als slider (220px tiles) */
    .product-related-section .related-inner > .grid > * {
        flex: 0 0 220px !important;
        max-width: 220px !important;
        padding: 0 !important;
        scroll-snap-align: start;
        display: flex;              /* voor gelijke hoogte */
    }

    /* Kaart zelf: full height + knop altijd onderaan, net als slider */
    .product-related-section .product-card-new {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Flex-grow op de middelste div zodat de button altijd onderaan zit */
    .product-related-section .product-card-new > .p-4 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .product-related-section .product-card-new form.cart {
        margin-top: 0px !important;
        padding: 0px !important;
        width: 100%;
    }

    /* Icon button styling in related products (zelfde als shop cards) */
    .product-related-section .product-card-new .sar-atc-label {
        display: none !important;
    }
    .product-related-section .product-card-new .sar-atc-icon {
        display: inline-block !important;
        width: 22px;
        height: 22px;
        vertical-align: middle;
    }
    .product-related-section .product-card-new .single_add_to_cart_button,
    .product-related-section .product-card-new .add_to_cart_button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: unset !important;
        padding: 8px 14px !important;
        min-height: 36px;
        line-height: normal !important;
        height: auto !important;
    }

    /* Stock + button op 1 rij */
    .product-related-section .product-card-new .sar-stock-cart-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        margin-top: auto;
    }
    .product-related-section .product-card-new .sar-stock-cart-row .stock-indicator-block {
        margin: 0 !important;
        flex: 1;
    }
}


@media (max-width: 768px) {

    /* Onderkant van de bovenste product‑container vlak maken */
    .sarlemijn-product-container {
        padding-bottom: 0 !important;   /* pb-8 weg op mobiel */
    }

    /* Minder witruimte onder de reviews */
    .product-reviews-section {
        padding-bottom: 0 !important;   /* bottom weg */
        padding-top: 24px !important;   /* evt. wat kleiner dan py-12 */
    }
}

/* OVERRIDE: geen padding meer op de Voeg toe‑rij in related / cart blokken */
.product-related-section .product-card-new form.cart {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {

    /* Hoofdcontainer: minder padding, nooit horizontaal scrollen */
    .sar-cart {
        padding: 16px 14px 24px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Titel kleiner en compacter */
    .sar-cart h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    /* Productrij: minder witruimte en geen rare breedtes */
    .sar-cart .cart-row {
        padding: 10px 0 !important;
    }
    .sar-cart .cart-row .flex {
        gap: 10px !important;
    }

    /* Productafbeelding wat kleiner */
    .sar-cart .cart-row .shrink-0,
    .sar-cart .cart-row a.block.shrink-0 {
        width: 72px !important;
        height: 96px !important;
    }

    /* Naam/prijs teksgrootte */
    .sar-cart .cart-row h2 {
        font-size: 14px !important;
    }
    .sar-cart .cart-row .text-sm {
        font-size: 12px !important;
    }
    .sar-cart .cart-row .text-base {
        font-size: 14px !important;
    }

    /* Qty-blok smaller zodat niks buiten beeld valt */
    .sar-cart .qty-wrap {
        height: 34px !important;
    }
    .sar-cart .qty-wrap input.qty {
        width: 54px !important;
        font-size: 14px !important;
    }
    .sar-cart .qty-wrap .qty-btn {
        width: 32px !important;
        font-size: 18px !important;
    }

    /* Rechterkolom (bezorging en service) onder de producten, compact */
    .sar-cart-summary {
        margin-top: 20px !important;
        padding: 14px 14px 18px !important;
        border-radius: 10px !important;
    }

    .sar-cart-summary h3 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .sar-cart-usps {
        font-size: 13px !important;
    }

    .sar-cart-totals {
        font-size: 14px !important;
        padding-top: 10px !important;
    }

    .sar-cart-totals .sar-totals-row span:first-child {
        max-width: 60% !important;
    }

    /* Groene CTA-knop iets lager en smaller lettertype */
    .sar-cart-summary a[href*="bestellen"] {
        height: 44px !important;
        line-height: 44px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        margin-top: 10px !important;
    }

    /* Betaal-iconen rij: kleine marges */
    .sar-cart-summary .payment-badges {
        margin-top: 10px !important;
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

@media (max-width: 768px) {
    /* Cart titel mag gewoon afbreken, niet buiten het scherm duwen */
    .sar-cart .cart-row h2,
    .sar-cart .cart-row h2 a {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Hele rij zelf nooit breder dan het scherm */
    .sar-cart .cart-row {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Binnenste flex mag wrappen ipv geforceerd op één lijn */
    .sar-cart .cart-row .flex {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 768px) {

    /* FILIALEN HERO: breadcrumb weg, tekst kleiner, alles netter */
    .filialen-hero-section .woocommerce-breadcrumb {
        display: none !important;
    }

    .filialen-hero-section .text-content h1 {
        font-size: 1.6rem !important;   /* ~26px ipv 32+ */
        line-height: 1.25 !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .filialen-hero-section .text-content p.text-gray-600 {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Google Reviews blok centreren en iets meer presence */
    .filialen-hero-section .google-reviews-widget {
        justify-content: center !important;
        text-align: left;
        padding: 0.75rem 1rem !important;
        margin-top: 0.75rem !important;
        border-radius: 9999px;
        background: #fff7fb;
    }

    .filialen-hero-section .google-reviews-widget img {
        width: 28px;
        height: 28px;
    }

    .filialen-hero-section .google-reviews-widget p.font-bold {
        font-size: 0.95rem !important;
    }

    .filialen-hero-section .google-reviews-widget .text-gray-600.font-semibold {
        font-size: 0.9rem !important;
    }

    /* Filiaal‑cards: iets compacter op mobiel */
    .filiaal-card-new {
        margin-bottom: 1.5rem;
    }
    .filiaal-info {
        padding: 1.75rem 1.5rem;
    }
    .filiaal-title {
        font-size: 1.4rem !important;
    }

    /* HULP OF ADVIES NODIG: grid 2 per rij i.p.v. alles onder elkaar */
    .hulp-advies-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hulp-advies-section h2 {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
    }

    .hulp-advies-section p.text-gray-600.text-lg {
        font-size: 0.95rem !important;
        margin-bottom: 1.75rem !important;
    }

    /* Override Tailwind grid-classes voor deze section */
    .hulp-advies-section .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }

    .hulp-advies-section .contact-optie-card a {
        padding: 1.25rem !important;
    }

    .hulp-advies-section .icon-wrapper {
        width: 64px !important;
        height: 64px !important;
    }

    .hulp-advies-section .text-xl {
        font-size: 1rem !important;
    }

    .hulp-advies-section .text-gray-600 {
        font-size: 0.85rem !important;
    }
}

.footer-credits .sf-container{
  display: flex;
  align-items: center;          /* verticaal gecentreerd */
  justify-content: space-between;
  gap: 24px;
  text-align: center;
}

/* Tekst in het midden, pakt rest-breedte */
.footer-credits .credit-text{
  flex: 1 1 auto;
  font-size: 13px;
}

/* Links/rechts groepen met logo’s */
.footer-badges{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Linker logo’s (Thuiswinkel / Trustpilot) */
.footer-badge{
  height: 92px;
  width: auto;
  object-fit: contain;
}

/* Rechter payment iconen (nu 5× iDEAL) */
.footer-pay-icon{
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* Mobiel: alles onder elkaar, netjes gecentreerd */
@media (max-width: 768px){
  .footer-credits .sf-container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .footer-badges{
    justify-content: center;
    flex-wrap: wrap;
  }
  .footer-credits .credit-text{
    order: -1;          /* tekst boven de logo’s */
  }
}

.footer-credits .sf-container{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;   /* zelfde boven/onder */
    padding-bottom: 10px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Footer: maak iDEAL-logo's rechts groter en als badge zichtbaar */
.footer-badges-right .footer-pay-icon {
    height: 40px !important;      /* duidelijk groter */
    width: auto !important;
    padding: 6px 10px;            /* ruimte rondom logo */
    border-radius: 10px;          /* afgeronde badge */
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* =========================
   SEARCH FILTER SIDEBAR CARDS
   ========================== */

/* Achtergrond van de sidebar zelf */
.sarlemijn-shop-wrap #shop-sidebar{
    background:#f9fafb;
    padding-top:0;
}

/* Kolom met filters netjes stapelen */
.sarlemijn-shop-wrap #custom-product-filters{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* Elk filterblok als card (zelfde look als je andere kaarten) */
.sarlemijn-shop-wrap #custom-product-filters .widget,
.sarlemijn-shop-wrap #sar-active-filters > div{
    background:#ffffff;
    border-radius:16px;
    border:1px solid #f3e4ec;
    padding:16px 18px;
    box-shadow:0 10px 30px rgba(210,29,82,0.06);
}

/* Verwijder onderlijn uit oude tailwind-border */
.sarlemijn-shop-wrap #custom-product-filters .widget{
    border-bottom:0 !important;
}

/* "Filters" titel bovenaan */
.sarlemijn-shop-wrap #custom-product-filters > h2{
    margin-bottom:10px;
    font-size:18px;
}

/* Titel van elk blok + chevron */
.sarlemijn-shop-wrap #custom-product-filters .accordion-toggle{
    padding:0;
    font-size:16px;
}
.sarlemijn-shop-wrap #custom-product-filters .accordion-toggle span:first-child{
    font-weight:700;
}

/* Inhoud binnen blokken iets naar beneden */
.sarlemijn-shop-wrap #custom-product-filters .accordion-content{
    margin-top:10px;
}

/* Labels & counts */
.sarlemijn-shop-wrap #custom-product-filters label{
    font-size:14px;
}
.sarlemijn-shop-wrap #custom-product-filters label .text-gray-500{
    font-size:12px;
}

/* "Meer tonen" knop onderaan blok */
.sarlemijn-shop-wrap #custom-product-filters .sar-show-more{
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.sarlemijn-shop-wrap #custom-product-filters .sar-show-more-label{
    text-decoration:underline;
}
.sarlemijn-shop-wrap #custom-product-filters .sar-show-more-chevron{
    font-size:10px;
}

/* =========================
   PINK CHECKBOXES / SLIDER
   ========================== */

/* Gebruik je paarse kleur als accent */
.sarlemijn-shop-wrap #custom-product-filters input[type="checkbox"],
.sarlemijn-shop-wrap #custom-product-filters input[type="radio"],
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]{
    accent-color:#d21d5a;
}

/* Range track & thumb custom (WebKit) */
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    height:4px;
    border-radius:999px;
    background:#f3e4ec;
}
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border-radius:999px;
    background:#d21d5a;
    box-shadow:0 0 0 4px rgba(210,29,82,0.18);
    cursor:pointer;
}

/* Firefox */
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-moz-range-track{
    height:4px;
    border-radius:999px;
    background:#f3e4ec;
}
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:999px;
    background:#d21d5a;
    border:none;
    box-shadow:0 0 0 4px rgba(210,29,82,0.18);
    cursor:pointer;
}

/* Kleine verbetering rating-sterren */
.sarlemijn-shop-wrap #custom-product-filters .sar-rating-input + span{
    font-size:15px;
}
.sarlemijn-shop-wrap #custom-product-filters .sar-rating-input + span.text-yellow-400{
    font-size:16px;
}


/* Zelfde achtergrond als pagina (wit) */
.sarlemijn-shop-wrap #shop-sidebar{
    background:#ffffff !important;
}

/* Minder ruimte tussen de cards */
.sarlemijn-shop-wrap #custom-product-filters{
    gap:10px; /* was 14px */
}

/* Haal standaard WP-widget marges weg, we gebruiken alleen gap */
.sarlemijn-shop-wrap #custom-product-filters .widget{
    margin:0 !important;
}

/* FIX: prijs‑slider – genoeg hoogte zodat de bolletjes niet worden afgesneden */
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    height:24px;                 /* hoger i.p.v. 4px */
    background:transparent;      /* track doen we op ::-track */
    padding:0 6px;               /* beetje ruimte links/rechts voor de bol */
}

/* WebKit track + thumb */
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-webkit-slider-runnable-track{
    height:4px;
    border-radius:999px;
    background:#f3e4ec;
}
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border-radius:999px;
    background:#d21d5a;
    box-shadow:0 0 0 4px rgba(210,29,82,0.18);
    cursor:pointer;
    margin-top:-5px;             /* centreert de bol op het spoor */
}

/* Firefox */
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-moz-range-track{
    height:4px;
    border-radius:999px;
    background:#f3e4ec;
}
.sarlemijn-shop-wrap #custom-product-filters input[type="range"]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:999px;
    background:#d21d5a;
    border:none;
    box-shadow:0 0 0 4px rgba(210,29,82,0.18);
    cursor:pointer;
}

.sar-filter-footer{
    padding: 12px 16px 20px;
    box-shadow: 0 -12px 30px rgba(0,0,0,0.04);
    background:#ffffff;
}

/* Grijze "Filters wissen" knop boven de roze knop */
.sar-mobile-clear-btn{
    width:100%;
    margin-bottom:8px;
    padding:8px 16px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#f3f4f6;
    font-size:12px;
    font-weight:600;
    color:#4b5563;
    text-align:center;
}
.sar-mobile-clear-btn:hover{
    background:#e5e7eb;
}
.sar-mobile-clear-btn:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(210,29,90,0.25);
}

.sar-filter-overlay,
.sar-filter-drawer {
    display: none;
}

/* Alleen op mobiel/tablet tonen we ze */
@media (max-width: 1024px) {
    body.sar-filter-open .sar-filter-overlay {
        display: block;
    }
    .sar-filter-drawer {
        display: flex;
    }
}

/* Override: filtercards in sidebar minder roze, meer zoals productkaarten */
.sarlemijn-shop-wrap #custom-product-filters .widget,
.sarlemijn-shop-wrap #sar-active-filters > div {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;                 /* lichtgrijze rand i.p.v. roze */
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);/* neutrale grijze shadow */
}

/* ========================================================================== */
/* MERKEN OVERZICHT – MOBIEL OPSCHONEN                                       */
/* ========================================================================== */
@media (max-width: 768px) {

  /* 1. Breadcrumb verbergen op de Merken-template */
  .page-template-template-merken .woocommerce-breadcrumb,
  .page-template-template-merken .storefront-breadcrumb {
      display: none !important;
  }

  /* 2. Hoofdtitel "Alle merken" kleiner & minder marge */
  .page-template-template-merken main#primary h1 {
      font-size: 1.6rem;          /* ~26px */
      line-height: 1.25;
      margin-top: 6px;
      margin-bottom: 10px;        /* was my-6 => veel groter */
  }

  /* 3. Alfabet‑balk compacter */
  .page-template-template-merken .alphabet-nav {
      padding-bottom: 6px;
      margin-bottom: 8px;
  }

  .page-template-template-merken .alpha-button {
      width: 2.1rem;
      height: 2.1rem;
      font-size: 0.9rem;
  }

  /* 4. Zoekbalk & lijst dichter op elkaar */
  .page-template-template-merken .search-bar-wrapper {
      margin-bottom: 14px;
  }

  .page-template-template-merken .brands-list-container {
      margin-top: 0;
  }

  /* 5. Minder ruimte tussen de letter‑groepen */
  .page-template-template-merken .brands-list-container .brand-group {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
  }

  .page-template-template-merken .brand-letter-heading {
      font-size: 1.25rem;
      margin-bottom: 6px;
      padding-bottom: 6px;
  }

  /* 6. Strakkere merk‑lijst per letter */
  .page-template-template-merken .brand-grid {
      padding-top: 4px;
      gap: 4px 10px;          /* minder ruimte tussen regels/kolommen */
  }

  .page-template-template-merken .brand-link {
      padding: 2px 0;
      font-size: 0.95rem;
  }
}

/* Extra bottom‑ruimte onder de merkenlijst (desktop + mobiel) */
.page-template-template-merken .brands-list-container {
    padding-bottom: 40px;
}

@media (max-width: 768px) {
    .page-template-template-merken .brands-list-container {
        padding-bottom: 32px; /* iets compacter op mobiel */
    }
}

/* ========================================================================== */
/* CHECKOUT STYLING                                                           */
/* ========================================================================== */

.sar-checkout-page {
    background: radial-gradient(circle at top left, #ffe2ec 0, #ffffff 45%, #ffe2ec 100%);
}

.sar-checkout-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sar-checkout-header {
    text-align: left;
}

.sar-checkout-title {
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 700;
    color: #e4146b;
    margin: 0 0 0.25rem;
}

.sar-checkout-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.98rem;
}

.sar-checkout-layout {
    margin-top: 1.5rem;
}

.sar-checkout-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    padding: 24px 22px;
}

@media (min-width: 1024px) {
    .sar-checkout-card--main {
        padding: 28px 30px;
    }
    .sar-checkout-card--sidebar {
        padding: 24px 24px 26px;
        max-width: 380px;      /* rechter card breder */
        margin-left: auto;     /* tegen de rechterkant van de kolom */
    }
}

.sar-checkout-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e4146b;
    margin: 0 0 0.75rem;
}

/* --- Sidebar: 1 kaart, geen extra mini-card rond payment --- */
.sar-checkout-card--sidebar #payment {
    margin-top: 1.25rem;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

/* Tabellen in de sidebar wat strakker */
.sar-checkout-card--sidebar .shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sar-checkout-card--sidebar .shop_table th,
.sar-checkout-card--sidebar .shop_table td {
    padding: 6px 0;
    border: 0;
}

.sar-checkout-card--sidebar .shop_table thead {
    border-bottom: 1px solid #f0f0f0;
}

.sar-checkout-card--sidebar .shop_table tfoot th {
    font-weight: 600;
}

/* --- Velden: meer ruimte + witte achtergrond --- */
.woocommerce-checkout form .form-row {
    margin-bottom: 12px;
}

.woocommerce-checkout form .form-row label {
    margin-bottom: 4px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    border-radius: 8px;
    border-color: #e4e4e4;
    background: #ffffff;          /* geen grijze inputs */
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: #e4146b;
    box-shadow: 0 0 0 1px rgba(228, 20, 107, 0.2);
}

/* Afreken-knop voller */
.woocommerce #place_order,
.woocommerce-page #place_order {
    width: 100%;
    border-radius: 999px;
    background: #0bb04b;
    border: none;
    padding: 0.9rem 1.2rem;
    font-weight: 600;
    font-size: 1rem;
}


/* Buitenste card */
.sar-checkout-card--sidebar {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.06);
    padding: 24px 22px;
}

/* Binnenste #order_review blok:
   - altijd 100% breed
   - maar max. 400px, zodat hij op desktop mooi oogt
   - gecentreerd in de card
*/
.sar-checkout-card--sidebar .woocommerce-checkout-review-order {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Betaalblok niet in een extra grijze kaart */
.sar-checkout-card--sidebar #payment {
    margin-top: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Extra ruimte en witte velden links */
.woocommerce-checkout form .form-row {
    margin-bottom: 18px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    background-color: #ffffff;
    border-radius: 8px;
    border-color: #e4e4e4;
}

/* ========================================================================== */
/* THANKYOU / ORDER RECEIVED LAYOUT                                          */
/* ========================================================================== */

/* Zelfde achtergrond als checkout */
body.woocommerce-order-received .site-main {

    padding: 40px 0; /* wat ruimte boven/onder de card */
}

/* De hele order‑box in een nette card met max-width, zoals checkout */
body.woocommerce-order-received .woocommerce-order {
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.06);
    padding: 26px 22px;
}

/* Kopjes iets nadrukkelijker in jouw stijl */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
    color: #e4146b;
    font-weight: 700;
}

/* Mobiel: full‑width, minder schaduw/radius zodat het lekker vlak oogt */
@media (max-width: 768px) {
    body.woocommerce-order-received .site-main {
        padding: 20px 0;
    }

    body.woocommerce-order-received .woocommerce-order {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 14px;
    }
}

@media (min-width: 1024px) {
    #main-product-image {
        height: 600px !important;     /* wat jij in de inspector zet */
        width: auto !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: contain !important;
    }
}

.product-payment-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.product-payment-logos .product-pay-icon {
    height: 32px;
    width: auto;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.product-payment-logos.justify-center {
    justify-content: center;
}

/* SUBBRAND SCROLLER – desktop: scrollbar + drag cursor */
@media (min-width: 1024px) {
    .subbrand-scroll {
        cursor: grab;
        overflow-x: auto;
        -ms-overflow-style: auto;   /* IE/Edge */
        scrollbar-width: thin;      /* Firefox */
    }

    .subbrand-scroll::-webkit-scrollbar {
        display: block !important;  /* override eerdere 'display:none' */
        height: 6px;
    }

    .subbrand-scroll::-webkit-scrollbar-track {
        background: #fbeff5;
        border-radius: 999px;
    }

    .subbrand-scroll::-webkit-scrollbar-thumb {
        background: #e4c0d2;
        border-radius: 999px;
    }

    .subbrand-scroll.dragging {
        cursor: grabbing;
    }
}

/* Haarproducten mega-menu kopjes (Verzorging / Haarstyling / Haarkleuringen / Haarmode etc.) */
.haarproducten-inner .hp-mega-col h3,
.haarproducten-inner .hp-mega-col h3 a {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Merken mega-menu: nette grid met vaste kolommen */
.mega-test-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;  /* 5 gelijke kolommen */
    gap: 8px 32px !important;                         /* ruimte tussen kolommen en rijen */
    align-items: start !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.mega-test-grid-item {
    white-space: nowrap !important;      /* niet afbreken */
    overflow: hidden !important;
    text-overflow: ellipsis !important;  /* ... als te lang */
    font-size: 1rem !important;
    color: #31232a !important;
    font-weight: 500 !important;
    padding: 4px 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: color 0.15s;
}

.mega-test-grid-item:hover {
    color: #d21b52 !important;
    background: transparent !important;
}

/* Responsive: op tablet/mobiel minder kolommen */
@media (max-width: 1023px) {
    .mega-test-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px 16px !important;
    }
}

@media (min-width: 1024px) {
    .product-related-section .related-slider-track.grid {
        gap: 0 !important;
    }
}
/* Definitieve styling voor de kleurcode dropdown */
.sar-select-wrap select,
.product-right-column select[name*="kleurcode"] {
    width: 40%;
    background: #fff !important;
    border: 1.5px solid #d21b52 !important;
    border-radius: 10px !important;
    padding: 12px 44px 12px 16px !important; /* links/rechts witruimte */
    font-size: 15px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    min-width: 180px;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin-top: 5px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

/* Focus/hover: zelfde roze border als amount */
.sar-select-wrap select:focus,
.sar-select-wrap select:hover,
.product-right-column select[name*="kleurcode"]:focus,
.product-right-column select[name*="kleurcode"]:hover {
    border-color: #d21b52 !important;
    box-shadow: 0 0 0 2px rgba(210,29,82,0.10) !important;
}

/* Chevron blijft rechts */
.sar-select-chevron {
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 22px;
    color: #d21b52;
    z-index: 2;
}

.woocommerce-ordering select {
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    background: #fff;
    font-weight: 600;

    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* PAGINATIE STYLING IN SARLEMIJN KLEUREN */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #fff;
    border: 1.5px solid #f3ded6;
    color: #d00e50;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0.18rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    line-height: 1;
}
.page-numbers.current {
    background: #f3ded6;
    color: #d00e50;
    border-color: #f3ded6;
    cursor: default;
}
.page-numbers:hover:not(.current) {
    background: #fde7f1;
    color: #d00e50;
    border-color: #d21b52;
}
.page-numbers.dots {
    background: none;
    border: none;
    color: #bbb;
    cursor: default;
}
.page-numbers.prev, .page-numbers.next {
    background: #f3ded6;
    color: #d00e50;
    border: 1.5px solid #f3ded6;
    font-size: 1.3rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.page-numbers.prev:hover, .page-numbers.next:hover {
    background: #fde7f1;
    color: #d00e50;
    border-color: #d21b52;
}
/* Verberg paginatie op mobiel (load-more knop is er) */
@media (max-width: 768px) {
  .woocommerce-pagination,
  nav[aria-label="Paginering"] {
    display: none !important;
  }
}

/* Clean pagination */
.sar-pagination-wrap{
  display:flex;
  justify-content:center;
  margin: 2rem 0;
}

.sar-pagination{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  gap: .5rem;
  align-items:center;
}

.sar-page-item{ margin:0; padding:0; }

.sar-page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  border-radius: 9999px;
  border: 1px solid #f0c3d6;      /* zacht roze */
  background: #fff;
  color: #b1005a;                  /* roze tekst */
  text-decoration: none;
  line-height: 1;
}

.sar-page-link:hover{
  background:#fff3f8;
}

.sar-page-link.current{
  background:#b1005a;
  border-color:#b1005a;
  color:#fff;
}

.sar-page-link.dots{
  border-color: transparent;
  background: transparent;
  color:#9ca3af;
  min-width: 24px;
  padding: 0;
}


/* Zakelijk registreren – modern card */
.sar-reg-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.06);
  padding:22px 20px;
}

@media (min-width: 768px){
  .sar-reg-card{ padding:28px 26px; }
}

.sar-reg-header{ margin-bottom: 18px; }
.sar-reg-title{
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  color: #d21b52;
  margin: 0 0 10px 0;
  text-align: center;
}
.sar-reg-subtitle{
  color:#4b5563;
  margin:0 auto 14px auto;
  max-width: 44rem;
  text-align: center;
  line-height: 1.6;
}

.sar-reg-usps{
  list-style:none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sar-reg-usps li{
  position: relative;
  padding-left: 26px;
  color:#374151;
  font-size: 14px;
}
.sar-reg-usps li::before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #d21b52;
  font-weight: 700;
}

/* Juridische checkbox */
.sar-reg-legal{
  background: #fdf2f7;
  border: 1px solid rgba(210,29,82,0.18);
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.sar-reg-checkbox{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color:#374151;
  cursor: pointer;
}
.sar-reg-checkbox input[type="checkbox"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #d21b52;
}
.sar-reg-legal-note{
  margin: 8px 0 0 26px;
  font-size: 12px;
  color:#6b7280;
}

/* Nieuwe knop (consistent met site) */
.sar-reg-submit{
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #1fb54a;
  color: #ffffff;
  font-weight: 800;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31,181,74,0.18);
}
.sar-reg-submit:hover{ filter: brightness(1.05); }

.my-account-page .sar-account-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.06);
  padding: 22px 20px;
}

@media (min-width: 768px){
  .my-account-page .sar-account-card{ padding: 28px 26px; }
}

/* WooCommerce zet vaak extra top margins; die zorgen voor “slordige” white space */
.my-account-page .woocommerce{
  margin-top: 0 !important;
}
.my-account-page .woocommerce .u-columns,
.my-account-page .woocommerce .woocommerce-MyAccount-content,
.my-account-page .woocommerce .woocommerce-MyAccount-navigation{
  margin-top: 0 !important;
}

/* Voorkom “flits” van submenu’s (zoals Merken) bij refresh */
@media (min-width: 1024px) {
  html.js .header-bottom-bar .category-menu-list > li > ul.sub-menu {
    display: none !important;
  }
}

/* Stock indicator: out of stock (rood) */
.stock-indicator.is-oos .stock-dot{
    background: #ef4444; /* rood */
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

/* Disabled add-to-cart knop (zelfde layout, lichter groen) */
.product-card-new form.cart .single_add_to_cart_button.is-disabled,
.product-card-new form.cart .single_add_to_cart_button:disabled{
    background-color: #a7f3b7 !important; /* licht groen */
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.95;
}
.product-card-new form.cart .single_add_to_cart_button.is-disabled:hover,
.product-card-new form.cart .single_add_to_cart_button:disabled:hover{
    background-color: #a7f3b7 !important;
    filter: none !important;
}

/* Disabled quantity controls */
.product-card-new .quantity .qty-btn:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}
.product-card-new .quantity input.qty:disabled{
    opacity: 0.65;
    cursor: not-allowed;
}

/* SALE badge op product cards (groter + jouw roze + witte tekst) */
.product-card-new .sar-sale-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #d21b52;                 /* site kleur */
  color: #ffffff;                      /* witte tekst */
  border: none !important;    /* <-- weg met de rand */
  outline: none !important;   /* <-- extra zekerheid */

  padding: 7px 14px;                   /* meer padding */
  border-radius: 9999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;

  box-shadow: 0 12px 24px rgba(210,27,82,0.22);
}

.product-card-new:hover .sar-sale-badge{
  filter: brightness(1.03);
}

/* Mobiel net iets compacter */
@media (max-width: 420px){
  .product-card-new .sar-sale-badge{
    padding: 6px 12px;
    font-size: 12px;
    border-width: 2px;
  }
}

/* Stock indicator: on backorder (oranje) */
.stock-indicator.is-backorder .stock-dot{
  background: #f59e0b; /* oranje */
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10);
}

/* Single product – variatie badges (Inhoud) duidelijker */
.product-right-column .custom-attribute-badges{
  gap: 10px !important;
}

.product-right-column .custom-attribute-badges .badge-option{
  /* basis: beter zichtbaar */
  padding: 8px 14px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;

  /* jouw stijl: wit + roze rand */
  background: #ffffff !important;

  border: 1px solid #d21b52 !important;

  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.product-right-column .custom-attribute-badges .badge-option:hover,
.product-right-column .custom-attribute-badges .badge-option:focus{
  background: #fff3f8 !important;
  border-color: #d21b52 !important;
  outline: none !important;
  transform: translateY(-1px);
}

/* Actief: volle site-kleur + wit */
.product-right-column .custom-attribute-badges .badge-option.active{
  background: #d21b52 !important;
  color: #ffffff !important;
  border-color: #d21b52 !important;
  box-shadow: 0 10px 22px rgba(210,29,82,0.18) !important;
  transform: none;
}