/* ========================================================================== */
/* GENERAL SITE STYLES & WRAPPERS                                             */
/* ========================================================================== */
:root {
    --vac-olive: #89932d;
    --vac-navy: #1d3181;
    --vac-navy-glass: rgba(29, 49, 129, 0.96);
    --white: #ffffff;
    --gray-border: #eee;
    --dropdown-menu-lightblue: #07183f;
    --footer-bg: #162461;
    --text-gray: #b0b8d6;
    --dropdown-menu-text-hover: #07183f;
    --dropdown-menu-links: #07183f;
}
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* V3.0 Pills CSS Classes */
.clear-pills-btn {
    color: var(--vac-olive);
    font-size: 12px;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ========================================= */
/* ACCORDION FILTER STYLES                   */
/* ========================================= */
.filter-group {
    border-bottom: 1px solid #d5d5d5;
    padding-left: 10px;
    margin-bottom: 0;
    background-color: #d4d9df26;
    margin-left: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
}
    .filter-group:hover {
        color: var(--vac-olive);
        border-bottom: 2px solid #b3b5afa8;
    }
    .filter-group:last-child {
        border-bottom: none;
    }

.filter-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.00rem;
    font-weight: 800;
    color: var(--vac-navy);
    user-select: none;
    transition: color 0.2s;
    text-transform: uppercase;
    margin-bottom: 10px;
}

    .filter-title:hover {
        color: var(--vac-olive);
    }

    /* The Plus Icon */
    .filter-title::after {
        content: '+';
        font-size: 1.5rem;
        margin-left: auto;
        font-weight: 400;
        margin-right: 10px;
        color: #999;
        transition: transform 0.3s ease, color 0.3s ease;
    }
    .filter-title:hover::after {
        content: '+';
        font-size: 1.5rem;
        font-weight: 500;
        margin-right: 10px;
        color: #7c7d81;
        transition: transform 0.3s ease, color 0.3s ease;
    }
/* The Minus Icon (When Open) */
.filter-group.open .filter-title::after {
    content: '−';
    color: #1d3181;
    font-size: 1.6rem;
    font-weight: 500;
    transition: transform 0.3s ease, color 0.3s ease;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.filter-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.1s ease-out, 1.1s, padding 1.1s ease-out;
    /* transition: max-height 0.8s ease-in-out, opacity 2.5s ease-in-out; */
    margin: 0;
    padding: 0 5px;
}

.filter-group.open .filter-list {
    max-height: 1400px;
    padding-bottom: 15px;
    padding-left: 10px !important;
    /* padding-top: 10px !important; */
}

/* Color for the pill prefix */
.pill-prefix {
    color: #c6d81a;
    margin-right: 3px;
    font-weight: 500;
}
/* ACTIVE FILTER PILLS */
.active-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}
.active-filters-container-searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}
.active-filters-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 5px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    background: #003366;
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.pill-prefix:hover {
    color: #89932d;
    margin-right: 3px;
    font-weight: 500;
}
    .filter-pill:hover {
        background: #333;
        color: #999 !important;
        text-decoration: none;
    }
/* Base X styling (always applied) */
.pill-x {
    margin-left: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    transition: color 0.2s ease; /* Makes the color fade smoothly! */
}
            .pill-x:hover {
                margin-left: 8px;
                font-size: 0.95rem;
                color: #ff0000;
                font-weight: bold;
            }
        .clear-pills-btn {
            font-size: 0.85rem;
            color: #e53935 !important;
            font-weight: 700;
            text-decoration: underline;
            margin-left: auto;
            cursor: pointer;
        }
/* 1. What happens to the Pill itself on hover */
.filter-pill:hover {
    background: #333;
    color: #999 !important;
    text-decoration: none;
}

    /* 2. What happens to the "✖" WHEN the Pill is hovered */
    .filter-pill:hover .pill-x {
        color: #cd4545;
    }

    /* 3. What happens to the "Type:" prefix WHEN the Pill is hovered */
    .filter-pill:hover .pill-prefix {
        color: #89932d;
    }
        /* NOTE: If the olive is too dark on the navy background, use this brighter version instead: */
        /* .pill-prefix { color: #9ebd60; margin-right: 3px; font-weight: 500; } */
        /* Responsive: Portrait tablets and up */
        @media screen and (min-width: 768px) {
            .body-content {
                padding: 0;
            }
        }

        .breadcrumbs {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: 20px;
            font-weight: 700;
            background: linear-gradient(to right, #f4f4f7, transparent);
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
        }

            .breadcrumbs a {
                color: var(--vac-navy);
                text-decoration: none;
            }

                .breadcrumbs a:hover {
                    color: var(--vac-olive);
                    text-decoration: underline;
                }

            .breadcrumbs span {
                margin: 0 8px;
                color: #b0b1b4;
                font-size: 20px;
            }
        /* ========================================================================== */
        /* 1. GLOBAL PRODUCT GRID & SIDEBAR FILTERS                                   */
        /* ========================================================================== */
        .catalog-wrap {
            max-width: 90%;
            margin: 20px auto 40px auto;
            padding: 0 4%;
        }

        .catalog-header {
            margin-bottom: 30px;
            border-bottom: 2px solid var(--vac-navy);
            padding-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

            .catalog-header h1 {
                margin: 0;
                font-size: 2.1rem;
                color: var(--vac-navy);
                font-weight: 900;
                text-transform: uppercase;
            }

        .result-count {
            color: #666;
            font-weight: 700;
            font-size: 0.95rem;
        }

        .catalog-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            align-items: start;
        }
        /* Force ALL checkboxes in the sidebar to be the exact same size */
        .filter-sidebar input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin: 0 5px 0 0;
            vertical-align: middle; /* Keeps the box lined up with the text */
        }
        /* Ensure the ANY labels align the same way as the list labels */
        .filter-label label {
            vertical-align: middle;
            cursor: pointer;
        }
        /* Internal scrollbar styling */
        .filter-sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .filter-sidebar::-webkit-scrollbar-track {
            background: #f4f6f9;
            border-radius: 4px;
        }

        .filter-sidebar::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

            .filter-sidebar::-webkit-scrollbar-thumb:hover {
                background: var(--vac-navy);
            }
        /* Base Header/Footer/Group Styles */
        .filter-header {
            padding: 12px 20px 15px 20px;
            margin: 0;
            font-size: 1.1rem;
            color: var(--vac-navy);
            font-weight: 900;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f1f3f9;
            position: sticky;
            top: 0;
            z-index: 10;
        }

.filter-footer {
    padding: 5px 10px 5px 10px;
    margin-top: 10px;
    /* border-top: 1px solid #eee; */
    text-align: center;
    background-color: #fdfdfd;
    position: sticky;
    bottom: 0;
    z-index: 10;
}


