/* =========================================================
   شهر کوسن - Premium Homepage CSS
   نسخه جدید
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');


/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #172337;
    --primary-dark: #0d1625;

    --gold: #c6a15b;
    --gold-light: #e4ca91;

    --cream: #f8f5ef;
    --cream-dark: #eee8dc;

    --white: #ffffff;

    --text: #20242b;
    --muted: #777b82;

    --danger: #b42318;
    --success: #287a55;

    --border: rgba(23,35,55,.09);

    --shadow-sm:
        0 5px 20px rgba(15,23,42,.06);

    --shadow:
        0 15px 45px rgba(15,23,42,.10);

    --shadow-lg:
        0 25px 70px rgba(15,23,42,.15);

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;

}


/* =========================================================
   GENERAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

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

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

    color: var(--text);

    line-height: 1.8;

    overflow-x: hidden;

}


a {
    text-decoration: none;
}


button,
input {
    font-family: inherit;
}


.container {
    max-width: 1280px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: var(--gold);
    color: #fff;
}


/* =========================================================
   TOP HEADER
========================================================= */

.top-header {

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: #fff;

    font-size: 13px;

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

}


.top-header .container {

    min-height: 38px;

    display: flex;

    align-items: center;

}


.top-header #siteTopNotice {

    color: #f5f1e8;

    font-weight: 400;

}


.top-header #siteTopPhone {

    color: var(--gold-light);

    font-weight: 600;

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    min-height: 82px;

    background:
        rgba(255,255,255,.94) !important;

    backdrop-filter: blur(18px);

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

    position: sticky;

    top: 0;

    z-index: 1000;

}


.navbar .container {
    gap: 18px;
}


.navbar-brand {

    color: var(--primary) !important;

    letter-spacing: -.5px;

    white-space: nowrap;

    transition: .25s ease;

}


.navbar-brand:hover {
    color: var(--gold) !important;
}


.navbar-brand::after {

    content: "";

    display: block;

    width: 30px;

    height: 2px;

    background: var(--gold);

    margin-top: -3px;

    border-radius: 10px;

}


/* menu button */

.navbar .btn.border-0 {

    width: 44px;
    height: 44px;

    border-radius: 13px !important;

    background: var(--cream);

    color: var(--primary);

    transition: .25s ease;

}


.navbar .btn.border-0:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-2px);

}


/* =========================================================
   SEARCH
========================================================= */

.search-form {

    position: relative;

}


.search-box {

    height: 48px;

    border:
        1px solid #e5e1d9 !important;

    border-radius: 16px !important;

    background:
        #faf9f7 !important;

    padding:
        0 20px !important;

    color: var(--text);

    box-shadow: none !important;

    transition: .25s ease;

}


.search-box::placeholder {
    color: #999;
}


.search-box:focus {

    background: #fff !important;

    border-color:
        rgba(198,161,91,.7) !important;

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.10) !important;

}


/* =========================================================
   SEARCH RESULTS
========================================================= */

.search-results {

    position: absolute;

    top: 75px;

    right: 50%;

    transform: translateX(50%);

    width: min(500px, 90vw);

    z-index: 2000;

}


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

.icon-btn {

    width: 45px;
    height: 45px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color: var(--primary);

    background: #f8f7f4;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.icon-btn:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-2px);

}


.icon-btn i {
    font-size: 20px;
}


#accountBtn {

    width: auto;

    min-width: 45px;

    padding: 0 13px;

}


/* =========================================================
   CART COUNT
========================================================= */

.cart-count {

    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border-radius: 20px;

    background: var(--gold);

    color: #fff;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    border: 2px solid #fff;

}


/* =========================================================
   OFFCANVAS
========================================================= */

.offcanvas {

    border: 0 !important;

    box-shadow: var(--shadow-lg);

}


.offcanvas-header {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #fff;

    padding: 22px;

}


.offcanvas-header .btn-close {

    filter: invert(1);

}


.offcanvas-body {

    background: #fff;

    padding: 15px;

}


#sideCategoriesContainer {

    gap: 7px;

    display: flex;

    flex-direction: column;

}


#sideCategoriesContainer a {

    border:
        1px solid var(--border) !important;

    border-radius: 14px !important;

    background: #fff !important;

    color: var(--text) !important;

    transition: .25s ease;

}


#sideCategoriesContainer a:hover {

    transform: translateX(-5px);

    border-color:
        rgba(198,161,91,.45) !important;

    background: var(--cream) !important;

}


/* =========================================================
   HERO / MAIN SLIDER
========================================================= */

#mainSlider {

    border-radius: var(--radius-lg) !important;

    min-height: 390px;

    background: var(--primary);

    box-shadow: var(--shadow);

}


#mainSlider .carousel-inner,
#mainSlider .carousel-item {

    min-height: 390px;

}


#mainSlider img {

    width: 100%;

    height: 390px;

    object-fit: cover;

}


#mainSlider .carousel-control-prev,
#mainSlider .carousel-control-next {

    width: 52px;

    height: 52px;

    top: 50%;

    transform: translateY(-50%);

    margin: 0 18px;

    border-radius: 50%;

    background:
        rgba(0,0,0,.35);

    backdrop-filter: blur(8px);

    opacity: .85;

}


#mainSlider .carousel-indicators {

    margin-bottom: 16px;

}


#mainSlider .carousel-indicators button {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    border: 0;

    transition: .25s ease;

}


#mainSlider .carousel-indicators .active {

    width: 25px;

    border-radius: 20px;

    background: var(--gold);

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

section.container > h2 {

    color: var(--primary);

    position: relative;

    padding-bottom: 16px;

}


section.container > h2::after {

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    margin: 10px auto 0;

    background: var(--gold);

    border-radius: 10px;

}


/* =========================================================
   HOME CATEGORIES
========================================================= */

#homeCategoriesContainer {

    row-gap: 20px;

}


.category-card {

    min-height: 155px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #faf8f3
        );

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

    border-radius: var(--radius);

    color: var(--primary);

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.category-card::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background:
        rgba(198,161,91,.10);

    top: -45px;

    left: -30px;

}


.category-card i {

    color: var(--gold);

    position: relative;

    z-index: 1;

    transition: .3s ease;

}


.category-card h5 {

    position: relative;

    z-index: 1;

    font-weight: 600;

}


.category-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(198,161,91,.45);

    box-shadow: var(--shadow);

}


.category-card:hover i {

    transform:
        scale(1.12)
        rotate(-4deg);

}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.product-card {

    background: #fff;

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

    border-radius: 22px;

    overflow: hidden;

    height: 100%;

    box-shadow:
        0 7px 25px rgba(15,23,42,.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.product-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}


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

.product-img {

    height: 310px;

    background:
        linear-gradient(
            145deg,
            #f8f7f4,
            #efebe4
        );

    position: relative;

    overflow: hidden;

}


.product-img a {

    display: block;

    width: 100%;
    height: 100%;

}


.product-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;

}


.product-card:hover .product-img img {

    transform: scale(1.055);

}


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

.product-badges {

    position: absolute;

    top: 12px;

    right: 12px;

    left: 12px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

}


.product-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding: 5px 10px;

    border-radius: 9px;

    background: var(--primary);

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

}


/* =========================================================
   FAVORITE BUTTON
========================================================= */

.product-fav {

    position: absolute;

    left: 13px;

    top: 13px;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.92);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

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

    transition: .25s ease;

}


.product-fav:hover {

    background: var(--primary);

    color: #fff;

    transform: scale(1.08);

}


.product-fav i {
    font-size: 19px;
}


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

.product-info {

    padding: 20px;

}


.product-info h5 {

    margin: 0 0 10px;

    color: var(--primary);

    font-weight: 700;

    font-size: 16px;

    min-height: 52px;

    display: flex;

    align-items: center;

}


.price {

    min-height: 55px;

    margin-bottom: 13px;

    display: flex;

    flex-direction: column;

    gap: 2px;

    justify-content: center;

}


.old-price {

    color: #9b9b9b;

    text-decoration: line-through;

    font-size: 12px;

}


.new-price {

    color: var(--danger);

    font-weight: 800;

    font-size: 17px;

}


.product-info > .price:not(:has(.old-price)) {

    color: var(--primary);

    font-weight: 800;

    font-size: 17px;

}


/* =========================================================
   PRODUCT BUTTONS
========================================================= */

.product-info .btn-dark {

    background: var(--primary) !important;

    border: 0 !important;

    border-radius: 12px !important;

    min-height: 44px;

    font-size: 13px;

    transition: .25s ease;

}


.product-info .btn-dark:hover {

    background: var(--gold) !important;

    transform: translateY(-2px);

}


.add-cart {

    width: 100%;

    margin-top: 8px;

    min-height: 44px;

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

    border-radius: 12px;

    background: transparent;

    color: var(--primary);

    font-weight: 600;

    font-size: 13px;

    transition: .25s ease;

}


.add-cart:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-2px);

}


/* =========================================================
   BANNERS
========================================================= */

.banner {

    min-height: 255px;

    border-radius: var(--radius-lg);

    padding: 40px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    position: relative;

    overflow: hidden;

    color: #fff;

    box-shadow: var(--shadow);

}


.banner::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    left: -90px;

    top: -100px;

}


.banner::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.12);

    right: -50px;

    bottom: -80px;

}


.banner > * {

    position: relative;

    z-index: 2;

}


.banner1 {

    background:
        linear-gradient(
            135deg,
            #18263b,
            #31435c
        );

}


.banner2 {

    background:
        linear-gradient(
            135deg,
            #5d4a2c,
            #a07c3f
        );

}


.banner h2 {

    font-weight: 800;

    margin-bottom: 8px;

}


.banner p {

    color: rgba(255,255,255,.82);

    margin-bottom: 20px;

}


.banner .btn {

    border: 0;

    border-radius: 12px;

    padding:
        10px 20px;

    font-weight: 600;

}


/* =========================================================
   BEST SELLER SWIPER
========================================================= */

.bestSellerSwiper {

    padding:
        10px 5px 55px;

}


.bestSellerSwiper .swiper-slide {

    height: auto;

}


.bestSellerSwiper .swiper-pagination-bullet {

    width: 8px;
    height: 8px;

    opacity: .35;

}


.bestSellerSwiper .swiper-pagination-bullet-active {

    width: 24px;

    border-radius: 20px;

    background: var(--gold);

    opacity: 1;

}


/* =========================================================
   ABOUT
========================================================= */

.about-box {

    border-radius: var(--radius-lg);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #253754
        );

    color: #fff;

    padding: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    box-shadow: var(--shadow-lg);

    position: relative;

}


.about-box::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(198,161,91,.08);

    left: -100px;
    top: -120px;

}


.about-content {

    max-width: 850px;

    position: relative;

    z-index: 2;

}


#siteAboutLabel {

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 600;

}


#siteAboutTitle {

    font-size: clamp(24px, 3vw, 36px);

    font-weight: 800;

    margin:
        8px 0 20px;

}


#siteAboutText1,
#siteAboutText2 {

    color:
        rgba(255,255,255,.76);

    font-size: 14px;

}


.about-icon {

    width: 130px;
    height: 130px;

    flex: 0 0 130px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.05);

    position: relative;

    z-index: 2;

}


.about-icon i {

    font-size: 55px;

    color: var(--gold-light);

}


/* =========================================================
   CONTACT
========================================================= */

.contact-box {

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: #fff;

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

    box-shadow: var(--shadow);

}


.contact-info {

    padding: 45px;

}


.contact-label {

    color: var(--gold);

    font-size: 13px;

    font-weight: 700;

}


.contact-info h2 {

    color: var(--primary);

    font-size: 32px;

    font-weight: 800;

    margin:
        7px 0 15px;

}


.contact-description {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 30px;

}


.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 22px;

}


.contact-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 14px;

    background: var(--cream);

    color: var(--gold);

    display: flex;

    align-items: center;

    justify-content: center;

}


.contact-item strong {

    color: var(--primary);

    font-size: 14px;

}


.contact-item p {

    color: var(--muted);

    margin: 2px 0 0;

    font-size: 13px;

}


.contact-side {

    padding: 45px;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

}


.contact-side > i {

    color: var(--gold-light);

    font-size: 55px;

    margin-bottom: 20px;

}


.contact-side h3 {

    font-weight: 800;

}


.contact-side p {

    color: rgba(255,255,255,.7);

    font-size: 14px;

}


.contact-btn {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 15px;

    padding:
        11px 18px;

    border-radius: 12px;

    background: var(--gold);

    color: #fff;

    font-weight: 700;

    transition: .25s ease;

}


.contact-btn:hover {

    background: #fff;

    color: var(--primary);

    transform: translateY(-3px);

}


/* =========================================================
   FEATURES
========================================================= */

.feature-box {

    height: 100%;

    padding: 28px 20px;

    border-radius: 20px;

    background: #fff;

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

    box-shadow: var(--shadow-sm);

    transition: .3s ease;

}


.feature-box:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

}


.feature-box i {

    color: var(--gold);

}


.feature-box h5 {

    color: var(--primary);

    font-weight: 700;

}


.feature-box p {

    color: var(--muted);

    font-size: 13px;

    margin: 0;

}


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

.footer {

    background:
        linear-gradient(
            145deg,
            #101a2a,
            #172337
        );

    color: #fff;

    padding:
        65px 0 25px;

}


.footer-title {

    color: #fff;

    font-weight: 800;

    margin-bottom: 18px;

}


.footer p {

    color:
        rgba(255,255,255,.62);

    font-size: 13px;

}


.footer-line {

    width: 45px;

    height: 3px;

    border-radius: 10px;

    background: var(--gold);

    margin-top: 20px;

}


.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}


.footer-links li {

    margin-bottom: 10px;

}


.footer-links a {

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

    font-size: 13px;

    transition: .25s ease;

}


.footer-links a:hover {

    color: var(--gold-light);

    padding-right: 5px;

}


.footer hr {

    border-color:
        rgba(255,255,255,.10);

    margin:
        35px 0 20px;

}


.copyright {

    text-align: center;

    margin: 0;

}


/* =========================================================
   SOCIAL
========================================================= */

.social {

    display: flex;

    gap: 9px;

    margin-top: 18px;

}


.social a {

    width: 40px;
    height: 40px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.08);

    transition: .25s ease;

}


.social a:hover {

    background: var(--gold);

    transform: translateY(-4px);

}


.social svg {

    width: 21px;
    height: 21px;

}


/* =========================================================
   CART PANEL
========================================================= */

.cart-panel {

    position: fixed;

    top: 0;

    right: 0;

    width: min(430px, 94vw);

    height: 100vh;

    background: #fff;

    z-index: 5000;

    box-shadow:
        -15px 0 50px rgba(0,0,0,.15);

    transform: translateX(110%);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);

    display: flex;

    flex-direction: column;

}


.cart-panel.active {

    transform: translateX(0);

}


