/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 1 از 7
   پایه سایت + پس‌زمینه + هدر
===================================================== */


/* ------------------------------
   تنظیمات کلی
------------------------------ */

:root {

    --gold: #d8a63f;

    --gold-light: #ffe09a;

    --gold-dark: #8d5d17;

    --black: #06080c;

    --black-2: #0b0d12;

    --white: #f8f1e3;

    --gray: #bdb4a4;

    --border:
    rgba(216, 166, 63, 0.35);

}


/* ------------------------------
   حذف تنظیمات پیش‌فرض مرورگر
------------------------------ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    direction: rtl;

    min-height: 100vh;

    overflow-x: hidden;

    color: var(--white);

    font-family:

    "Vazirmatn",

    Tahoma,

    sans-serif;

    background:

    radial-gradient(

        circle at 50% 28%,

        rgba(184, 119, 20, 0.14),

        transparent 30%

    ),

    radial-gradient(

        circle at 15% 50%,

        rgba(218, 166, 50, 0.06),

        transparent 20%

    ),

    linear-gradient(

        135deg,

        #05070a 0%,

        #0a0b0e 45%,

        #050609 100%

    );

}


/* ------------------------------
   نورهای ریز طلایی در پس‌زمینه
------------------------------ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.45;

    background-image:

    radial-gradient(

        circle,

        rgba(238, 177, 50, 0.75) 0,

        rgba(238, 177, 50, 0.2) 2px,

        transparent 5px

    );

    background-size:

    180px 180px;

}


/* ------------------------------
   تنظیم لینک‌ها
------------------------------ */

a {

    color: inherit;

    text-decoration: none;

}


/* ------------------------------
   تنظیم دکمه‌ها و ورودی‌ها
------------------------------ */

button,

input,

select {

    font-family: inherit;

}


button {

    border: none;

    cursor: pointer;

}


img {

    display: block;

    max-width: 100%;

}


/* ------------------------------
   محتوای اصلی
------------------------------ */

main {

    width: 100%;

    max-width: 1600px;

    margin: auto;

    padding:

    0 55px 80px;

}


/* =====================================================
   هدر
===================================================== */

.main-header {

    width: 100%;

    height: 120px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:

    0 65px;

    border-top:

    1px solid

    rgba(216, 166, 63, 0.15);

    border-bottom:

    1px solid

    rgba(216, 166, 63, 0.42);

    background:

    linear-gradient(

        90deg,

        rgba(4, 6, 9, 0.98),

        rgba(12, 12, 13, 0.98),

        rgba(4, 6, 9, 0.98)

    );

    box-shadow:

    0 10px 35px

    rgba(0, 0, 0, 0.45);

    z-index: 100;

}


/* ------------------------------
   بخش راست هدر
------------------------------ */

.header-right {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 32px;

}


/* ------------------------------
   بخش وسط هدر
------------------------------ */

.header-center {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.header-logo {

    width: 78px;

    height: 78px;

    object-fit: cover;

    border-radius: 50%;

    border:

    2px solid

    var(--gold);

    box-shadow:

    0 0 15px

    rgba(220, 167, 53, 0.45),

    0 0 35px

    rgba(220, 167, 53, 0.15);

}


.logo-title {

    color:

    var(--gold-light);

    font-size:

    35px;

    font-weight:

    900;

    white-space: nowrap;

    text-shadow:

    0 0 18px

    rgba(219, 165, 54, 0.22);

}


/* ------------------------------
   بخش چپ هدر
------------------------------ */

.header-left {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


/* ------------------------------
   دکمه منو
------------------------------ */

.hamburger {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    29px;

    background:

    transparent;

    border-radius:

    12px;

    transition:

    0.25s;

}


.hamburger:hover {

    color:

    #ffffff;

    background:

    rgba(216, 166, 63, 0.1);

    transform:

    scale(1.08);

}


/* ------------------------------
   سبد خرید
------------------------------ */

.cart-btn {

    width: 58px;

    height: 58px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    28px;

    border-radius:

    15px;

    transition:

    0.25s;

}


.cart-btn:hover {

    color:

    var(--gold);

    background:

    rgba(216, 166, 63, 0.1);

    transform:

    translateY(-3px);

}


#cart-count {

    width: 25px;

    height: 25px;

    position: absolute;

    top: 1px;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    #171006;

    background:

    linear-gradient(

        135deg,

        #ffe39c,

        #c88e27

    );

    border-radius:

    50%;

    font-size:

    13px;

    font-weight:

    900;

    box-shadow:

    0 0 12px

    rgba(235, 180, 62, 0.5);

}


/* ------------------------------
   ورود
------------------------------ */

.login-btn {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    25px;

    border-radius:

    50%;

    transition:

    0.25s;

}


.login-btn:hover {

    color:

    #ffffff;

    background:

    rgba(216, 166, 63, 0.1);

    box-shadow:

    0 0 20px

    rgba(216, 166, 63, 0.15);

}


/* ------------------------------
   ظاهر انتخاب متن
------------------------------ */

::selection {

    color:

    #171006;

    background:

    var(--gold-light);

}


/* ------------------------------
   اسکرول بار
------------------------------ */

::-webkit-scrollbar {

    width: 9px;

}


::-webkit-scrollbar-track {

    background:

    #07080b;

}


::-webkit-scrollbar-thumb {

    border-radius:

    20px;

    background:

    linear-gradient(

        180deg,

        var(--gold-light),

        var(--gold-dark)

    );

}
/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 1 از 7
   پایه سایت + پس‌زمینه + هدر
===================================================== */


/* ------------------------------
   تنظیمات کلی
------------------------------ */

:root {

    --gold: #d8a63f;

    --gold-light: #ffe09a;

    --gold-dark: #8d5d17;

    --black: #06080c;

    --black-2: #0b0d12;

    --white: #f8f1e3;

    --gray: #bdb4a4;

    --border:
    rgba(216, 166, 63, 0.35);

}


/* ------------------------------
   حذف تنظیمات پیش‌فرض مرورگر
------------------------------ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    direction: rtl;

    min-height: 100vh;

    overflow-x: hidden;

    color: var(--white);

    font-family:

    "Vazirmatn",

    Tahoma,

    sans-serif;

    background:

    radial-gradient(

        circle at 50% 28%,

        rgba(184, 119, 20, 0.14),

        transparent 30%

    ),

    radial-gradient(

        circle at 15% 50%,

        rgba(218, 166, 50, 0.06),

        transparent 20%

    ),

    linear-gradient(

        135deg,

        #05070a 0%,

        #0a0b0e 45%,

        #050609 100%

    );

}


/* ------------------------------
   نورهای ریز طلایی در پس‌زمینه
------------------------------ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.45;

    background-image:

    radial-gradient(

        circle,

        rgba(238, 177, 50, 0.75) 0,

        rgba(238, 177, 50, 0.2) 2px,

        transparent 5px

    );

    background-size:

    180px 180px;

}


/* ------------------------------
   تنظیم لینک‌ها
------------------------------ */

a {

    color: inherit;

    text-decoration: none;

}


/* ------------------------------
   تنظیم دکمه‌ها و ورودی‌ها
------------------------------ */

button,

input,

select {

    font-family: inherit;

}


button {

    border: none;

    cursor: pointer;

}


img {

    display: block;

    max-width: 100%;

}


/* ------------------------------
   محتوای اصلی
------------------------------ */

main {

    width: 100%;

    max-width: 1600px;

    margin: auto;

    padding:

    0 55px 80px;

}


/* =====================================================
   هدر
===================================================== */

.main-header {

    width: 100%;

    height: 120px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:

    0 65px;

    border-top:

    1px solid

    rgba(216, 166, 63, 0.15);

    border-bottom:

    1px solid

    rgba(216, 166, 63, 0.42);

    background:

    linear-gradient(

        90deg,

        rgba(4, 6, 9, 0.98),

        rgba(12, 12, 13, 0.98),

        rgba(4, 6, 9, 0.98)

    );

    box-shadow:

    0 10px 35px

    rgba(0, 0, 0, 0.45);

    z-index: 100;

}


/* ------------------------------
   بخش راست هدر
------------------------------ */

.header-right {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 32px;

}


/* ------------------------------
   بخش وسط هدر
------------------------------ */

.header-center {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.header-logo {

    width: 78px;

    height: 78px;

    object-fit: cover;

    border-radius: 50%;

    border:

    2px solid

    var(--gold);

    box-shadow:

    0 0 15px

    rgba(0, 0, 0, 0.45),

    0 0 35px

    rgba(220, 167, 53, 0.15);

}


.logo-title {

    color:

    var(--gold-light);

    font-size:

    35px;

    font-weight:

    900;

    white-space: nowrap;

    text-shadow:

    0 0 18px

    rgba(219, 165, 54, 0.22);

}


/* ------------------------------
   بخش چپ هدر
------------------------------ */

.header-left {

    width: 33.33%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


/* ------------------------------
   دکمه منو
------------------------------ */

.hamburger {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    29px;

    background:

    transparent;

    border-radius:

    12px;

    transition:

    0.25s;

}


.hamburger:hover {

    color:

    #ffffff;

    background:

    rgba(216, 166, 63, 0.1);

    transform:

    scale(1.08);

}


/* ------------------------------
   سبد خرید
------------------------------ */

.cart-btn {

    width: 58px;

    height: 58px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    28px;

    border-radius:

    15px;

    transition:

    0.25s;

}


.cart-btn:hover {

    color:

    var(--gold);

    background:

    rgba(216, 166, 63, 0.1);

    transform:

    translateY(-3px);

}


#cart-count {

    width: 25px;

    height: 25px;

    position: absolute;

    top: 1px;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    #171006;

    background:

    linear-gradient(

        135deg,

        #ffe39c,

        #c88e27

    );

    border-radius:

    50%;

    font-size:

    13px;

    font-weight:

    900;

    box-shadow:

    0 0 12px

    rgba(235, 180, 62, 0.5);

}


/* ------------------------------
   ورود
------------------------------ */

.login-btn {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    font-size:

    25px;

    border-radius:

    50%;

    transition:

    0.25s;

}


.login-btn:hover {

    color:

    #ffffff;

    background:

    rgba(216, 166, 63, 0.1);

    box-shadow:

    0 0 20px

    rgba(216, 166, 63, 0.15);

}


/* ------------------------------
   ظاهر انتخاب متن
------------------------------ */

::selection {

    color:

    #171006;

    background:

    var(--gold-light);

}


/* ------------------------------
   اسکرول بار
------------------------------ */

::-webkit-scrollbar {

    width: 9px;

}


::-webkit-scrollbar-track {

    background:

    #07080b;

}


::-webkit-scrollbar-thumb {

    border-radius:

    20px;

    background:

    linear-gradient(

        180deg,

        var(--gold-light),

        var(--gold-dark)

    );

}
/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 3 از 7
   جستجو و مرتب‌سازی محصولات
===================================================== */


/* -----------------------------------------------------
   کادر اصلی جستجو و مرتب‌سازی
----------------------------------------------------- */

.filter-bar {

    width: 100%;

    max-width: 1280px;

    min-height: 72px;

    display: grid;

    grid-template-columns:

    minmax(260px, 1fr)

    240px;

    align-items: center;

    gap: 28px;

    margin:

    0 auto 35px;

    padding:

    0;

}


/* -----------------------------------------------------
   کادر جستجو
----------------------------------------------------- */

#search {

    width: 100%;

    height: 64px;

    padding:

    0 68px 0 25px;

    outline: none;

    border:

    1px solid

    rgba(216, 166, 63, 0.40);

    border-radius:

    18px;

    color:

    var(--white);

    background:

    linear-gradient(

        135deg,

        rgba(23, 21, 18, 0.98),

        rgba(14, 15, 19, 0.98)

    );

    font-size:

    17px;

    font-weight:

    600;

    box-shadow:

    0 10px 25px

    rgba(0, 0, 0, 0.28),

    inset

    0 0 20px

    rgba(213, 157, 42, 0.035);

    transition:

    border-color 0.25s,

    box-shadow 0.25s,

    transform 0.25s;

}


/* آیکون جستجو با CSS */

.filter-bar {

    position: relative;

}


.filter-bar::before {

    content: "⌕";

    position: absolute;

    top: 50%;

    right: 22px;

    z-index: 5;

    transform:

    translateY(-50%);

    color:

    var(--gold-light);

    font-family:

    Arial,

    sans-serif;

    font-size:

    38px;

    font-weight:

    300;

    pointer-events:

    none;

    text-shadow:

    0 0 10px

    rgba(225, 168, 48, 0.3);

}


/* متن داخل جستجو */

#search::placeholder {

    color:

    #978d7e;

    opacity:

    1;

}


