/**
* Theme Name: WHCarparts Child
* Description: This is a child theme of WhCarparts.
* Author: <a href="https://iagroup.app/">IAGROUP.APP</a>
* Template: karpart
* Version: 1.1.3
*/

/* Actieve (huidige) categorie in de WooCommerce productcategorie-widget */
.widget_product_categories .current-cat > a { font-weight: 700; }
.widget_product_categories .current-cat-parent > a { font-weight: 600; }

/* Korte specs in de hover-zone van de grid-productkaart */
.product-caption-hover .wh-hover-specs {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--accent, #444);
}
.product-caption-hover .wh-hover-specs li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================================
   WH: Dynamisch categorie-menu widget
   Matches de styling van het bestaande karpart-vertical-menu
   ================================================================ */

/* Header — identiek aan vertical-navigation-header */
.elementor-widget-wh-dynamic-category-menu .vertical-navigation-header,
.elementor-widget-wh-dynamic-category-menu .wh-catmenu-header {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 12px 30px;
    background-color: var(--light, #f5f5f5);
    border-radius: 3px;
}

.elementor-widget-wh-dynamic-category-menu .vertical-navigation-title {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.elementor-widget-wh-dynamic-category-menu .vertical-navigation-title .title {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #1a1a1a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hamburger icon (drie streepjes) */
.elementor-widget-wh-dynamic-category-menu .title-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
    flex-shrink: 0;
}

.elementor-widget-wh-dynamic-category-menu .title-icon span {
    display: block;
    height: 2px;
    background-color: var(--accent, #1a1a1a);
    border-radius: 2px;
    transition: background-color 0.2s;
}

/* Dropdown */
.elementor-widget-wh-dynamic-category-menu .vertical-menu {
    position: absolute;
    z-index: 999;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-radius: 0 0 3px 3px;
    display: none;
}

.elementor-widget-wh-dynamic-category-menu:hover .vertical-menu,
.elementor-widget-wh-dynamic-category-menu .vertical-navigation:hover .vertical-menu {
    display: block;
}

/* Menu items */
.elementor-widget-wh-dynamic-category-menu .wh-catmenu-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.elementor-widget-wh-dynamic-category-menu .wh-catmenu-list > li {
    position: relative;
}

.elementor-widget-wh-dynamic-category-menu .wh-catmenu-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--accent, #333);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.elementor-widget-wh-dynamic-category-menu .wh-catmenu-list > li > a:hover,
.elementor-widget-wh-dynamic-category-menu .wh-catmenu-list > li:hover > a {
    background-color: var(--primary, #c9a84c);
    color: #fff;
}

/* Pijltje voor items met subcategorieën */
.elementor-widget-wh-dynamic-category-menu .menu-item-has-children > a::after {
    content: "\203A"; /* › */
    font-size: 16px;
    line-height: 1;
    margin-left: 8px;
    opacity: 0.6;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Caret roteert naar beneden zodra de groep open is */
.elementor-widget-wh-dynamic-category-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(90deg);
}

/* ── Accordion-subcategorieën (uitklapbaar) ───────────────────── */
.elementor-widget-wh-dynamic-category-menu .wh-catmenu-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,0,0,0.02);
}

.elementor-widget-wh-dynamic-category-menu .menu-item-has-children.is-open > .wh-catmenu-sub {
    max-height: 3000px;
}

.elementor-widget-wh-dynamic-category-menu .wh-catmenu-sub > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px 7px 38px;
    font-size: 13px;
    color: var(--accent, #333);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.elementor-widget-wh-dynamic-category-menu .wh-catmenu-sub > li > a:hover {
    background-color: var(--primary, #c9a84c);
    color: #fff;
}

/* Uitklap-kop mag niet als gewone link ogen (cursor + geen onderlijning) */
.elementor-widget-wh-dynamic-category-menu a.wh-catmenu-parent {
    cursor: pointer;
}

/* Sub-menu */
.elementor-widget-wh-dynamic-category-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.10);
    border-radius: 0 3px 3px 0;
    display: none;
    z-index: 1000;
}

.elementor-widget-wh-dynamic-category-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}

.elementor-widget-wh-dynamic-category-menu .sub-menu li a {
    display: block;
    padding: 7px 18px;
    font-size: 13px;
    color: var(--accent, #333);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.elementor-widget-wh-dynamic-category-menu .sub-menu li a:hover {
    background-color: var(--primary, #c9a84c);
    color: #fff;
}

/* Product-aantallen badge */
.elementor-widget-wh-dynamic-category-menu .wh-cat-count {
    font-size: 11px;
    opacity: 0.65;
    margin-left: 4px;
}

/* Mobiel: sub-menu niet naast maar eronder */
@media (max-width: 768px) {
    .elementor-widget-wh-dynamic-category-menu .sub-menu {
        position: static;
        box-shadow: none;
        padding-left: 16px;
        display: block;
    }
    .elementor-widget-wh-dynamic-category-menu .vertical-menu {
        position: static;
        box-shadow: none;
    }
    .elementor-widget-wh-dynamic-category-menu:hover .vertical-menu,
    .elementor-widget-wh-dynamic-category-menu .vertical-navigation:hover .vertical-menu {
        display: block;
    }
}
/* ================================================================
   WH: Mobiel uitschuifmenu in donkere huisstijl (2026-07-31)
   Het logo heeft witte "CARPARTS"-letters en was onleesbaar op de
   witte achtergrond van het parent-thema.
   ================================================================ */
body .karpart-mobile-nav {
    background-color: #0f0f0f;
}
body .karpart-mobile-nav .mobile-menu-tab a,
body .karpart-mobile-nav .handheld-navigation ul li a,
body .karpart-mobile-nav .site-title a,
body .karpart-mobile-nav .site-description,
body .karpart-mobile-nav .mobile-nav-tabs ul li,
body .karpart-mobile-nav .mobile-nav-tabs ul li i,
body .karpart-mobile-nav .mobile-nav-tabs ul li.active,
body .mobile-nav-close,
body .mobile-nav-close:hover,
body .mobile-nav-close:focus {
    color: #fff;
}
body .karpart-mobile-nav .mobile-menu-tab a:hover {
    color: var(--primary, #b49146);
}