/* =========================================================
   DM Gold — wc-pages.css
   صفحه‌های حساب کاربری، سبد خرید و پرداخت.

   قالب‌های خودِ ووکامرس بازنویسی نشده‌اند (تا با به‌روزرسانی‌ها و
   افزونه‌های پرداخت نجنگیم)؛ همه‌چیز اینجا با هدف‌گیریِ کلاس‌های
   واقعیِ ووکامرس ری‌اسکین می‌شود.
   ========================================================= */


/* =========================================================
   شروع: هیرو و مراحل سفارش
   ========================================================= */
.wc-hero .archive-hero-inner { padding: 44px 0 38px; }

.wc-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.wc-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(248, 244, 244, .18);
  font-size: 12.5px;
  color: var(--neutral-400);
}

.wc-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(248, 244, 244, .1);
  color: var(--neutral-400);
  flex: none;
}

.wc-step.is-current {
  border-color: var(--accent-400);
  color: var(--accent-300);
  background: rgba(182, 130, 53, .12);
}

.wc-step.is-current .wc-step-num {
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700));
  color: #fff9ee;
}

.wc-step.is-done { border-color: rgba(182, 130, 53, .34); color: var(--accent-300); }
.wc-step.is-done .wc-step-num { background: rgba(182, 130, 53, .28); color: var(--accent-300); }
/* =========================================================
   پایان: هیرو و مراحل سفارش
   ========================================================= */


/* =========================================================
   شروع: بدنهٔ مشترک سه صفحه
   ========================================================= */
.wc-page { padding-block: var(--section-gap); }

/* پیام‌های ووکامرس (خطا/موفقیت/توجه) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  background: var(--bg);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.woocommerce-message { border-inline-start: 3px solid var(--accent); background: var(--accent-100); color: var(--accent-800); }
.woocommerce-info { border-inline-start: 3px solid var(--accent-400); }
.woocommerce-error { border-inline-start: 3px solid var(--danger); background: var(--danger-100); color: var(--danger); }
.woocommerce-error li { list-style: none; }

.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/* دکمه‌های ووکامرس با زبان دکمه‌های قالب */
.wc-page .button,
.wc-page button.button,
.wc-page input.button,
.wc-page a.button,
.woocommerce-message .button,
.woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, filter .18s;
}

.wc-page .button:hover { background: var(--surface-2); border-color: var(--accent-400); }

/* دکمه‌های اصلی (ادامه/ثبت سفارش) طلایی می‌شوند */
.wc-page .button.alt,
.wc-page .checkout-button,
.wc-page #place_order,
.wc-page .woocommerce-Button--next,
.wc-page button[name="save_address"],
.wc-page button[name="save_account_details"],
.wc-page .woocommerce-form-login__submit,
.wc-page .woocommerce-form-register__submit {
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700));
  border-color: var(--accent);
  color: #fff9ee;
}

.wc-page .button.alt:hover,
.wc-page .checkout-button:hover,
.wc-page #place_order:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--accent-400), var(--accent-700)); }

/* فرم‌ها */
.wc-page .form-row { display: flex; flex-direction: column; margin: 0 0 16px; }

.wc-page label { font-size: 13px; color: var(--neutral-700); margin-bottom: 7px; font-weight: 600; }
.wc-page label .required { color: var(--danger); text-decoration: none; }

.wc-page input[type="text"],
.wc-page input[type="email"],
.wc-page input[type="tel"],
.wc-page input[type="password"],
.wc-page input[type="number"],
.wc-page textarea,
.wc-page select,
.wc-page .select2-container .select2-selection--single {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 14px;
  height: auto;
}

.wc-page input:focus,
.wc-page textarea:focus,
.wc-page select:focus { outline: none; border-color: var(--accent-400); }

.wc-page textarea { min-height: 110px; resize: vertical; }
/* =========================================================
   پایان: بدنهٔ مشترک
   ========================================================= */


/* =========================================================
   شروع: سبد خرید
   ========================================================= */
/* ⚠ گرید فقط وقتی اعمال می‌شود که واقعاً مارک‌آپِ کلاسیک در صفحه باشد.
   در حالتِ بلوکی (حالتِ فعلیِ این فروشگاه) ووکامرس چند عنصرِ کمکیِ نامرئی
   (نقطهٔ اسکرول، ناحیهٔ اعلان) به‌عنوان فرزند چاپ می‌کند؛ آن‌ها خانه‌های گرید
   را می‌گیرند و عرضِ سبد را خراب می‌کنند — همان فضای خالیِ سمتِ چپ.
   بلوک‌ها چیدمانِ دوستونهٔ خودشان را دارند، پس باید کاملاً رها شوند. */
