/* --- Root Variables & Global Styling --- */
:root {
    --blue1: #7C83FB;
    --blue2: #7CB6FB;
    --blue3: #7C9CFB;
    --blue4: #8E7CFB;
    --blue5: #A87CFB;
    --blue6: #472f75;
    --blue7: #afd6fe;
    --blue8: #264473; /* Dark Blue for Text */
    --blue9: #e1e8f4;
    --silver: #C0C0C0;
    --text: #333;
    --hover: #ffffff;
    --dark-bg: #1c1c24; 
    --light-text: #f0f0f5; 
    --accent-color: #6a0dad; 
    --accent-hover: #8d4ee4; 
    --card-bg: #ffffff; /* White card background for contrast on lila */
    --lila: #c5d5ff; /* Webshop Background Color */
    --green: #215356;
    --font: 'Poppins', sans-serif;
}


/* Basisstijl */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--lila);
  color: var(--blue8);
}

/* ------------------------------------------------ */
/* 2. NAVIGATIE BALK STYLING */
/* ------------------------------------------------ */

.navbar {
    display: flex;
    /* Verdeel de ruimte tussen Links, Logo en Rechts */
    justify-content: space-between; 
    align-items: center;
    background-color: var(--blue9);
    padding: 0.5rem 2rem; /* Grotere padding aan de zijkanten */
    top: 0;
    z-index: 2000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Navigatie Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem; 
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--blue8);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: block; /* Zorgt voor het volledige klikgebied */
}

.nav-links a:hover {
    background-color: var(--hover);
    color: var(--blue6);
    border: 2px solid var(--blue6);
}

/* Logo en Zoekbalk */
.logo-wrapper {
    flex-shrink: 0; /* Voorkom dat het logo krimpt */
}

.logo-img {
    max-height: 120px;
    height: auto;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    margin: 0; /* Verwijder de onnodige marge */
}

.logo-img:hover {
    transform: scale(1.0) translateY(-5px);
}

/* Rechterkant - Groepering Zoek, Home, Cart */
.right-side-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem; 
}

/* Zoekbalk Wrapper */
.search-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--blue7);
    border-radius: 25px;
    padding: 5px 10px;
    background-color: var(--hover);
    width: fit-content;
    box-shadow: 0 0 8px rgba(var(--blue4), 0.3);
}

.search-bar {
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px;
    width: 200px;
    background-color: transparent;
}

.search-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--blue8);
    transition: color 0.3s;
}

.search-button:hover .search-icon {
    color: var(--blue4); 
}

/* Home en Cart Iconen */
.home-icon img,
.cart-icon img {
    height: 45px;
    display: block;
    transition: transform 0.3s ease;
}

.home-icon img:hover,
.cart-icon img:hover {
    transform: scale(1.1);
}

/* --- NIEUWE STIJLEN VOOR WISHLIST ICOON IN NAVIGATIEBALK --- */

/* 1. STIJL VOOR DE WISHLIST ICON CONTAINER */
.wishlist-icon {
    position: relative;
    cursor: pointer;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px;
}

.wishlist-icon a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. STIJL VOOR HET HARTJE ZELF (WIT) */
.wishlist-icon .fa-heart {
    color: white; /* MAAK HET HARTJE WIT */
    font-size: 2.0em; /* Zorg voor gelijke grootte als andere iconen */
    transition: color 0.2s;
}

.wishlist-icon .fa-heart:hover {
    color: rgb(199, 85, 85); 
}

/* 3. STIJL VOOR DE TELLER (MODERN/WITTE RAND) */
/* Dit is de algemene .cart-count stijl die nu ook op de wishlist van toepassing is */
.cart-count {
    position: absolute;
    top: -5px; 
    right: -5px; 
    
    background-color: var(--blue1); /* Paarse achtergrond bubbel */
    color: white;
    border: 0.5px solid white; /* VOEG WITTE RAND TOE */
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75em; 
    font-weight: 700;
    min-width: 15px;
    text-align: center;
    line-height: 1.2; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
}

