/* =========================================================
   WooCommerce core pages: Cart / Checkout / My Account
   (No PHP template overrides for these — see spec §18 note on
   avoiding unnecessary overrides — styled via CSS + hook wrapper instead.)
   ========================================================= */

.ds-woocommerce-container table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.ds-woocommerce-container table.shop_table th {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
  font-weight: 700;
  padding: 0.85rem 1rem;
  text-align: right;
}

.ds-woocommerce-container table.shop_table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: middle;
}

.ds-woocommerce-container table.shop_table img {
  border-radius: var(--ds-radius-sm);
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* Cart item "قیمت" column now prints the same old/new price comparison as
   the product card (see dairy_shop_cart_item_price_with_comparison() in
   inc/woocommerce.php) - always stacked here regardless of screen width
   since this table column is narrow at every size, not just under the
   480px breakpoint .ds-price-compare itself switches to column at. */
.ds-woocommerce-container table.shop_table td.product-price .price {
  display: block;
}

.ds-woocommerce-container
  table.shop_table
  td.product-price
  .price.ds-price-compare {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.ds-woocommerce-container table.shop_table td.product-price .price del {
  display: block;
  color: var(--ds-muted);
  font-weight: 400;
  font-size: var(--ds-fs-xs);
  text-decoration: line-through;
  margin: 0 0 0.15rem;
}

.ds-woocommerce-container table.shop_table td.product-price .price ins {
  display: block;
  text-decoration: none;
  font-weight: 700;
}

.ds-woocommerce-container .cart-collaterals .cart_totals {
  background: var(--ds-background);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.5rem;
}

.ds-woocommerce-container .cart_totals table {
  width: 100%;
}

.ds-woocommerce-container .cart_totals table td,
.ds-woocommerce-container .cart_totals table th {
  padding: 0.6rem 0.85rem 0.6rem 0;
  font-size: var(--ds-fs-sm);
  border-bottom: 1px solid var(--ds-border);
}

.ds-woocommerce-container .wc-proceed-to-checkout .checkout-button,
.ds-woocommerce-container #place_order {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ds-primary);
  color: var(--ds-white) !important;
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.85rem;
  font-weight: 700;
}

.ds-woocommerce-container .wc-proceed-to-checkout .checkout-button:hover,
.ds-woocommerce-container #place_order:hover {
  background: var(--ds-primary-dark);
}

.ds-woocommerce-container .quantity .qty {
  width: 64px;
  text-align: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.4rem;
}

/* Checkout form fields */
.ds-woocommerce-container .form-row input.input-text,
.ds-woocommerce-container .form-row select,
.ds-woocommerce-container .form-row textarea {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem;
  background: var(--ds-white);
}

.ds-woocommerce-container .form-row input.input-text:focus,
.ds-woocommerce-container .form-row select:focus,
.ds-woocommerce-container .form-row textarea:focus {
  border-color: var(--ds-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-primary-light);
}

#order_review,
.woocommerce-checkout-review-order {
  background: var(--ds-background);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.5rem;
  box-shadow: var(--ds-shadow-sm);
}

.woocommerce-checkout #payment {
  background: var(--ds-primary-light);
  border-radius: var(--ds-radius-md);
  padding: 1.25rem;
}

/* =========================================================
   Checkout ([woocommerce_checkout] shortcode) — full redesign
   ========================================================= */
/* Everything below targets the CLASSIC checkout markup WooCommerce has
   used for years (#customer_details, .form-row, ul.payment_methods, etc.)
   — the markup [woocommerce_checkout] renders. It's deliberately separate
   from (and irrelevant to) the newer Blocks Checkout block's own
   React-rendered classes (wc-block-checkout__...), which this file does
   not style. No PHP template override needed — same approach as the rest
   of this file (CSS + the .ds-woocommerce-container wrapper from page.php). */

/* --- Notices (failed-payment / validation / info messages) --- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-fs-sm);
  border-inline-start: 4px solid transparent;
}

.woocommerce-error {
  background: #fbeae9;
  color: var(--ds-danger);
  border-inline-start-color: var(--ds-danger);
}

.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-message {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
  border-inline-start-color: var(--ds-success);
}

.woocommerce-info {
  background: #fbf3e4;
  color: var(--ds-warning);
  border-inline-start-color: var(--ds-warning);
}

.woocommerce-message,
.woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-info .wc-forward {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* --- Overall two-column layout: details on one side, order review +
   payment on the other. Grid (not float), so RTL just follows the
   document direction automatically — no manual left/right flipping. --- */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  /* A tighter, more balanced ratio than a plain 1.3fr/1fr split, plus a
       narrower gap - reads as one compact unit on desktop rather than two
       panels stretched apart. */
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      "details heading"
      "details review";
    column-gap: 2rem;
    align-items: start;
  }

  .woocommerce-checkout form.checkout #customer_details {
    grid-area: details;
  }

  .woocommerce-checkout form.checkout #order_review_heading {
    grid-area: heading;
    margin-top: 0;
  }

  .woocommerce-checkout form.checkout #order_review,
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order {
    grid-area: review;
    /* Order summary + payment stay in view while filling out the
           (usually taller) details form next to it - the total the
           customer is about to pay is never scrolled out of sight. */
    position: sticky;
    top: calc(var(--ds-header-height) + 1.5rem);
  }

  /* Slightly less vertical padding than the mobile/base 1.5rem on both
       cards - keeps the two panels feeling compact side by side instead
       of tall and airy. */
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order {
    padding: 1.25rem 1.5rem;
  }
}

/* --- #customer_details gets the same card treatment as the order-review
   panel next to it (white instead of tinted, so the two stay visually
   distinct at a glance: form = white card, summary = soft tinted card). --- */
.woocommerce-checkout #customer_details {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.5rem;
  box-shadow: var(--ds-shadow-sm);
}

/* --- Section headings ("Billing details", "Ship to a different
   address?", "Additional information", "Your order") --- */
.woocommerce-checkout h3 {
  font-size: var(--ds-fs-lg);
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 1rem;
}

.woocommerce-checkout #ship-to-different-address {
  margin-bottom: 1rem;
}

.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--ds-fs-lg);
}

/* --- Billing/shipping field groups: 2-up on wider screens via
   form-row-first/form-row-last, full width via form-row-wide.
   IMPORTANT: the flex container has to be the actual DIRECT PARENT of the
   <p class="form-row ..."> elements - that's
   .woocommerce-billing-fields__field-wrapper /
   .woocommerce-shipping-fields__field-wrapper (one level *inside* .col-1/
   .col-2, below the <h3> heading), not .col-1/.col-2 themselves. Putting
   display:flex on .col-1/.col-2 instead (previous version of this rule)
   made THAT div the flex item - collapsing it to its own content width
   (a flex item's main-axis size isn't "full width" by default the way a
   block element's is) and left the form-rows one level down completely
   unaffected by any of the flex/gap rules below, so they just stacked as
   plain full-width paragraphs - a single narrow column instead of the
   intended two-column field layout. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

/* Bootstrap 5.3 (which this theme loads globally) defines its OWN ".col-1"
   / ".col-2" grid-width utility classes (flex:0 0 auto; width:8.33%/16.67%
   respectively - see assets/vendor/bootstrap/bootstrap.rtl.min.css). Those
   happen to have the exact same class names WooCommerce's checkout template
   gives its billing/shipping wrapper divs - a pure naming collision, nothing
   to do with anything either plugin/theme author did wrong on purpose. The
   Bootstrap rule was winning (nothing overrode its width), which is what
   squeezed the whole billing block down to ~8% of the page width - the
   "everything crammed into one narrow column" seen after the previous fix.
   The #customer_details.col-1/.col-2 selector below has higher specificity
   (ID + class vs. Bootstrap's plain single class) so it reliably wins
   regardless of stylesheet load order. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.woocommerce-checkout .form-row {
  flex: 1 1 100%;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

.woocommerce-checkout .form-row label .required {
  color: var(--ds-danger);
  text-decoration: none;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--ds-danger);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select {
  border-color: var(--ds-success);
}

/* Safety net for inc/checkout-fields.php's Iran-only billing/shipping
   country fields: that filter already turns the field itself into an
   invisible type="hidden" input and empties its label, but if a
   WooCommerce version ever still renders the wrapping <p class="form-row">
   (with nothing visible left inside it) this guarantees it takes up no
   space either way. */