.woocommerce-cart .wc-page-inner:has(.woocommerce-cart-form) {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.woocommerce-cart-form {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
  padding: 4px 18px 18px;
}

.wc-page .shop_table { width: 100%; border-collapse: collapse; display: table; }

.wc-page .shop_table th {
  text-align: start;
  font-family: var(--font-h);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-600);
  padding: 14px 8px;
  border-bottom: 1px solid var(--divider);
}

.wc-page .shop_table td {
  padding: 16px 8px;
  border-bottom: 1px solid var(--divider);
  font-size: 13.5px;
  vertical-align: middle;
}

.wc-page .shop_table tr:last-child td { border-bottom: none; }

.wc-page .product-thumbnail img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--surface);
}

.wc-page .product-name a { color: var(--text); font-weight: 600; }
.wc-page .product-name a:hover { color: var(--accent-700); }

.wc-page .product-price,
.wc-page .product-subtotal { font-variant-numeric: tabular-nums; font-weight: 700; }

.wc-page .product-remove a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--divider);
  color: var(--neutral-600);
  font-size: 17px;
  line-height: 1;
}

.wc-page .product-remove a:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-100); }

/* جعبهٔ تعداد */
.wc-page .quantity { display: inline-flex; align-items: center; }

.wc-page .quantity input[type="number"] {
  width: 74px;
  text-align: center;
  padding: 9px 6px;
  font-variant-numeric: tabular-nums;
}

/* ردیف کوپن + به‌روزرسانی */
.wc-page .actions { padding-top: 18px !important; border-bottom: none !important; }
.wc-page .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wc-page .coupon input[type="text"] { max-width: 220px; }

/* جمع کل سبد — کارت چسبان کنار جدول */
.cart_totals {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 20px;
}

.cart_totals h2 {
  font-size: 16px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}

.cart_totals .shop_table th,
.cart_totals .shop_table td { padding: 12px 0; font-size: 13.5px; }
.cart_totals .shop_table th { color: var(--neutral-600); font-weight: 400; }
.cart_totals .order-total th,
.cart_totals .order-total td { font-size: 15px; font-weight: 700; color: var(--text); }
.cart_totals .wc-proceed-to-checkout { margin-top: 16px; }
.cart_totals .checkout-button { width: 100%; }

/* سبد خالی */
.cart-empty,
.woocommerce-cart .cart-empty { text-align: center; font-size: 16px; padding: 40px 0 12px; }
.return-to-shop { text-align: center; padding-bottom: 40px; }
/* =========================================================
   پایان: سبد خرید
   ========================================================= */


/* =========================================================
   شروع: تسویه حساب
   ========================================================= */
/* همان دلیلِ سبد — گرید فقط برای مارک‌آپِ کلاسیک (حضورِ #customer_details) */
.woocommerce-checkout .wc-page-inner:has(#customer_details) {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

/* ⚠ ووکامرس #customer_details و #order_review را داخل یک <form> می‌گذارد؛
   گرید روی .wc-page-inner فقط وقتی درست می‌افتد که خودِ فرم هم گرید باشد. */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  grid-column: 1 / -1;
}

#customer_details,
.woocommerce-checkout-review-order {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 22px;
}

.woocommerce-checkout-review-order {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
}

#customer_details .col-1,
#customer_details .col-2 { width: 100%; float: none; }

.wc-page h3,
.woocommerce-checkout h3 {
  font-size: 16px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}

#order_review_heading { font-size: 16px; margin-bottom: 14px; }

.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--divider);
  text-align: start;
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: 15.5px; font-weight: 700; border-bottom: none; }

/* روش‌های پرداخت */
.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.wc_payment_method {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: border-color .18s, background .18s;
}

.wc_payment_method:hover { border-color: var(--accent-400); }
.wc_payment_method label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 600; color: var(--text); }
.wc_payment_method input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }

.payment_box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--neutral-700);
  line-height: 1.9;
}
.payment_box p:last-child { margin-bottom: 0; }

#place_order { width: 100%; margin-top: 6px; padding: 15px 22px; font-size: 15px; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 12.5px; }

/* صفحهٔ «سفارش دریافت شد» */
.woocommerce-order { max-width: 780px; margin: 0 auto; }

.dmg-thankyou-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700));
  color: #fff9ee;
  box-shadow: 0 12px 28px rgba(125, 84, 17, .28);
}
.dmg-thankyou-badge svg { width: 32px; height: 32px; }

