/* ==================================================
   STORE PAGE
   MOBILE FIRST
================================================== */


/* ==================================================
   GLOBAL
================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #0d0d10;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}



/* ==================================================
   CATEGORY SCROLL
================================================== */

.category-scroll {

    width: 100%;

    display: flex;

    gap: 10px;

    padding: 12px 14px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    background: #0d0d10;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}



/* ==================================================
   CATEGORY PILL
================================================== */

.category-pill {

    flex: 0 0 auto;

    padding:
        10px
        20px;

    border-radius: 999px;

    background: #202024;

    color: #eeeeee;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    border: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

    user-select: none;

    white-space: nowrap;
}

.category-pill:hover {
    background: #29292e;
}

.category-pill:active {
    transform: scale(0.96);
}


/* ==================================================
   ACTIVE CATEGORY
   ORANGE → PINK → PURPLE
================================================== */

.category-pill.active {

    background:
        linear-gradient(
            110deg,
            #ffb52e 0%,
            #ff6b2c 27%,
            #ed287c 62%,
            #a72bd3 100%
        );

    color: #111111;

    border: none;

    font-weight: 800;

    box-shadow:
        0 4px 15px
        rgba(236,40,124,0.22);
}



/* ==================================================
   SUBCATEGORY
================================================== */

.subcategory-row {

    width: 100%;

    display: flex;

    gap: 10px;

    padding:
        18px
        14px
        12px;

    overflow-x: auto;

    white-space: nowrap;

    background: #0d0d10;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.subcategory-row::-webkit-scrollbar {
    display: none;
}


.subcategory-pill {

    flex: 0 0 auto;

    padding:
        9px
        18px;

    border-radius: 999px;

    background: #1c1c20;

    color: #eeeeee;

    border:
        1px solid
        rgba(255,255,255,0.10);

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.subcategory-pill:hover {
    background: #29292e;
}


.subcategory-pill:active {
    transform: scale(0.96);
}


/* Active subcategory */

.subcategory-pill.active {

    background:
        linear-gradient(
            110deg,
            #ffb52e 0%,
            #ff6b2c 27%,
            #ed287c 62%,
            #a72bd3 100%
        );

    color: #111111;

    border: none;

    font-weight: 800;

    box-shadow:
        0 4px 14px
        rgba(236,40,124,0.20);
}



/* ==================================================
   TAG FILTER
================================================== */

.tag-filter-row {

    width: 100%;

    display: flex;

    gap: 10px;

    padding:
        8px
        14px
        18px;

    overflow-x: auto;

    white-space: nowrap;

    background: #0d0d10;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.tag-filter-row::-webkit-scrollbar {
    display: none;
}


.tag-chip {

    flex: 0 0 auto;

    padding:
        9px
        18px;

    border-radius: 999px;

    background: #1c1c20;

    color: #eeeeee;

    border:
        1px solid
        rgba(255,255,255,0.10);

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.tag-chip:hover {
    background: #29292e;
}


.tag-chip:active {
    transform: scale(0.96);
}


/* ==================================================
   ACTIVE TAG
   TURQUOISE / CYAN
================================================== */

.tag-chip.active {

    background:
        linear-gradient(
            135deg,
            #00f5a0 0%,
            #00e6b5 40%,
            #00cfff 100%
        );

    color: #061414;

    border: none;

    font-weight: 800;

    box-shadow:
        0 4px 15px
        rgba(0,225,220,0.20);
}



/* ==================================================
   STORE MAIN
================================================== */

.store-main {

    width: 100%;

    padding:
        8px
        12px
        40px;
}


/* If main does not have store-main class */

main {

    width: 100%;
}



/* ==================================================
   PRODUCT GRID
================================================== */

.product-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    padding:
        0
        12px
        40px;
}



/* ==================================================
   PRODUCT CARD
================================================== */

.product-card {

    min-width: 0;

    overflow: hidden;

    background: #19191e;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 0 0 22px 22px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

    position: relative;
}


.product-card:active {

    transform: scale(0.98);
}



/* ==================================================
   IMAGE WRAPPER
================================================== */

.img-wrap {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #25252a;
}


.img-wrap img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}



/* ==================================================
   NO IMAGE
================================================== */

.product-no-image {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #777780;

    font-size: 13px;

    background: #222228;
}



/* ==================================================
   BADGES
================================================== */

.badge {

    position: absolute;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}



/* ==================================================
   BESTSELLER
   YELLOW / ORANGE
================================================== */

.badge.bestseller {

    top: 10px;

    right: 10px;

    left: auto;

    padding:
        8px
        11px;

    border-radius: 10px;

    background:
        linear-gradient(
            100deg,
            #ffd51c 0%,
            #ffb400 100%
        );

    color: #111111;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,0.22);
}



/* ==================================================
   DISCOUNT
   BRIGHT GREEN CIRCLE
================================================== */

.badge.discount {

    top: 10px;

    left: 10px;

    right: auto;

    width: 35px;

    height: 35px;

    padding: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00f5a0 0%,
            #00e58a 100%
        );

    color: #06150f;

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,0.18);
}



