/* =========================================================
   THEBESTS - BROWSE BY CATEGORY
   ========================================================= */

.tb-categories-section {
    --tb-black: #090909;
    --tb-charcoal: #171717;
    --tb-white: #ffffff;
    --tb-soft: #f7f7f7;
    --tb-border: #e6e6e6;
    --tb-muted: #757575;
    --tb-gold: #c6a15b;

    width: 100%;
    padding: 55px 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f8f8 100%
        );

    position: relative;
    overflow: hidden;
}


/* ديكور خفيف في الخلفية */

.tb-categories-section::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -170px;
    right: -130px;

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 50%;

    pointer-events: none;
}


.tb-categories-section::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -120px;
    bottom: -120px;

    background:
        radial-gradient(
            circle,
            rgba(198, 161, 91, .12) 0%,
            rgba(198, 161, 91, 0) 70%
        );

    pointer-events: none;
}


/* الحاوية */

.tb-categories-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    position: relative;
    z-index: 2;
}


/* =========================================================
   TITLE
   ========================================================= */

.tb-categories-heading {
    text-align: center;

    margin-bottom: 32px;
}


.tb-categories-eyebrow {
    display: inline-block;

    color: var(--tb-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 10px;
}


.tb-categories-heading h2 {
    margin: 0;

    color: var(--tb-black) !important;

    font-size: 30px;

    line-height: 1.4;

    font-weight: 900;
}


.tb-categories-heading p {
    margin: 8px auto 0;

    max-width: 600px;

    color: var(--tb-muted);

    font-size: 14px;

    line-height: 1.9;
}


/* خط تحت العنوان */

.tb-categories-heading h2::after {
    content: "";

    width: 55px;
    height: 3px;

    display: block;

    margin: 12px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--tb-black),
            var(--tb-gold)
        );
}


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

.tb-categories-grid {
    display: grid;

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

    gap: 14px;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.tb-category-card {
    min-height: 94px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px;

    background: var(--tb-white);

    border:
        1px solid var(--tb-border);

    border-radius: 18px;

    color: var(--tb-black) !important;

    text-decoration: none !important;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .045);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}


/* خط جانبي خفيف */

.tb-category-card::before {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--tb-black);

    transform: scaleY(0);

    transform-origin: bottom;

    transition:
        transform .3s ease;
}


/* لمعة الكارت */

.tb-category-card::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -80%;

    width: 35%;
    height: 220%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    transform:
        rotate(15deg);

    transition:
        left .65s ease;

    pointer-events: none;
}


/* Hover */

.tb-category-card:hover {
    color: var(--tb-black) !important;

    transform:
        translateY(-5px);

    border-color:
        #cfcfcf;

    box-shadow:
        0 16px 38px rgba(0,0,0,.11);
}


.tb-category-card:hover::before {
    transform: scaleY(1);
}


.tb-category-card:hover::after {
    left: 130%;
}


/* =========================================================
   ICON BOX
   ========================================================= */

.tb-category-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        var(--tb-soft);

    border:
        1px solid #ededed;

    border-radius:
        14px;

    position: relative;

    z-index: 2;

    transition:
        transform .3s ease,
        background .3s ease;
}


.tb-category-card:hover
.tb-category-icon {
    transform:
        scale(1.06)
        rotate(-2deg);

    background:
        #ffffff;
}


/* =========================================================
   REAL FLAGS
   ========================================================= */

.tb-category-icon.tb-flag img {
    width: 34px;
    height: 23px;

    display: block;

    object-fit: cover;

    border-radius: 4px;

    box-shadow:
        0 2px 5px rgba(0,0,0,.15);
}


/* =========================================================
   GLOBE SVG
   ========================================================= */

.tb-globe-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: var(--tb-black);

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   CONTENT
   ========================================================= */

.tb-category-content {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

    position: relative;

    z-index: 2;
}


.tb-category-content strong {
    color: var(--tb-black);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.5;
}


