/*
Theme Name: WW Theme 2025
Theme URI: https://marktstraatje.nl
Author: Wesleys Witgoed
Author URI: https://marktstraatje.nl
Description: 100% Custom 'Van Scratch' theme voor Wesleys Witgoed 2.0. Geen bloat, pure snelheid.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ww-theme-2025
*/

/* ==== 1. WESLEYS WITGOED BRAND DNA (DE BAAS) ==== */
:root {
    --ww-blauw-primair: #0d8cf0; /* Jouw herkenbare blauw */
    --ww-oranje-actie: #f57200; /* Jouw 'Koop nu' oranje */
    --ww-tekst-donker: #333; /* Donkere tekst */
    --ww-tekst-licht: #777; /* Lichtere tekst */
    --ww-achtergrond: #f7f9fc; /* Een heel lichtgrijze/witte achtergrond */
    --ww-border: #e0e0e0; /* Lichte lijntjes */
    --brand-orange: #ff6600;
    --brand-blue: #009ee3;
    --brand-purple-in3: #5200FF;
    --text-dark: #1d2b38;
    --text-light: #5a6a78;
    --bg-card: #ffffff;
    --bg-page: #f7faff;
    --line-color: #e9eef5;
    --radius-card: 24px;
    --radius-btn: 999px;
    --anim-duration: 0.8s;
    --anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --blue: #55bcee;
    --orange: #fe6700;
    --text: #222;
    --light: #fafafa;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    font-family: "Inter", "Segoe UI", sans-serif;
}

/* ==== 2. GLOBALE STYLES ==== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--ww-tekst-donker);
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    color: var(--ww-blauw-primair);
    text-decoration: none;
}

a:hover {
    color: var(--ww-oranje-actie);
}

#content {
    /* Deze div zit in header.php en sluit in footer.php */
    /* Zorgt dat content niet ONDER de header valt */
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ==== 3. HEADER STYLING (LAAG 1, 2, 3) ==== */
/* --- 3.1. Top Bar --- */
.header-top-bar {
    background: var(--ww-achtergrond);
    border-bottom: 1px solid var(--ww-border);
    padding: 8px 0;
    font-size: 13px;
    color: var(--ww-tekst-licht);
}

.header-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top-bar a {
    color: var(--ww-tekst-licht);
    margin-left: 15px;
}

.header-top-bar a:hover {
    color: var(--ww-blauw-primair);
}

/* --- 3.2. Main Bar --- */
.header-main {
    background: #fff;
    padding: 20px 0;
}

.header-main .container {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
    align-items: center;
    gap: 20px;
}

.header-main .site-branding h1 {
    margin: 0;
    font-size: 24px;
}

.header-main .site-branding a {
    color: var(--ww-blauw-primair);
    font-weight: 800;
}

/* Styling voor je searchform.php */
.header-main .woocommerce-product-search {
    display: flex;
    width: 100%;
}

.header-main .search-field {
    width: 100%;
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--ww-blauw-primair);
    border-right: none;
    border-radius: 5px 0 0 5px;
    font-size: 1rem;
}

.header-main .woocommerce-product-search button {
    padding: 12px 20px;
    background: var(--ww-blauw-primair);
    color: white;
    border: 2px solid var(--ww-blauw-primair);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
}

.header-actions {
    text-align: right;
}

.header-actions .cart-icon {
    font-weight: bold;
    color: var(--ww-tekst-donker);
    font-size: 1.1rem;
    position: relative;
    padding-right: 10px;
}

.cart-count {
    background: var(--ww-oranje-actie);
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: -5px;
}

/* --- 3.2. Main Bar (LOGO STYLING TOEVOEGEN) --- */
.header-main .site-branding {
    line-height: 0; /* Zorgt dat de <img> netjes past */
}

.header-main .site-logo {
    max-height: 50px; /* PAS DEZE WAARDE AAN (bijv. 40px, 60px) */
    width: auto;
    vertical-align: middle;
}