#billing_country_field,
#shipping_country_field {
  display: none !important;
}

/* --- Delivery method picker ("ارسال با پست" / "دریافت حضوری") added by
   inc/checkout-pickup.php --- */
#dairy-shop-delivery-method {
  margin-bottom: 1.5rem;
}

.dairy-shop-delivery-options,
.dairy-shop-pickup-locations {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dairy-shop-delivery-options li,
.dairy-shop-pickup-locations li {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-white);
  padding: 0.75rem 1rem;
  transition:
    border-color var(--ds-transition),
    background-color var(--ds-transition);
}

.dairy-shop-delivery-options li:has(input:checked),
.dairy-shop-pickup-locations li:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.dairy-shop-delivery-options label,
.dairy-shop-pickup-locations label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--ds-fs-sm);
}

.dairy-shop-delivery-options input[type="radio"],
.dairy-shop-pickup-locations input[type="radio"] {
  accent-color: var(--ds-primary);
  margin-top: 0.15rem;
}

.dairy-shop-pickup-locations {
  margin-inline-start: 1.5rem;
  margin-top: -0.2rem;
}

#dairy-shop-delivery-method.is-pickup-only .dairy-shop-pickup-locations {
  margin-inline-start: 0;
  margin-top: 0;
}

.dairy-shop-pickup-locations small {
  color: var(--ds-muted);
}

/* Pickup: no delivery address, so hide WooCommerce's "shipping to …"
   line, the cart "change address" calculator, and checkout street/city
   fields that read as a shipping destination. */
body.ds-pickup-selected .woocommerce-shipping-destination,
body.ds-pickup-selected .woocommerce-shipping-calculator,
body.ds-pickup-selected .shipping-calculator-button,
body.ds-pickup-selected .woocommerce-shipping-fields,
body.ds-pickup-selected #ship-to-different-address,
body.ds-pickup-selected #billing_address_1_field,
body.ds-pickup-selected #billing_address_2_field,
body.ds-pickup-selected #billing_city_field,
body.ds-pickup-selected #billing_state_field,
body.ds-pickup-selected #billing_postcode_field,
body.ds-pickup-selected #shipping_address_1_field,
body.ds-pickup-selected #shipping_address_2_field,
body.ds-pickup-selected #shipping_city_field,
body.ds-pickup-selected #shipping_state_field,
body.ds-pickup-selected #shipping_postcode_field,
body.ds-pickup-selected .ds-pickup-hide-address {
  display: none !important;
}

.ds-pickup-billing-note {
  display: none;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  font-size: var(--ds-fs-sm);
  color: var(--ds-primary-dark);
  background: var(--ds-primary-light);
  border-radius: var(--ds-radius-sm);
}

body.ds-pickup-selected .ds-pickup-billing-note {
  display: block;
}

/* --- fieldset (e.g. optional "create an account" fields) --- */
.woocommerce-checkout fieldset {
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 1rem;
  margin-top: 1rem;
  flex: 1 1 100%;
}

.woocommerce-checkout fieldset legend {
  padding: 0 0.5rem;
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

/* --- Checkboxes (ship-to-different-address, create account, terms) ---
   accent-color re-themes the native checkbox with almost no code and no
   RTL edge cases to worry about (unlike a fully custom checkbox). */
.woocommerce-checkout input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ds-primary);
  vertical-align: middle;
  margin-inline-end: 0.4rem;
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ds-fs-sm);
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 1rem 0 1.5rem;
}

/* --- Coupon form --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
  color: var(--ds-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  background: var(--ds-background);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.woocommerce-checkout .checkout_coupon .form-row {
  flex: 1 1 220px;
  margin-bottom: 0;
}

/* --- select2 (WooCommerce loads it by default for the country/state
   dropdowns on checkout, regardless of theme) --- */
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem;
  background: var(--ds-white);
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--ds-text);
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
  height: 100%;
  top: 0;
}

.woocommerce-checkout .select2-dropdown {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-base);
}

.woocommerce-checkout
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ds-primary);
}

/* --- Order review table: emphasize the grand total row (rest of the
   table is already covered by the generic ".ds-woocommerce-container
   table.shop_table" rules near the top of this file, since #order_review
   is a shop_table too). --- */
.woocommerce-checkout-review-order-table tbody {
  border-bottom: 2px solid var(--ds-border);
}

.woocommerce-checkout-review-order-table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-weight: 700;
  font-size: var(--ds-fs-lg);
  color: var(--ds-primary-dark);
  border-bottom: none;
}

/* --- Payment methods: each gateway as a selectable card. :has() is a
   progressive enhancement — on a browser without it the list just stays
   plainly bordered instead of highlighting the checked one, still fully
   usable. --- */
.woocommerce-checkout ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-white);
  padding: 0.9rem 1rem;
  transition:
    border-color var(--ds-transition),
    background-color var(--ds-transition);
}

.woocommerce-checkout
  ul.payment_methods
  li.wc_payment_method:has(input:checked) {
  border-color: var(--ds-primary);
  background: var(--ds-primary-light);
}

.woocommerce-checkout ul.payment_methods input[name="payment_method"] {
  accent-color: var(--ds-primary);
  margin-inline-end: 0.5rem;
}

.woocommerce-checkout ul.payment_methods label {
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.woocommerce-checkout ul.payment_methods img {
    height: 32px;
    margin-inline-start: 0.4rem;
    margin-right: auto;
}

.woocommerce-checkout .payment_box {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--ds-background);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

.woocommerce-checkout .payment_box p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  text-align: center;
}

/* Remove WC core's default CSS triangle pointer on .payment_box — its
   fixed left-offset positioning was written for a plain LTR stacked list
   and looks wrong combined with the card treatment above under RTL. */
.woocommerce-checkout .payment_box::before {
  display: none;
}

/* --- Place order button + the jQuery blockUI overlay WooCommerce shows
   over the form during AJAX (address validation, totals update, order
   submit) — replaced with a spinner that matches the theme instead of
   the default plain gray box + generic spinner gif. --- */
.woocommerce-checkout #place_order {
  font-size: var(--ds-fs-lg);
  padding: 1rem;
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
}

.woocommerce-checkout .form-row.place-order::after {
  content: "پرداخت امن و رمزنگاری‌شده";
  display: block;
  text-align: center;
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  margin-top: 0.6rem;
}

.woocommerce-checkout #place_order:disabled,
.woocommerce-checkout #place_order.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.woocommerce-checkout .blockUI.blockOverlay {
  background: rgba(248, 250, 248, 0.75) !important;
  border-radius: var(--ds-radius-md);
}

.woocommerce-checkout .blockUI.blockMsg {
  background: transparent !important;
  border: none !important;
}

.woocommerce-checkout .blockUI.blockMsg::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border: 3px solid var(--ds-primary-light);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-checkout-spin 0.7s linear infinite;
}

@keyframes ds-checkout-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   My Account — full redesign
   ========================================================= */
/* Real sidebar-nav + content layout. The ".ds-account-columns" class is printed
   directly by our woocommerce/myaccount/my-account.php template override (the actual
   internal file the [woocommerce_my_account] shortcode renders) — and only when the
   customer is logged in, since that's the only time the navigation sidebar is actually
   present as a sibling. The login/register/lost-password views never get this class at
   all and lay themselves out independently via ".u-columns.col2-set" below. */
