/* =====================================================================
   گیله‌بازار - لایه طراحی مشترک روی قالب (style.css)
   رنگ‌ها و فونت همان تم اصلی است؛ استایل‌های تکراری صفحات اینجا جمع شده‌اند
   ===================================================================== */

:root {
    --green-light: #eaf6ef;
    --green-soft: #f5fbf7;
    --danger: #e74c3c;
    --radius: 1.2rem;
    --shadow-soft: 0 .4rem 1.6rem rgba(0, 0, 0, .06);
    --shadow-hover: 0 .8rem 2.4rem rgba(39, 174, 96, .18);
}

img {
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
}

.btn-outline {
    background: transparent;
    color: var(--green);
    box-shadow: inset 0 0 0 .15rem var(--green);
}

    .btn-outline:hover {
        background: var(--green);
        color: #fff;
    }

.alert {
    padding: 1.2rem 1.6rem;
    margin-bottom: 2rem;
    border-radius: .8rem;
    font-size: 1.5rem;
    line-height: 1.8;
}

.alert-success {
    background: var(--green-light);
    color: var(--dark-color);
}

.alert-danger {
    background: #fdecea;
    color: #b03a2e;
}

.empty-state {
    text-align: center;
    padding: 5rem 1rem;
    font-size: 1.7rem;
    color: var(--light-color);
}

    .empty-state i {
        display: block;
        font-size: 4rem;
        color: var(--green);
        margin-bottom: 1.5rem;
    }

.breadcrumb {
    font-size: 1.4rem;
    color: var(--light-color);
    margin-bottom: 2rem;
}

    .breadcrumb a {
        color: var(--green);
    }

    .breadcrumb span {
        margin: 0 .6rem;
        color: #bbb;
    }

/* ---------- هدر ---------- */

.header .header-1 .search-form button {
    background: none;
    font-size: 2.5rem;
    padding-left: 1.5rem;
    color: var(--black);
    cursor: pointer;
}

    .header .header-1 .search-form button:hover {
        color: var(--green);
    }

.header .header-1 .icons .header-phone {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.5rem;
    color: var(--black);
    margin-left: 1.5rem;
    white-space: nowrap;
}

    .header .header-1 .icons .header-phone i {
        font-size: 2rem;
        color: var(--green);
    }

    .header .header-1 .icons .header-phone:hover {
        color: var(--green);
    }

.header .header-1 .icons .user-menu .user-name {
    font-size: 1.5rem;
    text-transform: none;
}

/* منوی کاربر: قانون عمومی آیکون‌های هدر (2.5rem) نباید روی آیتم‌های منو اعمال شود */
.header .header-1 .icons .user-menu .dropdown-menu {
    left: 0;
    right: auto;
    min-width: 17rem;
    margin-left: 0;
    padding: .6rem 0;
    font-size: 1.4rem;
}

    .header .header-1 .icons .user-menu .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .8rem;
        margin-left: 0;
        padding: .9rem 1.5rem;
        font-size: 1.4rem;
        color: var(--black);
        white-space: nowrap;
    }

        .header .header-1 .icons .user-menu .dropdown-menu .dropdown-item i {
            font-size: 1.5rem;
            color: var(--green);
        }

        .header .header-1 .icons .user-menu .dropdown-menu .dropdown-item:hover {
            background: var(--green-soft);
            color: var(--green);
        }

    .header .header-1 .icons .user-menu .dropdown-menu .logout-btn {
        padding: 0;
        font-size: 1.4rem;
    }

        .header .header-1 .icons .user-menu .dropdown-menu .logout-btn i {
            color: #dc3545;
        }

/* منوی کشویی موبایل: با transform مخفی می‌شود تا باعث اسکرول افقی نشود */
.hamburger-menu {
    right: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease-in-out, visibility .3s;
}

    .hamburger-menu.active {
        right: 0;
        transform: none;
        visibility: visible;
    }

    .hamburger-menu ul li a {
        font-size: 1.6rem;
    }

/* ---------- اسلایدر بالای صفحه اصلی ---------- */