/* --- 3.3. Nav Bar (Menu) --- */
.header-nav-bar {
    background: #fff;
    border-bottom: 1px solid var(--ww-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    min-height: 50px; /* Zorgt dat balk zichtbaar is */
    line-height: 50px; /* Centreert tekst verticaal */
}

.header-nav-bar .primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-bar .primary-menu li {
    position: relative;
}

.header-nav-bar .primary-menu a {
    display: block;
    padding: 0 20px;
    color: var(--ww-tekst-donker);
    font-weight: 600;
}

.header-nav-bar .primary-menu a:hover {
    background: var(--ww-achtergrond);
    color: var(--ww-blauw-primair);
}

/* De placeholder als menu leeg is */
.header-nav-bar .nav-placeholder {
    color: #aaa;
    font-style: italic;
    padding: 0 15px;
}

/* ==== 4. HOMEPAGE STYLING (FRONT-PAGE.PHP) ==== */
/* We halen de padding weg die in #content zit */
.homepage-content {
    padding-top: 0 !important;
}

/* 4.1. Hero Sectie */
.hp-hero {
    background: var(--ww-blauw-primair);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.hp-hero h1 {
    font-size: 3rem;
    margin: 0 0 10px 0;
    font-weight: 800;
}

.hp-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* 4.2. USP Bar (Vertrouwen) */
.hp-usp-bar {
    display: flex;
    flex-wrap: wrap; /* Zorgt dat het netjes breekt op mobiel */
    justify-content: space-around;
    background: var(--ww-achtergrond);
    padding: 20px;
    border-bottom: 1px solid var(--ww-border);
}

.hp-usp-item {
    font-weight: bold;
    color: var(--ww-tekst-donker);
    padding: 5px 10px;
}

/* 4.3. Algemene Sectie Styling */
.hp-section {
    padding: 60px 0;
}

.hp-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--ww-tekst-donker);
}

/* 4.4. Categorie Blokken (STRAKKERE VERSIE) */
.hp-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hp-cat-item {
    background: var(--ww-achtergrond); /* Zelfde lichte grijs als USP-bar */
    border: 1px solid var(--ww-achtergrond); /* Rand in dezelfde kleur (onzichtbaar) */
    border-radius: 12px; /* Iets rondere hoeken */
    padding: 25px 20px;
    text-align: center;
    color: var(--ww-tekst-donker);
    font-weight: 700; /* Iets dikkere letters */
    font-size: 1.1rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hp-cat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Iets meer schaduw */
    border-color: #fff; /* Rand wordt wit op hover */
    background: #fff; /* Achtergrond wordt wit op hover */
}

.hp-cat-item span {
    display: block;
    font-size: 2.8rem; /* Iets kleinere emoji */
    margin-bottom: 15px;
}

/* 4.5. Product Grid (Top 5) */
.hp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.hp-product-item {
    background: white;
    border: 1px solid var(--ww-border);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
}

.hp-product-item img {
    max-width: 100%;
    height: 200px;
    object-fit: contain;
}

.hp-product-item h3 {
    font-size: 1.1rem;
    margin: 10px;
    color: var(--ww-tekst-donker);
}

.hp-product-item .price {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--ww-oranje-actie);
    margin: 10px;
}

.hp-product-item a {
    text-decoration: none;
}

.hp-product-item a.button {
    background: var(--ww-oranje-actie);
    color: white !important;
    padding: 10px 20px;
    margin: 15px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
}

.hp-product-item a.button:hover {
    background: #e06000; /* Iets donkerder oranje */
}

/* ==== 5. FOOTER STYLING ==== */
.site-footer {
    background: #333;
    color: #aaa;
    padding: 40px 0;
}

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.footer-widget h4 {
    color: #fff;
    margin-top: 0;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget li {
    margin-bottom: 8px;
}

.footer-widget a {
    color: #eee;
}

.footer-widget a:hover {
    color: var(--ww-oranje-actie);
}

.site-info {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #555;
    padding-top: 20px;
    font-size: 14px;
}

/* ==== 6. HERO SLIDER (FINAL GEPOLIJSTE CSS) ==== */
.hero-art {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 400px;
    overflow: hidden;
}

.hero-art img {
    width: auto;
    height: 100%;
    max-height: 400px; /* afbeelding blijft binnen hero */
    object-fit: contain; /* toont hele afbeelding, geen crop */
    border-radius: 16px;
    transition: transform 0.4s ease;
}

.hero-art img:hover {
    transform: scale(1.03);
}

@media (max-width: 992px) {
    .hero-art img {
        max-height: 320px;
    }
}

@media (max-width: 768px) {
    .hero-art {
        max-height: 260px;
    }

    .hero-art img {
        max-height: 260px;
    }
}

#ww-hero-slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 40px auto 0;
    padding: 60px 40px;
    position: relative;
    border-radius: 20px;
    overflow: hidden; /* verbergt animatie buiten blok */
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.05);
    background: linear-gradient(
        90deg,
        #f9fbff 0%, /* zacht witblauw links */
        #ffffff 45%, /* wit in het midden */
        #f2f7ff 100% /* lichte gloed rechts */
    );
    transition: all 0.3s ease;
    height: auto !important;
}

