/* ============================================================
   Narmpa — Single Product  v5  (طبق دیزاین، بدون sidebar)
   ============================================================ */

/* ── Container ── */
.dm-sp-wrap {
    direction: rtl;
    background: var(--dm-paper, #fff);
}

/*
 * ⚠ عرض عمداً از همان توکنی می‌آید که هدر و آرشیو از آن تغذیه می‌کنند.
 * پیش‌تر این‌جا ۱۳۰۰ پیکسلِ هارد-کد بود در حالی که ظرفِ هدر ۱۵۰۰ است ⇒ در
 * صفحهٔ تک‌محصول، لوگو و سبد خرید حدود ۱۰۰ پیکسل بیرون‌تر از محتوای صفحه
 * می‌نشستند و ستونِ صفحه نسبت به هدر تورفته دیده می‌شد.
 */
.dm-sp-container {
    max-width: var(--dm-container);
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* Breadcrumb */
.dm-sp-breadcrumb {
    background: var(--dm-paper, #fff);
    border-bottom: 1px solid var(--dm-line, #f0f0f0);
    padding: 10px 0;
}

.dm-sp-breadcrumb .dm-sp-container {
    padding-bottom: 0;
}

.dm-sp-breadcrumb .woocommerce-breadcrumb,
.dm-sp-breadcrumb .dm-breadcrumb {
    margin: 0;
    font-size: 12px;
    color: var(--dm-ink-3, #ccc);
}

.dm-sp-breadcrumb a {
    color: var(--dm-ink-3, #ccc);
    text-decoration: none;
    transition: color .15s;
}

.dm-sp-breadcrumb a:hover {
    color: var(--dm-primary, #B43F3F);
}


/* ════════════════════════════════════════════
   MAIN: گالری (راست RTL) + اطلاعات (چپ RTL)
   ════════════════════════════════════════════ */
.dm-sp-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: start;
    padding-top: 28px;
    margin-bottom: 48px;
}

.dm-sp-form {
    display: contents;
}


/* ════════════════════════════════════════════
   گالری
   ════════════════════════════════════════════ */
.dm-sp-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* تصویر اصلی */
.dm-sp-img-main-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 10;
    border-radius: 20px;
    background: var(--dm-paper-2, #f7f7f7);
    cursor: zoom-in;
}

/*
 * overflow:hidden قبلاً روی خودِ dm-sp-img-main-wrap بود؛ چون dm-sp-social-strip (و tooltipِ
 * اشتراک‌گذاری داخلش) هم فرزندِ همین wrap است، هر چیزی که از این باکس بیرون می‌زد (مثلِ
 * tooltipِ سمتِ چپ) کلاً کلیپ و نامرئی می‌شد. حالا کلیپ فقط رویِ یک لفافِ داخلیِ مخصوصِ خودِ
 * عکس (dm-sp-img-clip) است تا زوم روی هاور از گوشه‌های گردِ عکس بیرون نزند، ولی
 * tooltip/استریپ که بیرون از این لفافند دیگر کلیپ نمی‌شوند.
 */
.dm-sp-img-clip {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

/* ⚠ در موبایل تصویرِ اصلی معمولاً تمامِ عرضِ صفحه را می‌گیرد و به لبه‌ها می‌چسبد؛
   گردیِ گوشه در آن حالت فقط دو مثلثِ سفیدِ بی‌دلیل کنارِ بالای عکس می‌سازد. */
@media (max-width: 768px) {
    .dm-sp-img-clip {
        border-radius: 0;
    }
}

.dm-sp-img-main {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    /*padding: 16px;*/
    transition: transform .4s ease;
}

.dm-sp-img-main-wrap:hover .dm-sp-img-main {
    transform: scale(1.04);
}

/* دکمه زوم */
.dm-sp-zoom-btn {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    background: var(--dm-glass, rgba(255, 255, 255, .9));
    border: 1px solid var(--dm-line, #e0e0e0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dm-ink-3, #999);
    transition: border-color .18s, color .18s;
    backdrop-filter: blur(4px);
}

.dm-sp-zoom-btn:hover {
    border-color: var(--dm-primary, #B43F3F);
    color: var(--dm-primary, #B43F3F);
}

/* سوشیال استریپ — گوشه راست‌بالای عکس (کامنتِ قدیمی هم همین را می‌گفت، ولی کدش چپ بود؛ رفع شد) */
.dm-sp-social-strip {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}

/* بجِ تخفیف — اولین آیتمِ استریپ، دقیقاً هم‌ابعادِ بقیه (۳۶×۳۶) ولی رنگی به‌جای سفیدِ نیمه‌شفاف */
.dm-sp-disc-badge-strip {
    background: var(--dm-primary, #B43F3F) !important;
    border-color: var(--dm-primary, #B43F3F) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    cursor: default !important;
}
.dm-sp-disc-badge-strip:hover {
    background: var(--dm-primary, #B43F3F) !important;
    border-color: var(--dm-primary, #B43F3F) !important;
    color: #fff !important;
}

.dm-sp-social-btn {
    width: 36px;
    height: 36px;
    background: var(--dm-glass, rgba(255, 255, 255, .92));
    border: 1px solid var(--dm-line, #ececec);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dm-ink-3, #bbb);
    transition: border-color .18s, color .18s;
    backdrop-filter: blur(4px);
}

.dm-sp-social-btn:hover {
    border-color: var(--dm-primary, #B43F3F);
    color: var(--dm-primary, #B43F3F);
}

/* دکمه‌ی «خبرم کن» (خروجیِ افزونه) در نوارِ اجتماعیِ روی تصویر، هم‌شکلِ .dm-sp-social-btn:
   گِرد، فقط آیکون (متن/لودر پنهان). چون خودِ دکمه‌ی افزونه است، اتصالِ AJAX و مودال حفظ می‌شود. */
.dm-sp-social-waitlist .dm-amazing-waitlist-wrapper { margin: 0; }
.dm-sp-social-waitlist .dm-amazing-waitlist-btn {
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    background: var(--dm-glass, rgba(255, 255, 255, .92));
    border: 1px solid var(--dm-line, #ececec);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dm-ink-3, #bbb);
    transition: border-color .18s, color .18s;
    backdrop-filter: blur(4px);
    box-shadow: none;
}
.dm-sp-social-waitlist .dm-amazing-waitlist-btn:hover {
    border-color: var(--dm-primary, #B43F3F);
    color: var(--dm-primary, #B43F3F);
}
.dm-sp-social-waitlist .dm-amazing-waitlist-btn.active {
    color: var(--dm-primary, #B43F3F);
    border-color: var(--dm-primary, #B43F3F);
}
.dm-sp-social-waitlist .dm-amz-text { display: none !important; }
.dm-sp-social-waitlist .dm-amz-icon { display: inline-flex; }
.dm-sp-social-waitlist .dm-amz-icon svg { width: 18px; height: 18px; }

/* دو آیکونِ افزونه‌ی dm-product-engagement (علاقه‌مندی/موجودشدن)، همان سبکِ آیکونِ گردِ بالا.
   ریشه‌ی هرکدام (.dm-wishlist-btn / .dm-waitlist-btn) خروجیِ خودِ افزونه است — کلاس/دیتا-اتریبیوت
   دست‌نخورده می‌ماند تا کلیکِ تفویضی‌اش (eng-script.js) کار کند. */
.dm-sp-social-wishlist .dm-wishlist-btn,
.dm-sp-social-instock .dm-waitlist-btn {
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: var(--dm-glass, rgba(255, 255, 255, .92));
    border: 1px solid var(--dm-line, #ececec);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dm-ink-3, #bbb);
    transition: border-color .18s, color .18s;
    backdrop-filter: blur(4px);
    box-shadow: none;
}
.dm-sp-social-wishlist .dm-wishlist-btn:hover,
.dm-sp-social-instock .dm-waitlist-btn:hover {
    border-color: var(--dm-primary, #B43F3F);
    color: var(--dm-primary, #B43F3F);
}
.dm-sp-social-wishlist .dm-wishlist-btn.active,
.dm-sp-social-instock .dm-waitlist-btn.active {
    color: var(--dm-primary, #B43F3F);
    border-color: var(--dm-primary, #B43F3F);
}
.dm-sp-social-wishlist .dm-wishlist-btn .dm-icon,
.dm-sp-social-instock .dm-waitlist-btn .dm-icon {
    display: inline-flex;
}
/* ⚠ margin صفر لازم است: افزونه روی `.dm-icon svg` مقدار `margin-top: 6px` دارد
   و داخلِ دکمهٔ مربعیِ ۳۶ پیکسلی، آیکون را از مرکز پایین می‌کشد. */
.dm-sp-social-wishlist .dm-wishlist-btn .dm-icon svg,
.dm-sp-social-instock .dm-waitlist-btn .dm-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    margin: 0;
}
/* متنِ کنارِ آیکونِ علاقه‌مندی (اگر قالب/افزونه کلاسِ d-none را برای پنهان‌کردنش نشناسد) */
.dm-sp-social-wishlist .dm-text { display: none !important; }

/* فلش‌های اسکرولِ ریلِ بندانگشتی فقط در موبایل (ظاهرشان در بلوکِ ۷۶۸) */
.dm-sp-thumbs-arrow { display: none; }

/* تامبنیل‌ها */
.dm-sp-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-sp-thumb {
    width: 68px;
    height: 68px;
    border: 1.5px solid var(--dm-line, #eee);
    border-radius: 12px;
    padding: 4px;
    background: var(--dm-paper-2, #f7f7f7);
    cursor: pointer;
    transition: border-color .15s;
    flex-shrink: 0;
    overflow: hidden;
}

.dm-sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.dm-sp-thumb.is-active,
.dm-sp-thumb:hover {
    border-color: var(--dm-primary, #B43F3F);
}


/* ════════════════════════════════════════════
   ستون اطلاعات
   ════════════════════════════════════════════ */
.dm-sp-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
    position: relative;
}

.dm-sp-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--dm-ink-1, #1a1a1a);
    line-height: 1.55;
    margin: 0;
}

/* متا */
.dm-sp-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--dm-ink-3, #aaa);
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dm-sp-meta-sep {
    color: var(--dm-line, #ddd);
}

.dm-sp-meta-link {
    color: var(--dm-primary, #B43F3F);
    text-decoration: none;
    font-weight: 600;
}

.dm-sp-meta-link:hover {
    text-decoration: underline;
}

/* بج اصالت */
.dm-sp-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
}

.dm-sp-badge-auth {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #edf7f2;
    color: #16a34a;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

/*
 * بجِ «ویژهٔ سطح» (dm-amazing-offers) — هم‌ردیفِ «کالای اصل»، نه زیرِ آن.
 * ⚠ کلاسِ پایه‌ی `.vip-badge-label` در شیوه‌نامهٔ افزونه position:absolute است
 * (برای باکسِ بجِ خودش)؛ این‌جا چون کنارِ بجِ دیگری در یک ردیفِ flex می‌نشیند،
 * static می‌شود. رنگ/فونت دست‌نخورده از تنظیماتِ per-tier همان افزونه می‌آید.
 */
.dm-sp-badge-row .dm-amazing-vip-badge--single {
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 6px;
}

/* section label */
.dm-sp-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-sp-section-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--dm-ink-1, #2a2a2a);
    display: flex;
    align-items: center;
    gap: 7px;
}

.dm-sp-section-label::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--dm-primary, #B43F3F);
    border-radius: 2px;
    display: inline-block;
}

/* متغیرها */
.dm-sp-variations {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-sp-attr-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-sp-attr-header {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dm-sp-attr-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--dm-ink-1, #2a2a2a);
}

.dm-sp-attr-current {
    font-size: 13px;
    color: var(--dm-primary, #B43F3F);
    font-weight: 700;
}

/* قبلاً سلکتِ استانداردِ ووکامرس بی‌قید پنهان می‌شد (به امیدِ ساخته‌شدنِ سواچ توسط افزونه‌ی
   dm-product-variations). اگر آن افزونه سواچ نسازد، کاربر هیچ گزینه‌ای برای انتخابِ متغیر
   نمی‌دید و محصول عملاً غیرقابل‌خرید می‌شد. حالا سلکت فقط وقتی پنهان می‌شود که واقعاً یک
   .dm-sp-swatches ساخته شده باشد؛ وگرنه خودِ سلکت به‌عنوان fallbackِ کاربردی نمایش داده می‌شود. */
.dm-sp-attr-block:has(.dm-sp-swatches) select,
.dm-sp-variations:has(.dm-sp-swatches) select {
    display: none !important;
}

/* استایلِ منوی کشوی متغیرها هماهنگ با تمِ سایت (وقتی سواچ ساخته نشده و سلکت خودش UIِ اصلی است):
   گِرد، بوردردار، با فلشِ سفارشی سمتِ چپ (RTL) و حالتِ hover/focus برندی. */
.dm-sp-variations select,
.dm-sp-attr-block select {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--dm-ink-1, #2a2a2a);
    background-color: var(--dm-paper, #fff);
    border: 1.5px solid #e6e6e6;
    border-radius: 12px;
    cursor: pointer;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 16px;
    transition: border-color .18s, box-shadow .18s;
}
.dm-sp-variations select:hover,
.dm-sp-attr-block select:hover {
    border-color: var(--dm-primary, #B43F3F);
}
.dm-sp-variations select:focus,
.dm-sp-attr-block select:focus {
    outline: none;
    border-color: var(--dm-primary, #B43F3F);
    box-shadow: 0 0 0 3px rgba(180, 63, 63, .12);
}

.reset_variations {
    font-size: 12px;
    color: var(--dm-ink-3, #bbb);
    text-decoration: none;
}

/* Swatches */
.dm-sp-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-swatch-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 1.5px #ddd;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}

.dm-swatch-circle:hover {
    box-shadow: 0 0 0 2px var(--dm-primary, #B43F3F);
    transform: scale(1.1);
}

.dm-swatch-circle.is-active {
    box-shadow: 0 0 0 2.5px var(--dm-primary, #B43F3F);
}

.dm-swatch-text {
    padding: 7px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--dm-line, #e8e8e8);
    background: var(--dm-paper, #fff);
    font-size: 13px;
    font-weight: 600;
    color: var(--dm-ink-2, #555);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
}

.dm-swatch-text:hover {
    border-color: var(--dm-primary, #B43F3F);
    color: var(--dm-primary, #B43F3F);
}

.dm-swatch-text.is-active {
    border-color: var(--dm-primary, #B43F3F);
    background: var(--dm-primary-tint, #fdf2f2);
    color: var(--dm-primary, #B43F3F);
    font-weight: 700;
}

/* گارانتی */
.dm-sp-warranty-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-sp-warranty-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid var(--dm-line, #e8e8e8);
    border-radius: 9px;
    background: var(--dm-paper, #fff);
    font-size: 13px;
    font-weight: 700;
    color: var(--dm-ink-2, #444);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-family: inherit;
}

.dm-sp-warranty-btn svg {
    color: var(--dm-primary, #B43F3F);
}

.dm-sp-warranty-btn.is-active {
    border-color: var(--dm-primary, #B43F3F);
    background: var(--dm-primary-tint, #fdf2f2);
}

/* قیمت */
.dm-sp-price-box {
    border-radius: 14px;
}

/*
 * ⚠ چیدمانِ عمداً ستونی: ردیفِ بالا (بجِ تخفیف + قیمتِ اصلیِ خط‌خورده) کوچک و
 * کم‌رنگ، درست بالای قیمتِ نهایی می‌نشیند — مثلِ تقریباً هر فروشگاهِ دیگری.
 * پیش‌تر همین دو با flex-direction:row کنارِ هم بودند و چون اندازه‌هایشان
 * خیلی متفاوت است (۱۳px در برابرِ ۳۴px)، هم‌ترازیِ عمودی‌شان هیچ‌وقت درست از آب
 * در نمی‌آمد.
 */
.dm-sp-price-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.dm-sp-price-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-sp-disc-badge {
    background: var(--dm-primary, #B43F3F);
    color: #fff;
    font-size: 12.5px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 7px;
    line-height: 1.7;
}

/*
 * ⚠ محصولِ حراجی باید از یک نگاه از محصولِ بی‌تخفیف جدا شود. قیمتِ نهایی روی
 * حالتِ حراج درشت‌تر و ضخیم‌تر است و کمی فاصلهٔ بالا می‌گیرد تا از ردیفِ
 * خط‌خورده جدا خوانده شود. عددِ داخلِ bdi هم جدا بزرگ می‌شود، چون خروجیِ
 * wc_price بسته به تنظیماتِ ارز گاهی داخلِ bdi می‌آید و گاهی نه.
 */
.dm-sp-price-inner.is-sale .dm-sp-cur-price {
    font-size: 22px;
    font-weight: 800;
    margin-top: 2px;
    letter-spacing: -0.2px;
}

.dm-sp-price-inner.is-sale .dm-sp-cur-price bdi {
    font-size: 28px;
}

/*
 * ⚠ ردیفِ قیمتِ خودِ ووکامرس زیرِ انتخابگرِ واریانت پنهان می‌شود: از وقتی جعبهٔ
 * بالای صفحه با انتخابِ گزینه به‌روز می‌شود، آن ردیف همان عدد را دوباره و با
 * ظاهری متفاوت نشان می‌داد. بدونِ جاوااسکریپت هم چیزی از دست نمی‌رود، چون آن
 * ردیف اصلاً فقط با رویدادِ جاوااسکریپتیِ ووکامرس پر می‌شود.
 */
.dm-sp-wrap .woocommerce-variation.single_variation .woocommerce-variation-price {
    display: none;
}

/*
 * ⚠ خطِ خط‌خوردگی عمداً از رنگِ خودِ متن جدا شده (text-decoration-color) و
 * کمرنگ‌تر است. با یک رنگِ واحد، روی زمینه‌های مختلف خط پررنگ و پرت به‌نظر
 * می‌رسید؛ حالا خودِ عدد قابلِ‌خواندن می‌ماند ولی خط رویش سبک‌تر است.
 */
.dm-sp-old-price {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dm-ink-3, #999);
    text-decoration: line-through;
    text-decoration-color: var(--dm-line, #d8d8d8);
    text-decoration-thickness: 1px;
}

.dm-sp-old-price bdi {
    color: var(--dm-ink-3, #999);
}

.dm-sp-old-price .woocommerce-Price-currencySymbol {
    font-size: inherit;
}

/*
 * ⚠ اندازه هم روی خودِ ظرف و هم روی bdi ست می‌شود: خروجیِ wc_price() بسته به
 * تنظیماتِ ارز/زبان گاهی متن را در <bdi> می‌پیچد و گاهی نه؛ با تعریفِ هر دو،
 * قیمت مستقل از آن جزئیات همیشه درشت دیده می‌شود.
 */
.dm-sp-cur-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--dm-primary);
    direction: rtl;
}

.dm-sp-cur-price bdi {
    font-size: 26px;
}

.dm-sp-cur-price .woocommerce-Price-currencySymbol {
    font-size: 13px;
    font-weight: 600;
    color: var(--dm-ink-2, #666);
}

.dm-sp-select-hint {
    font-size: 12px;
    color: var(--dm-ink-3, #ccc);
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

/* بازهٔ قیمت محصول متغیر (قبل از انتخاب) */
.dm-sp-price-range {
    font-size: 22px;
    font-weight: 900;
    color: var(--dm-ink-1, #1a1a1a);
    direction: rtl;
}

/*
 * ⚠⚠ چرا بازهٔ قیمت زیرِ هم می‌افتاد، و چرا قانونِ پایین‌تر جلویش را نمی‌گرفت:
 * ظرفِ مشترکِ .dm-sp-price-inner فلکسِ ستونی است (عمدی، برای محصولِ ساده که
 * ردیفِ تخفیف بالای قیمت می‌نشیند). در حالتِ بازه، ووکامرس دو مبلغ و یک خطِ
 * تیره را به‌صورتِ فرزندانِ *مستقیمِ* همان ظرف چاپ می‌کند — هیچ لفافی به نامِ
 * .price وجود ندارد. پس قانونِ `.dm-sp-price-range .price{...}` که برای همین
 * نوشته شده بود به هیچ عنصری نمی‌خورد و هر سه فرزند، هرکدام یک ردیفِ فلکس
 * می‌شدند. راهِ درست، خودِ ظرف است وقتی کلاسِ بازه را دارد.
 */
.dm-sp-price-inner.dm-sp-price-range {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 20px;
    line-height: 1.5;
}

.dm-sp-price-inner.dm-sp-price-range > .woocommerce-Price-amount {
    white-space: nowrap;
}

/*
 * ⚠ اندازه باید روی خودِ bdi نوشته شود نه فقط روی ظرف: پایین‌ترِ همین فایل
 * قانونِ `.dm-sp-price-range bdi{font-size:22px}` مستقیم روی همین عنصر می‌نشیند
 * و هر اندازه‌ای که از ظرف ارث می‌رسید را کنار می‌زند. سه کلاسه است تا ببرد.
 */
.dm-sp-price-inner.dm-sp-price-range > .woocommerce-Price-amount bdi {
    font-size: 20px;
}

/*
 * واحدِ پول یک‌بار در انتهای بازه کافی است. تکرارش روی هر دو عدد، ردیف را
 * بی‌دلیل بلند می‌کند و خواندنِ خودِ بازه را سخت‌تر. اولی پنهانِ بصری می‌شود و
 * نه حذف — متنِ صفحه‌خوان همچنان کاملِ هر دو مبلغ را دارد.
 */
.dm-sp-price-inner.dm-sp-price-range > .woocommerce-Price-amount:first-of-type .woocommerce-Price-currencySymbol {
    display: none;
}

.dm-sp-price-inner.dm-sp-price-range > span[aria-hidden="true"]:not(.woocommerce-Price-amount) {
    font-size: 16px;
    font-weight: 600;
    color: var(--dm-ink-3, #999);
    padding-inline: 2px;
}

@media (max-width: 480px) {
    .dm-sp-price-inner.dm-sp-price-range { gap: 4px; }
    .dm-sp-price-inner.dm-sp-price-range > .woocommerce-Price-amount bdi { font-size: 17px; }
}

/* رنجِ قیمتِ متغیر در یک ردیف (قبلاً چند خط می‌شکست). این فقط راهنمای پیش از انتخاب است؛
   قیمتِ دقیق پس از انتخابِ گزینه در .single_variation نمایش داده می‌شود. */
.dm-sp-price-range .price {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 18px;
}
.dm-sp-price-range .price .woocommerce-Price-amount { white-space: nowrap; }

.dm-sp-price-range bdi {
    font-size: 22px;
}
.dm-sp-price-range .price bdi { font-size: 18px; }

.dm-sp-price-range .woocommerce-Price-currencySymbol {
    font-size: 13px;
    font-weight: 500;
    color: var(--dm-ink-2, #666);
}

/*
 * ⚠ محصولِ متغیر هم همان باگِ محصولِ ساده را می‌تواند بگیرد، در یک حالتِ خاص:
 * وقتی همهٔ تنوع‌ها هم قیمتِ اصلیِ یکسان دارند و هم قیمتِ حراجیِ یکسان، ووکامرس
 * دیگر «بازه» برنمی‌گرداند — همان ساختارِ del/ins تکیِ محصولِ ساده را می‌دهد.
 * بدونِ این سه قانون، `.dm-sp-price-range bdi{font-size:22px}` (بالاتر) روی
 * بدیِ داخلِ همان del هم می‌نشست، چون قانونی که مستقیم روی خودِ عنصر می‌نشیند
 * از هر مقداری که آن عنصر می‌خواست ارث ببرد برنده‌تر است — یعنی قیمتِ قدیم و
 * قیمتِ جدید یک‌اندازه دیده می‌شدند، فقط یکی خط خورده. سنجیده شد: قبل از این
 * قانون، delBdiFontSize=22px بود، دقیقاً هم‌اندازهٔ insFontSize.
 */
.dm-sp-price-range del,
.dm-sp-price-range del bdi {
    font-size: 15px;
    font-weight: 700;
    color: var(--dm-ink-2, #6b6b76);
}

/*
 * ⚠ خطِ خوردگی صریح رنگ و ضخامت می‌گیرد. رنگِ قبلی (--dm-line، رنگِ کادرها)
 * تقریباً نامرئی بود و کنارِ متنِ خاکستریِ روشن، «قیمتِ قبلی» اصلاً خوانده نمی‌شد.
 */
.dm-sp-price-range del {
    text-decoration: line-through;
    text-decoration-color: var(--dm-ink-2, #6b6b76);
    text-decoration-thickness: 1.5px;
    margin-left: 6px;
}

.dm-sp-price-range del .woocommerce-Price-currencySymbol {
    font-size: inherit;
    color: inherit;
}

/*
 * فال‌بکِ ستونِ خلاصهٔ محصول برایِ .woocommerce-Price-amount.amount: چون بعدِ انتخابِ یک
 * تنوع، ووکامرس خودش (نه قالب) HTMLِ قیمت را با AJAX جایگزین می‌کند و کلاس‌هایِ اختصاصیِ
 * ما (dm-sp-price-range و مشابه) روی آن مارک‌آپِ تازه دیگر اعمال نمی‌شدند، پس استایلِ
 * پیش‌فرضِ ریزِ ووکامرس دیده می‌شد. این رول‌ها بدونِ وابستگی به کلاسِ اختصاصی، رویِ خودِ
 * کلاسِ استانداردِ ووکامرس اعمال می‌شوند تا هم قبل و هم بعدِ انتخابِ تنوع یک‌دست بمانند.
 *
 * ⚠ اصلاحِ ۱۴۰۴/۰۶/۱۶ — این سه قاعده تا امروز هیچ دامنه‌ای نداشتند و روی «هر مبلغی در کلِ
 * صفحه» می‌نشستند، نه فقط قیمتِ خودِ محصول. اندازه‌گیری‌شده روی ریگ: مبلغِ داخلِ کارت‌های
 * محصولاتِ مرتبط/مکمل روی همین صفحه ۲۲ پیکسل می‌شد در حالی که همان کارت در آرشیو ۱۴ است
 * (کارت‌ها را از هم می‌ریخت)، و قیمتِ داخلِ سبدِ کشویی روی صفحهٔ محصول ۲۲ و در فروشگاه ۱۳
 * بود. حالا به ستونِ خلاصهٔ محصول محدود شده — همان جایی که ووکامرس مارک‌آپِ تازه را
 * تزریق می‌کند — پس فال‌بک کارِ خودش را می‌کند بی‌آنکه به بقیهٔ صفحه سرریز کند.
 */
/* ⚠ کارت‌های افزونهٔ «بسته‌بندی ویژه» (.dm-scm-pf) داخلِ همین ستون‌اند و اندازهٔ قیمتِ خودشان را دارند؛ این فال‌بک نباید رویشان بنشیند */
.dm-sp-info .woocommerce-Price-amount.amount:not(.dm-scm-pf *) {
    font-size: 22px;
    text-decoration: none;
    font-weight: 900;
    color: var(--dm-ink-1, #1a1a1a);
}
.dm-sp-info del .woocommerce-Price-amount.amount:not(.dm-scm-pf *) {
    font-size: 13px;
    font-weight: 500;
    color: var(--dm-ink-2, #666);
}

.dm-sp-info .woocommerce-Price-amount.amount:not(.dm-scm-pf *) .woocommerce-Price-currencySymbol {
    font-size: 13px;
    font-weight: 500;
    color: var(--dm-ink-2, #666);
}

/* موجود/ناموجود‌بودنِ محصول (پیام‌هایِ استانداردِ ووکامرس) با رنگِ برندِ قالب */
.stock.in-stock {
    color: var(--dm-primary, #B43F3F);
}

/* WC variation */
.woocommerce-variation.single_variation {
    direction: rtl;
}

/* قیمتِ تخفیف‌خوردهٔ تنوعِ انتخاب‌شده: خطِ زیرِ ins حذف (ووکامرس پیش‌فرض underline می‌گذارد) */
.woocommerce-variation ins {
    text-decoration: none !important;
}

/* دقیقاً هم‌شکلِ .dm-sp-price-range .price (بالاتر) — قبل از انتخاب یک گزینه، رنجِ قیمت به همین
   اندازه/چیدمان دیده می‌شود؛ اگر این‌جا سایز/ساختارِ متفاوتی داشت، با انتخابِ گزینه صفحه یک‌هو
   می‌پرید (تغییرِ فونت‌سایز و از‌بین‌رفتنِ چیدمانِ ردیفی). */
.woocommerce-variation.single_variation .woocommerce-variation-price .price {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 900;
    color: var(--dm-ink-1, #1a1a1a);
}
.woocommerce-variation.single_variation .woocommerce-variation-price .price bdi {
    font-size: 18px;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .price ins {
    text-decoration: none;
    color: var(--dm-primary, #B43F3F);
}
/*
 * ⚠ همان تله‌ای که در .dm-sp-price-range بود، این‌جا هم هست — و این‌بار حالتِ
 * نادر نیست، حالتِ عادیِ روزمره است: هر بار کاربر یک تنوعِ حراجی را انتخاب کند،
 * ووکامرس دقیقاً همین del/ins را برمی‌گرداند (wc_format_sale_price در خودِ
 * هستهٔ ووکامرس). قانونِ بالاتر (`.price bdi{font-size:18px}`) روی بدیِ داخلِ
 * del هم می‌نشیند و قیمتِ قدیم را هم‌اندازهٔ قیمتِ جدید نشان می‌دهد — دقیقاً
 * همان «یکی ریزه یکی درشت، خط رویش کج» که در قیمتِ محصولِ سادهٔ حراجی دیده شد.
 */
.woocommerce-variation.single_variation .woocommerce-variation-price .price del,
.woocommerce-variation.single_variation .woocommerce-variation-price .price del bdi {
    font-size: 15px;
    color: var(--dm-ink-2, #6b6b76);
    font-weight: 700;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .price del {
    text-decoration: line-through;
    text-decoration-color: var(--dm-ink-2, #6b6b76);
    text-decoration-thickness: 1.5px;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .price .woocommerce-Price-currencySymbol {
    font-size: 13px;
    font-weight: 500;
    color: var(--dm-ink-2, #666);
}
.woocommerce-variation.single_variation .woocommerce-variation-price .price del .woocommerce-Price-currencySymbol {
    font-size: inherit;
    color: inherit;
}

.woocommerce-variation.single_variation .woocommerce-variation-availability {
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
}

/* دکمه‌های خرید */
.single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-sp-buy-btns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.dm-sp-buy-btns--single {
    grid-template-columns: 1fr;
}

/* حالت ناموجود: جای ناحیهٔ خرید را می‌گیرد. کلاس‌ها تازه‌اند و قاعدهٔ موجودی را
   بازنویسی نمی‌کنند؛ خودِ دکمهٔ خبرم‌کن همان استایل .dm-sp-buy-btns را می‌گیرد. */
.dm-sp-oos {
    display: grid;
    gap: 12px;
    margin-block: 4px 8px;
}

.dm-sp-oos-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--dm-line, #eee1e1);
    border-radius: 12px;
    background: var(--dm-paper-2, #fdf6f6);
    color: var(--dm-ink-2, #8a6a6a);
    font-size: 0.9rem;
    line-height: 1.7;
}

.dm-sp-oos-msg svg {
    flex: 0 0 auto;
    color: var(--dm-primary, #B43F3F);
}

.dm-sp-oos-action {
    margin: 0;
}

.dm-btn-primary {
    width: 100%;
}

.dm-btn-primary {
    padding: 14px 12px;
    background: var(--dm-primary, #B43F3F);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .2s;
    font-family: inherit;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
}

.dm-btn-primary:hover {
    opacity: .88;
    color: #fff;
}

/*
 * حالتِ غیرفعال. کلاس‌های disabled / wc-variation-selection-needed /
 * wc-variation-is-unavailable را خودِ اسکریپتِ واریانت‌های ووکامرس روی دکمه
 * می‌گذارد و استایلشان در woocommerce.css است — که این قالب لودش نمی‌کند. بدونِ
 * این قاعده، دکمه روی واریانتِ ناموجود کاملاً سالم و کلیک‌پذیر به‌نظر می‌رسید.
 */
.dm-btn-primary.dm-btn-disabled,
.dm-btn-primary.disabled,
.dm-btn-primary.wc-variation-selection-needed,
.dm-btn-primary.wc-variation-is-unavailable,
.dm-btn-primary:disabled {
    background: var(--dm-paper-2, #e0e0e0);
    color: var(--dm-ink-3, #bbb);
    cursor: not-allowed;
    pointer-events: none;
}

.dm-sp-var-oos-msg {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #b3261e;
    text-align: start;
}

.dm-btn-secondary {
    padding: 14px 12px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .2s;
    font-family: inherit;
}

.dm-btn-secondary:hover {
    opacity: .88;
}

/* خدمات */
.dm-sp-services {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--dm-line, #f0f0f0);
    border-bottom: 1px solid var(--dm-line, #f0f0f0);
    gap: 6px;
}

.dm-sp-svc-item {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    gap: 12px;
    flex: 1;
    text-align: start;
    font-size: 10px;
    color: var(--dm-ink-2, #666);
    font-weight: 600;
    line-height: 1.4;
}

.dm-sp-svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-sp-svc-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: var(--dm-primary) !important;
}


/* ════════════════════════════════════════════
   تب‌ها: توضیحات / مشخصات / نظرات
   ════════════════════════════════════════════ */

.dm-sp-tabs-section {
    margin-bottom: 48px;
}

.dm-sp-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--dm-line, #f0f0f0);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dm-sp-tab-nav::-webkit-scrollbar {
    display: none;
}

.dm-sp-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dm-ink-3, #aaa);
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}

.dm-sp-tab-link:hover {
    color: var(--dm-ink-2, #555);
}

.dm-sp-tab-link.is-active {
    color: var(--dm-ink-1, #1a1a1a);
    border-bottom-color: var(--dm-primary, #B43F3F);
}

.dm-sp-tab-count {
    background: var(--dm-primary, #B43F3F);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
}

.dm-sp-tab-panel {
    display: none;
}

.dm-sp-tab-panel.is-active {
    display: block;
}

.dm-sp-short-desc {
    font-size: 14px;
    color: var(--dm-ink-2, #555);
    line-height: 2;
    margin-bottom: 16px;
}

.dm-sp-full-desc {
    font-size: 13.5px;
    color: var(--dm-ink-2, #444);
    line-height: 2;
}

.dm-sp-full-desc p {
    margin: 0 0 12px;
}

/* مشخصات */
.dm-sp-specs-tbl {
    width: 100%;
    border-collapse: collapse;
}

.dm-sp-specs-tbl tr {
    border-bottom: 1px solid var(--dm-line, #f4f4f4);
}

.dm-sp-specs-tbl tr:nth-child(even) {
    background: var(--dm-paper-2, #fafafa);
}

.dm-spec-extra {
    display: none;
}

.dm-sp-specs-tbl tr.dm-spec-extra.is-visible {
    display: table-row;
}

.dm-sp-specs-tbl th {
    text-align: right;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dm-ink-3, #bbb);
    width: 28%;
    white-space: nowrap;
}

.dm-sp-specs-tbl td {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dm-ink-1, #222);
}

.dm-sp-more-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--dm-primary, #B43F3F);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 0;
    justify-content: center;
}

.dm-sp-more-link:hover {
    opacity: .8;
}

/* نظرات خالی */
.dm-sp-reviews-empty {
    padding: 32px 0;
}

.dm-sp-reviews-empty-text h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--dm-ink-1, #1a1a1a);
    margin: 0 0 8px;
}

.dm-sp-reviews-empty-text p {
    font-size: 13px;
    color: var(--dm-ink-3, #999);
    line-height: 1.75;
    margin: 0 0 16px;
}

.dm-btn-review {
    display: inline-flex;
    padding: 10px 22px;
    background: var(--dm-primary, #B43F3F);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s;
}

.dm-btn-review:hover {
    opacity: .88;
    color: #fff;
}

/* فرم نظر */
.dm-sp-tab-panel .comment-form {
    direction: rtl;
    /*max-width: 680px;*/
}

.dm-sp-tab-panel .comment-form input,
.dm-sp-tab-panel .comment-form textarea {
    border: 1.5px solid var(--dm-line, #e8e8e8);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    direction: rtl;
    transition: border-color .18s;
    outline: none;
}

.dm-sp-tab-panel .comment-form input:focus,
.dm-sp-tab-panel .comment-form textarea:focus {
    border-color: var(--dm-primary, #B43F3F);
}

.dm-sp-tab-panel .comment-form .submit input {
    background: var(--dm-primary, #B43F3F);
    color: #fff;
    border: none;
    padding: 11px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    transition: opacity .2s;
}

.dm-sp-tab-panel .comment-form .submit input:hover {
    opacity: .88;
}


/* ════════════════════════════════════════════
   بلوک‌های پایین: related / sale
   ════════════════════════════════════════════ */
.dm-sp-block {
    margin-bottom: 48px;
}

/* آخرین بلوکِ صفحه تا فوتر فقط ۱۶px فاصله دارد (قبلاً ۴۸ + ۳۶ پدینگِ اسلایدر + ۷۶ پدینگِ صفحه) */
.dm-sp-block:last-child {
    margin-bottom: 16px;
}

.dm-sp-block:last-child .dm-sp-products-slider {
    padding-bottom: 8px;
}

.dm-sp-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--dm-line, #f0f0f0);
}

.dm-sp-block-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--dm-ink-1, #1a1a1a);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dm-sp-block-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--dm-primary, #B43F3F);
    border-radius: 2px;
    display: inline-block;
}

.dm-sp-view-all {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dm-primary, #B43F3F);
    text-decoration: none;
    opacity: .85;
    transition: opacity .2s;
}

.dm-sp-view-all:hover {
    opacity: 1;
}

.dm-sp-products-slider {
    overflow: hidden;
    padding: 4px 0 36px;
}

/* ⚠ فاصلهٔ کارت‌ها (spaceBetween:12) را جاوااسکریپتِ Swiper به‌صورت margin
   اینلاین روی هر اسلاید می‌گذارد؛ اگر آن اسکریپت هر دلیلی لود/اجرا نشود
   (خطای JS زودتر در صفحه، کش قدیمیِ باندل)، اسلایدها بدون هیچ فاصله‌ای به‌هم
   می‌چسبند و هیچ CSS ای این حالت را نمی‌پوشاند. این فالبک، مستقل از جاوااسکریپت،
   همان فاصله را تضمین می‌کند؛ وقتی Swiper خودش margin اینلاین می‌گذارد این قانون
   بی‌اثر می‌ماند (اینلاین همیشه برنده است)، پس تکراری/متناقض نیست. */
.dm-sp-products-slider .swiper-slide {
    margin-inline-end: 12px;
}

.dm-sp-products-slider .swiper-button-next,
.dm-sp-products-slider .swiper-button-prev {
    color: var(--dm-primary, #B43F3F);
}


/* ════════════════════════════════════════════
   Share Tooltip
   ════════════════════════════════════════════ */
.dm-sp-share-wrap {
    position: relative;
}

.dm-sp-share-tooltip {
    position: absolute;
    right: 44px;
    top: -6px;
    background: var(--dm-paper, #fff);
    border: 1px solid var(--dm-line, #ececec);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .18s, visibility .18s, transform .18s;
    pointer-events: none;
}

/*
 * ⚠ پلِ نامرئی بینِ دکمه و منو.
 * منو با right:44px کنارِ دکمه می‌نشیند و چند پیکسل فضای خالی بینشان می‌ماند.
 * آن فاصله نه رویِ دکمه است نه رویِ منو، پس به‌محضِ رد شدنِ نشانگر از آن،
 * hover روی .dm-sp-share-wrap از دست می‌رود و منو بسته می‌شود — دقیقاً همان
 * «می‌پرد و نمی‌شود روی آیتم‌ها رفت». این شبه‌عنصر همان نوار را پر می‌کند تا
 * نشانگر هیچ‌وقت از ناحیهٔ hover بیرون نرود. بدونِ ظاهر، فقط سطحِ اشاره.
 */
.dm-sp-share-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /*
     * ⚠ left نه right، و فیزیکی نه منطقی. جایگاهِ خودِ منو با right:44px فیزیکی
     * ثابت شده و همیشه سمتِ چپِ دکمه می‌نشیند، پس پل هم همیشه باید روی لبهٔ
     * راستِ منو باشد. یک بار با right:100% نوشته شد و پل دقیقاً سمتِ مخالف رفت:
     * right:100% یعنی «لبهٔ راستِ من روی لبهٔ چپِ ظرف» — سنجیده شد، فاصله همچنان
     * باز بود. left:100% لبهٔ چپِ پل را روی لبهٔ راستِ منو می‌گذارد.
     */
    left: 100%;
    width: 16px;
}

.dm-sp-share-wrap:hover .dm-sp-share-tooltip,
.dm-sp-share-wrap:focus-within .dm-sp-share-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.dm-sp-share-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dm-ink-1, #333);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .13s;
    white-space: nowrap;
    width: 100%;
    text-align: right;
    direction: rtl;
}

.dm-sp-share-item:hover {
    background: var(--dm-paper-2, #f5f5f5);
}

/*
 * ⚠ آیکن‌های تلگرام و واتساپ مسیرِ توپر (path) بدونِ صفتِ fill هستند؛ پس رنگِ پیش‌فرضِ SVG یعنی سیاه
 * می‌گرفتند و `color` رویشان اثری نداشت (در دارک مود تیره و گم، در روشن هم سیاه). fill:currentColor آن‌ها را
 * به رنگِ هر آیتم وصل می‌کند. آیکنِ کپی خطی است (fill="none" در خودِ SVG) و عمداً شاملِ این قاعده نیست.
 * هر سه یک اندازه (۱۸px) تا ردیف یک‌دست باشد.
 */
.dm-sp-share-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.dm-sp-share-item:nth-child(1) svg,
.dm-sp-share-item:nth-child(2) svg {
    fill: currentColor;
}

.dm-sp-share-item:nth-child(1) svg {
    color: #0088cc;
}

.dm-sp-share-item:nth-child(2) svg {
    color: #25d366;
}

.dm-sp-share-item:nth-child(3) svg {
    color: var(--dm-primary, #B43F3F);
}


/* ════════════════════════════════════════════
   WooCommerce overrides
   ════════════════════════════════════════════ */
.dm-sp-wrap .woocommerce-breadcrumb {
    margin: 0;
}

.dm-sp-wrap .quantity {
    display: none !important;
}

/* ── دکمهٔ «موجود شد خبرم کن» ──────────────────────────────────────────────
 *
 * وقتی محصول یا واریانتِ انتخاب‌شده ناموجود است، این تنها اقدامِ ممکنِ خریدار
 * است — یعنی در آن لحظه دکمهٔ اصلیِ صفحه است و باید مثل دکمهٔ اصلی دیده شود.
 * پیش‌تر یک متنِ خاکستریِ ۶۶۶ با چیدمانِ align-items:start بود که اصلاً شکلِ
 * دکمه نداشت.
 *
 * ⚠ سلکتور عمداً دو حالت را با هم می‌گیرد: شورت‌کدِ افزونه گاهی «پوشش + دکمهٔ
 * درونی» می‌دهد و گاهی خودِ عنصر همان دکمه است و هیچ a/button درونی ندارد.
 * قواعدِ قبلی فقط حالتِ اول را می‌گرفتند و در حالتِ دوم دکمه کاملاً بی‌استایل
 * می‌ماند.
 */
.dm-sp-var-waitlist,
.dm-sp-oos-action,
.dm-sp-buy-btns [class*="dm-waitlist"],
.dm-sp-buy-btns [class*="waitlist"] {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 9px;
    cursor: pointer;
    box-sizing: border-box;
}

/*
 * ⚠ اصلاحِ ریشه‌ای: شورت‌کدِ [dm_waitlist_btn] یک <div class="dm-waitlist-btn
 * btn btn-primary"> برمی‌گرداند — یک DIV، نه a و نه button. سلکتورهای پایین
 * قبلاً فقط a/button را می‌گرفتند، پس هیچ‌وقت روی این عنصر نمی‌نشستند؛ خودِ دکمه
 * — چه wrapper بی‌واسطه باشد، چه یک .dm-waitlist-btn داخلش، چه یک a/button */
.dm-sp-var-waitlist.dm-waitlist-btn,
.dm-sp-var-waitlist > .dm-waitlist-btn,
.dm-sp-var-waitlist > a,
.dm-sp-var-waitlist > button,
.dm-sp-buy-btns [class*="waitlist"] > .dm-waitlist-btn,
.dm-sp-buy-btns [class*="waitlist"] > a,
.dm-sp-buy-btns [class*="waitlist"] > button,
a.dm-sp-var-waitlist,
button.dm-sp-var-waitlist {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 15px 16px !important;
    background: var(--dm-primary, #B43F3F) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px var(--dm-primary-20, rgba(180, 63, 63, .18)) !important;
    font-family: inherit;
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}

.dm-sp-var-waitlist.dm-waitlist-btn:hover,
.dm-sp-var-waitlist > .dm-waitlist-btn:hover,
.dm-sp-var-waitlist > a:hover,
.dm-sp-var-waitlist > button:hover,
.dm-sp-buy-btns [class*="waitlist"] > .dm-waitlist-btn:hover,
.dm-sp-buy-btns [class*="waitlist"] > a:hover,
.dm-sp-buy-btns [class*="waitlist"] > button:hover,
a.dm-sp-var-waitlist:hover,
button.dm-sp-var-waitlist:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.dm-sp-var-waitlist svg,
.dm-sp-oos-action svg,
.dm-sp-buy-btns [class*="waitlist"] svg {
    flex-shrink: 0;
}

/* ── دکمهٔ «موجود شد خبرم کن» در حالت ناموجود ──────────────────────────────
   همان بیماری: شورت‌کد این‌جا هم یک div برمی‌گرداند، نه a/button. سلکتور هر سه
   حالت را می‌گیرد.

   ⚠ important عمدی است: استایل‌شیت افزونه ممکن است بعد از این فایل بارگذاری شود
   و در آن صورت با تساوی وزن، حرفِ آخر را افزونه می‌زند. این همان استثنای پذیرفته‌شدهٔ
   بازنویسیِ استایلِ شخص ثالث است، نه میان‌بُر برای مشکلِ وزن سلکتورِ خودمان. */
.dm-sp-oos-action.dm-waitlist-btn,
.dm-sp-oos-action > .dm-waitlist-btn,
.dm-sp-oos-action a,
.dm-sp-oos-action button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 15px 16px !important;
    /* هم‌رنگ با نسخهٔ واریانتیِ همین دکمه: در هر دو حالت این «اقدامِ اصلی» صفحه است */
    background: var(--dm-primary, #B43F3F) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px var(--dm-primary-20, rgba(180, 63, 63, .18)) !important;
    font-family: inherit;
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}

.dm-sp-oos-action.dm-waitlist-btn:hover,
.dm-sp-oos-action > .dm-waitlist-btn:hover,
.dm-sp-oos-action a:hover,
.dm-sp-oos-action button:hover {
    opacity: .9;
    transform: translateY(-1px);
}

/*
 * ⚠ این قانون قبلاً هر <div>/<span> فرزندِ مستقیمِ .dm-sp-oos-action را خنثی
 * می‌کرد («فقط یک جعبهٔ چیدمان است»). مشکل این بود که خودِ .dm-waitlist-btn هم
 * یک div است و دقیقاً همین قانون padding/background/border را رویش صفر
 * می‌کرد — یعنی این خط داشت دکمه‌ای را که چند خط بالاتر ساختیم دوباره به متنِ
 * ساده برمی‌گرداند. حالا صراحتاً از .dm-waitlist-btn مستثنی است.
 */
.dm-sp-oos-action > div:not(.dm-waitlist-btn),
.dm-sp-oos-action > span:not(.dm-waitlist-btn) {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.dm-sp-oos-action svg {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px !important;
}


/* ════════════════════════════════════════════
   Responsive — 1200px
   ════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .dm-sp-main {
        grid-template-columns: 380px 1fr;
        gap: 36px;
    }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
    .dm-sp-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .dm-sp-container {
        padding: 0 0 10px;
    }

    .dm-sp-main {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 0;
        margin-bottom: 28px;
    }

    /* گالری full-width */
    .dm-sp-img-main-wrap {
        border-radius: 0;
        background: var(--dm-paper-2, #f5f5f5);
    }

    .dm-sp-thumbs {
        padding: 12px 16px 0;
    }

    /* اطلاعات با padding */
    .dm-sp-info {
        padding: 16px 16px 0;
        gap: 16px;
    }

    .dm-sp-title {
        font-size: 18px;
    }

    /* سوشیال استریپ عمودی در موبایل */
    .dm-sp-social-strip {
        right: 8px;
        top: 8px;
    }

    /* سرویس‌ها */
    .dm-sp-services {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .dm-sp-svc-item {
        min-width: calc(33.33% - 8px);
        font-size: 10.5px;
    }

    /* تب‌ها */
    .dm-sp-tabs-section {
        padding: 0 16px;
    }

    .dm-sp-tab-link {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* بلوک‌های پایین */
    .dm-sp-block {
        padding: 0 16px;
    }

    /*
     * 1.73.16 — صفحهٔ محصول در موبایل مثل دیجی‌کالا: تصویر کوچک‌تر تا عنوان، قیمت و مشخصات زیرش
     * در همان صفحهٔ اول دیده شوند. قبلاً قابِ ۹:۱۰ تمام‌عرض بود (≈۴۱۶px روی ۳۷۵) و بقیهٔ صفحه را
     * پایین می‌انداخت. حالا ارتفاع = ۶۲٪ عرض، بین ۲۱۰ و ۲۸۰px؛ و تصویر contain است تا محصول کامل،
     * بدونِ برش، در قاب بنشیند. بندانگشتی‌ها یک ردیفِ افقیِ قابل‌اسکرولِ ۵۲px‌اند.
     * وزنِ دو کلاسه تا بر قاعده‌های دیگرِ ۷۶۸ در این فایل غالب شود.
     */
    /*
     * 1.73.17 — گالری عمودی: تصویر شاخص و کنارش (سمتِ چپ در RTL) ریلِ بندانگشتیِ عمودیِ قابل‌اسکرول،
     * هم‌قدِ تصویر (۲۶۰px). بدونِ گالری فقط تصویر هست و تمام‌عرض می‌شود. تصویرِ مربع با cover پر می‌شود
     * (≈۱۵٪ برش با ریل، ≈۳۰٪ بدونِ ریل). ریل overscroll-behavior:contain دارد تا انتهایش اسکرولِ صفحه
     * را نگیرد/رها نکند و فقط داخلِ خودش اسکرول شود.
     */
    .dm-sp-gallery {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px 0;
    }

    .dm-sp-gallery .dm-sp-img-main-wrap {
        flex: 1 1 auto;
        min-width: 0;
        aspect-ratio: auto;
        height: 260px;
        border-radius: 12px;
    }

    .dm-sp-gallery .dm-sp-img-clip {
        border-radius: 12px;
    }

    .dm-sp-gallery .dm-sp-img-main {
        object-fit: cover;
    }

    /*
     * 1.74.5 — کاروسل‌های پایینِ صفحهٔ محصول (مرتبط / مکمل / تخفیف‌ها) در موبایل: کارتِ جمع‌وجور و تک‌خطی.
     * فلش‌های Swiper روی کارتِ اول می‌افتادند و در لمس لازم نیستند (سوایپ)؛ پنهان. عنوان یک‌خط با سه‌نقطه،
     * قیمت و دکمه nowrap تا هیچ‌چیز دوخطی نشود. کارت‌ها هم‌قد می‌مانند (height:100% در loops.css).
     */
    .dm-sp-block .dm-sp-products-slider { padding: 4px 12px 8px; }

    /*
     * دو کارت در هر نما + فلشِ چپ/راست که اسلاید می‌کند. فلش‌ها دایرهٔ سفیدِ کوچکِ سایه‌دار روی لبهٔ تصویرِ
     * کارت‌اند (همیشه دیده می‌شوند، نه روی عکس گم). عمودیِ فلش: وسطِ تصویرِ کارت. کارت مربع و
     * عرضش (۱۰۰vw − ۶۶px)/۲ است ⇒ مرکزِ تصویر ≈ W/2 + ۴px از بالای اسلایدر.
     */
    /* ⚠ رنگ‌ها عمداً ثابت‌اند (نه توکنِ تم): توکن‌ها در دارک مود تیره می‌شدند و دایرهٔ تیره با آیکونِ تیره روی
       پس‌زمینهٔ تیره گم می‌شد. دایرهٔ سفید + آیکونِ تیره + حلقه و سایه در هر دو حالت دیده می‌شود. */
    .dm-sp-block .dm-sp-products-slider .swiper-button-next,
    .dm-sp-block .dm-sp-products-slider .swiper-button-prev {
        --swiper-navigation-size: 12px;
        --swiper-navigation-sides-offset: 4px;
        width: 30px;
        height: 30px;
        top: calc((100vw - 66px) / 4 + 4px);
        margin-top: -15px;
        border-radius: 50%;
        background: #ffffff !important;
        color: #1a1a1a !important;
        border: 1px solid rgba(0, 0, 0, .12);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
        z-index: 5;
    }

    .dm-sp-block .dm-sp-products-slider .swiper-button-disabled { opacity: .5; }

    /* کارت هرگز از اسلایدِ خودش بزرگ‌تر نمی‌شود: محتوای nowrap (قیمت بلند) کارت را از عرضِ اسلاید بیرون
       می‌زد و روی اسلایدِ کناری می‌افتاد؛ min-width:0 و clip این را می‌بندد. */
    .dm-sp-products-slider .swiper-slide { min-width: 0; }
    .dm-sp-products-slider .dm-product-card { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; }
    .dm-sp-products-slider .dm-product-card-link { min-width: 0; }
    .dm-sp-products-slider .dm-product-info { min-width: 0; }
    .dm-sp-products-slider .dm-product-price-wrapper { min-width: 0; overflow: hidden; }

    .dm-sp-products-slider .swiper-button-next::after,
    .dm-sp-products-slider .swiper-button-prev::after { font-weight: 800; }

    .dm-sp-products-slider .dm-product-card { padding: 7px; border-radius: 12px; gap: 3px; }
    /* ارتفاعِ بی‌دلیل کم شد (کارت ۲۹۵ → ≈۲۵۰px): پدینگِ بالای اطلاعات ۱۲→۶، فاصلهٔ عنوان/قیمت ۸→۳، ارتفاعِ رزروشدهٔ
       عنوان (۳۴px، دو خط) به یک خط، و ردیفِ دوقیمتی ۴۰→۳۴ */
    .dm-sp-products-slider .dm-product-info { padding: 6px 4px 2px; gap: 3px; }
    .dm-sp-products-slider .dm-product-title { min-height: 0; height: auto; margin: 0; }
    .dm-sp-products-slider .dm-product-title {
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    /* قیمت زیرِ هم: ردیفِ بالا قیمتِ قبلیِ خط‌خورده (فقط اگر تخفیف دارد)، ردیفِ پایین قیمتِ نهایی (یا «ناموجود»).
       min-height دو ردیف را همیشه رزرو می‌کند تا کارتِ تک‌قیمتی و دوقیمتی و ناموجود هم‌قد بمانند. */
    .dm-sp-products-slider .dm-product-price-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0;
        min-height: 34px;
    }
    .dm-sp-products-slider .dm-product-card .dm-current-price { justify-content: center; }
    .dm-sp-products-slider .dm-product-card .dm-add-to-cart-btn--ghost { visibility: hidden; pointer-events: none; }
    .dm-sp-products-slider .dm-product-card .dm-current-price { font-size: 12.5px; white-space: nowrap; }
    .dm-sp-products-slider .dm-product-card .dm-current-price .woocommerce-Price-currencySymbol { font-size: 9.5px; }
    .dm-sp-products-slider .dm-product-card .dm-old-price { font-size: 10.5px; white-space: nowrap; }
    .dm-sp-products-slider .dm-product-card .dm-unavailable { font-size: 12px; }
    .dm-sp-products-slider .dm-add-to-cart-btn {
        min-height: 0;
        height: 28px;
        padding: 0 6px;
        font-size: 11.5px;
        white-space: nowrap;
        border-radius: 8px;
    }

    /* لفافِ ریل + فلش‌های اسکرول (dm-gold-sp-thumbs.js) */
    .dm-sp-gallery .dm-sp-thumbs-wrap {
        position: relative;
        flex: 0 0 56px;
        width: 56px;
        height: 260px;
    }

    .dm-sp-thumbs-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline: 0;
        height: 28px;
        padding: 0;
        border: 0;
        color: var(--dm-ink-2, #555);
        cursor: pointer;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

    .dm-sp-thumbs-arrow.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .dm-sp-thumbs-arrow--up {
        top: 0;
        background: linear-gradient(to bottom, var(--dm-paper, #fff) 45%, rgba(255, 255, 255, 0));
    }

    .dm-sp-thumbs-arrow--down {
        bottom: 0;
        background: linear-gradient(to top, var(--dm-paper, #fff) 45%, rgba(255, 255, 255, 0));
    }

    /* موجِ ملایم: فلشِ بالا رو به بالا می‌رود، فلشِ پایین رو به پایین می‌آید */
    .dm-sp-thumbs-arrow--down.is-visible svg {
        animation: dm-sp-thumbs-nudge-down 1.6s ease-in-out infinite;
    }

    .dm-sp-thumbs-arrow--up.is-visible svg {
        animation: dm-sp-thumbs-nudge-up 1.6s ease-in-out infinite;
    }

    @keyframes dm-sp-thumbs-nudge-down {
        0%, 100% { transform: translateY(-2px); }
        50% { transform: translateY(2px); }
    }

    @keyframes dm-sp-thumbs-nudge-up {
        0%, 100% { transform: translateY(2px); }
        50% { transform: translateY(-2px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .dm-sp-thumbs-arrow--down.is-visible svg,
        .dm-sp-thumbs-arrow--up.is-visible svg { animation: none; }
    }

    .dm-sp-gallery .dm-sp-thumbs {
        flex: 0 0 56px;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 260px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 6px;
        padding: 0;
        scrollbar-width: none;
    }

    .dm-sp-gallery .dm-sp-thumbs::-webkit-scrollbar {
        display: none;
    }

    .dm-sp-gallery .dm-sp-thumb {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        border-radius: 10px;
        padding: 3px;
    }

    .dm-sp-gallery .dm-sp-thumb img {
        border-radius: 8px;
    }

    .dm-sp-info {
        padding: 12px 16px 0;
        gap: 12px;
    }

    .dm-sp-title {
        font-size: 16px;
        line-height: 1.6;
    }

}

/* ── 480px ── */
@media (max-width: 480px) {
    .dm-sp-main {
        grid-template-columns: 1fr;
    }

    .dm-sp-services {
        gap: 10px;
    }

    .dm-sp-svc-item {
        min-width: calc(50% - 8px);
    }
}

/* ════════════════════════════════════════════
   نوار خرید استیکی موبایل
   ════════════════════════════════════════════ */
.dm-sp-sticky-bar {
    display: none;
}

@media (max-width: 768px) {
    .dm-sp-sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--dm-z-action-bar, 1150);
        background: var(--dm-paper, #fff);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
        border-radius: 16px 16px 0 0;
    }

    .dm-sp-sticky-btn {
        flex: 1;
        background: var(--dm-primary, #B43F3F);
        color: #fff;
        border: none;
        border-radius: 11px;
        padding: 13px;
        font-size: 14px;
        font-weight: 800;
        font-family: inherit;
        cursor: pointer;
        transition: opacity .2s;
    }

    .dm-sp-sticky-btn:active {
        opacity: .85;
    }

    .dm-sp-sticky-price {
        flex-shrink: 0;
        text-align: left;
    }

    .dm-sp-sticky-amount {
        font-size: 15px;
        font-weight: 900;
        color: var(--dm-ink-1, #1a1a1a);
    }

    .dm-sp-sticky-amount .woocommerce-Price-currencySymbol {
        font-size: 11px;
        font-weight: 500;
        color: var(--dm-ink-2, #777);
    }

    .dm-sp-sticky-amount del {
        display: none;
    }

    /* فضای پایین برای نوار استیکی */
    /* ⚠ ۷۶px فضای خالی بینِ آخرین سکشن و فوتر بود؛ حالا کم است و فضای نوارِ چسبان به انتهای فوتر منتقل شد
       (body.single-product .dmh-footer__bottom در footer.css)، تا نوار آخرین خطِ فوتر را نپوشاند. */
    .dm-sp-wrap {
        padding-bottom: 12px;
    }

    /* چون نوار خرید استیکی در موبایل هست، دکمهٔ افزودن به سبد داخل صفحه تکراری است */
    .dm-sp-buy-btns--single {
        display: none !important;
    }
}

/* وقتی کشوی سبد خرید باز است، نوار استیکی نباید روی دکمه‌های «سبد/تسویه» بیفتد */
body:has(#js-mini-cart-panel.is-open) .dm-sp-sticky-bar {
    display: none !important;
}


/*///==================================///*/
/*NEW CODES*/
/*///========================================///*/

/* وضعیت موجودی */
.dm-sp-wrap .dm-sp-stock-status {
    font-size: 13px;
    font-weight: 700;
}

.dm-sp-wrap .dm-stock-in {
    color: var(--dm-primary, #B43F3F);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dm-sp-wrap .dm-stock-out {
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dm-sp-wrap .dm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

/* مشخصات سریع */
.dm-sp-wrap .dm-sp-quick-specs {
    border-top: 1px solid var(--dm-line, #f0f0f0);
    padding-top: 20px;
    margin-bottom: 25px;
}

.dm-sp-wrap .dm-sp-qspec-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.dm-sp-wrap .dm-sp-qspec-key {
    color: var(--dm-ink-3, #888888);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dm-sp-wrap .dm-sp-qspec-val {
    color: #222222;
    font-weight: 700;
    width: 50%;
}

.dm-sp-wrap .dm-sp-qspec-extra {
    color: var(--dm-primary);
}

/* آکاردئون جزئیات قیمت */
.dm-sp-wrap .dm-sp-price-details {
    background-color: var(--dm-paper-2, #fafafa);
    border: 1px solid var(--dm-line, #f0f0f0);
    border-radius: 12px;
    margin-bottom: 25px;
}

.dm-sp-wrap .dm-sp-price-details summary {
    list-style: none;
    cursor: pointer;
    padding: 15px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-sp-wrap .dm-sp-price-details summary::-webkit-details-marker {
    display: none;
}

.dm-sp-wrap .dm-sp-price-details .dm-sp-pd-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dm-sp-wrap .dm-sp-pd-content {
    padding: 4px 15px 14px;
    border-top: 1px dashed var(--dm-line, #e0e0e0);
    margin-top: 5px;
}

/*
 * ⚠ ساختارِ ردیف عمداً گرید است نه فلکسِ space-between: با فلکس، طولِ متفاوتِ
 * برچسب‌ها ستونِ مبلغ را جابه‌جا می‌کند و اعداد پلکانی می‌شوند — همان «شلوغی»
 * که گزارش شد. گرید ستونِ مبلغ را روی یک خطِ ثابت قفل می‌کند.
 */
.dm-sp-wrap .dm-sp-pd-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.9;
    padding: 7px 0;
    color: var(--dm-ink-2, #5f6470);
    border-bottom: 1px dashed var(--dm-line, #f0f0f0);
}

.dm-sp-wrap .dm-sp-pd-row:last-child {
    border-bottom: 0;
}

.dm-sp-wrap .dm-sp-pd-row .pd-lbl {
    font-weight: 600;
}

.dm-sp-wrap .dm-sp-pd-row .pd-note {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dm-primary);
}

/*
 * ⚠ همهٔ مبلغ‌ها یک اندازه و یک وزن‌اند و با ارقامِ جدولی (tabular-nums) روی هم
 * قرار می‌گیرند. بدونِ این، wc_price برای هر عدد عرضِ رقمِ متفاوتی می‌دهد و
 * ستون دندانه‌دار می‌شود. واحدِ «تومان» هم عمداً ریزتر و کم‌رنگ‌تر است تا خودِ
 * عدد خوانده شود نه واحدی که در همهٔ ردیف‌ها تکرار شده.
 */
.dm-sp-wrap .dm-sp-pd-row .pd-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--dm-ink-1, #222);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.dm-sp-wrap .dm-sp-pd-row .pd-val .woocommerce-Price-currencySymbol {
    font-size: 11px;
    font-weight: 600;
    color: var(--dm-ink-2, #8a8f9a);
    margin-inline-start: 3px;
}

.dm-sp-wrap .dm-sp-pd-row.pd-total {
    font-weight: 800;
    font-size: 13.5px;
    border-top: 1px solid var(--dm-line, #e0e0e0);
    border-bottom: 0;
    padding-top: 12px;
    margin-top: 6px;
}

.dm-sp-wrap .dm-sp-pd-row.pd-total .pd-lbl,
.dm-sp-wrap .dm-sp-pd-row.pd-total .pd-val {
    color: var(--dm-primary);
    font-size: 14px;
    font-weight: 800;
}

/*
 * ⚠⚠ بدونِ این قاعده، فونتِ ۱۳px بالا هرگز روی صفحه اثر نمی‌کرد: wc_price()
 * مبلغ را داخلِ خودِ عنصر (`.woocommerce-Price-amount.amount`) می‌پیچد، و آن
 * کلاس یک فال‌بکِ سراسری در همین فایل دارد (`font-size:22px`) که مستقیماً
 * روی همان عنصر می‌نشیند. اندازهٔ روی `.pd-val` فقط «ارثی» است و ارثی‌بودن
 * هرگز در برابرِ یک قاعدهٔ صریح روی خودِ عنصر برنده نمی‌شود — مهم نیست
 * ویژگیِ آن قاعده چقدر باشد. این‌جا هر دو زیرمجموعهٔ آکاردئون (ردیف‌های
 * ریزِ اجزا و جدولِ «مشخصات طلا»ی افزونه) با یک قاعده پوشش داده می‌شوند.
 */
.dm-sp-pd-content .woocommerce-Price-amount.amount {
    font-size: 13px;
}

.dm-sp-wrap .dm-sp-pd-row.pd-total .woocommerce-Price-amount.amount {
    font-size: 14px;
}

/*
 * جدولِ «مشخصات طلا»ی افزونه که داخلِ همین آکاردئون نشسته: قالبِ خودش را
 * (dm-gold-public.css) به همان شبکهٔ بالا نزدیک می‌کنیم تا دو جدول با دو
 * ریتمِ متفاوت کنارِ هم نیفتند.
 * ⚠ ویژگیِ ۳ کلاسه لازم است: قواعدِ خودِ افزونه تک‌کلاسه‌اند ولی دیرتر لود
 * می‌شوند، و در تساویِ ویژگی برندهٔ ترتیبِ بارگذاری آن‌هاست.
 */
.dm-sp-wrap .dm-sp-pd-content .dm-gold-meta-box {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px dashed var(--dm-line, #e0e0e0);
    background: none;
    box-shadow: none;
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-meta-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--dm-ink-2, #8a8f9a);
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-info-table td {
    padding: 7px 0;
    font-size: 12.5px;
    line-height: 1.9;
    border: 0;
    border-bottom: 1px dashed var(--dm-line, #f0f0f0);
    background: none;
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-info-table tr:last-child td {
    border-bottom: 0;
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-info-table .dm-gold-label {
    font-weight: 600;
    color: var(--dm-ink-2, #5f6470);
    width: auto;
    text-align: start;
}

.dm-sp-wrap .dm-sp-pd-content .dm-gold-info-table .dm-gold-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--dm-ink-1, #222);
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── دکمه و پنجرهٔ «قوانین ارسال رایگان» ───────────────────────────────── */
.dm-sp-wrap .dm-sp-freeship-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    padding: 11px 12px;
    background-color: var(--dm-paper, #ffffff);
    color: var(--dm-primary);
    border: 1px dashed var(--dm-primary);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--main-transition);
}

.dm-sp-wrap .dm-sp-freeship-btn:hover {
    background-color: var(--dm-primary);
    color: #ffffff;
}

/* ⚠ این نُرمالایز لازم است: صفتِ hidden وزنِ کمی دارد و هر قاعده‌ای که display
   بدهد آن را می‌بازد، یعنی پنجره بدون هیچ خطایی باز می‌ماند. */
.dm-sp-modal[hidden] {
    display: none !important;
}

.dm-sp-modal {
    position: fixed;
    inset: 0;
    z-index: var(--dm-z-panel-top, 99999);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dm-sp-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .5);
}

.dm-sp-modal__box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background-color: var(--dm-paper, #ffffff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.dm-sp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dm-line, #f0f0f0);
}

.dm-sp-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--dm-text, #222);
}

.dm-sp-modal__close {
    display: flex;
    padding: 4px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--dm-ink-3, #999);
    cursor: pointer;
}

.dm-sp-modal__close:hover {
    color: var(--dm-primary);
}

.dm-sp-modal__body {
    padding: 18px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 2.1;
    color: var(--dm-text, #333);
}

.dm-sp-modal__body p {
    margin: 0 0 10px;
}

.dm-sp-modal__body ul,
.dm-sp-modal__body ol {
    margin: 0 0 10px;
    padding-inline-start: 20px;
    list-style: disc;
}

.dm-sp-modal__body li {
    margin-bottom: 6px;
}

body.theme-dark .dm-sp-modal__box {
    background-color: var(--dm-bg-soft);
}

body.theme-dark .dm-sp-modal__head {
    border-bottom-color: rgba(255, 255, 255, .08);
}

body.theme-dark .dm-sp-wrap .dm-sp-freeship-btn {
    background-color: var(--dm-bg-soft);
}

/* ویژگی‌های مینی (قاعده‌های دکمهٔ هدیه با حذف خودِ دکمه از تمپلیت پاک شدند) */
.dm-sp-wrap .dm-sp-features-mini {
    display: flex;
    gap: 15px;
    border-top: 1px solid var(--dm-line, #f0f0f0);
    padding-top: 25px;
}

.dm-sp-wrap .dm-sp-fm-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dm-sp-wrap .dm-sp-fm-text {
    display: flex;
    flex-direction: column;
}

.dm-sp-wrap .dm-sp-fm-text strong {
    font-size: 10px;
    color: #333333;
    font-weight: 800;
}

.dm-sp-wrap .dm-sp-fm-text span {
    font-size: 9px;
    color: var(--dm-ink-3, #888888);
}

/* آیکون‌های اعتماد در تب توضیحات */
.dm-sp-wrap .dm-sp-trust-badges {
    display: flex;
    justify-content: space-between;
    background-color: var(--dm-paper-2, #fafafa);
    padding: 30px;
    border-radius: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.dm-sp-wrap .dm-sp-tb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #555555;
    max-width: 120px;
}

/* متای قبل از قیمت (نظرات و کد محصول) */
.dm-sp-wrap .dm-sp-pre-price-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* هدایت محتوا به سمت چپ در ساختار راست‌چین (RTL) */
    gap: 10px;
    margin-bottom: 12px;
}

.dm-sp-wrap .dm-sp-rating-stars {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dm-sp-wrap .dm-sp-stars-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dm-sp-wrap .dm-sp-rating-count {
    font-size: 13px;
    color: #777777;
}

.dm-sp-wrap .dm-sp-sku-wrap {
    font-size: 13px;
    color: var(--dm-ink-3, #888888);
}

.dm-sp-wrap .dm-sp-sku-wrap .sku {
    color: #555555;
    font-weight: 600;
    text-transform: uppercase;
    font-family: Arial, sans-serif; /* برای خوانایی بهتر حروف انگلیسی در کد محصول */
}


/* ردیف دکمه خرید و شمارنده */
.dm-sp-wrap .dm-sp-action-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.dm-sp-wrap .dm-sp-add-to-cart-wrap {
    flex: 1; /* باعث میشه دکمه خرید تمام فضای باقی‌مانده رو پر کنه */
}

.dm-sp-wrap .dm-sp-action-row .dm-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background-color: var(--button-bg,var(--dm-primary)) !important; /* هماهنگ با متغیرهای رنگی شما */
    border-radius: 8px;
    font-size: 15px;
    color: #fff;
    border: none;
    transition: var(--main-transition) !important;
}

.dm-sp-wrap .dm-sp-action-row .dm-btn-primary:hover {
    opacity: 0.9 !important;
}

/*
 * ⚠ important اجباری است، نه سلیقه: قاعدهٔ بالادست background-color را با important
 * می‌نویسد و بدونِ important اینجا، دکمهٔ غیرفعال همچنان رنگِ برند و ظاهرِ سالم
 * می‌گرفت. hover هم خنثی می‌شود تا حالتِ غیرفعال زیرِ موس زنده به‌نظر نرسد.
 */
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-btn-disabled,
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.disabled,
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.wc-variation-selection-needed,
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.wc-variation-is-unavailable,
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary:disabled {
    background-color: #e0e0e0 !important;
    color: var(--dm-ink-3, #bbb);
    cursor: not-allowed;
    pointer-events: none;
}

/* استایل شمارنده محصول */
.dm-sp-wrap .dm-sp-qty-wrap {
    display: flex;
    align-items: center;
    background-color: #fbfbfb;
    border: 1px solid var(--dm-line, #eeeeee);
    border-radius: 8px;
    width: 110px;
    height: 48px;
    overflow: hidden;
}

.dm-sp-wrap .dm-qty-btn {
    background: transparent;
    border: none;
    width: 35px;
    height: 100%;
    font-size: 18px;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--main-transition);
}

.dm-sp-wrap .dm-qty-btn:hover {
    color: var(--button-bg,var(--dm-primary));
    background-color: var(--dm-paper-2, #f0f0f0);
}

.dm-sp-wrap .dm-qty-input {
    width: 40px;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    -moz-appearance: textfield;
    outline: none;
    font-family: inherit;
}

.dm-sp-wrap .dm-qty-input::-webkit-outer-spin-button,
.dm-sp-wrap .dm-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* نمایش اجباری شمارنده ووکامرس */
.dm-sp-wrap input.qty,
.dm-sp-wrap input.qty-sticky {
    display: inline-block !important;
}

/* تنظیمات نوار استیکی موبایل برای جا دادن دکمه و شمارنده */
.dm-sp-sticky-bar .dm-sp-action-row {
    margin-bottom: 0;
    width: 100%;
}

.dm-sp-sticky-bar .dm-sp-add-to-cart-wrap {
    flex: 1;
}

.dm-sp-sticky-bar .dm-sp-qty-wrap {
    height: 44px; /* کمی کوچکتر برای موبایل */
    width: 100px;
}

.woocommerce #reviews #comments ol.commentlist {
    padding: 0 !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border-radius: 12px !important;
    border-color: #f0f0f0 !important;
    background-color: var(--dm-border) !important;
}

.woocommerce div.product form.cart {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    /*
     * ⚠ باگِ بحرانی که این‌جا بود: سلکتور `form.cart` بدونِ قید، کلِ فرم را مخفی
     * می‌کرد. برای محصولِ **ساده** بی‌ضرر بود (آن فرم فقط دکمهٔ خرید را دارد و
     * روی موبایل نوارِ چسبان جایگزینش می‌شود)، ولی برای محصولِ **متغیر** قالب
     * کلِ گالری + عنوان + قیمت + مشخصات را داخلِ همان
     * <form class="variations_form cart dm-sp-form"> می‌پیچد — یعنی این یک خط،
     * تمامِ نیمهٔ بالای صفحهٔ محصول را روی موبایل ناپدید می‌کرد و صفحه از
     * «مشخصات فنی» شروع می‌شد. (اندازه‌گیری‌شده: form با display:none و ارتفاعِ ۰.)
     *
     * حالا فقط ردیفِ خرید هدف است، نه ظرفِ فرم:
     *   - .dm-sp-action-row  → همان دکمه/شمارنده‌ای که واقعاً باید مخفی شود
     *   - form.cart:not(.dm-sp-form) → فرمِ سادهٔ ووکامرس (محصولِ ساده)
     *     فرمِ متغیرِ ما (.dm-sp-form) که display:contents دارد و فقط یک پوششِ
     *     منطقی است، دست‌نخورده می‌ماند.
     *
     * ⚠ اصلاحِ ۱۴۰۴/۰۶/۱۶: پیش‌تر خودِ فرمِ سادهٔ ووکامرس پنهان می‌شد، با این
     * استدلالِ درستِ آن روز که «چیزی جز ردیفِ خرید داخلش نیست». حالا هست:
     * افزونه‌ها روی هوکِ استانداردِ «پیش از دکمهٔ افزودن» گزینه‌های محصول را
     * داخلِ همین فرم چاپ می‌کنند (بسته‌بندی ویژه و مانندش). پنهان‌کردنِ ظرف،
     * آن گزینه‌ها را روی موبایل کاملاً از دسترس خارج می‌کرد — بی‌هیچ خطایی و
     * فقط روی محصولِ ساده. پس هدف به همان ردیفِ خرید محدود شد؛ برای صفحه‌ای
     * که چیزِ دیگری داخلِ آن فرم ندارد، نتیجه مو‌به‌مو همان قبل است.
     */
    .dm-sp-info .dm-sp-action-row,
    form.cart:not(.dm-sp-form) > .dm-sp-action-row {
        display: none !important;
    }

    /*
     * ⚠ و اگر آن فرم واقعاً چیزی جز ردیفِ خرید ندارد، خودِ ظرف هم مثلِ قبل کاملاً
     * پنهان می‌شود. بدونِ این خط، یک فرمِ خالیِ باقی‌مانده همچنان یک gap از ظرفِ
     * فلکسِ والد مصرف می‌کرد و صفحهٔ محصولِ بدونِ افزودنی ۱۶ پیکسل با قبل فرق
     * می‌کرد (اندازه‌گیری‌شده روی ریگ، نه تخمین). شرط عمداً عمومی است و نامِ هیچ
     * افزونه‌ای در آن نیست: «چیزی جز ردیفِ خرید داری یا نه».
     */
    form.cart:not(.dm-sp-form):not(:has(> :not(.dm-sp-action-row))) {
        display: none !important;
    }

    /* اطمینان از نمایش نوار استیکی */
    .dm-sp-sticky-bar {
        display: flex !important;
    }

    .dm-sp-wrap .dm-sp-price-details {
        margin-bottom: 0;
    }
}

/* ============================================================
   آرایش و زیباسازی فرم ثبت نظر (ووکامرس)
   ============================================================ */

/* باکس اصلی فرم */
#review_form_wrapper {
    margin-top: 30px !important;
    padding: 30px !important;
    background-color: #fbfbfb !important;
    border: 1px solid var(--dm-line, #eeeeee) !important;
    border-radius: 16px !important;
    direction: rtl !important;
}

/* عنوان فرم (مثلاً: Add a review) */
#review_form_wrapper .comment-reply-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid var(--dm-line, #f0f0f0) !important;
    padding-bottom: 15px !important;
    font-family: inherit !important;
}

/* لینک انصراف از پاسخ */
#review_form_wrapper #cancel-comment-reply-link {
    font-size: 0.85rem !important;
    color: #ef4444 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* لیبل‌های فرم */
#review_form_wrapper .comment-form label {
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
}

/* ستاره قرمز فیلدهای ضروری */
#review_form_wrapper .comment-form .required {
    color: #ef4444 !important;
    margin-right: 3px !important;
    font-size: 1rem !important;
}

/* ── بخش امتیازدهی ستاره‌ای ── */
#review_form_wrapper .comment-form-rating {
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#review_form_wrapper .comment-form-rating label {
    margin-bottom: 0 !important;
}

#review_form_wrapper p.stars {
    margin: 0 !important;
    line-height: 1 !important;
}

#review_form_wrapper p.stars a {
    color: #F59E0B !important; /* رنگ طلایی/زرد برای ستاره‌ها */
    transition: color 0.2s ease !important;
}

#review_form_wrapper p.stars a:hover,
#review_form_wrapper p.stars a:focus {
    outline: none !important;
}

/* ── فیلد متنی (باکس نظر) ── */
#review_form_wrapper .comment-form-comment {
    margin-bottom: 20px !important;
}

#review_form_wrapper .comment-form textarea {
    width: 100% !important;
    background-color: var(--dm-paper, #ffffff) !important;
    border: 1px solid var(--dm-line, #e5e5e5) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    color: #444444 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
    min-height: 120px !important;
}

#review_form_wrapper .comment-form textarea:focus {
    border-color: var(--button-bg,var(--dm-primary)) !important;
    box-shadow: 0 0 0 3px rgba(197, 140, 57, 0.15) !important;
}

/* ── دکمه ثبت نظر ── */
#review_form_wrapper .form-submit {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    text-align: left !important; /* دکمه در زبان فارسی معمولاً سمت چپ زیباتر است */
}

#review_form_wrapper input[type="submit"] {
    background-color: var(--button-bg,var(--dm-primary)) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 35px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
}

#review_form_wrapper input[type="submit"]:hover {
    background-color: #b08d28 !important; /* کمی تیره‌تر در حالت هاور */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(197, 140, 57, 0.25) !important;
}

/* ── ریسپانسیو (موبایل) ── */
@media (max-width: 576px) {
    #review_form_wrapper {
        padding: 20px 15px !important;
    }

    #review_form_wrapper .comment-form-rating {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    #review_form_wrapper input[type="submit"] {
        width: 100% !important; /* دکمه تمام عرض در موبایل */
    }
}


.dm-sp-wrap .dm-sp-price-subtitle {
    font-size: 13px;
    color: var(--dm-ink-3, #888888);
    text-align: right;
    font-weight: 500;
    margin-bottom: 10px;
}

/* ============================================================
   تطبیق صفحه تک‌محصول با تم دارک (Dark Mode)
   ============================================================ */

/* پس‌زمینه‌های اصلی */
body.theme-dark .dm-sp-wrap,
body.theme-dark .dm-sp-breadcrumb,
body.theme-dark .dm-sp-share-tooltip,
body.theme-dark .dm-sp-sticky-bar {
    background-color: var(--dm-bg-soft);
}

/* پس‌زمینه‌های ثانویه (کارت‌ها و باکس‌ها) */
body.theme-dark .dm-sp-img-main-wrap,
body.theme-dark .dm-sp-thumb,
body.theme-dark .dm-sp-specs-tbl tr:nth-child(even),
body.theme-dark .dm-sp-price-details,
body.theme-dark .dm-sp-trust-badges,
body.theme-dark .dm-sp-qty-wrap,
body.theme-dark #review_form_wrapper,
body.theme-dark .dm-qty-btn:hover,
body.theme-dark .dm-sp-share-item:hover,
body.theme-dark #review_form_wrapper .comment-form textarea,
body.theme-dark .dm-swatch-text,
body.theme-dark .dm-sp-warranty-btn {
    background-color: var(--dm-border) !important;
}

/* دکمه‌های شیشه‌ای روی عکس */
body.theme-dark .dm-sp-zoom-btn,
body.theme-dark .dm-sp-social-btn {
    background: rgba(21, 32, 43, 0.85); /* سرمه‌ای تیره نیمه‌شفاف */
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}

/* رنگ متن اصلی */
body.theme-dark .dm-sp-title,
body.theme-dark .dm-sp-section-label,
body.theme-dark .dm-sp-attr-label,
body.theme-dark .dm-sp-cur-price,
body.theme-dark .dm-sp-cur-price bdi,
body.theme-dark .dm-sp-price-range,
body.theme-dark .dm-sp-price-range bdi,
body.theme-dark .woocommerce-variation.single_variation .woocommerce-variation-price .price,
body.theme-dark .dm-sp-tab-link.is-active,
body.theme-dark .dm-sp-short-desc,
body.theme-dark .dm-sp-full-desc,
body.theme-dark .dm-sp-specs-tbl td,
body.theme-dark .dm-sp-reviews-empty-text h3,
body.theme-dark .dm-sp-block-title,
body.theme-dark .dm-sp-share-item,
body.theme-dark .dm-sp-sticky-amount,
body.theme-dark .dm-sp-qspec-val,
body.theme-dark .dm-sp-fm-text strong,
body.theme-dark .dm-sp-tb-item,
body.theme-dark .dm-sp-sku-wrap .sku,
body.theme-dark .dm-qty-input,
body.theme-dark #review_form_wrapper .comment-reply-title,
body.theme-dark #review_form_wrapper .comment-form label,
body.theme-dark #review_form_wrapper .comment-form textarea,
body.theme-dark .dm-swatch-text,
body.theme-dark .dm-sp-warranty-btn {
    color: var(--dm-text) !important;
}

/* رنگ متن خاموش و کم‌رنگ */
body.theme-dark .dm-sp-breadcrumb .woocommerce-breadcrumb,
body.theme-dark .dm-sp-breadcrumb a,
body.theme-dark .dm-sp-meta,
body.theme-dark .reset_variations,
body.theme-dark .dm-sp-select-hint,
body.theme-dark .dm-sp-old-price,
body.theme-dark .dm-sp-old-price bdi,
body.theme-dark .dm-sp-cur-price .woocommerce-Price-currencySymbol,
body.theme-dark .dm-sp-price-range .woocommerce-Price-currencySymbol,
body.theme-dark .dm-sp-price-range del,
body.theme-dark .dm-sp-tab-link,
body.theme-dark .dm-sp-specs-tbl th,
body.theme-dark .dm-sp-reviews-empty-text p,
body.theme-dark .dm-sp-qspec-key,
body.theme-dark .dm-sp-pd-row,
body.theme-dark .dm-sp-fm-text span,
body.theme-dark .dm-sp-rating-count,
body.theme-dark .dm-sp-sku-wrap,
body.theme-dark .dm-qty-btn,
body.theme-dark .dm-sp-svc-item {
    color: var(--dm-text-muted) !important;
}

/* خطوط مرزی و Border ها */
body.theme-dark .dm-sp-breadcrumb,
body.theme-dark .dm-sp-meta-sep,
body.theme-dark .dm-sp-services,
body.theme-dark .dm-sp-tab-nav,
body.theme-dark .dm-sp-specs-tbl tr,
body.theme-dark .dm-sp-block-header,
body.theme-dark .dm-sp-qspec-row,
body.theme-dark .dm-sp-price-details,
body.theme-dark .dm-sp-pd-content,
body.theme-dark .pd-total,
body.theme-dark .dm-sp-features-mini,
body.theme-dark .dm-sp-qty-wrap,
body.theme-dark #review_form_wrapper,
body.theme-dark #review_form_wrapper .comment-reply-title,
body.theme-dark .dm-swatch-text,
body.theme-dark .dm-sp-warranty-btn,
body.theme-dark .dm-sp-thumb,
body.theme-dark .dm-sp-share-tooltip,
body.theme-dark #review_form_wrapper .comment-form textarea {
    border-color: var(--dm-border) !important;
}

/* دایره‌های رنگ محصول */
body.theme-dark .dm-swatch-circle {
    border-color: var(--dm-bg-soft);
    box-shadow: 0 0 0 1.5px var(--dm-border) !important;
}

/* حالت فعال/هاور المان‌های انتخاب‌گر (رنگ اصلی) */
body.theme-dark .dm-swatch-text.is-active,
body.theme-dark .dm-sp-warranty-btn.is-active {
    background-color: rgba(242, 167, 5, 0.1); /* پس زمینه محو با رنگ اکشن شما */
    border-color: var(--dm-primary) !important;
    color: var(--dm-primary) !important;
}

body.theme-dark .dm-swatch-circle.is-active,
body.theme-dark .dm-swatch-circle:hover,
body.theme-dark .dm-sp-thumb.is-active,
body.theme-dark .dm-sp-thumb:hover,
body.theme-dark #review_form_wrapper .comment-form textarea:focus {
    border-color: var(--dm-primary) !important;
}

body.theme-dark .dm-swatch-circle.is-active {
    box-shadow: 0 0 0 2.5px var(--dm-primary) !important;
}

/* بج اصالت کالا (سبز) */
body.theme-dark .dm-sp-badge-auth {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #4ade80 !important;
}

/* دکمه‌های غیرفعال (ناموجود) */
body.theme-dark .dm-btn-primary.dm-btn-disabled,
body.theme-dark .dm-btn-primary:disabled {
    background: var(--dm-border);
    color: var(--dm-text-muted);
}

body.theme-dark .dm-sp-img-main {
    filter: brightness(0.9) contrast(1.1); /* کمی کاهش روشنایی برای هماهنگی با تم دارک */
}

/* ============================================================
   تطبیق بخش نظرات (Comments) با تم دارک
   ============================================================ */

/* رنگ متن نظرات و توضیحات */
body.theme-dark .woocommerce-Reviews-title,
body.theme-dark .woocommerce-review__author,
body.theme-dark .description p,
body.theme-dark #review_form_wrapper .comment-form label {
    color: var(--dm-text) !important;
}

body.theme-dark .woocommerce-review__published-date {
    color: var(--dm-text-muted) !important;
}

/* کارت‌های نظرات */
body.theme-dark .comment_container {
    border: 1px solid var(--dm-border) !important;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* ستاره‌های امتیازدهی */
body.theme-dark .star-rating span {
    color: #F59E0B !important; /* طلایی */
}

/* باکس فرم ثبت نظر */
body.theme-dark #review_form_wrapper {
    background-color: var(--dm-bg-soft) !important;
    border-color: var(--dm-border) !important;
}

/* اینپوت‌ها و تکست‌اریا */
body.theme-dark .comment-form textarea,
body.theme-dark .comment-form input {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* دکمه ثبت */
body.theme-dark .form-submit input[type="submit"] {
    background-color: var(--dm-primary) !important;
}

body.theme-dark #reply-title {
    color: var(--dm-text) !important;
}
/*
 * دکمهٔ افزودنِ محصولِ متغیر پیش از انتخابِ گزینه: به‌جای خاکستریِ خاموش، دکمهٔ
 * خط‌دارِ «انتخاب وزن» که کلیک‌پذیر است و کاربر را به انتخاب‌گر می‌برد (main.js،
 * dmSyncAtcLabel). فقط حالتِ «باید انتخاب شود» را عوض می‌کند؛ واریانتِ ناموجود
 * (wc-variation-is-unavailable) همان خاکستریِ قفل می‌ماند.
 */
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed,
.dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed {
    background: transparent !important;
    color: var(--dm-primary, #B43F3F);
    box-shadow: inset 0 0 0 1.5px var(--dm-primary, #B43F3F);
    cursor: pointer;
    pointer-events: auto;
}
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed svg { display: none; }

.dm-sp-attr-block.dm-attr-attention { animation: dm-attr-attention 1.2s ease; border-radius: 10px; }
@keyframes dm-attr-attention {
    0%, 60% { box-shadow: 0 0 0 3px var(--dm-primary-20, rgba(180, 63, 63, .25)); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .dm-sp-attr-block.dm-attr-attention { animation: none; } }

/*
 * ردیفِ خرید: دکمه هم‌قدِ جعبهٔ تعداد (۴۸px). پیش از این padding به‌خاطرِ قاعدهٔ
 * .button ووکامرس کوچک می‌شد و دکمه ۳۳px می‌ماند.
 */
.dm-sp-wrap .dm-sp-action-row .dm-sp-add-to-cart-wrap { align-self: stretch; display: flex; }
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary { min-height: 48px; padding-block: 0; line-height: 1.2; }

/*
 * حالتِ «باید انتخاب کنید» (dm-atc-needs-choice، main.js): پررنگ و دیده‌شدنی، با
 * فلشی رو به بالا که به انتخاب‌گر اشاره می‌کند و یک تپشِ ملایم. hover پر می‌شود و
 * متن سفید روی زمینهٔ رنگی می‌نشیند — نه سفید روی سفید.
 * (جایگزینِ نسخهٔ خط‌دارِ قبلی؛ وزنِ ۰-۵-۰ از قاعدهٔ غیرفعالِ بالا می‌برد.)
 */
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed,
.dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed {
    background: var(--dm-primary-tint, #fdf2f2) !important;
    color: var(--dm-primary, #B43F3F) !important;
    box-shadow: inset 0 0 0 2px var(--dm-primary, #B43F3F);
    font-weight: 800;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1 !important;
    animation: dm-atc-pulse 2.2s ease-out infinite;
}
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed:hover,
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed:focus-visible {
    background: var(--dm-primary, #B43F3F) !important;
    color: #fff !important;
    opacity: 1 !important;
}
.dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2.5px solid currentColor;
    border-inline-start: 2.5px solid currentColor;
    transform: rotate(45deg) translate(2px, 2px);
    animation: dm-atc-nudge 1.4s ease-in-out infinite;
}
body.theme-dark .dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed {
    background: var(--dm-primary-10, rgba(180, 63, 63, .12)) !important;
}
@keyframes dm-atc-pulse {
    0% { box-shadow: inset 0 0 0 2px var(--dm-primary, #B43F3F), 0 0 0 0 var(--dm-primary-20, rgba(180, 63, 63, .3)); }
    70%, 100% { box-shadow: inset 0 0 0 2px var(--dm-primary, #B43F3F), 0 0 0 8px transparent; }
}
@keyframes dm-atc-nudge { 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) {
    .dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed,
    .dm-sp-wrap .dm-sp-action-row .dm-btn-primary.dm-atc-needs-choice.wc-variation-selection-needed::before { animation: none; }
}