/* Stijl voor de WINKELMAND ICON CONTAINER */
.cart-icon {
    position: relative; /* <-- DEZE REGEL IS DE OPLOSSING! */
    cursor: pointer;
    /* Andere stijlen die je al hebt... */
}

/* Submenu's */
.submenu-container {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    background-color: var(--blue9);
    border: 1px solid var(--blue7);
    padding: 1rem 0; /* Verticale padding, horizontale padding door li */
    list-style: none;
    margin: 0;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    border-radius: 5px;
}

.submenu li {
    margin: 0;
    text-align: left;
}

.submenu a {
    text-decoration: none;
    color: var(--blue8);
    font-weight: normal;
    padding: 0.5rem 1.5rem; /* Zorgt voor het klikgebied binnen de lijst */
}

.nav-item:hover .submenu {
    display: block;
}

/* Sub-Submenu Styling (Webshop) */
/* Vereist dat de <li> van de hoofditems in het submenu ook position: relative; krijgt */
.submenu li {
    position: relative; 
}

.sub-submenu {
    display: none;
    position: absolute;
    left: 100%; /* Plaats het rechts naast het hoofditem */
    top: 0;
    background-color: var(--blue7); /* Andere achtergrondkleur voor onderscheid */
    border: 1px solid var(--blue6);
    padding: 0.5rem 0;
    list-style: none;
    min-width: 150px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.submenu li:hover .sub-submenu {
    display: block;
}

.sub-submenu a {
    color: var(--blue8);
}

.sub-submenu a:hover {
    background-color: var(--lila);
}


header, footer {
  background-color: var(--blue9);
  color: white;
  text-align: center;
  padding: 0.5rem 1rem;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background-color: var(--lila); /* Lila Background */
    color: var(--blue8); /* Dark Blue Text */
    line-height: 1.6;
}

/* --- Shop Layout --- */
.shop-container {
    display: flex;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    /* Extra padding-top to ensure content is below your fixed/sticky Navbar (if applicable) */
    padding-top: 20px; 
}

/* --- Filter Sidebar --- */
.sidebar {
    width: 280px;
    padding: 20px;
    margin-right: 20px;
    background-color: var(--card-bg); /* White background for filters */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.sidebar h2 {
    color: var(--accent-color);
    margin-bottom: 25px;
}

.filter-group {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--blue9);
}

.filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1em;
    color: var(--blue8);
    margin-bottom: 10px;
    transition: color 0.2s;
}
.filter-toggle:hover {
    color: var(--accent-color);
}
.filter-toggle i {
    transition: transform 0.3s ease;
}
/* Rotate icon when filter is open */
.filter-group.open .filter-toggle i {
    transform: rotate(180deg);
}

.filter-options {
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
/* Show options when filter is open */
.filter-group.open .filter-options {
    max-height: 500px; /* Large enough value to show content */
    padding-top: 5px;
}

.filter-options label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95em;
}

/* Icon Checkboxes (Gender) */
.icon-checkbox {
    display: inline-block;
    position: relative;
    padding: 10px;
    border: 2px solid var(--blue9);
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    text-align: center;
}
.icon-checkbox input[type="radio"] {
    display: none; /* Hide default radio button */
}
.icon-checkbox i {
    font-size: 1.5em;
    color: var(--blue8);
    transition: color 0.2s;
}
.icon-checkbox:hover {
    border-color: var(--accent-hover);
}
/* Style when checked */
.icon-checkbox input:checked + i {
    color: var(--light-text);
}
.icon-checkbox input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
/* Sub-Sub-Menu Styles */
/* Nieuwe, gecorrigeerde CSS-regel in webshop.css: */
/* --- Deel van webshop.css: NIEUWE STIJLGROEPEN --- */

.style-group {
    border-bottom: 1px solid var(--blue9);
    padding: 8px 0;
}

.style-group-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold; /* De hoofd-stijl blijft dikgedrukt */
    color: var(--blue6);
    padding: 5px 0;
    transition: color 0.2s;
}

.style-group-toggle:hover {
    color: var(--accent-color);
}