/* Tekstzijde */
#ww-hero-slider .ww-left {
    flex: 1;
    padding-right: 20px;
    position: relative;
    z-index: 2;
}

/* Afbeeldingszijde */
#ww-hero-slider .hero-art {
    flex: 1.1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

#ww-hero-slider .hero-art img {
    width: 100%;
    max-width: 650px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.08));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease;
}

#ww-hero-slider .hero-art img:hover {
    transform: scale(1.02);
}

/* --- Swiper Slide Fix (beeld blijft binnen container) --- */
#ww-hero-slider .ww-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    will-change: transform, opacity;
}

#ww-hero-slider .swiper-wrapper {
    overflow: visible;
}

#ww-hero-slider .swiper-slide {
    overflow: hidden;
    border-radius: 20px;
}

/* ✨ Desktop extra breedte */
@media (min-width: 1500px) {
    #ww-hero-slider {
        max-width: 1600px;
    }

    #ww-hero-slider .hero-art img {
        max-width: 700px;
    }
}

/* 📱 Responsive balans */
@media (max-width: 992px) {
    #ww-hero-slider {
        flex-direction: column;
        text-align: center;
        background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
        box-shadow: none;
    }

    #ww-hero-slider .hero-art {
        justify-content: center;
    }

    #ww-hero-slider .hero-art img {
        max-width: 90%;
    }
}

/* --- Correcte overflow fix voor hero slider --- */
/* 1️⃣ hero container zelf mag layout behouden */
#ww-hero-slider {
    overflow: visible; /* niet hier verbergen, anders snijdt gradient af */
}

/* 2️⃣ intern slides-wrapper verbergt het verspringen */
#ww-hero-slider .ww-slider-inner {
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    position: relative;
}

/* 3️⃣ de individuele slides bewegen binnen hun eigen mask */
#ww-hero-slider .ww-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    will-change: transform, opacity;
    overflow: hidden;
    border-radius: 20px;
}

/* 4️⃣ swiper structuur fix (als je swiper gebruikt) */
#ww-hero-slider .swiper {
    overflow: hidden !important;
    border-radius: 20px;
}

#ww-hero-slider .swiper-wrapper {
    overflow: visible !important;
}

#ww-hero-slider {
    margin: 0px auto 0;
    position: relative;
    background: var(--bg-page);
    overflow: hidden;
    transition: height 0.6s ease;
}

.ww-slide {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: clamp(32px, 5vw, 56px);
    background: var(--bg-card);
    box-shadow: 0 10px 40px -10px rgba(29, 43, 56, 0.08);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform: translateY(20px);
    transition:
        opacity 0.9s ease-in-out,
        transform 0.9s ease-in-out,
        box-shadow 0.5s ease-in-out;
}

#ww-hero-slider .ww-slide.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 2;
    pointer-events: auto;
    box-shadow: 0 16px 48px -12px rgba(29, 43, 56, 0.15);
}

.ww-slide .ww-left {
    flex: 2 1 500px;
}

.ww-slide .hero-art {
    flex: 1 1 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== ANIMATIES ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

.ww-slide .anim-child {
    opacity: 0;
    transform: translateY(15px);
}

.ww-slide.active .anim-child {
    animation: fadeInUp 0.9s var(--anim-easing) forwards;
}

.ww-slide.active .anim-child-1 { animation-delay: 0.1s; }
.ww-slide.active .anim-child-2 { animation-delay: 0.25s; }
.ww-slide.active .anim-child-3 { animation-delay: 0.4s; }
.ww-slide.active .anim-child-4 { animation-delay: 0.55s; }
.ww-slide.active .anim-child-5 { animation-delay: 0.7s; }

.ww-slide.active .hero-art {
    animation: fadeInUp 1.1s var(--anim-easing) 0.4s forwards;
    opacity: 0;
    transform: scale(0.98);
}

/* ===== TYPOGRAFIE ===== */
.hero-kicker {
    font-size: .9rem;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ww-slide h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 0;
}

.ww-slide h1 .highlight {
    color: var(--brand-orange);
}

.ww-slide .hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-light);
    line-height: 1.6;
    margin: 18px 0 32px;
    max-width: 550px;
}

/* ===== KNOPPEN ===== */
.ww-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    font-weight: 700;
    border-radius: var(--radius-btn);
    padding: 0 32px;
    height: 52px;
    text-decoration: none;
    font-size: 1rem;
    border: none;
    transition: all 0.25s ease;
    will-change: transform, box-shadow;
}

