html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    margin: 0;
    padding: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ***custom****** **/
.main-catalog-bg {
    background: var(--storefront-canvas-bg) !important;
}

/* 2. Public Storefront Navigation Top Bar Header Selector */
.public-site-header {
    background: var(--storefront-header-gradient) !important;
    transition: background 0.3s ease;
}

/* 3. Key Platform Services Module Dashboard Display Card Target Selector */
.platform-module-card {
    background: var(--storefront-platform-card-bg) !important;
    transition: background 0.25s ease;
}

/* 4. Key Public E-commerce Item Checkout Card Target Selector */
.product-catalog-card {
    background-color: var(--storefront-product-card-bg) !important;
    transition: background-color 0.25s ease;
}

/* 5. Key Public E-commerce Typography System Selectors */
.platform-h1-card {
    color: var(--storefront-H1FontColor) !important;
    font-family: var(--storefront-H1FontType) !important;
    font-size: var(--storefront-H1FontSize) !important;
    transition: color 0.25s ease;
}

.platform-h2-card {
    color: var(--storefront-H2FontColor) !important;
    font-family: var(--storefront-H2FontType) !important;
    font-size: var(--storefront-H2FontSize) !important;
    transition: color 0.25s ease;
}

.platform-h3-card {
    color: var(--storefront-H3FontColor) !important;
    font-family: var(--storefront-H3FontType) !important;
    font-size: var(--storefront-H3FontSize) !important;
    transition: color 0.25s ease;
}

.platform-p1-card {
    color: var(--storefront-P1FontColor) !important;
    font-family: var(--storefront-P1FontType) !important;
    font-size: var(--storefront-P1FontSize) !important;
    transition: color 0.25s ease;
}

.platform-p2-card {
    color: var(--storefront-P2FontColor) !important;
    font-family: var(--storefront-P2FontType) !important;
    font-size: var(--storefront-P2FontSize) !important;
    transition: color 0.25s ease;
}



/* Container framework that controls internal arrow visibility */
.custom-slider-container {
    position: relative;
}

/* Redesigned Glass Action Rings */
.custom-slider-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    /* Initially invisible */
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* Slightly shift the hover animation on focus click actions */
    .custom-slider-arrow:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

/* Make arrows fade into view naturally when hovering over the card slider container block */
.custom-slider-container:hover .custom-slider-arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1);

}

/* Core configuration for the container wrapper layout */
.custom-surface-slider {
    position: relative;
}

/* Master click zone architecture */
.slider-click-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%; /* Captures 35% of the surface area on each side */
    z-index: 15; /* Sits completely on top of image tags */
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}

/* Align left area settings */
.zone-left {
    left: 0;
    justify-content: flex-start;
}

    .zone-left:hover {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    }

/* Align right area settings */
.zone-right {
    right: 0;
    justify-content: flex-end;
}

    .zone-right:hover {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    }