.ds-account-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 768px) {
  .ds-account-columns {
    grid-template-columns: 260px 1fr;
  }
}

.woocommerce-MyAccount-navigation {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--ds-header-height) + var(--ds-topbar-height) + 1rem);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--ds-border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.35rem;
  font-weight: 600;
  font-size: var(--ds-fs-sm);
  color: var(--ds-text);
  transition:
    background-color var(--ds-transition),
    color var(--ds-transition);
}

.woocommerce-MyAccount-navigation ul li a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-border);
  flex-shrink: 0;
  transition: background-color var(--ds-transition);
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--ds-primary);
  color: var(--ds-white);
}

.woocommerce-MyAccount-navigation ul li.is-active a::before {
  background: var(--ds-white);
}

.woocommerce-MyAccount-content {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 1.75rem;
}

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

.woocommerce-MyAccount-content mark {
  background: none;
  color: var(--ds-primary-dark);
  font-weight: 700;
}

.woocommerce-MyAccount-content a {
  color: var(--ds-primary);
  font-weight: 600;
}

/* Dashboard welcome message (woocommerce/myaccount/dashboard.php override) */
.ds-account-welcome-greeting {
  font-size: var(--ds-fs-lg);
  margin: 0 0 0.5rem;
}

.ds-account-welcome-guide {
  color: var(--ds-muted);
  margin: 0 0 1.25rem;
}

.ds-account-welcome-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.ds-account-welcome-links a {
  display: inline-flex;
  align-items: center;
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary-dark);
  background: transparent;
  transition:
    background-color var(--ds-transition),
    color var(--ds-transition);
}

.ds-account-welcome-links a:hover {
  background: var(--ds-primary);
  color: var(--ds-white);
}

.ds-account-welcome-links .ds-account-welcome-logout a {
  border-color: var(--ds-border);
  color: var(--ds-muted);
}

.ds-account-welcome-links .ds-account-welcome-logout a:hover {
  background: var(--ds-background);
  color: var(--ds-danger, #c0392b);
  border-color: currentColor;
}

/* Orders table */
.ds-order-invoice-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

.ds-order-invoice-actions .btn-ds-outline {
  cursor: pointer;
}

.ds-order-invoice-actions .btn-ds-outline:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ds-order-invoice {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.25rem;
}

.ds-order-invoice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.ds-order-invoice-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

.ds-order-invoice-brand strong {
  font-size: var(--ds-fs-md);
  color: var(--ds-primary-dark);
}

.ds-order-invoice-label {
  font-weight: 700;
  color: var(--ds-primary-dark);
  background: var(--ds-primary-light);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--ds-fs-sm);
}

.woocommerce-orders-table__cell-order-status mark.order-status,
.order-status {
  display: inline-block;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* :not(.ds-add-to-cart-btn) — the wishlist tab's product-card grid renders our own
   "افزودن به سبد خرید" button (.ds-add-to-cart-btn) inside .woocommerce-MyAccount-content,
   and wc_product_class() also puts "button" on it, so without the exclusion this rule was
   overriding its background to transparent (invisible until :hover). */
.ds-woocommerce-container table.shop_table td.woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content a.order-actions-button,
.woocommerce-MyAccount-content .button:not(.ds-add-to-cart-btn) {
  display: inline-block;
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-primary);
  color: var(--ds-primary-dark);
  background: transparent;
}

/* WooCommerce prints pay/cancel as adjacent <a> tags with no whitespace.
   display:flex+gap on a <td> is ignored by table layout, so space them
   with a sibling margin that works in the cell and on view-order. */
.woocommerce-orders-table__cell-order-actions .button + .button,
.woocommerce-MyAccount-content a.order-actions-button + a.order-actions-button,
.woocommerce-MyAccount-content a.woocommerce-button.pay + a.woocommerce-button.cancel {
  margin-inline-start: 0.5rem;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-MyAccount-content a.order-actions-button:hover,
.woocommerce-MyAccount-content .button:hover:not(.ds-add-to-cart-btn) {
  background: var(--ds-primary);
  color: var(--ds-white);
}

/* Addresses
   Root cause of the boxes rendering extremely narrow (text wrapping almost one
   word per line) even after the title flex-wrap fix below: WooCommerce's own
   markup for this section (templates/myaccount/my-address.php) puts its OWN
   legacy float-based 2-column classes on the exact same elements our grid
   targets — the wrapper is actually
   `<div class="u-columns woocommerce-Addresses col2-set addresses">` and each
   box is `<div class="u-column1 col-1 woocommerce-Address">` (or u-column2/
   col-2). WooCommerce's default stylesheet gives .col2-set .col-1/.col-2 a
   `width: 48%; float: ...` of their own — so each box ended up 48% of a grid
   column that was ALSO already only half the container width, i.e. roughly a
   quarter of the real available width, which is what forced the heading and
   placeholder text to wrap so aggressively. !important neutralizes those
   inherited legacy classes so our grid layout is the only one actually in
   effect. Also: core's real heading tag here is <h2>, not <h3> — fixed below,
   the previous h3 selector was silently matching nothing. */
.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100% !important;
}

@media (min-width: 768px) {
  .woocommerce-Addresses {
    grid-template-columns: 1fr 1fr;
  }
}

.woocommerce-Address {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.25rem;
  box-sizing: border-box;
}

/* The heading ("آدرس صورتحساب"/"آدرس حمل و نقل") and the "افزودن/ویرایش آدرس"
   link both sat in a plain flex row with no wrap allowed. Flex items default to
   `min-width: auto`, meaning they refuse to shrink below their own text's
   natural width — so once the box got narrow enough (a 2-column grid on a
   mid-width screen, or the address column beside the account sidebar) the
   heading and the link no longer both fit on one line, and instead of wrapping
   onto a second line they overflowed and rendered on top of each other. Also
   pinned down against WooCommerce's own default Address-title styling, which
   is loaded with equal selector specificity and can otherwise win purely by
   coming later in the stylesheet queue. */
.woocommerce-Address-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ds-fs-base);
  margin: 0;
  overflow-wrap: break-word;
}

.woocommerce-Address-title a {
  flex-shrink: 0;
  font-size: var(--ds-fs-sm);
}

.woocommerce-Address address {
  font-style: normal;
  color: var(--ds-muted);
  line-height: 1.9;
  font-size: var(--ds-fs-sm);
}

/* Account details / edit-account form already inherits .form-row styling above */
.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.woocommerce-EditAccountForm legend {
  font-weight: 700;
  font-size: var(--ds-fs-base);
  margin-bottom: 1rem;
}

/* ---- Login / Register: separate tabs (template override at
   woocommerce/myaccount/form-login.php) ----
   "ورود به حساب کاربری" (login) and "ثبت‌نام سریع در وبسایت" (quick registration)
   are two full-width panels toggled by hidden radio inputs + label "tab buttons" —
   pure CSS, no JS required, so it still works with JavaScript disabled. */
.ds-auth-tabs {
  max-width: 560px;
  margin-inline: auto;
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 1.75rem;
  min-height: 532px;
}

.ds-auth-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ds-auth-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  background: var(--ds-background);
  border-radius: var(--ds-radius-md);
  padding: 0.35rem;
  margin-bottom: 1.5rem;
}

.ds-auth-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 calc(50% - 0.2rem);
  min-width: 0;
  text-align: center;
  padding: 0.7rem 0.55rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid #eaf2ec;
  font-size: var(--ds-fs-xs);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ds-muted);
  cursor: pointer;
  transition:
    background var(--ds-transition),
    color var(--ds-transition),
    border-color var(--ds-transition),
    box-shadow var(--ds-transition);
}