.btn-primary {
    background: #0ea0e7;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,102,0,0.2);
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(255,102,0,0.3);
    background: #fd6727 !important;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--brand-blue);
    border: 2px solid var(--line-color);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue);
}

/* ===== USP's ===== */
.ww-usps {
    margin: 32px 0 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.ww-usps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: var(--text-dark);
    background: var(--bg-page);
    border-radius: var(--radius-btn);
    padding: 8px 16px;
    font-weight: 600;
    border: 1px solid #cfedfb;
    transition: background 0.3s ease, transform 0.3s ease;
}

.ww-usps li:hover {
    background: #e8f6ff;
    transform: translateY(-2px);
}

.ww-usps li svg {
    width: 20px;
    height: 20px;
    color: var(--brand-blue);
}

/* ===== DOTS ===== */
.ww-slider-nav {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
}

.ww-slider-nav .nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--line-color);
    cursor: pointer;
    transition: all .3s ease;
}

.ww-slider-nav .nav-dot:hover {
    transform: scale(1.25);
    background: var(--brand-blue);
}

.ww-slider-nav .nav-dot.active {
    background: var(--brand-orange);
    transform: scale(1.4);
}

/* ===== THEMES ===== */
.is-reviewstarter .btn-primary {
    background: var(--brand-blue);
    box-shadow: 0 4px 15px rgba(0, 158, 227, 0.2);
}

.is-reviewstarter .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(0, 158, 227, 0.3);
}

/* Fixes */
#ww-hero-slider .ww-slide:not(.active) {
    position: absolute;
}

#ww-hero-slider .ww-slide.active {
    position: relative;
}

/* ==== 7. BASIS PAGINA STYLING (PAGE.PHP) ==== */
.page-content .page-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--ww-tekst-donker);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--ww-border);
    padding-bottom: 15px;
}

.page-content .entry-content {
    /* Deze styling geldt voor de tekst die je in de editor typt */
    line-height: 1.7;
    font-size: 1.1rem;
    color: var(--ww-tekst-licht);
}

.page-content .entry-content p {
    margin-bottom: 20px;
}

.page-content .entry-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ww-tekst-donker);
    margin-top: 40px;
    margin-bottom: 15px;
}

.page-content .entry-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ww-tekst-donker);
    margin-top: 30px;
    margin-bottom: 10px;
}

.page-content .entry-content ul,
.page-content .entry-content ol {
    margin-bottom: 20px;
    padding-left: 25px;
}

.page-content .entry-content a {
    /* Linkjes in je tekst krijgen de oranje kleur */
    color: var(--ww-oranje-actie);
    text-decoration: underline;
}

.page-content .entry-content a:hover {
    color: var(--ww-blauw-primair);
}

/* ==== 9. NAVIGATIE DROPDOWNS (MENU FIX) ==== */
/* Zorgt dat de parent 'li' de anchor wordt */
.header-nav-bar .primary-menu li {
    position: relative;
}

/* 1. Verberg de dropdown (het .sub-menu) standaard */
.header-nav-bar .sub-menu {
    display: none;
    position: absolute;
    top: 100%; /* Plak 'm direct onder de parent */
    left: 0;
    background: #fff;
    min-width: 240px; /* Geef 'm een nette breedte */
    z-index: 1000;
    /* De 2025 "strakke" look */
    border: 1px solid var(--ww-border);
    border-top: 3px solid var(--ww-blauw-primair); /* Blauw accentje */
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    border-radius: 0 0 8px 8px;
    /* Reset de WP rommel */
    padding: 0;
    margin: 0;
}

/* 2. Toon de dropdown als je over de parent 'li' hovert */
.header-nav-bar .primary-menu li:hover > .sub-menu {
    display: block;
}

/* 3. Styling van de items IN de dropdown */
.header-nav-bar .sub-menu li {
    width: 100%;
    border-bottom: 1px solid var(--ww-border);
}

.header-nav-bar .sub-menu li:last-child {
    border-bottom: none; /* Geen lijntje bij de laatste */
}

.header-nav-bar .sub-menu a {
    /* We moeten de padding/line-height van de hoofd-nav resetten */
    padding: 12px 20px;
    line-height: 1.4;
    width: 100%;
    display: block;
    box-sizing: border-box; /* Zorgt dat padding netjes werkt */
}