.filter-title {
    font-size: 0.95rem;
    color: #333;
    font-weight: 800;
    margin-left: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin-top: 10px;
}

        .filter-not-available {
            font-size: 0.95rem;
            color: #999;
            font-weight: 800;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        /* RESET LISTS TO KILL DOTS */
        .filter-list, .filter-list ul, .sub-filter-list {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .filter-list li {
                margin-bottom: 8px !important;
                list-style: none !important;
            }

.filter-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
}

    .filter-label:hover {
        color: #403f3f;
        font-weight: 500;
    }

            .filter-label input[type="checkbox"] {
                cursor: pointer;
                width: 16px;
                height: 16px;
                accent-color: var(--vac-navy);
            }

.filter-count {
    color: #999;
    font-size: 0.8rem;
    margin-left: 5px;
    margin-right: 10px;
    margin-left: auto;
}

        .sub-filter-list {
            padding: 0 0 0 24px !important;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            border-left: 2px solid #eee;
            margin-left: 8px !important;
            margin-top: 5px !important;
        }

            .sub-filter-list.active {
                max-height: 2500px;
                margin-bottom: 10px !important;
            }
        /* Filter Buttons */
.clear-filters-btn {
    width: 100%;
    background: #89932d;
    border: 1px solid #3f4045;
    color: #ffffff;
    padding: 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

            .clear-filters-btn:hover {
                background: #07183f;
                color: #ffffff;
                font-weight: 700;
            }

        .close-filters-btn {
            font-size: 0.8rem;
            color: #888;
            cursor: pointer;
            font-weight: 500;
        }

            .close-filters-btn:hover {
                color: #89932d;
                font-weight: 600;
            }
        /* Desktop 'Show Filters' button */
        .desktop-show-filters-btn {
            display: none;
            background: #fdfdfd;
            border: 1px solid #ccc;
            padding: 6px 12px;
            border-radius: 4px;
            font-weight: bold;
            color: var(--vac-navy);
            cursor: pointer;
            margin-right: auto;
            font-size: 0.85rem;
        }

            .desktop-show-filters-btn:hover {
                background: #f4f6f9;
                border-color: var(--vac-navy);
            }
        /* Mobile Filter Toggle Button */
        .mobile-filter-btn {
            display: none;
            width: 100%;
            background: var(--vac-navy);
            color: white;
            border: none;
            padding: 12px;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 4px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        /* Product Grid & Cards */
        .grid-controls {
            display: flex;
            justify-content: space-between; /* This is the magic that pushes them apart */
            margin-bottom: 20px;
            align-items: center;
            width: 100%;
        }

        .left-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .85em;
            color: #888;
            font-weight: 600;
        }

        .right-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .85em;
            color: #888;
            font-weight: 600;
            min-width: 185px;
        }


        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 25px;
        }

        .prod-card {
            background: #fff;
            border: 1px solid var(--gray-border);
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
            text-decoration: none;
            position: relative;
        }

            .prod-card:hover {
                border-color: #cdd0db;
                box-shadow: 0 8px 20px rgba(29, 49, 129, 0.1);
                transform: translateY(-3px);
            }

        .card-img-wrap img {
            max-width: 100%;
            max-height: 150px;
            object-fit: contain;
            transition: transform 0.3s;
        }

        .prod-card:hover .card-img-wrap img {
            transform: scale(1.05);
        }

        .stock-badge {
            position: absolute;
            top: 7px;
            left: 45px;
            background: #e6f4ea94;
            color: #2e7d32;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 12px;
            text-transform: uppercase;
            z-index: 10;
        }

        .favorite-btn {
            position: absolute;
            right: 10px;
            width: 38px;
            height: 38px;
            border: 1px solid #ddd;
            background: #ffffff57;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 2px;
            top: 3px;
            transition: all 0.2s;
            cursor: pointer;
            color: #ccc;
            z-index: 20;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

            .favorite-btn:hover {
                /* color: #d9534f; */
                transform: scale(1.0);
                border-color: #c0c0c2;
            }

            .favorite-btn.active {
                /* color: #d9534f; */
                background: #e1e8eb;
                border-color: #7c86ab;
                /* border: 1px; */
            }
            /* Hover effect for better UX */
            .favorite-btn:hover svg {
                transform: scale(1.2);
                color: #ccc;
            }

            .favorite-btn.active svg {
                fill: #67823a !important;
            }

            .favorite-btn svg {
                width: 18px;
                height: 18px;
                fill: #ccc; /* Default Grey */
                transition: fill 0.3s ease, transform 0.2s ease;
            }

        .card-body {
            /* padding: 20px; */
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding-left: 10px;
            padding-right: 5px;
        }

        .card-sku {
            font-size: 1.3rem;
            color: var(--vac-navy);
            font-weight: 900;
            margin: 3px 0 5px 0;
            padding-left: 5px;
            text-decoration: underline;
        }

        .card-desc {
            font-size: 0.85rem;
            color: #3c3c3d;
            background-color: #ebedef5c;
            margin: 0 0 5px 0;
            line-height: 1.4;
            flex-grow: 1;
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
        }

        .card-attrs {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
            border-top: 1px dashed #eee;
            padding-top: 10px;
        }
            /*   .card-attrs li {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-bottom: 4px;
    } */
            .card-attrs li {
                display: flex;
                justify-content: space-between;
                font-size: 0.85rem;
                margin-bottom: 4px;
                margin-right: 15px;
                margin-left: 15px;
            }

        .attr-k {
            color: #888;
            font-weight: 600;
        }

        .attr-v {
            color: #333;
            font-weight: 800;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            width: 100%;
            padding: 0 20px 12px 20px;
            box-sizing: border-box;
        }

        .card-price {
            color: var(--vac-olive) !important;
            font-weight: 800;
            font-size: 1.5rem;
            margin-left: 0;
        }

        .card-img-wrap {
            /* height: 336px; */
            padding-top: 20px;
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            /* background: #fdfdfd; */
            border-bottom: 1px solid #eee;
            position: relative;
            flex-direction: column;
            justify-content: center;
        }

        .product-grid.list-view .card-img-wrap img {
            max-width: 120px;
            max-height: 150px;
            position: relative;
            object-fit: contain;
            transition: transform 0.3s;
            top: 50px;
        }

        .product-grid:not(.list-view) .card-body {
            /* padding: 0; */
            flex: 1;
            display: flex;
            flex-direction: column;
            /* padding: 20px; */
            flex-direction: column;
            flex-grow: 1;
            padding-left: 10px;
            padding-right: 5px;
            /* padding-bottom: 10px; */
            padding-top: 10px;
        }

        .product-grid.list-view .card-attrs li {
            font-size: 0.95rem;
            display: flex;
            color: #333;
            justify-content: space-around;
            flex-direction: column-reverse;
        }

        .btn-cart {
            background: var(--vac-navy);
            color: #fff;
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 800;
            text-transform: uppercase;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            z-index: 20;
            border: none;
            margin: 0;
            white-space: nowrap;
        }

            .btn-cart svg {
                width: 16px;
                height: 16px;
                fill: currentColor;
                flex-shrink: 0;
            }

            .btn-cart:hover {
                background: var(--vac-olive);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }


        .product-grid.list-view .card-attrs {
            display: flex;
            column-gap: 25px;
            row-gap: 15px;
            padding-top: 10px;
            font-size: 1rem;
            border-top: 1px solid #f5f5f5;
            list-style: none;
            margin: 0px;
            justify-content: space-between;
            flex-direction: column;
            width: 268px;
            position: relative;
            left: -15px;
            flex-wrap: wrap;
        }

        .product-grid.list-view .card-footer {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            padding: 0 25px;
            width: 240px;
            flex-shrink: 0;
            gap: 12px;
            /* background: #fafafa; */
        }

        .product-grid.list-view .card-img-wrap {
            width: 140px;
            flex-shrink: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* border-right: 1px solid #f9f9f9; */
        }
        /* ========================================================================== */
        /* 2. CATEGORY HUB LAYOUT (Dense Grid & Sidebar for Main Landing Pages)       */
        /* ========================================================================== */
        .hub-wrap {
            max-width: 90%;
            margin: 20px auto 40px auto;
            padding: 0 4%;
        }

        .cat-layout {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 40px;
            align-items: start;
        }

        .side-nav {
            position: sticky;
            top: 100px;
            background: #fdfdfd;
            border: 1px solid var(--gray-border);
            border-top: 4px solid var(--vac-navy);
            border-radius: 4px;
            padding: 20px 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        }

        .side-nav-title {
            font-size: 1.1rem;
            color: var(--vac-navy);
            font-weight: 900;
            text-transform: uppercase;
            padding: 0 20px 10px 20px;
            margin: 0 0 10px 0;
            border-bottom: 2px solid #eee;
        }

        .side-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .side-menu li a {
                display: block;
                padding: 10px 20px;
                color: #444;
                text-decoration: none;
                font-size: 0.9rem;
                font-weight: 600;
                border-left: 3px solid transparent;
                transition: all 0.2s;
                line-height: 1.3;
            }

                .side-menu li a:hover {
                    background: #f4f6f9;
                    color: var(--vac-olive);
                    border-left-color: var(--vac-olive);
                }

            .side-menu li.active a {
                background: #eef1f6;
                color: var(--vac-navy);
                border-left-color: var(--vac-navy);
                font-weight: 800;
            }

        .side-nav-divider {
            height: 1px;
            background: #eee;
            margin: 15px 20px;
        }

        .main-content {
            display: flex;
            flex-direction: column;
        }

.compact-hero {
    margin-bottom: 10px;
    padding-bottom: 10px;
    /* border-bottom: 2px solid var(--vac-navy); */
}

            .compact-hero h1 {
                margin: 0 0 10px 0;
                font-size: 2.1rem;
                color: var(--vac-navy);
                font-weight: 900;
                text-transform: uppercase;
            }

            .compact-hero p {
                margin: 0;
                font-size: 1rem;
                color: #555;
                line-height: 1.6;
                background-color: #f9f9fd;
                border: solid #f3f3f3 2px;
                padding: 20px;
            }

        .group-header {
            font-size: 1.6rem;
            color: #ffffff;
            /* text-shadow: 1px 1px 1px #000000; */
            font-weight: 800;
            margin: 0 0 5px 0;
            display: flex;
            align-items: center;
            /* gap: 10px; */
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            /* background-color: #89932d; */
            padding-left: 10px;
            /* display: flex; */
            gap: 15px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            background-color: #1d3181;
            /* background: linear-gradient(to right, #1d3181, #1d3181, #2846be); */
            flex-direction: row;
            align-items: center;
        }

            .group-header::after {
                content: '';
                flex-grow: 1;
                height: 1px;
                background: #e0e0e0;
            }

        .dense-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }

        .dense-card {
            background: #fff;
            border: 1px solid var(--gray-border);
            border-radius: 4px;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.2s;
            padding-bottom: 10px;
            padding-top: 20px;
            margin-top: 10px;
            margin-bottom: 20px;
            height: 100%; /* Ensures the card stretches to fill the grid row */
            text-decoration: none; /* Keeps the link text clean */
        }

            .dense-card:hover {
                border-color: var(--vac-navy);
                box-shadow: 0 5px 15px rgba(29, 49, 129, 0.1);
                transform: translateY(-3px);
            }

        .dense-title {
            font-size: 1.2rem;
            color: var(--vac-navy);
            font-weight: 800;
            text-align: center;
            padding: 0 10px 15px 10px;
            margin: 0;
            min-height: 2.4em;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
        }

        .dense-card:hover .dense-title {
            color: var(--vac-olive);
        }

        .dense-img-box {
            width: 100%;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

            .dense-img-box img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

        .dense-desc {
            font-size: 1.0rem;
            color: #666;
            padding: 0 10px;
            hyphens: auto;
            margin: 0;
            text-align: left;
            margin-bottom: -21px;
            line-height: 1.4;
        }

        .dense-desc-specs {
            font-size: 0.90rem;
            color: #76787d;
            hyphens: auto;
            text-align: left !important;
            margin-bottom: 0px;
            line-height: 1.6;
            margin-top: auto;
            padding-top: 12px;
            border-top: 1px solid #b0b8d6;
        }
        /* ========================================================================== */
        /* 3. HEAVY CARDS (Used on Landing Page & Index)                              */
        /* ========================================================================== */
        .page-container {
            max-width: 1300px;
            margin: 30px auto;
            padding: 0 4%;
        }

        .products-page-container {
            max-width: 90%;
            margin-top: 30px;
            margin-bottom: 30px;
            margin-left: 100px;
            margin-right: 100px;
            padding: 0 4%;
        }

        .heavy-section {
            margin-bottom: 50px;
        }

        .heavy-header {
            font-size: 1.4rem;
            color: #1d3181;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

            .heavy-header::before {
                content: '';
                display: block;
                width: 12px;
                height: 30px;
                background: #89932d;
            }

        .heavy-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 25px;
        }

        .heavy-card {
            background: #ebeff1;
            color: #162461;
            padding: 60px 15px 25px 15px;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border-top: 15px solid #1d3181;
            border-bottom: 5px solid #1d3181;
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

            .heavy-card:hover {
                transform: translateY(-5px);
                background: #fdfdfd;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }

        .h-icon {
            margin-top: -30px;
            margin-bottom: 15px;
            width: 100%;
            max-width: 180px;
            height: auto;
            transition: transform 0.5s ease;
            z-index: 5;
        }

        .heavy-card:hover .h-icon {
            transform: scale(1.08);
        }

        .h-title {
            font-size: 1.15rem;
            font-weight: 700;
            text-transform: uppercase;
            width: 100%;
            padding-bottom: 12px;
            border-bottom: 2px solid #b0b8d6;
            margin-bottom: 12px;
            position: relative;
            z-index: 5;
        }

        .h-description {
            font-size: 0.85rem;
            line-height: 1.5;
            color: #333;
            position: relative;
            z-index: 5;
        }
        /* Industrial Headers & Intro Blocks */
        .page-header, .products-page-header {
            font-size: 1.8rem;
            color: var(--vac-navy);
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            letter-spacing: 0.05em;
        }

            .page-header::before, .products-page-header::before {
                content: '';
                display: block;
                width: 12px;
                height: 40px;
                background: var(--vac-olive);
            }

        .intro-block, .products-intro-block {
            background: #f4f6f9;
            border-left: 4px solid #dddddd1f;
            padding: 25px 30px;
            margin-bottom: 40px;
            border-radius: 0 4px 4px 0;
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .intro-icon, .products-intro-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--vac-olive);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(137, 147, 45, 0.3);
        }

            .intro-icon svg, .products-intro-icon svg {
                width: 24px;
                height: 24px;
                fill: #ffffff;
            }

        .intro-text-content, .products-intro-text-content {
            flex-grow: 1;
        }

            .intro-text-content p, .products-intro-text-content p {
                margin: 0 0 10px 0;
                font-size: 1.05rem;
                color: #444;
                line-height: 1.6;
            }

                .intro-text-content p:last-child, .products-intro-text-content p:last-child {
                    margin-bottom: 0;
                }

        .intro-link, .products-intro-link {
            color: var(--vac-olive);
            font-weight: 800;
            text-decoration: none;
        }

            .intro-link:hover, .products-intro-link:hover {
                color: var(--vac-navy);
                text-decoration: underline;
            }
        /* ========================================================================== */
        /* 4. DISTRIBUTORS PAGE STYLES                                                */
        /* ========================================================================== */
        .distributors-page-container {
            max-width: 90%;
            margin-top: 30px;
            margin-bottom: 30px;
            margin-left: 100px;
            margin-right: 100px;
            padding: 0 4%;
        }

        .distributors-page-header {
            font-size: 1.8rem;
            color: var(--vac-navy);
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            letter-spacing: 0.05em;
        }

            .distributors-page-header::before {
                content: '';
                display: block;
                width: 12px;
                height: 40px;
                background: var(--vac-olive);
            }

        .distributors-intro-block {
            background: #f4f6f9;
            border-left: 4px solid #dddddd1f;
            padding: 25px 30px;
            margin-bottom: 40px;
            border-radius: 0 4px 4px 0;
            display: flex;
            align-items: flex-start;
            gap: 25px;
        }

        .distributors-intro-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--vac-olive);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(137, 147, 45, 0.3);
        }

            .distributors-intro-icon svg {
                width: 24px;
                height: 24px;
                fill: #ffffff;
            }

        .distributors-intro-text-content {
            flex-grow: 1;
        }

            .distributors-intro-text-content p {
                margin: 0 0 10px 0;
                font-size: 1.05rem;
                color: #444;
                line-height: 1.6;
            }

                .distributors-intro-text-content p:last-child {
                    margin-bottom: 0;
                }

        .distributors-intro-link {
            color: var(--vac-olive);
            font-weight: 800;
            text-decoration: none;
        }

            .distributors-intro-link:hover {
                color: var(--vac-navy);
                text-decoration: underline;
            }

        .distributor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .dist-card {
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: visible;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

            .dist-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 25px rgba(29, 49, 129, 0.2);
            }