/* حالت فعال جستجو */

#search:focus {

    border-color:

    rgba(255, 211, 112, 0.85);

    box-shadow:

    0 0 0 3px

    rgba(218, 166, 63, 0.08),

    0 0 22px

    rgba(218, 166, 63, 0.14),

    inset

    0 0 20px

    rgba(213, 157, 42, 0.06);

}


/* -----------------------------------------------------
   منوی مرتب‌سازی
----------------------------------------------------- */

#sort {

    width: 100%;

    height: 64px;

    padding:

    0 22px;

    appearance:

    none;

    -webkit-appearance:

    none;

    -moz-appearance:

    none;

    outline:

    none;

    cursor:

    pointer;

    border:

    1px solid

    rgba(216, 166, 63, 0.40);

    border-radius:

    18px;

    color:

    #d8c9ad;

    background:

    linear-gradient(

        135deg,

        rgba(34, 28, 19, 0.98),

        rgba(15, 15, 17, 0.98)

    );

    font-size:

    17px;

    font-weight:

    700;

    text-align:

    center;

    box-shadow:

    0 10px 25px

    rgba(0, 0, 0, 0.28),

    inset

    0 0 18px

    rgba(213, 157, 42, 0.04);

    transition:

    0.25s;

}


/* فلش مرتب‌سازی */

.filter-bar::after {

    content: "⌄";

    position: absolute;

    top: 50%;

    left: 19px;

    z-index: 5;

    transform:

    translateY(-58%);

    color:

    var(--gold-light);

    font-size:

    27px;

    font-weight:

    700;

    pointer-events:

    none;

}


/* حالت فعال مرتب‌سازی */

#sort:hover,

#sort:focus {

    color:

    var(--gold-light);

    border-color:

    rgba(255, 211, 112, 0.80);

    box-shadow:

    0 0 20px

    rgba(216, 166, 63, 0.13);

}


/* گزینه‌های داخل منو */

#sort option {

    color:

    #f6ead2;

    background:

    #15130f;

    font-size:

    16px;

}


/* -----------------------------------------------------
   انیمیشن ورود
----------------------------------------------------- */

.filter-bar {

    animation:

    filterBarShow

    0.8s ease

    both;

}


@keyframes filterBarShow {

    from {

        opacity:

        0;

        transform:

        translateY(22px);

    }

    to {

        opacity:

        1;

        transform:

        translateY(0);

    }

}


/* =====================================================
   تبلت
===================================================== */




/* =====================================================
   موبایل
===================================================== */


/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 4 از 7
   کارت‌های مزایای خرید
===================================================== */


/* -----------------------------------------------------
   بخش اصلی ویژگی‌ها
----------------------------------------------------- */

.features {

    width: 100%;

    max-width: 1380px;

    display: grid;

    grid-template-columns:

    repeat(4, 1fr);

    gap: 18px;

    margin:

    15px auto 55px;

    padding:

    0;

}


/* -----------------------------------------------------
   کارت هر ویژگی
----------------------------------------------------- */

.feature-box {

    min-height: 145px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:

    22px 18px;

    overflow: hidden;

    text-align: center;

    border:

    1px solid

    rgba(216, 166, 63, 0.35);

    border-radius:

    18px;

    background:

    linear-gradient(

        145deg,

        rgba(26, 22, 15, 0.96),

        rgba(10, 11, 14, 0.98)

    );

    box-shadow:

    0 12px 30px

    rgba(0, 0, 0, 0.34),

    inset

    0 0 25px

    rgba(219, 164, 43, 0.025);

    transition:

    transform 0.3s ease,

    border-color 0.3s ease,

    box-shadow 0.3s ease;

}


/* -----------------------------------------------------
   نور طلایی داخل کارت
----------------------------------------------------- */

.feature-box::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    left: -80px;

    border-radius:

    50%;

    pointer-events:

    none;

    background:

    radial-gradient(

        circle,

        rgba(232, 171, 43, 0.13),

        transparent 68%

    );

}


/* -----------------------------------------------------
   خط نور هنگام قرار گرفتن موس
----------------------------------------------------- */

.feature-box::after {

    content: "";

    position: absolute;

    right: 20%;

    bottom: 0;

    width: 60%;

    height: 1px;

    opacity: 0;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold-light),

        transparent

    );

    transition:

    opacity 0.3s ease;

}


/* -----------------------------------------------------
   حرکت کارت هنگام هاور
----------------------------------------------------- */

.feature-box:hover {

    transform:

    translateY(-7px);

    border-color:

    rgba(255, 215, 126, 0.78);

    box-shadow:

    0 15px 38px

    rgba(0, 0, 0, 0.5),

    0 0 22px

    rgba(220, 163, 43, 0.12),

    inset

    0 0 30px

    rgba(220, 163, 43, 0.05);

}


.feature-box:hover::after {

    opacity:

    1;

}


/* -----------------------------------------------------
   دایره آیکون
----------------------------------------------------- */

.feature-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    margin-bottom:

    13px;

    border:

    1px solid

    rgba(216, 166, 63, 0.24);

    border-radius:

    50%;

    background:

    radial-gradient(

        circle,

        rgba(213, 153, 33, 0.20),

        rgba(31, 24, 13, 0.80)

    );

    font-size:

    28px;

    box-shadow:

    inset

    0 0 14px

    rgba(232, 174, 53, 0.08),

    0 0 15px

    rgba(217, 158, 37, 0.07);

    transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

}


/* چرخش کوچک آیکون */

.feature-box:hover .feature-icon {

    transform:

    scale(1.08)

    rotate(-4deg);

    box-shadow:

    0 0 18px

    rgba(234, 176, 49, 0.25);

}


/* -----------------------------------------------------
   عنوان ویژگی
----------------------------------------------------- */

.feature-box h3 {

    position: relative;

    z-index: 2;

    margin:

    0 0 7px;

    color:

    var(--gold-light);

    font-size:

    18px;

    font-weight:

    900;

    line-height:

    1.7;

}


/* -----------------------------------------------------
   توضیحات ویژگی
----------------------------------------------------- */

.feature-box p {

    position: relative;

    z-index: 2;

    max-width:

    240px;

    margin:

    0;

    color:

    #bdb3a1;

    font-size:

    13px;

    font-weight:

    500;

    line-height:

    1.9;

}


/* -----------------------------------------------------
   انیمیشن ظاهر شدن کارت‌ها
----------------------------------------------------- */

.feature-box {

    opacity:

    0;

    animation:

    featureAppear

    0.7s ease

    forwards;

}


/* تاخیر برای ظاهر شدن یکی‌یکی */

.feature-box:nth-child(1) {

    animation-delay:

    0.05s;

}


.feature-box:nth-child(2) {

    animation-delay:

    0.15s;

}


.feature-box:nth-child(3) {

    animation-delay:

    0.25s;

}


.feature-box:nth-child(4) {

    animation-delay:

    0.35s;

}


@keyframes featureAppear {

    from {

        opacity:

        0;

        transform:

        translateY(25px);

    }

    to {

        opacity:

        1;

        transform:

        translateY(0);

    }

}


/* =====================================================
   نسخه تبلت
===================================================== */

@media
(max-width: 1000px) {

    .features {

        grid-template-columns:

        repeat(2, 1fr);

        gap:

        15px;

    }


    .feature-box {

        min-height:

        150px;

    }

}


/* =====================================================
   نسخه موبایل
===================================================== */




/* =====================================================
   موبایل خیلی کوچک
===================================================== */


/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 5 از 7
   کارت‌های محصولات
===================================================== */


/* -----------------------------------------------------
   بخش دسته‌بندی
----------------------------------------------------- */

.category-section {

    width: 100%;

    max-width: 1450px;

    position: relative;

    margin:

    0 auto 75px;

    padding:

    35px 25px 30px;

    border:

    1px solid

    rgba(216, 166, 63, 0.18);

    border-radius:

    28px;

    background:

    linear-gradient(

        145deg,

        rgba(16, 14, 11, 0.70),

        rgba(5, 7, 10, 0.82)

    );

    box-shadow:

    0 25px 55px

    rgba(0, 0, 0, 0.30),

    inset

    0 0 45px

    rgba(210, 151, 35, 0.025);

}


/* نور طلایی پس‌زمینه دسته */

.category-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 250px;

    top: -120px;

    right: 50%;

    transform:

    translateX(50%);

    pointer-events:

    none;

    background:

    radial-gradient(

        ellipse,

        rgba(221, 163, 42, 0.09),

        transparent 70%

    );

}


/* -----------------------------------------------------
   عنوان دسته‌بندی
----------------------------------------------------- */

.category-title {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: fit-content;

    min-width: 270px;

    margin:

    -68px auto 38px;

    padding:

    13px 35px;

    border:

    1px solid

    rgba(230, 179, 66, 0.52);

    border-radius:

    50px;

    background:

    linear-gradient(

        135deg,

        #1d1710,

        #0b0c10

    );

    box-shadow:

    0 10px 30px

    rgba(0, 0, 0, 0.55),

    0 0 22px

    rgba(215, 157, 38, 0.08);

}


.category-title::before,

.category-title::after {

    content: "";

    width: 45px;

    height: 1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold)

    );

}


.category-title::after {

    transform:

    rotate(180deg);

}


.category-title span {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size:

    25px;

}


.category-title h2 {

    margin: 0;

    color:

    var(--gold-light);

    font-size:

    25px;

    font-weight:

    900;

    text-shadow:

    0 0 15px

    rgba(226, 170, 52, 0.18);

}


/* -----------------------------------------------------
   محل قرارگیری محصولات
----------------------------------------------------- */

.products {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

    repeat(

        auto-fit,

        minmax(260px, 1fr)

    );

    gap:

    24px;

    width: 100%;

}


/* -----------------------------------------------------
   کارت اصلی محصول
----------------------------------------------------- */