/* 4. Voeg een pijltje toe aan items die een dropdown HEBBEN */
.header-nav-bar .menu-item-has-children > a {
    position: relative;
    padding-right: 35px; /* Maak ruimte voor het pijltje */
}

.header-nav-bar .menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ww-tekst-licht);
    transition: transform 0.2s ease;
}

/* 5. Draai het pijltje als je hovert */
.header-nav-bar .menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--ww-blauw-primair);
}

/* ==== 10. PRODUCT HERO STYLING ==== */
#ww-product-hero {
    background: #fff;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}

.ww-product-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
}

.ww-product-media img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ww-product-info {
    flex: 1;
}

.ww-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.ww-price {
    font-size: 26px;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.ww-specs {
    list-style: none;
    padding: 0;
    color: #555;
    font-size: 15px;
    margin-bottom: 15px;
}

.ww-usp-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    font-size: 15px;
}

.ww-usp-list li {
    margin: 4px 0;
    color: #333;
}

.ww-banner {
    background: linear-gradient(90deg, var(--blue), #3aa9da);
    color: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    margin: 25px 0;
    font-size: 15px;
    box-shadow: var(--shadow);
}

/* === KNOP === */
.single_add_to_cart_button {
    background: var(--blue) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    border-radius: 8px;
    padding: 14px 28px;
    display: inline-block;
    transition: .2s ease;
    width: 100%;
    text-align: center;
}

.single_add_to_cart_button:hover {
    background: #3aa9da !important;
}

/* === SHARE BUTTONS === */
.ww-share {
    margin-top: 25px;
}

.ww-share h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.btn-share {
    display: inline-block;
    margin: 4px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.btn-share.whatsapp {
    background: #25D366;
}

.btn-share.facebook {
    background: #1877F2;
}

.btn-share.email {
    background: #666;
}

.woocommerce .quantity .qty {
    display: none;
}

/* === PRODUCT TABS FIX === */
.ww-tabs {
    max-width: 1200px;
    margin: 40px auto 80px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 30px 40px;
}

/* Verwijder standaard WooCommerce lijnen/padding */
.woocommerce-tabs {
    border: none;
    margin: 0;
    padding: 0;
}

/* Tab navigatie */
.woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
    list-style: none;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.woocommerce-tabs ul.tabs li.active a {
    background: #0099ff;
    color: #fff;
}

/* Tab inhoud */
.woocommerce-Tabs-panel {
    padding-top: 10px;
    line-height: 1.6;
    color: #333;
}

/* Responsief */
@media (max-width: 768px) {
    .ww-tabs {
        padding: 20px;
        margin: 20px auto 60px;
    }

    .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* === EXTRA SERVICE KEUZEBLOKKEN === */
.ww-extra-services {
    background: #f7fafd;
    border: 1px solid #dbe7f3;
    border-radius: 10px;
    padding: 20px 25px;
    margin-top: 25px;
}

.ww-extra-services h4 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
    color: #222;
}

/* Label als klikbare kaart */
.service-option {
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
}

.service-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Kaart zelf */
.service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #e4eaf0;
    border-radius: 8px;
    padding: 12px 16px;
    background: #fff;
    transition: all 0.2s ease;
}

.service-option:hover .service-card {
    border-color: #0099ff;
}

.service-option input[type="radio"]:checked + .service-card {
    border-color: #0099ff;
    background: #e9f5ff;
    box-shadow: 0 0 0 2px #0099ff33;
}

.service-title {
    font-weight: 500;
    color: #222;
}

.service-price {
    font-weight: 600;
    color: #009900;
}

.service-price.plus {
    color: #d95f00;
}

/* ==== 11. SLIDER PRODUCTEN PAGINA ==== */
/* === WW 2025 PRODUCT SLIDER === */
.ww-product-slider {
    max-width: 640px;
    margin: 0 auto 40px;
}

.ww-product-slider img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* Hoofdslider */
.ww-main-slider {
    border-radius: 16px;
    overflow: hidden;
}

.swiper-button-prev, .swiper-button-next {
    color: #0073e6;
}

/* Thumbnails */
.ww-thumb-slider {
    margin-top: 10px;
}

.ww-thumb-slider .swiper-slide {
    opacity: 0.6;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.ww-thumb-slider .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #0073e6;
}

/* Lightbox */
.ww-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ww-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}

.ww-lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* === FIX VOOR SLIDER + PRODUCT INFO ALIGN === */
/* Container met slider + rechter info */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Linkerzijde: de Swiper-fotogalerij */
.woocommerce div.product .ww-product-slider {
    flex: 0 0 48%; /* ongeveer de helft van de breedte */
    max-width: 48%;
    margin-right: 4%;
}