.dist-state {
    background: #67823a;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

        .dist-body {
            padding: 20px;
            background-color: #f3f3f5;
            border: 1px solid #cacdd4;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .dist-icon {
            height: 34px;
            width: 35px;
            position: absolute;
            top: 14px;
            left: 5px;
            z-index: 10;
            fill: #89932d;
            background: #ffffff;
            border-radius: 50%;
            padding: 5px;
            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

        .dist-company {
            font-size: 1.2rem;
            font-weight: 900;
            color: #1d3181;
            margin-bottom: 10px;
            border-bottom: 2px solid #cccdcf;
            padding-bottom: 10px;
            padding-left: 23px;
        }

        .dist-address {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.5;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .dist-contact-area {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .dist-phone {
            display: inline-flex;
            align-items: center;
            font-size: 1.2rem;
            font-weight: 900;
            color: #1d3181;
            text-decoration: none;
            gap: 8px;
        }

            .dist-phone svg {
                width: 18px;
                height: 18px;
                fill: #89932d;
            }

        .dist-website-btn {
            display: block;
            text-align: center;
            border: 2px solid #1d3181;
            color: #1d3181;
            padding: 8px;
            font-weight: 800;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

            .dist-website-btn:hover {
                background: #1d3181;
                color: #fff;
            }
        /* ========================================================================== */
        /* 5. INDEX WIDGETS (News, Spotlight, Advantage)                              */
        /* ========================================================================== */
        .content-wrapper {
            width: 100%;
            padding: 40px 4%;
            display: grid;
            grid-template-columns: 1.9fr 1fr;
            gap: 40px;
            background: #e0e2e4;
        }

        .info-box {
            border: 1px solid var(--gray-border);
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .info-header {
            background: var(--vac-navy);
            color: white;
            padding: 15px 20px;
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* Company News Scroller */
        .news-container {
            height: 300px;
            overflow: hidden;
            position: relative;
            background: #fdfdfd;
        }

        .news-list {
            list-style: none;
            padding: 0;
            margin: 0;
            animation: scrollUp 25s linear infinite;
        }

        .news-container:hover .news-list {
            animation-play-state: paused;
        }

        .news-item {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        .news-date {
            display: block;
            color: var(--vac-olive);
            font-weight: bold;
            font-size: 0.85rem;
            margin-bottom: 5px;
        }

        .news-title {
            display: block;
            font-weight: 700;
            color: #333;
            text-decoration: none;
            margin-bottom: 5px;
        }

            .news-title:hover {
                color: var(--vac-navy);
                text-decoration: underline;
            }

        @keyframes scrollUp {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-50%);
            }
        }
        /* Product Spotlight */
        .spotlight-container {
            height: 300px;
            position: relative;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .spotlight-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            pointer-events: none;
        }

            .spotlight-slide.active {
                opacity: 1;
                pointer-events: auto;
            }

        .spotlight-img {
            height: 150px;
            width: auto;
            object-fit: contain;
            margin-bottom: 15px;
        }

        .spotlight-name {
            font-size: 1.3rem;
            color: var(--vac-navy);
            font-weight: 800;
            margin-bottom: 8px;
        }

        .spotlight-desc {
            color: #666;
            font-size: 0.95rem;
            margin-bottom: 15px;
            max-width: 80%;
        }
        /* Advantage Strip */
        .advantage-section {
            background-color: var(--vac-navy);
            color: #ffffff;
            padding: 60px 0;
            margin-top: 40px;
        }

        .adv-grid {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 4%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            text-align: center;
        }

        .adv-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .adv-icon-circle {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.1);
            border: 2px solid var(--vac-olive);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .adv-item:hover .adv-icon-circle {
            background: var(--vac-olive);
            transform: scale(1.1);
        }

        .adv-icon-circle svg {
            width: 40px;
            height: 40px;
            fill: #ffffff;
        }

        .adv-item h3 {
            color: #ffffff;
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: 0 0 10px 0;
            font-weight: 800;
        }

        .adv-item p {
            color: #b0b8d6;
            font-size: 0.95rem;
            line-height: 1.5;
            margin: 0;
            max-width: 300px;
        }
        /* ========================================================================== */
        /* 6. RECENTLY VIEWED SLIDER                                                  */
        /* ========================================================================== */
        .recent-section {
            max-width: 100%;
            margin: 20px auto 0px auto;
            padding: 0 4%;
            position: relative;
        }

        .recent-main-header {
            font-size: 1.2rem;
            color: #1d3181;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 15px;
            border-bottom: 4px solid #89932d;
            display: inline-block;
            padding-bottom: 5px;
        }

        .recent-slider-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        .recent-grid {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding: 10px 5px 20px 5px;
            width: 100%;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

            .recent-grid::-webkit-scrollbar {
                display: none;
            }

        .recent-arrow {
            width: 40px;
            height: 40px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            transition: all 0.3s ease;
            font-size: 1.2rem;
            color: #1d3181;
            user-select: none;
        }

            .recent-arrow:hover {
                background: #1d3181;
                color: #fff;
                border-color: #1d3181;
                transform: scale(1.1) translateY(-45%);
            }

            .recent-arrow.left {
                left: -15px;
            }

            .recent-arrow.right {
                right: -15px;
            }

        .search-style-card {
            min-width: 240px;
            max-width: 240px;
            flex-shrink: 0;
            background: #fff;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            transition: all 0.2s ease;
        }

            .search-style-card:hover {
                box-shadow: 0 5px 15px rgba(0,0,0,0.15);
                border-color: #1d3181;
                transform: translateY(-2px);
            }

        .card-header-bar {
            background-color: #e0e0e0;
            color: #333;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Material List Styling */
        .material-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .mat-item {
            background: #f4f6f9;
            border: 1px solid #e0e5eb;
            padding: 12px 15px;
            border-radius: 4px;
            color: var(--vac-navy);
            font-weight: 700;
            text-decoration: none;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s;
        }

            .mat-item:hover {
                background: var(--vac-navy);
                color: #fff;
                border-color: var(--vac-navy);
            }

            .mat-item span {
                font-weight: normal;
                color: #888;
                font-size: 0.8rem;
            }

            .mat-item:hover span {
                color: #ccc;
            }
        /* ========================================================================== */
        /* 7. DESKTOP-ONLY TRANSITION & COLLAPSE LOGIC                                */
        /* ========================================================================== */
        @media (min-width: 951px) {
            /* Apply 260px column ONLY if the layout contains a sidebar */
            .catalog-layout:has(.filter-sidebar) {
                grid-template-columns: 260px 1fr;
                gap: 20px;
                transition: grid-template-columns 0.8s cubic-bezier(0.4, 0, 0.2, 1), gap 0.8s ease;
            }

            .filter-sidebar {
                position: sticky;
                top: 100px;
                align-self: start;
                max-height: calc(100vh - 120px);
                overflow-y: auto;
                opacity: 1;
                width: 260px;
                transform: translateX(0);
                filter: blur(0px);
                transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s, filter 0.5s ease;
            }
            .filter-sidebar {
                position: sticky;
                top: 100px;
                align-self: start;
                max-height: calc(100vh - 120px);
                overflow-y: auto;
                border-left: solid 1px #99999936;
                opacity: 1;
                width: 260px;
                transform: translateX(0);
                filter: blur(0px);
                transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s, filter 0.5s ease;
            }
            /* THE CLOSED STATE */
            .catalog-layout.filters-closed {
                grid-template-columns: 0px 1fr !important;
                gap: 0 !important;
            }

                .catalog-layout.filters-closed .filter-sidebar {
                    width: 0 !important;
                    opacity: 0 !important;
                    visibility: hidden !important;
                    filter: blur(4px);
                    transform: translateX(-50px);
                    margin: 0;
                    border: none;
                    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease, visibility 0s linear 0.8s;
                }

                .catalog-layout.filters-closed .desktop-show-filters-btn {
                    display: inline-flex;
                    margin-right: auto;
                }
        }

        .removefaves-block {
            border: 5px solid #89932d;
            /* border-radius: 5px; */
            /* border-top: 5px solid #78add7; */
            padding: 40px 25px;
            margin-bottom: 10px;
            box-shadow: 0 3px 9px #74bbcb94;
            display: flex;
            border-bottom: 2px solid #89932d;
            padding-bottom: 20px;
            flex-direction: column;
            background: linear-gradient(175deg, transparent 1%, #1d3181 50%);
            gap: 10px;
        }
        /* --- CUSTOM CONFIRMATION POPUP --- */

        .btn-fav-delete {
            background: #1d3181;
            color: white;
            padding: 12px 12px;
            align-items: center;
            text-align: center;
            font-size: 1.1rem;
            text-transform: uppercase;
            font-weight: 800;
            border: 2px solid #89932d;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-fav-cancel {
            background: var(--vac-olive);
            background: #1d3181;
            color: #ffffff;
            padding: 12px 12px;
            align-items: center;
            text-align: center;
            font-size: 1.1rem;
            text-transform: uppercase;
            font-weight: 800;
            border: 2px solid var(--vac-olive);
            border-radius: 4px;
            height: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .btn-fav-delete:hover {
            background: #ffffff;
            color: #1d3181;
        }

        .btn-fav-cancel:hover {
            background: #ffffff;
            color: #122263;
        }
        /* The Dark Overlay */
        #confirmModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Dim the background */
            z-index: 99999; /* Stay on top of everything */
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px); /* Modern frosted glass effect */
        }
            /* The Popup Box */
            #confirmModal .removefaves-block {
                background: #d4d7df;
                width: 90%;
                max-width: 420px;
                height: 215px;
                padding: 8px;
                border-radius: 8px;
                border-top: 6px solid #89932d;
                box-shadow: 0 15px 50px rgba(0,0,0,0.3);
                text-align: center;
                animation: slideDown 0.3s ease-out;
            }
        /* Modal Title */
        #confirmTitle {
            color: var(--vac-navy);
            font-size: 1.4rem;
            font-weight: 800;
            text-shadow: 1px 2px #ffffff;
            margin-bottom: -15px;
        }
        /* Modal Text */
        #confirmMessage {
            color: #07183f;
            font-size: 1rem;
            line-height: 1.5;
            margin-bottom: 17px;
        }
        /* Button Container */
        .confirm-btn-container {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        /* Save button for myaccount page */
        .btn-save {
            background: var(--vac-olive);
            color: white;
            padding: 12px 12px;
            align-items: center;
            text-align: center;
            font-size: 1.1rem;
            max-width: 200px;
            text-transform: uppercase;
            font-weight: 800;
            border: 2px solid var(--vac-olive);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

            .btn-save:hover {
                background: transparent;
                color: var(--vac-olive);
                transform: translateY(-2px);
            }
        /* Animation */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* ========================================================================== */
        /* 8. MOBILE RESPONSIVE FIXES                                                 */
        /* ========================================================================== */
        @media (max-width: 950px) {
            .catalog-layout {
                grid-template-columns: 1fr !important;
                /*  gap: 20px; */
            }
            .intro-block, .products-intro-block {
                background: #f4f6f9;
                border-left: 4px solid #dddddd1f;
                padding: 10px 10px;
                margin-bottom: 10px;
                border-radius: 0 4px 4px 0;
                display: flex;
                align-items: center;
                gap: 25px;
            }
            /* Hide 'Results per page' on Mobile */
            .right-controls {
                display: none !important;
            }
            /* 1. Reset wrap margins to prevent "squishing" */
            .catalog-wrap {
                max-width: 100%;
                margin-top: 10px;
                margin-bottom: 20px;
                margin-left: 0;
                margin-right: 0;
                padding: 0 4%; /* Your desired mobile padding */
            }
            /* 2. Tighten Breadcrumbs for mobile */
            .breadcrumbs {
                padding: 5px 5px;
                margin-bottom: 15px;
                background: #f4f6f9;
                font-size: 0.95rem;
            }
            /* 3. Stack Header Elements vertically */
            .catalog-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
                margin-bottom: 20px;
                border-bottom-width: 1px; /* Thinner line for mobile */
            }

                .catalog-header h1 {
                    font-size: 1.6rem; /* Shrink title so it doesn't wrap awkwardly */
                }
            /* MOBILE - DISTRIBUTORS PAGE  */
            .distributors-page-container {
                max-width: 100% !important;
                margin-top: 20px !important;
                margin-bottom: 10px !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding: 0 4%;
            }
            /* HIDE ICON */
            .intro-icon, .products-intro-icon {
                display: none;
            }

            .result-count {
                font-size: 0.85rem;
                margin-bottom: 5px;
            }

            .dist-icon {
                height: 30px !important;
                width: 30px !important;
                position: absolute !important;
                top: 17px !important;
                left: 5px !important;
                z-index: 10 !important;
                fill: #89932d !important;
                background: #ffffff !important;
                border-radius: 50% !important;
                padding: 5px !important;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
            }

            .dist-company {
                font-size: 1.2rem !important;
                font-weight: 900 !important;
                color: #1d3181 !important;
                margin-bottom: 10px !important;
                border-bottom: 2px solid #cccdcf;
                padding-bottom: 10px !important;
                margin-left: 20px !important;
            }
            /* MOBILE - PRODUCTS PAGE (FORCED RESET) */
            .products-page-container {
                max-width: 100% !important;
                margin-top: 10px !important;
                margin-bottom: 20px !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding: 0 4% !important;
            }

            .catalog-layout {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .mobile-filter-btn {
                display: block;
                width: 100%;
                background: var(--vac-navy);
                color: #fff;
                padding: 12px;
                border-radius: 4px;
                font-weight: bold;
                margin-bottom: -5px;
                cursor: pointer;
                border: none;
            }

            .filter-sidebar {
                max-height: 0;
                overflow: hidden;
                border: none;
                transition: max-height 0.5s ease;
                border-left: solid 1px #99999936;
                position: static;
                width: 100% !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }

                .filter-sidebar.active {
                    max-height: 2500px;
                    border: 1px solid var(--gray-border);
                    margin-bottom: 20px;
                }

            .filter-group {
                padding: 0 20px;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
            }

            .filter-bar {
                margin-bottom: 0px !important;
            }

            .hero-img-col img {
                width: 100%;
                /* height: auto; */
                /* border-radius: 4px; */
                /* box-shadow: 0 15px 35px rgba(29, 49, 129, 0.15); */
                display: block;
                /* border: 4px solid #89932d; */
                /* position: relative; */
                /* top: 40px; */
                max-width: 400px;
                margin-top: -30px;
                align-content: center;
                /* min-width: 300px; */
                margin-bottom: -40px;
                /* min-width: 400px; */
            }

            .desktop-show-filters-btn, .close-filters-btn {
                display: none !important;
            }

            .catalog-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            /* MOBILE - OMIT HUB SIDE NAV */
            .side-nav {
                display: none !important;
            }


            .cat-layout {
                grid-template-columns: 1fr;
            }



            .side-nav-title {
                width: 100%;
                padding: 0 0 10px 0;
                margin-bottom: 5px;
                border-bottom: none;
            }

            .side-nav-divider {
                display: none;
            }

            .side-menu {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                width: 100%;
            }

                .side-menu li {
                    flex: 1 1 auto;
                    text-align: center;
                }

                    .side-menu li a {
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        padding: 8px;
                        background: #fff;
                        border-left: 1px solid #ddd;
                    }

                    .side-menu li.active a {
                        border-color: var(--vac-navy);
                        background: var(--vac-navy);
                        color: white;
                    }

            .compact-hero h1, .compact-hero p {
                position: relative;
                z-index: 1;
                margin: 0;
                font-size: 1rem;
                color: #07183f;
                line-height: 1.6;
                background-color: #ffffff00 !important;
                border: solid #c4c6d1 0px !important;
                padding: 10px !important;
            }

            .vac-title {
                margin: 0 0 10px 0;
                font-size: 1.7rem;
                color: var(--vac-navy);
                font-weight: 900;
                text-transform: uppercase;
            }
        }

        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
            .dense-desc {
                font-size: 1.0rem;
                color: #666;
                padding: 0 10px;
                hyphens: auto;
                margin: 0;
                text-align: left;
                margin-bottom: 0px;
                line-height: 1.4;
            }
            .recent-arrow {
                width: 32px;
                height: 32px;
                font-size: 1rem;
            }
            .intro-block, .products-intro-block {
                background: #f4f6f9;
                border-left: 4px solid #dddddd1f;
                padding: 10px 10px;
                margin-bottom: 10px;
                border-radius: 0 4px 4px 0;
                display: flex;
                align-items: center;
                gap: 25px;
            }
            .compact-hero h1, .compact-hero p {
                position: relative;
                z-index: 1;
                margin: 0;
                font-size: 1rem;
                color: #07183f;
                line-height: 1.6;
                background-color: #ffffff00 !important;
                border: solid #c4c6d1 0px !important;
                padding: 10px !important;
            }

            .vac-title {
                margin: 0 0 10px 0;
                font-size: 1.7rem;
                color: var(--vac-navy);
                font-weight: 900;
                text-transform: uppercase;
            }
        }

        @media (max-width: 600px) {
            .product-grid {
                grid-template-columns: 1fr;
            }
        }
        /* ========================================================================== */
        /* VACMOTION CATALOG & PRODUCT GRID STYLES                                    */
        /* Applied to: Suction Cups, Filters, Valves, Connectors, etc.                */
        /* ========================================================================== */
        /* Grey out the inactive pagination buttons */
        .page-link.disabled {
            color: #ccc !important;
            cursor: not-allowed;
            pointer-events: none; /* Prevents clicking even if the link is there */
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }
        /* No Results Styling */
        .no-results-container {
            grid-column: 1 / -1; /* Spans full width if in a grid */
            text-align: center;
            padding: 60px 20px;
            background: #fcfcfc;
            border: 2px dashed #eee;
            border-radius: 8px;
        }

        .no-results-icon {
            width: 64px;
            height: 64px;
            background: #f1f3f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

            .no-results-icon svg {
                width: 32px;
                height: 32px;
                fill: var(--vac-navy);
            }

        .no-results-container h3 {
            color: var(--vac-navy);
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .no-results-container p {
            color: #666;
            max-width: 500px;
            margin: 0 auto 25px;
            line-height: 1.6;
        }

        .btn-reset-filters {
            background-color: var(--vac-olive);
            color: #fff;
            border: none;
            padding: 12px 30px;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.1s, background-color 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

            .btn-reset-filters:hover {
                background-color: var(--vac-navy);
                transform: translateY(-1px);
            }

            .btn-reset-filters:active {
                transform: translateY(0);
            }

        #lblResultCount {
            transition: opacity 0.2s ease-in-out;
        }

        .updating #lblResultCount {
            opacity: 0.5; /* Dim the count slightly while loading */
        }
        /* ========================================= */
        /* 5. TOAST POPUP STYLES                          */
        /* ========================================= */
        #toast-container {
            position: fixed;
            top: 10px;
            right: 20px;
            z-index: 9999;
        }
        /* Update your existing .toast-msg CSS */
        .toast-msg {
            background-color: #31343a;
            color: #fff;
            padding: 15px 15px;
            border-radius: 8px;
            margin-top: 5px;
            min-width: 250px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease-out;
        }
            /* Pause the removal if the user hovers over the toast */
            .toast-msg:hover {
                box-shadow: 0 8px 20px rgba(0,0,0,0.3);
                background-color: #5a5d6a;
                color: #e9e9e9;
            }

        @keyframes slideIn {
            from {
                transform: translateX(110%);
            }

            to {
                transform: translateX(0);
            }
        }


        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }
        /* ------------------ START GLOBAL STYLES FOR PRODUCTS ----------------*/
        /* View Toggle UI */
        .view-toggle {
            display: inline-flex;
            gap: 5px;
            margin-right: 15px;
            vertical-align: middle;
        }

        .view-btn {
            background: #f1f1f1;
            border: 1px solid #ccc;
            padding: 5px 8px;
            cursor: pointer;
            border-radius: 4px;
            color: #666;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
        }

            .view-btn svg {
                width: 18px;
                height: 18px;
                fill: currentColor;
            }

            .view-btn.active {
                background: var(--vac-navy);
                color: #fff;
                border-color: var(--vac-navy);
            }
        /* Layout Controls (Flexbox for alignment) */
        .grid-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            width: 100%;
        }

        .left-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .85em;
            color: #888;
            font-weight: 600;
        }

        .right-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .85em;
            color: #888;
            font-weight: 600;
            min-width: 185px;
        }

        .sort-dropdown, .per-page-dropdown {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 0.9rem;
            color: #717375;
            font-weight: 600;
        }
        /* --- FADING GRADIENT HEADERS --- */
        .group-header {
            font-size: 1.5rem;
            color: #ffffff;
            padding-left: 10px;
            font-weight: 800;
            margin: 0 0 5px 0;
            display: flex;
            gap: 15px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            background: linear-gradient(to right, #0d1740, #1d3181, #253d9d);
            flex-direction: row;
            align-items: center;
        }

            .group-header::after {
                content: "";
                flex-grow: 1;
                height: 2px;
                background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
            }
        /* --- TRANSITION CORE --- */
        .product-grid {
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0);
        }

            .product-grid.switching {
                opacity: 0;
                transform: translateY(15px);
            }
            /* --- 3-COLUMN GRID VIEW (Default) --- */
            .product-grid:not(.list-view) {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-bottom: 30px;
            }

                .product-grid:not(.list-view) .prod-card {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    text-decoration: none;
                    background: #fff;
                    border-radius: 4px;
                    border: 1px solid #ccc;
                    overflow: hidden;
                    transition: box-shadow 0.2s, transform 0.2s;
                    position: relative;
                }
                    .product-grid:not(.list-view) .prod-card:hover {
                        /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); */
                        border-color: #07183f8a;
                        transform: translateY(-4px);
                        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                    }

                .product-grid:not(.list-view) .card-img-wrap {
                    padding: 20px;
                    text-align: center;
                    border-bottom: 1px solid #f9f9f9;
                    position: relative;
                    padding-bottom: 2px;
                }

                    .product-grid:not(.list-view) .card-img-wrap img {
                        max-width: 100%;
                        height: 150px;
                        object-fit: contain;
                    }

                .product-grid:not(.list-view) .card-body {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                }

                .product-grid:not(.list-view) .card-sku {
                    margin: 0 0 10px 0;
                    font-size: 1.15rem;
                    color: var(--vac-navy);
                    font-weight: 800;
                    text-decoration: underline;
                }

                .product-grid:not(.list-view) .card-desc {
                    margin: 0 0 15px 0;
                    font-size: 0.9rem;
                    color: #555;
                    line-height: 1.4;
                }

                .product-grid:not(.list-view) .card-attrs {
                    list-style: none;
                    padding: 12px 0 0 0;
                    margin: auto 0 0 0;
                    border-top: 1px solid #eaeaea;
                    font-size: 0.85rem;
                    color: #76787d;
                }

                    .product-grid:not(.list-view) .card-attrs li {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 5px;
                    }

                .product-grid:not(.list-view) .attr-k {
                    font-weight: 600;
                    color: #888;
                }

                .product-grid:not(.list-view) .attr-v {
                    font-weight: 700;
                    color: #333;
                }

                .product-grid:not(.list-view) .card-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 15px 20px;
                    background: #fdfdfd;
                    border-top: 1px solid #eee;
                }
            /* --- DESKTOP LIST VIEW --- */
            .product-grid.list-view {
                display: flex;
                flex-direction: column;
                gap: 12px;
                border-top: 1px solid #eee;
            }

                .product-grid.list-view .prod-card {
                    display: flex;
                    flex-direction: row;
                    padding: 0;
                    width: 100%;
                    height: auto;
                    min-height: 140px;
                    background: #fff;
                    position: relative;
                    align-items: stretch;
                    text-decoration: none;
                    padding-bottom: 5px;
                    border-bottom: 1px solid #eee;
                }

                .product-grid.list-view .card-img-wrap {
                    width: 140px;
                    min-height: 140px;
                    flex-shrink: 0;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #f9f9f9;
                }

                    .product-grid.list-view .card-img-wrap img {
                        width: 150px;
                        height: 150px;
                        object-fit: contain;
                        padding: 8px;
                    }

                .product-grid.list-view .card-body {
                    flex: 1;
                    padding: 15px 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: left;
                    min-width: 0;
                }

                .product-grid.list-view .card-sku {
                    margin: 0;
                    font-size: 1.25rem;
                    color: var(--vac-navy);
                    text-decoration: underline;
                }

                .product-grid.list-view .card-desc {
                    margin: 6px 0 12px 0;
                    font-size: 1rem;
                    color: #444;
                    line-height: 1.5;
                    white-space: normal;
                    max-width: 95%;
                }

                .product-grid.list-view .card-attrs {
                    display: flex;
                    column-gap: 25px;
                    row-gap: 8px;
                    padding-top: 10px;
                    font-size: 1rem;
                    border-top: 1px solid #f5f5f5;
                    list-style: none;
                    margin: 0;
                    justify-content: space-between;
                    flex-direction: column;
                }

                    .product-grid.list-view .card-attrs li {
                        font-size: 0.95rem;
                        display: flex;
                        color: #333;
                    }

                .product-grid.list-view .attr-k {
                    color: #888;
                    font-weight: 600;
                    margin-right: 5px;
                }

                .product-grid.list-view .attr-v {
                    color: #111;
                    font-weight: 700;
                }

                .product-grid.list-view .card-footer {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-end;
                    padding: 0 25px;
                    width: 240px;
                    flex-shrink: 0;
                    gap: 12px;
                    padding-bottom: 15px;
                    border-left: 1px solid #eee;
                }
        /* Shared Buttons & Badges */
        .card-price {
            color: var(--vac-olive) !important;
            font-weight: 800;
            font-size: 1.5rem;
        }

        .product-grid.list-view .card-price {
            margin-left: 30px;
        }

        .favorite-btn {
            position: absolute;
            width: 38px;
            height: 38px;
            border: 1px solid #ddd;
            background: #ffffff57;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 8px;
            top: 8px;
            transition: all 0.2s;
            cursor: pointer;
            z-index: 10;
        }

            .favorite-btn svg {
                width: 18px;
                height: 18px;
                fill: #ccc;
                transition: fill 0.2s;
            }

            .favorite-btn:hover svg {
                /* fill: none; */
                color: #ccc;
            }

            .favorite-btn.active svg {
                fill: #ccc;
            }

        .btn-cart {
            width: auto;
            padding: 0 20px;
            height: 40px;
            font-size: 0.9rem;
            font-weight: 700;
            background: var(--vac-navy);
            color: #fff;
            border: none;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.2s;
        }

            .btn-cart:hover {
                background: var(--vac-olive);
                transform: translateY(-2px);
                color: #fff;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }

            .btn-cart svg {
                width: 16px;
                height: 16px;
                fill: #fff;
            }

        .stock-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #e8f5e9;
            color: #2e7d32;
            font-size: 0.65rem;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 3px;
            border: 1px solid #c8e6c9;
            z-index: 10;
            text-transform: uppercase;
        }

        .product-grid.list-view .stock-badge {
            top: 7px;
            left: 52px;
            right: auto;
        }
        /* --- PAGINATION --- */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            width: 100%;
        }

        .page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 12px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: var(--vac-navy);
            text-decoration: none;
            font-weight: 700;
            transition: all 0.2s;
            cursor: pointer;
            font-size: 0.9rem;
        }

            .page-link:hover {
                background: #67823a;
                border-color: #bbb;
                color: #ffffff !important;
            }

            .page-link.active {
                background: var(--vac-navy);
                color: #fff;
                border-color: var(--vac-navy);
            }

            .page-link.disabled {
                color: #ccc;
                border-color: #eee;
                background: #fafafa;
                cursor: not-allowed;
                pointer-events: none;
            }

        .page-dots {
            color: #888;
            font-weight: 700;
            padding: 0 5px;
        }
        /* --- RESPONSIVE ADJUSTMENTS --- */
        @media (max-width: 900px) {
            .product-grid:not(.list-view) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .grid-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .right-controls {
                display: none;
            }

            .product-grid.list-view .prod-card {
                display: block;
                height: auto;
                padding-bottom: 10px;
            }

            .product-grid.list-view .card-img-wrap {
                float: left;
                width: 110px;
                height: 110px;
                border-right: none;
            }

            .product-grid.list-view .card-body {
                padding: 15px 10px;
            }

            .product-grid.list-view .card-footer {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px 12px 20px;
                width: 100%;
                box-sizing: border-box;
                border-left: none;
            }

            .product-grid.list-view .card-price {
                margin-left: 0;
                font-size: 1.3rem;
            }

            .product-grid.list-view .stock-badge {
                left: 46px;
            }
        }

        @media (max-width: 600px) {
            .product-grid:not(.list-view) {
                grid-template-columns: 1fr;
            }

            .pagination {
                gap: 4px;
            }

            .page-link {
                min-width: 32px;
                height: 32px;
                padding: 0 8px;
                font-size: 0.85rem;
            }

                .page-link.hide-mobile {
                    display: none;
                }
        }
        /* ASP.NET Checkbox Reset for Filters */
        .filter-cb input[type="checkbox"] {
            margin-right: 5px;
            accent-color: var(--vac-navy);
            cursor: pointer;
        }

        .filter-cb label {
            cursor: pointer;
            color: #333;
        }

        .any-cb input[type="checkbox"] {
            margin-right: 5px;
            accent-color: var(--vac-navy);
            cursor: pointer;
        }