.cart-header {

    padding: 22px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.cart-header h3 {

    margin: 0;

    font-size: 20px;

}


.cart-header small {

    color:
        rgba(255,255,255,.62);

}


#closeCart {

    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 12px;

    background:
        rgba(255,255,255,.09);

    color: #fff;

    font-size: 18px;

}


.cart-items {

    flex: 1;

    overflow-y: auto;

    padding: 18px;

}


.cart-footer {

    padding: 20px;

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

    background: #fff;

}


.cart-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}


.cart-total span {

    color: var(--muted);

}


.cart-total strong {

    color: var(--primary);

}


.checkout-btn {

    width: 100%;

    min-height: 50px;

    border: 0;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-weight: 700;

    transition: .25s ease;

}


.checkout-btn:hover {

    background: var(--gold);

}


/* =========================================================
   FAVORITES PANEL
========================================================= */

.fav-panel {

    position: fixed;

    top: 0;

    left: 0;

    width: min(420px, 94vw);

    height: 100vh;

    z-index: 4900;

    background: #fff;

    box-shadow:
        15px 0 50px rgba(0,0,0,.15);

    transform: translateX(-110%);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);

    padding: 25px;

    overflow-y: auto;

}


.fav-panel.active {

    transform: translateX(0);

}


.fav-panel h3 {

    color: var(--primary);

    font-weight: 800;

    margin:
        20px 0;

}


.close-fav {

    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 12px;

    background: var(--cream);

    color: var(--primary);

}


/* =========================================================
   SCROLL TOP
========================================================= */

#scrollTopBtn {

    position: fixed;

    bottom: 25px;

    left: 25px;

    width: 46px;
    height: 46px;

    border: 0;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-size: 20px;

    z-index: 3000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: .3s ease;

    box-shadow: var(--shadow);

}


#scrollTopBtn.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


#scrollTopBtn:hover {

    background: var(--gold);

    transform:
        translateY(-3px);

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #f3f1ed;
}


::-webkit-scrollbar-thumb {

    background: #cfc6b7;

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--gold);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.product-card,
.category-card,
.feature-box,
.banner {

    animation:
        fadeUp .55s ease both;

}


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

@media (max-width: 991.98px) {

    .navbar {

        min-height: 70px;

    }


    .navbar .container {

        gap: 8px;

    }


    .navbar-brand {

        font-size: 24px !important;

    }


    .search-form {

        width: 100% !important;

        margin:
            15px 0 !important;

    }


    .navbar-collapse {

        padding-bottom: 15px;

    }


    .contact-box {

        grid-template-columns: 1fr;

    }


    .contact-side {

        min-height: 280px;

    }


    .about-box {

        padding: 38px;

    }


    .product-img {

        height: 280px;

    }

}


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

@media (max-width: 767.98px) {

    body {

        padding-bottom: 72px;

    }


    .top-header {

        font-size: 11px;

    }


    .top-header .container {

        min-height: 34px;

        gap: 10px;

    }


    .top-header #siteTopPhone {

        display: none;

    }


    .navbar {

        position: sticky;

        top: 0;

    }


    .navbar .container {

        padding:
            0 12px;

    }


    .navbar-brand {

        font-size: 21px !important;

    }


    .navbar .btn.border-0 {

        width: 39px;
        height: 39px;

        font-size: 22px !important;

    }


    #accountBtn span {

        display: none;

    }


    #accountBtn {

        width: 39px;

        min-width: 39px;

        padding: 0;

    }


    .icon-btn {

        width: 39px;
        height: 39px;

    }


    .navbar-toggler {

        display: none;

    }


    .navbar-collapse {

        display: block !important;

    }


    .navbar-collapse > .d-flex {

        display: none !important;

    }


    .search-form {

        width: 100% !important;

        margin:
            8px 0 5px !important;

    }


    .search-box {

        height: 44px;

        border-radius: 13px !important;

    }


    #mainSlider {

        margin-top: 14px !important;

        border-radius: 20px !important;

    }


    #mainSlider,
    #mainSlider .carousel-inner,
    #mainSlider .carousel-item {

        min-height: 220px;

    }


    #mainSlider img {

        height: 220px;

    }


    #mainSlider .carousel-control-prev,
    #mainSlider .carousel-control-next {

        width: 35px;
        height: 35px;

        margin:
            0 8px;

    }


    section.container {

        padding-left: 14px;

        padding-right: 14px;

    }


    section.container > h2 {

        font-size: 22px;

        margin-bottom: 28px !important;

    }


    .category-card {

        min-height: 125px;

        border-radius: 17px;

        padding: 16px !important;

    }


    .category-card i {

        font-size: 31px !important;

    }


    .category-card h5 {

        font-size: 13px;

        margin-top: 8px !important;

    }


    .product-card {

        border-radius: 16px;

    }


    .product-img {

        height: 185px;

    }


    .product-info {

        padding: 12px;

    }


    .product-info h5 {

        font-size: 13px;

        min-height: 42px;

        line-height: 1.7;

    }


    .price {

        min-height: 45px;

    }


    .new-price,
    .product-info > .price:not(:has(.old-price)) {

        font-size: 14px;

    }


    .old-price {

        font-size: 10px;

    }


    .product-info .btn-dark,
    .add-cart {

        min-height: 38px;

        font-size: 11px;

        border-radius: 10px !important;

    }


    .product-fav {

        width: 34px;
        height: 34px;

        left: 8px;
        top: 8px;

    }


    .product-fav i {

        font-size: 15px;

    }


    .product-badges {

        top: 8px;

        right: 8px;

        left: 8px;

        gap: 4px;

    }


    .product-badge {

        min-height: 22px;

        padding:
            3px 6px;

        font-size: 8px;

        border-radius: 7px;

    }


    .banner {

        min-height: 210px;

        padding: 25px;

        border-radius: 20px;

    }


    .banner h2 {

        font-size: 21px;

    }


    .banner p {

        font-size: 12px;

    }


    .about-box {

        padding: 28px 22px;

        flex-direction: column;

        align-items: flex-start;

        border-radius: 22px;

    }


    .about-icon {

        width: 85px;
        height: 85px;

        flex-basis: 85px;

        align-self: flex-end;

    }


    .about-icon i {

        font-size: 35px;

    }


    #siteAboutTitle {

        font-size: 24px;

    }


    #siteAboutText1,
    #siteAboutText2 {

        font-size: 12px;

    }


    .contact-info,
    .contact-side {

        padding: 28px 22px;

    }


    .contact-info h2 {

        font-size: 26px;

    }


    .contact-side {

        min-height: 250px;

    }


    .feature-box {

        padding: 22px 14px;

    }


    .feature-box i {

        font-size: 35px !important;

    }


    .feature-box h5 {

        font-size: 14px;

    }


    .feature-box p {

        font-size: 11px;

    }


    .footer {

        padding:
            45px 20px 90px;

    }


    .footer-title {

        font-size: 17px;

    }


    .footer p,
    .footer-links a {

        font-size: 12px;

    }


    #scrollTopBtn {

        width: 40px;
        height: 40px;

        left: 15px;

        bottom: 82px;

        border-radius: 12px;

        font-size: 17px;

    }


    .cart-panel {

        width: 100vw;

    }


    .fav-panel {

        width: 100vw;

    }

}


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

@media (max-width: 430px) {

    .navbar-brand {

        font-size: 18px !important;

    }


    .navbar .container {

        gap: 5px;

    }


    .product-img {

        height: 165px;

    }


    .product-info h5 {

        font-size: 12px;

    }


    .product-info {

        padding: 10px;

    }


    .banner {

        min-height: 190px;

    }


    #mainSlider,
    #mainSlider .carousel-inner,
    #mainSlider .carousel-item {

        min-height: 190px;

    }


    #mainSlider img {

        height: 190px;

    }

}
/* =========================================================
   MOBILE BOTTOM NAVIGATION
========================================================= */

.mobile-bottom-nav {

    display: none;

}


/* =========================================================
   DESKTOP FLOATING CART
========================================================= */

@media (min-width: 768px) {

    #cartBtn {

        position: relative;

        width: 52px;
        height: 52px;

        border-radius: 16px;

        background:
            linear-gradient(
                135deg,
                var(--primary),
                #263954
            );

        color: #fff;

        box-shadow:
            0 10px 30px rgba(23,35,55,.18);

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            background .25s ease;

    }


    #cartBtn:hover {

        transform:
            translateY(-4px);

        background:
            linear-gradient(
                135deg,
                var(--gold),
                #d4b574
            );

        box-shadow:
            0 15px 35px rgba(198,161,91,.25);

    }


    #cartBtn i {

        font-size: 21px;

    }


    #cartBtn .cart-count {

        top: -5px;
        right: -5px;

    }

}


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

@media (max-width: 767.98px) {


    body {

        padding-bottom: 82px;

    }


    /* -----------------------------------------
       BOTTOM NAV
    ----------------------------------------- */

    .mobile-bottom-nav {

        position: fixed;

        left: 10px;
        right: 10px;
        bottom: 10px;

        height: 68px;

        display: grid;

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

        align-items: center;

        background:
            rgba(255,255,255,.94);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        border:
            1px solid rgba(23,35,55,.08);

        border-radius: 22px;

        box-shadow:
            0 15px 45px
            rgba(15,23,42,.18);

        z-index: 6000;

        padding:
            5px 7px;

    }


    /* -----------------------------------------
       NAV ITEM
    ----------------------------------------- */

    .mobile-nav-item {

        height: 58px;

        border: 0;

        background: transparent;

        color: #777;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 2px;

        position: relative;

        text-decoration: none;

        font-family: inherit;

        transition:
            color .25s ease,
            transform .25s ease;

    }


    .mobile-nav-item i {

        font-size: 19px;

        line-height: 1;

    }


    .mobile-nav-item span:not(.mobile-cart-icon) {

        font-size: 9px;

        font-weight: 600;

        line-height: 1.5;

    }


    /* -----------------------------------------
       ACTIVE
    ----------------------------------------- */

    .mobile-nav-item.active {

        color: var(--primary);

    }


    .mobile-nav-item.active::before {

        content: "";

        position: absolute;

        top: 2px;

        width: 26px;

        height: 3px;

        border-radius: 20px;

        background: var(--gold);

    }


    .mobile-nav-item:active {

        transform:
            scale(.92);

    }


    /* -----------------------------------------
       CART
    ----------------------------------------- */

    .mobile-cart-icon {

        width: 39px;
        height: 39px;

        border-radius: 13px;

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        background:
            var(--primary);

        color: #fff;

        box-shadow:
            0 7px 18px
            rgba(23,35,55,.20);

        margin-top: -12px;

        border:
            3px solid #fff;

    }


    .mobile-cart-icon i {

        font-size: 17px;

    }


    .mobile-cart-count {

        position: absolute;

        top: -7px;
        right: -7px;

        min-width: 19px;
        height: 19px;

        padding: 0 4px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        background: var(--gold);

        color: #fff;

        border:
            2px solid #fff;

        font-size: 8px;

        font-weight: 800;

    }


    .mobile-cart-button > span:last-child {

        margin-top: 1px;

    }


    /* -----------------------------------------
       SEARCH BUTTON
    ----------------------------------------- */

    #mobileSearchBtn {

        cursor: pointer;

    }


}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .mobile-bottom-nav {

        left: 6px;
        right: 6px;
        bottom: 7px;

        height: 64px;

        border-radius: 19px;

    }


    .mobile-nav-item {

        height: 54px;

    }


    .mobile-nav-item i {

        font-size: 17px;

    }


    .mobile-nav-item span:not(.mobile-cart-icon) {

        font-size: 8px;

    }


    .mobile-cart-icon {

        width: 36px;
        height: 36px;

    }

}
/* =========================================================
   CATEGORY PAGE
   شهر کوسن - Premium Category
========================================================= */

.category-page {
    background:
        linear-gradient(
            180deg,
            #faf8f3 0%,
            #ffffff 35%,
            #ffffff 100%
        );
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.category-header {
    position: relative;
    overflow: hidden;

    padding: 55px 0 45px;

    background:
        linear-gradient(
            135deg,
            #101a2a 0%,
            #1b2a42 55%,
            #263954 100%
        );

    color: #fff;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, .14);
}


.category-header::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        rgba(198,161,91,.08);

    left: -140px;
    top: -220px;
}


.category-header::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.08);

    right: -100px;
    bottom: -150px;
}


.category-header .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.back-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    margin-bottom: 25px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 12px;

    color:
        rgba(255,255,255,.85);

    background:
        rgba(255,255,255,.06);

    backdrop-filter: blur(10px);

    font-size: 13px;

    transition: .25s ease;
}


.back-btn:hover {
    color: #fff;

    background:
        rgba(198,161,91,.20);

    border-color:
        rgba(198,161,91,.45);

    transform:
        translateX(4px);
}


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

#categoryTitle {
    margin: 0;

    color: #fff;

    font-size:
        clamp(28px, 4vw, 44px);

    font-weight: 800;

    letter-spacing: -.5px;
}


.category-header > .container > p {
    margin:
        8px 0 30px;

    color:
        rgba(255,255,255,.62);

    font-size: 14px;
}


/* =========================================================
   CATEGORY BUTTONS
========================================================= */

.categories {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.category-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding:
        7px 15px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 12px;

    background:
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.82);

    font-size: 12px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.category-btn:hover {
    background: var(--gold);

    color: #fff;

    border-color: var(--gold);

    transform:
        translateY(-2px);
}


/* =========================================================
   CATEGORY TOOLS
========================================================= */

.category-tools {
    display: flex;

    align-items: center;

    gap: 15px;

    margin:
        35px 0 25px;

    padding: 15px;

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

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 8px 30px rgba(15,23,42,.055);
}


/* SEARCH */

.search-wrapper {
    position: relative;

    flex: 1;
}


.search-wrapper .search-icon {
    position: absolute;

    right: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    color: var(--gold);

    font-size: 16px;

    pointer-events: none;
}


#categorySearch {
    width: 100%;

    height: 48px;

    padding:
        0 45px 0 15px;

    border:
        1px solid #e7e3dc;

    border-radius: 13px;

    outline: none;

    background: #faf9f7;

    color: var(--text);

    font-family: inherit;

    font-size: 13px;

    transition: .25s ease;
}


#categorySearch::placeholder {
    color: #999;
}


#categorySearch:focus {
    background: #fff;

    border-color:
        rgba(198,161,91,.65);

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.09);
}


/* SORT */

#sortProducts {
    width: 220px;

    height: 48px;

    padding:
        0 15px;

    border:
        1px solid #e7e3dc;

    border-radius: 13px;

    outline: none;

    background: #faf9f7;

    color: var(--primary);

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition: .25s ease;
}


#sortProducts:focus {
    border-color:
        rgba(198,161,91,.65);

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.09);
}


/* =========================================================
   PRODUCTS TOP
========================================================= */