.woocommerce-order .woocommerce-notice--success {
  text-align: center;
  margin: 0 0 24px;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.dmg-thankyou-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.woocommerce-thankyou-order-details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.woocommerce-thankyou-order-details li {
  flex: 1 1 140px;
  font-size: 12px;
  color: var(--neutral-600);
  border-inline-end: 1px solid var(--divider);
  padding-inline-end: 14px;
}

.woocommerce-thankyou-order-details li:last-child { border-inline-end: none; }
.woocommerce-thankyou-order-details li strong { display: block; margin-top: 6px; font-size: 14.5px; color: var(--text); }
/* =========================================================
   پایان: تسویه حساب
   ========================================================= */


/* =========================================================
   شروع: حساب کاربری
   ========================================================= */
.woocommerce-account .wc-page-inner { display: block; }

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}

/* چیدمان دو ستونه: منوی کناری + محتوا */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 24px;
  align-items: start;
}

/* ⚠⚠ علتِ واقعیِ به‌هم‌ریختنِ حساب کاربری: استایل‌شیتِ خودِ ووکامرس روی
   .woocommerce یک clearfix با ::before و ::after می‌گذارد. این شبه‌عنصرها در
   یک کانتینرِ گرید، خودشان «آیتمِ گرید» حساب می‌شوند ⇒ ::before خانهٔ اول را
   می‌گیرد، منو به ستونِ ۱fr می‌افتد (تمام‌عرض) و محتوا به سطرِ بعد و ستونِ
   ۲۶۴ پیکسلی (باریک) — دقیقاً همان چیزی که دیده می‌شد. در گرید اصلاً clearfix
   لازم نیست، پس خنثی می‌شوند. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }

/* و برای اینکه هیچ عنصرِ ناخواستهٔ دیگری (اعلان‌ها، خروجیِ افزونه‌ها) جای منو و
   محتوا را جابه‌جا نکند، این دو صریحاً در خانهٔ خودشان قفل می‌شوند. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }

/* اعلان‌های سراسری (اگر مستقیم فرزندِ .woocommerce بودند) تمام‌عرضِ سطرِ بالا */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: auto; }

/* ⚠ کاربرِ مهمان هنوز منوی حساب ندارد، پس گریدِ دوستونه معنی ندارد و ستونِ خالی
   باعث می‌شد فرم بی‌قواره و لنگ بیفتد. توجه: کلاسِ logged-in روی body فقط برای
   کاربرِ واردشده هست، پس :not(.logged-in) دقیقاً همان حالتِ مهمان را می‌گیرد. */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 460px;
  margin: 0 auto;
}

/* تیترِ «ورود» بالای فرم — وسط‌چین و هم‌زبان با بقیهٔ تیترها */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  text-align: center;
  font-size: 19px;
  margin: 0 0 18px;
  padding: 0;
  border: none;
}

.woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 10px;
}

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: background .18s, color .18s;
}

.woocommerce-MyAccount-navigation li a:hover { background: var(--surface); color: var(--accent-700); }

.woocommerce-MyAccount-navigation li.is-active a {
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700));
  color: #fff9ee;
}

/* ⚠ کلاسِ واقعیِ ردیفِ خروج در این نسخهٔ ووکامرس، طبق خروجیِ سایت:
   woocommerce-MyAccount-navigation-link--customer-logout */
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--danger); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--danger-100); color: var(--danger); }

.woocommerce-MyAccount-content {
  /* !important لازم است: ووکامرس خودش روی این عنصر عرضِ درصدیِ کوچک‌تر
     (به‌همراه float) می‌گذارد و وزنِ انتخابگرش برابر است. */
  width: 100% !important;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 24px;
  min-width: 0;
  float: none;
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* جدول سفارش‌ها */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--divider);
  font-size: 13.5px;
  text-align: start;
}
.woocommerce-orders-table th { font-family: var(--font-h); font-size: 12.5px; color: var(--neutral-600); }

/* کارت‌های نشانی */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }

.woocommerce-Address {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--bg);
}

.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { font-size: 15px; margin: 0; padding: 0; border: none; }
.woocommerce-Address address { font-style: normal; font-size: 13.5px; line-height: 2; color: var(--neutral-700); }

/* فرم ورود/ثبت‌نام */
.woocommerce-form-login,
.woocommerce-form-register {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 26px;
}

.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; margin: 0; font-weight: 400; }
.woocommerce-LostPassword { font-size: 13px; margin: 14px 0 0; text-align: center; }
.woocommerce-LostPassword a { color: var(--accent-700); }

/* ردیفِ «مرا به خاطر بسپار» + دکمهٔ ورود در یک خط، دکمه در انتها */
.woocommerce-form-login .form-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.woocommerce-form-login .form-row .button { margin: 0; min-width: 120px; }