.product-card {

    min-width: 0;

    min-height: 545px;

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding:

    14px 14px 18px;

    border:

    1px solid

    rgba(216, 166, 63, 0.34);

    border-radius:

    22px;

    background:

    linear-gradient(

        155deg,

        rgba(31, 25, 17, 0.98),

        rgba(9, 10, 13, 0.99)

    );

    box-shadow:

    0 18px 40px

    rgba(0, 0, 0, 0.42),

    inset

    0 0 25px

    rgba(223, 165, 42, 0.035);

    cursor:

    pointer;

    transition:

    transform 0.35s ease,

    border-color 0.35s ease,

    box-shadow 0.35s ease;

}


/* نور داخل کارت */

.product-card::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 220px;

    top: -120px;

    right: -100px;

    border-radius:

    50%;

    pointer-events:

    none;

    background:

    radial-gradient(

        circle,

        rgba(234, 177, 53, 0.15),

        transparent 68%

    );

}


/* خط طلایی پایین کارت */

.product-card::after {

    content: "";

    position: absolute;

    right: 18%;

    bottom: 0;

    width: 64%;

    height: 2px;

    border-radius:

    10px;

    opacity: 0.45;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold-light),

        transparent

    );

}


/* حرکت کارت */

.product-card:hover {

    z-index: 5;

    transform:

    translateY(-10px);

    border-color:

    rgba(255, 216, 125, 0.80);

    box-shadow:

    0 25px 50px

    rgba(0, 0, 0, 0.62),

    0 0 25px

    rgba(218, 160, 38, 0.13),

    inset

    0 0 30px

    rgba(224, 165, 42, 0.06);

}


/* -----------------------------------------------------
   بخش تصویر
----------------------------------------------------- */

.product-image {

    width: 100%;

    height: 285px;

    position: relative;

    overflow: hidden;

    border:

    1px solid

    rgba(216, 166, 63, 0.18);

    border-radius:

    16px;

    background:

    radial-gradient(

        circle,

        #292116,

        #0b0d11 72%

    );

}


.product-img {

    width: 100%;

    height: 100% !important;

    object-fit: cover;

    object-position: center;

    border-radius:

    15px;

    transition:

    transform 0.55s ease,

    filter 0.4s ease;

}


.product-card:hover .product-img {

    transform:

    scale(1.07);

    filter:

    brightness(1.08)

    contrast(1.03);

}


/* لایه طلایی روی تصویر */

.product-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events:

    none;

    background:

    linear-gradient(

        180deg,

        rgba(0, 0, 0, 0.03),

        transparent 45%,

        rgba(0, 0, 0, 0.30)

    );

}


/* -----------------------------------------------------
   نشان پرفروش
----------------------------------------------------- */

.best-seller {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 8;

    padding:

    6px 12px;

    color:

    #261707;

    background:

    linear-gradient(

        135deg,

        #ffe19a,

        #d19326

    );

    border-radius:

    20px;

    font-size:

    12px;

    font-weight:

    900;

    box-shadow:

    0 5px 15px

    rgba(0, 0, 0, 0.35);

}


/* -----------------------------------------------------
   وضعیت موجودی
----------------------------------------------------- */

.stock-status {

    min-height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:

    9px 0 2px;

    font-size:

    12px;

    font-weight:

    700;

}


.in-stock {

    color:

    #71d99a;

}


.out-stock {

    color:

    #ff7777;

}


/* -----------------------------------------------------
   نشان تخفیف
----------------------------------------------------- */

.discount-badge {

    position: absolute;

    top: 260px;

    left: 20px;

    z-index: 9;

    padding:

    6px 11px;

    color:

    white;

    background:

    linear-gradient(

        135deg,

        #d42d2d,

        #8e1212

    );

    border:

    1px solid

    rgba(255, 255, 255, 0.20);

    border-radius:

    18px;

    font-size:

    11px;

    font-weight:

    900;

    box-shadow:

    0 5px 15px

    rgba(0, 0, 0, 0.35);

}


/* -----------------------------------------------------
   نام محصول
----------------------------------------------------- */

.product-card a {

    display: block;

    min-height: 57px;

    padding:

    5px 10px;

    text-align: center;

}


.product-card h3 {

    overflow: hidden;

    margin:

    0;

    color:

    #f8ead0;

    font-size:

    18px;

    font-weight:

    900;

    line-height:

    1.8;

    text-overflow:

    ellipsis;

    white-space:

    nowrap;

    transition:

    color 0.25s;

}


.product-card:hover h3 {

    color:

    var(--gold-light);

}


/* -----------------------------------------------------
   ستاره‌ها
----------------------------------------------------- */

.rating {

    margin-top:

    2px;

    color:

    #e0a93d;

    font-size:

    13px;

    letter-spacing:

    2px;

    text-shadow:

    0 0 8px

    rgba(225, 166, 45, 0.18);

}


/* -----------------------------------------------------
   قیمت محصول
----------------------------------------------------- */

.product-card h2 {

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:

    3px 0 12px;

    padding:

    5px;

    color:

    var(--gold-light);

    font-size:

    20px;

    font-weight:

    900;

    text-align:

    center;

    line-height:

    1.8;

}


.price-box {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

}


/* اصلاح رنگ قیمت تخفیف‌دار */

.price-box span[style*="color:green"] {

    color:

    #7ee0a4 !important;

}


/* -----------------------------------------------------
   کنترل سبد خرید
----------------------------------------------------- */

.cart-controls {

    width: 100%;

    margin-top:

    auto;

}


.buy-btn {

    width: 100%;

    min-height: 50px;

    padding:

    10px 15px;

    border:

    1px solid

    rgba(255, 231, 165, 0.48);

    border-radius:

    14px;

    color:

    #1a1005;

    background:

    linear-gradient(

        135deg,

        #ffe3a0,

        #d49a31 55%,

        #aa6d17

    );

    font-size:

    15px;

    font-weight:

    900;

    box-shadow:

    0 8px 20px

    rgba(183, 124, 25, 0.20);

    transition:

    transform 0.25s,

    box-shadow 0.25s,

    filter 0.25s;

}


.buy-btn:hover:not(:disabled) {

    transform:

    translateY(-3px);

    filter:

    brightness(1.10);

    box-shadow:

    0 12px 25px

    rgba(210, 151, 34, 0.34);

}


.buy-btn:active:not(:disabled) {

    transform:

    translateY(0);

}


.buy-btn:disabled {

    cursor:

    not-allowed;

    color:

    #a9a9a9;

    background:

    linear-gradient(

        135deg,

        #383838,

        #202020

    );

    border-color:

    #555;

    box-shadow:

    none;

}


/* -----------------------------------------------------
   کنترل تعداد محصول
----------------------------------------------------- */

.qty-box {

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:

    4px;

    border:

    1px solid

    rgba(216, 166, 63, 0.35);

    border-radius:

    14px;

    background:

    rgba(7, 9, 12, 0.90);

}


.qty-box button {

    width: 42px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:

    10px;

    color:

    #1c1104;

    background:

    linear-gradient(

        135deg,

        #ffe19b,

        #ca8b25

    );

    font-size:

    23px;

    font-weight:

    900;

    transition:

    0.2s;

}


.qty-box button:hover {

    transform:

    scale(1.07);

}


.qty {

    color:

    var(--gold-light);

    font-size:

    18px;

    font-weight:

    900;

}


/* -----------------------------------------------------
   کارت‌های در حال بارگذاری
----------------------------------------------------- */

.product-skeleton {

    min-height:

    545px;

    overflow:

    hidden;

    border:

    1px solid

    rgba(216, 166, 63, 0.18);

    border-radius:

    22px;

    background:

    linear-gradient(

        110deg,

        #111215 20%,

        #252018 38%,

        #111215 55%

    );

    background-size:

    250% 100%;

    animation:

    skeletonLoading

    1.5s linear

    infinite;

}


@keyframes skeletonLoading {

    from {

        background-position:

        100% 0;

    }

    to {

        background-position:

        -100% 0;

    }

}


/* =====================================================
   تبلت
===================================================== */

@media
(max-width: 1000px) {

    .category-section {

        padding:

        30px 18px 25px;

    }


    .products {

        grid-template-columns:

        repeat(

            2,

            minmax(0, 1fr)

        );

        gap:

        17px;

    }


    .product-card {

        min-height:

        515px;

    }


    .product-image {

        height:

        245px;

    }


    .discount-badge {

        top:

        220px;

    }

}


/* =====================================================
   موبایل
===================================================== */




/* =====================================================
   موبایل کوچک
===================================================== */


/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 6 از 7
   منوی موبایل + فوتر + بازگشت به بالا
===================================================== */


/* =====================================================
   منوی کناری
===================================================== */

.mobile-menu {

    width: 360px;

    max-width: 88vw;

    height: 100vh;

    position: fixed;

    top: 0;

    right: -420px;

    z-index: 5000;

    overflow-y: auto;

    padding:

    28px 22px 45px;

    border-left:

    1px solid

    rgba(216, 166, 63, 0.40);

    background:

    linear-gradient(

        160deg,

        #17130d 0%,

        #0b0c10 42%,

        #05070a 100%

    );

    box-shadow:

    -20px 0 55px

    rgba(0, 0, 0, 0.70),

    inset

    0 0 45px

    rgba(216, 166, 63, 0.035);

    transition:

    right 0.38s

    cubic-bezier(

        0.22,

        0.8,

        0.25,

        1

    );

}


/* باز شدن منو */

.mobile-menu.active {

    right: 0;

}


/* نور طلایی بالای منو */

.mobile-menu::before {

    content: "";

    position: absolute;

    top: 0;

    right: 12%;

    left: 12%;

    height: 1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold-light),

        transparent

    );

}


/* اسکرول منو */

.mobile-menu::-webkit-scrollbar {

    width: 5px;

}


.mobile-menu::-webkit-scrollbar-track {

    background:

    transparent;

}


.mobile-menu::-webkit-scrollbar-thumb {

    border-radius:

    20px;

    background:

    var(--gold-dark);

}


/* =====================================================
   دکمه بستن منو
===================================================== */

.close-menu {

    width: 45px;

    height: 45px;

    position: absolute;

    top: 18px;

    left: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    var(--gold-light);

    background:

    rgba(216, 166, 63, 0.07);

    border:

    1px solid

    rgba(216, 166, 63, 0.28);

    border-radius:

    13px;

    font-size:

    23px;

    transition:

    0.25s;

}


.close-menu:hover {

    color:

    #ffffff;

    background:

    rgba(216, 166, 63, 0.17);

    border-color:

    var(--gold);

    transform:

    rotate(90deg);

}


/* =====================================================
   بالای منو
===================================================== */

.mobile-menu-top {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:

    20px 0 24px;

    margin-bottom:

    20px;

    border-bottom:

    1px solid

    rgba(216, 166, 63, 0.20);

}


.menu-logo {

    width: 88px;

    height: 99px;

    object-fit: cover;

    margin-bottom:

    12px;

    border:

    2px solid

    var(--gold);

    border-radius:

    50%;

    box-shadow:

    0 0 18px

    rgba(218, 163, 48, 0.30),

    0 0 38px

    rgba(218, 163, 48, 0.10);

}


.mobile-menu-top h2 {

    margin: 0;

    color:

    var(--gold-light);

    font-size:

    24px;

    font-weight:

    900;

}


/* =====================================================
   شماره کاربر
===================================================== */

.mobile-phone {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 50px;

    margin:

    0 0 18px;

    padding:

    10px;

    color:

    #eadcc2;

    background:

    rgba(216, 166, 63, 0.07);

    border:

    1px solid

    rgba(216, 166, 63, 0.22);

    border-radius:

    13px;

    font-size:

    13px;

}