.products-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        30px 0 20px;
}


.products-top h2 {
    position: relative;

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    font-weight: 800;
}


.products-top h2::after {
    content: "";

    display: block;

    width: 40px;

    height: 3px;

    margin-top: 7px;

    border-radius: 20px;

    background: var(--gold);
}


#productCount {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding:
        5px 12px;

    border-radius: 10px;

    background: var(--cream);

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   CATEGORY PRODUCTS GRID
========================================================= */

#productsList {
    display: grid;

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

    gap: 22px;

    padding-bottom: 50px;
}


/* =========================================================
   CATEGORY PRODUCT CARD
   برای ساختارهای رایج category.js
========================================================= */

#productsList .product-card {
    width: 100%;
}


/* =========================================================
   EMPTY PRODUCTS
========================================================= */

#productsList > .empty-products,
#productsList > .no-products,
#productsList > .empty-state {
    grid-column:
        1 / -1;

    padding: 70px 20px;

    text-align: center;

    border:
        1px dashed #ddd6ca;

    border-radius: 22px;

    background: #faf9f7;

    color: var(--muted);
}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.product-page {
    min-height: 100vh;

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


.product-page .container {
    position: relative;
}


/* =========================================================
   PRODUCT BACK
========================================================= */

.product-back {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 42px;

    padding:
        7px 14px;

    margin-bottom: 25px;

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

    border-radius: 12px;

    background: #fff;

    color: var(--primary);

    box-shadow:
        0 5px 18px rgba(15,23,42,.05);

    font-size: 12px;

    transition: .25s ease;
}


.product-back:hover {
    color: #fff;

    background: var(--primary);

    transform:
        translateX(4px);
}


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

#productContent {
    width: 100%;
}


/* =========================================================
   PRODUCT DETAIL WRAPPER
   پشتیبانی از کلاس‌های رایج product.js
========================================================= */

.product-detail,
.product-details,
.product-content,
.product-main {
    background: #fff;

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

    border-radius: 28px;

    box-shadow:
        0 15px 50px rgba(15,23,42,.08);

    overflow: hidden;
}


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

.product-detail .product-image,
.product-details .product-image,
.product-content .product-image,
.product-main .product-image {
    background:
        linear-gradient(
            145deg,
            #f7f5f0,
            #ebe6dd
        );

    border-radius: 22px;

    overflow: hidden;
}


.product-detail .product-image img,
.product-details .product-image img,
.product-content .product-image img,
.product-main .product-image img {
    width: 100%;

    max-height: 600px;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.product-detail .product-image:hover img,
.product-details .product-image:hover img,
.product-content .product-image:hover img,
.product-main .product-image:hover img {
    transform:
        scale(1.025);
}


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

#productContent h1,
#productContent h2 {
    color: var(--primary);

    font-weight: 800;

    line-height: 1.5;
}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

#productContent p {
    color: var(--muted);

    font-size: 13px;

    line-height: 2;
}


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

#productContent .price,
#productContent .product-price,
#productContent .price-box {
    margin:
        20px 0;

    padding:
        18px;

    border-radius: 16px;

    background: var(--cream);

    border:
        1px solid rgba(198,161,91,.15);
}


#productContent .new-price {
    color: var(--danger);

    font-size: 24px;

    font-weight: 800;
}


#productContent .old-price {
    color: #999;

    font-size: 13px;

    text-decoration: line-through;
}


/* =========================================================
   PRODUCT OPTIONS
========================================================= */

#productContent .option,
#productContent .product-option,
#productContent .options {
    margin-top: 20px;
}


#productContent label {
    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}


#productContent select,
#productContent input {
    min-height: 45px;

    border:
        1px solid #e2ded6;

    border-radius: 12px;

    outline: none;

    font-family: inherit;

    transition: .25s ease;
}


#productContent select:focus,
#productContent input:focus {
    border-color:
        rgba(198,161,91,.7);

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.09);
}


/* =========================================================
   ADD TO CART PRODUCT PAGE
========================================================= */

#productContent .add-cart,
#productContent .add-to-cart,
#productContent button[class*="cart"] {
    min-height: 50px;

    border: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #263954
        );

    color: #fff;

    font-family: inherit;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(23,35,55,.16);

    transition: .25s ease;
}


#productContent .add-cart:hover,
#productContent .add-to-cart:hover,
#productContent button[class*="cart"]:hover {
    background:
        linear-gradient(
            135deg,
            var(--gold),
            #d7b873
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(198,161,91,.22);
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.product-gallery,
.product-images,
.thumbnails {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 15px;
}


.product-gallery img,
.product-images img,
.thumbnails img {
    width: 75px;
    height: 75px;

    object-fit: cover;

    border:
        2px solid transparent;

    border-radius: 12px;

    cursor: pointer;

    transition: .25s ease;
}


.product-gallery img:hover,
.product-images img:hover,
.thumbnails img:hover {
    border-color: var(--gold);

    transform:
        translateY(-3px);
}


/* =========================================================
   CART PANEL - PRODUCT PAGE
========================================================= */

.product-page + .cart-panel {
    z-index: 6000;
}


.product-page ~ .cart-panel {
    width:
        min(430px, 94vw);

    background: #fff;

    box-shadow:
        -20px 0 60px rgba(15,23,42,.18);
}


/* HEADER */

.product-page ~ .cart-panel .cart-header {
    min-height: 75px;

    padding:
        18px 22px;

    background:
        linear-gradient(
            135deg,
            #101a2a,
            #263954
        );
}


.product-page ~ .cart-panel .cart-header h3 {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 18px;
}


.product-page ~ .cart-panel .cart-header h3 i {
    color: var(--gold-light);
}


/* CLOSE */

.product-page ~ .cart-panel .close-cart {
    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 12px;

    background:
        rgba(255,255,255,.09);

    color: #fff;

    transition: .25s ease;
}


.product-page ~ .cart-panel .close-cart:hover {
    background:
        rgba(198,161,91,.35);

    transform:
        rotate(90deg);
}


/* ITEMS */

.product-page ~ .cart-panel .cart-items {
    padding: 16px;

    overflow-y: auto;
}


/* FOOTER */

.product-page ~ .cart-panel .cart-footer {
    padding: 20px;

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

    background: #fff;

    box-shadow:
        0 -8px 25px rgba(15,23,42,.05);
}


.product-page ~ .cart-panel .cart-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;
}


.product-page ~ .cart-panel .cart-total span {
    color: var(--muted);

    font-size: 12px;
}


.product-page ~ .cart-panel .checkout-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #263954
        );

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    transition: .25s ease;
}


.product-page ~ .cart-panel .checkout-btn:hover {
    background: var(--gold);

    transform:
        translateY(-2px);
}


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

@media (max-width: 767.98px) {

    .category-header {
        padding:
            35px 0 30px;
    }


    .category-header .container {
        padding:
            0 14px;
    }


    #categoryTitle {
        font-size: 29px;
    }


    .category-header > .container > p {
        font-size: 12px;

        margin-bottom: 20px;
    }


    .categories {
        gap: 7px;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 4px;

        scrollbar-width: none;
    }


    .categories::-webkit-scrollbar {
        display: none;
    }


    .category-btn {
        flex:
            0 0 auto;

        min-height: 37px;

        padding:
            6px 12px;

        font-size: 10px;
    }


    .category-tools {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin:
            20px 0;

        padding: 12px;

        border-radius: 17px;
    }


    #sortProducts {
        width: 100%;
    }


    .products-top {
        margin-top: 25px;
    }


    .products-top h2 {
        font-size: 20px;
    }


    #productCount {
        font-size: 9px;
    }


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

        gap: 12px;
    }


    /* -----------------------------------------
       PRODUCT PAGE
    ----------------------------------------- */

    .product-page .container {
        padding:
            15px 12px 30px !important;
    }


    .product-back {
        margin-bottom: 15px;

        min-height: 38px;

        font-size: 11px;
    }


    .product-detail,
    .product-details,
    .product-content,
    .product-main {
        border-radius: 20px;
    }


    #productContent h1,
    #productContent h2 {
        font-size: 22px;
    }


    #productContent p {
        font-size: 12px;

        line-height: 2;
    }


    #productContent .new-price {
        font-size: 20px;
    }


    #productContent .price,
    #productContent .product-price,
    #productContent .price-box {
        padding: 14px;
    }


    .product-gallery img,
    .product-images img,
    .thumbnails img {
        width: 60px;
        height: 60px;
    }


    .product-page ~ .cart-panel {
        width: 100vw;

        max-width: none;
    }

}


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

@media (max-width: 380px) {

    #productsList {
        gap: 9px;
    }


    .category-btn {
        font-size: 9px;
    }


    #categoryTitle {
        font-size: 25px;
    }


    .products-top h2 {
        font-size: 18px;
    }

}


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

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

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

        gap: 16px;
    }

}


/* =========================================================
   PRODUCT PAGE DESKTOP LAYOUT
========================================================= */

@media (min-width: 992px) {

    #productContent {
        min-height: 600px;
    }


    .product-detail,
    .product-details,
    .product-content,
    .product-main {
        padding: 30px;
    }

}
/* =========================================================
   LOGIN / REGISTER
   شهر کوسن - Premium Authentication
========================================================= */

body:has(.login-box) {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(198,161,91,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(23,35,55,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f5ef,
            #ffffff
        );

}


/* =========================================================
   AUTH CONTAINER
========================================================= */

body:has(.login-box) .container {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}


body:has(.login-box) .row {

    width: 100%;

}


/* =========================================================
   LOGIN BOX
========================================================= */

.login-box {

    position: relative;

    padding: 42px 38px;

    border-radius: 28px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(23,35,55,.08);

    box-shadow:
        0 25px 70px
        rgba(15,23,42,.12);

    overflow: hidden;

}


/* خط طلایی بالای کارت */

.login-box::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 4px;

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

}


/* دایره تزئینی */

.login-box::after {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        rgba(198,161,91,.055);

    top: -90px;
    left: -70px;

    pointer-events: none;

}


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

.login-box h2 {

    position: relative;

    z-index: 2;

    color: var(--primary);

    font-size: 29px;

    font-weight: 800;

    margin-bottom: 30px !important;

}


.login-box h2::after {

    content: "";

    display: block;

    width: 42px;

    height: 3px;

    margin:
        10px auto 0;

    border-radius: 20px;

    background: var(--gold);

}


/* =========================================================
   AUTH INPUTS
========================================================= */

.login-box .form-control {

    height: 52px;

    padding:
        0 16px;

    border:
        1px solid #e4e0d8;

    border-radius: 14px;

    background:
        #faf9f7;

    color: var(--text);

    font-family: inherit;

    font-size: 13px;

    box-shadow: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.login-box .form-control::placeholder {

    color: #999;

}


.login-box .form-control:focus {

    background: #fff;

    border-color:
        rgba(198,161,91,.75);

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.10);

}


/* =========================================================
   AUTH BUTTON
========================================================= */

.login-box #loginBtn,
.login-box #registerBtn {

    height: 52px;

    border: 0 !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #263954
        ) !important;

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 25px
        rgba(23,35,55,.15);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.login-box #loginBtn:hover,
.login-box #registerBtn:hover {

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #d5b570
        ) !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(198,161,91,.22);

}


/* =========================================================
   AUTH LINKS
========================================================= */

.login-box p {

    color: var(--muted);

    font-size: 12px;

}


.login-box a {

    color: var(--gold);

    font-weight: 700;

    transition: .2s ease;

}


.login-box a:hover {

    color: var(--primary);

}


/* =========================================================
   AUTH STORE LINK
========================================================= */

.login-box .text-center.mt-3:last-child {

    margin-top: 25px !important;

    padding-top: 20px;

    border-top:
        1px solid #eeeae3;

}


.login-box .text-center.mt-3:last-child a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        9px 14px;

    border-radius: 11px;

    background: var(--cream);

    color: var(--primary);

    font-size: 11px;

}


.login-box .text-center.mt-3:last-child a:hover {

    background: var(--primary);

    color: #fff;

}


/* =========================================================
   CHECKOUT PAGE
========================================================= */

body:has(.checkout-page) {

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

}


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

.checkout-page {

    padding-bottom: 60px;

}


.checkout-title {

    position: relative;

    margin:
        25px 0 35px;

    padding:
        35px 30px;

    border-radius: 26px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #101a2a,
            #263954
        );

    color: #fff;

    box-shadow:
        0 18px 50px
        rgba(15,23,42,.12);

}


.checkout-title::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(198,161,91,.08);

    left: -90px;
    top: -120px;

}


.checkout-title span,
.checkout-title h1,
.checkout-title p {

    position: relative;

    z-index: 2;

}


.checkout-title span {

    color: var(--gold-light);

    font-size: 12px;

    font-weight: 700;

}


.checkout-title h1 {

    margin:
        5px 0 8px;

    font-size:
        clamp(28px, 4vw, 40px);

    font-weight: 800;

}


.checkout-title p {

    margin: 0;

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

    font-size: 13px;

}


/* =========================================================
   BACK BUTTON CHECKOUT
========================================================= */

.checkout-page ~ * {
    box-sizing: border-box;
}


/* =========================================================
   CHECKOUT PANELS
========================================================= */

.checkout-panel {

    padding: 28px;

    height: 100%;

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

    border-radius: 23px;

    background: #fff;

    box-shadow:
        0 10px 35px
        rgba(15,23,42,.06);

}


.checkout-panel > h3 {

    position: relative;

    margin:
        0 0 25px;

    padding-bottom: 13px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 800;

}


.checkout-panel > h3::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 38px;

    height: 3px;

    border-radius: 20px;

    background: var(--gold);

}


/* =========================================================
   CHECKOUT LABELS
========================================================= */

.checkout-panel .form-label {

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   CHECKOUT INPUTS
========================================================= */

.checkout-panel .form-control {

    min-height: 48px;

    padding:
        10px 14px;

    border:
        1px solid #e4e0d8;

    border-radius: 13px;

    background: #faf9f7;

    color: var(--text);

    font-family: inherit;

    font-size: 12px;

    box-shadow: none;

    transition: .25s ease;

}


.checkout-panel textarea.form-control {

    resize: vertical;

}


.checkout-panel .form-control::placeholder {

    color: #a1a1a1;

}


.checkout-panel .form-control:focus {

    background: #fff;

    border-color:
        rgba(198,161,91,.7);

    box-shadow:
        0 0 0 4px
        rgba(198,161,91,.09);

}


/* =========================================================
   PAYMENT METHODS
========================================================= */

.payment-method-section {

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid #eeeae3;

}


.payment-method-title {

    margin: 0 0 5px;

    color: var(--primary);

    font-size: 17px;

    font-weight: 800;

}


.payment-method-description {

    margin-bottom: 15px;

    color: var(--muted);

    font-size: 11px;

}


.payment-methods {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.payment-method-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 72px;

    padding:
        12px 15px;

    border:
        1px solid #e4e0d8;

    border-radius: 15px;

    background: #faf9f7;

    cursor: pointer;

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

}


.payment-method-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(198,161,91,.45);

}