/* ==================================================
   STOCK
================================================== */

.badge.stock {

    bottom: 10px;

    left: 10px;

    padding:
        7px
        11px;

    border-radius: 8px;

    background:
        rgba(255,0,0,0.9);

    color: #ffffff;

    backdrop-filter: blur(6px);
}



/* ==================================================
   PRODUCT INFO
================================================== */

.product-card-info {

    padding:
        12px
        12px
        15px;
}


.product-card h4 {

    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: 62px;
}



/* ==================================================
   PRICE
================================================== */

.price-wrap {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 24px;
}


.price-wrap .sale {

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;
}


.price-wrap .old {

    color: #77777f;

    font-size: 14px;

    text-decoration: line-through;
}



/* ==================================================
   EMPTY STORE
================================================== */

.store-empty {

    grid-column:
        1 / -1;

    min-height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.store-empty p {

    margin: 0;

    color: #888890;

    font-size: 15px;
}



/* ==================================================
   LOAD MORE
================================================== */

.load-more-btn {

    display: block;

    margin:
        10px
        auto
        35px;

    padding:
        12px
        28px;

    border: none;

    border-radius: 999px;

    background:
        linear-gradient(
            110deg,
            #ffb52e,
            #ff6b2c,
            #ed287c,
            #a72bd3
        );

    color: #111111;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.load-more-btn:active {

    transform: scale(0.96);
}



/* ==================================================
   SHARE BUTTON
================================================== */

.share-button {

    position: fixed;

    right: 18px;

    bottom: 70px;

    z-index: 1000;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff9f1c 0%,
            #ff5b2e 28%,
            #ed287c 60%,
            #9c27d5 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,0.40);

    cursor: pointer;

    font-size: 20px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.share-button:hover {

    transform: scale(1.06);

    box-shadow:
        0 8px 25px
        rgba(236,40,124,0.35);
}


.share-button:active {

    transform: scale(0.92);
}

.shop-filter-label {
    margin: 0 0 10px;
    padding: 0 12px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

/* ==================================================
   HORIZONTAL SCROLLBARS
================================================== */

.category-scroll,
.subcategory-row,
.tag-filter-row {

    scrollbar-width: none;
}


.category-scroll::-webkit-scrollbar,
.subcategory-row::-webkit-scrollbar,
.tag-filter-row::-webkit-scrollbar {

    display: none;
}



/* ==================================================
   TABLET
================================================== */

@media (
    min-width: 600px
) {

    .product-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 15px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .store-main {

        padding-left: 18px;

        padding-right: 18px;
    }

}



/* ==================================================
   DESKTOP
================================================== */

@media (
    min-width: 900px
) {

    .product-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 18px;

        padding-left: 25px;

        padding-right: 25px;
    }


    .store-main {

        max-width: 1400px;

        margin:
            0
            auto;

        padding-left: 25px;

        padding-right: 25px;
    }


    .product-card:hover {

        transform:
            translateY(-3px);

        box-shadow:
            0 12px 30px
            rgba(0,0,0,0.30);
    }


    .category-scroll,
    .subcategory-row,
    .tag-filter-row {

        padding-left: 25px;

        padding-right: 25px;
    }

}



/* ==================================================
   LARGE DESKTOP
================================================== */

@media (
    min-width: 1200px
) {

    .product-grid {

        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

}