/* تصویر پس‌زمینه قالب برای چپ‌چین طراحی شده؛ در راست‌چین قرینه می‌شود تا متن روی زمینه سفید باشد */
.home {
    position: relative;
    overflow: hidden;
    background: #fff;
}

    .home::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url(../images/banner-bg.jpg) no-repeat center / cover;
        transform: scaleX(-1);
        opacity: .85;
    }

    .home .row {
        position: relative;
    }

        .home .row .content .hero-badge {
            display: inline-block;
            background: var(--green-light);
            color: var(--green);
            font-size: 1.7rem;
            font-weight: 700;
            padding: .5rem 1.6rem;
            border-radius: 10rem;
        }

        .home .row .content h1 {
            font-size: 3.4rem;
            line-height: 1.7;
            color: var(--black);
            margin: 1.5rem 0 .5rem;
        }

        .home .row .content .hero-text {
            font-size: 1.6rem;
            line-height: 2;
            color: var(--light-color);
        }

/* لیوان‌ها روی تخته: حاشیه شفاف تصاویر بریده شده، پس پایین هر تصویر = کف نعلبکی.
   تصویر به پایین اسلاید چسبیده و تخته به اندازه نیمه رویه بالایی‌اش (۱.۲٪ عرض) زیر آن می‌رود */
.home .row .books-slider .swiper-slide {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem;
}

.home .row .books-slider a img {
    display: block;
    width: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform-origin: center bottom;
    transition: transform .3s;
}

.home .row .books-slider .stand {
    display: block;
    position: relative;
    z-index: -1;
    margin-top: -1.2%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ---------- ویژگی‌ها (ارسال رایگان و ...) ---------- */

.icons-container .icons {
    background: var(--green-soft);
    border-radius: var(--radius);
    padding: 2rem;
}

    .icons-container .icons h3 {
        font-size: 2rem;
    }

/* فاصله عمودی کمتر بین بخش‌های صفحه اصلی */
.products,
.reviews,
.blogs {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

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

/* auto-fit + عرض حداکثر ثابت + justify-content: center تا با تعداد کم محصول، کارت‌ها وسط صفحه بمانند */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 27rem));
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

    .pcard:hover {
        transform: translateY(-.4rem);
        box-shadow: var(--shadow-hover);
    }

/* min-height: 0 تا عکس بزرگ ارتفاع کادر مربعی را بیشتر نکند و کارت‌ها هم‌اندازه بمانند */
.pcard-image {
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    padding: 1.5rem;
    background: #fff;
}

    .pcard-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.pcard:hover .pcard-image img {
    transform: scale(1.05);
}

.pcard-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 1;
    background: var(--danger);
    color: #fff;
    font-size: 1.3rem;
    padding: .3rem 1.1rem;
    border-radius: 10rem;
}

    .pcard-badge.is-out {
        background: #888;
    }

.pcard-body {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    flex: 1;
    padding: 1.5rem;
    border-top: var(--border);
    background: #fafafa;
}

.pcard-title {
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--black);
}

    .pcard-title a {
        color: inherit;
    }

        .pcard-title a:hover {
            color: var(--green);
        }

.price-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin-top: auto;
}

    .price-line .now {
        font-size: 1.9rem;
        font-weight: 700;
        color: var(--green);
    }

        .price-line .now small {
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--light-color);
        }

    .price-line .old {
        font-size: 1.4rem;
        color: #999;
        text-decoration: line-through;
    }

.pcard .btn {
    width: 100%;
    margin-top: .4rem;
    padding: .8rem 1rem;
    font-size: 1.5rem;
}

/* ---------- کارت مقاله ---------- */

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 36rem));
    justify-content: center;
    gap: 2rem;
}

.acard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

    .acard:hover {
        box-shadow: var(--shadow-hover);
    }

.acard-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f3f3;
}

    .acard-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.acard:hover .acard-image img {
    transform: scale(1.06);
}

.acard-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    padding: 1.6rem;
}