/* radio را پنهان می‌کنیم */

.payment-method-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


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

.payment-method-card.active {

    border-color:
        var(--gold);

    background:
        #fffaf0;

    box-shadow:
        0 7px 20px
        rgba(198,161,91,.09);

}


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

.payment-method-icon {

    width: 43px;
    height: 43px;

    flex:
        0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        var(--cream);

    font-size: 20px;

}


.payment-method-info {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.payment-method-info strong {

    color: var(--primary);

    font-size: 12px;

}


.payment-method-info span {

    color: var(--muted);

    font-size: 10px;

}


/* CHECK */

.payment-method-check {

    margin-right: auto;

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #e7e4dd;

    color: transparent;

    font-size: 12px;

    font-weight: 800;

    transition: .25s ease;

}


.payment-method-card.active
.payment-method-check {

    background: var(--gold);

    color: #fff;

}


/* =========================================================
   CHECKOUT SUBMIT
========================================================= */

.checkout-submit {

    width: 100%;

    min-height: 55px;

    margin-top: 25px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #263954
        );

    color: #fff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 10px 25px
        rgba(23,35,55,.15);

    transition: .25s ease;

}


.checkout-submit:hover {

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #d5b570
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(198,161,91,.22);

}


.checkout-submit span {

    margin-right: 8px;

}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.order-summary {

    position: sticky;

    top: 100px;

}


.checkout-items {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: 450px;

    overflow-y: auto;

    padding-left: 3px;

}


/* عناصر خلاصه سفارش */

.checkout-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px;

    border:
        1px solid #eeeae3;

    border-radius: 14px;

    background: #faf9f7;

}


.checkout-item img {

    width: 65px;
    height: 65px;

    flex:
        0 0 65px;

    object-fit: cover;

    border-radius: 11px;

}


.checkout-item-info {

    flex: 1;

}


.checkout-item-info strong {

    display: block;

    color: var(--primary);

    font-size: 11px;

}


.checkout-item-info span {

    color: var(--muted);

    font-size: 10px;

}


.checkout-item-price {

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

}


/* =========================================================
   CHECKOUT TOTAL
========================================================= */

.checkout-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid #e8e4dd;

}


.checkout-total span {

    color: var(--muted);

    font-size: 12px;

}


.checkout-total strong {

    color: var(--primary);

    font-size: 19px;

    font-weight: 800;

}


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

@media (max-width: 767.98px) {

    body:has(.login-box) .container {

        padding:
            20px 14px;

    }


    .login-box {

        padding:
            35px 22px;

        border-radius: 22px;

    }


    .login-box h2 {

        font-size: 25px;

    }


    .login-box .form-control {

        height: 49px;

        font-size: 12px;

    }


    .login-box #loginBtn,
    .login-box #registerBtn {

        height: 49px;

    }


    /* CHECKOUT */

    body:has(.checkout-page) .container {

        padding:
            15px 12px !important;

    }


    .checkout-title {

        padding:
            27px 20px;

        margin:
            15px 0 20px;

        border-radius: 20px;

    }


    .checkout-title h1 {

        font-size: 28px;

    }


    .checkout-title p {

        font-size: 11px;

    }


    .checkout-panel {

        padding:
            21px 17px;

        border-radius: 19px;

    }


    .checkout-panel > h3 {

        font-size: 17px;

    }


    .payment-method-card {

        min-height: 67px;

        padding:
            10px;

    }


    .payment-method-icon {

        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 17px;

    }


    .payment-method-info strong {

        font-size: 11px;

    }


    .payment-method-info span {

        font-size: 9px;

    }


    .order-summary {

        position: static;

    }


    .checkout-items {

        max-height: none;

    }


    .checkout-submit {

        min-height: 51px;

    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 380px) {

    .login-box {

        padding:
            30px 17px;

    }


    .checkout-panel {

        padding:
            18px 14px;

    }


    .payment-method-card {

        gap: 8px;

    }


    .payment-method-info span {

        font-size: 8px;

    }

}
/* =========================================================
   CART - PREMIUM SHOPPING CART
   ========================================================= */

.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 94vw);
    height: 100vh;

    background: #fffdf9;

    z-index: 7000;

    display: flex;
    flex-direction: column;

    transform: translateX(110%);
    transition: transform .35s ease;

    box-shadow: -12px 0 40px rgba(23, 35, 55, .18);

    border-left: 1px solid rgba(198, 161, 91, .18);
}

.cart-panel.active {
    transform: translateX(0);
}


/* =========================================================
   CART HEADER
   ========================================================= */

.cart-header {
    min-height: 76px;

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

    padding: 0 24px;

    background: #172337;
    color: #fff;

    border-bottom: 1px solid rgba(198, 161, 91, .25);
}

.cart-header h3 {
    margin: 0;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 19px;
    font-weight: 800;
}

.cart-header h3 i {
    color: #c6a15b;
    font-size: 21px;
}

.close-cart {
    width: 38px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;

    background: rgba(255,255,255,.08);
    color: #fff;

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

    cursor: pointer;

    transition: .2s ease;
}

.close-cart:hover {
    background: #c6a15b;
    color: #172337;
    transform: rotate(90deg);
}


/* =========================================================
   CART ITEMS AREA
   ========================================================= */

.cart-items {
    flex: 1;

    overflow-y: auto;

    padding: 18px;

    scrollbar-width: thin;
    scrollbar-color: #c6a15b transparent;
}

.cart-items::-webkit-scrollbar {
    width: 5px;
}

.cart-items::-webkit-scrollbar-thumb {
    background: #c6a15b;
    border-radius: 20px;
}


/* =========================================================
   CART PRODUCT
   ========================================================= */

.cart-product {
    background: #ffffff;

    border: 1px solid #eee7da;
    border-radius: 18px;

    padding: 17px;

    margin-bottom: 13px;

    box-shadow: 0 5px 18px rgba(23, 35, 55, .06);

    transition: .2s ease;
}

.cart-product:hover {
    border-color: rgba(198, 161, 91, .45);

    box-shadow:
        0 8px 24px rgba(23, 35, 55, .09);

    transform: translateY(-1px);
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.cart-product h5 {
    margin: 0 0 8px;

    color: #172337;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.8;
}


/* =========================================================
   OPTION
   ========================================================= */

.cart-product-option {
    margin: 0 0 9px;

    color: #777;

    font-size: 12px;
}

.cart-product-option strong {
    color: #172337;
    font-weight: 700;
}


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

.cart-product > p {
    margin: 0 0 14px;

    color: #777;

    font-size: 12px;
}

.cart-product-price {
    color: #172337;

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

    margin-bottom: 14px;
}


/* =========================================================
   BOTTOM ROW
   ========================================================= */

.cart-product-bottom {
    display: flex;

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

    gap: 12px;

    padding-top: 13px;

    border-top: 1px solid #f0ebe2;
}


/* =========================================================
   QUANTITY BOX
   ========================================================= */

.quantity-box {
    display: inline-flex;

    align-items: center;

    height: 42px;

    background: #f8f5ef;

    border: 1px solid #e7dfd1;

    border-radius: 13px;

    overflow: hidden;
}


/* =========================================================
   PLUS / MINUS BUTTON
   ========================================================= */

.quantity-box button {
    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    color: #172337;

    font-size: 21px;
    font-weight: 700;

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

    cursor: pointer;

    transition: .2s ease;
}

.quantity-box button:hover {
    background: #172337;
    color: #fff;
}

.quantity-box button:active {
    transform: scale(.9);
}


/* =========================================================
   NUMBER
   ========================================================= */

.quantity-box span {
    min-width: 38px;

    text-align: center;

    color: #172337;

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

    user-select: none;
}


/* =========================================================
   REMOVE BUTTON
   ========================================================= */

.remove-cart {
    height: 40px;

    padding: 0 13px;

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

    gap: 6px;

    border: 1px solid #eadfda;
    border-radius: 11px;

    background: #fff;

    color: #a04b4b;

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

    cursor: pointer;

    transition: .2s ease;
}

.remove-cart i {
    font-size: 14px;
}

.remove-cart:hover {
    background: #fff1f1;

    border-color: #e2bcbc;

    color: #8f2929;
}


/* =========================================================
   EMPTY CART
   ========================================================= */

.empty-cart {
    min-height: 300px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    color: #777;
}

.empty-cart-icon {
    width: 72px;
    height: 72px;

    margin-bottom: 18px;

    border-radius: 22px;

    background: #f8f5ef;

    color: #c6a15b;

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

    font-size: 31px;
}

.empty-cart h4 {
    margin: 0 0 8px;

    color: #172337;

    font-size: 16px;
    font-weight: 800;
}

.empty-cart p {
    margin: 0;

    font-size: 12px;
    color: #888;
}


/* =========================================================
   CART FOOTER
   ========================================================= */

.cart-footer {
    padding: 18px 20px 20px;

    background: #fff;

    border-top: 1px solid #eee7da;

    box-shadow: 0 -8px 25px rgba(23, 35, 55, .06);
}


/* =========================================================
   TOTAL
   ========================================================= */

.cart-total {
    display: flex;

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

    margin-bottom: 14px;

    padding: 4px 2px;
}

.cart-total span {
    display: block;

    width: 100%;

    text-align: right;

    color: #172337;

    font-size: 18px;
    font-weight: 900;
}


/* =========================================================
   CHECKOUT BUTTON
   ========================================================= */

.checkout-btn {
    width: 100%;

    min-height: 52px;

    border-radius: 15px;

    background: #172337;
    color: #fff;

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

    gap: 10px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(23, 35, 55, .16);

    transition: .25s ease;
}

.checkout-btn:hover {
    background: #c6a15b;
    color: #172337;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(198, 161, 91, .25);
}

.checkout-btn i {
    font-size: 16px;
}


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

@media (max-width: 576px) {

    .cart-panel {
        width: 100%;
        max-width: 100%;

        border-left: 0;
    }


    .cart-header {
        min-height: 68px;

        padding: 0 17px;
    }


    .cart-header h3 {
        font-size: 17px;
    }


    .cart-items {
        padding: 13px;
    }


    .cart-product {
        padding: 14px;

        border-radius: 16px;
    }


    .cart-product-bottom {
        gap: 8px;
    }


    .quantity-box {
        height: 40px;
    }


    .quantity-box button {
        width: 38px;
        height: 40px;
    }


    .quantity-box span {
        min-width: 34px;
    }


    .remove-cart {
        height: 38px;

        padding: 0 10px;
    }


    .cart-footer {
        padding:
            15px
            15px
            calc(15px + env(safe-area-inset-bottom));
    }


    .checkout-btn {
        min-height: 50px;
    }

}


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

@media (max-width: 360px) {

    .cart-product-bottom {
        flex-direction: column;
        align-items: stretch;
    }


    .quantity-box {
        width: 100%;

        justify-content: space-between;
    }


    .quantity-box button {
        flex: 1;
    }


    .quantity-box span {
        flex: 1;
    }


    .remove-cart {
        width: 100%;
    }

}
/* =========================================================
   ACCOUNT PAGE - شهر کوسن
   ========================================================= */

body:has(.account-page) {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(198, 161, 91, .10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f5ef 0%,
            #fffdf9 50%,
            #f5f1e9 100%
        );

    min-height: 100vh;
}


/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-page {
    max-width: 1000px;

    margin: 20px auto 60px;
}


/* =========================================================
   HEADER
   ========================================================= */

.account-header {
    position: relative;

    overflow: hidden;

    margin-bottom: 28px;

    padding: 38px 34px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #172337,
            #202f48
        );

    color: #fff;

    box-shadow:
        0 18px 45px rgba(23, 35, 55, .16);
}

.account-header::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -100px;
    left: -70px;

    border-radius: 50%;

    background: rgba(198, 161, 91, .10);
}

.account-header::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -60px;
    bottom: -80px;

    border-radius: 50%;

    border: 1px solid rgba(198, 161, 91, .22);
}

.account-label {
    position: relative;
    z-index: 1;

    display: inline-block;

    margin-bottom: 8px;

    color: #c6a15b;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .5px;
}

.account-header h1 {
    position: relative;
    z-index: 1;

    margin: 0 0 10px;

    font-size: clamp(25px, 4vw, 34px);

    font-weight: 900;
}

.account-header p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 14px;
}


/* =========================================================
   USER INFO CARDS
   ========================================================= */

.account-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 24px;
}

.account-card {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 22px;

    background: rgba(255,255,255,.90);

    border: 1px solid #ebe4d8;

    border-radius: 22px;

    box-shadow:
        0 8px 25px rgba(23, 35, 55, .06);

    transition: .25s ease;
}

.account-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(198, 161, 91, .45);

    box-shadow:
        0 13px 30px rgba(23, 35, 55, .09);
}

.account-card-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

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

    border-radius: 17px;

    background: #f8f3e9;

    font-size: 25px;
}

.account-card-label {
    display: block;

    margin-bottom: 5px;

    color: #8a877f;

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

.account-card h3 {
    margin: 0;

    color: #172337;

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

    word-break: break-word;
}


/* =========================================================
   ACCOUNT MENU
   ========================================================= */

.account-menu {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-bottom: 42px;
}

.account-menu-item {
    width: 100%;

    min-height: 78px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 13px 18px;

    border: 1px solid #ebe4d8;
    border-radius: 19px;

    background: rgba(255,255,255,.94);

    color: #172337;

    text-decoration: none;

    text-align: right;

    cursor: pointer;

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

    transition: .25s ease;
}

.account-menu-item:hover {
    transform: translateX(-4px);

    border-color:
        rgba(198, 161, 91, .55);

    background: #fff;

    box-shadow:
        0 10px 27px rgba(23, 35, 55, .08);

    color: #172337;
}

.account-menu-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border-radius: 15px;

    background: #f8f3e9;

    font-size: 21px;
}

.account-menu-item > div {
    flex: 1;

    min-width: 0;
}

.account-menu-item strong {
    display: block;

    margin-bottom: 4px;

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

    color: #172337;
}

.account-menu-item small {
    display: block;

    color: #88847c;

    font-size: 11px;
}

.account-arrow {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

    border-radius: 11px;

    background: #f8f5ef;

    color: #172337;

    font-size: 17px;

    transition: .25s ease;
}

.account-menu-item:hover .account-arrow {
    background: #172337;

    color: #c6a15b;

    transform: translateX(-3px);
}


/* =========================================================
   LOGOUT
   ========================================================= */

.account-logout {
    font-family: inherit;
}

.account-logout .account-menu-icon {
    background: #fff2f2;
}

.account-logout strong {
    color: #9b3d3d;
}

.account-logout:hover {
    border-color: #e3bcbc;

    background: #fffafa;
}


/* =========================================================
   ORDERS SECTION
   ========================================================= */

