.dropdown.custom-dropdown .dropdown-menu .dropdown-item {
        font-size: 13px !important;
    }

    .custom-select-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100000;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* Force modal fully hidden when closed - overrides any other display/visibility so it never "half shows" */
    .custom-select-modal.custom-select-modal--closed {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        top: 0 !important;
        z-index: -1 !important;
    }

    .custom-select-modal.custom-select-modal--closed .custom-select-content {
        display: none !important;
        visibility: hidden !important;
    }

    .custom-select-content {
        background: #ffffff;
        width: 100%;
        max-width: 400px;
        max-height: 80vh;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        animation: fade-in 0.3s ease-out;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .custom-select-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #f1efef;
        background: #fff;
    }

    .custom-select-title {
        font-size: 18px;
        font-weight: 600;
        color: #0E121B;
    }

    .custom-select-close {
        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        color: #0E121B;
        padding: 0;
        cursor: pointer;
    }

    .custom-select-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;
        overflow-y: auto;
        background: #ffffff;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        position: relative;
        scrollbar-gutter: stable;
    }


    @media (min-width: 768px) {
        .display-desktop-none {
            display: none !important;
        }

        .dropdown-item {
            padding: 18px 16px;
            color: #0E121B !important;
            white-space: normal !important;
            position: relative !important;
            padding-left: 40px !important;
            border-bottom: unset !important;
        }

        /* Show the same "selected circle" on desktop dropdown menus */
        .filter-box .dropdown-menu .dropdown-item::before {
            border: 3px solid #fff;
            border-radius: 16px;
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            outline: 1px solid #BFBFBF;
            background: #fff;
        }

        .filter-box .dropdown-menu .dropdown-item.selected-option::before {
            outline: 1px solid #388BF7;
            background-color: #388BF7 !important;
        }
    }

    .dropdown.custom-dropdown .dropdown-toggle {}

    @media (max-width: 768px) {

        .custom-select-header {
            height: 78px;
        }

        .desktop-hero-section-text {
            overflow-y: scroll !important;
        }

        /* Full-screen selector modal on mobile */
        .custom-select-modal {
            background: #fff !important;
            align-items: stretch !important;
            justify-content: stretch !important;
        }

        .custom-select-content {
            max-width: 100% !important;
            width: 100% !important;
            height: 100vh !important;
            max-height: 100vh !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            animation: none !important;
        }

        .custom-select-list {
            border-radius: 0 !important;
        }

        .dropdown-menu.mobile-menu .dropdown-item,
        .custom-select-list .dropdown-item {
            padding-left: 35px !important;
            position: relative;
            font-weight: normal !important;
            border-bottom: 1px solid #dddddd;
            font-size: 15px !important;
        }

        .custom-select-list .dropdown-item.selected-option::before {
            outline: 1px solid #388BF7;
            background-color: #388BF7 !important;
        }

        .custom-select-list .dropdown-item::before {
            border: 3px solid #fff;
            border-radius: 16px;
            content: '';
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            outline: 1px solid #BFBFBF;
            background: #fff;
        }


        .custom-select-list .dropdown-item.selected-option::before {
            outline: 1px solid #388BF7;
            background-color: #388BF7;
        }

        /* We don't use Bootstrap dropdown menus on mobile (we use full-screen custom modals). */
        .dropdown-menu.mobile-menu {
            display: none !important;
        }

        .custom-select-modal .custom-select-list {
            max-height: 100% !important;
            height: 100% !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: thin !important;
            scrollbar-color: #888 #f1f1f1 !important;
        }

        /* Force scrollbar to always be visible on mobile - Webkit browsers */
        .custom-select-modal .custom-select-list::-webkit-scrollbar {
            width: 8px !important;
            -webkit-appearance: none !important;
            display: block !important;
            background: transparent !important;
        }

        .custom-select-modal .custom-select-list::-webkit-scrollbar-track {
            background: #f1f1f1 !important;
            border-radius: 10px !important;
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1) !important;
        }

        .custom-select-modal .custom-select-list::-webkit-scrollbar-thumb {
            background: #888 !important;
            border-radius: 10px !important;
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2) !important;
            min-height: 30px !important;
        }

        .custom-select-modal .custom-select-list::-webkit-scrollbar-thumb:hover {
            background: #555 !important;
        }

        /* Force scrollbar visibility on iOS by adding a wrapper trick */
        .custom-select-modal .custom-select-list {
            scrollbar-gutter: stable !important;
        }

        .filter-item:has(#variantInput) {
            grid-column: 1 / -1;
        }

        /* Show Close button on mobile and make both buttons 50% width */
        .display-mobile-only {
            display: block !important;
        }

        .mobile-buttons-container {
            width: 100% !important;
        }

        .mobile-buttons-container .clear-all-link,
        .mobile-buttons-container .clear-all-link {
            width: 50% !important;
            text-align: center !important;
            padding: 8px 0 !important;
        }

    }

    /* Base styles for all dropdown items - 15px font size */
    .dropdown-menu .dropdown-item,
    .custom-select-list .dropdown-item {
        font-size: 15px !important;
    }

    /* Base styles for clear-all-link */
    .clear-all-link {
        text-decoration: underline !important;
        cursor: pointer !important;
        padding: 10px 20px !important;
    }

    /* Hide Close button on desktop */
    @media (min-width: 769px) {
        .display-mobile-only {
            display: none !important;
        }

        .search-btn-container>div {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            flex-wrap: nowrap !important;
        }

        .clear-all-link {
            white-space: nowrap !important;
        }
    }

    #variantDropdown {}

    #sortList .dropdown-item {
        position: relative;
        padding-left: 44px;
    }

    /* Outer ring (unselected) */
    #sortList .dropdown-item::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #cbd5e1;
        background: transparent !important;
        /* ring ke andar white */
    }

    /* Inner dot (hidden by default) */
    #sortList .dropdown-item::after {
        content: "";
        position: absolute;
        left: 23px;
        /* (14 + 18/2) - (8/2) = 23 */
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #0d6efd !important;
        opacity: 0;
        /* default hide */
    }

    /* Selected: ring blue + show inner dot */
    #sortList .dropdown-item.sort-selected::before {
        border-color: #0d6efd;
    }

    #sortList .dropdown-item.sort-selected::after {
        opacity: 1;
    }

    /* Safety: Bootstrap active background off */
    #sortList .dropdown-item.active,
    #sortList .dropdown-item:active {
        background: transparent !important;
        color: inherit !important;
    }


    /* Hide the "Close" button everywhere by default (we enable it only on for-sale page mobile). */
    .pc-mobile-search-close {
        display: none !important;
    }