.acard-title {
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .acard-title a {
        color: inherit;
    }

        .acard-title a:hover {
            color: var(--green);
        }

.acard-text {
    font-size: 1.4rem;
    line-height: 2;
    color: var(--light-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acard .btn {
    align-self: flex-start;
    margin-top: auto;
    padding: .7rem 2rem;
    font-size: 1.4rem;
}

/* اسلایدر مقالات صفحه اصلی: کارت‌ها هم‌ارتفاع */
.blogs .blogs-slider .swiper-wrapper {
    align-items: stretch;
}

.blogs .blogs-slider .swiper-slide {
    height: auto;
    padding: 1rem 0;
}

    /* کادر عکس مقالات صفحه اصلی کوتاه‌تر از نسبت ۱۶:۹ */
    .blogs .blogs-slider .acard-image {
        aspect-ratio: auto;
        height: 18rem;
    }

/* ---------- نظرات کاربران ---------- */

.reviews .reviews-slider .box {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    height: auto;
}

/* ---------- صفحه جزئیات محصول ---------- */

.product-page {
    padding-top: 3rem;
}

.pd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 4rem;
    align-items: start;
}

.pd-gallery {
    position: relative;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

    .pd-gallery img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

.pd-info h1 {
    font-size: 3rem;
    line-height: 1.6;
    color: var(--black);
}

.pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.2rem 0 2rem;
}

    .pd-tags span {
        font-size: 1.3rem;
        padding: .4rem 1.2rem;
        border-radius: 10rem;
        background: var(--green-light);
        color: var(--dark-color);
    }

        .pd-tags span.is-out {
            background: #eee;
            color: #777;
        }

        .pd-tags span.is-off {
            background: #fdecea;
            color: var(--danger);
        }

.pd-pricebox {
    background: var(--green-soft);
    border: .1rem solid var(--green-light);
    border-radius: var(--radius);
    padding: 2rem;
}

    .pd-pricebox .price-line {
        justify-content: flex-start;
    }

        .pd-pricebox .price-line .now {
            font-size: 2.8rem;
        }

        .pd-pricebox .price-line .old {
            font-size: 1.7rem;
        }

    .pd-pricebox .pd-order-title {
        font-size: 1.5rem;
        color: var(--light-color);
        margin: 1.5rem 0 1rem;
    }

.pd-order {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .pd-order .btn {
        margin-top: 0;
        font-size: 1.5rem;
        padding: .9rem 2rem;
    }

        .pd-order .btn i {
            margin-left: .6rem;
        }

.pd-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

    .pd-features div {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.4rem;
        color: var(--light-color);
    }

        .pd-features div i {
            font-size: 2rem;
            color: var(--green);
        }

.pd-description {
    margin-top: 4rem;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 3rem;
}

    .pd-description > h2 {
        font-size: 2.2rem;
        color: var(--black);
        padding-bottom: 1.2rem;
        margin-bottom: 2rem;
        border-bottom: .2rem solid var(--green-light);
    }

/* ---------- محتوای HTML ثبت‌شده از ویرایشگر (مقاله، محصول، درباره ما) ---------- */

.rich-text {
    font-size: 1.65rem;
    line-height: 2.2;
    color: #444;
    overflow-wrap: break-word;
}

    .rich-text p {
        margin-bottom: 1.4rem;
    }

    /* ویرایشگر اندازه فونت ثابت (16/18/20px) روی متن می‌گذارد که در موبایل درشت دیده می‌شود؛
       اندازه از استایل سایت (و تیترها) گرفته شود */
    .rich-text [style*="font-size"] {
        font-size: inherit !important;
    }

    .rich-text h2,
    .rich-text h3,
    .rich-text h4 {
        color: var(--black);
        line-height: 1.7;
        margin: 2.5rem 0 1rem;
    }

    .rich-text h2 {
        font-size: 2.2rem;
    }

    .rich-text h3 {
        font-size: 1.9rem;
    }

    .rich-text ul,
    .rich-text ol {
        padding-right: 2.5rem;
        margin-bottom: 1.4rem;
    }

    .rich-text a {
        color: var(--green);
        text-decoration: underline;
    }

    /* ابعاد ثابتی که ویرایشگر روی عکس‌ها می‌گذارد نباید باعث بیرون‌زدگی در موبایل شود */
    .rich-text img {
        max-width: 100%;
        height: auto !important;
        border-radius: .8rem;
    }

    .rich-text table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .rich-text iframe,
    .rich-text video {
        max-width: 100%;
    }

/* ---------- صفحه مقاله ---------- */

.article-page {
    padding-top: 3rem;
}

.article {
    max-width: 88rem;
    margin: 0 auto;
}

    .article h1 {
        font-size: 3rem;
        line-height: 1.7;
        color: var(--black);
    }

    .article .lead {
        font-size: 1.7rem;
        line-height: 2;
        color: var(--light-color);
        margin: 1rem 0 2.5rem;
    }

    .article .cover {
        width: 100%;
        max-height: 46rem;
        object-fit: cover;
        border-radius: var(--radius);
        margin-bottom: 3rem;
    }

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 4rem;
    padding: 2.5rem 3rem;
    border-radius: var(--radius);
    background: var(--green-light);
}

    .cta-box h3 {
        font-size: 2rem;
        color: var(--black);
    }

    .cta-box p {
        font-size: 1.5rem;
        color: var(--light-color);
        margin-top: .5rem;
    }

    .cta-box .btn {
        margin-top: 0;
    }

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* زمینه ملایم برای صفحاتی که محتوا داخل کارت است */
.about-page,
.contact-section {
    background: var(--green-soft);
}

/* ---------- درباره ما ---------- */

.about-card {
    max-width: 100rem;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 4rem;
}

    .about-card > h1 {
        font-size: 3rem;
        color: var(--black);
        margin-bottom: 2rem;
    }

/* ---------- فوتر ---------- */

.footer .box-container .box .footer-item {
    display: block;
    font-size: 1.4rem;
    color: var(--light-color);
    padding: 1rem 0;
    line-height: 1.8;
}

    .footer .box-container .box .footer-item i {
        color: var(--green);
        padding-left: .5rem;
    }

.footer .box-container .box a i {
    padding-right: 0;
    padding-left: .5rem;
}

.footer .box-container .box a:hover i {
    padding-right: 0;
    padding-left: 1.2rem;
}

.footer .share a {
    display: inline-block;
}

/* ---------- سبد خرید و سفارش ---------- */

.header .header-1 .icons .header-cart {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -.8rem;
    left: -1rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: 10rem;
    background: var(--danger);
    color: #fff;
    font-size: 1.2rem;
    line-height: 2rem;
    text-align: center;
}

.pd-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .pd-add label {
        font-size: 1.5rem;
        color: var(--light-color);
    }

    .pd-add .btn {
        margin-top: 0;
        padding: 1rem 2.5rem;
        font-size: 1.6rem;
    }

.qty-input {
    width: 8rem;
    height: 4.4rem;
    border: var(--border);
    border-radius: .8rem;
    text-align: center;
    font-size: 1.6rem;
    background: #fff;
}

.cart-page {
    padding-top: 3rem;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34rem;
    gap: 2.5rem;
    align-items: start;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.5rem;
    box-shadow: var(--shadow-soft);
}

    .cart-item.is-unavailable {
        border-color: #f5c6c0;
        background: #fffafa;
    }

.cart-item-image img {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
}

.cart-item-info h3 {
    font-size: 1.7rem;
    color: var(--black);
    margin-bottom: .6rem;
}

    .cart-item-info h3 a {
        color: inherit;
    }

.cart-item-info .price-line {
    justify-content: flex-start;
}

    .cart-item-info .price-line .now {
        font-size: 1.6rem;
    }

.cart-warning {
    font-size: 1.3rem;
    color: var(--danger);
    margin-top: .5rem;
}

.cart-qty {
    display: flex;
    align-items: center;
    border: var(--border);
    border-radius: 10rem;
    overflow: hidden;
}

.qty-btn {
    width: 3.6rem;
    height: 3.6rem;
    background: var(--green-soft);
    color: var(--green);
    font-size: 2rem;
    cursor: pointer;
}

    .qty-btn:hover {
        background: var(--green);
        color: #fff;
    }

    .qty-btn:disabled {
        color: #bbb;
        background: #f5f5f5;
        cursor: not-allowed;
    }

.qty-value {
    min-width: 4rem;
    text-align: center;
    font-size: 1.6rem;
    color: var(--black);
}

.cart-item-total {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

    .cart-item-total small {
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--light-color);
    }

.cart-remove button {
    background: none;
    color: #aaa;
    font-size: 1.8rem;
    cursor: pointer;
    padding: .5rem;
}

    .cart-remove button:hover {
        color: var(--danger);
    }

.cart-summary {
    position: sticky;
    top: 8rem;
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

    .cart-summary h3 {
        font-size: 1.9rem;
        color: var(--black);
        padding-bottom: 1.2rem;
        margin-bottom: 1rem;
        border-bottom: var(--border);
    }

    .cart-summary .btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1.5rem;
    }

        .cart-summary .btn:disabled {
            background: #bbb;
            cursor: not-allowed;
        }

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.5rem;
    color: var(--light-color);
    padding: .7rem 0;
    line-height: 1.8;
}

    .summary-row span:last-child {
        white-space: nowrap;
    }

    .summary-row.is-item span:last-child {
        color: var(--black);
    }

    .summary-row.is-discount {
        color: var(--danger);
    }

    .summary-row.is-total {
        border-top: var(--border);
        margin-top: .5rem;
        padding-top: 1.2rem;
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--black);
    }