.mobile-phone i {

    color:

    var(--gold);

    font-size:

    18px;

}


#user-phone {

    direction:

    ltr;

    color:

    var(--gold-light);

    font-weight:

    800;

}


/* =====================================================
   لینک‌های اصلی منو
===================================================== */

.mobile-menu > a {

    min-height: 51px;

    display: flex;

    align-items: center;

    padding:

    12px 15px;

    margin:

    7px 0;

    color:

    #e4dac9;

    border:

    1px solid

    transparent;

    border-radius:

    12px;

    font-size:

    15px;

    font-weight:

    650;

    transition:

    0.25s;

}


.mobile-menu > a:hover {

    color:

    var(--gold-light);

    background:

    rgba(216, 166, 63, 0.08);

    border-color:

    rgba(216, 166, 63, 0.23);

    padding-right:

    21px;

}


/* خط جداکننده */

.mobile-menu hr {

    height: 1px;

    margin:

    22px 0;

    border: 0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(216, 166, 63, 0.45),

        transparent

    );

}


/* =====================================================
   گروه‌های منو
===================================================== */

.menu-group {

    margin:

    18px 0;

    padding:

    15px 12px;

    border:

    1px solid

    rgba(216, 166, 63, 0.13);

    border-radius:

    15px;

    background:

    rgba(255, 255, 255, 0.015);

}


.menu-group h3 {

    margin:

    0 0 10px;

    padding-bottom:

    9px;

    color:

    var(--gold);

    border-bottom:

    1px solid

    rgba(216, 166, 63, 0.15);

    font-size:

    15px;

    font-weight:

    900;

}


.menu-group a {

    min-height: 42px;

    display: flex;

    align-items: center;

    padding:

    8px 7px;

    color:

    #c8c0b1;

    border-radius:

    9px;

    font-size:

    13px;

    transition:

    0.2s;

}


.menu-group a:hover {

    color:

    var(--gold-light);

    background:

    rgba(216, 166, 63, 0.07);

    padding-right:

    13px;

}


/* =====================================================
   دکمه خروج
===================================================== */

.logout-btn {

    width: 100%;

    min-height: 50px;

    margin-top:

    25px;

    color:

    #ffb1a9;

    background:

    rgba(180, 37, 27, 0.10);

    border:

    1px solid

    rgba(228, 74, 59, 0.30);

    border-radius:

    13px;

    font-size:

    14px;

    font-weight:

    800;

    transition:

    0.25s;

}


.logout-btn:hover {

    color:

    #ffffff;

    background:

    rgba(190, 40, 28, 0.24);

    border-color:

    rgba(255, 104, 90, 0.65);

}


/* =====================================================
   پس‌زمینه پشت منو
===================================================== */

#menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 4500;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    background:

    rgba(0, 0, 0, 0.76);

    backdrop-filter:

    blur(5px);

    -webkit-backdrop-filter:

    blur(5px);

    transition:

    opacity 0.35s ease,

    visibility 0.35s ease;

}


#menu-overlay.active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* =====================================================
   فوتر
===================================================== */

footer {

    width: 100%;

    position: relative;

    overflow: hidden;

    margin-top:

    70px;

    padding:

    70px 55px 25px;

    border-top:

    1px solid

    rgba(216, 166, 63, 0.35);

    background:

    linear-gradient(

        160deg,

        #0b0c0f,

        #15110b 52%,

        #06080b

    );

}


/* نور طلایی بالای فوتر */

footer::before {

    content: "";

    position: absolute;

    top: 0;

    right: 15%;

    left: 15%;

    height: 2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold-light),

        transparent

    );

    box-shadow:

    0 0 18px

    rgba(222, 164, 42, 0.25);

}


/* نور داخل فوتر */

footer::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 250px;

    top: -150px;

    right: 50%;

    transform:

    translateX(50%);

    pointer-events: none;

    background:

    radial-gradient(

        ellipse,

        rgba(218, 160, 38, 0.09),

        transparent 70%

    );

}


/* کانتینر فوتر */

.footer-container {

    width: 100%;

    max-width: 1400px;

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

    1.5fr 1fr 1fr;

    gap:

    55px;

    margin:

    auto;

}


/* عنوان‌ها */

.footer-container h2,

.footer-container h3 {

    color:

    var(--gold-light);

    font-weight:

    900;

}


.footer-container h2 {

    margin-bottom:

    15px;

    font-size:

    29px;

}


.footer-container h3 {

    margin-bottom:

    18px;

    font-size:

    18px;

}


/* متن فوتر */

.footer-container p {

    max-width:

    440px;

    margin-bottom:

    20px;

    color:

    #bcb3a2;

    font-size:

    14px;

    line-height:

    2.1;

}


/* لینک‌های فوتر */

.footer-container a {

    width: fit-content;

    display: flex;

    align-items: center;

    margin:

    10px 0;

    color:

    #d5ccbd;

    font-size:

    14px;

    line-height:

    1.9;

    transition:

    0.22s;

}


.footer-container a:hover {

    color:

    var(--gold-light);

    transform:

    translateX(-5px);

}


/* آدرس */

.footer-container address {

    margin:

    20px 0;

    color:

    #aaa293;

    font-style:

    normal;

    font-size:

    13px;

    line-height:

    2.15;

}


.footer-container strong {

    color:

    var(--gold);

    font-size:

    17px;

}


/* موقعیت فروشگاه */

.footer-location {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:

    9px;

    color:

    #bcb3a3;

    font-size:

    13px;

    line-height:

    2;

}


.footer-location > i {

    color:

    var(--gold);

    font-size:

    18px;

}


.location-btn {

    padding:

    8px 14px;

    color:

    #1d1205 !important;

    background:

    linear-gradient(

        135deg,

        #ffe29c,

        #c98c27

    );

    border-radius:

    10px;

    font-size:

    12px !important;

    font-weight:

    800;

}


.location-btn:hover {

    transform:

    translateY(-2px) !important;

}


/* =====================================================
   متن سئو پایین فوتر
===================================================== */

.seo-text {

    max-width: 1400px;

    position: relative;

    z-index: 2;

    margin:

    55px auto 0;

    padding:

    25px 0 0;

    border-top:

    1px solid

    rgba(216, 166, 63, 0.15);

    text-align:

    center;

}


.seo-text h2 {

    margin-bottom:

    12px;

    color:

    var(--gold);

    font-size:

    18px;

}


.seo-text p {

    max-width:

    1000px;

    margin:

    10px auto;

    color:

    #8f897d;

    font-size:

    12px;

    line-height:

    2.1;

}


/* =====================================================
   دکمه بازگشت به بالا
===================================================== */

#backToTop {

    width: 54px;

    height: 54px;

    position: fixed;

    left: 25px;

    bottom: 25px;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    #1d1205;

    background:

    linear-gradient(

        135deg,

        #ffe6a7,

        #cf9027,

        #a96715

    );

    border:

    1px solid

    rgba(255, 229, 161, 0.65);

    border-radius:

    50%;

    font-size:

    19px;

    box-shadow:

    0 10px 28px

    rgba(0, 0, 0, 0.48),

    0 0 18px

    rgba(216, 157, 37, 0.18);

    transition:

    transform 0.25s,

    filter 0.25s;

}


#backToTop:hover {

    transform:

    translateY(-6px);

    filter:

    brightness(1.12);

}


/* =====================================================
   تبلت
===================================================== */

@media
(max-width: 900px) {

    footer {

        padding:

        55px 30px 25px;

    }


    .footer-container {

        grid-template-columns:

        repeat(2, 1fr);

        gap:

        35px;

    }


    .footer-container > div:first-child {

        grid-column:

        1 / -1;

    }

}


/* =====================================================
   موبایل
===================================================== */

/* =====================================================
   سکه خطیب
   طراحی جدید از صفر
   مرحله 7 از 7
   دستیار هوشمند + لودر + افکت‌ها + ریسپانسیو نهایی
===================================================== */


/* =====================================================
   لودر شروع سایت
===================================================== */

#loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

    radial-gradient(

        circle at center,

        #21180b 0%,

        #101116 45%,

        #050609 100%

    );

}


.loader-circle {

    width: 68px;

    height: 68px;

    position: relative;

    border:

    4px solid

    rgba(216, 166, 63, 0.15);

    border-top-color:

    #f6d77d;

    border-right-color:

    #c88b25;

    border-radius:

    50%;

    box-shadow:

    0 0 20px

    rgba(216, 166, 63, 0.30);

    animation:

    khatibLoader

    0.9s linear infinite;

}


.loader-circle::before {

    content: "";

    width: 42px;

    height: 42px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform:

    translate(-50%, -50%);

    border:

    2px solid

    rgba(255, 223, 130, 0.25);

    border-radius:

    50%;

}


@keyframes khatibLoader {

    from {

        transform:

        rotate(0deg);

    }

    to {

        transform:

        rotate(360deg);

    }

}


/* =====================================================
   دکمه شناور دستیار هوشمند
===================================================== */

#ai-assistant {

    width: 63px;

    height: 63px;

    position: fixed;

    right: 25px;

    bottom: 24px;

    z-index: 1100;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    #1a1004;

    background:

    linear-gradient(

        135deg,

        #ffe8a9 0%,

        #d89a2c 48%,

        #a86412 100%

    );

    border:

    1px solid

    rgba(255, 232, 165, 0.70);

    border-radius:

    50%;

    font-size:

    26px;

    cursor:

    pointer;

    box-shadow:

    0 12px 35px

    rgba(0, 0, 0, 0.50),

    0 0 25px

    rgba(216, 158, 43, 0.28);

    transition:

    transform 0.25s ease,

    filter 0.25s ease,

    box-shadow 0.25s ease;

    animation:

    aiPulse

    2.4s infinite;

}


#ai-assistant:hover {

    transform:

    translateY(-7px)

    scale(1.06);

    filter:

    brightness(1.10);

    box-shadow:

    0 17px 40px

    rgba(0, 0, 0, 0.60),

    0 0 32px

    rgba(239, 190, 75, 0.42);

}


#ai-assistant i {

    transition:

    transform 0.3s ease;

}


#ai-assistant:hover i {

    transform:

    rotate(-8deg)

    scale(1.12);

}


@keyframes aiPulse {

    0%,

    100% {

        box-shadow:

        0 12px 35px

        rgba(0, 0, 0, 0.50),

        0 0 0 0

        rgba(216, 166, 63, 0.28);

    }

    50% {

        box-shadow:

        0 12px 35px

        rgba(0, 0, 0, 0.50),

        0 0 0 11px

        rgba(216, 166, 63, 0);

    }

}


/* =====================================================
   پنجره چت هوشمند
===================================================== */

#ai-chat {

    width: 385px;

    max-width:

    calc(100vw - 30px);

    height: 550px;

    max-height:

    calc(100vh - 115px);

    position: fixed;

    right: 25px;

    bottom: 100px;

    z-index: 1200;

    display: none;

    flex-direction: column;

    overflow: hidden;

    color:

    #eee6d8;

    background:

    linear-gradient(

        160deg,

        rgba(24, 21, 15, 0.98),

        rgba(8, 10, 14, 0.99)

    );

    border:

    1px solid

    rgba(216, 166, 63, 0.34);

    border-radius:

    21px;

    box-shadow:

    0 25px 70px

    rgba(0, 0, 0, 0.72),

    0 0 35px

    rgba(216, 166, 63, 0.08);

    backdrop-filter:

    blur(18px);

    -webkit-backdrop-filter:

    blur(18px);

}