.orders-section {
    margin-top: 10px;
}

.orders-title {
    position: relative;

    margin-bottom: 20px;

    padding: 0 5px;
}

.orders-title span {
    display: block;

    margin-bottom: 5px;

    color: #c6a15b;

    font-size: 12px;
    font-weight: 900;
}

.orders-title h2 {
    margin: 0;

    color: #172337;

    font-size: 25px;
    font-weight: 900;
}


/* =========================================================
   ORDERS LIST
   ========================================================= */

#ordersList {
    display: flex;
    flex-direction: column;

    gap: 15px;
}


/* =========================================================
   GENERIC ORDER CARD
   این بخش برای ساختارهای مختلف account.js
   ========================================================= */

#ordersList > * {
    background: #fff;

    border: 1px solid #ebe4d8;

    border-radius: 20px;

    box-shadow:
        0 7px 23px rgba(23, 35, 55, .06);

    transition: .25s ease;
}

#ordersList > *:hover {
    border-color:
        rgba(198, 161, 91, .40);

    box-shadow:
        0 12px 30px rgba(23, 35, 55, .09);
}


/* =========================================================
   ORDER TEXT
   ========================================================= */

#ordersList h3,
#ordersList h4,
#ordersList h5 {
    color: #172337;

    font-weight: 900;
}

#ordersList p {
    color: #777;

    font-size: 13px;

    line-height: 1.9;
}


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

#ordersList .status,
#ordersList .order-status,
#ordersList [class*="status"] {
    display: inline-flex;

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

    min-height: 30px;

    padding: 4px 11px;

    border-radius: 50px;

    background: #f8f3e9;

    color: #8c6e36;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   ORDER BUTTONS
   ========================================================= */

#ordersList button,
#ordersList .order-btn,
#ordersList a {
    transition: .2s ease;
}

#ordersList button {
    font-family: inherit;
}


/* =========================================================
   EMPTY ORDERS
   ========================================================= */

#ordersList:empty::before {
    content: "هنوز سفارشی ثبت نکرده‌اید.";

    min-height: 170px;

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

    padding: 25px;

    border: 1px dashed #dcd2c2;

    border-radius: 20px;

    background: rgba(255,255,255,.7);

    color: #888;

    font-size: 14px;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

body:has(.account-page) .product-back {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 18px;

    padding: 9px 15px;

    border: 1px solid #e6ded0;
    border-radius: 12px;

    background: rgba(255,255,255,.8);

    color: #172337;

    text-decoration: none;

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

    transition: .2s ease;
}

body:has(.account-page) .product-back:hover {
    background: #172337;

    border-color: #172337;

    color: #fff;
}


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

@media (max-width: 768px) {

    .account-page {
        margin-top: 10px;

        margin-bottom: 35px;
    }


    .account-header {
        padding: 28px 22px;

        border-radius: 23px;
    }


    .account-header h1 {
        font-size: 25px;
    }


    .account-header p {
        font-size: 12px;
    }


    .account-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .account-card {
        padding: 17px;

        border-radius: 18px;
    }


    .account-card-icon {
        width: 50px;
        height: 50px;

        border-radius: 14px;

        font-size: 22px;
    }


    .account-menu {
        gap: 10px;

        margin-bottom: 32px;
    }


    .account-menu-item {
        min-height: 70px;

        padding: 10px 13px;

        border-radius: 16px;

        gap: 11px;
    }


    .account-menu-icon {
        width: 43px;
        height: 43px;

        border-radius: 13px;

        font-size: 18px;
    }


    .account-menu-item strong {
        font-size: 13px;
    }


    .account-menu-item small {
        font-size: 10px;
    }


    .account-arrow {
        width: 31px;
        height: 31px;
    }


    .orders-title h2 {
        font-size: 22px;
    }

}


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

@media (max-width: 430px) {

    .account-header {
        padding: 24px 18px;
    }


    .account-header h1 {
        font-size: 22px;
    }


    .account-card h3 {
        font-size: 14px;
    }


    .account-menu-item {
        padding: 10px;
    }


    .account-menu-icon {
        width: 40px;
        height: 40px;
    }


    .account-menu-item small {
        font-size: 9px;
    }

}
/* =========================================================
   FAVORITES PAGE - شهر کوسن
   ========================================================= */

body:has(.favorites-page) {
    background:
        radial-gradient(circle at top right, rgba(198, 161, 91, 0.08), transparent 30%),
        linear-gradient(135deg, #f8f5ef 0%, #ffffff 55%, #f4f0e8 100%);
    min-height: 100vh;
}

/* صفحه علاقه‌مندی */
.favorites-page {
    max-width: 1250px;
    margin: 25px auto 60px;
}

/* هدر */
.favorites-header {
    text-align: center;
    margin: 25px 0 40px;
    position: relative;
}

.favorites-header > span {
    display: inline-block;
    color: var(--gold, #c6a15b);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.favorites-header h1 {
    margin: 0;
    color: var(--primary, #172337);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    line-height: 1.5;
}

.favorites-header p {
    margin: 10px 0 0;
    color: #777;
    font-size: 14px;
}

/* تعداد محصولات */
#favoritesCount {
    display: inline-block;
    padding: 8px 18px;
    margin-top: 14px;
    border-radius: 50px;
    background: rgba(198, 161, 91, 0.10);
    color: #9a7738;
    font-weight: 700;
}

/* گرید */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* کارت علاقه‌مندی */
.favorites-grid .product-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(23, 35, 55, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(23, 35, 55, 0.07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.favorites-grid .product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(23, 35, 55, 0.13);
}

/* تصویر */
.favorites-grid .product-image,
.favorites-grid .product-card img {
    width: 100%;
    height: 245px;
    object-fit: cover;
    display: block;
}

/* اطلاعات */
.favorites-grid .product-info {
    padding: 18px;
}

.favorites-grid .product-title,
.favorites-grid .product-name {
    color: var(--primary, #172337);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
    margin-bottom: 8px;
}

/* قیمت */
.favorites-grid .product-price {
    color: #a17c38;
    font-size: 17px;
    font-weight: 900;
}

/* دکمه‌ها */
.favorites-grid .product-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.favorites-grid button,
.favorites-grid a {
    border-radius: 12px;
}

/* دکمه حذف علاقه‌مندی */
.favorites-grid .favorite-btn,
.favorites-grid .remove-favorite,
.favorites-grid .remove-favorite-btn {
    transition: all .25s ease;
}

.favorites-grid .favorite-btn:hover,
.favorites-grid .remove-favorite:hover,
.favorites-grid .remove-favorite-btn:hover {
    transform: scale(1.05);
}

/* وقتی محصولی در علاقه‌مندی نیست */
.favorites-empty {
    grid-column: 1 / -1;
    text-align: center;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(23,35,55,.08);
    border-radius: 25px;
    padding: 70px 25px;
    box-shadow: 0 10px 35px rgba(23,35,55,.06);
}

.favorites-empty-icon {
    font-size: 55px;
    margin-bottom: 15px;
}

.favorites-empty h3 {
    color: var(--primary, #172337);
    font-size: 23px;
    font-weight: 900;
    margin-bottom: 10px;
}

.favorites-empty p {
    color: #777;
    margin-bottom: 22px;
}

.favorites-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 13px;
    background: var(--primary, #172337);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: all .25s ease;
}

.favorites-empty a:hover {
    background: var(--gold, #c6a15b);
    color: #fff;
    transform: translateY(-2px);
}

/* تبلت */
@media (max-width: 992px) {
    .favorites-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .favorites-grid .product-image,
    .favorites-grid .product-card img {
        height: 220px;
    }
}

/* موبایل */
@media (max-width: 768px) {
    .favorites-page {
        margin-top: 15px;
        margin-bottom: 35px;
    }

    .favorites-header {
        margin: 20px 0 28px;
    }

    .favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .favorites-grid .product-image,
    .favorites-grid .product-card img {
        height: 185px;
    }

    .favorites-grid .product-info {
        padding: 13px;
    }

    .favorites-grid .product-title,
    .favorites-grid .product-name {
        font-size: 14px;
    }

    .favorites-grid .product-price {
        font-size: 14px;
    }
}

/* موبایل خیلی کوچک */
@media (max-width: 430px) {
    .favorites-grid {
        gap: 10px;
    }

    .favorites-grid .product-image,
    .favorites-grid .product-card img {
        height: 165px;
    }

    .favorites-grid .product-info {
        padding: 11px;
    }

    .favorites-header h1 {
        font-size: 26px;
    }

    .favorites-empty {
        padding: 50px 18px;
    }
}
/* =========================================================
   CATEGORY PRODUCTS - شهر کوسن
   کارت کامل محصولات + علاقه‌مندی + تخفیف + ریسپانسیو
   ========================================================= */

/* گرید اصلی محصولات دسته‌بندی */
#productsList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 25px;
}

/* کارت محصول */
#productsList .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(23, 35, 55, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(23, 35, 55, 0.07);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
    min-width: 0;
}

#productsList .product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(198, 161, 91, 0.35);
    box-shadow: 0 18px 42px rgba(23, 35, 55, 0.13);
}

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

#productsList .product-image,
#productsList .product-card img {
    width: 100%;
    height: 270px;
    display: block;
    object-fit: cover;
    background: #f5f2ec;
    transition: transform .45s ease;
}

#productsList .product-card:hover .product-image,
#productsList .product-card:hover img {
    transform: scale(1.035);
}

/* اگر تصویر داخل لینک باشد */
#productsList .product-card > a:first-child {
    display: block;
    overflow: hidden;
    position: relative;
}

/* ---------------------------------------------------------
   قلب علاقه‌مندی
   --------------------------------------------------------- */

#productsList .favorite-btn,
#productsList .favorite-button,
#productsList .add-favorite,
#productsList .wishlist-btn,
#productsList .product-favorite {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;

    width: 42px;
    height: 42px;

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

    padding: 0;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;

    background: rgba(255,255,255,.94);
    color: #172337;

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

    cursor: pointer;
    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

#productsList .favorite-btn:hover,
#productsList .favorite-button:hover,
#productsList .add-favorite:hover,
#productsList .wishlist-btn:hover,
#productsList .product-favorite:hover {
    transform: scale(1.1);
    background: #172337;
    color: #fff;
}

/* قلب فعال */
#productsList .favorite-btn.active,
#productsList .favorite-button.active,
#productsList .add-favorite.active,
#productsList .wishlist-btn.active,
#productsList .product-favorite.active,
#productsList .favorite-btn.favorited,
#productsList .favorite-button.favorited,
#productsList .wishlist-btn.favorited {
    background: #172337;
    color: #c6a15b;
}

/* آیکون قلب */
#productsList .favorite-btn i,
#productsList .favorite-button i,
#productsList .add-favorite i,
#productsList .wishlist-btn i,
#productsList .product-favorite i {
    font-size: 19px;
    line-height: 1;
}

/* ---------------------------------------------------------
   بج‌های محصول
   --------------------------------------------------------- */

#productsList .product-badges,
#productsList .product-badge-container {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#productsList .product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 6px 10px;
    border-radius: 8px;

    background: #172337;
    color: #fff;

    font-size: 11px;
    font-weight: 800;

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

#productsList .discount-badge {
    background: #a17c38;
}

#productsList .special-badge {
    background: #172337;
}

#productsList .best-seller-badge {
    background: #c6a15b;
    color: #172337;
}

/* ---------------------------------------------------------
   اطلاعات محصول
   --------------------------------------------------------- */

#productsList .product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 17px 18px 18px;
}

/* دسته محصول */
#productsList .product-category {
    color: #a17c38;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 5px;
}

/* نام محصول */
#productsList .product-title,
#productsList .product-name {
    color: #172337;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
    margin: 0 0 8px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* لینک نام محصول */
#productsList .product-title a,
#productsList .product-name a {
    color: inherit;
    text-decoration: none;
}

/* توضیحات */
#productsList .product-description {
    color: #777;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---------------------------------------------------------
   قیمت
   --------------------------------------------------------- */

#productsList .product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: auto;
    padding-top: 8px;

    color: #172337;
    font-size: 17px;
    font-weight: 900;
}

#productsList .old-price {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    text-decoration: line-through;
}

#productsList .discount-price {
    color: #a17c38;
    font-size: 18px;
    font-weight: 900;
}

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

#productsList .product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

#productsList .product-actions a,
#productsList .product-actions button {
    min-height: 42px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    transition: all .25s ease;
}

/* دکمه مشاهده */
#productsList .view-product-btn,
#productsList .product-view-btn {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #172337;
    color: #fff;
    border: 1px solid #172337;

    text-decoration: none;
}

#productsList .view-product-btn:hover,
#productsList .product-view-btn:hover {
    background: #c6a15b;
    border-color: #c6a15b;
    color: #172337;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   دکمه افزودن به سبد
   --------------------------------------------------------- */

#productsList .add-to-cart-btn {
    min-width: 44px;
    width: 44px;
    height: 42px;

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

    border: 1px solid #172337;
    border-radius: 12px;

    background: transparent;
    color: #172337;

    cursor: pointer;
    transition: all .25s ease;
}

#productsList .add-to-cart-btn:hover {
    background: #172337;
    color: #fff;
    transform: translateY(-2px);
}

#productsList .add-to-cart-btn i {
    font-size: 17px;
}

/* ---------------------------------------------------------
   حالت بدون محصول
   --------------------------------------------------------- */

#productsList .empty-products,
#productsList .no-products {
    grid-column: 1 / -1;

    padding: 70px 20px;
    text-align: center;

    background: #fff;
    border: 1px solid rgba(23,35,55,.08);
    border-radius: 22px;

    color: #777;
    box-shadow: 0 8px 25px rgba(23,35,55,.05);
}

#productsList .empty-products i,
#productsList .no-products i {
    display: block;
    font-size: 48px;
    color: #c6a15b;
    margin-bottom: 15px;
}

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

.products-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 5px;
}

.products-top h2 {
    color: #172337;
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

#productCount {
    padding: 7px 14px;
    border-radius: 50px;

    background: rgba(198,161,91,.12);
    color: #9a7738;

    font-size: 12px;
    font-weight: 800;
}

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

.category-tools {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 25px 0 10px;
}

.category-tools .search-wrapper {
    flex: 1;
    position: relative;
}

.category-tools .search-wrapper input {
    width: 100%;
    min-height: 48px;

    padding: 0 45px 0 16px;

    border: 1px solid rgba(23,35,55,.12);
    border-radius: 14px;

    background: #fff;
    color: #172337;

    outline: none;
    transition: .25s ease;
}

.category-tools .search-wrapper input:focus {
    border-color: #c6a15b;
    box-shadow: 0 0 0 4px rgba(198,161,91,.10);
}

