body {
    padding-top: 200px; /* Adjust this value based on the exact combined height of your top navbar + category nav */
}
#fixedNavWrapper {
     position: fixed;
     top: 56px; /* Adjust this to match the height of your main top navbar (e.g., 56px) so it sits right underneath it */
     left: 0;
     right: 0;
     width: 100%;
     background-color: #ffffff;
     z-index: 1040 !important;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
/* Darker Navigation Background Container */
.category-nav-wrapper {
    background-color: #f0f1f3 !important;
}

#filter-form {
padding-left: 1.5rem;
background-color: #f0f1f3
}

/* 1. Root Level Header Row (1.5x Size) */
.root-nav-row {
    height: 45px; /* 1.5x larger than sub-rows */
    font-size: 1.05rem; /* ~17-18px */
    background-color: #f0f1f3;
    padding-left: 1.5rem;
}

/* 2. Subcategory Rows (Fixed Uniform Height for All Sub-Levels) */
.sub-nav-row {
width: 100% !important;
background-color: #e9ecef;
    height: 30px; /* Fixed uniform height for row 2, row 3, row 4... */
    box-sizing: border-box;
    padding-left: 1.5rem;
}

/* Subcategory Typography */
.nav-item-sub {
    font-size: 0.78rem; /* ~12px */
    letter-spacing: -0.2px;
}

/* Inactive Link Color */
.text-muted-custom {
    color: #666666 !important;
}

/* Hover Behavior */
.hover-dark:hover {
    color: #000000 !important;
}

/* Active Line Underneath Item */
.active-underline {
    border-bottom: 2px solid #111111;
    padding-bottom: 2px;
}

/* Base Filter Pill Design (Light gray border, normal text) */
.filter-pill-btn {
    height: 32px;
    font-size: 0.82rem;
    border-radius: 8px;
    padding: 0 14px;
    border: 1px solid #ced4da; /* Light black/gray border */
    background-color: #f0f1f3;
    color: #495057;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    /* FIX FOR SHRINKING: Reserve layout space for bold text using a pseudo-element */
    position: relative;
}

/* Invisible pseudo-element to hold the layout footprint of bold text, preventing any shift */
.filter-pill-btn::after {
    content: attr(data-text);
    font-weight: 600;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    display: block;
    user-select: none;
    pointer-events: none;
}

.filter-pill-btn:hover {
    border-color: #343a40;
    color: #212529;
}

/* Checked/Active State: Solid bold black border and bold text */
.btn-check:checked + .filter-pill-btn {
    border: 2px solid #212529 !important;
    background-color: #f0f1f3 !important;
    color: #212529 !important;
    font-weight: 600;
    padding: 0 13px; /* Adjust padding to offset the thicker 2px border */
}

.filter-dropdown-menu {
    font-size: 0.85rem;
    border-radius: 8px;
}

/* Active / Checked state for Dropdown Filter Pills */
.filter-pill-btn.active-filter {
    border: 2px solid #212529 !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    font-weight: 600;
    padding: 0 13px; /* Compensate for the 2px border thickness */
}

/*Collapse */
.subcategory-collapse-area {
    max-height: 300px; /* Adjust taller if you have many sub-levels */
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.25s ease-in-out, opacity 0.2s ease-in-out, padding 0.2s ease-in-out;
}

.subcategory-collapse-area.collapsed-subcats {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    pointer-events: none;
}