.ds-auth-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.ds-auth-tab-svg {
  width: 1.05rem;
  height: 1.05rem;
}

.ds-auth-tab-text {
  min-width: 0;
}

@media (min-width: 420px) {
  .ds-auth-tab-btn {
    font-size: var(--ds-fs-sm);
    padding: 0.75rem 0.65rem;
  }

  .ds-auth-tab-svg {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/* Mobile / tablet: OTP first on its own row; login + register equal on the next.
   Wrapping is intentional — buttons do not have to stay on one line. */
@media (max-width: 991.98px) {
  .ds-auth-tab-btn-otp {
    order: -1;
    flex: 1 1 100%;
  }
}

/* Desktop: one row, equal widths, single-line labels. Icons hidden so the longer
   Persian titles (esp. OTP) fit without wrapping under each other. */
@media (min-width: 992px) {
  .ds-auth-tabs {
    max-width: 640px;
  }

  .ds-auth-tab-buttons {
    flex-wrap: nowrap;
  }

  .ds-auth-tab-btn {
    flex: 1 1 0;
    width: 0;
    white-space: nowrap;
  }

  .ds-auth-tab-icon {
    display: none;
  }

  .ds-auth-tab-text {
    white-space: nowrap;
  }
}

/* Active tab uses brand accent (gold) — distinct from the green submit buttons
   in the forms, with dark text for readable contrast on the accent fill. */
#ds-auth-tab-login:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-login"],
#ds-auth-tab-register:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-register"],
#ds-auth-tab-otp:checked ~ .ds-auth-tab-buttons label[for="ds-auth-tab-otp"] {
  background: var(--ds-accent);
  color: var(--ds-text);
  border-color: #c4a05c;
  box-shadow: 0 4px 14px rgba(217, 181, 109, 0.45);
  font-weight: 700;
}

#ds-auth-tab-login:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-login"]
  .ds-auth-tab-svg,
#ds-auth-tab-register:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-register"]
  .ds-auth-tab-svg,
#ds-auth-tab-otp:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-otp"]
  .ds-auth-tab-svg {
  color: var(--ds-text);
}

.ds-auth-tab-buttons .ds-auth-tab-btn:hover {
  color: var(--ds-text);
  background: rgba(217, 181, 109, 0.18);
}

#ds-auth-tab-login:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-login"]:hover,
#ds-auth-tab-register:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-register"]:hover,
#ds-auth-tab-otp:checked
  ~ .ds-auth-tab-buttons
  label[for="ds-auth-tab-otp"]:hover {
  color: var(--ds-text);
  background: #c9a55f;
  border-color: #b8944f;
}

.ds-auth-panel {
  display: none;
}

/* Default (no-JS-equivalent / initial) state: login tab is checked via the `checked`
   attribute in the template, so its panel shows first. */
#ds-auth-tab-login:checked ~ .ds-auth-panel-login,
#ds-auth-tab-register:checked ~ .ds-auth-panel-register,
#ds-auth-tab-otp:checked ~ .ds-auth-panel-otp {
  display: block;
}

/* Single-form fallback: if registration is somehow disabled, only the login form
   prints (no radios/tabs at all — see the template's $dairy_shop_registration_open
   check), so its panel must be visible unconditionally rather than depending on a
   ":checked" sibling that won't exist. */
.ds-auth-tabs:not(:has(.ds-auth-tab-radio)) .ds-auth-panel-login {
  display: block;
}

.ds-auth-single-title {
  font-size: var(--ds-fs-xl);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ds-auth-panel form.login,
.ds-auth-panel form.register {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ds-auth-panel form.login .form-row,
.ds-auth-panel form.register .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ds-auth-panel form.login label,
.ds-auth-panel form.register label {
  font-size: var(--ds-fs-sm);
  font-weight: 600;
}

.ds-auth-panel .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: var(--ds-fs-sm);
}

.ds-auth-panel .woocommerce-LostPassword {
  font-size: var(--ds-fs-xs);
  text-align: center;
  margin-top: 0.5rem;
}

.ds-auth-panel button[type="submit"] {
  background: var(--ds-primary);
  color: var(--ds-white);
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.85rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.ds-auth-panel button[type="submit"]:hover {
  background: var(--ds-primary-dark);
}

.woocommerce-account .woocommerce-privacy-policy-text {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
}

/* ---- OTP ("ورود با موبایل") panel ---- */
.ds-otp-step[hidden] {
  display: none;
}

.ds-otp-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ds-otp-step .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.ds-otp-step label {
  font-size: var(--ds-fs-sm);
  font-weight: 600;
}

#ds-otp-send-btn,
#ds-otp-verify-btn {
  background: var(--ds-primary);
  color: var(--ds-white);
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.85rem;
  font-weight: 700;
}

#ds-otp-send-btn:hover,
#ds-otp-verify-btn:hover {
  background: var(--ds-primary-dark);
}

#ds-otp-send-btn:disabled,
#ds-otp-verify-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ds-otp-hint {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  margin: 0;
}

.ds-otp-bale-hint {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  background: var(--ds-primary-light);
  border-radius: var(--ds-radius-sm);
  padding: 0.6rem 0.85rem;
  margin: 0 0 0.85rem;
  line-height: 1.6;
}

.ds-otp-bale-hint a {
  color: var(--ds-primary);
  font-weight: 600;
  text-decoration: underline;
}

.ds-otp-sent-to {
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.ds-otp-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ds-primary);
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.ds-otp-link-btn:disabled {
  color: var(--ds-muted);
  cursor: not-allowed;
  text-decoration: none;
}

.ds-otp-message {
  font-size: var(--ds-fs-sm);
  margin: 0;
  min-height: 1.2em;
}

.ds-otp-message[data-state="error"] {
  color: #c0392b;
}

.ds-otp-message[data-state="success"] {
  color: var(--ds-primary-dark);
}

/* ---- Password-visibility toggle button ----
   WordPress/WooCommerce automatically injects a `.show-password-input` button next
   to every password field on this page (visible in the page source even though our
   own markup never creates it) — left completely unstyled it renders as a bare,
   tiny, awkward-looking default <button> sitting on its own line below the field.
   Since the field's wrapping <p class="form-row"> already only contains the label
   and the input, absolutely positioning the button inside that (now relatively
   positioned) <p> reliably lands it over the input's end edge as a small round
   icon button, regardless of exactly where in the DOM WordPress inserted it.

   Originally only scoped to .ds-auth-panel (the login/register/mobile-OTP panel),
   so the exact same auto-injected button on the Edit Account page's three password
   fields (Current password / New password / Confirm new password —
   password_current, password_1, password_2) never got this styling at all and
   rendered as the bare unstyled default. .woocommerce-EditAccountForm added
   alongside it so both places share one styling rule. */
.ds-auth-panel .form-row:has(.show-password-input),
.woocommerce-EditAccountForm .form-row:has(.show-password-input) {
  position: relative;
}

.ds-auth-panel .form-row:has(.show-password-input) input,
.woocommerce-EditAccountForm .form-row:has(.show-password-input) input {
  padding-inline-end: 2.75rem;
}

.ds-auth-panel .show-password-input,
.woocommerce-EditAccountForm .show-password-input {
  position: absolute;
  inset-inline-end: 0.35rem;
  bottom: 0.6rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C756D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--ds-transition),
    background-color var(--ds-transition);
}

.ds-auth-panel .show-password-input:hover,
.ds-auth-panel .show-password-input:focus-visible,
.woocommerce-EditAccountForm .show-password-input:hover,
.woocommerce-EditAccountForm .show-password-input:focus-visible {
  opacity: 1;
  background-color: var(--ds-background);
}