/* Redesigned Floating Chevron Cue Badges */
.zone-chevron-indicator {
    width: 36px;
    height: 36px;
    margin: 0 16px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kept invisible until user interacts with the column track area */
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal the specific chevron tracker instantly on hover */
.slider-click-zone:hover .zone-chevron-indicator {
    opacity: 1;
    transform: scale(1);
}

/* ========================================================================= */
/* PREMIUM HIGH-CONTRAST SIDEBAR CHECKBOXES (DARK THEME COMPATIBLE)         */
/* ========================================================================= */

/* 1. Make the un-checked checkbox border bright and clearly visible */
.sidebar-container .form-check-input {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* 2. Change the background and border to Golden Yellow when checked */
    .sidebar-container .form-check-input:checked {
        background-color: #eab308 !important; /* Premium Gold */
        border-color: #eab308 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231e293b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10l3 3L15 6'/%3e%3c/svg%3e") !important; /* Sharp dark checkmark */
    }

    /* 3. Add a premium Sky Blue focus glow when navigating with tab/clicks */
    .sidebar-container .form-check-input:focus {
        border-color: #38bdf8 !important; /* Sky Blue */
        box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important;
    }

/* 4. Soften the label text color so it is highly legible */
.sidebar-container .form-check-label {
    color: #cbd5e1 !important; /* Light Slate Gray text */
    cursor: pointer;
    font-size: 13px;
    transition: color 0.2s ease;
}

/* 5. Highlight the text label when hovering over a checkbox option row */
.sidebar-container .form-check:hover .form-check-label {
    color: #ffffff !important; /* Turns bright white on hover */
}

/* Custom row presentation adjustments for the gold-accented sublinks */
.hover-lighten-yellow {
    transition: all 0.2s ease;
    width: 100%;
}

    .hover-lighten-yellow:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important; /* Turns white on hover for peak contrast */
        text-shadow: 0 0 4px rgba(234, 179, 8, 0.5); /* Soft gold text glow */
    }

/* Container styling polish */
.category-filter-card {
    background-color: rgba(33, 37, 41, 0.25) !important; /* Matches bg-dark bg-opacity-25 */
}

/* Custom Checkbox Styles for Dark Backgrounds */
.category-list .form-check-input {
    background-color: transparent !important;
    border: 1px solid #cbd5e1 !important; /* Highly visible light-gray border */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    /* Checkbox Hover Effect */
    .category-list .form-check-input:hover {
        border-color: #eab308 !important; /* Highlights yellow on hover */
    }

    /* Checked State - Matches your Apply button yellow */
    .category-list .form-check-input:checked {
        background-color: #eab308 !important;
        border-color: #eab308 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        /* Note: The stroke='%23212529' above makes the checkmark icon dark charcoal for contrast against the yellow background */
    }

    /* Checkbox Focus/Outline State */
    .category-list .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(234, 179, 8, 0.25) !important;
        border-color: #eab308 !important;
    }

/* Label Typography */
.category-list .form-check-label {
    color: rgba(255, 255, 255, 0.65); /* Accessible, readable white text */
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .category-list .form-check-label:hover {
        color: #ffffff; /* Brightens up when selecting */
    }

/*new*/

/*new */
/* Your existing CSS overrides mixed with scroll protections */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden; /* Blocks unwanted horizontal side scrolling loops */
}

header {
    background-color: #da9e51;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1030; /* Boosted to safely sit on top of standard Bootstrap/Tailwind overlays */
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

nav a {
    text-decoration: none;
    color: #555;
    margin-left: 20px;
    font-weight: 500;
    transition: color 0.3s;
}

    nav a:hover {
        color: #3498db;
    }

.cta-btn {
    background-color: #3498db;
    color: white;
    padding: 8px 18px;
    border-radius: 4px;
}

    .cta-btn:hover {
        background-color: #2980b9;
        color: white;
    }

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 40px;
    background: var(--storefront-canvas-bg) !important;
}

.hero-content {
    max-width: 50%;
}

    .hero-content h1 {
        font-size: 42px;
        color: #2c3e50;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 18px;
        color: #7f8c8d;
        margin-bottom: 30px;
    }



.hero-image-mock {
    width: 45%;
    height: 300px;
    background-color: #bdc3c7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8c8d;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.features {
    padding: 60px 40px;
    text-align: center;
}

    .features h2 {
        font-size: 32px;
        color: #2c3e50;
        margin-bottom: 40px;
    }

.grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    background: linear-gradient( 110deg, #ffffff 0%, #696e74 100%);
    padding: 30px;
    border-radius: 8px;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

    .card:hover {
        transform: translateY(-5px);
    }

.card-icon {
    width: 50px;
    height: 50px;
    background-color: #e8f4fd;
    border-radius: 50px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3498db;
    font-weight: bold;
}

.card h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

footer {
    background-color: #4a4a4a;
    color: #a0aab2;
    padding: 40px;
    text-align: center;
    font-size: 14px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    background-color: #f4f6f9;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 70px;
    background-color: #145085f7;
    overflow-x: hidden;
    transition: width 0.3s ease;
    z-index: 1000;
    padding-top: 20px;
}

    .sidebar:hover {
        width: 240px;
    }

    .sidebar a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #b3b3b3;
        padding: 15px 25px;
        white-space: nowrap;
        transition: background 0.2s, color 0.2s;
    }

        .sidebar a:hover {
            background-color: #162447;
            color: #ffffff;
        }

        .sidebar a .icon {
            min-width: 30px;
            font-weight: bold;
            font-size: 18px;
        }


        .sidebar a .text {
            margin-left: 15px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }


    .sidebar:hover a .text {
        opacity: 1;
    }

.main-content {
    margin-left: 70px;
    padding: 40px;
    width: 100%;
    transition: margin-left 0.3s ease;
    margin: 0;
    padding: 0;
}

.sidebar:hover ~ .main-content {
    margin-left: 240px;
}

.main-content h1 {
    color: #1a1a2e;
    margin-bottom: 15px;
    margin: 0;
    padding: 0;
}

#productsContainer {
    scroll-margin-top: 80px; /* Match this to your header's height */
}