/* =====================================================
   سربرگ چت
===================================================== */

.ai-header {

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:

    13px 16px;

    color:

    #211403;

    background:

    linear-gradient(

        135deg,

        #ffe5a0,

        #d79a2d,

        #a86715

    );

    font-size:

    15px;

    font-weight:

    900;

    box-shadow:

    0 5px 18px

    rgba(0, 0, 0, 0.20);

}


.ai-header span {

    display: flex;

    align-items: center;

    gap: 7px;

}


#close-ai {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

    #251604;

    background:

    rgba(255, 255, 255, 0.18);

    border:

    1px solid

    rgba(80, 45, 4, 0.18);

    border-radius:

    10px;

    font-size:

    20px;

    cursor:

    pointer;

    transition:

    0.2s;

}


#close-ai:hover {

    color:

    #ffffff;

    background:

    rgba(85, 35, 0, 0.42);

    transform:

    rotate(90deg);

}


/* =====================================================
   پیام‌های چت
===================================================== */

#ai-messages {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 12px;

    overflow-y: auto;

    padding:

    18px 15px;

    background:

    radial-gradient(

        circle at top,

        rgba(216, 166, 63, 0.05),

        transparent 42%

    );

}


#ai-messages::-webkit-scrollbar {

    width: 5px;

}


#ai-messages::-webkit-scrollbar-thumb {

    border-radius:

    20px;

    background:

    rgba(216, 166, 63, 0.45);

}


.ai-message {

    width: fit-content;

    max-width: 85%;

    padding:

    11px 14px;

    border-radius:

    15px;

    font-size:

    13px;

    line-height:

    2;

    word-break:

    break-word;

    animation:

    messageShow

    0.25s ease;

}


.ai-message.bot {

    align-self:

    flex-start;

    color:

    #ddd4c5;

    background:

    rgba(255, 255, 255, 0.055);

    border:

    1px solid

    rgba(216, 166, 63, 0.13);

    border-bottom-right-radius:

    4px;

}


.ai-message.user {

    align-self:

    flex-end;

    color:

    #231504;

    background:

    linear-gradient(

        135deg,

        #f8d983,

        #c98720

    );

    border-bottom-left-radius:

    4px;

    font-weight:

    650;

}


@keyframes messageShow {

    from {

        opacity: 0;

        transform:

        translateY(8px);

    }

    to {

        opacity: 1;

        transform:

        translateY(0);

    }

}


/* =====================================================
   پایین چت
===================================================== */

.ai-footer {

    min-height: 75px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:

    12px;

    background:

    rgba(0, 0, 0, 0.28);

    border-top:

    1px solid

    rgba(216, 166, 63, 0.13);

}


#ai-input {

    min-width: 0;

    flex: 1;

    height: 46px;

    padding:

    0 14px;

    color:

    #eee6d7;

    background:

    rgba(255, 255, 255, 0.055);

    border:

    1px solid

    rgba(216, 166, 63, 0.20);

    border-radius:

    12px;

    outline:

    none;

    font-family:

    inherit;

    font-size:

    13px;

    transition:

    0.2s;

}


#ai-input::placeholder {

    color:

    #827b70;

}


#ai-input:focus {

    border-color:

    rgba(226, 175, 65, 0.65);

    box-shadow:

    0 0 0 3px

    rgba(216, 166, 63, 0.08);

}


#send-ai {

    min-width: 70px;

    height: 46px;

    padding:

    0 15px;

    color:

    #241604;

    background:

    linear-gradient(

        135deg,

        #ffe29b,

        #c98520

    );

    border:

    0;

    border-radius:

    12px;

    font-family:

    inherit;

    font-size:

    13px;

    font-weight:

    900;

    cursor:

    pointer;

    transition:

    0.2s;

}


#send-ai:hover {

    filter:

    brightness(1.10);

    transform:

    translateY(-2px);

}


/* =====================================================
   افکت نرم برای کل سایت
===================================================== */

html {

    scroll-behavior:

    smooth;

}


a,

button,

input,

select {

    -webkit-tap-highlight-color:

    transparent;

}


button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible {

    outline:

    2px solid

    var(--gold-light);

    outline-offset:

    3px;

}


/* =====================================================
   موبایل — اصلاح نهایی
===================================================== */



/* =====================================================
   صفحه‌های خیلی کوچک
===================================================== */




/* =====================================================
   کاهش حرکت برای کاربرانی که ترجیح می‌دهند
===================================================== */

@media
(prefers-reduced-motion: reduce) {

    * {

        scroll-behavior:

        auto !important;

        animation-duration:

        0.01ms !important;

        animation-iteration-count:

        1 !important;

        transition-duration:

        0.01ms !important;

    }

}
/* =====================================================
   اصلاح نهایی هدر، قیمت طلا و کارت محصولات
   این کد را در آخر style.css قرار بده
===================================================== */


/* =====================================================
   1) هدر — جای درست همبرگری و سبد خرید
===================================================== */

.main-header {

    position: relative;

    min-height: 105px;

    display: grid !important;

    grid-template-columns:
    1fr auto 1fr;

    align-items: center;

    padding:
    10px 42px !important;

    background:

    linear-gradient(
        180deg,
        #080b10 0%,
        #07090d 100%
    ) !important;

    border-bottom:
    1px solid
    rgba(218, 165, 55, 0.45);

}


/* سمت راست هدر */

.header-right {

    justify-self: start;

    display: flex !important;

    align-items: center;

    gap: 24px;

}


/* سمت چپ هدر */

.header-left {

    justify-self: end;

    display: flex;

    align-items: center;

}


/* لوگو و نام وسط */

.header-center {

    justify-self: center;

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


/* =====================================================
   2) کوچک‌تر شدن لوگو
===================================================== */

.header-logo {

    width: 62px !important;

    height: 71px !important;

    min-width: 62px;

    object-fit: cover;

    border-radius: 50%;

    border:
    2px solid
    rgba(11, 11, 10, 0.75);

    box-shadow:

    0 0 18px
    rgba(223, 166, 49, 0.25);

}


.logo-title {

    margin: 0;

    color:
    #f1cd76 !important;

    font-size:
    28px !important;

    font-weight:
    900;

    white-space:
    nowrap;

    text-shadow:

    0 0 15px
    rgba(221, 167, 54, 0.18);

}


/* =====================================================
   3) همبرگری
===================================================== */

.hamburger {

    width: 54px !important;

    height: 54px !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    padding: 0;

    color:
    #e6c36f !important;

    background:
    transparent !important;

    border: 0 !important;

    border-radius: 12px;

    font-size:
    29px !important;

    cursor: pointer;

    transition:
    0.25s;

}


.hamburger:hover {

    color:
    #ffe29a !important;

    background:
    rgba(216, 166, 63, 0.08) !important;

    transform:
    scale(1.06);

}


/* =====================================================
   4) سبد خرید
===================================================== */

.cart-btn {

    width: 54px !important;

    height: 54px !important;

    position: relative;

    display: flex !important;

    align-items: center;

    justify-content: center;

    color:
    #e6c36f !important;

    background:
    transparent !important;

    border: 0 !important;

    border-radius: 12px;

    font-size:
    28px !important;

    text-decoration: none;

    transition:
    0.25s;

}


.cart-btn:hover {

    color:
    #ffe29a !important;

    background:
    rgba(216, 166, 63, 0.08) !important;

    transform:
    translateY(-2px);

}


#cart-count {

    min-width: 22px;

    height: 22px;

    position: absolute;

    top: 1px;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
    0 5px;

    color:
    #251704;

    background:

    linear-gradient(
        135deg,
        #ffe49b,
        #cf9227
    );

    border:
    2px solid
    #090b0f;

    border-radius:
    50px;

    font-size:
    11px;

    font-weight:
    900;

    line-height:
    1;

}


/* =====================================================
   5) دکمه ورود و ثبت‌نام
===================================================== */

.login-btn {

    min-width: 172px;

    height: 62px;

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
    0 23px;

    color:
    #eadfca !important;

    background:

    linear-gradient(
        145deg,
        rgba(22, 20, 15, 0.95),
        rgba(10, 12, 16, 0.98)
    ) !important;

    border:
    1px solid
    rgba(224, 173, 61, 0.72) !important;

    border-radius:
    14px;

    font-family:
    inherit;

    font-size:
    15px;

    font-weight:
    700;

    text-decoration:
    none;

    transition:
    0.25s;

}


.login-btn::after {

    content:
    "ورود / ثبت نام";

    white-space:
    nowrap;

}


.login-btn i {

    color:
    #e5bd61;

    font-size:
    20px;

}


.login-btn:hover {

    color:
    #fff4d8 !important;

    border-color:
    #f0c85f !important;

    background:

    linear-gradient(
        145deg,
        rgba(47, 37, 20, 0.98),
        rgba(15, 15, 15, 0.98)
    ) !important;

    box-shadow:

    0 0 22px
    rgba(217, 165, 52, 0.13);

    transform:
    translateY(-2px);

}


/* =====================================================
   6) قیمت یک گرم طلای 18 عیار
===================================================== */

.gold-price {

    width:
    min(1455px, calc(100% - 76px)) !important;

    min-height:
    78px;

    margin:
    16px auto !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    padding:
    12px 25px !important;

    color:
    #eadfca;

    background:

    radial-gradient(
        circle at 50% 50%,
        rgba(216, 166, 63, 0.11),
        transparent 38%
    ),

    linear-gradient(
        135deg,
        #0d1015,
        #080a0e
    ) !important;

    border:
    1px solid
    rgba(222, 170, 55, 0.72) !important;

    border-radius:
    17px !important;

    box-shadow:

    inset 0 0 30px
    rgba(216, 166, 63, 0.035),

    0 10px 28px
    rgba(0, 0, 0, 0.28);

}


#gold-price {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color:
    #e8ded0 !important;

    font-size:
    17px !important;

    font-weight:
    700;

    text-align:
    center;

    direction:
    rtl;

}


#gold-price::before {



    font-size:
    32px;

    filter:

    drop-shadow(
        0 0 10px
        rgba(235, 180, 57, 0.45)
    );

}


/* =====================================================
   7) نوار جستجو
===================================================== */



#search,

#sort {

    height:
    60px !important;

    color:
    #e9dfd0 !important;

    background:

    linear-gradient(
        135deg,
        #11141a,
        #090b0f
    ) !important;

    border:
    1px solid
    rgba(218, 166, 54, 0.55) !important;

    border-radius:
    15px !important;

    font-family:
    inherit;

    font-size:
    15px;

    outline:
    none;

}


#search {

    padding:
    0 22px;

}


#search::placeholder {

    color:
    #aaa193;

}


#search:focus,

#sort:focus {

    border-color:
    #e8bd58 !important;

    box-shadow:

    0 0 0 3px
    rgba(220, 166, 50, 0.07);

}


/* =====================================================
   8) کارت محصولات — عرض بیشتر و متن کامل
===================================================== */

.products {

    display: grid !important;

    grid-template-columns:

    repeat(
        auto-fit,
        minmax(300px, 1fr)
    ) !important;

    gap:
    20px !important;

}


.product-card {

    min-width: 0 !important;

    width: 100% !important;

    overflow: hidden;

    padding:
    12px !important;

    background:

    linear-gradient(
        145deg,
        #11151a,
        #090b0e
    ) !important;

    border:
    1px solid
    rgba(211, 157, 47, 0.53) !important;

    border-radius:
    19px !important;

}