/* ---- Lost Password / Reset Password forms ----
   These use a different form class (.lost_reset_password) than login/register and were
   previously left completely unstyled, causing them to render as a plain, wide,
   default-looking form inside the account page. Give them the same centered-card
   treatment as the login/register forms above. */
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account form.lost_reset_password {
  max-width: 480px;
  margin-inline: auto;
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.woocommerce-account .woocommerce-ResetPassword .form-row,
.woocommerce-account form.lost_reset_password .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.woocommerce-account .woocommerce-ResetPassword label,
.woocommerce-account form.lost_reset_password label {
  font-size: var(--ds-fs-sm);
  font-weight: 600;
}

.woocommerce-account .woocommerce-ResetPassword .input-text,
.woocommerce-account form.lost_reset_password .input-text {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem;
}

.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
.woocommerce-account form.lost_reset_password button[type="submit"] {
  background: var(--ds-primary);
  color: var(--ds-white);
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.85rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover,
.woocommerce-account form.lost_reset_password button[type="submit"]:hover {
  background: var(--ds-primary-dark);
}

/* The intro text WooCommerce prints above the lost/reset-password form (e.g. "Lost
   your password?"). Scoped narrowly with :has() (well-supported in all current
   browsers) to only the pages that actually contain that form — NOT the dashboard's
   own welcome paragraph, which must stay left-aligned as normal reading text. */
.woocommerce-account
  .woocommerce-MyAccount-content:has(form.lost_reset_password)
  > p,
.woocommerce-account
  .woocommerce-MyAccount-content:has(.woocommerce-ResetPassword)
  > p {
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 767.98px) {
  .woocommerce-MyAccount-navigation {
    position: static;
    margin-bottom: 1.5rem;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
  }

  .woocommerce-MyAccount-navigation ul li {
    border-bottom: none;
    border-inline-end: 1px solid var(--ds-border);
    flex-shrink: 0;
  }

  .woocommerce-MyAccount-navigation ul li a {
    white-space: nowrap;
  }
}

/* =========================================================
   Single Product page — full redesign (hooks + CSS only, no template override)
   ========================================================= */
/* :not(.ds-product-card) is required here — wc_product_class() puts a plain
   "product" class on EVERY product element, not just this top-level wrapper, so
   without the exclusion this descendant selector also matched every .ds-product-card
   nested inside the related/upsell sliders further down the page. That leaked
   display:flex + gap:2rem + align-items:flex-start onto each card: the 2rem gap
   forced extra space between the card's image/title/button, and align-items:flex-start
   made the card stop stretching its own children to full width — which is why the
   "Add to cart" button (and the row above it) weren't filling the card's full width. */
.single-product .product:not(.ds-product-card) {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  /* Every direct child gets min-width:0 explicitly — flex items default to
       min-width:auto, which means they never shrink below the intrinsic width of
       their content. Wide children (the related-products Swiper, the attributes
       table) would otherwise force this row wider than the viewport, pushing the
       layout into horizontal overflow instead of wrapping. */
  min-width: 0;
}

/* Gallery + summary: sit side by side at >=992px. Using Flexbox here (not CSS
   Grid) is deliberate — a multi-column CSS Grid combined with aspect-ratio-sized
   descendants (the gallery image, and the related-products card images nested
   several levels down) hits a real browser rendering bug where those
   aspect-ratio boxes get measured/painted at the wrong (much smaller) width,
   especially once JS libraries like Swiper read their size on load. Flexbox
   does not trigger this. */
.single-product .product > .woocommerce-product-gallery,
.single-product .product > .summary {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 992px) {
  .single-product .product > .woocommerce-product-gallery,
  .single-product .product > .summary {
    flex: 1 1 calc(50% - 1rem);
  }
}

/* Tabs / related / upsells: always full width, on their own line, regardless of
   viewport — flex-basis:100% inside a wrapping flex container guarantees each of
   these starts a new row, the same effect grid-column:1/-1 gave us before. */
.single-product .product > .woocommerce-tabs,
.single-product .product > .related.products,
.single-product .product > .upsells.products {
  flex: 1 1 100%;
  min-width: 0;
}

/* ---- Gallery ---- */
/* Gallery is intentionally NOT sticky (position: static) — a sticky image next to a
   long summary/tabs area used to visually overlap other content while scrolling. */
.single-product .woocommerce-product-gallery {
  position: static;
}

.single-product .woocommerce-product-gallery__wrapper {
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-primary-light);
  /* Without WooCommerce's own (unloaded) gallery CSS, an image smaller than the
       wrapper — most visibly the "no image yet" placeholder — was left aligned to
       the block start (right, in RTL) instead of sitting in the middle of the box. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-product .woocommerce-product-gallery img {
  border-radius: var(--ds-radius-lg);
  margin: 0 auto;
}

/* The "no image yet" placeholder specifically: center its image and keep it from
   overflowing the (fixed-aspect) gallery box on small placeholder source files. */
.single-product .woocommerce-product-gallery__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.single-product .woocommerce-product-gallery__image--placeholder img {
  max-width: 100%;
  height: auto;
}

.single-product .flex-control-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.single-product .flex-control-thumbs li {
  width: 68px;
  height: 68px;
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.single-product .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ds-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.75;
  transition:
    border-color var(--ds-transition),
    opacity var(--ds-transition),
    transform var(--ds-transition);
}

.single-product .flex-control-thumbs img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.single-product .flex-control-thumbs img.flex-active {
  border-color: var(--ds-primary);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ds-primary-light);
}

.single-product .onsale {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ds-accent);
  color: var(--ds-text);
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  z-index: 2;
}

/* ---- Summary column ---- */
.single-product .product .summary {
  padding-top: 0.25rem;
}

.ds-anchor-offset {
  display: block;
  position: relative;
  top: calc(-1 * var(--ds-header-height) - 1rem);
  visibility: hidden;
}

.single-product .product_title {
  font-size: var(--ds-fs-3xl);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.single-product .woocommerce-review-link {
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
}

/* Scoped to .summary (not just ".single-product .price") — the un-scoped version
   matched EVERY ".price" element anywhere under .single-product, including the
   ones inside the .ds-product-card cards in the related/upsell product sliders
   further down the page, blowing their price text up to 28px instead of the
   card's own 14px. Restricting the ancestor to .summary keeps this rule to the
   main product price only, so the card price styling (components.css) is what
   renders in the sliders — same as on the homepage. */
.single-product .summary .price {
  font-size: var(--ds-fs-xl);
  font-weight: 700;
  color: var(--ds-primary-dark);
  margin-bottom: 1.1rem;
  display: block;
}

.single-product .summary .price del {
  color: var(--ds-muted);
  font-size: var(--ds-fs-lg);
  font-weight: 400;
  margin-inline-end: 0.5rem;
}

.single-product .summary .price ins {
  text-decoration: none;
}

.single-product .woocommerce-product-details__short-description {
  color: var(--ds-muted);
  line-height: 1.85;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ds-border);
}

.single-product .stock {
  display: inline-block;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.single-product .stock.in-stock {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

.single-product .stock.out-of-stock {
  background: rgba(179, 65, 58, 0.12);
  color: var(--ds-danger);
}

.single-product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 0.5rem 1.25rem;
}

.single-product .quantity {
  display: inline-flex;
}

.single-product .quantity .qty {
  width: 68px;
  text-align: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.75rem 0.5rem;
  font-weight: 600;
}

.single-product .single_add_to_cart_button {
  background: var(--ds-primary);
  color: var(--ds-white) !important;
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.85rem 2.5rem;
  font-weight: 700;
  font-size: var(--ds-fs-base);
  transition:
    background-color var(--ds-transition),
    transform var(--ds-transition);
}

.single-product .single_add_to_cart_button:hover {
  background: var(--ds-primary-dark);
  transform: translateY(-1px);
}

.single-product .single_add_to_cart_button.disabled {
  background: var(--ds-muted);
  cursor: not-allowed;
  transform: none;
}

/* ---- Meta row (SKU / category / tags) ---- */
.ds-product-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--ds-fs-sm);
  color: var(--ds-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--ds-border);
}