/* دکمهٔ نمایش/مخفی‌کردن گذرواژه روی خودِ ورودی می‌نشیند */
.wc-page .password-input { position: relative; display: block; }
.wc-page .password-input input { padding-inline-end: 44px; }

.wc-page .show-password-input {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-600);
  padding: 0;
}

/* ⚠ گرید تضمین‌ها: کلاس .assurance-grid در dm-gold-product.css تعریف شده که فقط
   روی صفحهٔ محصول بارگذاری می‌شود — روی سبد/پرداخت اصلاً لود نیست و همین باعث
   می‌شد آیتم‌ها زیر هم و بی‌قواره بیفتند. پس اینجا مستقل تعریف می‌شود. */
.wc-assurance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: var(--section-gap);
}

.wc-assurance .assurance-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.wc-assurance .assurance-item svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
.wc-assurance .assurance-item .t { font-family: var(--font-h); font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.wc-assurance .assurance-item .d { font-size: 12px; color: var(--neutral-600); line-height: 1.75; }
/* =========================================================
   پایان: حساب کاربری
   ========================================================= */


/* =========================================================
   شروع: سبد و پرداختِ «بلوکی» (WooCommerce Blocks)
   ⚠ این فروشگاه از بلوک‌های سبد/پرداخت استفاده می‌کند نه شورت‌کدِ
   کلاسیک؛ یعنی کلاس‌هایی مثل .woocommerce-cart-form یا #order_review
   اصلاً در صفحه وجود ندارند و استایل‌های بالا روی چیزی نمی‌نشینند.
   بخشِ زیر مارک‌آپِ واقعیِ بلوکی را هدف می‌گیرد. (استایل‌های کلاسیک
   عمداً حذف نشدند تا اگر روزی به شورت‌کد برگشتیم هم کار کند.)
   ========================================================= */

/* ⚠ در حالتِ دوستونه (is-large) عمداً gap اضافه نمی‌شود: چیدمانِ خودِ بلوک‌ها
   فلکسِ درصدی است و ستون‌ها روی‌هم ۱۰۰٪ عرض را پر می‌کنند؛ افزودنِ gap مجموع را
   از ۱۰۰٪ رد می‌کند و ستونِ کناری به سطرِ بعد می‌پرد — همان حالتی که سبد را
   «به‌هم‌ریخته» نشان می‌داد. اما در حالتِ باریک (is-mobile) چیدمان تک‌ستونه
   می‌شود و آنجا gap بی‌خطر و لازم است. */
.wc-block-components-sidebar-layout.is-mobile { gap: 10px; }

/* ⚠ بلوک‌های سبد به‌جای مدیاکوئری از «کوئریِ کانتینری» استفاده می‌کنند (خودِ
   ووکامرس روی .wp-block-woocommerce-cart یک container تعریف کرده)، پس قواعدِ
   زیر هم باید @container باشند وگرنه یا اصلاً فعال نمی‌شوند یا زمانِ اشتباه.
   در عرضِ کم، چیدمان ستونی می‌شود و جمعِ کل بالای فهرستِ اقلام می‌نشیند تا
   کاربر مبلغ و دکمهٔ پرداخت را بدونِ اسکرول ببیند. */
@container (max-width: 699px) {
  .wc-block-components-sidebar-layout {
    flex-direction: column;
    margin: 0 auto;
  }

  .wc-block-cart__sidebar {
    margin-bottom: 0;
    order: 0;
  }
}

/* ---- کارتِ ستون اصلی و ستون کناری ---- */
.wc-block-cart__main,
.wc-block-checkout__main {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 20px 22px;
}

.wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 20px;
}

/* ⚠⚠ باگِ «جعبه‌توی‌جعبه» در خلاصهٔ سفارشِ پرداخت: ووکامرس روی عنصرِ درونیِ
   .checkout-order-summary-block-fill هم بوردر و رادیوسِ ۵ پیکسلیِ خودش را
   می‌گذارد، درحالی‌که کارتِ بیرونی (بالا) از قبل بوردر و رادیوس دارد ⇒ دو قاب
   تودرتو با گردیِ ناهمخوان. قابِ درونی خنثی می‌شود و همان کارتِ بیرونی می‌مانَد.
   پدینگِ افقیِ داخلی هم صفر می‌شود چون کارتِ بیرونی خودش پدینگ دارد. */
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
  border: none;
  border-radius: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-item,
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-coupon {
  padding-inline: 0;
}