.summary-note {
    font-size: 1.35rem;
    line-height: 1.9;
    color: var(--dark-color);
    background: var(--green-soft);
    border-radius: .8rem;
    padding: 1rem 1.2rem;
    margin-top: 1rem;
}

    .summary-note i {
        margin-left: .5rem;
    }

.continue-link {
    display: block;
    text-align: center;
    font-size: 1.4rem;
    color: var(--green);
    margin-top: 1.2rem;
}

.checkout-form {
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-soft);
}

    .checkout-form h3 {
        font-size: 1.8rem;
        color: var(--black);
        margin: 1rem 0 2rem;
    }

        .checkout-form h3 i {
            color: var(--green);
            margin-left: .6rem;
        }

    .checkout-form .alert:empty,
    .checkout-form .validation-summary-valid {
        display: none;
    }

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.form-field {
    margin-bottom: 1.8rem;
}

    .form-field label {
        display: block;
        font-size: 1.5rem;
        color: var(--black);
        margin-bottom: .6rem;
    }

        .form-field label small {
            color: #999;
        }

    .form-field input,
    .form-field textarea {
        width: 100%;
        padding: 1.1rem 1.2rem;
        font-size: 1.5rem;
        color: var(--black);
        background: #fafafa;
        border: var(--border);
        border-radius: .8rem;
        text-transform: none;
        resize: vertical;
    }

        .form-field input:focus,
        .form-field textarea:focus {
            border-color: var(--green);
            background: #fff;
        }

        .form-field input[dir="ltr"] {
            text-align: right;
        }

    .form-field .input-validation-error {
        border-color: var(--danger);
    }