.product-card a {

    display: block;

    width: 100%;

    text-decoration:
    none;

}


.product-card h3 {

    width: 100% !important;

    min-height:
    52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
    12px 0 5px !important;

    padding:
    0 8px;

    overflow:
    visible !important;

    color:
    #f0ddae !important;

    font-size:
    17px !important;

    font-weight:
    800;

    line-height:
    1.9 !important;

    text-align:
    center;

    white-space:
    normal !important;

    word-break:
    normal;

    overflow-wrap:
    anywhere;

}


.product-card h2 {

    width: 100%;

    min-height:
    92px;

    display: flex;

    flex-direction:
    column;

    align-items:
    center;

    justify-content:
    center;

    margin:
    5px 0 12px !important;

    padding:
    5px;

    overflow:
    visible !important;

    color:
    #e7c36c !important;

    font-size:
    20px !important;

    line-height:
    1.9 !important;

    text-align:
    center;

    white-space:
    normal !important;

}


.product-card .product-image {

    width: 100%;

    height:
    205px !important;

    overflow: hidden;

    border-radius:
    13px;

}


.product-card .product-img {

    width: 100% !important;

    height:
    205px !important;

    display: block;

    object-fit:
    cover !important;

}


.rating {

    margin:
    5px 0 8px;

    color:
    #f3ba39;

    font-size:
    17px;

    letter-spacing:
    2px;

}


.stock-status {

    min-height:
    28px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.price-box {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

}


/* دکمه خرید */

.cart-controls {

    width: 100%;

    margin-top:
    10px;

}


.buy-btn {

    width: 100% !important;

    min-height:
    53px !important;

    padding:
    10px 15px;

    color:
    #2b1a05 !important;

    background:

    linear-gradient(
        135deg,
        #ffe18c,
        #e1a12d
    ) !important;

    border:
    0 !important;

    border-radius:
    13px !important;

    font-family:
    inherit;

    font-size:
    14px !important;

    font-weight:
    900;

    white-space:
    normal !important;

    cursor:
    pointer;

    transition:
    0.25s;

}


.buy-btn:hover {

    filter:
    brightness(1.08);

    transform:
    translateY(-2px);

    box-shadow:

    0 8px 22px
    rgba(223, 165, 43, 0.22);

}


/* =====================================================
   9) موبایل
===================================================== */

/* =========================
   اصلاح SweetAlert سکه خطیب
========================= */

.swal2-container {

    position: fixed !important;

    inset: 0 !important;

    z-index: 999999 !important;

}


.khatib-swal-popup {

    direction: rtl !important;

    font-family:
    Vazirmatn,
    sans-serif !important;

    border:

    1px solid

    rgba(
        212,
        166,
        63,
        0.55
    ) !important;

    border-radius:
    20px !important;

    box-shadow:

    0 25px 70px

    rgba(
        0,
        0,
        0,
        0.8
    ) !important;

}


.khatib-swal-title {

    color:
    #f4dfb4 !important;

    font-weight:
    900 !important;

}


.khatib-swal-text {

    color:
    #ddd !important;

    line-height:
    2 !important;

}


.khatib-swal-button {

    min-width:
    110px !important;

    border-radius:
    10px !important;

    font-family:
    Vazirmatn,
    sans-serif !important;

    font-weight:
    800 !important;

    box-shadow:

    0 7px 20px

    rgba(
        212,
        166,
        63,
        0.25
    ) !important;

}


body.swal2-shown {

    overflow:
    auto !important;

    padding-right:
    0 !important;

}


body.swal2-height-auto {

    height:
    auto !important;

}
/* ==================================
   مکعب سه‌بعدی دسته‌بندی سکه خطیب
================================== */

/* =========================================
   مکعب سه‌بعدی دسته‌بندی‌ها
   نسخه نهایی - فقط همین یک نسخه
========================================= */
/* =====================================
   مکعب سه‌بعدی دسته‌بندی‌ها
===================================== */

/* =========================================
   مکعب سه‌بعدی دسته‌بندی‌ها - نسخه جدید
========================================= */

/* ===============================
   Fix Cube Hover
   =============================== */

/* =====================================
       DECORATIVE GOLD 3D CUBE
===================================== */

.gold-showcase{

    width:100%;

    min-height:760px;

    position:relative;

    overflow:hidden;

    padding:90px 20px 70px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:

    radial-gradient(
        circle at 50% 45%,
        rgba(212,175,55,.14),
        transparent 32%
    ),

    radial-gradient(
        circle at 15% 15%,
        rgba(255,215,0,.08),
        transparent 25%
    ),

    linear-gradient(
        145deg,
        #090909,
        #17130a,
        #090909
    );

}


/* =====================================
          BACKGROUND LIGHTS
===================================== */

.gold-light{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(15px);

}


.gold-light-one{

    width:380px;

    height:380px;

    top:-180px;

    right:-120px;

    background:

    rgba(
        255,
        202,
        40,
        .12
    );

}


.gold-light-two{

    width:320px;

    height:320px;

    bottom:-170px;

    left:-100px;

    background:

    rgba(
        212,
        175,
        55,
        .10
    );

}


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

.gold-showcase-title{

    position:relative;

    z-index:5;

    text-align:center;

    margin-bottom:35px;

}


.gold-showcase-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 20px;

    margin-bottom:15px;

    border-radius:50px;

    color:#ffe98b;

    font-size:14px;

    background:

    rgba(
        255,
        215,
        0,
        .08
    );

    border:

    1px solid

    rgba(
        255,
        215,
        0,
        .28
    );

    box-shadow:

    0 0 20px

    rgba(
        255,
        215,
        0,
        .08
    );

}


.gold-showcase-title h2{

    margin:0;

    color:#ffffff;

    font-size:42px;

    font-weight:900;

    line-height:1.5;

    text-shadow:

    0 5px 25px

    rgba(
        0,
        0,
        0,
        .8
    );

}


.gold-showcase-title p{

    margin:12px 0 0;

    color:#bfbfbf;

    font-size:16px;

}


/* =====================================
          3D CUBE STAGE
===================================== */

.gold-cube-stage{

    width:380px;

    height:430px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1500px;

    perspective-origin:

    center center;

}


/* =====================================
             3D CUBE
===================================== */

.gold-3d-cube{

    width:270px;

    height:270px;

    position:relative;

    transform-style:

    preserve-3d;

    transform:

    rotateX(-18deg)

    rotateY(25deg);

    animation:

    goldCubeRotate

    18s

    linear

    infinite;

    will-change:

    transform;

}


/* =====================================
          CUBE ANIMATION
===================================== */

@keyframes goldCubeRotate{

    0%{

        transform:

        rotateX(-18deg)

        rotateY(0deg);

    }


    25%{

        transform:

        rotateX(-10deg)

        rotateY(90deg);

    }


    50%{

        transform:

        rotateX(-20deg)

        rotateY(180deg);

    }


    75%{

        transform:

        rotateX(-12deg)

        rotateY(270deg);

    }


    100%{

        transform:

        rotateX(-18deg)

        rotateY(360deg);

    }

}


/* =====================================
           CUBE FACES
===================================== */

.gold-cube-side{

    position:absolute;

    width:270px;

    height:270px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    border:

    2px solid

    rgba(
        255,
        219,
        92,
        .42
    );

    background:

    linear-gradient(

        145deg,

        rgba(
            44,
            39,
            25,
            .96
        ),

        rgba(
            10,
            10,
            9,
            .98
        )

    );

    box-shadow:

    inset

    0 0 40px

    rgba(
        255,
        215,
        0,
        .06
    ),

    0 0 35px

    rgba(
        255,
        215,
        0,
        .12
    );

    backface-visibility:

    hidden;

    -webkit-backface-visibility:

    hidden;

}


/* =====================================
           FACE SHINE
===================================== */

.gold-cube-side::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(

        125deg,

        transparent 20%,

        rgba(
            255,
            255,
            255,
            .10
        ),

        transparent 65%

    );

    animation:

    goldFaceShine

    5s

    ease-in-out

    infinite;

}


@keyframes goldFaceShine{

    0%{

        transform:

        translateX(-130%);

    }


    45%{

        transform:

        translateX(130%);

    }


    100%{

        transform:

        translateX(130%);

    }

}


/* =====================================
          FACE POSITIONS
===================================== */


/* جلو */

.gold-side-front{

    transform:

    rotateY(0deg)

    translateZ(135px);

}


/* راست */

.gold-side-right{

    transform:

    rotateY(90deg)

    translateZ(135px);

}


/* پشت */

.gold-side-back{

    transform:

    rotateY(180deg)

    translateZ(135px);

}


/* چپ */

.gold-side-left{

    transform:

    rotateY(-90deg)

    translateZ(135px);

}


/* بالا */

.gold-side-top{

    transform:

    rotateX(90deg)

    translateZ(135px);

}


/* پایین */

.gold-side-bottom{

    transform:

    rotateX(-90deg)

    translateZ(135px);

}


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

.gold-side-icon{

    width:92px;

    height:92px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:50%;

    font-size:42px;

    color:#1a160b;

    background:

    radial-gradient(

        circle at 35% 30%,

        #fff6c8,

        #e9c34d 55%,

        #a97913

    );

    box-shadow:

    0 0 30px

    rgba(
        255,
        215,
        0,
        .48
    ),

    inset

    0 2px 8px

    rgba(
        255,
        255,
        255,
        .65
    );

}


/* =====================================
           FACE TEXT
===================================== */

.gold-cube-side h3{

    position:relative;

    z-index:2;

    margin:0 0 10px;

    color:#ffffff;

    font-size:28px;

    font-weight:900;

}


.gold-cube-side span{

    position:relative;

    z-index:2;

    color:#d4d4d4;

    font-size:14px;

}


/* =====================================
            TOP FACE
===================================== */

.gold-top-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:13px;

    color:#f5d464;

    font-size:40px;

}


.gold-top-content strong{

    font-size:21px;

    color:#ffffff;

}


/* =====================================
           BOTTOM FACE
===================================== */

.gold-side-bottom{

    color:#d4af37;

    font-weight:900;

    letter-spacing:5px;

}


/* =====================================
          FLOOR LIGHT
===================================== */

.gold-cube-floor{

    position:absolute;

    width:330px;

    height:105px;

    bottom:30px;

    border-radius:50%;

    pointer-events:none;

    background:

    radial-gradient(

        ellipse,

        rgba(
            255,
            203,
            45,
            .30
        ),

        rgba(
            255,
            203,
            45,
            .08
        ) 40%,

        transparent 72%

    );

    filter:

    blur(8px);

    transform:

    rotateX(72deg);

}


/* =====================================
          GOLD PARTICLES
===================================== */

.gold-particle{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    pointer-events:none;

    background:#ffe56e;

    box-shadow:

    0 0 12px

    #ffd700;

    animation:

    goldParticleFloat

    4s

    ease-in-out

    infinite;

}


.particle-one{

    top:55px;

    right:20px;

}


.particle-two{

    top:150px;

    left:10px;

    animation-delay:

    1s;

}


.particle-three{

    right:5px;

    bottom:110px;

    animation-delay:

    2s;

}


.particle-four{

    left:45px;

    bottom:40px;

    animation-delay:

    .5s;

}