/* Draaien van het plus/min-icoon (visueel effect) */
.style-group-toggle i {
    transition: transform 0.3s ease;
}
/* Draai de plus om een 'X' te vormen (of een min) wanneer de groep open is */
.style-group.open .style-group-toggle i {
    transform: rotate(45deg); 
}


/* Stijl voor de Substijl Links (Inklapbare Container) */
.substyle-links {
    max-height: 0; /* Initieel verborgen */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: 15px;
}

/* Toon substijlen wanneer de groep open is */
.style-group.open .substyle-links {
    max-height: 300px; /* Groot genoeg om alle links te tonen */
    padding-top: 5px;
}

.substyle-link {
    display: block;
    text-decoration: none;
    color: var(--text);
    padding: 4px 0;
    font-size: 0.95em;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 5px;
}

.substyle-link:hover {
    color: var(--accent-hover);
}

/* Stijl voor geselecteerde substijl (wat nu de actieve filter is) */
.substyle-link.selected {
    color: var(--light-text);
    background-color: var(--accent-color);
    padding-left: 8px; 
}

/* --- Product Grid --- */
.product-grid {
    flex-grow: 1;
    display: grid;
    /* Responsive Grid: 3 columns, minimum width 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* --- Product Card --- */
.product-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    cursor: pointer;
}

/* Hover & Shadow Effect */
.product-card:hover {
    transform: translateY(-5px); /* Minimal hover effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 10px;
}
.product-card img {
    width: 100%;
    height: 300px; /* Fixed height for uniformity */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Product Info */
.product-name {
    color: var(--blue8);
    margin: 5px 0;
    font-size: 1.1em;
}
.product-price {
    color: var(--accent-color);
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Overlay Icons (Like & Cart) */
.overlay-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
}

.product-card:hover .overlay-icons {
    opacity: 1; /* Show icons on product hover */
}

.overlay-icons i {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--blue6);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.overlay-icons i:hover {
    background-color: var(--accent-hover);
    color: var(--light-text);
}

.overlay-icons .liked {
    color: red; /* Color the heart when liked */
    background-color: var(--light-text);
}

/* --- Glans Effect CSS --- */

/* 1. Zorg dat de image-container de referentie is voor de glans-overlay */
.image-container {
    position: relative; 
    overflow: hidden;   
}

/* 2. De Pseudoklasse (de "Glans") maken */
.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Maak de diagonale glansbalk (wit met transparantie) */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,         
        rgba(255, 255, 255, 0.3) 50%,      
        rgba(255, 255, 255, 0) 100%        
    );
    
    /* Startpositie buiten beeld (linksboven) */
    transform: translate(-100%, -100%) rotate(45deg);
    
    /* Zorg dat de glans boven de afbeelding, maar onder de icoontjes ligt */
    z-index: 10;
    
    /* Vlotte overgang voor de beweging */
    transition: transform 0.5s ease-in-out;
}

/* 3. Animatie (Glans verschuift bij Hover) */
.product-card:hover .image-container::before {
    /* Verschuif de glansbalk naar rechtsonder, waardoor deze over de afbeelding beweegt */
    transform: translate(100%, 100%) rotate(45deg);
}

/* 4. OPTIONEEL: Als je de afbeelding zelf ook iets wilt laten bewegen bij hover */
.product-card:hover img {
    transform: scale(1.05); /* Zoom de afbeelding iets in */
    transition: transform 0.3s ease;
}

/* --- Responsive Adjustments (Optional) --- */
@media (max-width: 900px) {
    .shop-container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}
/* ------------------------------------------------ */
/* 5. FOOTER STYLING */
/* ------------------------------------------------ */

footer {
    text-align: center;
    padding: 2rem 0;
    background-color: var(--blue9);
    color: var(--blue8);
    margin-top: 40px;
    width: 100%;
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
}

/* Styling voor Social Media iconen in de footer */
footer img {
    height: 40px;
    width: 40px;
    margin: 0 10px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

footer a:hover img {
    transform: scale(1.1);
}