.main-content p {
    color: #f4f6f9 line-height: 1.6;
    margin: 0;
    padding: 0;
}

.menu-container {
    display: flex;
    gap: 15px;
    align-items: center;
    font-family: sans-serif;
}

.menu-item {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.sub-list-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    min-width: 220px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
}

.dropdown-wrapper:hover .sub-list-container,
.dropdown-wrapper.active .sub-list-container {
    display: block;
}

.filter-header {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    font-weight: bold;
    margin: 8px 0 4px 0;
}

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

    .sub-list li {
        padding: 4px 0;
    }

    .sub-list a {
        text-decoration: none;
        color: #333;
        display: block;
        font-size: 14px;
    }

        .sub-list a:hover {
            color: #007bff;
        }

.cart-sticky {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.sticky-cart-badge {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    font-size: 24px;
    z-index: 1000;
}

    .sticky-cart-badge .badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background-color: red;
        color: white;
        border-radius: 50%;
        padding: 5px 10px;
        font-size: 14px;
    }

.image-box {
    position: relative;
    width: fit-content;
    height: fit-content;
    overflow: hidden;
    background-color: #bdc3c7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8c8d;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
}

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.filter-section {
    margin-top: 20px;
    padding-top: 10px;
}

.filter-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
}

    .filter-item input {
        margin-right: 10px;
    }

.btn-header-modern {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 8px;
    color: #ffffff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.btn-signin {
    background: linear-gradient(110deg, #ffffff 0%, #f4f6f9 100%);
    color: #212529 !important; /* Rich dark text for optimal readability on light canvas */
    border: 1px solid #dcdfe4 !important; /* Clean, crisp border defining the button shape */
}

    .btn-signin:hover {
        background: linear-gradient(110deg, #e9ecef 0%, #dee2e6 100%);
        color: #111418 !important; /* Subtle text darkening for interactive feedback */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Soft, realistic depth shadow */
        border-color: #ced4da !important; /* Sharpens borders on hover */
        transform: translateY(-1px);
    }

    .btn-signin:active {
        background: #dee2e6;
        border-color: #bcc1c7 !important;
        transform: translateY(1px);
    }


.btn-logout {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%); /* Sleek premium dark gradient */
}

    .btn-logout:hover {
        background: linear-gradient(135deg, #1c1f23 0%, #2b3035 100%);
        box-shadow: 0 4px 12px rgba(33, 37, 41, 0.2) !important;
        transform: translateY(-1px);
    }

    .btn-logout:active {
        transform: translateY(1px);
        background: #1c1f23;
    }

.btn-header-modern:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) !important;
}


/* Desktop Behavior: Control the explicit sizing width of the dropdown menu */
@@media (min-width: 992px) {
    .hover-dropdown .dropdown-menu {
        min-width: 400px !important;
        max-height: 600px !important;
        overflow-y: auto !important;
    }

    .hover-dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hover-dropdown .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
    }
}