.tb-category-content small {
    color: var(--tb-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   ARROW
   ========================================================= */

.tb-category-arrow {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    background:
        var(--tb-black);

    color:
        var(--tb-white);

    border-radius:
        50%;

    font-size: 16px;

    position: relative;

    z-index: 2;

    transition:
        transform .3s ease,
        background .3s ease;
}


.tb-category-card:hover
.tb-category-arrow {
    background:
        var(--tb-gold);

    transform:
        translateX(-3px);
}


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

@media (max-width: 991px) {

    .tb-categories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .tb-categories-section {
        padding:
            38px 12px;
    }


    .tb-categories-heading {
        margin-bottom:
            24px;
    }


    .tb-categories-heading h2 {
        font-size:
            24px;
    }


    .tb-categories-heading p {
        font-size:
            12px;
    }


    .tb-categories-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .tb-category-card {
        min-height:
            80px;

        padding:
            13px;

        border-radius:
            15px;
    }


    .tb-category-icon {
        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;

        border-radius:
            12px;
    }


    .tb-category-icon.tb-flag img {
        width:
            31px;

        height:
            20px;
    }


    .tb-globe-icon svg {
        width:
            25px;

        height:
            25px;
    }


    .tb-category-content strong {
        font-size:
            13px;
    }


    .tb-category-content small {
        font-size:
            10px;
    }


    .tb-category-arrow {
        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;

        font-size:
            14px;
    }

}
/* =====================================================
   THEBESTS - ADD TO CART BUTTON
   ===================================================== */

/* زر إضافة للسلة في كروت المنتجات */
.s-product-card-entry .s-button-wide,
.s-product-card-entry .s-button-primary-outline,
.s-product-card-entry button.s-button-element {

    background: #ffffff !important;
    color: #0a0a0a !important;

    border: 1.5px solid #0a0a0a !important;
    border-radius: 12px !important;

    box-shadow: none !important;

    position: relative;
    overflow: hidden;

    font-weight: 800 !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;
}


/* لمعة داخل الزر */
.s-product-card-entry .s-button-wide::before,
.s-product-card-entry .s-button-primary-outline::before,
.s-product-card-entry button.s-button-element::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;

    pointer-events: none;
}


/* =========================
   HOVER
   ========================= */

.s-product-card-entry .s-button-wide:hover,
.s-product-card-entry .s-button-primary-outline:hover,
.s-product-card-entry button.s-button-element:hover {

    background: #050505 !important;
    color: #ffffff !important;

    border-color: #050505 !important;

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 8px 20px rgba(0,0,0,.28),
        0 0 15px rgba(255,255,255,.18) !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.85),
        0 0 10px rgba(255,255,255,.45) !important;
}


/* حركة اللمعة */
.s-product-card-entry .s-button-wide:hover::before,
.s-product-card-entry .s-button-primary-outline:hover::before,
.s-product-card-entry button.s-button-element:hover::before {

    left: 140%;
}


/* الأيقونة داخل الزر */
.s-product-card-entry .s-button-element i,
.s-product-card-entry .s-button-element svg {

    transition:
        color .3s ease,
        fill .3s ease,
        transform .3s ease;
}


.s-product-card-entry .s-button-element:hover i {

    color: #ffffff !important;
}


.s-product-card-entry .s-button-element:hover svg {

    fill: #ffffff !important;

    transform: scale(1.08);
}


/* للجوال */
@media (max-width: 768px) {

    .s-product-card-entry .s-button-wide,
    .s-product-card-entry .s-button-primary-outline,
    .s-product-card-entry button.s-button-element {

        border-radius: 10px !important;
    }

}
/* =====================================================
   THEBESTS - PRODUCT CARD HOVER ANIMATION
   ===================================================== */

.s-product-card-entry,
.product-card,
.product-entry {

    position: relative;

    background: #ffffff !important;

    border: 1px solid rgba(0,0,0,.08) !important;

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow:
        0 6px 18px rgba(0,0,0,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* خط أسود متحرك حول الكارت */
.s-product-card-entry::before,
.product-card::before,
.product-entry::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border: 1px solid transparent;

    pointer-events: none;

    z-index: 5;

    transition:
        border-color .35s ease,
        box-shadow .35s ease;
}


/* لمعة خفيفة */
.s-product-card-entry::after,
.product-card::after,
.product-entry::after {

    content: "";

    position: absolute;

    top: -60%;
    left: -90%;

    width: 35%;
    height: 220%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transform: rotate(15deg);

    opacity: 0;

    pointer-events: none;

    z-index: 4;

    transition:
        left .7s ease,
        opacity .25s ease;
}


/* =========================================
   HOVER
   ========================================= */

.s-product-card-entry:hover,
.product-card:hover,
.product-entry:hover {

    transform:
        translateY(-8px)
        scale(1.015);

    border-color:
        rgba(0,0,0,.18) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.16),
        0 0 0 1px rgba(0,0,0,.04);
}


