/* ─────────────────────────────────────────────────────────────────────────
   افزودنی‌های فروشگاه زرین زمان.

   قالب اصلی (zfront/assets/css/*.css) دست‌نخورده می‌ماند؛ اینجا فقط چیزهایی
   اضافه می‌شود که قالب ایستا آن‌ها را ندارد: قیمت و دکمه خرید روی کارت،
   پیام‌های سیستم، صفحه‌بندی، حالت خالی، صفحات ورود و درخواست‌ها.

   همه رنگ‌ها از متغیرهای همان قالب گرفته می‌شود تا ظاهر یکدست بماند.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════ ابزارهای عمومی ═══════════════════════ */
.zz-center { text-align: center; }
.zz-ltr { direction: ltr; unicode-bidi: embed; }
bdi { unicode-bidi: isolate; }

.zz-empty {
    padding: 80px 24px;
    text-align: center;
    color: #7a7a7a;
    font-size: 15px;
    width: 100%;
}

.zz-empty i.icon {
    display: block;
    margin: 0 auto 16px;
    opacity: .4;
}

.zz-empty .btn { margin-top: 24px; display: inline-block; }

/* ═══════════════════════ پیام‌های سیستم ═══════════════════════ */
.zz-messages {
    position: fixed;
    inset-block-start: 96px;
    inset-inline-end: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}

.zz-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: var(--white);
    border-inline-start: 3px solid var(--red);
    box-shadow: 0 8px 30px rgba(1, 0, 0, .14);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.8;
    animation: zzSlideIn .35s ease;
}

.zz-message.success { border-inline-start-color: #1a7f37; }
.zz-message.warning { border-inline-start-color: #b26a00; }
.zz-message.error   { border-inline-start-color: var(--red); }
.zz-message.info    { border-inline-start-color: var(--black); }

.zz-message button {
    margin-inline-start: auto;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #999;
}

@keyframes zzSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════ کارت محصول ═══════════════════════ */
/* قالب اصلی روی کارت قیمت ندارد؛ این بخش با همان زبان بصری اضافه شده. */
.productContent .productCardPrice {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 17px;
    font-weight: bold;
    direction: ltr;
}

/* قیمت تومانی رقم‌های بلندی دارد و در عرض کارت کنار «قیمت قبل از تخفیف»
   جا نمی‌شود؛ این حالت دو سطر می‌شود تا هیچ عددی نشکند. */
.productContent .productCardPrice.tomanPrice {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    direction: rtl;
    font-size: 15px;
    white-space: nowrap;
}

.productContent .productCardPrice.tomanPrice del {
    font-size: 12px;
}

.productContent .productCardPrice del {
    font-size: 13px;
    font-weight: normal;
    color: #9a9a9a;
}

.productContent .productCardPrice .callPrice {
    font-size: 14px;
    font-weight: normal;
    color: var(--red);
}

.productContent .cardActions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}

.productContent .cardActions .btn {
    font-size: 13px;
    padding: 10px 18px;
}

.productContent .cardActions .btn[disabled] {
    background-color: var(--gray);
    color: #8a8a8a;
    cursor: not-allowed;
    border-color: var(--gray);
}

.imgBox .icon.heart.active,
.imgBox .icon.heart:hover {
    background-color: var(--red);
}

.imgBox .badge.sold { background-color: var(--black); color: var(--white); }

.imgBox a { display: contents; }

/* ═══════════════════════ صفحه‌بندی ═══════════════════════ */
.zz-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 52px auto 0;
    flex-wrap: wrap;
}

.zz-pagination a,
.zz-pagination span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background-color: var(--gray);
    font-size: 14px;
    transition: var(--ease);
}

.zz-pagination a:hover { background-color: var(--black); color: var(--white); }
.zz-pagination .current { background-color: var(--red); color: var(--white); }
.zz-pagination .disabled { opacity: .4; }

/* ═══════════════════════ مرتب‌سازی فروشگاه ═══════════════════════ */
.sortBox select,
.zz-select {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    padding: 12px 16px;
    border: 1px solid var(--gray);
    background-color: var(--white);
    cursor: pointer;
}

/* ═══════════════════════ صفحات محتوایی ═══════════════════════ */
.zz-page {
    padding: 160px 100px 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.zz-page h1 { font-size: 32px; margin-bottom: 8px; }
.zz-page .zz-lead { color: #6a6a6a; font-size: 15px; line-height: 2.1; }

.zz-prose { font-size: 15px; line-height: 2.2; }
.zz-prose img { max-width: 100%; height: auto; }
.zz-prose h2 { font-size: 22px; margin-top: 40px; }
.zz-prose h3 { font-size: 18px; margin-top: 32px; }
.zz-prose ul, .zz-prose ol { padding-inline-start: 22px; }
.zz-prose table { width: 100%; border-collapse: collapse; }
.zz-prose td, .zz-prose th { border: 1px solid var(--gray); padding: 10px; }

/* ═══════════════════════ صفحات درخواست خدمات ═══════════════════════ */
.requestHero {
    position: relative;
    padding: 190px 100px 90px;
    background-color: var(--black);
    color: var(--white);
    overflow: hidden;
}

.requestHero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 85% 0%, rgba(177, 0, 0, .55), transparent 60%);
    pointer-events: none;
}

.requestHero .heroInner { position: relative; z-index: 1; max-width: 720px; }
.requestHero .kicker {
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .7);
    display: block;
    margin-bottom: 14px;
}
.requestHero h1 { font-size: 38px; margin: 0 0 18px; }
.requestHero p { font-size: 16px; line-height: 2.2; color: rgba(255, 255, 255, .82); margin: 0; }

.requestHero .heroStats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 52px;
    margin-top: 46px;
    flex-wrap: wrap;
}

.requestHero .heroStats .statItem span:first-child {
    display: block;
    font-size: 30px;
    font-weight: bold;
    color: var(--white);
}

.requestHero .heroStats .statItem span:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, .65);
}

.requestSteps {
    display: flex;
    gap: 24px;
    padding: 70px 100px 0;
    flex-wrap: wrap;
}

.requestSteps .stepCard {
    flex: 1 1 220px;
    background-color: var(--gray);
    padding: 30px 26px;
    position: relative;
}

.requestSteps .stepCard .stepNo {
    font-size: 40px;
    font-weight: bold;
    color: rgba(177, 0, 0, .18);
    line-height: 1;
}