.field-error {
    display: block;
    font-size: 1.3rem;
    color: var(--danger);
    margin-top: .5rem;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.6rem;
    border: .2rem solid var(--green);
    border-radius: var(--radius);
    background: var(--green-soft);
}

    .payment-option i {
        font-size: 2.6rem;
        color: var(--green);
    }

    .payment-option strong {
        font-size: 1.6rem;
        color: var(--black);
    }

    .payment-option p {
        font-size: 1.4rem;
        color: var(--light-color);
        margin-top: .4rem;
        line-height: 1.8;
    }

.success-card {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 4rem 3rem;
}

.success-icon {
    font-size: 7rem;
    color: var(--green);
}

.success-card h1 {
    font-size: 2.8rem;
    color: var(--black);
    margin: 1.5rem 0 1rem;
}

.success-number {
    font-size: 1.7rem;
    color: var(--light-color);
}

    .success-number strong {
        color: var(--green);
        font-size: 2rem;
    }

.success-text {
    font-size: 1.6rem;
    line-height: 2.3;
    color: #555;
    margin: 2rem 0;
}

.success-summary {
    text-align: right;
    border: var(--border);
    border-radius: var(--radius);
    padding: 1rem 2rem;
    margin-bottom: 2.5rem;
}

.success-actions {
    justify-content: center;
}

.notfound-search {
    display: flex;
    gap: 1rem;
    max-width: 46rem;
    margin: 0 auto 2.5rem;
}

    .notfound-search input {
        flex: 1;
        padding: 1rem 1.4rem;
        font-size: 1.5rem;
        border: var(--border);
        border-radius: .8rem;
        background: #fafafa;
        text-transform: none;
    }

    .notfound-search .btn {
        margin-top: 0;
    }

.order-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 90rem;
    margin: 0 auto;
}

.order-card {
    background: #fff;
    border: var(--border);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
    box-shadow: var(--shadow-soft);
}

.order-card-head,
.order-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.5rem;
    color: var(--black);
}