/* Rechterzijde: productgegevens */
.woocommerce div.product .summary {
    flex: 0 0 48%;
    max-width: 48%;
}

/* Voor kleinere schermen netjes onder elkaar */
@media (max-width: 768px) {
    .woocommerce div.product {
        display: block;
    }

    .woocommerce div.product .ww-product-slider,
    .woocommerce div.product .summary {
        max-width: 100%;
        margin: 0;
    }
}

/* ==== 12. S-KLASSE FEATURES STYLING (VEILIG & STRAK) ==== */
/* --- FEATURE 1: Het "Wesley's Keurmerk" blok --- */
.ww-keurmerk-box {
    background: white;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    margin-top: 30px;
}

.keurmerk-header {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--ww-achtergrond);
    padding: 20px;
    border-bottom: 1px solid var(--ww-border);
}

.keurmerk-logo {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    background: var(--ww-blauw-primair);
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.keurmerk-title {
    font-size: 1.3rem;
    line-height: 1.3;
}

.keurmerk-title strong {
    color: var(--ww-tekst-donker);
}

.keurmerk-title span {
    font-size: 0.9rem;
    color: var(--ww-tekst-licht);
}

.keurmerk-stappen {
    list-style: none;
    padding: 20px;
    margin: 0;
    display: grid;
    gap: 15px;
}

.keurmerk-stappen li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.keurmerk-stappen .stap-icon {
    background: var(--ww-blauw-primair);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}

/* --- FEATURE 2: De "USP Lijst" (rechts) --- */
.ww-product-usp-list {
    background: white; /* Maak 'm strakker */
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.ww-product-usp-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: grid;
    gap: 8px; /* Iets strakker */
}

.ww-product-usp-list li {
    font-size: 0.95rem; /* Iets groter */
    color: var(--ww-tekst-donker);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.ww-product-usp-list li .usp-icon {
    margin-right: 10px;
    font-size: 1.1rem;
    color: #28a745; /* Groen vinkje */
}

.ww-product-usp-list li .usp-icon:contains("⭐") {
    color: #ffc107; /* Gele ster */
}

.ww-product-usp-list .usp-beschikbaarheid {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a9956;
    border-top: 1px dashed var(--ww-border);
    padding-top: 15px;
}

.ww-product-usp-list .usp-beschikbaarheid strong {
    color: #117a41;
}

/* --- FEATURE 3: De "Actie Banner" (S-KLASSE GROEN) --- */
.ww-actie-banner {
    background: #e9f7ef; /* Lichtgroen */
    border: 1px solid #a6d9b8;
    border-left: 5px solid #28a745; /* Groene lijn */
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ww-actie-banner .icon {
    font-size: 1.5rem;
}

.ww-actie-banner strong {
    color: #117a41;
}

/* --- FEATURE 4: De "Extra Services" (S-KLASSE BLAUW) --- */
.ww-extra-services {
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    margin-top: 20px;
    background: white;
}

.ww-extra-services h4 {
    font-size: 1.2rem;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid var(--ww-border);
    background: var(--ww-achtergrond);
    border-radius: 12px 12px 0 0;
}

.service-optie {
    display: block; /* Veranderd van flex */
    padding: 0;
    border-bottom: 1px solid var(--ww-border);
}

.service-optie:last-child {
    border-bottom: none;
}

.service-optie input[type="radio"] {
    display: none; /* Verberg de lelijke radio knop */
}

.service-optie label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    cursor: pointer;
    padding: 15px 20px;
    border: 2px solid transparent; /* Voor de 'actieve' state */
    transition: all 0.2s ease;
}

.service-optie label .service-prijs {
    font-weight: 500;
    color: var(--ww-tekst-licht);
}

/* Dit is de VEILIGE selector (FIXT DE TYFUSROMMEL) */
.service-optie label .service-prijs-plus {
    color: var(--ww-tekst-donker);
    font-weight: 700;
}

/* De S-Klasse "selected" look */
.service-optie input[type="radio"]:checked + label {
    background: #e6f7ff;
    border-color: var(--ww-blauw-primair);
}

/* --- FEATURE 5: De "Deel Dit Product" knoppen --- */
.ww-share-buttons {
    clear: both;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 2px dashed var(--ww-border);
    text-align: center;
}

.ww-share-buttons h4 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
}

.btn-share {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: white !important;
    font-weight: 600;
    text-decoration: none;
    margin: 5px;
    transition: transform 0.2s ease;
}

.btn-share:hover {
    transform: scale(1.05);
}

.share-whatsapp {
    background: #25D366;
}

.share-facebook {
    background: #1877F2;
}

.share-email {
    background: #777;
}

/* De KNOP zelf (S-KLASSE GROEN) */
.single-product .single_add_to_cart_button {
    background: #28a745 !important; /* Dwing het groen */
    color: white !important;
    padding: 15px 35px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 5px;
    margin-left: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%; /* Volle breedte */
    margin-left: 0;
    margin-top: 10px;
}

.single-product .single_add_to_cart_button:hover {
    background: #218838 !important; /* Donkerder groen */
    transform: scale(1.02);
}

.summary .price {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.ww-product-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

.ww-left {
    flex: 1 1 48%;
    max-width: 48%;
}

.ww-right {
    flex: 1 1 48%;
    max-width: 48%;
}

@media (max-width: 768px) {
    .ww-product-wrapper {
        flex-direction: column;
    }

    .ww-left, .ww-right {
        max-width: 100%;
    }
}

/* ==== 13. PRODUCTSPECIFICATIES STIJL (zoals WesleysWitgoed.nl) ==== */
.woocommerce-Tabs-panel--additional_information {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 25px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.woocommerce-Tabs-panel--additional_information h2.specs-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #0d6efd;
    display: inline-block;
    padding-bottom: 5px;
}

/* Tabelstijl */
table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: #222;
}

table.shop_attributes th,
table.shop_attributes td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

table.shop_attributes th {
    width: 35%;
    color: #444;
    font-weight: 600;
    background: #f9f9f9;
}

table.shop_attributes td {
    background: #fff;
}

table.shop_attributes tr:nth-child(even) td {
    background: #f7f7f7;
}

/* ✅ en ❌ mooi centreren */
table.shop_attributes td img.emoji {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Onderste badgebalk */
.ww-specs-badges {
    margin-top: 20px;
    padding: 10px 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
}

.ww-specs-badges span {
    background: #f3f3f3;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.ww-specs-badges span.green {
    background: #e5f7e0;
    color: #2a7a00;
}

.ww-specs-badges span.blue {
    background: #e0f1ff;
    color: #0d6efd;
}

.ww-specs-badges span.orange {
    background: #fff3e0;
    color: #d98200;
}

/* ---------- EXTRA SERVICES ------- */
/* 🛒 Winkelwagen bounce */
.cart-icon.bounce {
    animation: bounceCart 0.4s ease;
}

@keyframes bounceCart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* ✅ Toast rechts onder */
.cart-toast-container {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
}

.cart-toast {
    background: #1d9e45;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.cart-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.cart-toast-container {
    pointer-events: none; /* zodat je er niet per ongeluk op klikt */
}

.cart-toast {
    pointer-events: auto;
}

.ww-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    padding: 20px;
}

.ww-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
}