.particle-five{

    top:20px;

    left:80px;

    animation-delay:

    1.5s;

}


@keyframes goldParticleFloat{

    0%,

    100%{

        transform:

        translateY(0)

        scale(.8);

        opacity:.4;

    }


    50%{

        transform:

        translateY(-25px)

        scale(1.3);

        opacity:1;

    }

}


/* =====================================
          FOOTER TEXT
===================================== */

.gold-showcase-footer{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-top:10px;

    color:#d8b74d;

    font-size:14px;

}


.gold-footer-line{

    width:70px;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        #d4af37

    );

}


.gold-footer-line:last-child{

    transform:

    rotate(180deg);

}


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

@media
(max-width:768px){

    .gold-showcase{

        min-height:690px;

        padding:

        65px 15px 50px;

    }


    .gold-showcase-title{

        margin-bottom:

        18px;

    }


    .gold-showcase-title h2{

        font-size:

        29px;

    }


    .gold-showcase-title p{

        font-size:

        14px;

    }


    .gold-cube-stage{

        width:330px;

        height:370px;

        transform:

        scale(.88);

        margin:

        -10px 0;

    }


    .gold-showcase-footer{

        margin-top:

        -5px;

        font-size:

        12px;

    }

}


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




/* =====================================
      REDUCE MOTION ACCESSIBILITY
===================================== */

@media
(prefers-reduced-motion:reduce){

    .gold-3d-cube,

    .gold-cube-side::before,

    .gold-particle{

        animation:

        none;

    }

}
/* =====================================
CUBE FINAL CONTROL FIX
===================================== */

.gold-3d-cube{


animation:none !important;

transform:

rotateX(-18deg)

rotateY(25deg);

transition:

transform .12s linear;

cursor:grab;


}

/* هنگام کشیدن */

.gold-cube-stage.is-dragging

.gold-3d-cube{


cursor:grabbing;

transition:none;


}

/* وجه بالا */

.gold-side-top{


transform:

rotateX(90deg)

translateZ(135px);


}

/* وجه پایین */

.gold-side-bottom{


transform:

rotateX(-90deg)

translateZ(135px);


}

/* واضح‌تر شدن وجه بالا و پایین */

.gold-side-top,

.gold-side-bottom{


background:

linear-gradient(

    145deg,

    #3a3116,

    #0b0a07

);

border:

2px solid

rgba(
    255,
    220,
    90,
    .55
);


}

/* جلوگیری از انتخاب متن */

.gold-cube-stage{


user-select:none;

-webkit-user-select:none;

touch-action:none;


}

/* ==================================
اصلاح جای متن جستجوی محصول
================================== */

.filter-bar{
    position: relative;
}

/* اگر ذره‌بین با ::before ساخته شده */

.filter-bar::before{
    right: 18px;
    left: auto;
    z-index: 2;
}

/* جلوتر رفتن متن جستجو از آیکون */

#search{
    padding-right: 52px !important;
    padding-left: 15px !important;

    text-align: right;

    direction: rtl;
}

/* فاصله متن هنگام تایپ */

#search::placeholder{
    padding-right: 5px;
    opacity: 0.8;
}
/* ==================================
مرتب‌سازی منوی همبرگری
================================== */

.mobile-menu{

    overflow-y: auto;

    padding-bottom: 30px;

}


.mobile-menu .menu-group{

    margin: 16px 12px;

}


.mobile-menu .menu-group h3{

    margin: 0 0 8px;

    padding: 8px 12px;

    font-size: 15px;

    color: #d4af37;

    border-right: 3px solid #d4af37;

}


.mobile-menu .menu-group a{

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding: 10px 14px;

    border-radius: 10px;

}


.mobile-menu hr{

    width: calc(100% - 30px);

    margin: 14px auto;

    border: none;

    border-top: 1px solid
    rgba(212,175,55,0.25);

}


/* شماره کاربر */

.mobile-phone{

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 12px;

    padding: 12px;

    border-radius: 12px;

}


/* دکمه خروج بعد از درباره ما */

.logout-btn{

    position: static !important;

    width: calc(100% - 24px);

    margin: 20px 12px 30px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    border-radius: 12px;

    box-sizing: border-box;

}
/* ===============================
   MOBILE RESPONSIVE
===============================*/


/* ==========================================
   MOBILE FIX
   فقط اصلاح عرض صفحه + جستجو + مرتب سازی
==========================================*/

@media only screen and (max-width:768px){

html,
body{

    width:100%;
    max-width:100%;
    overflow-x:hidden;

}

main,
.container,
.wrapper,
.page,
.content{

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding-right:12px !important;
    padding-left:12px !important;

    box-sizing:border-box;
}

/* کل صفحه از عرض گوشی استفاده کند */

.hero,
.features,
.category-section,
.products,
.filter-bar{

    width:100% !important;
    max-width:100% !important;
}

/* جستجو و مرتب سازی کنار هم */

.filter-bar{

    display:grid !important;

    grid-template-columns:1fr 115px !important;

    align-items:center;

    gap:10px;

    margin:18px 0 22px;

}

/* جستجو */

#search{

    width:100% !important;

    height:46px !important;

    padding:0 42px 0 12px !important;

    border-radius:12px !important;

    font-size:14px !important;

}

/* مرتب سازی */

#sort{

    width:115px !important;

    min-width:115px;

    height:46px !important;

    border-radius:12px !important;

    font-size:13px !important;

    padding:0 24px 0 8px !important;

}

/* آیکون جستجو */

.filter-bar::before{

    right:14px !important;

    top:23px !important;

    font-size:20px !important;

}

/* فلش مرتب سازی */

.filter-bar::after{

    left:10px !important;

    top:23px !important;

    font-size:16px !important;

}

}
/* =====================================
   دکمه ورود و ثبت‌نام داخل منوی موبایل
===================================== */

.mobile-menu .header-left {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 0 18px;

    padding: 0;

}


.mobile-menu .login-btn {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 16px;

    border-radius: 13px;

    color: #f3c64e;

    background:
    linear-gradient(
        135deg,
        rgba(201, 162, 39, 0.18),
        rgba(201, 162, 39, 0.06)
    );

    border:
    1px solid
    rgba(201, 162, 39, 0.42);

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

    text-decoration: none;

    font-family:
    "Vazirmatn",
    sans-serif;

    font-size: 13px;

    font-weight: 700;

    transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


/* اضافه کردن متن ورود و ثبت‌نام */

.mobile-menu .login-btn::after {

    content:
    "ورود و ثبت‌نام";

}


/* آیکون */

.mobile-menu .login-btn i {

    font-size: 17px;

    margin: 0;

    color: #f3c64e;

}


/* افکت لمس */

.mobile-menu .login-btn:active {

    transform:
    scale(0.97);

}


/* افکت هنگام قرار گرفتن موس */

.mobile-menu .login-btn:hover {

    background:
    rgba(201, 162, 39, 0.22);

    border-color:
    rgba(245, 200, 76, 0.7);

    box-shadow:
    0 7px 22px
    rgba(201, 162, 39, 0.12);

}


/* موبایل‌های خیلی کوچک */

@media (max-width: 380px) {

    .mobile-menu .login-btn {

        min-height: 43px;

        font-size: 12px;

        border-radius: 11px;

    }

}
/* =========================================================
   FIX نهایی جای جستجو - فقط لپ تاپ و دسکتاپ
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* خود نوار */
    body main .filter-bar {

        /* مهم‌ترین قسمت: چسبیدن به چپ */
        float: left !important;

        width: 700px !important;
        max-width: 700px !important;
        min-width: 700px !important;

        height: 64px !important;
        min-height: 64px !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 20px !important;

        /* حذف marginهای قبلی */
        margin-top: 16px !important;
        margin-right: 0 !important;
        margin-bottom: 25px !important;
        margin-left: 0 !important;

        padding: 0 !important;

        position: relative !important;

        left: 0 !important;
        right: auto !important;

        transform: none !important;

        direction: ltr !important;

        box-sizing: border-box !important;
    }


    /* =========================
       جستجو
       ========================= */

    body main .filter-bar #search {

        width: 460px !important;
        min-width: 460px !important;
        max-width: 460px !important;

        height: 60px !important;

        flex: 0 0 460px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: right !important;
    }


    /* =========================
       مرتب سازی
       ========================= */

    body main .filter-bar #sort {

        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 60px !important;

        flex: 0 0 220px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: center !important;
    }


    /* =========================
       آیکون جستجو
       ========================= */

    body main .filter-bar::before {

        right: auto !important;
        left: 420px !important;

        top: 50% !important;

        transform: translateY(-50%) !important;
    }


    /* =========================
       فلش مرتب سازی
       ========================= */

    body main .filter-bar::after {

        left: 255px !important;

        right: auto !important;

        top: 50% !important;

        transform: translateY(-58%) !important;
    }

}


/* =========================================================
   موبایل و تبلت = بدون تغییر
   ========================================================= */

@media screen and (max-width: 1024px) {

    body main .filter-bar {
        float: none !important;
    }

}
/* =====================================================
   فیلتر مخصوص دسکتاپ و موبایل
===================================================== */

/* =========================
   دسکتاپ / لپ‌تاپ
   ========================= */

@media screen and (min-width: 1025px) {

    /* فیلتر داخل هدر = مخصوص کامپیوتر */
    .main-header > .filter-bar {
        display: flex !important;

        width: 650px !important;
        max-width: 650px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 15px !important;

        margin: 0 !important;
        padding: 0 !important;

        direction: ltr !important;
    }

    /* جستجوی داخل هدر */
    .main-header > .filter-bar #search {
        width: 430px !important;
        min-width: 430px !important;
        max-width: 430px !important;

        direction: rtl !important;
        text-align: right !important;
    }

    /* مرتب‌سازی داخل هدر */
    .main-header > .filter-bar #sort {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;

        direction: rtl !important;
        text-align: center !important;
    }


    /* فیلتر داخل MAIN = مخصوص موبایل
       روی کامپیوتر کاملاً مخفی */
    main > .filter-bar {
        display: none !important;
    }
}


/* =========================
   موبایل و تبلت
   ========================= */

@media screen and (max-width: 1024px) {

    /* فیلتر داخل هدر = روی موبایل مخفی */
    .main-header > .filter-bar {
        display: none !important;
    }

    /* فیلتر داخل MAIN = مخصوص موبایل */
    main > .filter-bar {
        display: flex !important;

        width: calc(100% - 30px) !important;
        max-width: none !important;

        margin: 15px auto 25px !important;

        align-items: center !important;
        gap: 10px !important;

        direction: rtl !important;
    }

    main > .filter-bar #search {
        flex: 1 !important;

        width: auto !important;
        min-width: 0 !important;

        direction: rtl !important;
        text-align: right !important;
    }

    main > .filter-bar #sort {
        width: 150px !important;
        min-width: 150px !important;

        direction: rtl !important;
        text-align: center !important;
    }
}
/* =========================================================
   FINAL FILTER LAYOUT
   دسکتاپ: فیلتر کنار لوگو
   موبایل: فیلتر داخل صفحه
========================================================= */


/* =========================================================
   💻 LAPTOP / DESKTOP
========================================================= */