/* Mobile Fine-Tuning: Stretch container to screen boundaries cleanly and fix text truncation */
@@media (max-width: 991.98px) {
    .hover-dropdown {
        position: static !important;
    }

        .hover-dropdown .dropdown-menu {
            width: 100vw !important;
            max-width: 100vw !important;
            left: 0 !important;
            right: 0 !important;
            margin: 0 !important;
            border-radius: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
            /* Forces item layout text to wrap instead of cutting off on small mobile devices */
            .hover-dropdown .dropdown-menu a.dropdown-item {
                white-space: normal !important;
                flex-wrap: wrap !important;
                word-break: break-word !important;
            }
}

/* target hover and focus state for parent list menu items */
.dropdown-menu-item-highlight {
    transition: background-color 0.15s ease-in-out;
}

    .dropdown-menu-item-highlight:hover,
    .dropdown-menu-item-highlight:focus-within {
        background-color: rgba(241, 140, 13, 0.1) !important; /* Soft warm light-amber background glow */
        outline: none;
    }

        /* Change text/icon colors to your accent orange dynamically when active */
        .dropdown-menu-item-highlight:hover a,
        .dropdown-menu-item-highlight:focus-within a {
            color: #d67500 !important; /* Vibrant high-vibrancy deep theme orange */
            text-decoration: none !important;
        }


/* Target search input focus state */
.custom-menu-search-input:focus {
    background-color: #ffffff !important;
    border-color: #f18c0d !important;
    color: #000000 !important; /* Maximum brightness/contrast text against a white background */
    box-shadow: 0 0 0 0.25rem rgba(241, 140, 13, 0.25) !important;
    outline: 0;
}

/* Custom styling context for text check triggers on hover/focus */
.theme-form-check-label:hover {
    color: #f18c0d !important;
    cursor: pointer;
}

/* NEW: High-vibrancy focus and hover styles for the search criterion links */
.search-action-btn:focus,
.search-action-btn:hover {
    color: #d67500 !important; /* Vibrant deep theme orange */
    background-color: rgba(241, 140, 13, 0.1) !important; /* Soft warm background glow */
    font-weight: bold !important;
    outline: none;
    box-shadow: none;
}

/* NEW: High-vibrancy focus and hover styles for the clear text link button */
.search-clear-btn:focus,
.search-clear-btn:hover {
    color: #dc3545 !important; /* Vivid red for distinct warning/clear state feedback */
    font-weight: bold !important;
    text-decoration: underline !important;
    outline: none;
    box-shadow: none;
}

/* target hover and focus state for parent list menu items */
.dropdown-menu-item-highlight {
    transition: background-color 0.15s ease-in-out;
}

    .dropdown-menu-item-highlight:hover,
    .dropdown-menu-item-highlight:focus-within {
        background-color: rgba(241, 140, 13, 0.1) !important; /* Soft warm light-amber background glow */
        outline: none;
    }

        /* Change text/icon colors to your accent orange dynamically when active */
        .dropdown-menu-item-highlight:hover > a,
        .dropdown-menu-item-highlight:focus-within > a {
            color: #d67500 !important; /* Vibrant high-vibrancy deep theme orange */
            text-decoration: none !important;
        }

    /* Restricts parent highlight background tracking from washing over expanded submenu spaces */
    .dropdown-menu-item-highlight #adminSubMenuBlock {
        background-color: transparent !important;
    }