.ww-lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* ==== 14. MOBILE LAYOUT & SLIDE MENU FIX (2025) ==== */
/* 1. VERBERG HAMBURGER KNOP op DESKTOP */
.menu-toggle {
    display: none;
}

/* 2. VERBERG DE HORIZONTALE NAVIGATIE op MOBIEL */
@media (max-width: 900px) {
    /* --- LAYOUT FIX: Main Bar (Laag 2) --- */
    .header-main .container {
        /* Dwingt 2 rijen: Boven: Logo/Hamburger | Onder: Zoekbalk/Winkelwagen */
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .header-main .site-branding {
        display: flex;
        justify-content: space-between; /* Logo en Hamburger uit elkaar */
        align-items: center;
        width: 100%;
        line-height: normal;
    }

    .header-main .site-search {
        /* Zoekbalk naar onderen */
        grid-row: 3;
        grid-column: 1 / -1;
    }

    .header-actions {
        /* Winkelwagen naar 2e rij, links */
        grid-row: 2;
        grid-column: 1 / -1;
        text-align: left;
    }

    /* --- HAMBURGER KNOP TONEN --- */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 10001;
    }

    .hamburger, .hamburger::before, .hamburger::after {
        content: '';
        display: block;
        width: 25px;
        height: 3px;
        background: var(--ww-tekst-donker);
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .hamburger::before {
        transform: translateY(-8px);
    }

    .hamburger::after {
        transform: translateY(5px);
    }

    /* --- HET MOBILE SLIDE MENU (LAAG 3) --- */
    .header-nav-bar {
        /* De navigatie wordt het slide-out menu */
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        transform: translateX(-100%); /* Standaard buiten beeld */
        transition: transform 0.4s ease-out;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        line-height: normal;
    }

    /* Wanneer de body de class 'menu-open' krijgt, slide het in */
    .menu-open .header-nav-bar {
        transform: translateX(0);
    }

    /* Menu Items (Mobile/Mega Menu Stijl) */
    .header-nav-bar .primary-menu {
        flex-direction: column;
        width: 100%;
        padding-bottom: 20px;
    }

    .header-nav-bar .primary-menu li {
        border-bottom: 1px solid var(--ww-border);
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .header-nav-bar .primary-menu a {
        padding: 15px 20px;
        width: 100%;
        font-weight: 600;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* MOBILE DROPDOWN STIJL (om de zwevende rommel te fixen) */
    .header-nav-bar .sub-menu {
        display: none;
        position: static;
        background: var(--ww-achtergrond);
        padding: 0;
        min-width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: 20px;
    }

    .header-nav-bar li.submenu-open > .sub-menu {
        display: block;
    }
}

/* ==== 15. SHOP LAYOUT & PRODUCT GRID ==== */
/* Shop wrapper volledig breed */
.woocommerce-layout-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Content vult beschikbare ruimte */
.woocommerce-content-area {
    flex: 1;
    min-width: 0;
}

/* Sidebar rechts */
.woocommerce-sidebar-area {
    width: 280px;
    flex-shrink: 0;
    background: #f9fbff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Productgrid nu op volle breedte */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    width: 100%;
    margin: 30px 0;
    padding: 0;
    list-style: none;
    justify-content: flex-start !important;
    justify-items: start !important;
    align-items: stretch;
}

/* 👉 override de WooCommerce standaardbreedtes */
.woocommerce ul.products li.product {
    width: auto !important; /* override 22.05% */
    margin: 0 !important; /* override 0 0 2.992em */
    float: none !important; /* voor het geval hij nog float */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 22px rgba(0,0,0,.07);
}

/* beeld */
.woocommerce ul.products li.product img {
    margin: 0 auto 10px;
    max-height: 180px;
    object-fit: contain;
}

/* titel */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    line-height: 1.3;
    min-height: 2.6em;
}

/* knop */
.woocommerce ul.products li.product a.button {
    background: #0087ff;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
}

.woocommerce ul.products li.product a.button:hover {
    background: #006dd0;
}

/* Responsive */
@media (max-width: 1024px) {
    .woocommerce-layout-wrapper {
        flex-direction: column;
    }

    .woocommerce-sidebar-area {
        width: 100%;
        margin-top: 30px;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* als het theme display:flex op de UL zet op sommige resoluties */
.woocommerce ul.products.products {
    display: grid !important;
}





















/* Additional styles to match wesleyswitgoed.nl based on typical design patterns */

.woocommerce-layout-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 20px;
}

.woocommerce-content-area {
  flex: 1;
  min-width: 0;
}

.woocommerce-sidebar-area {
  width: 280px;
  flex-shrink: 0;
  background: #f9fbff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 25px;
  width: 100%;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.woocommerce ul.products li.product img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.03);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1b2733;
  margin: 10px 0 5px;
  line-height: 1.4;
}

.woocommerce ul.products li.product .price {
  color: #ff6600;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 15px;
}

.woocommerce ul.products li.product a.button {
  background: #0078ff;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product a.button:hover {
  background: #005fd6;
  transform: translateY(-2px);
}

h1.page-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ww-tekst-donker);
  margin-bottom: 25px;
  border-bottom: 2px solid var(--ww-border);
  padding-bottom: 15px;
}

p.woocommerce-result-count {
  float: left;
  margin: 0 0 1em;
  color: var(--ww-tekst-licht);
}

form.woocommerce-ordering {
  float: right;
  margin: 0 0 1em;
}

.widget {
  margin-bottom: 30px;
}

.widget h4.widget-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ww-tekst-donker);
  margin-bottom: 15px;
  border-bottom: 1px solid var(--ww-border);
  padding-bottom: 10px;
}

@media (max-width: 1024px) {
  .woocommerce-layout-wrapper {
    flex-direction: column;
  }
  .woocommerce-sidebar-area {
    width: 100%;
    margin-top: 30px;
  }
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
  .woocommerce ul.products li.product {
    padding: 15px;
  }
  p.woocommerce-result-count, form.woocommerce-ordering {
    float: none;
    text-align: center;
    margin: 10px 0;
  }
}