.ds-product-meta-item strong {
  color: var(--ds-text);
  font-weight: 600;
  margin-inline-end: 0.35rem;
}

/* SKU codes need to always read as plain Latin digits/letters (barcode scanners,
   inventory sheets, order exports, etc. all use the ASCII code as-is) — the
   theme's own font (assets/fonts/vazirmatn.css) is deliberately the "FD" build,
   which renders plain "0"-"9" characters as Persian digit glyphs (۰-۹) site-wide
   on purpose. That's the right default for prices/dates, but wrong for a SKU:
   falling back to a plain system font here keeps its digits/letters rendering
   exactly as typed, regardless of that site-wide choice. */
.ds-product-sku-value {
  font-family: Tahoma, Arial, sans-serif;
  direction: ltr;
  unicode-bidi: embed;
}

.ds-product-meta-item a {
  color: var(--ds-primary);
}

/* ---- Trust badges under Add to Cart ---- */
.ds-single-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-top: 1px solid var(--ds-border);
}

.ds-single-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  font-weight: 600;
}

.ds-single-trust-badge .ds-icon {
  width: 20px;
  height: 20px;
  color: var(--ds-primary);
}

/* ---- Sticky mobile add-to-cart bar ---- */
.ds-sticky-cart-bar {
  position: fixed;
  inset-inline: 0;
  /* Sits directly above the fixed mobile bottom nav bar (header.css,
       template-parts/header/mobile-bottom-nav.php) rather than at the very
       bottom — both are mobile-only (this element already carries the d-lg-none
       class in its markup), so they'd otherwise overlap. */
  bottom: var(--ds-mobile-navbar-height);
  z-index: 1040;
  background: var(--ds-white);
  border-top: 1px solid var(--ds-border);
  box-shadow: 0 -4px 16px rgba(32, 40, 32, 0.08);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ds-sticky-cart-bar-price {
  font-weight: 700;
  color: var(--ds-primary-dark);
  font-size: var(--ds-fs-lg);
}

.ds-sticky-cart-bar-btn {
  flex-shrink: 0;
}

/* ---- Tabs ---- */
/* Full-width placement (flex: 1 1 100%) is set above, alongside the other
   .single-product .product direct-child rules — this only carries spacing now. */
.single-product .woocommerce-tabs {
  margin-top: 3rem;
}

.single-product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ds-border);
  overflow-x: auto;
}

.single-product .woocommerce-tabs ul.tabs li {
  margin: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ds-muted);
}

.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ds-primary-dark);
  border-bottom: 2px solid var(--ds-primary);
}

.single-product .woocommerce-tabs .panel {
  padding-top: 1.75rem;
  line-height: 1.85;
  color: var(--ds-text);
}

.single-product .woocommerce-tabs .panel {
  max-width: 100%;
  overflow-x: auto;
}

.single-product .woocommerce-tabs table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
}

.single-product .woocommerce-tabs table.shop_attributes th,
.single-product .woocommerce-tabs table.shop_attributes td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ds-border);
  text-align: right;
}

.single-product .woocommerce-tabs table.shop_attributes th {
  background: var(--ds-background);
  font-weight: 600;
  width: 220px;
}

/* Reviews */
.single-product #reviews .commentlist {
  list-style: none;
  padding: 0;
}

.single-product #reviews .comment {
  display: flex;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--ds-border);
}

.single-product #reviews .comment_container img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.single-product #reviews .meta {
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
  margin-bottom: 0.4rem;
}

.single-product #reviews .star-rating {
  margin-bottom: 0.5rem;
}

.single-product #review_form textarea,
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"] {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem;
}

.single-product #review_form #submit {
  background: var(--ds-primary);
  color: var(--ds-white);
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.7rem 1.75rem;
  font-weight: 700;
}

/* ---- Related / Upsell products ---- */
/* Full-width placement (flex: 1 1 100%) is set above, alongside the other
   .single-product .product direct-child rules — this block only carries the
   spacing/typography now. */
.related.products,
.upsells.products {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ds-border);
}

/* .related.products > h2 intentionally removed: woocommerce/single-product/related.php
   now renders its own heading with class="section-title mb-0" — the exact same
   component the homepage product sliders use — so it should inherit that shared
   styling instead of a second, competing set of rules here. This old rule's
   margin-bottom (1.5rem) had higher specificity than the shared ".section-title"
   reset and was winning, which is why the "محصولات مرتبط" heading sat with
   different spacing than the homepage slider headings. .upsells.products still
   uses WooCommerce's stock template (no section-title class), so it keeps its
   own font-size/margin here. */
.upsells.products > h2 {
  font-size: var(--ds-fs-2xl);
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .single-product .product {
    /* padding-bottom: 4rem;*/
    /* room for the sticky mobile add-to-cart bar */
  }
}

/* =========================================================
   Quick View modal (spec follow-up)
   ========================================================= */
.ds-quickview-modal .modal-content {
  border-radius: var(--ds-radius-lg);
  border: none;
  overflow: hidden;
  /* clips the media image to the rounded corners — nothing else. */
}

/* The actual scroll cap belongs on .modal-body itself, not .modal-content: putting
   max-height/flex on modal-content while modal-content ALSO has overflow:hidden (for
   the rounded corners above) meant modal-body's own overflow-y:auto could never
   kick in — a flex child doesn't shrink below its content height by default, so the
   overflowing part was just getting silently clipped by the parent's overflow:hidden
   instead of becoming scrollable. Capping modal-body directly sidesteps that: it gets
   its own scrollbar when content is tall, and modal-content (unconstrained) simply
   sizes itself to match — nothing to clip. */
.ds-quickview-modal .modal-body {
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}

.ds-quickview-modal .modal-header {
  border-bottom: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 0.75rem;
}

.ds-quickview-modal .btn-close {
  background-color: var(--ds-white);
  border-radius: 50%;
  opacity: 1;
  box-shadow: var(--ds-shadow-sm);
  padding: 0.5rem;
}

.ds-quickview-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ds-quickview-body {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.ds-quickview-media {
  position: relative;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  background: var(--ds-primary-light);
}

.ds-quickview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.ds-quickview-info {
  display: flex;
  flex-direction: column;
  padding-block: 0.5rem;
}

.ds-quickview-title {
  font-size: var(--ds-fs-xl);
  margin-bottom: 0.5rem;
}

.ds-quickview-rating {
  margin-bottom: 0.5rem;
}

.ds-quickview-price {
  font-size: var(--ds-fs-2xl);
  font-weight: 700;
  color: var(--ds-primary-dark);
  margin-bottom: 0.85rem;
}

.ds-quickview-price del {
  color: var(--ds-muted);
  font-weight: 400;
  font-size: var(--ds-fs-lg);
  margin-inline-end: 0.5rem;
}

.ds-quickview-excerpt {
  color: var(--ds-muted);
  font-size: var(--ds-fs-sm);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ds-quickview-stock {
  margin-bottom: 1rem;
}

.ds-stock-badge {
  display: inline-block;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.ds-stock-badge.ds-stock-in {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

.ds-stock-badge.ds-stock-out {
  background: rgba(179, 65, 58, 0.12);
  color: var(--ds-danger);
}

.ds-quickview-cart-form {
  margin-bottom: 1.25rem;
}

/* Stock status is already shown as .ds-stock-badge; hide WooCommerce's duplicate. */
.ds-quickview-cart-form .stock {
  display: none;
}

.ds-quickview-cart-form .quantity {
  display: inline-block;
  margin-inline-end: 0.75rem;
  vertical-align: middle;
}

.ds-quickview-cart-form .quantity .qty {
  width: 64px;
  text-align: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.6rem;
}

.ds-quickview-cart-form .single_add_to_cart_button {
  background: var(--ds-primary);
  color: var(--ds-white) !important;
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
}

.ds-quickview-cart-form .single_add_to_cart_button:hover {
  background: var(--ds-primary-dark);
}

.ds-quickview-full-link {
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  color: var(--ds-primary);
  align-self: flex-start;
}

.ds-quickview-full-link:hover {
  text-decoration: underline;
}

.ds-quickview-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ds-muted);
  padding: 2rem;
}

/* Skeleton loading state shown while the modal fetches product data. Deliberately
   shaped (title/price/body-lines/button placeholders, not just 3 generic bars) to
   roughly match the real content's height — the previous, much shorter skeleton
   meant the dialog visibly jumped/resized the instant the real content swapped in,
   which read as a "cut". Matching the height doesn't animate the swap, but it
   keeps the dialog close to its final size the whole time so there's barely a
   jump left to notice, on top of .modal-body now handling any real overflow with
   its own scrollbar instead of clipping it. */
.ds-quickview-loading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ds-quickview-loading {
    grid-template-columns: 1fr 1fr;
  }
}

.ds-quickview-skeleton-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--ds-radius-md);
}