.category-tools .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.category-tools select {
    min-width: 190px;
    min-height: 48px;

    padding: 0 15px;

    border: 1px solid rgba(23,35,55,.12);
    border-radius: 14px;

    background: #fff;
    color: #172337;

    font-family: inherit;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

.category-tools select:focus {
    border-color: #c6a15b;
}

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

@media (max-width: 1100px) {

    #productsList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    #productsList .product-image,
    #productsList .product-card img {
        height: 245px;
    }
}

@media (max-width: 768px) {

    #productsList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
        margin-top: 18px;
    }

    #productsList .product-image,
    #productsList .product-card img {
        height: 190px;
    }

    #productsList .product-info {
        padding: 13px;
    }

    #productsList .product-title,
    #productsList .product-name {
        font-size: 14px;
    }

    #productsList .product-price {
        font-size: 14px;
    }

    #productsList .discount-price {
        font-size: 15px;
    }

    #productsList .favorite-btn,
    #productsList .favorite-button,
    #productsList .add-favorite,
    #productsList .wishlist-btn,
    #productsList .product-favorite {
        width: 37px;
        height: 37px;
        top: 9px;
        left: 9px;
    }

    #productsList .favorite-btn i,
    #productsList .favorite-button i,
    #productsList .add-favorite i,
    #productsList .wishlist-btn i,
    #productsList .product-favorite i {
        font-size: 16px;
    }

    #productsList .product-badges,
    #productsList .product-badge-container {
        top: 9px;
        right: 9px;
    }

    #productsList .product-badge {
        padding: 5px 7px;
        font-size: 9px;
    }

    #productsList .product-actions {
        gap: 6px;
    }

    #productsList .product-actions a,
    #productsList .product-actions button {
        min-height: 39px;
        font-size: 11px;
    }

    .category-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .category-tools select {
        width: 100%;
        min-width: 0;
    }

    .products-top h2 {
        font-size: 20px;
    }

    #productCount {
        font-size: 10px;
        padding: 6px 10px;
    }
}

@media (max-width: 430px) {

    #productsList {
        gap: 10px;
    }

    #productsList .product-image,
    #productsList .product-card img {
        height: 165px;
    }

    #productsList .product-info {
        padding: 10px;
    }

    #productsList .product-title,
    #productsList .product-name {
        font-size: 13px;
        line-height: 1.7;
    }

    #productsList .product-price {
        font-size: 13px;
    }

    #productsList .discount-price {
        font-size: 14px;
    }

    #productsList .product-description {
        font-size: 10px;
    }

    #productsList .product-actions {
        margin-top: 10px;
    }

    #productsList .view-product-btn,
    #productsList .product-view-btn {
        font-size: 10px;
    }

    #productsList .add-to-cart-btn {
        width: 38px;
        min-width: 38px;
    }
}
/* =========================================================
   FIX CATEGORY PRODUCT IMAGE / BADGES
   ========================================================= */

/* خود کارت */
#productsList .product-card {
    position: relative !important;
    overflow: hidden;
}

/* محدوده تصویر محصول */
#productsList .product-card .product-image-wrapper,
#productsList .product-card .image-wrapper,
#productsList .product-card .product-img-wrapper,
#productsList .product-card > a:first-child {
    position: relative !important;
    display: block !important;
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #f3f0e9;
}

/* خود عکس */
#productsList .product-card img,
#productsList .product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* =========================================================
   بج‌ها: فقط روی قسمت عکس
   ========================================================= */

/* اگر بج‌ها داخل محدوده عکس باشند */
#productsList .product-image-wrapper .product-badges,
#productsList .image-wrapper .product-badges,
#productsList .product-img-wrapper .product-badges,
#productsList > .product-card > a:first-child .product-badges {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 20 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;

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

    pointer-events: none;
}

/* تک تک بج‌ها */
#productsList .product-badges .product-badge {
    position: static !important;

    display: inline-flex !important;
    width: max-content !important;
    max-width: 90%;

    padding: 6px 10px !important;
    margin: 0 !important;

    border-radius: 8px !important;

    background: #172337;
    color: #fff;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    white-space: nowrap;

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

/* تخفیف */
#productsList .product-badges .discount-badge {
    background: #a17c38 !important;
    color: #fff !important;
}

/* پیشنهاد ویژه */
#productsList .product-badges .special-badge {
    background: #172337 !important;
    color: #fff !important;
}

/* پرفروش */
#productsList .product-badges .best-seller-badge {
    background: #c6a15b !important;
    color: #172337 !important;
}

/* =========================================================
   قلب علاقه‌مندی
   ========================================================= */

#productsList .product-card .favorite-btn,
#productsList .product-card .favorite-button,
#productsList .product-card .add-favorite,
#productsList .product-card .wishlist-btn,
#productsList .product-card .product-favorite {
    position: absolute !important;

    top: 12px !important;
    left: 12px !important;
    right: auto !important;

    z-index: 30 !important;

    width: 42px !important;
    height: 42px !important;

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

    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.8) !important;

    background: rgba(255,255,255,.95) !important;
    color: #172337 !important;

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

/* =========================================================
   وقتی محصول عکس ندارد
   ========================================================= */

/*
   اگر img خراب/خالی باشد، خود کادر همچنان اندازه عکس را حفظ می‌کند.
*/
#productsList .product-card img {
    min-height: 270px;
}

/* جلوگیری از بیرون زدن نوشته روی تصویر */
#productsList .product-card .product-info {
    position: relative !important;
    z-index: 2 !important;

    background: #fff !important;
}

/* نام محصول هیچ‌وقت زیر بج قرار نگیرد */
#productsList .product-card .product-title,
#productsList .product-card .product-name,
#productsList .product-card .product-description,
#productsList .product-card .product-price {
    position: relative;
    z-index: 2;
}

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

@media (max-width: 768px) {

    #productsList .product-card .product-image-wrapper,
    #productsList .product-card .image-wrapper,
    #productsList .product-card .product-img-wrapper,
    #productsList .product-card > a:first-child {
        height: 190px;
    }

    #productsList .product-card img,
    #productsList .product-card .product-image {
        min-height: 190px !important;
        height: 190px !important;
    }

    #productsList .product-badges .product-badge {
        padding: 5px 7px !important;
        font-size: 8px !important;
    }

    #productsList .product-card .favorite-btn,
    #productsList .product-card .favorite-button,
    #productsList .product-card .add-favorite,
    #productsList .product-card .wishlist-btn,
    #productsList .product-card .product-favorite {
        width: 36px !important;
        height: 36px !important;
        top: 9px !important;
        left: 9px !important;
    }
}

/* موبایل کوچک */
@media (max-width: 430px) {

    #productsList .product-card .product-image-wrapper,
    #productsList .product-card .image-wrapper,
    #productsList .product-card .product-img-wrapper,
    #productsList .product-card > a:first-child {
        height: 165px;
    }

    #productsList .product-card img,
    #productsList .product-card .product-image {
        min-height: 165px !important;
        height: 165px !important;
    }
}
/* =========================================================
   PRODUCT PAGE - FINAL FIX
   مخصوص ساختار واقعی product.js شهر کوسن
   ========================================================= */

/* ---------- صفحه ---------- */

body:has(#productContent) {
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(198, 161, 91, .10),
            transparent 32%
        ),
        #f7f4ee;
}

/* ---------- کانتینر اصلی ---------- */

#productContent {
    display: block !important;

    width: min(1200px, calc(100% - 30px));
    margin: 25px auto 70px;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

/* ---------- کارت اصلی ---------- */

#productContent .product-detail {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    gap: 35px;

    padding: 25px;

    background: #fff;

    border: 1px solid rgba(23,35,55,.08);

    border-radius: 26px;

    box-shadow:
        0 15px 45px rgba(23,35,55,.08);

    align-items: start;
}

/* =========================================================
   GALLERY
   ========================================================= */

#productContent .product-gallery {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;
}

/* عکس اصلی */

#productContent .product-main-image {
    position: relative;

    width: 100%;
    height: 500px;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f5f2eb,
            #ece7dd
        );

    display: flex;

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

/* عکس */

#productContent #mainProductImage {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    display: block;

    transition: transform .35s ease;
}

#productContent .product-main-image:hover
#mainProductImage {
    transform: scale(1.02);
}

/* =========================================================
   بدون عکس
   ========================================================= */

/*
اگر محصول عکس نداشته باشد، به جای یک فضای خراب
یک کادر مرتب و ثابت داریم.
*/

#productContent .product-main-image:has(
    #mainProductImage[src=""]
) {
    background:
        linear-gradient(
            135deg,
            #f3f0e9,
            #e9e4da
        );
}

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

#productContent .product-detail-badges {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    left: auto !important;
    bottom: auto !important;

    z-index: 20 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-end !important;

    gap: 7px !important;

    width: auto !important;

    pointer-events: none;
}

#productContent .product-detail-badge {
    position: static !important;

    display: inline-flex !important;

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

    width: max-content;

    max-width: 100%;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.4;

    white-space: nowrap;

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

#productContent .product-detail-badge.special {
    background: #172337;

    color: #fff;
}

#productContent .product-detail-badge.bestseller {
    background: #c6a15b;

    color: #172337;
}

#productContent .product-detail-badge.discount {
    background: #9b7433;

    color: #fff;
}

/* =========================================================
   FAVORITE روی عکس
   ========================================================= */

#productContent .product-favorite-btn {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 30 !important;

    width: 45px !important;
    height: 45px !important;

    padding: 0 !important;

    display: flex !important;

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

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 50%;

    background: rgba(255,255,255,.95);

    color: #172337;

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

    cursor: pointer;

    transition: .25s ease;
}

#productContent .product-favorite-btn:hover {
    transform: scale(1.08);

    background: #172337;

    color: #c6a15b;
}

#productContent .product-favorite-btn.active {
    background: #172337;

    color: #c6a15b;
}

/* =========================================================
   ARROWS
   ========================================================= */

#productContent .gallery-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 25;

    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #172337;

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

    cursor: pointer;

    transition: .25s ease;
}

#productContent .gallery-arrow:hover {
    background: #172337;

    color: #fff;
}

#productContent .gallery-arrow-right {
    right: 12px;
}

#productContent .gallery-arrow-left {
    left: 12px;
}

/* =========================================================
   ZOOM
   ========================================================= */

#productContent .zoom-product-btn {
    position: absolute;

    bottom: 14px;
    left: 14px;

    z-index: 25;

    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.93);

    color: #172337;

    display: flex;

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

    cursor: pointer;

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

/* =========================================================
   THUMBNAILS
   ========================================================= */

#productContent .product-thumbnails {
    display: grid;

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

    gap: 9px;

    width: 100%;

    margin-top: 12px;
}

/*
فقط به اندازه تعداد عکس‌ها فضا می‌گیرد.
*/

#productContent .product-thumbnail {
    position: relative;

    width: 100%;
    height: 76px;

    padding: 0;

    overflow: hidden;

    border: 2px solid transparent;

    border-radius: 11px;

    background: #f2efe8;

    cursor: pointer;

    transition: .25s ease;
}

#productContent .product-thumbnail:hover {
    transform: translateY(-2px);
}

#productContent .product-thumbnail.active {
    border-color: #c6a15b;
}

#productContent .product-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

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

#productContent .product-info {
    min-width: 0;

    padding: 5px 5px 10px;

    display: flex;

    flex-direction: column;
}

/* دسته */

#productContent .product-category {
    width: fit-content;

    padding: 6px 13px;

    margin-bottom: 12px;

    border-radius: 50px;

    background: rgba(198,161,91,.12);

    color: #967333;

    font-size: 11px;

    font-weight: 900;
}

/* نام */

#productContent .product-detail-title {
    margin: 0;

    color: #172337;

    font-size: clamp(26px, 3vw, 38px);

    line-height: 1.55;

    font-weight: 900;
}

/* خط */

#productContent .product-detail-divider {
    width: 55px;

    height: 3px;

    margin: 15px 0;

    border-radius: 10px;

    background: #c6a15b;
}

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

#productContent .product-detail-price {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 18px;

    color: #a17c38;

    font-size: 25px;

    font-weight: 900;
}

#productContent .detail-old-price {
    color: #999;

    font-size: 14px;

    font-weight: 700;

    text-decoration: line-through;
}

#productContent .detail-new-price {
    color: #a17c38;

    font-size: 26px;

    font-weight: 900;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

#productContent .product-description {
    margin: 0 0 22px;

    color: #666;

    font-size: 13px;

    line-height: 2.1;
}

/* =========================================================
   OPTIONS / رنگ را انتخاب کنید
   ========================================================= */

#productContent .product-options {
    width: 100%;

    margin: 0 0 22px;

    padding: 17px;

    border: 1px solid rgba(23,35,55,.09);

    border-radius: 16px;

    background: #faf9f6;
}

/* عنوان */

#productContent .product-option-title {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 13px;

    color: #172337;

    font-size: 14px;

    font-weight: 900;
}

#productContent .product-option-title span {
    color: #777;

    font-size: 12px;

    font-weight: 600;
}

/* گزینه‌ها */

#productContent .product-option-list {
    display: grid;

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

    gap: 9px;

    width: 100%;
}

/* دکمه رنگ/گزینه */

#productContent .product-option-btn {
    position: relative;

    min-width: 0;

    min-height: 62px;

    padding: 9px 11px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 3px;

    border: 1px solid #ddd8ce;

    border-radius: 12px;

    background: #fff;

    color: #172337;

    font-family: inherit;

    text-align: right;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

#productContent .product-option-btn:hover:not(:disabled) {
    border-color: #c6a15b;

    transform: translateY(-1px);
}

#productContent .product-option-btn.active {
    border: 2px solid #172337;

    background: #f3efe7;

    box-shadow:
        inset 0 0 0 2px #fff;
}

#productContent .product-option-btn.active::after {
    content: "✓";

    position: absolute;

    top: 7px;
    left: 8px;

    width: 20px;
    height: 20px;

    display: flex;

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

    border-radius: 50%;

    background: #172337;

    color: #fff;

    font-size: 11px;

    font-weight: 900;
}

#productContent .product-option-btn .option-name {
    color: #172337;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.5;
}

#productContent .product-option-btn .option-stock {
    color: #8a8a8a;

    font-size: 10px;

    font-weight: 600;
}

#productContent .product-option-btn.disabled,
#productContent .product-option-btn:disabled {
    opacity: .48;

    background: #eee;

    cursor: not-allowed;

    text-decoration: line-through;
}

/* =========================================================
   META
   ========================================================= */

#productContent .product-meta {
    display: grid;

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

    gap: 7px;

    margin-bottom: 20px;
}

#productContent .product-meta-item {
    min-height: 65px;

    padding: 9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    text-align: center;

    border-radius: 12px;

    background: #faf9f6;

    color: #666;

    font-size: 10px;

    font-weight: 700;
}

#productContent .product-meta-item i {
    color: #c6a15b;

    font-size: 18px;
}

/* =========================================================
   QUANTITY
   ========================================================= */