/* إطار أسود أنيق */
.s-product-card-entry:hover::before,
.product-card:hover::before,
.product-entry:hover::before {

    border-color:
        rgba(0,0,0,.28);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.03);
}


/* حركة اللمعة */
.s-product-card-entry:hover::after,
.product-card:hover::after,
.product-entry:hover::after {

    left: 135%;
    opacity: 1;
}


/* =========================================
   PRODUCT IMAGE ZOOM
   ========================================= */

.s-product-card-entry img,
.product-card img,
.product-entry img {

    transition:
        transform .45s ease,
        filter .45s ease !important;
}


.s-product-card-entry:hover img,
.product-card:hover img,
.product-entry:hover img {

    transform:
        scale(1.05);

    filter:
        contrast(1.02)
        brightness(1.02);
}


/* =========================================
   PRODUCT TITLE
   ========================================= */

.s-product-card-content-title,
.s-product-card-content-title a {

    transition:
        transform .3s ease,
        color .3s ease;
}


.s-product-card-entry:hover
.s-product-card-content-title {

    transform:
        translateY(-1px);
}


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

@media (max-width: 768px) {

    .s-product-card-entry:hover,
    .product-card:hover,
    .product-entry:hover {

        transform:
            translateY(-4px)
            scale(1.005);
    }

}
/* =====================================================
   THEBESTS - CREAM BACKGROUND
   ===================================================== */

:root {
    --tb-cream: #FAF7F2;
    --tb-black: #080808;
    --tb-white: #FFFFFF;
    --tb-gold: #C6A15B;
}

/* خلفية المتجر */
html,
body {
    background: var(--tb-cream) !important;
}

/* بعض حاويات سلة الرئيسية */
#main-content,
.app-inner,
.flex-col {
    background: var(--tb-cream) !important;
}


/* =====================================================
   THEBESTS - LOADING SCREEN
   ===================================================== */

#tb-store-loader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: var(--tb-cream);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}


/* عند الإخفاء */
#tb-store-loader.tb-loader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* المحتوى */
.tb-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    text-align: center;
}


/* الباركود */
.tb-loader-barcode {
    display: flex;
    align-items: center;

    gap: 4px;

    height: 65px;
}


/* الخطوط */
.tb-loader-barcode span {
    display: block;

    width: 4px;
    height: 52px;

    background: #080808;

    animation:
        tbBarcodePulse 1s ease-in-out infinite;
}


.tb-loader-barcode span:nth-child(2) {
    width: 7px;
    animation-delay: .08s;
}

.tb-loader-barcode span:nth-child(3) {
    width: 3px;
    height: 65px;
    animation-delay: .16s;
}

.tb-loader-barcode span:nth-child(4) {
    width: 9px;
    animation-delay: .24s;
}

.tb-loader-barcode span:nth-child(5) {
    width: 3px;
    height: 60px;
    animation-delay: .32s;
}

.tb-loader-barcode span:nth-child(6) {
    width: 6px;
    animation-delay: .4s;
}

.tb-loader-barcode span:nth-child(7) {
    width: 3px;
    height: 65px;
    animation-delay: .48s;
}

.tb-loader-barcode span:nth-child(8) {
    width: 8px;
    animation-delay: .56s;
}

.tb-loader-barcode span:nth-child(9) {
    width: 4px;
    animation-delay: .64s;
}

.tb-loader-barcode span:nth-child(10) {
    width: 6px;
    height: 60px;
    animation-delay: .72s;
}


/* اسم المتجر */
.tb-loader-brand {
    color: var(--tb-black);

    font-size: 32px;
    font-weight: 900;

    letter-spacing: 1px;

    line-height: 1;
}


/* النص الصغير */
.tb-loader-text {
    color: #777;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1px;
}


/* الخط الذهبي */
.tb-loader-line {
    width: 65px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--tb-gold),
            transparent
        );

    animation:
        tbLoaderLine 1.3s ease-in-out infinite;
}


/* حركة الباركود */
@keyframes tbBarcodePulse {

    0%,
    100% {
        transform: scaleY(.75);
        opacity: .55;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }

}


/* حركة الخط */
@keyframes tbLoaderLine {

    0%,
    100% {
        transform: scaleX(.45);
        opacity: .4;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

}


/* الجوال */
@media (max-width: 600px) {

    .tb-loader-brand {
        font-size: 27px;
    }

    .tb-loader-barcode {
        transform: scale(.9);
    }

}