.ds-quickview-skeleton-info {
  display: block;
  padding-block: 0.5rem;
}

.ds-quickview-skeleton-line {
  display: block;
  height: 1.25rem;
  margin-bottom: 0.75rem;
}

.ds-quickview-skeleton-line.title {
  height: 1.6rem;
  width: 80%;
}

.ds-quickview-skeleton-line.price {
  width: 40%;
}

.ds-quickview-skeleton-line.short {
  width: 60%;
}

.ds-quickview-skeleton-line.button {
  height: 2.75rem;
  width: 100%;
  margin-top: 1rem;
}

/* =========================================================
   Single Product page enrichment, round 2 (spec follow-up)
   ========================================================= */

/* ---- Dynamic status badge (low stock / best seller / new) ---- */
.ds-single-product-badges {
  margin-bottom: 0.6rem;
}

.ds-single-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.ds-single-badge-low-stock {
  background: rgba(179, 65, 58, 0.12);
  color: var(--ds-danger);
}

.ds-single-badge-bestseller {
  background: var(--ds-accent);
  color: var(--ds-text);
}

.ds-single-badge-new {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* ---- Gallery zoom ---- */
.ds-gallery-zoom-enabled .woocommerce-product-gallery__image {
  cursor: zoom-in;
}

.ds-gallery-zoom-enabled .woocommerce-product-gallery__image img {
  transition: transform 0.2s ease;
}

.ds-gallery-zoom-enabled
  .woocommerce-product-gallery__image
  img.ds-gallery-zoom-active {
  transform: scale(1.8);
  transition: transform 0.05s linear;
  background: var(--ds-primary-light);
}

.ds-gallery-zoom-modal .modal-content {
  border-radius: var(--ds-radius-lg);
  border: none;
  overflow: hidden;
  background: var(--ds-white);
}

.ds-gallery-zoom-modal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 85vh;
}

.ds-gallery-zoom-modal-img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}

.ds-gallery-zoom-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: var(--ds-white);
  border-radius: 50%;
  opacity: 1;
  padding: 0.5rem;
  box-shadow: var(--ds-shadow-md);
}

/* ---- FAQ tab accordion ---- */
.ds-faq-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--ds-border);
}

.ds-faq-accordion .accordion-item:last-child {
  border-bottom: none;
  padding: 5px 15px;
}

.ds-faq-accordion .accordion-button {
  font-weight: 600;
  color: var(--ds-text);
  background: transparent;
  padding: 1rem 0;
  box-shadow: none;
}

.ds-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--ds-primary-dark);
  background: transparent;
  box-shadow: none;
}

.ds-faq-accordion .accordion-button:focus {
  box-shadow: none;
}

.ds-faq-accordion .accordion-body {
  padding: 0;
  color: var(--ds-muted);
  line-height: 1.85;
}

/* ---- Wishlist ---- */
/* Keeps the standalone /wishlist/ page (page-wishlist.php) from being so short
   — especially the empty-state case — that the footer shows up right under
   the content. min-height, not a fixed height, so a full grid of products is
   never clipped. */
.ds-wishlist-page {
  min-height: 530px;
}

.ds-account-wishlist-title {
  font-size: var(--ds-fs-xl);
  margin-bottom: 1.5rem;
}

#ds-wishlist-grid {
  margin-top: 0.5rem;
}

/* 4 per row on desktop instead of the site-wide default of 3 (ul.products in
   components.css) — scoped to the wishlist grid only, both entry points. */
@media (min-width: 992px) {
  #ds-wishlist-grid ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   Cart page ([woocommerce_cart] shortcode) — full redesign.
   Mirrors the checkout redesign above: same heading scale, same card
   language (tinted background + border + radius + soft shadow), same
   button family — so cart and checkout read as one connected flow
   instead of two differently-designed pages.
   ========================================================= */

/* Section headings ("جمع کل سبد خرید" from WooCommerce's own cart_totals
   template, "روش دریافت" from our own picker) were rendering at the
   browser's raw h2/h3 default (32px / 28px, no color/weight rules of
   ours reaching them) because neither lives inside .woocommerce-checkout,
   the only scope that already had a heading-size rule. Same treatment as
   the checkout ones now, everywhere it applies. */
.cart_totals h2,
#dairy-shop-delivery-method h3 {
  font-size: var(--ds-fs-lg);
  font-weight: 700;
  color: var(--ds-danger);
  margin-bottom: 1rem;
}

/* On checkout, #dairy-shop-delivery-method already sits inside the
   tinted #order_review card, so it stays a plain block there (a second
   nested card would just be a border-in-a-border). On the cart page it's
   a standalone section next to .cart_totals, so it gets the exact same
   tinted-card treatment .cart_totals already has, for a matching pair. */
.woocommerce-cart #dairy-shop-delivery-method {
  /* background: var(--ds-background);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 1.5rem;
    box-shadow: var(--ds-shadow-sm); */
}

/* Coupon field + apply button, on the same line as the "بروزرسانی سبد خرید"
   button next to it - deliberately NOT flexbox here. .actions is a
   <td colspan="6"> inside the cart items table, and giving it (or .coupon)
   a flex layout with a flex-basis makes the browser treat that basis as
   width the row must reserve ON TOP OF the other 5 columns' own widths.
   With nothing else to give, the table's auto column-width algorithm
   dumped that entire extra width onto the "remove" column (a near-empty ×
   button), leaving a huge blank gap there on every row. Plain
   inline-block/inline flow avoids this: the browser sizes/wraps this row
   however it needs without any of it pulling on the table's column widths -
   still visually one row, just no longer part of the table's sizing math. */
.woocommerce-cart table.shop_table .actions {
  padding: 1.25rem 1rem;
  text-align: end;
}

.woocommerce-cart table.shop_table .actions .coupon {
  display: inline-block;
  vertical-align: middle;
}

.woocommerce-cart .coupon .input-text {
  display: inline-block;
  width: 200px;
  max-width: 45vw;
  vertical-align: middle;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: var(--ds-fs-sm);
  background: var(--ds-white);
  margin-inline-end: 0.6rem;
}

.woocommerce-cart .coupon .input-text:focus {
  border-color: var(--ds-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-primary-light);
}

.woocommerce-cart table.shop_table .actions .coupon .button {
  vertical-align: middle;
}

.woocommerce-cart-form button[name="update_cart"] {
  vertical-align: middle;
  margin-inline-start: 0.75rem;
}