.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary {
  padding-inline: 0;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar { position: sticky; top: calc(var(--nav-h) + 12px); }

/* ---- تیترها ---- */
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title,
.wc-block-components-title {
  font-family: var(--font-h) !important;
  font-weight: 700 !important;
  color: var(--text);
}

.wc-block-cart__totals-title {
  font-size: 15px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 14px;
}

/* ---- جدول اقلام سبد ----
   ساختار واقعی (طبق خروجی سایت):
   table.wc-block-cart-items
     thead > tr.wc-block-cart-items__header > th(--image|--product|--total)
     tbody > tr.wc-block-cart-items__row
       td.wc-block-cart-item__image   > a > img
       td.wc-block-cart-item__product > .wc-block-cart-item__wrap
       td.wc-block-cart-item__total   > .wc-block-cart-item__total-price-and-sale-badge-wrapper
   ⚠ هیچ display اضافه‌ای (grid/flex) روی جدول یا ردیف‌ها گذاشته نمی‌شود —
   ساختار جدولیِ خودش درست کار می‌کند و هر بازتعریفی آن را به‌هم می‌ریزد. */
.wc-block-cart-items { width: 100%; border-collapse: collapse; }

.wc-block-cart-items__header th {
  font-family: var(--font-h);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-600);
  text-align: start;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--divider);
}

.wc-block-cart-items__row td { border-top: 1px solid var(--divider); padding: 16px 0; vertical-align: top; }
.wc-block-cart-items__row:first-child td { border-top: none; }

.wc-block-cart-item__image { width: 84px; padding-inline-end: 14px !important; }

.wc-block-cart-item__image img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 8px; }

.wc-block-components-product-name {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.8;
  text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--accent-700) !important; }

/* قیمت‌ها: قیمتِ قبلی خط‌خورده و کم‌رنگ، قیمتِ نهایی پررنگ */
.wc-block-cart-item__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.wc-block-components-product-price__regular {
  color: var(--neutral-500);
  font-size: 12.5px;
  text-decoration: line-through;
}

.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-decoration: none;
}

.wc-block-components-product-price__value.is-discounted { color: var(--text); }

/* ستون مجموع + برچسب «ذخیره …» */
.wc-block-cart-item__total { text-align: start; white-space: nowrap; }

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.wc-block-components-sale-badge {
  background: var(--accent-100);
  color: var(--accent-800);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ردیفِ تعداد + حذف، کنار هم */
.wc-block-cart-item__quantity { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.wc-block-cart-item__remove-link { padding: 0; background: none; border: none; }
.wc-block-cart-item__remove-link svg { width: 19px; height: 19px; display: block; fill: currentColor; }

/* جعبهٔ تعداد */
.wc-block-components-quantity-selector {
  border: 1px solid var(--divider) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg);
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  color: var(--neutral-700) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 700;
}

.wc-block-components-quantity-selector__button:hover { color: var(--accent-700) !important; background: var(--surface) !important; }
.wc-block-components-quantity-selector__input { color: var(--text); font-variant-numeric: tabular-nums; }

.wc-block-cart-item__remove-link { color: var(--neutral-600) !important; cursor: pointer; }
.wc-block-cart-item__remove-link:hover { color: var(--danger) !important; }

/* =========================================================
   چیدمانِ خوانایِ اقلامِ سبد در عرضِ کم.

   ⚠ چرا @container و نه @media: خودِ ووکامرس روی .wp-block-woocommerce-cart یک
   container تعریف کرده و چیدمانِ بلوک‌ها با عرضِ همان کانتینر عوض می‌شود، نه
   عرضِ صفحه. قاعدهٔ نوشته‌شده در @media اینجا یا اصلاً فعال نمی‌شود یا در زمانِ
   اشتباه — همان چیزی که اقلام را «توهم‌توهم» نشان می‌داد.

   ساختارِ جدولی به گریدِ سه‌ناحیه‌ای تبدیل می‌شود: تصویر کنارِ نام (سطرِ اول)،
   و قیمت/تعداد/حذف در سطرِ خودشان — تا هیچ ستونی زیرِ ۱۰۰ پیکسل فشرده نشود.
   ========================================================= */
@container (max-width: 699px) {
  .wc-block-cart-items__header { display: none; }

  .wc-block-cart-items__row {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "img name"
      "total total";
    gap: 4px 12px;
    padding: 16px 0;
    border-top: 1px solid var(--divider);
  }

  .wc-block-cart-items__row:first-child { border-top: none; }

  /* پدینگ/بوردرِ سلولی حذف می‌شود چون دیگر سلولِ جدول نیستند و گرید فاصله را می‌دهد */
  .wc-block-cart-items__row td { border: none; padding: 0; }

  .wc-block-cart-item__image { grid-area: img; width: auto; padding-inline-end: 0 !important; }
  .wc-block-cart-item__image img { width: 64px; height: 64px; }

  .wc-block-cart-item__product { grid-area: name; min-width: 0; }
  .wc-block-cart-item__total { grid-area: total; }

  /* در سطرِ سوم، مجموع و جعبهٔ تعداد روی یک خط و دو سرِ ردیف می‌نشینند */
  .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--divider);
  }
}

