body {
}
.catWrap {
    width: 100%;
    clear: both;
}

.catHeader {
    width: 100%;
    display: flex;
    margin: .8rem 0 1rem;
}

.catTitle {
    margin-left: 4%;
    font: 600 1rem Arial;
    color: #111;
}
#categoryPillsx {
    display: contents;
    margin-left : 20px;
}
    #categoryPillsx a {
        margin-right: 16px;
    }
/* ===== row scroll container (works on both) ===== */
.catRow--desktop {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .catRow--desktop::-webkit-scrollbar {
        display: none;
    }

/* dynamic container must grow with its content */
#categoryPills {
    display: inline-flex;
    align-items: center;
    gap: 1%;
    flex: 0 0 auto;
    width: max-content;
}

    /* ===== desktop pills ===== */
    .catPillactive,
    #categoryPills .catPill {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        height: 44px;
        padding: .55rem 1.5%;
        border-radius: 999rem;
        flex: 0 0 auto; /* ✅ critical for scroll */
        white-space: nowrap;
    }

.catPillactive {
    margin-left: 4%;
    border: none;
    background: linear-gradient(135deg,#ff4d4d,#cc0000);
    color: #fff;
    padding: .55rem 1.2%;
}

    .catPillactive .catTxt {
        color: #fff;
    }

#categoryPills .catPill {
    border: .08rem solid rgba(0,0,0,.10);
    background: #fff;
}

/* icon */
.catIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

    .catIcon img {
        width: 70%;
        height: 70%;
        object-fit: contain;
    }

.catName {
    font-weight: 600;
    font-size: .95rem;
}

.catCount {
    font-size: .85rem;
    color: rgba(0,0,0,.55);
}

/* ===== MOBILE: turn same buttons into tiles + force overflow ===== */
@media (max-width:1024px) {

    .catPillactive {
        margin-left: 0;
    }

    .catRow--desktop {
        gap: 4%;
        padding: 2% 4%;
    }

    /* make each tile wider so it cannot all fit -> scroll happens */
    .catPillactive,
    #categoryPills .catPill {
        width: 26%; /* ✅ forces overflow on most phones */
       background-color: red;
        height: auto;
        padding: 6% 4%;
        border-radius: 16%;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    /* make ALL look like tile too */
    .catPillactive {
        background: #fff;
        color: #111;
        border: .08rem solid rgba(0,0,0,.10);
    }

        .catPillactive .catTxt {
            color: #222;
            font-weight: 700;
            font-size: .75rem;
        }

    /* tile icon area */
    .catIcon {
        width: 100%;
        aspect-ratio: 1/1;
    }

        .catIcon img {
            width: 65%;
            height: 65%;
        }

    .catName {
        font-size: .75rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .catCount {
        display: none;
    }
}

.New-arrival-menu {
    width: 100%; /* percentage width */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%; /* percentage spacing */
    height: 48px;
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden;
    white-space: nowrap;
   
}
.slider-track {
    display: flex;
    gap: 2%;
    white-space: nowrap;
    will-change: transform; /* smoother GPU animation */
}
    /* Each link takes percentage-based spacing */
    .New-arrival-menu a {
        flex: 0 0 auto; /* prevent shrinking */
        text-decoration: none;
        color: rgba(0, 0, 0, 0.75);
        font-size: 0.85rem;
        white-space: nowrap;
        position: relative;
        transition: color 0.2s ease;
    }

        .New-arrival-menu a:hover {
            color: #000;
        }

        /* Underline animation */
        .New-arrival-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 1px;
            background: #000;
            transform: scaleX(0);
            transition: transform 0.2s ease;
        }

        .New-arrival-menu a:hover::after {
            transform: scaleX(1);
        }


/* ================= MOBILE ================= */

@media (max-width: 1024px) {

    .New-arrival-menu {
        width: 100%; /* still percentage */
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 5%;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

        .New-arrival-menu::-webkit-scrollbar {
            height: 4px;
        }

        .New-arrival-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .New-arrival-menu::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 10px;
        }

            .New-arrival-menu::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 0, 0, 0.4);
            }
}