/* "اعمال کدتخفیف" / "بروزرسانی سبد خرید" were plain unstyled browser
   buttons (grey, outset border) sitting right next to our fully-styled
   "ادامه جهت تسویه حساب" button — three different design languages on
   one page. Given a shared secondary-button look here: same radius and
   weight as the primary button, just outlined instead of filled, so all
   the buttons on the page now read as one family (filled = the one
   primary action, outlined = everything else). */
.woocommerce-cart-form .button,
.woocommerce-checkout .checkout_coupon .button {
  display: inline-block;
  background: var(--ds-white);
  color: var(--ds-primary);
  border: 1.5px solid var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  padding: 0.65rem 1.25rem;
  font-weight: 700;
  font-size: var(--ds-fs-sm);
  cursor: pointer;
  transition:
    background var(--ds-transition),
    color var(--ds-transition);
}

.woocommerce-cart-form .button:hover,
.woocommerce-checkout .checkout_coupon .button:hover {
  background: var(--ds-primary);
  color: var(--ds-white) !important;
}

.woocommerce-cart-form .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--ds-white);
  color: var(--ds-primary);
}

/* =========================================================
   Order-received ("Thank you") page — billing/shipping address columns.
   Same Bootstrap .col-1 / .col-2 utility-class collision already fixed
   on the checkout form's billing/shipping wrapper (see the
   #customer_details .col-1/.col-2 override above) — WooCommerce reuses
   those exact generic class names here too, on a page Bootstrap's grid
   CSS also reaches, which is why the two address columns were being
   squeezed to 8.33%/16.67% width and their headings wrapped mid-word.
   ========================================================= */
.woocommerce-columns.addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

.woocommerce-columns.addresses .col-1,
.woocommerce-columns.addresses .col-2 {
  flex: 1 1 280px;
  width: auto;
  max-width: 100%;
  margin-bottom: 0;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 1.5rem;
  box-shadow: var(--ds-shadow-sm);
}

.woocommerce-column__title {
  font-size: var(--ds-fs-lg);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--ds-text);
}

.woocommerce-columns.addresses address {
  font-style: normal;
  line-height: 1.9;
  color: var(--ds-text);
}

.ds-pickup-location-hint {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0.35rem 0.65rem;
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  color: var(--ds-primary-dark);
  background: var(--ds-primary-light);
  border-radius: var(--ds-radius-sm);
}

/* Small polish on the order-number/date/email/total summary list right
   above the addresses, so it doesn't look like a bare bulleted <ul> next
   to the now-carded address boxes. */
.woocommerce-order-received .woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 0;
  margin: 0 0 2rem;
}

.woocommerce-order-received .woocommerce-order-overview li {
  font-size: var(--ds-fs-sm);
  color: var(--ds-text);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
  color: var(--ds-primary-dark);
}

/* =========================================================
   Cart item table — remove (×) button + mobile stacking.
   ========================================================= */

/* The remove-item "×" was a bare text link. Given a proper small circular
   button so it reads as a deliberate control, not stray punctuation. */
.woocommerce-cart-form .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ds-danger) !important;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none !important;
  transition:
    background var(--ds-transition),
    color var(--ds-transition);
  border: 1px solid;
}

.woocommerce-cart-form .product-remove a.remove:hover {
  background: var(--ds-danger);
  color: var(--ds-white) !important;
}

/* This theme disables WooCommerce's own default stylesheet entirely
   (see woocommerce_enqueue_styles => __return_empty_array in
   inc/woocommerce.php), which is also where the built-in mobile
   "stacked label: value" behavior for table.shop_table_responsive lived -
   so without our own version of it, these tables just stayed as wide
   desktop tables and ran off the edge of small screens. Reimplemented
   here for every shop_table_responsive table (the cart items table, and
   the My Account > Orders history table), using the same data-title
   attributes WooCommerce already prints on each <td> - no markup changes
   needed. */
@media (max-width: 767px) {
  table.shop_table_responsive thead {
    display: none;
  }

  table.shop_table_responsive,
  table.shop_table_responsive tbody,
  table.shop_table_responsive tr {
    display: block;
    width: 100%;
  }

  table.shop_table_responsive tr {
    margin-bottom: 1rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
  }

  table.shop_table_responsive td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100% !important;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--ds-border);
    text-align: left;
  }

  table.shop_table_responsive tr td:last-child {
    border-bottom: none;
  }

  table.shop_table_responsive td::before {
    content: attr(data-title);
    font-weight: 700;
    color: var(--ds-primary-dark);
    flex-shrink: 0;
  }

  table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions .button + .button {
    margin-inline-start: 0;
  }

  /* The remove/thumbnail cells and the full-width coupon/actions row
       don't carry a data-title (nothing meaningful to label), so they
       skip the label prefix and just center their content instead. */
  table.shop_table_responsive td.product-remove,
  table.shop_table_responsive td.product-thumbnail,
  table.shop_table_responsive td.actions,
  table.shop_table_responsive td[colspan] {
    justify-content: center;
  }

  table.shop_table_responsive td.product-remove::before,
  table.shop_table_responsive td.product-thumbnail::before,
  table.shop_table_responsive td.actions::before,
  table.shop_table_responsive td[colspan]::before {
    content: none;
  }

  table.shop_table_responsive td.actions,
  table.shop_table_responsive td[colspan] {
    display: block;
  }

  /* On a ~350px-wide row the coupon input + "اعمال کدتخفیف" already fill
       the line between them, so "بروزرسانی سبد خرید" has nowhere left and
       wraps onto its own line - left it at its natural (small, left-packed)
       width there and it read as a stray, half-abandoned button with dead
       space beside it. Full-width on its own line instead, like any other
       mobile primary/secondary button on this site. */
  .woocommerce-cart-form button[name="update_cart"] {
    display: block;
    width: 100%;
    margin: 0.75rem 0 0;
    text-align: center;
  }

  /* "جمع کل سبد خرید" (.cart_totals) rows are a different shape than the
       item table above: each is <th>label</th><td data-title="label">value</td>
       instead of two <td>s. The label/value flex+data-title treatment above
       was built for the item table's SHORT values (a price, a qty) sitting
       beside their label - fine there, but .cart_totals' shipping row holds
       several stacked block elements (the chosen method, the delivery
       address, a "تغییر آدرس" toggle), and squeezing all of that into a
       flex row next to the label crushed each into its own narrow column
       instead of letting them read as one block. The <th> was also never
       touched by the item-table rules (they only style <td>), so it kept
       rendering as a bare, unstacked table cell - a second, differently-
       positioned copy of the same label already shown by the <td>'s own
       ::before. Here the <th> is dropped (redundant) and each <td> becomes
       a simple full-width block: label line on top, real content
       (however many paragraphs) flowing normally underneath, exactly like
       the rest of the page instead of half table-layout, half flex. */
  .cart_totals table.shop_table_responsive tbody th {
    display: none;
  }

  .cart_totals table.shop_table_responsive td {
    display: block;
    text-align: right;
  }

  .cart_totals table.shop_table_responsive td::before {
    display: block;
    margin-bottom: 0.4rem;
  }
}

/* =========================================================
   Checkout — "بازگشت به سبد خرید" link, shown above the form.
   ========================================================= */
.dairy-shop-back-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-primary);
  font-weight: 700;
  font-size: var(--ds-fs-sm);
  text-decoration: none !important;
  transition:
    background var(--ds-transition),
    color var(--ds-transition);
}

.dairy-shop-back-to-cart:hover {
  background: var(--ds-primary);
  color: var(--ds-white) !important;
}

.added_to_cart .wc-forward {
  display: none;
}

ul#shipping_method {
    padding: 0;
    list-style: none;
    margin: 0;
}

h3#order_review_heading {
    margin: 0;
}

.woocommerce-privacy-policy-text p {
    font-size: 14px;
}

ul.woocommerce-error p {
    margin: 0;
}