/* =========================================================
   اقلامِ خلاصهٔ سفارش (صفحهٔ پرداخت) — این بخش تا امروز هیچ استایلِ قالبی
   نداشت و با ظاهرِ خامِ ووکامرس رندر می‌شد؛ همان دلیلِ بی‌ساختار بودنش.
   ========================================================= */
.wc-block-components-order-summary__content { display: flex; flex-direction: column; }

.wc-block-components-order-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--divider);
}

.wc-block-components-order-summary-item:first-child { border-top: none; padding-top: 0; }

.wc-block-components-order-summary-item__image {
  position: relative;
  width: 56px;
  margin: 0;
}

.wc-block-components-order-summary-item__image img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: block;
}

/* شمارندهٔ تعداد روی گوشهٔ تصویر.
   ⚠⚠ ریشهٔ باگِ «جعبهٔ شمارنده هست ولی عددش دیده نمی‌شود»: خودِ ووکامرس روی همین
   عنصر right:0/left:0 + top:0 + transform:translate(±50%,-50%) می‌گذارد. قانونِ
   قبلیِ ما فقط top و inset-inline-start را عوض می‌کرد و بقیه سرِ جایش می‌ماند ⇒
   عنصر هم‌زمان دو مبدأ افقی می‌گرفت و با آن transform از کادرِ ۵۶ پیکسلیِ تصویر
   بیرون پرتاب می‌شد. پس اینجا همهٔ آن مقادیر صریحاً بازنویسی/صفر می‌شوند تا فقط
   یک منبعِ کنترل بماند. رنگِ عدد هم روی خودِ span ست می‌شود، چون ووکامرس با
   انتخابگرِ خاص‌ترِ `.__quantity span` رنگش را به رنگِ پس‌زمینهٔ پوسته می‌بندد و
   قانونِ ما روی والد به آن می‌بازد. */
.wc-block-components-order-summary-item__quantity {
  position: absolute;
  top: -7px;
  inset-inline-start: -7px;
  inset-inline-end: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  min-height: 21px;
  height: 21px;
  padding: 0 5px;
  border: none;
  border-radius: 999px;
  background: var(--accent-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.wc-block-components-order-summary-item__quantity span { color: #fff9ee; padding: 0; }
.wc-block-components-order-summary-item__quantity .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.wc-block-components-order-summary-item__description { min-width: 0; }

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 4px;
}

.wc-block-components-order-summary-item__individual-prices {
  font-size: 11.5px;
  color: var(--neutral-500);
}

.wc-block-components-order-summary-item__total-price {
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
}

/* فراداده (ویژگی‌های انتخابی/افزودنی‌ها) خواناتر و کم‌رنگ‌تر از نامِ محصول */
.wc-block-components-order-summary-item .wc-block-components-product-details {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--neutral-600);
}
.wc-block-components-order-summary-item .wc-block-components-product-details__name { font-weight: 600; }

@container (max-width: 699px) {
  /* در عرضِ کم، مبلغ به‌جای ستونِ سوم زیرِ نام می‌رود تا نام فشرده نشود */
  .wc-block-components-order-summary-item {
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "img desc"
      "img price";
    gap: 4px 10px;
  }

  .wc-block-components-order-summary-item__image { grid-area: img; width: 52px; }
  .wc-block-components-order-summary-item__image img { width: 52px; height: 52px; }
  .wc-block-components-order-summary-item__description { grid-area: desc; }
  .wc-block-components-order-summary-item__total-price { grid-area: price; text-align: start; }
}

/* ---- ردیف‌های جمع کل ---- */
.wc-block-components-totals-wrapper { border-top: 1px solid var(--divider) !important; padding: 14px 0 !important; }
.wc-block-components-totals-wrapper:first-child { border-top: none !important; }

.wc-block-components-totals-item__label { color: var(--neutral-600); font-size: 13.5px; }
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* ---- دکمه‌های بلوکی: طلاییِ قالب ---- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
a.wc-block-cart__submit-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 14px 22px !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-md) !important;
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700)) !important;
  color: #fff9ee !important;
  font-family: var(--font-h) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: filter .18s;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { filter: brightness(1.06); }

/* متنِ داخلِ دکمه در یک span جدا است و باید رنگ را از دکمه بگیرد */
.wc-block-components-button__text { color: inherit !important; font: inherit; }
.wc-block-cart__submit-container { margin: 0; }
.wc-block-cart__submit { padding: 0; }