.requestSteps .stepCard h4 { margin: 10px 0 8px; font-size: 16px; }
.requestSteps .stepCard p { margin: 0; font-size: 13px; line-height: 2; color: #6a6a6a; }

.requestLayout {
    display: flex;
    gap: 32px;
    padding: 70px 100px 90px;
    align-items: flex-start;
}

.requestLayout .requestMain { flex: 2 1 560px; }
.requestLayout .requestAside { flex: 1 1 300px; position: sticky; top: 110px; }

.requestLayout .requestAside .asideCard {
    background-color: var(--gray);
    padding: 28px 26px;
    margin-bottom: 20px;
}

.requestLayout .requestAside .asideCard h4 { margin: 0 0 14px; font-size: 16px; }
.requestLayout .requestAside .asideCard p { font-size: 13px; line-height: 2.1; color: #6a6a6a; margin: 0; }

.requestLayout .requestAside .asideCard .featureItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 2;
    margin-bottom: 12px;
}

.zz-form { display: flex; flex-direction: column; gap: 22px; }

.zz-form .fieldGroup { display: flex; flex-direction: column; gap: 8px; }
.zz-form .fieldGroup > label { font-size: 14px; font-weight: bold; }
.zz-form .fieldGroup .hint { font-size: 12px; color: #8a8a8a; }

.zz-form input[type=text],
.zz-form input[type=tel],
.zz-form input[type=email],
.zz-form input[type=number],
.zz-form input[type=password],
.zz-form select,
.zz-form textarea {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e2e2;
    background-color: var(--white);
    width: 100%;
}

.zz-form textarea { resize: vertical; min-height: 120px; }

.zz-form .fieldRow { display: flex; gap: 18px; flex-wrap: wrap; }
.zz-form .fieldRow > .fieldGroup { flex: 1 1 220px; }

.zz-form .errorText { color: var(--red); font-size: 12px; }
.zz-form .is-invalid { border-color: var(--red) !important; }

.zz-form .uploadBox {
    border: 1px dashed #c9c9c9;
    padding: 34px;
    text-align: center;
    cursor: pointer;
    display: block;
    transition: var(--ease);
}

.zz-form .uploadBox:hover { border-color: var(--red); }
.zz-form .uploadBox input[type=file] { display: none; }
.zz-form .uploadBox span { display: block; font-size: 14px; margin-top: 8px; }
.zz-form .uploadBox .format { font-size: 12px; color: #9a9a9a; }

.zz-form .checkboxRow { display: flex; gap: 10px; align-items: center; font-size: 13px; }

/* ═══════════════════════ کارت‌های نتیجه / رهگیری ═══════════════════════ */
.zz-result {
    padding: 170px 100px 90px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.zz-result .iconCircle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background-color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
}

.zz-result h1 { font-size: 26px; margin-bottom: 12px; }
.zz-result p { color: #6a6a6a; line-height: 2.1; }

.zz-result .codeBox {
    display: inline-block;
    background-color: var(--gray);
    padding: 16px 32px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    direction: ltr;
    margin: 22px 0;
}

.zz-timeline { text-align: start; margin-top: 40px; }

.zz-timeline .tlItem {
    display: flex;
    gap: 16px;
    padding-bottom: 26px;
    position: relative;
}

.zz-timeline .tlItem::before {
    content: '';
    position: absolute;
    inset-inline-start: 11px;
    top: 26px;
    bottom: 0;
    width: 1px;
    background-color: #e4e4e4;
}

.zz-timeline .tlItem:last-child::before { display: none; }

.zz-timeline .tlDot {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: var(--gray);
    flex: none;
    position: relative;
    z-index: 1;
}

.zz-timeline .tlItem.done .tlDot { background-color: var(--red); }
.zz-timeline .tlBody h5 { margin: 0 0 4px; font-size: 15px; }
.zz-timeline .tlBody span { font-size: 12px; color: #9a9a9a; }

/* ═══════════════════════ ورود و ثبت‌نام ═══════════════════════ */
.authBox {
    display: flex;
    min-height: 640px;
    margin-top: 92px;
}

.authVisual {
    flex: 1 1 45%;
    background: var(--black) url("../zfront/images/landing-watch.8b749a7f048a.webp") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 60px;
}

.authVisual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1, 0, 0, .25), rgba(1, 0, 0, .85));
}

.authVisual .visualContent { position: relative; z-index: 1; color: var(--white); max-width: 380px; }
.authVisual .visualContent h2 { font-size: 26px; margin: 0 0 12px; }
.authVisual .visualContent p { font-size: 14px; line-height: 2.1; color: rgba(255, 255, 255, .78); }

.authPanel {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

.authPanel .authInner { width: 100%; max-width: 420px; }
.authPanel .authLogo { margin-bottom: 34px; display: block; }
.authPanel .authLogo img { max-width: 150px; }
.authPanel h1 { font-size: 24px; margin: 0 0 8px; }
.authPanel .authLead { color: #7a7a7a; font-size: 14px; margin-bottom: 30px; line-height: 2; }
.authPanel .authLead p { margin: 0; }
.authPanel .authLinks { margin-top: 24px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; }
.authPanel .authLinks a { color: var(--red); }

/* ═══════════════════════ شمارنده سبد در هدر ═══════════════════════ */
.cartLink { position: relative; }

.cartLink .cartCount {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-start: -8px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background-color: var(--red);
    color: var(--white);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ═══════════════════════ پرداخت رمزارزی ═══════════════════════ */
.walletCard {
    background-color: var(--gray);
    padding: 26px;
    margin: 18px 0;
}

.walletCard .walletRow {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(1, 0, 0, .07);
}

.walletCard .walletRow:last-child { border-bottom: 0; }
.walletCard .walletRow .value { font-weight: bold; direction: ltr; }

.walletCard .addressLine {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.walletCard .addressLine input {
    flex: 1;
    font-family: 'Vazirmatn', monospace;
    font-size: 13px;
    padding: 14px 16px;
    border: 1px solid #dcdcdc;
    background-color: var(--white);
    direction: ltr;
}

.walletCard .qrBox { text-align: center; margin-top: 18px; }
.walletCard .qrBox img { max-width: 180px; }

.receiptPreview {
    display: flex;
    gap: 14px;
    align-items: center;
    background-color: var(--gray);
    padding: 16px;
    margin-top: 14px;
    font-size: 13px;
}

.receiptPreview img { max-width: 74px; }

.receiptStatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
}

.receiptStatus.pending  { background-color: #fff3d6; color: #8a5a00; }
.receiptStatus.approved { background-color: #dff3e3; color: #1a7f37; }
.receiptStatus.rejected { background-color: #fde3e3; color: var(--red); }

/* ═══════════════════════ ریسپانسیو ═══════════════════════ */
@media screen and (max-width: 1200px) {
    .zz-page, .zz-result { padding-inline: 50px; }
    .requestHero, .requestSteps, .requestLayout { padding-inline: 50px; }
}

@media screen and (max-width: 767px) {
    .zz-messages { inset-inline: 12px; inset-block-start: 80px; max-width: none; }

    .zz-page, .zz-result { padding: 120px 24px 60px; }
    .requestHero { padding: 130px 24px 60px; }
    .requestHero h1 { font-size: 26px; }
    .requestHero .heroStats { gap: 28px; }
    .requestSteps { padding: 44px 24px 0; }
    .requestLayout { padding: 44px 24px 60px; flex-direction: column; }
    .requestLayout .requestAside { position: static; width: 100%; }

    .authBox { flex-direction: column; }
    .authVisual { display: none; }
    .authPanel { padding: 100px 24px 60px; }

    .productContent .cardActions .btn { padding: 9px 14px; font-size: 12px; }
}

/* ═══════════════════════ بلوک‌های محتوایی مقاله ═══════════════════════ */
.richText { font-size: 15px; line-height: 2.2; }
.richText p { margin: 0 0 16px; }

.contentImage { margin: 28px 0; }
.contentImage img { width: 100%; height: auto; }
.contentImage figcaption {
    font-size: 13px;
    color: #8a8a8a;
    text-align: center;
    margin-top: 10px;
}

.contentQuote {
    border-inline-start: 3px solid var(--red);
    background-color: var(--gray);
    margin: 28px 0;
    padding: 22px 26px;
    font-size: 15px;
    line-height: 2.1;
}

.contentList { padding-inline-start: 22px; line-height: 2.2; font-size: 15px; }
.contentVideo { margin: 28px 0; }
.contentVideo video,
.contentVideo iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ═══════════════════════ ریزه‌کاری‌های چیدمان ═══════════════════════ */
.footerSocialIcons { display: flex; gap: 14px; align-items: center; }
.footerSocialIcons img { width: 22px; height: 22px; }

/* دکمه حذف از مقایسه باید همان‌جای آیکون بسته اصلی بنشیند */
.compareMain .column.product .removeCompare {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 2;
}

.compareMain .column.product .removeCompare button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.compareMain .column.product { position: relative; }

/* فرم‌های کوچک داخل نوار سبد خرید و مقایسه، دکمه‌های بدون قاب می‌خواهند */
.productLeft form,
.productCount form { display: contents; }

.productRemoveBtn,
.productDecBtn,
.productIncBtn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.productDecBtn[disabled] { opacity: .35; cursor: not-allowed; }

/* زیرنویس فرم‌های احراز هویت */
.authHint { margin: 0; }

/* ═══════════════════════ اسلایدر بالای صفحه ═══════════════════════ */
/* قالب برای owl نوشته شده بود؛ این چند قاعده همان ظاهر را روی Swiper
   نگه می‌دارد.

   `flex-direction` عمداً دست Swiper سپرده شده. قبلاً اینجا `column`
   ثابت بود (از زمانی که اسلایدر عمودی بود) و وقتی جهت به افقی تغییر
   کرد، اسلایدها همچنان زیر هم می‌چیدند در حالی که Swiper افقی
   جابه‌جا می‌کرد؛ نتیجه این بود که بعد از اسلاید اول فقط فضای خالی
   دیده می‌شد. */
.landingSlider.swiper { overflow: hidden; }

.landingSlider.swiper .swiper-wrapper {
    height: 100vh;
}

.landingSlider.swiper .swiper-slide { height: 100vh; }

.landingSlider .owl-nav button {
    cursor: pointer;
    font: inherit;
}

.landingSlider .owl-nav button.swiper-button-disabled { opacity: .35; }

/* ═══════════════════════ پرداخت کارت به کارت ═══════════════════════ */
/* ورودی‌های مخفیِ «منبع کپی» باید در DOM بمانند تا select() کار کند،
   پس به‌جای display:none از بیرون‌بردن از کادر دید استفاده می‌شود. */
.zz-copy-source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.accountBox .btnBox {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

.payLeft .tabContents .fishForm .btn { margin-top: 20px; }

.payLeft .walletRow .value bdi,
.payRight .rightItems .value bdi { font-weight: bold; }

/* ═══════════════════════ معادل تومانی قیمت ═══════════════════════ */
/* کالای دلاری معادل تومانیِ نرخ روز را در این سطر ثانویه می‌گیرد؛ کالای
   تومانی چیزی ندارد چون قیمت اصلی‌اش خودش تومان است. در کارت‌ها جای این
   سطر با min-height رزرو می‌شود تا در یک ردیفِ مخلوط، ارتفاع کارت‌ها
   یکسان بماند. */
.productCardRial {
    font-size: 12px;
    line-height: 1.5;
    min-height: 18px;
    color: #8a8a8a;
    text-align: center;
    margin-top: 4px;
}

.productPriceRial {
    display: block;
    font-size: 14px;
    color: #8a8a8a;
    margin-top: 6px;
}

.productPriceRial:empty { display: none; }

/* ── پیجینیشن اسلایدر عمودی بالای صفحه ───────────────────────────────── */
.landingSlider .swiper-pagination.landingPagination {
    position: absolute;
    /* سمت راست تصویر؛ چون سند RTL است عمداً از `right` فیزیکی استفاده
       می‌شود تا با قاعده داخلی Swiper قاطی نشود. */
    right: 46px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
}

.landingSlider .swiper-pagination.landingPagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background-color: var(--white);
    opacity: .45;
    border-radius: 50%;
    transition: var(--ease);
}

.landingSlider .swiper-pagination.landingPagination .swiper-pagination-bullet:hover {
    opacity: .8;
}

.landingSlider .swiper-pagination.landingPagination .swiper-pagination-bullet-active {
    background-color: var(--red);
    opacity: 1;
    height: 26px;
    border-radius: 4px;
}

@media screen and (max-width: 767px) {
    .landingSlider .swiper-pagination.landingPagination {
        right: 16px;
        left: auto;
        gap: 8px;
    }
    .landingSlider .swiper-pagination.landingPagination .swiper-pagination-bullet-active {
        height: 20px;
    }
}

/* ── دکمه‌های آیکونی که داخل فرم‌اند، نباید ظاهر دکمه مرورگر بگیرند ──── */
button.addToCompare,
button.productRemoveBtn,
.changeImages form {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.changeImages form { display: contents; }

/* ═══════════════════════ اصلاح‌های ریسپانسیو ═══════════════════════ */
@media screen and (max-width: 767px) {
    /* قالب به `.tabItems` عرض fit-content داده و در موبایل overflow-x:auto؛
       بدون سقف عرض، نوار تب‌ها کل صفحه را پهن می‌کند و اسکرول افقی
       می‌سازد. این سقف باعث می‌شود به‌جای صفحه، خودِ نوار اسکرول شود. */
    .tab,
    .tab .tabItems {
        max-width: 100%;
        box-sizing: border-box;
    }

    .tab .tabItems {
        align-self: stretch;
        scrollbar-width: none;
    }

    .tab .tabItems::-webkit-scrollbar { display: none; }
}

@media screen and (max-width: 767px) {
    /* قالب به `.changeImages` در موبایل `max-width:100%` و `padding:0 24px`
       داده، ولی box-sizing پیش‌فرض content-box است؛ یعنی ۳۷۵+۴۸ پیکسل و
       سرریز افقی. با border-box، پدینگ داخل همان ۱۰۰٪ می‌نشیند. */
    .productDetailsLeft .changeImages { box-sizing: border-box; }
}

/* ── همه افزودنی‌های این فایل border-box باشند ────────────────────────
   قالب اصلی box-sizing را فقط روی body ست کرده؛ بنابراین هر کلاسِ تازه‌ای
   که هم‌زمان width:100% و padding دارد، سرریز افقی می‌سازد. این قاعده فقط
   کلاس‌های خودِ ما را می‌گیرد و به استایل طراح دست نمی‌زند. */
.zz-empty, .zz-page, .zz-prose, .zz-result, .zz-form, .zz-messages, .zz-message,
.zz-pagination, .zz-timeline, .zz-select,
.requestHero, .requestSteps, .requestLayout, .requestMain, .requestAside,
.asideCard, .stepCard, .heroInner, .heroStats,
.authBox, .authVisual, .authPanel, .authInner,
.walletCard, .receiptPreview, .productCardRial, .productPriceRial,
.zz-form input, .zz-form select, .zz-form textarea, .zz-form .uploadBox,
.zz-form .fieldGroup, .zz-form .fieldRow {
    box-sizing: border-box;
}

/* ═══════════════════ صفحه تماس — قواعد موبایلِ جاافتاده ═══════════════════
   در فایل طراح، بلوک @media داخل contact.css به‌اشتباه کپیِ قواعد صفحه
   «درباره ما» است و هیچ قاعده‌ای برای خود صفحه تماس ندارد؛ در نتیجه در
   موبایل پدینگ ۱۴۰ پیکسلی و چیدمان دوستونی باقی می‌ماند و صفحه سرریز
   می‌کند. قواعد زیر همان الگوی بقیه صفحه‌های قالب را دنبال می‌کنند
   (پدینگ ۲۴–۳۲، چیدمان ستونی، فونت ۱۴–۱۸).                                */
@media screen and (max-width: 767px) {
    .contactBanner {
        padding: 120px 24px 32px;
        gap: 6px;
    }

    .contactBanner h1 { font-size: 20px; }
    .contactBanner span { font-size: 14px; }

    .contactBox {
        padding: 32px 24px;
        box-sizing: border-box;
        background-size: contain;
    }

    .contactBox .contactMain {
        flex-direction: column;
        gap: 32px;
    }

    .contactMain .contactContent,
    .contactForm {
        width: 100%;
        box-sizing: border-box;
    }

    .contactContent h2 { font-size: 18px; }
    .contactContent p,
    .contactContent > span { font-size: 14px; }

    .contactContent .iconBox {
        flex-wrap: wrap;
        gap: 16px;
    }

    .contactForm h3 { font-size: 18px; }
    .contactForm p { font-size: 14px; }

    /* سه کارت ویژگی در موبایل زیر هم می‌نشینند */
    .contactFeatures {
        flex-direction: column;
        align-items: stretch;
        margin: 40px 0 32px;
        gap: 12px;
    }

    .contactFeatures .featureItem {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 16px;
        box-sizing: border-box;
    }

    .contactFeatures .featureItem .itemContent {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .contactFeatures .featureItem h5 { font-size: 15px; margin: 0; }
    .contactFeatures .featureItem span { font-size: 13px; }

    /* نشانی و نقشه زیر هم */
    .contactLocation { flex-direction: column; }

    .contactLocation .locationContent,
    .contactLocation .locationMap {
        width: 100%;
        box-sizing: border-box;
    }

    .contactLocation .locationContent { padding: 24px; }
    .locationHeader h2 { font-size: 18px; }
    .locationContent p,
    .locationItem h6,
    .locationItem span { font-size: 14px; }
    .locationMap img { max-height: 240px; }

    .contactFAQ { margin: 32px 0 48px; }
    .contactFAQ h2 { font-size: 20px; }
    .accordionHeader .title { font-size: 14px; }
}

/* ═══════════════════════════ لایه تبلت (۷۶۸ تا ۱۲۰۰) ═══════════════════════
   قالب طراح فقط یک بریک‌پوینت ۷۶۷ دارد؛ بین ۷۶۸ تا ۱۲۰۰ پیکسل چیدمان
   دسکتاپ (هدر دو ردیفه، پدینگ ۱۴۰ پیکسلی، شبکه ۵ستونی و نوار فیلتر افقی)
   از عرض صفحه بیرون می‌زند. این لایه همان الگوی خودِ قالب را به تبلت
   تعمیم می‌دهد: هدر موبایل، پدینگ کوچک‌تر، شبکه ۳ستونی و ستون‌های
   روی‌هم. هیچ رنگ، فونت یا جزئیات بصری تغییر نمی‌کند.                       */
@media screen and (min-width: 768px) and (max-width: 1200px) {

    /* ── هدر: نسخه موبایل، چون منوی دو ردیفه دسکتاپ ۱۱۰۰+ پیکسل می‌خواهد.
       قواعد زیر عیناً همان بلوک هدر موبایلِ responsive.css است که فقط تا
       ۷۶۷ پیکسل فعال می‌شد. ── */
    header .headerBox { display: none; }

    .mobileHeaderBox {
        display: flex;
        align-items: center;
        padding: 20px 32px;
    }

    .mobileHeaderBox .mHeaderRight {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobileHeaderBox .mHeaderMain { flex: 2; }

    .mobileHeaderBox .mHeaderLeft {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .mHeaderRight a,
    .mHeaderLeft a { display: flex; }

    .mHeaderMain .mainLogo { display: block; }
    .mHeaderMain .stickyLogo { display: none; }

    .mHeaderMain .logo {
        display: flex;
        justify-content: center;
    }

    .mHeaderMain .logo img { width: 68px; }

    .stickyHeader .mobileHeaderBox,
    .openedHamMenu .mobileHeaderBox {
        background-color: var(--white);
        box-shadow: 0 4px 25px 0 #00000026;
    }

    .stickyHeader i.icon,
    .openedHamMenu i.icon { background-color: var(--black); }

    .stickyHeader .mHeaderMain .logo .mainLogo,
    .openedHamMenu .mHeaderMain .logo .mainLogo { display: none; }

    .stickyHeader .mHeaderMain .logo .stickyLogo,
    .openedHamMenu .mHeaderMain .logo .stickyLogo { display: block; }

    .lightHeader .mobileHeaderBox i.icon { background-color: var(--black); }
    .lightHeader .mHeaderMain .mainLogo { display: none; }
    .lightHeader .mHeaderMain .stickyLogo { display: block; }

    /* ── منوی همبرگری ────────────────────────────────────────────────
       قاعده‌های کامل این منو در responsive.css فقط تا ۷۶۷ پیکسل فعال‌اند
       و در عرض تبلت هیچ‌کدام نمی‌آمدند: منو نه پس‌زمینه داشت، نه جای
       مشخص. اینجا همان قاعده‌ها تکرار و کمی جمع‌وجورتر شده‌اند. */
    #hamMenu {
        position: fixed;
        right: 0;
        top: 75px;
        width: 100%;
        height: calc(100vh - 75px);
        z-index: 9999;
        background-color: var(--white);
        overflow-y: auto;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    }

    .hamMenu {
        padding: 24px 48px;
        box-sizing: border-box;
    }

    .hamMenu .mainMenu ul li a { color: var(--black); font-size: 15px; }

    .hamMenu nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 16px 0;
        gap: 24px;
    }

    .hamMenu li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
    }

    .hamMenu li a i.icon {
        width: 24px;
        height: 24px;
        -webkit-mask-size: 24px;
        mask-size: 24px;
    }

    .hamMenu > a {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 24px 0;
        font-size: 15px;
    }

    .hamMenu > a i.icon {
        width: 24px;
        height: 24px;
        -webkit-mask-size: 24px;
        mask-size: 24px;
    }

    .hamMenu [parent] { display: none; }

    .childMenuHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 0;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid var(--line, #e3dfd4);
    }

    /* ── پدینگ کناری بخش‌های اصلی ───────────────────────────────────── */
    .aboutBox, .articleOuter, .blogBox, .cartBox, .compareBox,
    .contactBanner, .contactBox, .productDetails, .productDesc,
    .limitedWatch, .brandsSection, .capitalSection, .searchBox,
    .socialBox, .footerBox, .newestWatch, .zarinSelected, .kalaBox,
    .productsSection, .shopBox, .landingBox, .blogMain {
        padding-inline: 48px;
        box-sizing: border-box;
    }

    .requestHero, .requestSteps, .requestLayout, .zz-page, .zz-result {
        padding-inline: 48px;
    }

    /* ── شبکه محصولات: سه ستون ──────────────────────────────────────── */
    .productBox .productItem { width: calc(100%/3 - 20px/3*2); }
    .productBox .productItem .imgBox { padding: 40px 30px; }

    /* ── نوار فیلتر: نسخه کشویی موبایل ──────────────────────────────── */
    .filterBox .filterItems { display: none; }

    .mFilterBox { display: block; flex: 1; }
    .filterBox .sortBox { flex: 1; }
    .filterBox { gap: 20px; }

    /* ── چیدمان‌های دوستونی که در این عرض خیلی تنگ می‌شوند ──────────── */
    .contactBox .contactMain,
    .contactLocation,
    .aboutBox .aboutContent,
    .requestLayout {
        flex-direction: column;
    }

    .contactMain .contactContent,
    .contactForm,
    .contactLocation .locationContent,
    .contactLocation .locationMap,
    .aboutContent .imgBox,
    .aboutContent .contentBox,
    .requestLayout .requestMain,
    .requestLayout .requestAside {
        width: 100%;
        box-sizing: border-box;
    }

    .requestLayout .requestAside { position: static; }

    /* ── سبد خرید و پرداخت: ستون خلاصه زیر محتوا ────────────────────── */
    .cartContent, .sendContent, .payContent { flex-wrap: wrap; }

    .cartContent .cartRight, .cartContent .cartLeft,
    .sendContent .sendRight, .sendContent .sendLeft,
    .payContent .payRight, .payContent .payLeft {
        width: 100%;
        box-sizing: border-box;
    }

    /* ── مقایسه: ستون‌ها باریک‌تر ولی خوانا ─────────────────────────── */
    .compareMain, .compareColumn { overflow-x: auto; }

    /* ── اسلایدر عمودی: فلش‌ها نزدیک‌تر به لبه ──────────────────────── */
    .landingSlider .owl-nav { padding: 0 32px; }
}

/* ═══════════ عوض‌شدن تصویر کارت محصول هنگام هاور (همه صفحات) ═══════════
   قالب این افکت را فقط در shop.css تعریف کرده؛ بنابراین در صفحه‌هایی که
   آن فایل را لود نمی‌کنند (سبد خرید، صفحه محصول، مقاله) کارت‌ها هیچ
   واکنشی به هاور نداشتند. این قاعده همان رفتار shop.css است، نه چیز تازه. */
.productBox .productItem .imgBox .img1,
.productBox .productItem .imgBox .img2 { transition: opacity .35s ease; }

.productBox .productItem .imgBox:hover .img1 { opacity: 0; }
.productBox .productItem .imgBox:hover .img2 { opacity: 1; }

/* تصویر کارت هم باید به صفحه محصول برود؛ `display:contents` باعث می‌شود
   لینک هیچ جعبه‌ای نسازد و چیدمان قالب دقیقاً دست‌نخورده بماند. */
.productBox .productItem .imgBox > a.cardImageLink { display: contents; }

/* ════════ شبکه کارت محصول در صفحه‌هایی که shop.css ندارند ════════
   قالب، چیدمان شبکه‌ایِ `.productBox` را فقط در shop.css تعریف کرده؛
   در صفحه محصول، اکسسوری، مقاله و سبد خرید (که آن فایل را لود نمی‌کنند)
   کارت‌ها زیر هم می‌افتادند. در سبد خرید هم `.productBox` خودِ cart.css
   یعنی «لیست اقلام» است، پس برای شبکه از کلاس جداگانه `zz-grid` استفاده
   می‌شود تا آن لیست دست‌نخورده بماند. مقادیر عیناً از shop.css گرفته شده. */
.productBox.zz-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: row;
    align-items: stretch;
}

.productBox.zz-grid .productItem {
    width: calc(100%/5 - 20px/5*4);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.productBox.zz-grid .productItem .imgBox {
    background-color: var(--gray);
    padding: 51px 69px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.productBox.zz-grid .productItem .imgBox img {
    max-width: 138px;
    margin: 0 auto;
}

.productBox.zz-grid .productItem .productContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    flex: 1;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .productBox.zz-grid .productItem { width: calc(100%/3 - 20px/3*2); }
    .productBox.zz-grid .productItem .imgBox { padding: 40px 30px; }
}

@media screen and (max-width: 767px) {
    .productBox.zz-grid .productItem { width: calc(100%/2 - 20px/2); }
    .productBox.zz-grid .productItem .imgBox { padding: 42px 38px; }
    .productBox.zz-grid .productItem .productContent { padding: 24px 12px 5px; }
}

/* ════════ کارت‌های وبلاگ: عرض ثابت صرف‌نظر از تعداد ════════
   `.blogCart` فقط `min-width` دارد و `flex-shrink` پیش‌فرض ۱ است؛ برای
   همین دسته‌ای با ۲ مقاله کارت‌های پهن و دسته‌ای با ۴ مقاله کارت‌های
   باریک می‌ساخت. با `flex: 0 0` عرض همه دسته‌ها یکسان می‌ماند و ردیف
   به‌جای فشرده‌شدن، افقی اسکرول می‌شود (همان رفتاری که home.js برایش
   درگ نوشته است). */
body.homePage .tabContents .tabContent .blogCart {
    flex: 0 0 calc(50% - 10px - 70px);
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    body.homePage .tabContents .tabContent .blogCart {
        flex: 0 0 calc(50% - 10px - 12px);
    }
}

/* ── برند بدون لوگو: نام برند به‌جای لوگوی عمومیِ یکسان ───────────────── */
.zz-brand-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 12px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .5px;
    color: var(--black);
    text-align: center;
}

/* ═══════ قاب یکدست برای تصویر محصول، مستقل از نسبت‌ابعاد فایل ═══════
   قالب فقط `max-width: 138px` دارد؛ با عکس‌های واقعیِ مشتری که هر کدام
   نسبت‌ابعاد متفاوتی دارند، ارتفاع کارت‌ها به‌هم می‌ریزد. این قاعده یک
   کادر ثابت می‌سازد و عکس را بدون بریدن یا کشیدن داخلش جا می‌دهد. */
.productBox .productItem .imgBox img,
.productBox.zz-grid .productItem .imgBox img,
.limitedSlider .sliderItem .imgBox img,
.newestSlider .sliderItem .imgBox img,
.searchProductBox .productItem .imgBox img,
.productResult .productItem .imgBox img {
    max-width: 138px;
    max-height: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* کادر تصویر کارت ارتفاع ثابت می‌گیرد تا همه کارت‌ها هم‌تراز بمانند */
.productBox .productItem .imgBox,
.productBox.zz-grid .productItem .imgBox {
    min-height: 240px;
}

/* اسلایدرها و صفحه محصول و مقایسه */
.selectedSlider .sliderItem .itemImage img,
.capitalSlider .sliderItem .itemImage img {
    max-height: 420px;
    width: auto;
    object-fit: contain;
}

/* `width: auto` + `max-height` روی موبایل تصویر را به اندازهٔ ذاتی‌اش
   می‌کشید (۵۲۰ پیکسل در صفحهٔ ۳۷۵) و از دو طرف بیرون می‌زد. حالا عرض
   مبنا است و قاب مربعِ نسبت‌ثابت، هر عکسی با هر ابعادی را یک‌جور
   می‌نشاند — چه ۱۰۰۰×۱۰۰۰ باشد چه ۱۲۰۰×۱۷۰۰. */
.productDetailsRight .productCarousel2 .swiper-slide img {
    width: 100%;
    max-width: 427px;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: contain;
}

/* بندانگشتی‌ها زیر `.imgBox` هستند و responsive.css به آن‌ها
   `max-width: 103px` می‌دهد؛ این سقف اینجا برداشته می‌شود وگرنه تصویر
   از عرض اسلاید بیرون می‌زند و بندانگشتی‌ها روی هم می‌افتند. */
.productDetailsRight .productCarousel .swiper-slide img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: contain;
}

.changeImages .changeItem img {
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
}

.compareMain .column.product > img {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}

.cartLeft .productItem .productImg img,
.topRightItems .productItem .imgBox img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .productBox .productItem .imgBox,
    .productBox.zz-grid .productItem .imgBox { min-height: 170px; }

    .productBox .productItem .imgBox img,
    .productBox.zz-grid .productItem .imgBox img { max-height: 130px; }
}

/* ═══════ اسلایدرهای «منتخب» و «سرمایه‌ای»: ارتفاع ثابت ═══════
   قالب به تصویر فقط عرض درصدی داده بود؛ با عکس‌های واقعیِ مشتری که هر
   کدام نسبت‌ابعاد متفاوتی دارند، ارتفاع هر اسلاید فرق می‌کرد. owl ارتفاع
   استیج را از اسلاید فعال می‌گیرد، پس با هر جابه‌جایی کل بخش بالا و پایین
   می‌پرید، متن از نوار مشکی بیرون می‌زد و در حالت fade هم تصویر قبلی روی
   تصویر بعدی می‌ماند. با کادر ثابت، همه اسلایدها یک اندازه‌اند. */
.selectedSlider .sliderItem .itemImage {
    width: 55%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.selectedSlider .sliderItem .itemImage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* متن هم ارتفاع ثابت می‌گیرد تا کامل داخل نوار مشکی بنشیند */
.selectedSlider .sliderItem {
    min-height: 420px;
    align-items: center;
}

.selectedSlider .sliderItem .itemContent {
    justify-content: center;
    min-height: 220px;
}

.selectedSlider .sliderItem .itemContent h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

.capitalSlider .sliderItem {
    min-height: 320px;
    align-items: center;
}

.capitalSlider .sliderItem .itemImage {
    width: 67%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.capitalSlider .sliderItem .itemImage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.capitalSlider .sliderItem .itemContent h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* استیج هم ارتفاع ثابت بگیرد تا هنگام fade نپرد */
.selectedSlider .owl-stage-outer,
.selectedSlider .owl-item,
.capitalSlider .owl-stage-outer,
.capitalSlider .owl-item { height: auto; }

@media screen and (max-width: 1200px) {
    .selectedSlider .sliderItem .itemImage,
    .selectedSlider .sliderItem { height: 320px; min-height: 320px; }
    .capitalSlider .sliderItem .itemImage,
    .capitalSlider .sliderItem { height: 260px; min-height: 260px; }
}

@media screen and (max-width: 767px) {
    .selectedSlider .sliderItem .itemImage,
    .selectedSlider .sliderItem { height: 240px; min-height: 240px; }
    .selectedSlider .sliderItem .itemContent { min-height: 0; }
    /* ارتفاع «سرمایه‌ای» در بلوک مخصوص موبایلِ پایین همین فایل تعیین می‌شود */
}

/* ═══════════ اسلایدر «محصولات مشابه» (پنج‌تایی، سبک نسخه‌های محدود) ═══════════
   صفحه محصول، اکسسوری، مقاله و سبد خرید `shop.css` را لود نمی‌کنند، پس نه
   چیدمان کارت را داشتند و نه جایگاه مطلق «نشان» و «قلب» را؛ کارت‌ها زیر هم
   می‌افتادند و نشان‌ها وسط تصویر می‌نشستند. اینجا همان مقادیر shop.css و
   همان فلش‌های `.limitedSlider` قالب بازنویسی شده‌اند تا ظاهر دقیقاً مطابق
   طراحی بماند. چیدمان خود ردیف را owl می‌سازد (store.js). */
.productBox.similarSlider {
    direction: ltr;
    display: block;
}

.productBox.similarSlider .owl-stage {
    display: flex;
}

.productBox.similarSlider .owl-item {
    display: flex;
}

/* کارت داخل اسلایدر عرضش را از owl می‌گیرد؛ حاشیه و padding ردیفیِ
   cart.css (که در سبد خرید روی هر `.productItem` می‌نشیند) باید پاک شود. */
.productBox.similarSlider .productItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    border: 0;
    box-sizing: border-box;
    text-align: center;
}

.productBox.similarSlider .productItem .imgBox {
    background-color: var(--gray);
    padding: 40px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    min-height: 240px;
    overflow: hidden;
}

.productBox.similarSlider .productItem .imgBox img {
    max-width: 138px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.productBox.similarSlider .productItem .productContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 12px;
    gap: 0;
    flex: 1;
    direction: rtl;
}

.productBox.similarSlider .productContent h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
    text-align: center;
}

.productBox.similarSlider .productContent span {
    font-size: 14px;
    text-align: center;
}

/* فلش‌ها عیناً مثل «نسخه‌های محدود» صفحه اصلی */
.similarSlider .owl-stage-outer { margin: 52px auto; }

.similarSlider .owl-nav .owl-prev,
.similarSlider .owl-nav .owl-next { position: relative; }

.similarSlider .owl-nav .owl-prev span,
.similarSlider .owl-nav .owl-next span { display: none !important; }

.similarSlider .owl-nav .owl-prev::before {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    background: url("../zfront/images/nav-left.188dbb1b0192.svg") center center no-repeat;
    background-size: cover;
    left: -70px;
    top: 32px;
}

.similarSlider .owl-nav .owl-next::before {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    background: url("../zfront/images/nav-right.91bdd54c9e0a.svg") center center no-repeat;
    background-size: cover;
    right: -70px;
    top: 32px;
}

.similarSlider .owl-nav button.disabled { opacity: .35; }

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .productBox.similarSlider .productItem .imgBox { padding: 32px 18px; min-height: 210px; }

    /* قالب به ردیف بندانگشتی‌ها هم `width:100%` داده و هم `margin-right:92px`؛
       یعنی جعبه همیشه ۹۲ پیکسل از ستون چپ بیرون می‌زند. در دسکتاپ این
       بیرون‌زدگی زیر ستون تصویر می‌نشیند و دیده نمی‌شود، ولی در تبلت که
       padding صفحه ۴۸ پیکسل است از لبه صفحه رد می‌شود و اسکرول افقی
       می‌سازد. با `width:auto` همان تورفتگی ۹۲ پیکسلی طراح حفظ می‌شود. */
    .productDetailsLeft .changeImages { width: auto; box-sizing: border-box; }
}

@media screen and (max-width: 767px) {
    .similarSlider .owl-stage-outer { margin: 24px auto 0; }

    .productBox.similarSlider .productItem .imgBox {
        padding: 25px 20px;
        min-height: 170px;
    }

    .productBox.similarSlider .productItem .imgBox img { max-width: 103px; max-height: 130px; }
    .productBox.similarSlider .productItem .productContent { padding: 16px 8px; }
    .productBox.similarSlider .productContent h3 { font-size: 14px; }
    .productBox.similarSlider .productContent span { font-size: 12px; }

    /* در موبایل `.newestWatch` فقط ۳۲px padding دارد؛ ‎-35px قالب فلش را
       ۳px از صفحه بیرون می‌برد و اسکرول افقی می‌سازد، پس ‎-29px. */
    .similarSlider .owl-nav .owl-prev::before { width: 27px; height: 27px; left: -29px; }
    .similarSlider .owl-nav .owl-next::before { width: 27px; height: 27px; right: -29px; }
}

/* ═══════ جای «نشان» و «قلب» روی تصویر کارت (همه صفحات) ═══════
   این دو قاعده هم فقط در shop.css بودند؛ بدون آن‌ها در صفحه محصول و سبد
   خرید، «نسخه محدود» و آیکن علاقه‌مندی داخل جریان عادی و زیر تصویر
   می‌افتادند. مقادیر عیناً از shop.css (خطوط ۳۳۱ تا ۳۴۷). */
.productItem .imgBox .badge {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--black);
    background-color: var(--white);
    padding: 4px 8px;
    border-radius: 29px;
    font-size: 12px;
    z-index: 2;
}

.productItem .imgBox .icon {
    position: absolute;
    left: 12px;
    top: 12px;
    background-color: var(--black);
    z-index: 2;
}

/* دو تصویر کارت باید روی هم بنشینند، نه زیر هم (همان shop.css) */
.productBox .productItem .imgBox .img1 { position: relative; opacity: 1; }
.productBox .productItem .imgBox .img2 { position: absolute; opacity: 0; z-index: 1; }

@media screen and (max-width: 767px) {
    .productItem .imgBox .badge { font-size: 10px; }
    .productItem .imgBox .icon { width: 15px; height: 15px; -webkit-mask-size: 15px; }
}

/* ═══════ هم‌ترازی کارت‌های «نسخه‌های محدود» و «جدیدترین ساعت‌ها» ═══════
   در قالب ایستا عنوان همه کارت‌ها یک خط بود، پس همه هم‌قد درمی‌آمدند؛ با
   عنوان‌های واقعی بعضی عنوان‌ها دو خط می‌شوند و کف کارت‌ها در یک ردیف
   ناهم‌تراز می‌ماند (owl ارتفاع هر آیتم را از محتوایش می‌گیرد). با کشیدن
   آیتم‌ها و محدودکردن عنوان به دو خط، ردیف منظم می‌ماند. */
.limitedSlider .owl-stage,
.newestSlider .owl-stage { display: flex; }

.limitedSlider .owl-item,
.newestSlider .owl-item { display: flex; }

.limitedSlider .owl-item .sliderItem,
.newestSlider .owl-item .sliderItem {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.limitedSlider .sliderItem .itemContent,
.newestSlider .sliderItem .itemContent { flex: 1; }

.limitedSlider .sliderItem .itemContent h3,
.newestSlider .sliderItem .itemContent h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* دو خط رزرو می‌شود تا خط «مشخصات» همه کارت‌ها در یک ارتفاع بیفتد */
    line-height: 1.6;
    min-height: 3.2em;
}

/* کادر تصویرِ «نسخه‌های محدود» هم ارتفاع ثابت می‌گیرد؛ وگرنه با عکس‌های
   کشیده و پهنِ واقعی، کف جعبه خاکستری هر کارت در یک ارتفاع می‌افتد و
   ردیف ناهموار دیده می‌شود. ۲۹۲ = ۱۹۰ (سقف ارتفاع عکس) + ۲×۵۱ (padding قالب). */
.limitedSlider .sliderItem .imgBox {
    height: 292px;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    /* در موبایل padding قالب ۲۵ پیکسل است: ۱۹۰ + ۲×۲۵ */
    .limitedSlider .sliderItem .imgBox { height: 240px; }
}

/* ═══════ قاب تصویر «جدیدترین ساعت‌ها» ═══════
   تصویر این اسلایدر بیرون از کارت و روی آن می‌نشیند (`top:-134px`)؛ چون
   قالب همه‌جا یک عکس نمونه داشت، لبه پایین همه ساعت‌ها یکجا می‌افتاد. با
   عکس‌های واقعی، ساعت کوتاه بالای کارت معلق می‌ماند و ساعت بلند تا داخل
   کارت می‌آید. قاب با ارتفاع ثابت و تراز پایین، همه را روی یک خط می‌نشاند. */
.newestSlider .sliderItem .imgBox {
    height: 190px;
    align-items: flex-end;
    box-sizing: border-box;
}

.newestSlider .sliderItem .imgBox img { max-height: 190px; }

@media screen and (max-width: 767px) {
    /* در موبایل تصویر فقط ۷۵ پیکسل بالاتر می‌نشیند و padding کارت هم ۷۵ است */
    .newestSlider .sliderItem .imgBox { height: 110px; }
    .newestSlider .sliderItem .imgBox img { max-height: 110px; }
}

/* ═══════════ کارت‌های وبلاگ صفحه اصلی: قد برابر ═══════════
   قالب فقط عرض کارت را ثابت کرده بود؛ ارتفاع از متن می‌آمد، پس عنوان
   دوخطی یا خلاصه بلندتر، کارت را بلندتر می‌کرد و ردیف ناهموار می‌شد.
   اینجا قد کارت و قاب تصویر ثابت می‌شود و متن در همان قاب کوتاه می‌آید. */
body.homePage .blogBox .tabContents .tabContent {
    align-items: stretch;
}

body.homePage .blogBox .blogCart {
    height: 216px;
    box-sizing: border-box;
    align-items: stretch;
}

body.homePage .blogBox .blogCart .blogImg {
    height: 100%;
    flex: none;
    overflow: hidden;
}

body.homePage .blogBox .blogCart .blogImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.homePage .blogBox .blogCart .blogContent {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.homePage .blogBox .blogCart .blogContent h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    min-height: 3.4em;
}

body.homePage .blogBox .blogCart .blogContent p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.9;
    margin-bottom: 12px;
}

/* «بیشتر بخوانید» همیشه کف کارت، صرف‌نظر از طول متن */
body.homePage .blogBox .blogCart .blogContent a {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    /* در موبایل کارت ستونی می‌شود (تصویر بالا، متن پایین)؛ قاعده دسکتاپ که
       تصویر را تمام‌قد می‌کرد، کل کارت را پر می‌کرد و متنِ سفید بیرون از
       کادر مشکی می‌افتاد و خوانده نمی‌شد. اینجا کارت تمام‌عرض و زیر هم
       می‌نشیند (بدون اسکرول افقی)، تصویر قاب ثابت دارد و متن داخل کادر
       مشکی می‌ماند. */
    body.homePage .blogBox .tabContents .tabContent {
        flex-wrap: wrap;
        overflow: visible;
        gap: 16px;
    }

    body.homePage .blogBox .blogCart {
        flex: 0 0 100%;
        min-width: 100%;
        width: 100%;
        height: 368px;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        box-sizing: border-box;
    }

    body.homePage .blogBox .blogCart .blogImg {
        width: 100%;
        height: 180px;
        flex: none;
    }

    body.homePage .blogBox .blogCart .blogContent {
        width: 100%;
        flex: 1;
    }

    body.homePage .blogBox .blogCart .blogContent h4 {
        min-height: 0;
        -webkit-line-clamp: 2;
    }

    body.homePage .blogBox .blogCart .blogContent p {
        -webkit-line-clamp: 3;
        margin-bottom: 8px;
    }
}

/* ═══════════ صفحه «همه مقالات» در موبایل: یک کارت در هر ردیف ═══════════
   `blog.css` برای این صفحه عرض کارت را ۱۰۰٪ گذاشته، ولی `responsive.css`
   که بعد از آن لود می‌شود دوباره `min-width: calc(50% - 22px)` می‌دهد؛
   نتیجه دو کارت باریکِ ۱۴۲ پیکسلی و بلند در هر ردیف بود. */
@media screen and (max-width: 767px) {
    body.blogPage .tabContents .tabContent {
        flex-wrap: wrap;
        gap: 20px;
        overflow: visible;
    }

    body.blogPage .tabContents .tabContent .blogCart {
        min-width: 100%;
        width: 100%;
        flex: 0 0 100%;
        min-height: 0;
        flex-direction: column;
        box-sizing: border-box;
    }

    body.blogPage .tabContents .tabContent .blogCart .blogImg {
        width: 100%;
        height: 190px;
        overflow: hidden;
    }

    body.blogPage .tabContents .tabContent .blogCart .blogImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    body.blogPage .tabContents .tabContent .blogCart .blogContent { width: 100%; }

    /* نوار دسته‌ها خودش اسکرول افقی بگیرد، نه کل صفحه */
    body.blogPage .tab .tabItems {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    body.blogPage .tab .tabItems::-webkit-scrollbar { display: none; }
    body.blogPage .tab .tabItems .tabItem { white-space: nowrap; flex: none; }
}

/* قد یکسان کارت‌های صفحه «همه مقالات» — عنوان دو خط، خلاصه سه خط و
   «ادامه مطلب» همیشه کف کارت */
body.blogPage .blogCart .blogContent {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.blogPage .blogCart .blogContent h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    min-height: 3.4em;
}

body.blogPage .blogCart .blogContent p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.9;
}

body.blogPage .blogCart .blogContent a:last-child { margin-top: auto; }

/* قاب ثابت تصویر؛ وگرنه کاورهایی با نسبت‌ابعاد متفاوت قد کارت‌ها را
   در یک ردیف ناهموار می‌کنند */
body.blogPage .blogCart .blogImg {
    display: block;
    height: 240px;
    overflow: hidden;
}

body.blogPage .blogCart .blogImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 767px) {
    body.blogPage .tabContents .tabContent .blogCart { height: 390px; }
    body.blogPage .blogCart .blogImg { height: 190px; }
    body.blogPage .blogCart .blogContent p { -webkit-line-clamp: 3; }
}

/* ═══════════ نمایشگرهای خیلی پهن (اولترا واید) ═══════════
   طراحی برای عرض ۱۴۴۰ کشیده شده و هیچ‌جای قالب سقف عرض ندارد؛ روی مانیتور
   ۲۵۶۰ پیکسلی هر بخش تا لبه کشیده می‌شد، اسلایدر چهارتایی کارت‌های ۵۵۰
   پیکسلی می‌ساخت و نسبت‌های طراحی به‌هم می‌ریخت. صفحه از ۱۷۰۰ به بعد در
   یک قاب وسط‌چین می‌نشیند و بیرونش زمینه خاکستری ملایم می‌ماند. */
@media screen and (min-width: 1700px) {
    html { background-color: var(--gray); }

    body {
        max-width: 1700px;
        margin-inline: auto;
        /* هدر و لایه‌های absolute باید داخل همین قاب بنشینند */
        position: relative;
        /* سافاری زیر ۱۶ کلمه clip را نمی‌شناسد؛ hidden قبل از آن فالبک است */
        overflow-x: hidden;
        overflow-x: clip;
        box-shadow: 0 0 80px rgba(1, 0, 0, .10);
    }

    /* این لایه با 100vw ساخته شده بود و از قاب بیرون می‌زد */
    header #brandsMenu { width: 100%; }
}

/* ═══════════ ویدیو پس‌زمینه اسلایدر لندینگ ═══════════ */
.landingSlider .sliderItem video {
    background-color: var(--black);
}

/* متن و کنترل‌های اسلایدر باید روی ویدیو بمانند */
.landingSliderBox .sliderContent,
.landingSlider .owl-nav,
.landingSlider .swiper-pagination { z-index: 3; }

/* ═══════════ «منتخب زرین زمان» ═══════════
   ۱) نوار مشکی پشت متن، ارتفاعش را از ۵۰٪ گرفته بود و با مشخصات واقعی
      محصول (عنوان، قطر، رفرنس و لینک) پایین کادر از نوار بیرون می‌زد.
   ۲) بخش به المان‌های بالایی چسبیده بود، چون متنِ بالای اسلایدر با
      margin منفی بالا کشیده می‌شود. */
.zarinSelected {
    margin-top: 72px;
}

.zarinSelected .selectedSlider::before {
    /* لبه بالای نوار همان‌جای طراحی می‌ماند (۱۰٪+۵۰٪ قبلی) و فقط تا کف
       اسلاید کشیده می‌شود تا متن محصول کامل داخلش بیفتد؛ وگرنه اگر از بالا
       بزرگ شود، توضیح زیر عنوان را می‌پوشاند. */
    height: 60%;
    bottom: 0;
}

.selectedSlider .sliderItem .itemContent {
    padding-bottom: 10px;
}

/* توضیح زیر عنوان در طراحی یک خط است؛ با متن واقعی دو خط می‌شود و خط دوم
   روی نوار مشکی می‌افتاد و خوانده نمی‌شد. این فاصله، نوار را پایین‌تر
   می‌برد بدون اینکه تورفتگی طراحی از بین برود. */
@media screen and (min-width: 768px) {
    .zarinSelected .selectedContent { padding-bottom: 44px; }
}

/* ═══════════ «برندهای منتخب» ═══════════
   هاور طراحی زوم‌این است؛ برای برندهایی که هنوز لوگو ندارند و نامشان
   تایپوگرافی می‌شود هم باید همان زوم بیفتد (زیرخط از قاعده عمومی a:hover
   می‌آید و دست‌نخورده می‌ماند تا هر دو با هم باشند). */
.brandsSection {
    margin-top: 72px;
}

.brandsSlider .sliderItem a {
    display: block;
    text-decoration: none;
}

.brandsSlider .sliderItem .zz-brand-name {
    transition: var(--ease);
    transform: none;
}

.brandsSlider .sliderItem:hover .zz-brand-name {
    transform: scale(1.1);
    color: var(--red);
}

/* ═══════════ «سرمایه‌ای که هر روز همراه شماست» ═══════════
   پس‌زمینه یک شکل طراحی‌شده ۱۴۴۰×۵۲۰ با گودیِ وسط است؛ با `contain` روی
   هر عرضی غیر از ۱۴۴۰ دو طرفش سفید می‌ماند. با کشیدن به اندازه کانتینر،
   هم کل کادر پر می‌شود و هم گودی دقیقاً سر جای ساعت می‌ماند. */
@media screen and (min-width: 768px) {
    .capitalSection {
        background-size: 100% 100%;
        background-position: center center;
    }
}

/* ═══════════ بنر «برای آقایان / برای بانوان» ═══════════
   قالب به `.bannerImg` مقدار `z-index:-1` داده و تا وقتی پس‌زمینه body به
   بوم صفحه منتقل می‌شد مشکلی نبود؛ اما به‌محض اینکه html پس‌زمینه بگیرد
   (نمای اولتراواید)، پس‌زمینه body خودش یک لایه می‌شود و روی تصویرِ
   منفی می‌افتد و بنر سفید دیده می‌شود. با ساختن لایه مستقل روی خود
   کارت، تصویر همیشه داخل همان کارت و زیر متن می‌ماند. */
.bannerBox .bannerItem {
    isolation: isolate;
}

.bannerItem .bannerImg {
    z-index: 0;
}

.bannerItem .bannerContent {
    position: relative;
    z-index: 1;
}

/* ═══════════ «منتخب زرین زمان»: فلش‌ها و شمارنده زیر کادر مشکی ═══════════
   نوار مشکی به‌جای درصدِ ارتفاعِ کل اسلایدر، به قاب ثابت تصویر گره می‌خورد
   تا با اضافه‌شدن ردیف فلش‌ها پایین‌تر نرود؛ بعد فلش‌ها و شمارنده در فضای
   سفیدِ زیر نوار می‌نشینند. */
@media screen and (min-width: 768px) {
    .zarinSelected {
        padding-bottom: 76px;
    }

    .zarinSelected .selectedContent {
        padding-bottom: 72px;   /* فاصله متن تا لبه نوار مشکی */
    }

    .zarinSelected .selectedSlider::before {
        top: 168px;
        height: 252px;
        bottom: auto;
    }

    .selectedSlider .owl-nav {
        margin-top: 22px;
    }

    #slider-counter {
        bottom: 26px;
    }
}

/* ═══════════ «سرمایه‌ای...» در موبایل ═══════════
   قالب در موبایل پس‌زمینه را از بخش برمی‌دارد و روی تصویرِ هر اسلاید
   می‌گذارد؛ نتیجه این است که پس‌زمینه با هر ساعت اسلاید می‌خورد و چون
   `contain` است، کل کادر را هم نمی‌گیرد. اینجا پس‌زمینه به خودِ بخش
   برمی‌گردد (ثابت و تمام‌عرض) و فقط ساعت عوض می‌شود. */
@media screen and (max-width: 767px) {
    /* چیدمان موبایلِ طراحی: متن روی سفید، بعد جعبه مشکی که فقط ساعت و
       نشانگر اسلاید داخلش است، و زیر آن مشخصات ساعت روی سفید. */
    .capitalSection {
        background: none;
        padding: 32px 0 48px;
    }

    .capitalSection .capitalContent {
        color: var(--black);
    }

    /* جعبه مشکی روی قاب بیرونی اسلایدر می‌نشیند، نه روی خود اسلاید؛
       پس با عوض‌شدن ساعت جابه‌جا نمی‌شود. */
    .capitalSlider .owl-stage-outer {
        background: url("../zfront/images/capital-mobile-bg.35cf1c06ed6c.png") no-repeat top center;
        background-size: 100% 300px;
    }

    .capitalSlider .sliderItem {
        height: auto;
        min-height: 0;
        gap: 20px;
    }

    .capitalSlider .sliderItem .itemImage {
        background: none;
        height: 300px;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* قالب به این تصویر `padding: 0 20%` با border-box داده بود؛ با سقف
       عرض، ساعت به یک نوار باریک تبدیل می‌شد. اینجا ارتفاع ثابت می‌گیرد و
       عرض از نسبت‌ابعاد خودش می‌آید. */
    .capitalSlider .sliderItem .itemImage img {
        padding: 0;
        height: 240px;
        width: auto;
        max-width: 78%;
        max-height: 240px;
        object-fit: contain;
    }

    /* مشخصات ساعت زیر جعبه مشکی، روی زمینه روشن */
    .capitalSlider .sliderItem .itemContent {
        color: var(--black);
        padding-bottom: 8px;
    }

    .capitalSlider .sliderItem .itemContent a i.icon { background-color: var(--black); }
}

/* ═══════════ دیدگاه‌های صفحه مقاله ═══════════
   استایل این بخش فقط در `product.css` نوشته شده و صفحه مقاله آن فایل را
   لود نمی‌کند؛ برای همین کل بلوک دیدگاه‌ها بدون استایل رندر می‌شد. قواعد
   پایه از همان فایل طراح آورده شده‌اند، به‌علاوه چند بهبود خوانایی: هر
   دیدگاه کارت مستقل با نوار قرمز، فرم روی زمینه روشن و چیدمان ستونی در
   موبایل. */
body.articlePage .productCommentBox {
    padding: 0 140px 90px;
    box-sizing: border-box;
}

body.articlePage h2.titr {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    padding: 24px 0;
    margin: 0 0 32px;
    border-bottom: 2px solid var(--red);
}

body.articlePage .productComments {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

body.articlePage .productCommentsRight,
body.articlePage .productCommentsLeft {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

body.articlePage .commentsMain {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* هر دیدگاه یک کارت مستقل با نوار قرمز کنارش */
body.articlePage .commentsMain .commentItem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background-color: var(--gray);
    border-right: 3px solid var(--red);
}

/* پاسخ‌ها یک پله تورفته و روشن‌تر */
body.articlePage .commentItem .commentItem {
    background-color: var(--white);
    border-right-color: #cfcfcf;
    margin-top: 4px;
}

body.articlePage .commentItem .itemHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

body.articlePage .itemHeader .writerName {
    font-size: 15px;
    font-weight: bold;
}

body.articlePage .itemHeader .itemHeaderLeft {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.articlePage .itemHeaderLeft .itemDate {
    font-size: 13px;
    color: #6b6b6b;
    direction: ltr;
}

body.articlePage .commentItem .itemMain p {
    font-size: 15px;
    line-height: 2.1;
    margin: 0;
    text-align: justify;
}

/* ── فرم ثبت دیدگاه ── */
body.articlePage .commentsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
    border-bottom: 1px solid #e0e0e0;
}

body.articlePage .commentsHeader h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

body.articlePage .productCommentsLeft > p {
    font-size: 14px;
    color: #6b6b6b;
    font-weight: normal;
    margin: 16px 0 20px;
}

body.articlePage .commentForm {
    background-color: var(--gray);
    padding: 24px;
    box-sizing: border-box;
}

body.articlePage .commentForm form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.articlePage .commentForm .fieldBox {
    gap: 16px;
}

body.articlePage .commentForm input[type=text],
body.articlePage .commentForm input[type=email],
body.articlePage .commentForm textarea {
    background-color: var(--white);
    border: 1px solid #d8d8d8;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

body.articlePage .commentForm textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 2;
}

body.articlePage .commentForm input[type=submit] {
    align-self: flex-start;
    padding: 12px 56px;
}

@media screen and (max-width: 1200px) {
    body.articlePage .productCommentBox { padding: 0 48px 70px; }
}

@media screen and (max-width: 767px) {
    body.articlePage .productCommentBox { padding: 0 24px 56px; }

    /* دو ستون در موبایل زیر هم می‌روند؛ `product.css` این را ندارد و
       فرم در عرض ۳۷۵ پیکسل به چند سانتی‌متر فشرده می‌شد. */
    .productComments { flex-direction: column; gap: 32px; }

    body.articlePage .commentForm { padding: 16px; }
    body.articlePage .commentForm .fieldBox input { width: 100%; }
    body.articlePage .commentForm input[type=submit] { align-self: stretch; padding: 12px 0; }
    body.articlePage .commentItem .commentItem { margin-inline-start: 16px !important; }
}

/* ═══════════ فونت‌ها: نمایش سریع‌تر متن ═══════════
   قالب در @font-face اولین آدرس را `.eot` (و برای دو فونت دیگر `.ttf`)
   گذاشته بود؛ مرورگر همان را دانلود می‌کند، یعنی ۱۲۰ تا ۱۶۰ کیلوبایت
   به‌جای ۵۰ کیلوبایت woff2. `font-display` هم تعریف نشده بود، پس تا
   آماده‌شدن فونت، متن نامرئی می‌ماند (مخصوصاً در سافاری محسوس است).
   این تعریف‌ها همان خانواده‌ها را دوباره و درست اعلام می‌کنند و چون
   store.css بعد از style.css می‌آید، همین‌ها ملاک می‌شوند. */
@font-face {
    font-family: 'Vazirmatn';
    src: url("../zfront/fonts/Vazirmatn/Vazirmatn-Regular.2b86e2d6e278.woff2") format('woff2'),
         url("../zfront/fonts/Vazirmatn/Vazirmatn-Regular.11b69a6c316a.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("../zfront/fonts/Vazirmatn/Vazirmatn-Bold.f3b289866f7f.woff2") format('woff2'),
         url("../zfront/fonts/Vazirmatn/Vazirmatn-Bold.fafc7e1e9614.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("../zfront/fonts/Vazirmatn/Vazirmatn-Black.c261c5241284.woff2") format('woff2'),
         url("../zfront/fonts/Vazirmatn/Vazirmatn-Black.69d47e859382.woff") format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai';
    src: url("../zfront/fonts/Almarai/Almarai-ExtraBold.eaca8a26b538.woff2") format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Arizonia';
    src: url("../zfront/fonts/Arizonia/Arizonia-Regular.401ea0dea924.woff2") format('woff2');
    font-weight: normal;
    font-display: swap;
}

/* ═══════════ سازگاری سافاری ═══════════
   قالب `backdrop-filter` را بدون پیشوند نوشته و سافاری آن را نادیده
   می‌گیرد؛ این دو قاعده همان مقدار را با پیشوند وبکیت هم می‌دهند. */
.btn.btn-backFilter {
    -webkit-backdrop-filter: blur(40px);
}

.landingSlider .owl-nav button:hover {
    -webkit-backdrop-filter: blur(40px);
}

/* لوگوی آژانس زیر فوتر: لینک اینلاین بود و فاصله متنیِ بین تگ‌ها در
   راست‌چین، تصویر را از وسط به کنار می‌برد. با inline-flex، عرض لینک
   دقیقاً اندازه تصویر می‌شود و وسط می‌نشیند. */
.copyright a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* ═══════════ اصلاح‌های موبایل: فوتر، CTA، تماس و کالا ═══════════ */
@media screen and (max-width: 767px) {
    /* ── نوار خبرنامه فوتر ───────────────────────────────────────────
       کادر شماره تماس فقط ۱۱۰ پیکسل عرض داشت. حالا تمام عرضِ باقی‌مانده
       را می‌گیرد و دکمه قرمز بدون هیچ فاصله‌ای به آن چسبیده است. */
    .socialBox .socialRight .fieldBox {
        width: 100%;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .socialBox .socialRight .fieldBox input {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .socialBox .socialRight .fieldBox .btn {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── «ساعت خود را بفروشید» ───────────────────────────────────────
       قالب به این بخش `height: 100vh` داده بود؛ روی موبایل یعنی تصویری
       به بلندی کل صفحه. ارتفاع خواسته‌شده ۵۵۶ پیکسل است و تصویر که
       absolute است همین قد را پر می‌کند. */
    .ctaSection {
        height: 556px;
        min-height: 556px;
    }

    .ctaSection .ctaContent {
        padding: 48px 32px;
    }

    /* ── فرم «ارسال پیام» صفحه تماس ──────────────────────────────────
       فیلد ایمیل از قاعده عمومی `width: calc(50% - 10px)` تبعیت می‌کرد و
       نصف بقیه بود. */
    .contactForm .fieldBox input,
    .contactForm .fieldBox input[type=email],
    .contactForm .fieldBox input[type=tel],
    .contactForm .fieldBox textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* ── «مقایسه کالا» و «اصالت کالا» ────────────────────────────────
       اسلایدر افقی: کارت‌ها اندازه و فونت کامل خودشان را نگه می‌دارند و
       به‌جای فشرده‌شدن، با کشیدن انگشت کنار هم رد می‌شوند. اسکرول روی
       لبهٔ هر کارت قفل (snap) می‌شود و کارت بعدی کمی از سمت چپ پیداست
       تا معلوم باشد ادامه دارد. قالب همین ردیف را داشت ولی با padding
       نامتقارن (راست ۳۲، چپ ۰) و بدون snap، برای همین کارت دوم بریده
       و کوچک‌تر به‌نظر می‌رسید. */
    .kalaBox .kalaContent {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 32px;
        padding: 0 32px 32px;
        gap: 16px;
        align-items: stretch;
        justify-content: flex-start;
        /* نوار اسکرول دیده نشود */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .kalaBox .kalaContent::-webkit-scrollbar { display: none; }

    .kalaContent .kalaItem {
        /* ۳۲ پیکسل فاصله از هر دو دیواره؛ ۱۰۰٪ یعنی تمام عرضِ داخلیِ
           ردیف، که خودش از قبل padding راست و چپ را کم کرده است. */
        flex: 0 0 100%;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 271px;
        min-height: 271px;
        padding: 24px 20px;
        scroll-snap-align: start;
    }

    .kalaContent .kalaItem h3 {
        text-align: center;
    }

    /* اگر کارفرما بعداً متن بلندتری بگذارد، به‌جای بریدگی وسط خط با یک
       محوشدگی تمام می‌شود. */
    .kalaContent .kalaItem p {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    }

    .kalaContent .kalaItem .btn {
        align-self: stretch;
        text-align: center;
    }
}


/* ═══════════ «داستان ما» — محو شدن پس‌زمینه روی عکس ═══════════ */
/* قالب روی لبه عکس یک نوارِ تمام‌رنگِ `var(--gray)` با بافت blog-bg
   می‌گذاشت (`.imgBox::before`) و کنارش یک گرادیان باریک؛ نتیجه یک
   «پس‌زمینه دیگر» روی عکس بود، نه محو شدن. آن نوار برداشته شد و یک
   گرادیان پیوسته از رنگِ خودِ صفحه تا شفاف جایش نشست. */
.storyBox .imgBox::before { display: none; }

/* روی عکس، دقیقاً همان پس‌زمینهٔ بافت‌دارِ صفحه کشیده می‌شود و با یک
   ماسک گرادیانی محو می‌شود؛ این‌طور لبه‌ای بین «بافت» و «رنگ تخت»
   نمی‌افتد و عکس واقعاً داخل پس‌زمینه حل می‌شود. */
.storyBox .imgBox::after {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: var(--gray) url("../zfront/images/blog-bg.3631612a443b.svg");
    /* از لبه راست (جایی که پس‌زمینه صفحه است) به‌سمت داخل عکس محو می‌شود */
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 10%,
                        rgba(0, 0, 0, .5) 22%, transparent 46%);
    mask-image: linear-gradient(to left, #000 0%, #000 10%,
                rgba(0, 0, 0, .5) 22%, transparent 46%);
}

@media screen and (max-width: 767px) {
    /* روی موبایل عکس تمام‌عرض است و متن زیرش می‌آید، پس محو از پایین */
    .storyBox .imgBox::after {
        top: auto;
        bottom: 0;
        -webkit-mask-image: linear-gradient(to top, #000 0%, #000 10%,
                            rgba(0, 0, 0, .5) 22%, transparent 46%);
        mask-image: linear-gradient(to top, #000 0%, #000 10%,
                    rgba(0, 0, 0, .5) 22%, transparent 46%);
    }
}


/* ═══════════ فرم «ارسال پیام» صفحه تماس — دسکتاپ ═══════════ */
/* `.fieldBox input` عرض `calc(50% - 10px)` می‌گیرد و قالب فقط
   `[type=text]` را تمام‌عرض کرده بود؛ کادر ایمیل و تلفن نصفه می‌ماندند.
   حالا همه کادرها هم‌اندازه‌اند. */
.contactForm .fieldBox input,
.contactForm .fieldBox input[type=email],
.contactForm .fieldBox input[type=tel],
.contactForm .fieldBox textarea {
    width: 100%;
    box-sizing: border-box;
}


/* ═══════════ «تجربه همراهان زرین زمان» — صفحه درباره ما ═══════════ */
/* این بخش در قالب طراح نبود و با کلاس‌های صفحه محصول ساخته شده بود؛
   product.css روی صفحه درباره ما بارگذاری نمی‌شود، پس هیچ استایلی
   نمی‌گرفت. اینجا با همان زبان بصری بقیه صفحه بازنویسی شده: کارت سفید،
   سایه ملایم و تاکید قرمز — مثل `.valuesItem` و `.content`. */
.testimonialBox {
    width: 100%;
    padding: 0 140px 110px;
    box-sizing: border-box;
}

.testimonialBox h2.titr {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    padding: 24px 0;
    margin: 0 0 32px;
    border-bottom: 2px solid var(--red);
}

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

.testimonialItem {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 4px 4px 19.8px 0px #00000014;
    box-sizing: border-box;
}

.testimonialItem .itemHeader {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* تصویر مشتری؛ اگر نداشته باشد، حرف اول نامش داخل دایره می‌نشیند */
.testimonialItem .writerAvatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray);
    color: var(--red);
    font-size: 18px;
    font-weight: 900;
}

.testimonialItem .writerAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonialItem .writerInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.testimonialItem .writerName {
    font-size: 16px;
    font-weight: bold;
}

.testimonialItem .writerRole {
    font-size: 12px;
    opacity: .6;
}

.testimonialItem .scoreIcons {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

/* آیکون‌های قالب پیش‌فرض سفیدند و روی کارت سفید دیده نمی‌شدند */
.testimonialItem .scoreIcons i.icon {
    background-color: var(--red);
    width: 16px;
    height: 16px;
    -webkit-mask-size: 14px;
    mask-size: 14px;
}

/* خط قرمز کنار نقل‌قول، همان الگوی `.noteBox p` در قالب */
.testimonialItem .itemMain {
    margin: 0;
    padding-right: 12px;
    border-right: 2px solid var(--red);
    flex: 1;
}

.testimonialItem .itemMain p {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    text-align: justify;
}

@media screen and (max-width: 1100px) {
    .testimonialBox { padding: 0 48px 80px; }
}

@media screen and (max-width: 767px) {
    .testimonialBox { padding: 0 32px 56px; }

    .testimonialGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .testimonialItem { padding: 20px 16px; }
    .testimonialItem .writerAvatar { width: 40px; height: 40px; font-size: 16px; }
    .testimonialItem .writerName { font-size: 14px; }
    /* در ستون باریک، justify فاصله‌های بدریخت بین کلمه‌ها می‌سازد */
    .testimonialItem .itemMain p {
        font-size: 13px;
        line-height: 1.95;
        text-align: start;
    }
}


/* ═══════════ گالری صفحه محصول — چیدمان ═══════════ */
.productCarousel2 .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .productCarousel2 .swiper-slide {
        padding: 24px;
    }
}


/* ═══════════ «مقایسه/اصالت کالا» در عرض تبلت ═══════════ */
/* قاعدهٔ موبایل فقط تا ۷۶۷ است و بالاتر از آن چیدمان دسکتاپ با
   `min-width: 70%` روی هر کارت فعال می‌شود؛ در ۷۶۸ پیکسل همین باعث
   می‌شد ردیف از عرض صفحه بزند بیرون و کل صفحه اسکرول افقی بگیرد. */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .kalaBox .kalaContent {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32px 32px;
        gap: 16px;
    }

    .kalaContent .kalaItem {
        min-width: 0;
        flex: 1 1 0;
    }
}


/* ═══════════ دکمه‌های چپ و راست بنر اصلی ═══════════ */
/* حالت عادی تقریباً نامرئی است تا روی تصویر سنگینی نکند؛ با هاور، شیشهٔ
   مات (glassmorphism) پشت آیکون می‌نشیند. `backdrop-filter` روی سافاری
   پیشوند webkit می‌خواهد. */
.landingSlider .landingNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--white);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background-color: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease, backdrop-filter .25s ease,
                -webkit-backdrop-filter .25s ease, transform .25s ease;
}

.landingSlider .landingNext { left: 46px; }
.landingSlider .landingPrev { right: 46px; }

/* ستون نقطه‌ها هم سمت راست است؛ دکمهٔ «قبلی» کنارش می‌نشیند و نباید
   رویش بیفتد، برای همین کمی داخل‌تر آمده. */
.landingSlider .landingPrev { right: 92px; }

.landingSlider .landingNav svg {
    width: 24px;
    height: 24px;
    display: block;
}

.landingSlider .landingNav:hover,
.landingSlider .landingNav:focus-visible {
    background-color: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .22),
                inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: translateY(-50%) scale(1.06);
}

.landingSlider .landingNav:active {
    transform: translateY(-50%) scale(.97);
}

/* روی دستگاه لمسی هاوری در کار نیست، پس همان شیشهٔ مات حالت عادی
   می‌شود تا دکمه روی تصویرهای روشن هم دیده و لمس شود. */
@media (hover: none) {
    .landingSlider .landingNav {
        background-color: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .45);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        backdrop-filter: blur(12px) saturate(140%);
        box-shadow: 0 6px 24px rgba(0, 0, 0, .18),
                    inset 0 1px 0 rgba(255, 255, 255, .3);
    }
}

/* وقتی حلقه خاموش باشد و به ابتدا/انتها برسیم */
.landingSlider .landingNav.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .landingSlider .landingNav {
        width: 42px;
        height: 42px;
    }

    .landingSlider .landingNav svg { width: 20px; height: 20px; }
    .landingSlider .landingNext { left: 16px; }
    .landingSlider .landingPrev { right: 16px; }

    /* در عرض موبایل، ستون عمودی نقطه‌ها دقیقاً زیر دکمهٔ «قبلی» می‌افتاد.
       حالا که اسلاید افقی شده، نقطه‌ها هم افقی و کف بنر می‌نشینند. */
    .landingSlider .swiper-pagination.landingPagination {
        right: 0;
        left: 0;
        top: auto;
        bottom: 24px;
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
}


/* ═══════════ هاور هدر در صفحه‌های با بنر تیره ═══════════ */
/* در صفحه اصلی (و فروشگاه و برند) هدر روی بنر شفاف است و فقط بعد از
   اسکرول سفید می‌شود. حالا با هاور هم همان حالت سفید می‌آید، بدون اینکه
   لازم باشد کاربر اسکرول کند.

   فقط رنگ پس‌زمینه کافی نیست: پیش از اسکرول، لوگو و متن منو و آیکون‌ها
   سفیدند و روی زمینهٔ سفید ناپدید می‌شوند. برای همین همان‌جابه‌جایی‌هایی
   که `stickyHeader` انجام می‌دهد اینجا هم تکرار شده — لوگوی تیره جای
   لوگوی سفید و متن و آیکون مشکی. */
header:not(.stickyHeader):not(.lightHeader):hover .headerBox {
    background-color: var(--white);
    box-shadow: 0 4px 25px 0 #00000026;
}

header:not(.stickyHeader):not(.lightHeader):hover .headerRight .logo .mainLogo {
    display: none;
}

header:not(.stickyHeader):not(.lightHeader):hover .headerRight .logo .stickyLogo {
    display: block;
}

header:not(.stickyHeader):not(.lightHeader):hover .mainMenu ul li a,
header:not(.stickyHeader):not(.lightHeader):hover .headerRightMenu li a {
    color: var(--black);
}

header:not(.stickyHeader):not(.lightHeader):hover .headerLeft i,
header:not(.stickyHeader):not(.lightHeader):hover .headerRight i {
    background-color: var(--black);
}

/* گذار نرم تا تغییر ناگهانی نباشد */
header .headerBox,
header .mobileHeaderBox {
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* هدر موبایل تا ۱۲۰۰ پیکسل استفاده می‌شود (۷۶۷ از خود قالب و ۷۶۸ تا
   ۱۲۰۰ از لایهٔ تبلت)، پس قاعدهٔ هاورش هم تا همان‌جا ادامه دارد. */
@media screen and (max-width: 1200px) {
    header:not(.stickyHeader):not(.lightHeader):not(.openedHamMenu):hover .mobileHeaderBox {
        background-color: var(--white);
        box-shadow: 0 4px 25px 0 #00000026;
    }

    header:not(.stickyHeader):not(.lightHeader):not(.openedHamMenu):hover i.icon {
        background-color: var(--black);
    }

    header:not(.stickyHeader):not(.lightHeader):not(.openedHamMenu):hover .mHeaderMain .logo .mainLogo {
        display: none;
    }

    header:not(.stickyHeader):not(.lightHeader):not(.openedHamMenu):hover .mHeaderMain .logo .stickyLogo {
        display: block;
    }
}


/* ═══════════ پس‌زمینه بنر اصلی ═══════════ */
/* هیچ‌کدام از پنج اسلاید مشکل بارگذاری ندارند؛ سفیدیِ لحظه‌ای از اینجا
   می‌آمد که قابِ اسلایدر پس‌زمینه نداشت. Swiper در حالت loop اسلایدها را
   جابه‌جا می‌کند و در همان یک فریم، پس‌زمینه سفیدِ خودِ صفحه از زیرش
   دیده می‌شد. با زمینهٔ تیره، بدترین حالت یک فریم مشکی است که با خود
   بنر هم‌رنگ است. */
.landingSliderBox,
.landingSlider,
.landingSlider .swiper-wrapper,
.landingSlider .sliderItem {
    background-color: var(--black);
}



/* ═══════════ «ساعت خود را بفروشید» در عرض تبلت ═══════════ */
/* `.ctaContent` عرض ۵۵٪ دارد ولی پدینگ ۱۴۰ پیکسلی دو طرفش `box-sizing`
   ندارد، پس در ۷۶۸ پیکسل مجموع از عرض بخش می‌زند بیرون و اسلایدر کنارش
   ۷ پیکسل از صفحه بیرون می‌افتد. */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    .ctaSection .ctaContent {
        box-sizing: border-box;
        padding: 56px 48px;
    }

    .ctaSection .ctaSlider {
        min-width: 0;
    }
}


/* ═══════════ بخش‌های چندلایه صفحه اصلی در عرض تبلت ═══════════ */
/* «منتخب زرین زمان»، «سرمایه‌ای…» و کارت وبلاگ چیدمان لایه‌لایه‌ای دارند
   که با درصد و مارجین منفی ساخته شده و فقط در عرض دسکتاپ جور درمی‌آید.
   طراح برای موبایل همه‌شان را به چیدمان ستونی ساده تبدیل کرده بود، ولی
   آن قواعد تا ۷۶۷ پیکسل بیشتر نمی‌آیند؛ بین ۷۶۸ تا ۱۲۰۰ دوباره نسخه
   دسکتاپ فعال می‌شود و لایه‌ها روی هم می‌افتند: متن از کادر بیرون می‌زند،
   دکمه‌ها زیر نوشته می‌روند و عکس از کادر مشکی بیرون می‌ماند.

   این بلوک همان راه‌حل خود قالب را به تبلت تعمیم می‌دهد. هیچ رنگ، فونت
   یا عنصر تازه‌ای اضافه نشده. */
@media screen and (min-width: 768px) and (max-width: 1200px) {

    /* ── منتخب زرین زمان ─────────────────────────────────────────
       ظاهر دسکتاپ عیناً حفظ می‌شود (متن کنار عکس، نوار مشکی پشت عکس)؛
       فقط فاصله‌های درصدی و پدینگ‌های ۱۴۰/۲۰۰ پیکسلی که برای صفحهٔ پهن
       حساب شده بودند کوچک می‌شوند تا در عرض تبلت جا بیفتد. */
    .zarinSelected .selectedContent {
        max-width: 46%;
        padding-top: 72px;
        padding-left: 32px;
        padding-bottom: 32px;
        /* مارجین منفی ۱۳٪ در صفحهٔ پهن فقط کمی اسلایدر را بالا می‌کشد،
           ولی در عرض تبلت حدود ۱۲۵ پیکسل است و نوار مشکی را روی متن
           توضیح می‌آورد. */
        margin-bottom: 0;
    }

    .selectedContent h2 { font-size: 24px; margin-bottom: 20px; }
    .selectedContent p  { font-size: 15px; }

    .selectedSlider .sliderItem {
        gap: 32px;
        padding: 0 32px;
    }

    .selectedSlider .sliderItem .itemContent h3 { font-size: 18px; }
    .selectedSlider .sliderItem .itemContent span { font-size: 15px; }

    /* نوار مشکی دقیقاً پشت قاب عکس می‌نشیند (نه بالاتر و نه پایین‌تر)
       و مشخصات هم داخلش می‌ماند، چون مارجین منفیِ درصدیِ دسکتاپ که متن
       را پایین‌تر می‌کشید اینجا صفر می‌شود. */
    .zarinSelected .selectedSlider::before {
        top: 0;
        height: 320px;
    }

    .selectedSlider .sliderItem .itemContent {
        margin-bottom: 0;
    }

    /* شمارنده روی فلش‌ها می‌افتاد؛ به لبه منتقل می‌شود */
    #slider-counter {
        left: 24px;
    }

    /* ── سرمایه‌ای که هر روز همراه شماست ─────────────────────────
       باز هم چیدمان دسکتاپ: متن سمت راست، اسلایدر سمت چپ، همان
       پس‌زمینه. فقط پدینگ ۱۴۰ پیکسلی و فونت‌ها کوچک می‌شوند. */
    .capitalSection {
        padding: 56px 32px;
        min-height: 0;
    }

    .capitalContent h2 { font-size: 24px; margin-bottom: 20px; }
    .capitalContent p  { font-size: 15px; }

    .capitalSlider .sliderItem { gap: 16px; }

    .capitalSlider .sliderItem .itemContent h3 { font-size: 14px; }
    .capitalSlider .sliderItem .itemContent span { font-size: 12px; }

    /* نقطه‌ها در طراحی دسکتاپ با `left: -90px` بیرون از اسلایدر و در یک
       ستون عمودی‌اند. در عرض تبلت جای بیرونی نمی‌ماند: یا از صفحه می‌زنند
       بیرون (و کل صفحه اسکرول افقی می‌گیرد) یا روی مشخصات محصول می‌افتند.
       پس به یک ردیف افقیِ زیر اسلایدر منتقل می‌شوند — همان خط‌تیره‌های
       خودِ قالب، فقط در جهت دیگر. */
    .capitalSlider .owl-dots {
        position: static;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    /* ── مقایسه و اصالت کالا: دو کارت هم‌قد ─────────────────────── */
    .kalaBox .kalaContent {
        align-items: stretch;
    }

    .kalaContent .kalaItem {
        display: flex;
        flex-direction: column;
    }

    /* متن کش می‌آید تا دکمه هر دو کارت در یک خط بنشیند */
    .kalaContent .kalaItem p { flex: 1; }

    .kalaContent .kalaItem .btn {
        align-self: stretch;
        text-align: center;
    }

    /* ── کارت وبلاگ ─────────────────────────────────────────────── */
    /* ردیف کارت‌ها ارتفاع ثابت داشت و با `overflow: auto` می‌آمد؛ وقتی
       کارت ستونی می‌شود (عکس بالا، متن پایین) قدش دو برابر می‌شود و متن
       زیر لبهٔ ردیف می‌افتد — یعنی عنوان و خلاصه اصلاً دیده نمی‌شدند و
       فقط یک اسکرول‌بار کنار کادر می‌ماند. */
    /* ارتفاع ثابت در کل زنجیره (blogMain → tab → tabContents → کارت)
       برای چیدمان افقی تنظیم شده بود؛ همه آزاد می‌شوند. */
    .blogBox .blogMain,
    .blogMain .tab,
    .blogMain .tabContents,
    .tabContents .tabContent,
    .tabContent .blogCart {
        height: auto;
        min-height: 0;
    }

    .tabContents .tabContent {
        overflow: visible;
        padding: 0 48px 10px;
        gap: 16px;
    }

    /* انتخاب‌گرها عمداً با `body.homePage .blogBox` نوشته شده‌اند تا از
       قاعدهٔ `height: 216px` همین فایل (که برای چیدمان افقی است)
       خاص‌تر باشند، وگرنه کارت کوتاه می‌ماند و متن بیرون می‌افتد. */
    body.homePage .blogBox .blogCart {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    body.homePage .tabContents .tabContent .blogCart {
        flex: 1 1 0;
        min-width: 0;
    }

    body.homePage .blogBox .blogCart .blogImg,
    body.homePage .blogBox .blogCart .blogContent {
        width: 100%;
    }

    body.homePage .blogBox .blogCart .blogImg {
        height: 180px;
        min-height: 0;
        flex: none;
    }

    body.homePage .blogBox .blogCart .blogImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* ═══════════ زیرمنوی برندها در منوی موبایل ═══════════ */
/* عنوان هر رده (High Luxury / Luxury) یک آیتم غیرقابل‌کلیک است که
   فهرست زیرش را از هم جدا می‌کند. */
.hamMenu [parent] .childGroupTitle {
    font-size: 12px;
    letter-spacing: .08em;
    opacity: .55;
    margin-top: 8px;
    pointer-events: none;
}

.hamMenu [parent] .childGroupTitle:first-child { margin-top: 0; }

.hamMenu [parent] ul {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}