/* =========================================================
   HEADER BOTTOM
   ========================================================= */

/* MAIN NAVIGATION */

/* Set the default navigation link color */

.wd-header-nav .wd-nav > li > a.woodmart-nav-link {
    color: var(--text-secondary);
}

/* Set the navigation link typography */

.wd-header-main-nav .wd-nav-main > li > a {
    font-size: 12px;
    font-weight: 400;
}

/* Customize the default WoodMart underline */

.wd-header-main-nav .wd-nav-main > li > a > span::after {
    top: calc(100% + 3px) !important;
    background: var(--color-primary) !important;
}

/* Hide the default underline */

.wd-header-nav .wd-nav > li > a.woodmart-nav-link .nav-link-text::after {
    display: none;
}

/* Prepare navigation links for the custom underline */

.wd-header-nav .wd-nav > li > a.woodmart-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Create the custom underline */

.wd-header-nav .wd-nav > li > a.woodmart-nav-link::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 7px;

    width: 100%;
    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: right;

    transition: .3s ease;
}

/* Show the underline on hover and active menu items */

.wd-header-nav .wd-nav > li:hover > a.woodmart-nav-link::before,
.wd-header-nav .wd-nav > li.current-menu-item > a.woodmart-nav-link::before,
.wd-header-nav .wd-nav > li.current_page_item > a.woodmart-nav-link::before,
.wd-header-nav .wd-nav > li.current-menu-ancestor > a.woodmart-nav-link::before {
    transform: scaleX(1);
}

/* DROPDOWN MENU */

/* Set the dropdown menu typography */

.wd-dropdown-cats .nav-link-text {
    font-size: 14px;
}

/* Highlight hovered and active menu items */

.wd-dropdown-cats .woodmart-nav-link:hover,
.wd-dropdown-cats .current-menu-item > .woodmart-nav-link,
.wd-dropdown-cats .current_page_item > .woodmart-nav-link {
    background: rgba(212, 176, 106, .18);
}

/* Change the text color for hovered and active items */

.wd-dropdown-cats .woodmart-nav-link:hover .nav-link-text,
.wd-dropdown-cats .current-menu-item .nav-link-text,
.wd-dropdown-cats .current_page_item .nav-link-text {
    color: var(--color-primary);
}

/* Customize the dropdown container */

.wd-dropdown-menu {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    margin-right: 1px !important;

    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Set the submenu typography and spacing */

.wd-dropdown-menu .wd-sub-menu > li > a {
    color: #6b6a6a;
    font-size: 13px;
    font-weight: 500;

    padding-right: 16px;
    padding-left: 16px;
}

/* Change the submenu text color on hover */

.wd-dropdown-menu .wd-sub-menu > li:hover > a {
    color: var(--color-primary);
}

/* CATEGORY MENU BUTTON */

/* Fix the hover gap between the category button and dropdown */

.wd-header-cats .menu-opener {
    height: 40px !important;
}

/* Remove the default WoodMart underline */

.wd-header-cats .menu-opener::after {
    content: none !important;
}

/* Prepare the category button for the custom underline */

.wd-header-cats .menu-opener {
    min-width: 0 !important;

    position: relative;
    display: inline-flex;

    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Create the custom underline */

.wd-header-cats .menu-opener::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 7px;

    width: 100%;
    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: right;

    transition: .3s ease;
}

/* Show the underline on hover */

.wd-header-cats:hover .menu-opener::before {
    transform: scaleX(1);
}

/* Set the category button text color */

.wd-header-cats .menu-open-label {
    color: var(--text-primary);
}