/* ---- کوپن تخفیف ----
   ساختار: .wc-block-components-totals-coupon.wc-block-components-panel
             > .wc-block-components-panel__button (شاملِ svg آیکون + متن) */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: var(--accent-700) !important;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 13.5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.wc-block-components-panel__button-icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.wc-block-components-totals-coupon__form { margin-top: 10px; }

/* دکمهٔ «اعمال کردن» — پیش‌فرضِ ووکامرس گردیِ کوچکِ خودش را دارد که با بقیهٔ
   دکمه‌های سایت (var(--radius-md)) هم‌خانواده نیست. */
.wc-block-components-totals-coupon__button.wc-block-components-button {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ---- فرم‌های تسویه ---- */
.wc-block-checkout__form fieldset,
.wc-block-checkout__form > div {
  border: none;
  padding: 0;
  margin: 0 0 4px;
}

.wc-block-components-checkout-step {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 18px 20px !important;
  margin-bottom: 16px;
  background: var(--bg);
}

.wc-block-components-checkout-step__title {
  font-family: var(--font-h) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--text) !important;
}

.wc-block-components-checkout-step__description { color: var(--neutral-600); font-size: 12.5px; }

/* ورودی‌های بلوکی */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"] {
  border: 1px solid var(--divider) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  padding: 14px 14px 6px !important;
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus { outline: none !important; box-shadow: 0 0 0 1px var(--accent-400) !important; border-color: var(--accent-400) !important; }

.wc-block-components-text-input label { color: var(--neutral-600) !important; font-family: var(--font-b) !important; }

/* روش‌های پرداخت/ارسال */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  padding: 12px 14px !important;
  transition: border-color .18s;
}

.wc-block-components-radio-control__option:hover { border-color: var(--accent-400); }

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-100);
}

.wc-block-components-radio-control__input:checked { accent-color: var(--accent); }
.wc-block-components-radio-control__label { font-weight: 600; color: var(--text); }

/* اعلان‌ها */
.wc-block-components-notice-banner {
  border-radius: var(--radius-lg) !important;
  font-size: 13.5px;
}

/* ⚠ اسنک‌بارِ اعلان داخلِ ستونِ کناری با عرضِ کلِ صفحه رندر می‌شود و از ستون
   بیرون می‌زند؛ چون خودش fixed است، عرضِ ستون نباید رویش اثر بگذارد. */
.wc-block-components-notice-snackbar-list { max-width: 100%; }

/* سبد خالی */
.wp-block-woocommerce-empty-cart-block { padding: 20px 0 40px; }
.wc-block-cart__empty-cart__title { font-family: var(--font-h) !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product { list-style: none; margin: 0; float: none; width: auto; }
/* =========================================================
   پایان: سبد و پرداختِ بلوکی
   ========================================================= */


/* =========================================================
   شروع: ریسپانسیو
   ========================================================= */
@media (max-width: 1080px) {
  .woocommerce-cart .wc-page-inner,
  .woocommerce-checkout .wc-page-inner,
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }

  .cart_totals,
  .woocommerce-checkout-review-order,
  .woocommerce-MyAccount-navigation { position: static; }

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

  /* ⚠ در دسکتاپ منو و محتوا صریحاً در سطرِ ۱ و ستون‌های ۱ و ۲ قفل شده‌اند تا
     عنصرهای ناخواسته جابه‌جایشان نکنند. همان قفل در موبایل باعث می‌شد با وجودِ
     تک‌ستونه‌شدنِ گرید، باز هم کنارِ هم بمانند. اینجا آزاد می‌شوند تا زیرِ هم بیفتند. */
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 1;
    grid-row: auto;
  }

  /* منوی حساب در موبایل: شبکهٔ دوستونهٔ دکمه‌ای، به‌جای فهرست عمودیِ بلند */
  .woocommerce-MyAccount-navigation { padding: 12px; }

  .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .woocommerce-MyAccount-navigation li.is-active a { border-color: var(--accent); }

  .wc-assurance { grid-template-columns: repeat(2, 1fr); }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(3, 1fr); }
}

/* ⚠ خودِ بلوک‌ها زیر ۷۰۰ پیکسل تک‌ستونه می‌شوند؛ چسبندگیِ ستونِ کناری در آن حالت
   بی‌معنی است و روی iOS باعث پرشِ اسکرول می‌شود. */
@media (max-width: 780px) {
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar { position: static; }

  .wc-block-cart__main,
  .wc-block-checkout__main { padding: 14px 16px; }

  .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
  .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block { padding: 16px; }

  .wc-block-components-checkout-step { padding: 14px 16px !important; }
}