.order-card-foot {
    color: var(--light-color);
    font-size: 1.4rem;
}

.order-items {
    font-size: 1.5rem;
    color: var(--light-color);
    line-height: 2;
    margin: 1rem 0;
}

.order-status {
    font-size: 1.3rem;
    padding: .4rem 1.2rem;
    border-radius: 10rem;
    background: #eee;
    color: #555;
}

    .order-status.status-pending {
        background: #fff4e0;
        color: #b26a00;
    }

    .order-status.status-confirmed {
        background: #e6f0ff;
        color: #2559c4;
    }

    .order-status.status-shipped {
        background: #efe6ff;
        color: #6b3fc4;
    }

    .order-status.status-delivered {
        background: var(--green-light);
        color: var(--dark-color);
    }

    .order-status.status-cancelled {
        background: #fdecea;
        color: var(--danger);
    }

/* ---------- وزن، گالری، امتیاز و نظرات محصول ---------- */

.pcard-weight {
    display: block;
    font-size: 1.3rem;
    color: var(--light-color);
}

.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.2rem;
    justify-content: center;
}

.pd-thumb {
    width: 7rem;
    height: 7rem;
    padding: .4rem;
    border: .2rem solid #eee;
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
}

    .pd-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        aspect-ratio: auto;
    }

    .pd-thumb.is-active,
    .pd-thumb:hover {
        border-color: var(--green);
    }

.stars i {
    color: #f5a623;
    font-size: 1.5rem;
    margin-left: .1rem;
}

.pd-rating {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.4rem;
    color: var(--light-color);
    margin-top: .6rem;
}

.pd-per-kilo {
    font-size: 1.4rem;
    color: var(--light-color);
    margin-top: .6rem;
}

.review-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--green-soft);
    border-radius: var(--radius);
}

    .review-summary strong {
        font-size: 4rem;
        color: var(--black);
        line-height: 1;
    }

    .review-summary .stars i {
        font-size: 2rem;
    }

    .review-summary p {
        font-size: 1.4rem;
        color: var(--light-color);
        margin-top: .4rem;
    }

.review-list {
    display: flex;
    flex-direction: column;
}

.review-item {
    padding: 1.5rem 0;
    border-bottom: var(--border);
}

    .review-item:last-child {
        border-bottom: none;
    }

    .review-item p {
        font-size: 1.5rem;
        line-height: 2;
        color: #555;
        margin-top: .8rem;
        white-space: pre-line;
    }

.review-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    font-size: 1.5rem;
    color: var(--black);
}

.review-badge {
    font-size: 1.2rem;
    color: var(--dark-color);
    background: var(--green-light);
    padding: .2rem .9rem;
    border-radius: 10rem;
}

.review-date {
    font-size: 1.3rem;
    color: #999;
}

.review-empty,
.review-login {
    font-size: 1.5rem;
    color: var(--light-color);
    line-height: 2;
    margin: 1rem 0;
}

    .review-login a {
        color: var(--green);
        text-decoration: underline;
    }

.review-form {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: var(--border);
}

    .review-form h3 {
        font-size: 1.7rem;
        color: var(--black);
        margin-bottom: 1rem;
    }

    .review-form textarea {
        display: block;
        width: 100%;
        margin: 1rem 0;
        padding: 1.2rem;
        font-size: 1.5rem;
        border: var(--border);
        border-radius: .8rem;
        background: #fafafa;
        resize: vertical;
        text-transform: none;
    }

/* انتخاب امتیاز: ترتیب DOM ۵ تا ۱، با row-reverse در راست‌چین ستاره ۱ سمت راست است */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .3rem;
}

    .rating-input input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .rating-input label {
        font-size: 2.6rem;
        color: #ddd;
        cursor: pointer;
    }

    .rating-input input:checked ~ label,
    .rating-input label:hover,
    .rating-input label:hover ~ label {
        color: #f5a623;
    }

    .rating-input input:focus-visible + label {
        outline: .2rem solid var(--green);
        border-radius: .4rem;
    }

.pd-related {
    margin-top: 4rem;
}

.shipping-progress {
    margin-top: .5rem;
}

    .shipping-progress p {
        font-size: 1.3rem;
        color: var(--light-color);
        margin-top: .6rem;
    }

        .shipping-progress p.is-free {
            color: var(--dark-color);
            font-weight: 700;
        }