/* Default appearance: Matches the clean dark-slate color of the Product elements */
.submenu-product-match-link {
    color: #475569 !important;
    transition: all 0.15s ease-in-out;
}

    /* Active appearance: High-vibrancy focus and hover states */
    .submenu-product-match-link:focus,
    .submenu-product-match-link:hover {
        color: #d67500 !important; /* Vibrant high-vibrancy deep theme orange */
        background-color: rgba(241, 140, 13, 0.1) !important; /* Soft warm light-amber background glow */
        outline: none;
        box-shadow: none;
        text-decoration: none !important;
    }

    /* --- VIEWPORT ENGINE ADJUSTMENTS --- */
    .hero-fit-container {
        width: 100%;
        box-sizing: border-box;
        display: block;
        padding: 0 15px; /* Adds defensive buffer padding on mobile screens */
    }

    /* Desktop and Sidebar Viewport Layout Matrix rules */
    @@media (min-width: 992px) {
        .hero-fit-container {
            padding: 0;
        }
    }

    /* Mobile-First Fixes for the Carousel Image Box height blowout */
    @@media (max-width: 767.98px) {
        .hero {
            gap: 2rem !important;
        }

        .image-box {
            /* 📱 Forces an aspect ratio on mobile screens to keep the box tight */
            min-height: 240px !important;
            max-height: 320px !important;
            height: auto !important;
        }
    }

    /* 🚀 PERFORMANCE ACCELERATION CSS */
    .slide {
        content-visibility: auto;
        contain-intrinsic-size: 100% 350px;
    }

    /* 🖼️ FLUID RESPONSIVE IMAGE FILL RULE */
    .responsive-fit-img {
        object-fit: cover !important;
        object-position: center !important; /* Keeps the middle of the image focused */
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        /* Isolated layout scopes for category selectors */
        .layout-category-grid .category-clickable-card {
            background: #ffffff;
            border-radius: 12px;
            border-left: 5px solid #cbd5e1;
            transition: all 0.25s ease-in-out;
            cursor: pointer;
            user-select: none;
        }
        /* Card Setup Rules */
        /* --- Professional Button Mutations --- */
        .ecommerce-btn-clear:hover {
            background-color: #fafafa !important;
            border-color: #cbd5e1 !important;
            color: #b06000 !important;
        }

        .ecommerce-btn-clear:active {
            background-color: #f1f5f9 !important;
            transform: scale(0.98);
        }

        .ecommerce-btn-apply:hover {
            background-color: #b06000 !important;
            border-color: #b06000 !important;
            box-shadow: 0 4px 12px rgba(214, 117, 0, 0.2) !important;
        }

        .ecommerce-btn-apply:active {
            background-color: #914f00 !important;
            transform: scale(0.98);
        }
        /* --- Category Card States --- */
        .ecommerce-prof-card:hover {
            border-color: #cbd5e1 !important;
            background-color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }

        .ecommerce-prof-checkbox:checked + .ecommerce-prof-text {
            color: #f18c0d !important;
            font-weight: 600 !important;
        }

        .ecommerce-prof-card:has(.ecommerce-prof-checkbox:checked) {
            border-color: #f18c0d !important;
            background-color: #fffaf4 !important;
        }

        .ecommerce-prof-checkbox:focus {
            box-shadow: 0 0 0 4px rgba(241, 140, 13, 0.15) !important;
            border-color: #f18c0d !important;
        }

        .ecommerce-prof-checkbox:checked {
            background-color: #f18c0d !important;
            border-color: #f18c0d !important;
        }
        /* --- Text Search Element Focus & Interaction Parameters --- */
        .custom-menu-search-input:focus {
            border-color: #f18c0d !important;
            box-shadow: 0 0 0 3px rgba(241, 140, 13, 0.15) !important;
            outline: 0;
        }

        .search-action-btn {
            border-radius: 6px !important;
        }

            .search-action-btn:hover {
                background-color: #f8fafc !important;
                color: #f18c0d !important;
            }

            .search-action-btn:active {
                background-color: #f1f5f9 !important;
            }

        .search-clear-btn:hover {
            color: #ef4444 !important;
            background-color: #fef2f2 !important;
            border-radius: 6px !important;
        }
        /* --- Core Control Button Mutation Mapping Rules --- */
        .ecommerce-btn-clear:hover {
            background-color: #fafafa !important;
            border-color: #cbd5e1 !important;
            color: #b06000 !important;
        }

        .ecommerce-btn-clear:active {
            background-color: #f1f5f9 !important;
            transform: scale(0.98);
        }

        .ecommerce-btn-apply:hover {
            background-color: #b06000 !important;
            border-color: #b06000 !important;
            box-shadow: 0 4px 12px rgba(214, 117, 0, 0.2) !important;
        }

        .ecommerce-btn-apply:active {
            background-color: #914f00 !important;
            transform: scale(0.98);
        }
        /* --- Category Card Layout Matrix Interactive States --- */
        .ecommerce-prof-card:hover {
            border-color: #cbd5e1 !important;
            background-color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }

        .ecommerce-prof-checkbox:checked + .ecommerce-prof-text {
            color: #f18c0d !important;
            font-weight: 600 !important;
        }

        .ecommerce-prof-card:has(.ecommerce-prof-checkbox:checked) {
            border-color: #f18c0d !important;
            background-color: #fffaf4 !important;
        }

        .ecommerce-prof-checkbox:focus {
            box-shadow: 0 0 0 4px rgba(241, 140, 13, 0.15) !important;
            border-color: #f18c0d !important;
        }

        .ecommerce-prof-checkbox:checked {
            background-color: #f18c0d !important;
            border-color: #f18c0d !important;
        }
    }
