.di-pointer-none > a {
  pointer-events: none !important;
}
/* Mega Menu Customization */
@media screen and (min-width: 1200px) {
    .main-header-menu>li>.menu-link>.astra-mm-icon-label img{
        display: none !important;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.skincare-items .astra-megamenu>.menu-item.sg24-menu-column-large {
        flex-basis: 450px;
        flex-grow: 0;
        min-width: 50%;
    }
    .pill-items .astra-nested-sub-menu {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
    .pill-items .astra-nested-sub-menu li a.menu-link {
        background-color: #f4f7fb;
        padding: 4px 20px !important;
        border-radius: 99px;
        white-space: nowrap;
        font-size: 0.85rem;
        text-align: center !important;
    }
    .pill-items .astra-nested-sub-menu li a:hover {
        background-color: #f9f3f6;
    }
    .pill-items .astra-nested-sub-menu li.view-all a {
        font-weight: 600;
    }
    .pill-items .astra-nested-sub-menu li {
        flex: 0 1 auto;
        width: auto !important;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.skincare-items .astra-megamenu>.menu-item>ul.sub-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .pill-items>ul.sub-menu>.menu-item>.menu-link {
        margin-bottom: 10px !important;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .menu-item.menu-item-heading>a>.menu-text {
        color: #6a445b;
        font-size: 1.2rem;
        text-transform: uppercase;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .menu-item.menu-item-heading>a {
        margin-bottom: 10px !important;
    }

    .ast-desktop .ast-mega-menu-enabled .sub-menu .menu-item>.menu-link {
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 2px 5px;
    }

    .astra-mm-icon-label {
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    ul.astra-megamenu.sub-menu {
        cursor: default;
    }
    .astra-full-megamenu-wrapper {
        padding: 20px 30px;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu .menu-skin-type .astra-nested-sub-menu {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 7px;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu .menu-skin-type .astra-nested-sub-menu>li {
        flex: 0 1 auto;
        width: auto !important;
        max-width: 33.33%;
    }
    .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu .menu-skin-type .astra-nested-sub-menu>li>a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.25px;
    }

    .makeup-items .sub-menu>.menu-item.menu-item-heading>.menu-link,
    .sun-protection-items .sub-menu>.menu-item.menu-item-heading>.menu-link,
    .washing-items .sub-menu>.menu-item.menu-item-heading>.menu-link {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .makeup-items .astra-megamenu.sub-menu>.menu-item>.menu-link.ast-hide-menu-item,
    .sun-protection-items .astra-megamenu.sub-menu>.menu-item>.menu-link.ast-hide-menu-item,
    .washing-items .astra-megamenu.sub-menu>.menu-item>.menu-link.ast-hide-menu-item {
        display: none;
    }
    .makeup-items .astra-megamenu.sub-menu>.menu-item>.sub-menu,
    .makeup-items .astra-megamenu.sub-menu>.menu-item>.menu-link>.menu-text,
    .sun-protection-items .astra-megamenu.sub-menu>.menu-item>.sub-menu,
    .sun-protection-items .astra-megamenu.sub-menu>.menu-item>.menu-link>.menu-text,
    .washing-items .astra-megamenu.sub-menu>.menu-item>.sub-menu,
    .washing-items .astra-megamenu.sub-menu>.menu-item>.menu-link>.menu-text {
        padding-left: 10px;

    }
    .makeup-items .astra-megamenu.sub-menu .menu-item>.menu-link>.astra-mm-icon-label img,
    .sun-protection-items .astra-megamenu.sub-menu .menu-item>.menu-link>.astra-mm-icon-label img,
    .washing-items .astra-megamenu.sub-menu .menu-item>.menu-link>.astra-mm-icon-label img {
        width: auto !important;
    }
    .sun-protection-items .astra-mm-icon-label>img {
        height: 180px !important;
    }

    .washing-items ul.astra-megamenu.sub-menu.astra-mega-menu-width-full,
    .sun-protection-items ul.astra-megamenu.sub-menu.astra-mega-menu-width-full {
        max-width: 1150px;
    }
}

/* Container for the entire shortcode */
.brand-index-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Container updates for the scrollbar */
.brand-index-bar {
    display: flex;
    justify-content: flex-start;
    gap: 0.25rem;
    margin-bottom: 0;
    flex-wrap: nowrap; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    
    /* Add padding so the scrollbar doesn't touch the buttons */
    padding-bottom: 8px; 
    
}
/* Custom Tiny Pink Scrollbar (Chrome, Safari, Edge) */
.brand-index-bar::-webkit-scrollbar {
    height: 4px; /* Makes it tiny (standard is usually 8px-12px) */
}

/* On Desktop, we still want to wrap and hide scrollbar logic */
@media (min-width: 768px) {
    .brand-index-bar {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
        padding-bottom: 0;
    }
}
/* Individual Letter Buttons */
.brand-index-bar a {
    width: 2rem;
    height: 2rem;
    /* Prevent buttons from shrinking in the scroll row */
    flex-shrink: 0; 
    
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease-in-out;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #71043D !important;
    text-decoration: none;
    text-transform: uppercase;
}

/* Active/Hover State */
.brand-index-bar a:hover,
.brand-index-bar a.active {
    background-color: #71043D;
    color: #ffffff;
    border-color: #71043D;
}

/* Disabled State (Letters without the "active" class) */
.brand-index-bar a:not(.active):not(.all-brands-link) {
    background-color: #f9fafb!important; /* bg-gray-50 */
    color: #d1d5db!important; /* text-gray-300 */
    border-color: #f3f4f6!important; /* border-gray-100 */
    cursor: not-allowed;
    pointer-events: none;
}

/* Specialized styling for "All Brands" link */
.brand-index-bar a.all-brands-link {
    width: auto;
    padding: 0 1rem;
    text-transform: none; /* Keeps it as "All Brands" instead of uppercase if preferred */
}
.recommended-brands-title {
     text-align: center;
    color: #111827;
    font-weight: 600;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    margin-bottom: 1.25rem;;
}

/* sm:text-xl (1.25rem = 20px) */
@media (min-width: 640px) {
    .recommended-brands-title {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
}