.progress-bar {
    height: .8rem;
    border-radius: 10rem;
    background: #eee;
    overflow: hidden;
}

    .progress-bar span {
        display: block;
        height: 100%;
        background: var(--green);
        border-radius: 10rem;
    }

.related-product {
    justify-content: flex-start;
}

    .related-product > div {
        flex: 1;
    }

    .related-product h3 a {
        color: var(--black);
    }

        .related-product h3 a:hover {
            color: var(--green);
        }

.related-product-image img {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    background: #fff;
    border-radius: .8rem;
    padding: .5rem;
}

/* ---------- لودر: بعد از آماده شدن متن صفحه محو می‌شود ---------- */

.loader-container {
    transition: opacity .3s ease, visibility .3s;
}

    .loader-container.active {
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

/* ---------- واکنش‌گرا ---------- */

@media (max-width: 991px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .pd {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pd-gallery {
        max-width: 44rem;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .header .header-1 .icons .header-phone span,
    .header .header-1 .icons .user-menu .user-name {
        display: none;
    }

    .header .header-1 .icons .header-phone {
        margin-left: 1.5rem;
    }

        .header .header-1 .icons .header-phone i {
            font-size: 2.3rem;
            color: var(--black);
        }

    /* دکمه منو کنار لوگو، نه چسبیده به بالای صفحه */
    .hamburger-btn {
        position: static;
        transform: none;
        order: 0;
        font-size: 2.2rem;
        line-height: 1;
        padding: .7rem 1.1rem;
    }

    .header-1 .logo {
        margin-right: 0;
    }

    .home .row .content {
        text-align: center;
    }

        .home .row .content h1 {
            font-size: 2.6rem;
        }

    .hero-actions {
        justify-content: center;
    }

    .about-card,
    .pd-description {
        padding: 2rem;
    }

    .cta-box {
        padding: 2rem;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .icons-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

        .icons-container .icons {
            flex-direction: column;
            text-align: center;
            gap: .8rem;
            padding: 1.6rem 1rem;
        }

            .icons-container .icons h3 {
                font-size: 1.7rem;
            }

    /* دو محصول در هر ردیف در موبایل */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }

    .pcard-image {
        padding: 1rem;
    }

    .pcard-body {
        padding: 1.2rem 1rem;
    }

    .pcard-title {
        font-size: 1.5rem;
    }

    .price-line .now {
        font-size: 1.6rem;
    }

    .price-line .old {
        font-size: 1.2rem;
    }

    .pcard .btn {
        font-size: 1.3rem;
        padding: .7rem .5rem;
    }

    .pcard-badge {
        top: .8rem;
        right: .8rem;
        font-size: 1.1rem;
    }

    .pd-features {
        grid-template-columns: 1fr;
    }

    .home .row .books-slider a img {
        height: 18rem;
    }

    /* قلم سبد خرید در موبایل: عکس و نام بالا، تعداد و مبلغ پایین */
    .cart-item {
        grid-template-columns: 7rem minmax(0, 1fr) auto;
        grid-template-areas:
            "img info remove"
            "img qty total";
        gap: .8rem 1.2rem;
        padding: 1.2rem;
    }

    .cart-item-image {
        grid-area: img;
    }

        .cart-item-image img {
            width: 7rem;
            height: 7rem;
        }

    .cart-item-info {
        grid-area: info;
    }

    .cart-qty {
        grid-area: qty;
        justify-self: start;
    }

    .cart-item-total {
        grid-area: total;
        font-size: 1.5rem;
    }

    .cart-remove {
        grid-area: remove;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .checkout-form,
    .success-card {
        padding: 2rem 1.5rem;
    }

    /* فوتر دو ستونه در موبایل؛ ستون اطلاعات تماس تمام‌عرض */
    .footer .box-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem 2rem;
    }

        .footer .box-container .box:last-child {
            grid-column: 1 / -1;
        }

    .article h1,
    .pd-info h1 {
        font-size: 2.4rem;
    }

    /* در موبایل html کوچک‌تر است (۵۰٪)؛ ۱.۹rem ≈ ۱۵px برای خوانایی متن توضیحات */
    .rich-text {
        font-size: 1.9rem;
    }
}