/* ==========================================================================
   ووکامرس.

   قاعده‌ی این فایل: هیچ قالبی از woocommerce/templates کپی نمی‌شود.
   مارک‌آپ خودِ ووکامرس می‌ماند و اینجا شکل طرح v9 را می‌گیرد.
   دلیلش نگهداری است — هر فایلی که کپی شود، در به‌روزرسانی بعدی ووکامرس
   یا بی‌صدا قدیمی می‌ماند یا هشدار «قالب منسوخ» می‌دهد.

   همه‌ی رنگ‌ها از توکن می‌آیند. رنگ ثابت اینجا یعنی سوراخ در حالت تیره.
   ویژگی‌های جهت‌دار منطقی‌اند (inline-start و نه left) چون سایت RTL است.
   ========================================================================== */

/* ── شبکه‌ی محصولات ─────────────────────────────────────────────────────
   ووکامرس <ul class="products"> می‌سازد. به‌جای اینکه با یک div اضافه
   دورش بپیچیم (که گرید را روی عنصر اشتباه می‌گذاشت)، خودِ ul گرید می‌شود.
   ---------------------------------------------------------------------- */
.woocommerce ul.products,
ul.products{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products::before,
ul.products::after{ content: none; }          /* clearfix قدیمی ووکامرس */
ul.products li.product{
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  clear: none;
  list-style: none;
}
/* کارت باید کل ارتفاع خانه را بگیرد وگرنه ردیف ناهموار می‌شود */
ul.products li.product > .card{ block-size: 100%; }

.columns-2 ul.products,
ul.products.columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns-4 ul.products,
ul.products.columns-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px){
  .woocommerce ul.products,
  ul.products,
  ul.products.columns-2,
  ul.products.columns-4{ grid-template-columns: 1fr; }
}

/* ── نوار «تعداد نتیجه» و «مرتب‌سازی» ──────────────────────────────────── */
.woocommerce-notices-wrapper:empty{ display: none; }

.woocommerce-result-count,
.woocommerce-ordering{ margin: 0; }
.woocommerce-result-count{ font-size: 13.5px; color: var(--muted); }
.woocommerce-ordering select{
  font: inherit;
  font-size: 13.5px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}

/* ── صفحه‌بندی ووکامرس با ظاهر .pager ─────────────────────────────────── */
.woocommerce-pagination ul.page-numbers{
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: center;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
  flex-wrap: wrap;
}
.woocommerce-pagination ul.page-numbers li{ border: 0; margin: 0; }
.woocommerce-pagination .page-numbers{
  min-inline-size: 38px;
  block-size: 38px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
}
.woocommerce-pagination .page-numbers.current{
  background: var(--navy);
  border-color: var(--navy);
  color: var(--navy-ink);
}