#productContent .product-quantity-section {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;

    padding: 10px 13px;

    border: 1px solid rgba(23,35,55,.09);

    border-radius: 14px;

    background: #fff;
}

#productContent .quantity-label {
    color: #172337;

    font-size: 13px;

    font-weight: 900;
}

/* باکس + و - */

#productContent .product-quantity {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 0 !important;

    width: 125px !important;

    height: 43px !important;

    padding: 3px !important;

    border: 1px solid #ddd8ce !important;

    border-radius: 12px !important;

    background: #f7f5f0 !important;
}

/* دکمه‌ها */

#productContent #decreaseQuantity,
#productContent #increaseQuantity {
    width: 36px !important;

    min-width: 36px !important;

    height: 35px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: #172337 !important;

    color: #fff !important;

    font-family: inherit !important;

    font-size: 21px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition: .2s ease !important;
}

#productContent #decreaseQuantity:hover,
#productContent #increaseQuantity:hover {
    background: #c6a15b !important;

    color: #172337 !important;
}

/* عدد */

#productContent #productQuantity {
    flex: 1;

    min-width: 40px;

    text-align: center;

    color: #172337;

    font-size: 15px;

    font-weight: 900;
}

/* =========================================================
   TOTAL
   ========================================================= */

#productContent .product-total-price {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;

    padding: 13px 15px;

    border-radius: 13px;

    background: #172337;

    color: #fff;

    font-size: 12px;

    font-weight: 700;
}

#productContent .product-total-price strong {
    color: #e0bf7b;

    font-size: 17px;

    font-weight: 900;
}

/* =========================================================
   ACTIONS
   ========================================================= */

#productContent .product-actions {
    display: grid !important;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

    margin: 0 0 13px;
}

#productContent .product-add-cart,
#productContent .product-favorite-secondary {
    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 13px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;

    transition: .25s ease;
}

#productContent .product-add-cart {
    border: 1px solid #172337;

    background: #172337;

    color: #fff;
}

#productContent .product-add-cart:hover {
    background: #c6a15b;

    border-color: #c6a15b;

    color: #172337;

    transform: translateY(-2px);
}

#productContent .product-favorite-secondary {
    border: 1px solid #172337;

    background: #fff;

    color: #172337;
}

#productContent .product-favorite-secondary:hover,
#productContent .product-favorite-secondary.active {
    background: #172337;

    color: #c6a15b;
}

/* =========================================================
   PRODUCT CODE
   ========================================================= */

#productContent .product-code {
    padding-top: 8px;

    color: #999;

    font-size: 10px;

    text-align: left;
}

#productContent .product-code strong {
    color: #172337;
}

/* =========================================================
   ZOOM MODAL
   ========================================================= */

.image-zoom-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 30px;

    background: rgba(10,15,24,.94);
}

.image-zoom-modal.active {
    display: flex;
}

.image-zoom-modal #zoomImage {
    max-width: 90vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 12px;
}

.close-zoom-modal,
.zoom-navigation {
    position: absolute;

    z-index: 10;

    width: 45px;
    height: 45px;

    border: 0;

    border-radius: 50%;

    display: flex;

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

    cursor: pointer;
}

.close-zoom-modal {
    top: 20px;
    left: 20px;

    background: #fff;

    color: #172337;
}

.zoom-prev {
    right: 25px;

    background: #fff;

    color: #172337;
}

.zoom-next {
    left: 25px;

    background: #fff;

    color: #172337;
}

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

@media (max-width: 992px) {

    #productContent {
        width: min(760px, calc(100% - 24px));
    }

    #productContent .product-detail {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    #productContent .product-main-image {
        height: 480px;
    }
}

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

@media (max-width: 600px) {

    #productContent {
        width: calc(100% - 18px);

        margin-top: 15px;
    }

    #productContent .product-detail {
        padding: 11px;

        border-radius: 19px;

        gap: 18px;
    }

    #productContent .product-main-image {
        height: 330px;

        border-radius: 16px;
    }

    #productContent .product-detail-badges {
        top: 9px !important;
        right: 9px !important;

        gap: 5px !important;
    }

    #productContent .product-detail-badge {
        padding: 5px 7px;

        font-size: 8px;
    }

    #productContent .product-favorite-btn {
        top: 9px !important;
        left: 9px !important;

        width: 38px !important;
        height: 38px !important;
    }

    #productContent .product-thumbnails {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        gap: 6px;
    }

    #productContent .product-thumbnail {
        height: 52px;
    }

    #productContent .product-detail-title {
        font-size: 23px;
    }

    #productContent .product-detail-price {
        font-size: 21px;
    }

    #productContent .detail-new-price {
        font-size: 22px;
    }

    #productContent .product-options {
        padding: 13px;
    }

    #productContent .product-option-list {
        grid-template-columns: 1fr 1fr;
    }

    #productContent .product-option-btn {
        min-height: 58px;
    }

    #productContent .product-meta {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 5px;
    }

    #productContent .product-meta-item {
        min-height: 60px;

        font-size: 8px;
    }

    #productContent .product-meta-item i {
        font-size: 16px;
    }

    #productContent .product-quantity-section {
        padding: 8px 10px;
    }

    #productContent .product-quantity {
        width: 112px !important;
    }

    #productContent .product-actions {
        grid-template-columns: 1fr !important;
    }

    #productContent .product-favorite-secondary {
        min-height: 45px;
    }
}

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

@media (max-width: 400px) {

    #productContent .product-main-image {
        height: 285px;
    }

    #productContent .product-thumbnail {
        height: 48px;
    }

    #productContent .product-option-list {
        grid-template-columns: 1fr;
    }

    #productContent .product-meta-item {
        padding: 6px 3px;

        font-size: 7px;
    }

    #productContent .product-quantity {
        width: 105px !important;
    }
}
/* =====================================================
   PRODUCT REVIEWS
===================================================== */

.product-reviews-section {
    width: 100%;
    margin-top: 35px;
    padding: 35px;
    background: #fff;
    border: 1px solid rgba(23, 35, 55, .08);
    border-radius: 26px;
    box-shadow: 0 15px 45px rgba(23, 35, 55, .07);
}


/* HEADER */

.reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(23, 35, 55, .08);
}

.reviews-label {
    display: inline-block;
    margin-bottom: 7px;
    color: #c6a15b;
    font-size: 13px;
    font-weight: 900;
}

.reviews-header h2 {
    margin: 0 0 8px;
    color: #172337;
    font-size: 26px;
    font-weight: 950;
}

.reviews-header p {
    margin: 0;
    color: #7b8491;
    font-size: 14px;
}


/* SUMMARY */

.reviews-summary {
    min-width: 180px;
    padding: 18px 25px;
    text-align: center;
    background: #faf9f6;
    border: 1px solid rgba(198, 161, 91, .2);
    border-radius: 18px;
}

.reviews-summary strong {
    display: block;
    color: #172337;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

.reviews-stars {
    margin: 9px 0 5px;
    color: #c6a15b;
    font-size: 18px;
    letter-spacing: 2px;
    direction: ltr;
}

.reviews-summary span {
    color: #7b8491;
    font-size: 12px;
}


/* FORM */

.review-form-card {
    margin-top: 28px;
    padding: 25px;
    background: #faf9f6;
    border: 1px solid rgba(23, 35, 55, .08);
    border-radius: 20px;
}

.review-form-card h3 {
    margin: 0 0 16px;
    color: #172337;
    font-size: 17px;
    font-weight: 900;
}

.review-form-card h3 i {
    margin-left: 7px;
    color: #c6a15b;
}


/* RATING */

.review-form-stars {
    display: flex;
    direction: ltr;
    gap: 4px;
    margin-bottom: 17px;
}

.review-form-stars button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(198, 161, 91, .3);
    border-radius: 10px;
    background: #fff;
    color: #c6a15b;
    font-size: 23px;
    cursor: pointer;
    transition: .2s ease;
}

.review-form-stars button:hover {
    transform: translateY(-2px);
    border-color: #c6a15b;
    background: #f5efe2;
}


/* INPUTS */

.review-input {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(23, 35, 55, .12);
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #172337;
    font-family: inherit;
    font-size: 14px;
    transition: .2s ease;
}

.review-input:focus {
    border-color: #c6a15b;
    box-shadow: 0 0 0 3px rgba(198, 161, 91, .1);
}

.review-textarea {
    min-height: 120px;
    resize: vertical;
}


/* SUBMIT */

.review-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 145px;
    padding: 12px 22px;
    border: 0;
    border-radius: 12px;
    background: #172337;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.review-submit-btn:hover {
    background: #24344d;
    transform: translateY(-2px);
}


/* MESSAGE */

.review-message {
    min-height: 20px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.review-message.success {
    color: #23834b;
}

.review-message.error {
    color: #c0392b;
}


/* REVIEWS LIST */

.reviews-list-header {
    margin: 32px 0 15px;
}

.reviews-list-header h3 {
    margin: 0;
    color: #172337;
    font-size: 20px;
    font-weight: 950;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}


/* REVIEW CARD */

.review-card {
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(23, 35, 55, .08);
    border-radius: 17px;
    transition: .2s ease;
}

.review-card:hover {
    border-color: rgba(198, 161, 91, .3);
    box-shadow: 0 8px 25px rgba(23, 35, 55, .05);
}

.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #172337;
    color: #c6a15b;
    font-size: 17px;
    font-weight: 900;
}

.review-user strong {
    display: block;
    color: #172337;
    font-size: 14px;
    font-weight: 900;
}

.review-user span {
    display: block;
    margin-top: 4px;
    color: #8a919b;
    font-size: 11px;
}

.review-user span i {
    margin-left: 4px;
}

.review-stars {
    direction: ltr;
    color: #c6a15b;
    font-size: 17px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.review-divider {
    height: 1px;
    margin: 15px 0;
    background: rgba(23, 35, 55, .07);
}

.review-text {
    margin: 0;
    color: #555e6a;
    font-size: 14px;
    line-height: 2;
}


/* EMPTY */

.reviews-empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px dashed rgba(23, 35, 55, .15);
    border-radius: 18px;
    background: #faf9f6;
}

.reviews-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #172337;
    color: #c6a15b;
    font-size: 27px;
}

.reviews-empty h4 {
    margin: 0 0 7px;
    color: #172337;
    font-size: 16px;
    font-weight: 900;
}

.reviews-empty p {
    margin: 0;
    color: #858d97;
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 768px) {

    .product-reviews-section {
        margin-top: 22px;
        padding: 20px 15px;
        border-radius: 20px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .reviews-header h2 {
        font-size: 21px;
    }

    .reviews-header p {
        font-size: 12px;
        line-height: 1.9;
    }

    .reviews-summary {
        width: 100%;
    }

    .review-form-card {
        padding: 17px;
        border-radius: 16px;
    }

    .review-form-stars button {
        width: 36px;
        height: 36px;
    }

    .review-card {
        padding: 15px;
    }

    .review-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .review-text {
        font-size: 13px;
    }

}
/* =========================================================
   SHAHRE KOSAN - PREMIUM PRODUCT REVIEWS V2
   فقط اضافه شود - CSS قبلی حذف نشود
========================================================= */

#productReviews.product-reviews-section {
    width: 100%;
    max-width: 1200px;
    margin: 35px auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* ================= HEADER ================= */

#productReviews .reviews-header {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(23, 35, 55, .07);
    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(23, 35, 55, .06);
}

#productReviews .reviews-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: #c6a15b;
}

#productReviews .reviews-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: #c6a15b;
    font-size: 12px;
    font-weight: 900;
}

#productReviews .reviews-label::before {
    content: "";
    width: 18px;
    height: 2px;
    background: #c6a15b;
    border-radius: 10px;
}

#productReviews .reviews-header h2 {
    margin: 0;
    color: #172337;
    font-size: 25px;
    font-weight: 950;
    line-height: 1.5;
}

#productReviews .reviews-header p {
    margin: 8px 0 0;
    color: #8a919b;
    font-size: 13px;
    line-height: 1.9;
}


/* ================= SUMMARY ================= */

#productReviews .reviews-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;

    min-width: 245px;
    padding: 15px 18px;

    background:
        linear-gradient(
            145deg,
            #172337 0%,
            #202f46 100%
        );

    border: 0;
    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(23, 35, 55, .16);
}

#productReviews .reviews-summary strong {
    grid-row: 1 / 3;

    min-width: 65px;

    color: #ffffff;
    font-size: 38px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

#productReviews .reviews-summary .reviews-stars {
    margin: 0 0 3px;

    color: #d8b66e;
    font-size: 17px;
    letter-spacing: 2px;

    direction: ltr;
    text-align: center;
}

#productReviews .reviews-summary > span {
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    text-align: center;
}


/* ================= FORM ================= */

#productReviews .review-form-card {
    position: relative;

    margin-top: 18px;
    padding: 25px;

    background: #ffffff;

    border: 1px solid rgba(23, 35, 55, .07);
    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(23, 35, 55, .05);
}

#productReviews .review-form-card h3 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 18px;

    color: #172337;
    font-size: 17px;
    font-weight: 950;
}

#productReviews .review-form-card h3 i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0;

    border-radius: 10px;

    background: #f5efe2;
    color: #c6a15b;

    font-size: 16px;
}


/* ================= STAR RATING ================= */

#productReviews .review-form-stars {
    display: flex;
    align-items: center;
    gap: 6px;

    width: fit-content;
    margin: 0 0 18px;
    padding: 7px 9px;

    direction: ltr;

    background: #faf9f6;
    border: 1px solid rgba(198, 161, 91, .18);
    border-radius: 13px;
}

#productReviews .review-form-stars button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #c6a15b;

    font-family: Arial, sans-serif;
    font-size: 23px;

    cursor: pointer;

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

#productReviews .review-form-stars button:hover {
    transform: scale(1.12);

    background: #f3ead8;
}

#productReviews .review-form-stars button:active {
    transform: scale(.95);
}


/* ================= INPUT AREA ================= */

#productReviews .review-input {
    width: 100%;

    margin-bottom: 11px;
    padding: 13px 15px;

    background: #fafafa;

    border: 1px solid rgba(23, 35, 55, .09);
    border-radius: 12px;

    color: #172337;

    font-family: inherit;
    font-size: 13px;

    outline: none;

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

#productReviews .review-input::placeholder {
    color: #a2a7ae;
}

#productReviews .review-input:focus {
    background: #ffffff;

    border-color: #c6a15b;

    box-shadow:
        0 0 0 3px rgba(198, 161, 91, .09);
}

#productReviews .review-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.9;
}


/* ================= SUBMIT ================= */

#productReviews .review-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 145px;

    margin-top: 3px;
    padding: 12px 21px;

    border: 0;
    border-radius: 11px;

    background: #172337;
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(23, 35, 55, .14);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

#productReviews .review-submit-btn:hover {
    background: #24344d;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(23, 35, 55, .2);
}