/* new 2*/
/* --- VIEWPORT ENGINE ADJUSTMENTS --- */
.hero-fit-container {
    width: 100%;
    box-sizing: border-box;
    display: block;
    padding: 0 15px; /* Adds defensive buffer padding on mobile screens */
}

/* Desktop and Sidebar Viewport Layout Matrix rules */
@@media (min-width: 992px) {
    .hero-fit-container {
        padding: 0;
    }
}

/* Mobile-First Fixes for the Carousel Image Box height blowout */
@@media (max-width: 767.98px) {
    .hero {
        gap: 2rem !important;
    }

    .image-box {
        /* 📱 Forces an aspect ratio on mobile screens to keep the box tight */
        min-height: 240px !important;
        max-height: 320px !important;
        height: auto !important;
    }
}

/* 🚀 PERFORMANCE ACCELERATION CSS */
.slide {
    content-visibility: auto;
    contain-intrinsic-size: 100% 350px;
}

/* 🖼️ FLUID RESPONSIVE IMAGE FILL RULE */
.responsive-fit-img {
    object-fit: cover !important;
    object-position: center !important; /* Keeps the middle of the image focused */
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    /* Isolated layout scopes for category selectors */
    .layout-category-grid .category-clickable-card {
        background: #ffffff;
        border-radius: 12px;
        border-left: 5px solid #cbd5e1;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
        user-select: none;
    }
    /* Card Setup Rules */
    /* --- Professional Button Mutations --- */
    .ecommerce-btn-clear:hover {
        background-color: #fafafa !important;
        border-color: #cbd5e1 !important;
        color: #b06000 !important;
    }

    .ecommerce-btn-clear:active {
        background-color: #f1f5f9 !important;
        transform: scale(0.98);
    }

    .ecommerce-btn-apply:hover {
        background-color: #b06000 !important;
        border-color: #b06000 !important;
        box-shadow: 0 4px 12px rgba(214, 117, 0, 0.2) !important;
    }

    .ecommerce-btn-apply:active {
        background-color: #914f00 !important;
        transform: scale(0.98);
    }
    /* --- Category Card States --- */
    .ecommerce-prof-card:hover {
        border-color: #cbd5e1 !important;
        background-color: #f8fafc !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .ecommerce-prof-checkbox:checked + .ecommerce-prof-text {
        color: #f18c0d !important;
        font-weight: 600 !important;
    }

    .ecommerce-prof-card:has(.ecommerce-prof-checkbox:checked) {
        border-color: #f18c0d !important;
        background-color: #fffaf4 !important;
    }

    .ecommerce-prof-checkbox:focus {
        box-shadow: 0 0 0 4px rgba(241, 140, 13, 0.15) !important;
        border-color: #f18c0d !important;
    }

    .ecommerce-prof-checkbox:checked {
        background-color: #f18c0d !important;
        border-color: #f18c0d !important;
    }
    /* --- Text Search Element Focus & Interaction Parameters --- */
    .custom-menu-search-input:focus {
        border-color: #f18c0d !important;
        box-shadow: 0 0 0 3px rgba(241, 140, 13, 0.15) !important;
        outline: 0;
    }

    .search-action-btn {
        border-radius: 6px !important;
    }

        .search-action-btn:hover {
            background-color: #f8fafc !important;
            color: #f18c0d !important;
        }

        .search-action-btn:active {
            background-color: #f1f5f9 !important;
        }

    .search-clear-btn:hover {
        color: #ef4444 !important;
        background-color: #fef2f2 !important;
        border-radius: 6px !important;
    }
    /* --- Core Control Button Mutation Mapping Rules --- */
    .ecommerce-btn-clear:hover {
        background-color: #fafafa !important;
        border-color: #cbd5e1 !important;
        color: #b06000 !important;
    }

    .ecommerce-btn-clear:active {
        background-color: #f1f5f9 !important;
        transform: scale(0.98);
    }

    .ecommerce-btn-apply:hover {
        background-color: #b06000 !important;
        border-color: #b06000 !important;
        box-shadow: 0 4px 12px rgba(214, 117, 0, 0.2) !important;
    }

    .ecommerce-btn-apply:active {
        background-color: #914f00 !important;
        transform: scale(0.98);
    }
    /* --- Category Card Layout Matrix Interactive States --- */
    .ecommerce-prof-card:hover {
        border-color: #cbd5e1 !important;
        background-color: #f8fafc !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .ecommerce-prof-checkbox:checked + .ecommerce-prof-text {
        color: #f18c0d !important;
        font-weight: 600 !important;
    }

    .ecommerce-prof-card:has(.ecommerce-prof-checkbox:checked) {
        border-color: #f18c0d !important;
        background-color: #fffaf4 !important;
    }

    .ecommerce-prof-checkbox:focus {
        box-shadow: 0 0 0 4px rgba(241, 140, 13, 0.15) !important;
        border-color: #f18c0d !important;
    }

    .ecommerce-prof-checkbox:checked {
        background-color: #f18c0d !important;
        border-color: #f18c0d !important;
    }
    /*new3*/
    /* Forces images to fill the container on mobile instead of overflowing */
    /* Base desktop behavior */
    /* Eradicates layout background artifacts across all screen widths */
    /* Modifies only the visual centering mechanics of the carousel slide assets */
    /* Eradicates layout background artifacts and guarantees center scaling across all sliders */
    /* Caps long descriptions to 3 lines max so text cannot push buttons out of view */
    .text-truncate-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 4.5em; /* Holds a uniform text space box alignment */
    }
    /* Scales down your 2400x2400 source data to fit into the card box without overflowing */
    .image-box .responsive-fit-img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important; /* Shows your entire square graphic without any pixel clipping */
        object-position: center center !important;
    }
    /* On mobile layouts, prevent layout compression from shifting elements out of line */
    @media (max-width: 576px) {
        .image-box {
            max-width: 260px !important; /* Slightly restricts sizing on narrow screen profiles */
        }
    }
    /* Custom highlights when hovering item selectors inside grid containers */
    .ecommerce-prof-card:hover {
        background-color: #f8fafc !important;
        border-color: rgba(241, 140, 13, 0.4) !important;
        transform: translateY(-1px);
    }
    /* Switches background fill metrics once an option is checked active */
    .position-relative:has(.adaptive-theme-radio:checked) .ecommerce-prof-card {
        background-color: rgba(241, 140, 13, 0.08) !important; /* Soft orange tint */
        border-color: #f18c0d !important; /* Primary border color match */
    }
    /* Bolsters text typography weights for selected elements */
    .position-relative:has(.adaptive-theme-radio:checked) .ecommerce-prof-text {
        color: #0f172a !important;
        font-weight: 600 !important;
    }
}