@media (max-width: 640px) {
  .wc-hero .archive-hero-inner { padding: 26px 0 24px; }
  .wc-steps { gap: 6px; }
  .wc-step { padding: 6px; font-size: 11.5px; }
  .wc-step-lbl { display: none; }
  .wc-step.is-current .wc-step-lbl { display: inline; }

  .woocommerce-Addresses { grid-template-columns: 1fr; }

  #customer_details,
  .woocommerce-checkout-review-order,
  .woocommerce-MyAccount-content { padding: 16px; }

  .woocommerce-cart-form { padding: 4px 12px 12px; }

  /* جدول سبد در موبایل ردیفی می‌شود */
  .wc-page .shop_table thead { display: none; }
  .wc-page .woocommerce-cart-form__contents,
  .wc-page .woocommerce-cart-form__contents tbody,
  .wc-page .woocommerce-cart-form__cart-item { display: block; }

  .wc-page .woocommerce-cart-form__cart-item {
    border-bottom: 1px solid var(--divider);
    padding: 12px 0;
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 10px;
    align-items: center;
  }

  .wc-page .woocommerce-cart-form__cart-item td { border: none; padding: 0; }
  .wc-page .woocommerce-cart-form__cart-item .product-remove { grid-row: 1; grid-column: 3; }
  .wc-page .woocommerce-cart-form__cart-item .product-thumbnail { grid-row: 1; grid-column: 1; }
  .wc-page .woocommerce-cart-form__cart-item .product-name { grid-row: 1; grid-column: 2; }
  .wc-page .woocommerce-cart-form__cart-item .product-price,
  .wc-page .woocommerce-cart-form__cart-item .product-quantity,
  .wc-page .woocommerce-cart-form__cart-item .product-subtotal { grid-column: 1 / -1; }

  .wc-page .coupon input[type="text"] { max-width: none; flex: 1; }

  .wc-assurance { grid-template-columns: 1fr; }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .wc-block-cart-items__header { display: none; }
}


/* =========================================================
   شروع: ردیفِ سبد در حالتِ باریک (is-mobile / is-medium)
   ⚠⚠ این بخش عمداً داخل مدیاکوئری نیست. چیدمانِ باریکِ سبد را خودِ
   ووکامرس با «عرضِ کانتینر» می‌سازد نه عرضِ پنجره: جاوااسکریپتش کلاسِ
   is-mobile / is-medium / is-large را روی .wc-block-cart می‌گذارد و
   قواعدش را به همان کلاس می‌بندد. پس هر قاعده‌ای که داخل @media نوشته
   شود، هم زمانِ اشتباه فعال می‌شود هم وزنِ کمتری دارد.

   قاعدهٔ خودِ ووکامرس ردیف را «۸۰px ۱۳۲px» می‌کند و به سلولِ مجموع
   grid-row-start:1 می‌دهد. نتیجه اینکه سلولِ مجموع دقیقاً روی نامِ محصول
   می‌افتد — همان درهم‌ریختگیِ متن‌ها در موبایل. وزنِ آن انتخابگر (۰,۴,۲)
   از قواعدِ سادهٔ ما بیشتر بود، برای همین اصلاحاتِ قبلی فقط نصفه می‌نشست
   (grid-column اعمال می‌شد ولی grid-row نه) و همین همپوشانی را می‌ساخت.
   اینجا با پیشوندِ .wc-page وزن یک پله بالاتر می‌رود تا کامل برنده شود.
   ========================================================= */
.wc-page .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-page .is-medium table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  padding: 10px;
}

.wc-page .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
.wc-page .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  padding: 0 !important;
}

.wc-page .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img,
.wc-page .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { width: 72px; height: 72px; }

.wc-page .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-page .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0 !important;
}

/* «مجموع» به سطرِ دوم و تمام‌عرض می‌رود تا هرگز روی نامِ محصول نیفتد */
.wc-page .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-page .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 4px;
  padding: 10px 0 0 !important;
  border-top: 1px dashed var(--divider);
  text-align: start;
  white-space: normal;
}

.wc-page .is-mobile .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-page .is-medium .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* در عرضِ کم قیمتِ قبلی و نهایی زیرِ هم بنشینند تا روی هم نیفتند */
.wc-page .is-mobile .wc-block-cart-item__prices { flex-direction: column; align-items: flex-start; gap: 2px; }
.wc-page .is-mobile .wc-block-components-product-name { font-size: 13.5px; }
/* =========================================================
   پایان: ردیفِ سبد در حالتِ باریک
   ========================================================= */
/* =========================================================
   پایان: ریسپانسیو
   ========================================================= */