#productReviews .review-submit-btn:active {
    transform: translateY(0);
}


/* ================= MESSAGE ================= */

#productReviews .review-message {
    min-height: 19px;
    margin-top: 9px;

    font-size: 12px;
    font-weight: 800;
}

#productReviews .review-message.success {
    color: #24824d;
}

#productReviews .review-message.error {
    color: #c0392b;
}


/* ================= LIST HEADER ================= */

#productReviews .reviews-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 28px 0 14px;
    padding: 0 3px;
}

#productReviews .reviews-list-header h3 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: #172337;
    font-size: 19px;
    font-weight: 950;
}

#productReviews .reviews-list-header h3::before {
    content: "";

    width: 4px;
    height: 22px;

    border-radius: 10px;

    background: #c6a15b;
}


/* ================= REVIEW LIST ================= */

#productReviews .reviews-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* ================= REVIEW CARD ================= */

#productReviews .review-card {
    position: relative;

    min-width: 0;
    padding: 20px;

    background: #ffffff;

    border: 1px solid rgba(23, 35, 55, .07);
    border-radius: 18px;

    box-shadow:
        0 7px 24px rgba(23, 35, 55, .045);

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

#productReviews .review-card:hover {
    transform: translateY(-2px);

    border-color: rgba(198, 161, 91, .28);

    box-shadow:
        0 12px 30px rgba(23, 35, 55, .08);
}


/* ================= USER ================= */

#productReviews .review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

#productReviews .review-user {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

#productReviews .review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #172337,
            #2a3b54
        );

    color: #d6b66f;

    font-size: 16px;
    font-weight: 950;

    box-shadow:
        0 5px 14px rgba(23, 35, 55, .14);
}

#productReviews .review-user strong {
    display: block;

    overflow: hidden;

    color: #172337;
    font-size: 13px;
    font-weight: 950;

    white-space: nowrap;
    text-overflow: ellipsis;
}

#productReviews .review-user span {
    display: block;

    margin-top: 4px;

    color: #9a9fa6;
    font-size: 10px;
}

#productReviews .review-user span i {
    margin-left: 4px;
}


/* ================= REVIEW STARS ================= */

#productReviews .review-card .review-stars {
    flex-shrink: 0;

    color: #c6a15b;

    font-family: Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 1px;

    direction: ltr;
    white-space: nowrap;
}


/* ================= DIVIDER ================= */

#productReviews .review-divider {
    height: 1px;

    margin: 16px 0;

    background:
        linear-gradient(
            to left,
            transparent,
            rgba(23, 35, 55, .09),
            transparent
        );
}


/* ================= REVIEW TEXT ================= */

#productReviews .review-text {
    margin: 0;

    color: #59616c;

    font-size: 13px;
    line-height: 2.05;

    word-break: break-word;
}


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

#productReviews .reviews-empty {
    grid-column: 1 / -1;

    padding: 50px 20px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed rgba(23, 35, 55, .14);
    border-radius: 20px;
}

#productReviews .reviews-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #f5efe2;
    color: #c6a15b;

    font-size: 25px;
}

#productReviews .reviews-empty h4 {
    margin: 0 0 7px;

    color: #172337;

    font-size: 15px;
    font-weight: 950;
}

#productReviews .reviews-empty p {
    margin: 0;

    color: #949aa2;

    font-size: 12px;
}


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

@media (max-width: 900px) {

    #productReviews .reviews-header {
        flex-direction: column;
    }

    #productReviews .reviews-summary {
        width: 100%;
        min-width: 0;
    }

}


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

@media (max-width: 650px) {

    #productReviews.product-reviews-section {
        margin-top: 22px;
    }

    #productReviews .reviews-header {
        padding: 20px 17px;
        gap: 18px;

        border-radius: 19px;
    }

    #productReviews .reviews-header h2 {
        font-size: 20px;
    }

    #productReviews .reviews-header p {
        font-size: 11px;
    }

    #productReviews .reviews-summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;

        padding: 13px;
    }

    #productReviews .reviews-summary strong {
        min-width: auto;

        font-size: 30px;
    }

    #productReviews .reviews-summary .reviews-stars {
        margin: 0;

        font-size: 15px;
    }

    #productReviews .reviews-summary > span {
        font-size: 10px;
    }


    #productReviews .review-form-card {
        margin-top: 13px;
        padding: 17px;

        border-radius: 18px;
    }

    #productReviews .review-form-card h3 {
        font-size: 15px;
    }

    #productReviews .review-form-stars {
        gap: 3px;

        padding: 6px 7px;
    }

    #productReviews .review-form-stars button {
        width: 34px;
        height: 34px;

        font-size: 21px;
    }

    #productReviews .review-input {
        font-size: 12px;
    }

    #productReviews .review-submit-btn {
        width: 100%;
    }


    #productReviews .reviews-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #productReviews .review-card {
        padding: 16px;
        border-radius: 16px;
    }

    #productReviews .review-card-top {
        align-items: flex-start;
    }

    #productReviews .review-card .review-stars {
        font-size: 14px;
    }

    #productReviews .review-text {
        font-size: 12px;
        line-height: 2;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #productReviews .reviews-summary {
        flex-wrap: wrap;
    }

    #productReviews .review-form-stars button {
        width: 31px;
        height: 31px;

        font-size: 19px;
    }

}
/* =========================
   LOGIN METHODS
========================= */

.login-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
    padding: 5px;
    background: #f3f1ec;
    border-radius: 14px;
}

.login-method-btn {
    border: none;
    background: transparent;
    color: #172337;
    padding: 12px 8px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.login-method-btn.active {
    background: #172337;
    color: #fff;
    box-shadow: 0 4px 12px rgba(23,35,55,.15);
}

.login-method-btn:hover {
    transform: translateY(-1px);
}


/* پیام وضعیت پیامک */

#smsMessage {
    min-height: 22px;
    font-size: 13px;
    font-weight: 600;
}


/* کادر کد پیامک */

#smsCode {
    letter-spacing: 5px;
    font-size: 18px;
    font-weight: 700;
}


/* موبایل */

@media (max-width: 480px) {

    .login-methods {
        gap: 5px;
    }

    .login-method-btn {
        font-size: 11px;
        padding: 11px 5px;
    }

}
/* =========================
   FORGOT PASSWORD
========================= */

.forgot-password-btn {
    border: none;
    background: transparent;
    padding: 0;
    color: #9a7b3f;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.forgot-password-btn:hover {
    color: #172337;
    text-decoration: underline;
}

.forgot-header {
    position: relative;
    text-align: center;
    margin-bottom: 25px;
}

.forgot-back-btn {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: transparent;
    color: #172337;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.forgot-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4efe4;
    font-size: 25px;
}

.forgot-header h3 {
    margin: 0 0 8px;
    color: #172337;
    font-size: 21px;
    font-weight: 800;
}

.forgot-header p {
    margin: 0;
    color: #777;
    font-size: 13px;
}


/* پیام */

#forgotMessage {
    min-height: 22px;
    font-size: 13px;
    font-weight: 600;
}


/* کد تأیید */

#forgotCode {
    letter-spacing: 6px;
    font-size: 19px;
    font-weight: 700;
}


/* موبایل */

@media (max-width: 480px) {

    .forgot-header h3 {
        font-size: 19px;
    }

    .forgot-back-btn {
        font-size: 12px;
    }

}
/* ================================
   دکمه مشاهده محصول - کارت محصولات
================================ */

.product-card .btn-view-product,
.product-card .view-product-btn,
.product-card a[href*="product.html"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    min-height: 46px;

    margin-top: 14px;
    padding: 11px 18px;

    border: 1px solid rgba(20, 35, 60, 0.15);
    border-radius: 14px;

    background: linear-gradient(135deg, #14243d, #243b5a);
    color: #fff !important;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;

    box-shadow: 0 6px 18px rgba(20, 35, 60, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.product-card .btn-view-product:hover,
.product-card .view-product-btn:hover,
.product-card a[href*="product.html"]:hover {
    background: linear-gradient(135deg, #243b5a, #14243d);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 35, 60, 0.24);
}

.product-card .btn-view-product:active,
.product-card .view-product-btn:active,
.product-card a[href*="product.html"]:active {
    transform: translateY(0);
}
/* =========================================================
   شهر کوسن | CHECKOUT FINAL STYLE
   IMPORTANT VERSION
========================================================= */

.checkout-page,
#checkoutPage,
.checkout-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 35px 20px 70px !important;
    box-sizing: border-box !important;
}

/* عنوان صفحه */

.checkout-page h1,
#checkoutPage h1,
.checkout-title h1 {
    color: #14243d !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin: 0 0 30px !important;
}

/* کارت‌ها */

.checkout-card,
.checkout-box,
.checkout-section {
    background: #ffffff !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 12px 35px rgba(20,36,61,.08) !important;
}

/* تیتر بخش‌ها */

.checkout-card h2,
.checkout-card h3,
.checkout-box h2,
.checkout-box h3,
.checkout-section h2,
.checkout-section h3 {
    color: #14243d !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    margin-bottom: 20px !important;
}

/* لیبل */

.checkout-page label,
#checkoutPage label {
    display: block !important;
    color: #26344a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 7px !important;
}

/* ورودی‌ها */

.checkout-page input,
.checkout-page select,
.checkout-page textarea,
#checkoutPage input,
#checkoutPage select,
#checkoutPage textarea {
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;

    border: 1px solid #dfe3ea !important;
    border-radius: 13px !important;

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

    font-family: inherit !important;
    font-size: 14px !important;

    outline: none !important;
    box-sizing: border-box !important;

    transition: all .25s ease !important;
}

.checkout-page textarea,
#checkoutPage textarea {
    min-height: 105px !important;
    resize: vertical !important;
}

.checkout-page input:focus,
.checkout-page select:focus,
.checkout-page textarea:focus,
#checkoutPage input:focus,
#checkoutPage select:focus,
#checkoutPage textarea:focus {
    border-color: #14243d !important;
    box-shadow: 0 0 0 4px rgba(20,36,61,.08) !important;
}

/* =========================
   خلاصه سفارش
========================= */

.order-summary,
.checkout-summary,
#orderSummary {
    background: #ffffff !important;
    border: 1px solid #e5e8ee !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 12px 35px rgba(20,36,61,.09) !important;
}

/* محصولات */

.checkout-product,
.order-product,
.summary-product {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;

    padding: 13px 0 !important;

    border-bottom: 1px solid #edf0f4 !important;
}

.checkout-product img,
.order-product img,
.summary-product img {
    width: 65px !important;
    height: 65px !important;

    object-fit: cover !important;

    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

.checkout-product-name,
.order-product-name,
.summary-product-name {
    color: #182235 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.checkout-product-price,
.order-product-price,
.summary-product-price {
    color: #14243d !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* =========================
   قیمت‌ها
========================= */

.checkout-price-row,
.price-row,
.summary-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 10px 0 !important;

    color: #687387 !important;
    font-size: 13px !important;
}

.checkout-price-row strong,
.price-row strong,
.summary-row strong {
    color: #182235 !important;
}

.checkout-total,
.total-row,
.summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    margin-top: 12px !important;
    padding-top: 17px !important;

    border-top: 1px solid #e5e8ee !important;

    color: #14243d !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.checkout-total-price,
.total-price {
    color: #c29a4f !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

/* =========================
   دکمه ثبت سفارش
========================= */

.checkout-submit-btn,
#checkoutSubmit,
#submitOrder,
.submit-order,
.order-submit,
button[type="submit"] {
    width: 100% !important;
    min-height: 54px !important;

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

    padding: 13px 20px !important;
    margin-top: 18px !important;

    border: none !important;
    border-radius: 15px !important;

    background: linear-gradient(
        135deg,
        #14243d,
        #243b5a
    ) !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow: 0 10px 25px rgba(20,36,61,.20) !important;

    transition: all .25s ease !important;
}

.checkout-submit-btn:hover,
#checkoutSubmit:hover,
#submitOrder:hover,
.submit-order:hover {
    background: linear-gradient(
        135deg,
        #243b5a,
        #14243d
    ) !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 15px 30px rgba(20,36,61,.28) !important;
}

/* =========================
   روش ارسال
========================= */

.shipping-option,
.delivery-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 15px !important;
    margin-bottom: 10px !important;

    border: 1px solid #e2e6ed !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    transition: all .25s ease !important;
}

.shipping-option:hover,
.delivery-option:hover {
    border-color: #14243d !important;
    background: #f8f9fb !important;
}

/* =========================
   ریسپانسیو
========================= */

@media (max-width: 991px) {

    .checkout-page,
    #checkoutPage,
    .checkout-container {
        padding: 28px 16px 55px !important;
    }

    .checkout-page h1,
    #checkoutPage h1 {
        font-size: 27px !important;
    }

    .order-summary,
    .checkout-summary,
    #orderSummary {
        margin-top: 20px !important;
        position: static !important;
    }
}

@media (max-width: 767px) {

    .checkout-page,
    #checkoutPage,
    .checkout-container {
        padding: 20px 12px 40px !important;
    }

    .checkout-page h1,
    #checkoutPage h1 {
        font-size: 23px !important;
        margin-bottom: 22px !important;
    }

    .checkout-card,
    .checkout-box,
    .checkout-section,
    .order-summary,
    .checkout-summary,
    #orderSummary {
        padding: 16px !important;
        border-radius: 17px !important;
        margin-bottom: 14px !important;
    }

    .checkout-card h2,
    .checkout-card h3,
    .checkout-box h2,
    .checkout-box h3 {
        font-size: 16px !important;
    }

    .checkout-page input,
    .checkout-page select,
    .checkout-page textarea,
    #checkoutPage input,
    #checkoutPage select,
    #checkoutPage textarea {
        min-height: 46px !important;
        font-size: 13px !important;
    }

    .checkout-product img,
    .order-product img,
    .summary-product img {
        width: 55px !important;
        height: 55px !important;
    }

    .checkout-product-name,
    .order-product-name,
    .summary-product-name {
        font-size: 12px !important;
    }

    .checkout-product-price,
    .order-product-price,
    .summary-product-price {
        font-size: 11px !important;
    }

    .checkout-total,
    .total-row,
    .summary-total {
        font-size: 16px !important;
    }

    .checkout-total-price,
    .total-price {
        font-size: 18px !important;
    }

    .checkout-submit-btn,
    #checkoutSubmit,
    #submitOrder,
    .submit-order {
        min-height: 51px !important;
        font-size: 14px !important;
        border-radius: 13px !important;
    }
}

@media (max-width: 400px) {

    .checkout-page,
    #checkoutPage,
    .checkout-container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .checkout-card,
    .checkout-box,
    .checkout-section,
    .order-summary,
    .checkout-summary,
    #orderSummary {
        padding: 13px !important;
    }

    .checkout-page h1,
    #checkoutPage h1 {
        font-size: 21px !important;
    }
}