/* ── پیام‌ها ────────────────────────────────────────────────────────────
   ووکامرس آیکن را با ::before می‌سازد و padding چپ‌محور می‌دهد؛ هر دو
   در RTL غلط می‌افتند، پس صفر می‌شوند و طرح خودمان جایش می‌نشیند.
   ---------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 17px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--navy-soft);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.9;
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after{ content: none; }

.woocommerce-message{ border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.woocommerce-error{
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}
.woocommerce-error li{ list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button{ margin-inline-start: auto; }

/* ── دکمه‌های ووکامرس با ظاهر دکمه‌ی طرح ────────────────────────────────
   .btn طرح روی <a> و <button> است؛ ووکامرس کلاس .button می‌دهد. به‌جای
   افزودن کلاس با PHP در ده جا، همین‌جا یک‌بار ترجمه می‌شود.
   ---------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--cta);
  color: var(--on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{ filter: brightness(1.06); }

/* دکمه‌های ثانویه: «به‌روزرسانی سبد»، «ادامه خرید» */
.woocommerce button[name="update_cart"],
.woocommerce a.button.wc-backward{
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.woocommerce button[name="update_cart"][disabled]{ opacity: .5; cursor: default; }

/* ── فرم‌ها ─────────────────────────────────────────────────────────────── */
.woocommerce form .form-row{
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 15px;
  padding: 0;
}
.woocommerce form .form-row label{ font-size: 13.5px; font-weight: 700; color: var(--ink); }
.woocommerce form .form-row .required{ color: var(--red); text-decoration: none; border: 0; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce input.input-text,
.woocommerce textarea{
  inline-size: 100%;
  min-block-size: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
}
.woocommerce textarea{ min-block-size: 110px; }
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible{
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
/* ایمیل و شماره همیشه چپ‌به‌راست، حتی داخل صفحه‌ی RTL */
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="password"]{ direction: ltr; text-align: start; }

.woocommerce form.checkout .col2-set,
.woocommerce .col2-set{ display: block; inline-size: 100%; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{ inline-size: 100%; float: none; }

/* ── جدول‌ها: سبد خرید، سفارش‌ها، دانلودها ─────────────────────────────── */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes{
  inline-size: 100%;
  min-inline-size: 520px;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  margin: 0;
  font-size: 14px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding: 14px 16px;
  text-align: start;
  border: 0;
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce table.shop_table th{
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  background: transparent;
}
.woocommerce table.shop_table tbody tr:last-child td{ border-block-end: 0; }
.woocommerce table.shop_table .product-thumbnail img{
  inline-size: 52px;
  block-size: 40px;
  object-fit: cover;
  border-radius: 9px;
}
.woocommerce table.shop_table .product-name a{ font-weight: 700; }
.woocommerce table.shop_table td.product-remove a.remove{
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--pill);
  background: var(--hover);
  color: var(--red);
  font-size: 18px;
  text-decoration: none;
}

/* جدول باید افقی اسکرول شود، نه اینکه ستون کناری را از هم بپاشد */
.woocommerce-cart-form,
.woocommerce-orders-table__wrapper,
.woocommerce-MyAccount-content .woocommerce-table{ overflow-x: auto; }

.woocommerce .quantity .qty{
  inline-size: 78px;
  min-block-size: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

/* کد تخفیف */
.woocommerce .cart .actions .coupon{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-start: 15px;
}
.woocommerce .cart .actions .coupon .input-text{ flex: 1; min-inline-size: 180px; inline-size: auto; }
.woocommerce .cart .actions label{ display: none; }

/* ── جمع سفارش و بازبینی پرداخت با ظاهر .totals ────────────────────────── */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order{
  padding: 19px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout-review-order h3{ font-size: 14px; margin: 0 0 12px; }

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order table.shop_table{ min-inline-size: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td{
  padding: 9px 0;
  font-size: 14px;
}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td,
.woocommerce-checkout-review-order tr.order-total th,
.woocommerce-checkout-review-order tr.order-total td{
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.woocommerce .cart_totals tr.order-total .amount,
.woocommerce-checkout-review-order tr.order-total .amount{ font-size: 19px; }
.woocommerce .wc-proceed-to-checkout{ padding: 0; margin-block-start: 14px; }
.woocommerce .wc-proceed-to-checkout a.checkout-button{ inline-size: 100%; }

#payment{ background: transparent; border-radius: 0; margin-block-start: 15px; }
#payment ul.payment_methods{
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}
#payment ul.payment_methods li{
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 13.5px;
}
#payment ul.payment_methods li input[type="radio"]{ accent-color: var(--navy); margin-inline-end: 8px; }
#payment ul.payment_methods li label{ font-weight: 700; }
#payment div.payment_box{
  background: var(--hover);
  color: var(--ink-2);
  font-size: 13px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
}
#payment div.payment_box::before{ content: none; }
#payment .place-order{ padding: 0; margin-block-start: 14px; }
#payment #place_order{ inline-size: 100%; }
.woocommerce-terms-and-conditions-wrapper{ margin-block-start: 14px; font-size: 13px; line-height: 1.9; }

/* ── تک محصول ───────────────────────────────────────────────────────────
   ستون راست (خلاصه‌ی خرید) چسبان می‌شود؛ همان چیدمانی که در طرح تأیید شد.
   ---------------------------------------------------------------------- */
.single-product div.product{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}
.single-product div.product::before,
.single-product div.product::after{ content: none; }

.single-product div.product > .woocommerce-product-gallery{
  grid-column: 1;
  inline-size: 100%;
  float: none;
  margin: 0;
}
.single-product div.product > .summary{
  grid-column: 2;
  grid-row: 1 / span 2;
  inline-size: 100%;
  float: none;
  margin: 0;
  position: sticky;
  inset-block-start: 84px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* بدون grid-row صریح، هر چیزی که بعد از گالری بیاید به ردیف دوم می‌افتد
   و ستون خلاصه یک ناحیه‌ی خالی بزرگ کنارش می‌سازد. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .up-sells,
.single-product div.product > .related,
.single-product div.product > .woocommerce-product-details__short-description{
  grid-column: 1;
}

.single-product div.product .summary .product_title{
  font-size: 20px;
  line-height: 1.7;
  margin: 10px 0 0;
}
.single-product div.product .summary p.price,
.single-product div.product .summary span.price{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 16px 0 0;
  color: var(--ink);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.single-product div.product .summary p.price del{
  font-size: 14px;
  color: var(--muted);
  opacity: 1;
}
.single-product div.product .summary p.price ins{ text-decoration: none; }
.single-product div.product .summary form.cart{ margin: 14px 0 0; }
.single-product div.product .summary form.cart .button{ inline-size: 100%; margin-block-start: 10px; }
.single-product div.product .summary .product_meta{
  margin-block-start: 15px;
  padding-block-start: 15px;
  border-block-start: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.single-product div.product .onsale{
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  min-block-size: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 4px 11px;
  border-radius: var(--pill);
  background: var(--red);
  color: var(--on-red);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.9;
}
.single-product div.product .woocommerce-product-gallery{ position: relative; }
.single-product div.product .woocommerce-product-gallery img{ border-radius: var(--r); }
.single-product div.product .woocommerce-product-gallery__wrapper{ margin: 0; }
.single-product .woocommerce-tabs ul.tabs{
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  list-style: none;
}
.single-product .woocommerce-tabs ul.tabs::before{ content: none; }
.single-product .woocommerce-tabs ul.tabs li{
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{ content: none; }
.single-product .woocommerce-tabs ul.tabs li a{
  display: block;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.single-product .woocommerce-tabs ul.tabs li.active{ background: var(--navy); border-color: var(--navy); }
.single-product .woocommerce-tabs ul.tabs li.active a{ color: var(--navy-ink); }

@media (max-width: 1080px){
  .single-product div.product{ grid-template-columns: 1fr; }
  .single-product div.product > .summary{
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .up-sells{ grid-column: 1; }
}

/* ── چیدمان دو ستونی سبد، پرداخت و حساب ─────────────────────────────────
   با CSS و نه با قلاب. قلاب‌های ووکامرس داخل <form> و <nav> هستند و هر
   ظرفی که با آن‌ها باز و بسته شود تگ‌ها را روی هم می‌اندازد.

   نکته: نوار پیام‌ها خواهر همین ستون‌هاست، پس اگر صریح تمام‌عرض نشود
   خودش یک خانه‌ی گرید می‌گیرد و کنار سبد می‌نشیند.
   ---------------------------------------------------------------------- */
.woocommerce-cart .woocommerce,
.logged-in.woocommerce-account .woocommerce{
  display: grid;
  gap: 26px;
  align-items: start;
}
.woocommerce-cart .woocommerce{ grid-template-columns: minmax(0, 1fr) 320px; }
/* فقط برای کاربر واردشده: در حالت خروج، ووکامرس فرم ورود را داخل همین
   ظرف می‌گذارد و بدون این قید، فرم در ستون ۳۲۰ پیکسلی له می‌شود. */
.logged-in.woocommerce-account .woocommerce{ grid-template-columns: 320px minmax(0, 1fr); }

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .steps{ grid-column: 1 / -1; }

/* سبد خالی: پیام و دکمه نباید در ستون باریک له شوند */
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop,
.woocommerce-cart .woocommerce > .wc-empty-cart-message{ grid-column: 1 / -1; }

.woocommerce-cart .cart-collaterals{ inline-size: 100%; }
.woocommerce-cart .cart-collaterals .cross-sells{ inline-size: 100%; float: none; margin-block-start: 22px; }

/* پرداخت: فرم اطلاعات در ستون پهن، بازبینی سفارش چسبان در ستون باریک */
form.checkout.woocommerce-checkout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}
form.checkout.woocommerce-checkout > #customer_details{ grid-column: 1; grid-row: 1 / span 3; }
form.checkout.woocommerce-checkout > #order_review_heading{ grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; }
form.checkout.woocommerce-checkout > #order_review{ grid-column: 2; grid-row: 2; position: sticky; inset-block-start: 84px; }
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup{ grid-column: 1 / -1; grid-row: auto; }

@media (max-width: 1080px){
  .woocommerce-cart .woocommerce,
  .logged-in.woocommerce-account .woocommerce,
  form.checkout.woocommerce-checkout{ grid-template-columns: 1fr; }
  form.checkout.woocommerce-checkout > #customer_details,
  form.checkout.woocommerce-checkout > #order_review_heading,
  form.checkout.woocommerce-checkout > #order_review{
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ── حساب کاربری ────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{ inline-size: 100%; float: none; }

.woocommerce-MyAccount-navigation{
  padding: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.woocommerce-MyAccount-navigation ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
.woocommerce-MyAccount-navigation li a{
  display: block;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.woocommerce-MyAccount-navigation li.is-active a{
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 700;
}
.woocommerce-MyAccount-navigation li--customer-logout a{ color: var(--red); }

.woocommerce-MyAccount-content > p:first-child{ font-size: 14px; line-height: 1.9; }
.woocommerce-EditAccountForm fieldset{
  margin-block-start: 20px;
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--line);
  padding-block-start: 18px;
}
.woocommerce-EditAccountForm legend{ font-size: 14px; font-weight: 800; padding: 0; }

/* فرم ورود و ثبت‌نام */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce form.login,
.woocommerce form.register{
  max-inline-size: 480px;
  margin-inline: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.woocommerce form.login .woocommerce-form-login__rememberme,
.woocommerce form.register .woocommerce-form__label-for-checkbox{
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
}

/* ── صفحه‌ی تشکر و جزئیات سفارش ────────────────────────────────────────── */
.woocommerce-order-overview{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 13px;
  margin: 0 0 22px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  list-style: none;
}
.woocommerce-order-overview li{
  border: 0 !important;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  text-transform: none;
}
.woocommerce-order-overview li strong{
  display: block;
  margin-block-start: 5px;
  font-size: 15px;
  color: var(--ink);
}
.woocommerce-thankyou-order-received{
  font-size: 16px;
  font-weight: 700;
  color: var(--ok);
}