@media only screen and (min-width: 1025px) {

    /* -----------------------------------------
       فیلتر داخل HEADER
       فقط برای لپ‌تاپ
    ----------------------------------------- */

    header.main-header > .filter-bar {

        display: flex !important;

        position: absolute !important;

        /* جای فیلتر نسبت به هدر */
        left: 30px !important;
        right: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 620px !important;
        max-width: 620px !important;
        min-width: 620px !important;

        height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 14px !important;

        direction: ltr !important;

        z-index: 9999 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       جستجوی کنار لوگو
    ----------------------------------------- */

    header.main-header > .filter-bar #search {

        display: block !important;

        width: 410px !important;
        min-width: 410px !important;
        max-width: 410px !important;

        height: 58px !important;

        flex: 0 0 410px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: right !important;
    }


    /* -----------------------------------------
       ارزان ترین / گران ترین
       کوچکتر و همسان
    ----------------------------------------- */

    header.main-header > .filter-bar #sort {

        display: block !important;

        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;

        height: 58px !important;

        flex: 0 0 195px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: center !important;

        font-size: 15px !important;
    }


    /* -----------------------------------------
       فیلتر دوم داخل MAIN
       کاملاً مخفی
    ----------------------------------------- */

    body main > .filter-bar {

        display: none !important;

    }

}


/* =========================================================
   📱 MOBILE / TABLET
========================================================= */

@media only screen and (max-width: 1024px) {

    /* -----------------------------------------
       فیلتر داخل HEADER
       کاملاً مخفی
    ----------------------------------------- */

    header.main-header > .filter-bar {

        display: none !important;

    }


    /* -----------------------------------------
       فیلتر داخل MAIN
       فقط موبایل
    ----------------------------------------- */

    body main > .filter-bar {

        display: flex !important;

        position: relative !important;

        width: calc(100% - 30px) !important;

        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 15px auto 25px !important;

        padding: 0 !important;

        align-items: center !important;

        gap: 10px !important;

        direction: rtl !important;

        box-sizing: border-box !important;

        transform: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
    }


    /* جستجوی موبایل */

    body main > .filter-bar #search {

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        flex: 1 1 auto !important;

        height: 55px !important;

        margin: 0 !important;

        direction: rtl !important;

        text-align: right !important;

        box-sizing: border-box !important;
    }


    /* مرتب سازی موبایل */

    body main > .filter-bar #sort {

        width: 145px !important;

        min-width: 145px !important;

        max-width: 145px !important;

        height: 55px !important;

        margin: 0 !important;

        direction: rtl !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }

}
/* =====================================================
   فیلتر لپ تاپ - نسخه جمع و جور
===================================================== */

@media only screen and (min-width: 1025px) {

    header.main-header > .filter-bar {
        display: flex !important;

        position: absolute !important;

        left: 25px !important;
        right: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 440px !important;
        min-width: 440px !important;
        max-width: 440px !important;

        height: 52px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 10px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        direction: ltr !important;

        z-index: 9999 !important;
    }


    /* جستجوی محصول - کوچکتر */
    header.main-header > .filter-bar #search {

        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;

        height: 52px !important;

        flex: 0 0 300px !important;

        margin: 0 !important;

        padding: 0 40px 0 15px !important;

        box-sizing: border-box !important;

        font-size: 14px !important;

        direction: rtl !important;
        text-align: right !important;
    }


    /* ارزان ترین - خیلی جمع و جور */
    header.main-header > .filter-bar #sort {

        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;

        height: 52px !important;

        flex: 0 0 130px !important;

        margin: 0 !important;

        padding: 0 10px !important;

        box-sizing: border-box !important;

        font-size: 13px !important;

        direction: rtl !important;

        text-align: center !important;
    }


    /* فیلتر دوم داخل صفحه روی لپ تاپ کاملاً حذف */
    body main > .filter-bar {
        display: none !important;
    }
}


/* =====================================================
   موبایل - بدون تغییر
===================================================== */

@media only screen and (max-width: 1024px) {

    header.main-header > .filter-bar {
        display: none !important;
    }

    body main > .filter-bar {
        display: flex !important;
    }

}
/* =====================================================
   فیلتر مخصوص دسکتاپ - کنار لوگو
   ===================================================== */

@media (min-width: 769px) {

    /* فیلتر داخل هدر */
    .main-header > .filter-bar {
        display: flex !important;

        position: absolute !important;

        /* نزدیک‌تر به لوگو */
        right: 260px !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 8px !important;

        align-items: center !important;

        /* ترتیب:
           جستجو سمت چپ
           ارزان‌ترین سمت راست
        */
        flex-direction: row-reverse !important;

        background: transparent !important;

        z-index: 1000 !important;
    }


    /* جستجوی محصول دسکتاپ */
    .main-header > .filter-bar #search {
        display: block !important;

        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 18px !important;

        border-radius: 14px !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        text-align: right !important;

        direction: rtl !important;
    }


    /* ارزان ترین دسکتاپ */
    .main-header > .filter-bar #sort {
        display: block !important;

        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;

        height: 48px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 14px !important;

        font-size: 13px !important;
        font-weight: 700 !important;

        text-align: center !important;

        direction: rtl !important;

        cursor: pointer !important;
    }


    /* فیلتر دوم که پایین صفحه است، در لپ‌تاپ کاملاً مخفی */
    main > .filter-bar {
        display: none !important;
    }

}


/* =====================================================
   موبایل
   ===================================================== */

@media (max-width: 768px) {

    /* فیلتر داخل هدر موبایل نمایش داده نشود */
    .main-header > .filter-bar {
        display: none !important;
    }


    /* فیلتر دوم مخصوص موبایل */
    main > .filter-bar {
        display: flex !important;

        position: relative !important;

        width: calc(100% - 30px) !important;

        margin: 15px auto !important;

        padding: 0 !important;

        gap: 8px !important;

        align-items: center !important;

        flex-direction: row !important;

        box-sizing: border-box !important;
    }


    main > .filter-bar #search {
        width: 100% !important;

        height: 48px !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        font-size: 14px !important;

        direction: rtl !important;
    }


    main > .filter-bar #sort {
        width: 130px !important;
        min-width: 130px !important;

        height: 48px !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        font-size: 13px !important;

        direction: rtl !important;
    }

}

/* =========================================================
   KHATIB COIN - GOLD SHOWCASE RESPONSIVE FINAL FIX
   Desktop / Laptop / Tablet / Mobile
========================================================= */


/* =========================================================
   تنظیمات پایه - همه دستگاه‌ها
========================================================= */

.gold-showcase {
    position: relative;

    /* پر کردن فضای خالی دو طرف */
    width: calc(100% + 110px) !important;
    margin-left: -55px !important;
    margin-right: -55px !important;

    /* محتوا همچنان از لبه فاصله داشته باشد */
    padding-left: 55px !important;
    padding-right: 55px !important;

    /* فاصله پایین مکعب */
    padding-bottom: 100px !important;

    box-sizing: border-box;
    overflow: hidden;

    /* پس زمینه هماهنگ با طراحی سایت */
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(216, 166, 63, 0.16) 0%,
            rgba(216, 166, 63, 0.07) 25%,
            transparent 48%
        ),
        radial-gradient(
            circle at 8% 50%,
            rgba(216, 166, 63, 0.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 50%,
            rgba(216, 166, 63, 0.07),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #07080a 0%,
            #0d0c09 35%,
            #151108 50%,
            #0d0c09 65%,
            #07080a 100%
        ) !important;
}


/* جلوگیری از ایجاد فضای سفید یا بیرون‌زدگی */
body {
    overflow-x: hidden !important;
}


/* =========================================================
   فاصله مکعب با "سکه های گرمی"
========================================================= */

.gold-showcase + .category-section {
    margin-top: 60px !important;
}


/* عنوان سکه های گرمی */
.gold-showcase + .category-section .category-title {
    margin-top: 0 !important;
}


/* =========================================================
   مانیتورهای خیلی بزرگ
   1600px به بالا
========================================================= */

@media (min-width: 1600px) {

    .gold-showcase {
        width: calc(100% + 110px) !important;

        margin-left: -55px !important;
        margin-right: -55px !important;

        padding-left: 75px !important;
        padding-right: 75px !important;

        padding-bottom: 120px !important;

        min-height: 820px;
    }

    .gold-showcase + .category-section {
        margin-top: 70px !important;
    }

}


/* =========================================================
   دسکتاپ و لپ تاپ
   1200px تا 1599px
========================================================= */

@media (min-width: 1200px) and (max-width: 1599px) {

    .gold-showcase {
        width: calc(100% + 110px) !important;

        margin-left: -55px !important;
        margin-right: -55px !important;

        padding-left: 55px !important;
        padding-right: 55px !important;

        padding-bottom: 105px !important;

        min-height: 760px;
    }

    .gold-showcase + .category-section {
        margin-top: 60px !important;
    }

}


/* =========================================================
   لپ تاپ کوچک / تبلت افقی
   992px تا 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .gold-showcase {
        width: calc(100% + 80px) !important;

        margin-left: -40px !important;
        margin-right: -40px !important;

        padding-left: 40px !important;
        padding-right: 40px !important;

        padding-bottom: 90px !important;

        min-height: 700px;
    }

    .gold-showcase + .category-section {
        margin-top: 55px !important;
    }

}


/* =========================================================
   تبلت
   768px تا 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .gold-showcase {
        width: calc(100% + 50px) !important;

        margin-left: -25px !important;
        margin-right: -25px !important;

        padding-left: 25px !important;
        padding-right: 25px !important;

        padding-bottom: 80px !important;

        min-height: auto;
    }

    .gold-showcase + .category-section {
        margin-top: 50px !important;
    }

}


/* =========================================================
   موبایل بزرگ
   576px تا 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .gold-showcase {
        width: calc(100% + 30px) !important;

        margin-left: -15px !important;
        margin-right: -15px !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        padding-bottom: 65px !important;

        min-height: auto;
    }

    .gold-showcase + .category-section {
        margin-top: 42px !important;
    }

}


/* =========================================================
   موبایل معمولی
   400px تا 575px
========================================================= */

@media (min-width: 400px) and (max-width: 575px) {

    .gold-showcase {
        width: calc(100% + 24px) !important;

        margin-left: -12px !important;
        margin-right: -12px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        padding-bottom: 58px !important;

        min-height: auto;
    }

    .gold-showcase + .category-section {
        margin-top: 38px !important;
    }

}


/* =========================================================
   موبایل کوچک
   زیر 400px
========================================================= */

@media (max-width: 399px) {

    .gold-showcase {
        width: calc(100% + 20px) !important;

        margin-left: -10px !important;
        margin-right: -10px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        padding-bottom: 50px !important;

        min-height: auto;
    }

    .gold-showcase + .category-section {
        margin-top: 32px !important;
    }

}


/* =========================================================
   جلوگیری از بیرون زدن اجزای سه بعدی مکعب
========================================================= */

.gold-cube-stage {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* عنوان بالای مکعب */
.gold-showcase-title {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* فوتر زیر مکعب
   ارزش ماندگار، انتخاب هوشمندانه
*/
.gold-showcase-footer {
    margin-bottom: 0 !important;
}
/* =====================================
   فقط تصاویر محصولات ایران شمش
===================================== */

#iran-shamsh-products .product-image {
    height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000;
}

#iran-shamsh-products .product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}
/* =====================================
   تصاویر مخصوص ایران شمش
===================================== */

#iran-shamsh-products .product-image {
    height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000;
}

#iran-shamsh-products .product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}


/* موبایل */

@media (max-width: 768px) {

    #iran-shamsh-products .product-image {
        height: 560px !important;
    }

}