/* ==========================================================================
   Makhmal — Cart & Checkout skin.
   No WooCommerce template is overridden; this dresses WC's own markup. Where
   a declaration is forced, it is because WooCommerce's bundled stylesheet
   targets the same element with a longer selector (its float-era layout).
   ========================================================================== */

.woocommerce-cart .dmhouse-woocommerce-content,
.woocommerce-checkout .dmhouse-woocommerce-content {
  padding-block: 24px 70px;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
  margin: 18px 0 22px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

/* ==========================================================================
   Cart — items table on one side, totals card on the other
   ========================================================================== */
@media (min-width: 992px) {
  .woocommerce-cart .woocommerce > .woocommerce-cart-form {
    float: none !important;
    width: auto !important;
  }

  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }

  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-info,
  .woocommerce-cart .woocommerce > .woocommerce-error {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .cart-collaterals {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
  }
}

.woocommerce-cart table.shop_table.cart {
  display: table;
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-lg) !important;
  background: var(--mk-color-surface);
  overflow: hidden;
}

.woocommerce-cart table.shop_table.cart th,
.woocommerce-cart table.shop_table.cart td {
  display: table-cell;
  padding: 14px 16px !important;
  border: none !important;
  vertical-align: middle;
  text-align: start;
  font-size: var(--mk-fs-sm);
}

.woocommerce-cart table.shop_table.cart thead th {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-cart table.shop_table.cart tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border) !important;
}

/* ⚠ the thumbnail column collapsed to a few pixels: the parent theme's
   `img { max-width: 100% }` caps the image at its cell width, and an
   auto-layout table sizes that cell from the (now tiny) image — a loop that
   ends at ~9px. Pinning the CELL width breaks it, and max-width:none stops
   the cap from re-applying. */
.woocommerce-cart table.shop_table.cart td.product-thumbnail {
  width: 92px;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  width: 68px !important;
  height: 68px !important;
  max-width: none !important;
  min-width: 68px;
  object-fit: cover;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
}

.woocommerce-cart table.shop_table.cart td.product-name a {
  color: var(--mk-color-text);
  font-weight: 700;
  line-height: 1.9;
}

.woocommerce-cart table.shop_table.cart td.product-name a:hover {
  color: var(--mk-color-primary-hover);
}

.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
  font-family: var(--mk-font-heading);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
  white-space: nowrap;
}

/* remove-item ✕ becomes a soft round button instead of WC's bare glyph */
.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text-muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: background var(--mk-transition), color var(--mk-transition);
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
  background: color-mix(in srgb, var(--mk-color-accent-2) 14%, #fff) !important;
  color: var(--mk-color-accent-2) !important;
}

/* quantity stepper — same pill as the product page */
.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  overflow: hidden;
}

.woocommerce-cart table.shop_table.cart td.product-quantity .qty {
  width: 62px;
  padding: 9px 6px !important;
  border: none !important;
  background: transparent !important;
  text-align: center;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
}

/* ⚠ MEASURED, and it was the single cause of the whole cart looking broken:
   `td.actions` was `display:flex`, which takes the cell OUT of the table
   layout — its colspan stops applying, the browser hands its 256px to the
   FIRST column instead, and the product-name column is left with 120px while
   the ✕ column is 256px wide. The cell must stay a table-cell; only its
   CHILDREN are laid out inline. */
.woocommerce-cart table.shop_table.cart td.actions {
  display: table-cell !important;
  padding: 16px !important;
  background: var(--mk-color-bg-soft);
  text-align: start;
  overflow: hidden;
}

/* the site is RTL-only: a physical `left` float is the inline END here, and
   `float` is the one thing that works without turning the cell into a flex
   container again */
.woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"] {
  float: left;
  margin: 0;
}

.woocommerce-cart .coupon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

/* ---- Column widths: without them the auto layout gives the long product
   name the least room and the ✕ the most ---- */
.woocommerce-cart table.shop_table.cart th.product-remove,
.woocommerce-cart table.shop_table.cart td.product-remove {
  width: 60px;
}

.woocommerce-cart table.shop_table.cart th.product-thumbnail {
  width: 92px;
}

.woocommerce-cart table.shop_table.cart th.product-price,
.woocommerce-cart table.shop_table.cart th.product-quantity {
  width: 120px;
}

.woocommerce-cart table.shop_table.cart th.product-subtotal {
  width: 150px;
}

.woocommerce-cart table.shop_table.cart td.product-name {
  min-width: 220px;
}

/* the variation list WooCommerce prints under a variable product's name */
.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 6px 0 0;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
  margin: 0;
  font-weight: 400;
}

.woocommerce-cart table.shop_table.cart td.product-name dl.variation p {
  margin: 0;
}

.woocommerce-cart .coupon label {
  display: none;
}

.woocommerce-cart .coupon #coupon_code {
  width: 190px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-pill) !important;
  background: var(--mk-color-surface) !important;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
}

.woocommerce-cart table.shop_table.cart td.actions .button {
  margin-inline-start: auto;
}

/* ---- Totals card ---- */
.woocommerce-cart .cart_totals {
  padding: 22px 22px 24px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce-cart .cart_totals h2 {
  margin: 0 0 14px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.woocommerce-cart .cart_totals table.shop_table {
  display: table;
  width: 100%;
  margin: 0 0 16px;
  border: none !important;
  border-collapse: collapse;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  display: table-cell;
  padding: 11px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mk-color-border) !important;
  font-size: var(--mk-fs-sm);
  text-align: start;
}

.woocommerce-cart .cart_totals table.shop_table th {
  color: var(--mk-color-text-muted);
  font-weight: 400;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: end;
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-cart .cart_totals tr.order-total td {
  border-bottom: none !important;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  color: var(--mk-color-primary-hover);
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0 !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  width: 100%;
  justify-content: center;
}

/* empty cart */
.woocommerce-cart .cart-empty {
  margin-bottom: 14px;
  font-size: var(--mk-fs-base);
  color: var(--mk-color-text);
}

.woocommerce-cart .return-to-shop {
  margin: 0;
}

/* ==========================================================================
   Cart, desktop polish — DESKTOP ONLY on purpose: below 992px the table is
   rebuilt into per-row cards further down this file, and these rules would
   fight that. Nothing structural here, only breathing room, softer surfaces
   and a clearer price hierarchy.
   ========================================================================== */
@media (min-width: 992px) {
  .woocommerce-cart table.shop_table.cart {
    box-shadow: var(--mk-shadow-sm);
  }

  .woocommerce-cart table.shop_table.cart thead th {
    padding-block: 16px !important;
    background: linear-gradient(180deg, var(--mk-color-bg-muted), color-mix(in srgb, var(--mk-color-bg-muted) 55%, #fff));
    font-size: var(--mk-fs-xs);
    color: var(--mk-color-text-soft);
    letter-spacing: 0.2px;
  }

  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
    padding-block: 18px !important;
    transition: background-color var(--mk-transition);
  }

  .woocommerce-cart table.shop_table.cart tbody tr.cart_item:hover td {
    background: color-mix(in srgb, var(--mk-color-bg-soft) 70%, #fff);
  }

  .woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px;
    background: #fff;
    box-shadow: var(--mk-shadow-sm);
  }

  /* a long product name must not push the price column around */
  .woocommerce-cart table.shop_table.cart td.product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .woocommerce-cart table.shop_table.cart td.product-price {
    color: var(--mk-color-text-soft);
    font-weight: 400;
  }

  /* the line total is the number a shopper actually scans down the column */
  .woocommerce-cart table.shop_table.cart td.product-subtotal {
    font-size: var(--mk-fs-base);
  }

  .woocommerce-cart table.shop_table.cart td.actions {
    padding-block: 18px !important;
    background: color-mix(in srgb, var(--mk-color-bg-soft) 60%, #fff);
    border-top: 1px solid var(--mk-color-border) !important;
  }

  .woocommerce-cart .coupon #coupon_code {
    width: 220px !important;
    height: 44px;
  }

  .woocommerce-cart table.shop_table.cart td.actions .button {
    height: 44px;
    padding-inline: 22px;
    border-radius: var(--mk-radius-pill);
  }

  /* the totals card follows the shopper down a long cart */
  .woocommerce-cart .cart_totals {
    position: sticky;
    top: 100px;
    padding: 24px 24px 26px;
    box-shadow: var(--mk-shadow-md);
  }

  .woocommerce-cart .cart_totals h2 {
    position: relative;
    padding-inline-start: 14px;
    font-size: var(--mk-fs-lg);
  }

  .woocommerce-cart .cart_totals h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    width: 5px;
    height: 20px;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-gradient-cta);
  }

  .woocommerce-cart .cart_totals table.shop_table th,
  .woocommerce-cart .cart_totals table.shop_table td {
    padding-block: 13px !important;
  }

  .woocommerce-cart .cart_totals tr.order-total th,
  .woocommerce-cart .cart_totals tr.order-total td {
    padding-top: 16px !important;
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    height: 52px;
    align-items: center;
    font-size: var(--mk-fs-base);
    box-shadow: var(--mk-shadow-md);
    transition: transform var(--mk-transition), box-shadow var(--mk-transition);
  }

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--mk-shadow-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    transform: none;
  }
}

/* ==========================================================================
   Checkout — form on one side, order review sticky on the other
   ========================================================================== */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    /* ⚠ MEASURED: the details column SPANS both rows, and with implicit `auto`
       rows the browser hands part of its height to row 1 — the heading row grew
       and the gap under «سفارش شما» measured 37px instead of the grid's 24px.
       Pinning row 1 to min-content makes it exactly the heading's own height,
       so the spacing everywhere on this page is the same 24px. */
    gap: 24px;
    align-items: start;
  }

  /* ⚠ column assignment alone is not enough: without explicit ROWS the
     review heading and the review card auto-place onto rows of their own
     BELOW the details column (measured: 450px lower). The two columns are
     pinned to rows 1–2 so they start level. */
  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 1;
  }

  /* the heading is visually hidden (its text is printed inside the card), so
     both columns are now ONE row and the two cards start dead level */
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 1;
  }
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 0 18px !important;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  padding: 22px 22px 24px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 14px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.woocommerce-checkout .form-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 26px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* same chip as the block checkout: the label sits ON the field's top border
   instead of stacking above it, so the two checkouts read identically */
.woocommerce-checkout .form-row > label:not(.screen-reader-text) {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12px;
  left: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ⚠ MEASURED: select2 keeps the ORIGINAL <select> in the DOM as a clipped,
   absolutely positioned element (`.select2-hidden-accessible`). The form
   control rule below hands it `width:100% !important` + padding, which blew it
   out to 1265px and gave the whole checkout a horizontal scrollbar. It must
   stay the 1px screen-reader box. */
.woocommerce-checkout .form-row select.select2-hidden-accessible {
  width: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.woocommerce-checkout .form-row .required {
  color: var(--mk-color-accent-2);
  text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 46px;
  padding: 12px 15px !important;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-md) !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
}

.woocommerce-checkout .form-row textarea {
  min-height: 96px;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none;
  background: var(--mk-color-surface) !important;
  border-color: var(--mk-blue-highlight) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-blue-highlight) 22%, transparent);
}

/* WooCommerce's select2 dropdown needs its inner parts aligned to the box */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.9 !important;
  color: var(--mk-color-text);
}

/* ⚠ physical `left` on purpose (the site is RTL-only): a logical
   `inset-inline-start` puts the arrow on the RIGHT, where the label chip is —
   measured at x=1186 inside a box ending at 1218. Same trap as the block
   checkout's arrow, documented there too. */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  translate: 0 -50%;
  left: 14px !important;
  right: auto !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 34px !important;
}

/* two-up name fields */
@media (min-width: 600px) {
  .woocommerce-checkout #customer_details .form-row-first,
  .woocommerce-checkout #customer_details .form-row-last {
    width: calc(50% - 9px) !important;
    display: inline-flex;
  }

  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
  }

  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) {
    width: 100% !important;
  }
}

/* ---- The "have a coupon?" toggle form above the checkout ---- */
.woocommerce-checkout form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
}

.woocommerce-checkout form.checkout_coupon .form-row {
  width: auto !important;
  margin: 0 !important;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
  flex: 1 1 220px;
}

.woocommerce-checkout form.checkout_coupon input.input-text {
  border-radius: var(--mk-radius-pill) !important;
}

.woocommerce-checkout form.checkout_coupon .clear {
  display: none;
}

/* ---- Order review ---- */
/* the heading is a sibling of the card, so its own bottom margin plus the
   card's top padding read as one oversized gap */
/* ⚠ MEASURED, twice: «سفارش شما» is a SIBLING of the review card, so the two
   sit in two grid rows — and because the details column SPANS both rows, the
   browser hands part of that column's height to the heading row (row 1 came out
   40px for a 27px heading, giving a 37px gap where every other gap is 24px).
   Zeroing margins did not fix it and cannot: the space is row height, not
   margin. So the heading moves INSIDE the card — exactly like the cart's
   «جمع کل سبد خرید» — and the real <h3> is kept for screen readers only. */
.woocommerce-checkout #order_review_heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.woocommerce-checkout #order_review::before {
  content: 'سفارش شما';
  display: block;
  margin: 0 0 14px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.woocommerce-checkout #order_review table.shop_table {
  display: table;
  width: 100%;
  margin: 0 0 14px;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-md) !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--mk-color-surface);
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  display: table-cell;
  padding: 12px 14px !important;
  border: none !important;
  font-size: var(--mk-fs-sm);
  text-align: start;
  vertical-align: middle;
}

/* header row: the same lilac pill row as the cart table */
.woocommerce-checkout #order_review table.shop_table thead th {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-checkout #order_review table.shop_table tbody tr td {
  border-top: 1px solid var(--mk-color-border) !important;
  line-height: 1.9;
}

.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total {
  width: 40%;
  text-align: end;
  font-family: var(--mk-font-heading);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
  white-space: nowrap;
}

/* the "× 9" WooCommerce prints next to the product name */
.woocommerce-checkout #order_review table.shop_table strong.product-quantity {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 9px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.woocommerce-checkout #order_review table.shop_table dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 6px 0 0;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

.woocommerce-checkout #order_review table.shop_table dl.variation dt,
.woocommerce-checkout #order_review table.shop_table dl.variation dd,
.woocommerce-checkout #order_review table.shop_table dl.variation p {
  margin: 0;
  font-weight: 400;
}

/* totals block reads as a summary, not as more product rows */
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
  border-top: 1px solid var(--mk-color-border) !important;
  background: var(--mk-color-bg-soft);
}

.woocommerce-checkout #order_review table.shop_table tfoot th {
  color: var(--mk-color-text-muted);
  font-weight: 400;
}

.woocommerce-checkout #order_review table.shop_table tfoot td {
  text-align: end;
  font-weight: 700;
  /* the amount must never break across two lines in this narrow column */
  white-space: nowrap;
}

.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  color: var(--mk-color-primary-hover);
}

.woocommerce-checkout #payment {
  border-radius: var(--mk-radius-md) !important;
  background: var(--mk-color-bg-soft) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 14px !important;
  border-bottom: 1px solid var(--mk-color-border) !important;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  font-size: var(--mk-fs-sm);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--mk-color-primary);
  margin-inline-end: 8px;
}

.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: var(--mk-radius-md) !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-xs);
  line-height: 2;
}

/* WC draws a little triangle above the payment box with a border trick */
.woocommerce-checkout #payment div.payment_box::before {
  display: none !important;
}

.woocommerce-checkout #payment .place-order {
  padding: 16px 14px !important;
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  /* it sat directly against the privacy paragraph above it */
  margin-top: 16px;
  justify-content: center;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: var(--mk-fs-xs);
  line-height: 2;
  color: var(--mk-color-text-muted);
}

/* ==========================================================================
   BLOCK cart & checkout (WooCommerce Blocks)
   ⚠ This store's cart/checkout pages use the BLOCK versions, not the classic
   shortcode ones — confirmed from the rendered page ("مجموع تقریبی", the
   collapsible coupon panel, the dark submit button). None of the classic
   selectors above exist there, which is why the page looked untouched. The
   block markup is a completely separate class family and is skinned below.
   ========================================================================== */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  margin-block: 0 10px;
}

.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__main > h2,
.wc-block-components-checkout-step__title {
  font-family: var(--mk-font-heading) !important;
  font-weight: 700 !important;
  color: var(--mk-color-text) !important;
}

/* (the .mk-wc-page shell itself is styled in makhmal-wc.css — it is used by
   the account page too, which does not load this file) */

/* Defence in depth: even if a block layout ends up inside an article body
   (a page built with the editor, a shortcode dropped into a post), the blog
   typography must not decorate WooCommerce's markup — no heading bars, no
   bullet dots, no table skin. */
.mk-post__content .wp-block-woocommerce-cart,
.mk-post__content .wp-block-woocommerce-checkout,
.woocommerce-cart .mk-post__content,
.woocommerce-checkout .mk-post__content {
  color: inherit;
}

.mk-post__content .wp-block-woocommerce-cart h2::before,
.mk-post__content .wp-block-woocommerce-checkout h2::before,
.mk-post__content .wp-block-woocommerce-cart h3::before,
.mk-post__content .wp-block-woocommerce-checkout h3::before,
.mk-post__content .wp-block-woocommerce-cart li::before,
.mk-post__content .wp-block-woocommerce-checkout li::before {
  content: none !important;
}

.mk-post__content .wp-block-woocommerce-cart h2,
.mk-post__content .wp-block-woocommerce-checkout h2,
.mk-post__content .wp-block-woocommerce-cart h3,
.mk-post__content .wp-block-woocommerce-checkout h3,
.mk-post__content .wp-block-woocommerce-cart li,
.mk-post__content .wp-block-woocommerce-checkout li {
  padding-inline-start: 0 !important;
}

.mk-post__content .wp-block-woocommerce-cart table,
.mk-post__content .wp-block-woocommerce-checkout table {
  border: none;
  border-radius: 0;
}

/* ---- Layout: our own grid, not the blocks' float/flex widths ----
   ⚠ WooCommerce Blocks sizes these two columns with percentage widths and
   its own paddings; inside our narrower container that overlapped the totals
   card onto the items table (seen on the live page). Declaring the grid here
   and neutralising their width/padding is what actually separates them. */
/* ⚠ `.wc-block-checkout` appears TWICE in the rendered page: once on the
   outer block wrapper and once on the inner sidebar layout. Putting the grid
   on that class made the OUTER wrapper a two-column grid too, so the whole
   checkout sat in one 1fr track and a 360px column stood empty — that is the
   broken column layout. The grid belongs to the sidebar-layout element only. */
/* The outer wrapper is reset to plain block flow — WooCommerce's own CSS can
   make it a flex container, which would shrink the grid inside it (measured:
   the form column collapsed to 243px). The :not(:has()) guard means this can
   only ever hit a wrapper that is NOT itself the two-column layout, which is
   what went wrong when the rule was unconditional and !important. */
.wp-block-woocommerce-cart:not(:has(> .wc-block-cart__main)),
.wp-block-woocommerce-checkout:not(:has(> .wc-block-checkout__main)) {
  display: block;
}


/* both shapes are covered — the sidebar-layout element, and (for WC versions
   that omit that class) the cart/checkout element itself — while the outer
   block wrapper is excluded by name so it can never become a grid */
.wc-block-components-sidebar-layout,
.wc-block-cart:not(.wp-block-woocommerce-cart),
.wc-block-checkout:not(.wp-block-woocommerce-checkout),
/* variant where WooCommerce puts both names on one element: match it by the
   column it actually contains, so the outer wrapper still never qualifies */
.wc-block-cart:has(> .wc-block-cart__main),
.wc-block-checkout:has(> .wc-block-checkout__main) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-cart__main,
.wc-block-cart__sidebar,
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .wc-block-components-sidebar-layout,
  .wc-block-cart:not(.wp-block-woocommerce-cart),
  .wc-block-checkout:not(.wp-block-woocommerce-checkout),
  .wc-block-cart:has(> .wc-block-cart__main),
  .wc-block-checkout:has(> .wc-block-checkout__main) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ---- Cart: items panel + totals card ---- */
.wc-block-cart .wc-block-cart__main {
  padding: 0;
}

/* ⚠ the parent theme's style.css resets `table { display: block }`. A
   display:block table ignores table-layout and lets its rows shrink-wrap to
   content — measured 392px of rows inside a 303px box, i.e. the rows spilling
   past the card border on a phone. Restoring display:table is the fix. */
.wc-block-cart-items,
.wc-block-cart .wc-block-cart-items {
  display: table !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  overflow: hidden;
}

.wc-block-cart-items__header {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text) !important;
  font-size: var(--mk-fs-xs) !important;
  font-weight: 700 !important;
  text-transform: none;
}

.wc-block-cart-items__header th {
  padding: 12px 16px !important;
  border: none !important;
}

.wc-block-cart-items__row {
  border-bottom: 1px solid var(--mk-color-border) !important;
}

.wc-block-cart-items__row:last-child {
  border-bottom: none !important;
}

.wc-block-cart-items__row td {
  padding: 16px !important;
  border: none !important;
  vertical-align: top;
}

.wc-block-cart-item__image img {
  width: 78px !important;
  max-width: none !important;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
}

.wc-block-components-product-name {
  color: var(--mk-color-text) !important;
  font-weight: 700 !important;
  font-size: var(--mk-fs-sm) !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
}

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

.wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description {
  font-size: var(--mk-fs-xs) !important;
  color: var(--mk-color-text-muted) !important;
}

.wc-block-components-product-price,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
  font-family: var(--mk-font-heading);
  font-weight: 700;
  color: var(--mk-color-primary-hover) !important;
}

/* quantity stepper — the same pill used on the product page */
.wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: stretch;
  min-width: 0 !important;
  width: auto !important;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-pill) !important;
  background: var(--mk-color-bg-soft);
  overflow: hidden;
}

.wc-block-components-quantity-selector::after {
  display: none !important;
}

/* WooCommerce's DOM order is input → minus → plus, which renders as
   «+ − ۱» in RTL. Explicit order puts it back to the familiar stepper:
   plus at the start side, the number in the middle, minus at the end. */
.wc-block-components-quantity-selector__button--plus {
  order: 1;
}

.wc-block-components-quantity-selector__input {
  order: 2;
}

.wc-block-components-quantity-selector__button--minus {
  order: 3;
}

.wc-block-components-quantity-selector__input {
  width: 44px !important;
  min-width: 0 !important;
  padding: 8px 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--mk-color-text) !important;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm) !important;
  text-align: center;
}

.wc-block-components-quantity-selector__button {
  width: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--mk-color-primary-hover) !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  opacity: 1 !important;
}

.wc-block-components-quantity-selector__button:hover {
  background: var(--mk-color-bg-muted) !important;
}

.wc-block-cart-item__remove-link {
  color: var(--mk-color-text-muted) !important;
  font-size: var(--mk-fs-xs) !important;
  text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
  color: var(--mk-color-accent-2) !important;
}

/* ---- Sidebar / totals ---- */
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-checkout .wc-block-checkout__sidebar {
  padding: 0;
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  border-color: var(--mk-color-border) !important;
}

/* the sidebar element IS the card (it carries both class names), so the card
   treatment goes on it directly — an inner `>` selector matched nothing */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  padding: 20px !important;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.wc-block-components-checkout-order-summary__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.wc-block-components-checkout-order-summary__title-text {
  margin: 0;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.wc-block-components-checkout-order-summary__title-price {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

.wc-block-components-order-summary-item {
  padding: 12px 0 !important;
}

.wc-block-components-order-summary-item__image img {
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: var(--mk-fs-sm) !important;
  line-height: 1.9 !important;
}

.wc-block-components-notice-banner.is-error {
  border-radius: var(--mk-radius-md) !important;
  border-color: color-mix(in srgb, var(--mk-color-accent-2) 34%, #fff) !important;
  background: color-mix(in srgb, var(--mk-color-accent-2) 8%, #fff) !important;
}

.wc-block-components-totals-item {
  font-size: var(--mk-fs-sm) !important;
  color: var(--mk-color-text-soft) !important;
}

.wc-block-components-totals-item__label {
  font-weight: 400 !important;
}

.wc-block-components-totals-item__value {
  color: var(--mk-color-text) !important;
  font-weight: 700 !important;
  /* the amount stays on one line; the label is the part allowed to wrap */
  white-space: nowrap;
  flex: 0 0 auto;
}

.wc-block-components-totals-item__label {
  min-width: 0;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg) !important;
  color: var(--mk-color-primary-hover) !important;
}

/* coupon / collapsible panels */
.wc-block-components-panel__button {
  color: var(--mk-color-primary-hover) !important;
  font-size: var(--mk-fs-sm) !important;
  font-weight: 700 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  padding: 14px 15px 6px !important;
  border: 1px solid var(--mk-color-border) !important;
  border-radius: var(--mk-radius-md) !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text) !important;
  font-family: var(--mk-font-body) !important;
  font-size: var(--mk-fs-sm) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
  outline: none !important;
  background: var(--mk-color-surface) !important;
  border-color: var(--mk-blue-highlight) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-blue-highlight) 22%, transparent) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  color: var(--mk-color-text-muted) !important;
  font-family: var(--mk-font-body) !important;
}

/* ---- Block buttons: the dark default becomes the brand pill ---- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  min-height: 48px !important;
  padding: 0 26px !important;
  border: none !important;
  border-radius: var(--mk-radius-pill) !important;
  background: var(--mk-gradient-cta) !important;
  color: var(--mk-color-text-on-brand) !important;
  font-family: var(--mk-font-body) !important;
  font-size: var(--mk-fs-sm) !important;
  font-weight: 700 !important;
  box-shadow: var(--mk-shadow-md);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.wc-block-components-button:not(.is-link):hover {
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow-lg);
}

/* the cart's own CTA is full width at every size — measured, its wrapper was
   shrink-wrapping to the label (174px inside a 208px card) */
.wc-block-cart__submit,
.wc-block-checkout__actions_row {
  display: block;
  width: 100%;
}

.wc-block-cart__submit-button {
  width: 100%;
}

.wc-block-components-button:not(.is-link).wc-block-components-totals-coupon__button {
  background: var(--mk-color-bg-muted) !important;
  color: var(--mk-color-primary-hover) !important;
  box-shadow: none !important;
}

.wc-block-components-button.is-link {
  color: var(--mk-color-primary-hover) !important;
}

/* ==========================================================================
   ⚠ WooCommerce Blocks does NOT switch the cart to its mobile layout with a
   media query — it measures the container in JS and adds an `is-mobile`
   CLASS to the layout element (confirmed in the rendered page:
   `wc-block-components-sidebar-layout wc-block-cart … is-mobile`). Its mobile
   rules, including the absolutely-positioned line total that landed on top of
   the title, hang off that class, so a media query alone can be inactive
   exactly when those rules are live. Everything below therefore keys off the
   same class; the media-query block further down stays as the fallback for
   the reverse case (narrow screen, class not yet applied).
   ========================================================================== */
.wc-block-cart.is-mobile .wc-block-cart-items,
.wc-block-cart.is-mobile .wc-block-cart-items tbody {
  display: block !important;
  width: 100%;
}

.wc-block-cart.is-mobile .wc-block-cart-items__header {
  display: none !important;
}

.wc-block-cart.is-mobile .wc-block-cart-items__row {
  display: grid !important;
  position: static !important;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px !important;
}

.wc-block-cart.is-mobile .wc-block-cart-items__row > td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
}

.wc-block-cart.is-mobile .wc-block-cart-item__image {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.wc-block-cart.is-mobile .wc-block-cart-item__image img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
}

.wc-block-cart.is-mobile .wc-block-cart-item__product {
  grid-column: 2;
  grid-row: 1;
}

.wc-block-cart.is-mobile .wc-block-cart-item__total {
  position: static !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 2;
  padding-top: 8px !important;
  text-align: start !important;
  white-space: normal !important;
}

/* one price per row on a phone: the unit price is dropped and the line total
   is labelled (WooCommerce prints both by design) */
.wc-block-cart.is-mobile .wc-block-cart-item__prices {
  display: none !important;
}

.wc-block-cart.is-mobile .wc-block-cart-item__total .wc-block-components-product-price::before {
  content: 'جمع: ';
  color: var(--mk-color-text-muted);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-xs);
  font-weight: 400;
}

.wc-block-cart.is-mobile .wc-block-cart-item__quantity {
  width: 100% !important;
  max-width: none !important;
  margin-top: 10px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---- Remove control ----
   ⚠ In the real markup this is a BUTTON WITH AN SVG, not the word «حذف», and
   makhmal-base.css sizes every bare svg at 1em — which is why it showed up as
   a tiny speck on the phone. It gets a real 36px tap target here (the a11y
   minimum) and an icon big enough to recognise. */
.wc-block-cart-item__remove-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text-muted) !important;
  cursor: pointer;
  transition: background var(--mk-transition), color var(--mk-transition);
}

.wc-block-cart-item__remove-link svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor;
}

.wc-block-cart-item__remove-link:hover {
  background: color-mix(in srgb, var(--mk-color-accent-2) 12%, #fff) !important;
  color: var(--mk-color-accent-2) !important;
}

/* ---- Checkout blocks: one spacing scale for every field ----
   ⚠ The field margins are zeroed below and ALL spacing comes from the gap —
   which means the form MUST be a grid, or the gap is ignored and the fields
   end up touching (exactly what happened on the phone layout). So the grid is
   declared here rather than assumed from WooCommerce's own CSS. */
.wc-block-components-address-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px !important;
}

@media (min-width: 600px) {
  .wc-block-components-address-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* full width by default; only the short pairs share a row */
  .wc-block-components-address-form > * {
    grid-column: 1 / -1;
  }

  .wc-block-components-address-form__first_name,
  .wc-block-components-address-form__last_name,
  .wc-block-components-address-form__postcode,
  .wc-block-components-address-form__phone,
  .wc-block-components-address-form__city,
  .wc-block-components-address-form__state {
    grid-column: auto;
  }
}

/* the row gap has to clear the label chip that straddles each field's top
   border (half the chip's height hangs above the box) */
.wc-block-checkout__main .wc-block-components-form {
  row-gap: 26px !important;
  column-gap: 14px !important;
}

.wc-block-components-address-form,
.wc-block-checkout__main .wc-block-components-address-form {
  row-gap: 26px !important;
  column-gap: 14px !important;
}

.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-blocks-components-select,
.wc-block-checkout__main .wc-block-components-text-input,
.wc-block-checkout__main .wc-blocks-components-select {
  margin: 0 !important;
}

/* first field of a card: the chip would otherwise ride on the card's own
   padding edge */
.wc-block-components-address-form > :first-child,
.wc-block-checkout__main .wc-block-components-form > :first-child {
  margin-top: 6px !important;
}

/* ⚠ The floating label crammed against the top border and the value had
   almost no room. Instead of squeezing both inside the box, the label now
   sits ON the border as a small chip — the field keeps normal padding and the
   value is vertically centred. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-blocks-components-select__select {
  min-height: 54px;
  padding: 15px !important;
}

/* ⚠ measured: the block select had NO width rule anywhere and stayed an
   86px inline-block, which also threw the arrow (positioned against the
   full-width container) outside the field. */
.wc-blocks-components-select__select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  /* absolute so it can sit ON the border — the select's label is static in
     WooCommerce's own CSS and would otherwise stack above the field */
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  right: 12px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  translate: 0 0 !important;
  padding: 2px 10px !important;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface) !important;
  color: var(--mk-color-text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  /* the chip must not swallow clicks meant for the field */
  pointer-events: none;
}

/* WooCommerce animates the label between two positions; both states are
   pinned to the border so nothing jumps on focus */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-blocks-components-select__container label {
  transform: translateY(-50%) !important;
  top: 0 !important;
}

/* ⚠ the arrow is positioned against the CONTAINER, so that container has to
   be the positioning context — without it the arrow escaped the field
   entirely (seen in the screenshot). The site is RTL-only, so the physical
   `left` here is deliberate: the arrow belongs on the left of the box. */
.wc-blocks-components-select,
.wc-blocks-components-select__container {
  position: relative !important;
  /* measured: the select wrappers were shrink-wrapping, so the country and
     state fields came out much narrower than the text fields beside them */
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* ⚠ do NOT add `inset-inline-end: auto` here: in RTL that IS `left`, and
   coming after `left: 12px` it cancelled it — the arrow jumped back to the
   other side (measured 553px from the field's start). Physical only. */
.wc-blocks-components-select__expand {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  right: auto !important;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  fill: var(--mk-color-text-muted);
  pointer-events: none;
}

/* the value keeps clear of the arrow */
.wc-blocks-components-select__select {
  padding-left: 42px !important;
}

.wc-block-components-checkbox {
  margin: 4px 0 !important;
}

.wc-block-components-checkbox__input {
  accent-color: var(--mk-color-primary);
}

.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-address-card__edit {
  color: var(--mk-color-primary-hover) !important;
  font-size: var(--mk-fs-xs) !important;
}

.wc-block-checkout__actions,
.wc-block-checkout__actions_row {
  margin-top: 6px;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--mk-color-border);
}

.wc-block-checkout__terms {
  margin: 0 0 12px !important;
  font-size: var(--mk-fs-xs);
  line-height: 2;
  color: var(--mk-color-text-muted);
}

/* ---- Checkout blocks ---- */
/* even padding on all four sides: the blocks' own bottom spacing lives on the
   last field inside the step, which made the box look bottom-heavy-less —
   that inner margin is zeroed below so the 20px is the only spacing */
.wc-block-checkout__main .wc-block-components-checkout-step {
  margin-bottom: 16px;
  padding: 20px !important;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.wc-block-components-checkout-step__heading {
  margin-top: 0 !important;
}

/* nothing inside a step adds trailing space of its own, so top and bottom
   padding read as equal */
.wc-block-components-checkout-step__content > *:last-child,
.wc-block-components-checkout-step__content .wc-block-components-address-form > *:last-child,
.wc-block-components-checkout-step__content .wc-block-components-address-address-wrapper {
  margin-bottom: 0 !important;
}

.wc-block-components-checkout-step__content {
  padding-bottom: 0 !important;
}

.wc-block-components-checkout-step__description {
  color: var(--mk-color-text-muted) !important;
  font-size: var(--mk-fs-xs) !important;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  margin-bottom: 8px;
  padding: 12px 14px !important;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  font-size: var(--mk-fs-sm);
}

.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control__option-checked::after {
  border: none !important;
}

.wc-block-components-radio-control__input {
  accent-color: var(--mk-color-primary);
}

.wc-block-components-order-summary-item__quantity {
  background: var(--mk-color-bg-muted) !important;
  border-color: var(--mk-color-border) !important;
  color: var(--mk-color-primary-hover) !important;
}

.wc-block-components-notice-banner {
  border-radius: var(--mk-radius-md) !important;
}

@media (max-width: 700px) {
  /* ⚠ On a phone the row stops being a table row: three table columns cannot
     hold an image, a long Persian title AND a price without the price being
     pushed out of the card (measured — the total was clipped at the card's
     edge). Each row becomes a small grid: image on one side, product details
     and the line total stacked beside it. */
  .wc-block-cart-items,
  .wc-block-cart-items tbody {
    display: block !important;
    width: 100%;
  }

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

  /* ⚠ WooCommerce Blocks makes the row `position: relative` and pulls the
     line total OUT OF FLOW into its corner on this breakpoint — which is why
     the price landed on top of the title. The row is re-flowed as a grid and
     the total is forced back into normal flow. */
  .wc-block-cart-items__row {
    display: grid !important;
    position: static !important;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 12px;
  }

  .wc-block-cart-items__row > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
  }

  .wc-block-cart-item__image {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .wc-block-cart-item__product {
    grid-column: 2;
    grid-row: 1;
  }

  /* back into the flow, on its own line under the product details */
  .wc-block-cart-item__total {
    position: static !important;
    inset: auto !important;
    grid-column: 2;
    grid-row: 2;
    padding-top: 8px !important;
    text-align: start !important;
    white-space: normal !important;
  }

  /* ⚠ two prices per row is WooCommerce's own design: the UNIT price sits
     under the title and the LINE TOTAL has its own column. On a phone, with
     quantity 1, they are the same number twice — so the unit price is hidden
     here and the remaining figure is labelled, leaving exactly one price. */
  .wc-block-cart-item__product .wc-block-cart-item__prices,
  .wc-block-cart-item__product > .wc-block-components-product-price {
    display: none !important;
  }

  .wc-block-cart-item__total .wc-block-components-product-price::before {
    content: 'جمع: ';
    color: var(--mk-color-text-muted);
    font-family: var(--mk-font-body);
    font-size: var(--mk-fs-xs);
    font-weight: 400;
  }

  .wc-block-cart-item__product,
  .wc-block-cart-item__total {
    overflow-wrap: anywhere;
  }

  /* the image cell is a fixed square: without the ratio the picture stretched
     to the full height of the row (seen at 320px) */
  .wc-block-cart-item__image img {
    width: 78px !important;
    height: 78px !important;
    min-width: 0;
    max-width: 78px !important;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--mk-radius-md);
    border: 1px solid var(--mk-color-border);
  }

  /* quantity + remove share a row and are allowed to wrap; the remove label
     was being squeezed onto two lines inside its own box */
  .wc-block-cart-item__quantity {
    /* the wrapper was shrink-wrapping to 132px inside a 174px cell, which is
       what pushed the remove link onto its own line */
    width: 100% !important;
    max-width: none !important;
    margin-top: 10px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .wc-block-cart-item__remove-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 10px !important;
    border: none !important;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-color-bg-soft);
  }

  /* measured at 320px: stepper 114 + remove 50 + gap 10 = exactly the content
     width, so the remove link wrapped to a line of its own. A slimmer stepper
     keeps both on one row on the narrowest phones. */
  .wc-block-components-quantity-selector__input {
    width: 34px !important;
  }

  .wc-block-components-quantity-selector__button {
    width: 28px !important;
  }

  .wc-block-cart-item__total {
    padding-top: 0 !important;
    white-space: nowrap;
  }

  .wc-block-components-product-name {
    line-height: 2 !important;
  }

  .wc-block-cart__sidebar > .wc-block-components-sidebar,
  .wc-block-checkout__sidebar > .wc-block-components-sidebar {
    padding: 16px 16px 18px !important;
  }

  .wc-block-components-totals-wrapper {
    padding: 12px 0 !important;
  }

  /* same on all four sides here too — the phone layout still had 6px at the
     bottom against 16px at the top */
  .wc-block-checkout__main .wc-block-components-checkout-step {
    padding: 16px !important;
  }

  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-components-button:not(.is-link):hover {
    transform: none;
  }
}

/* ==========================================================================
   Shared buttons (cart + checkout)
   ========================================================================== */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-cart input.button,
.woocommerce-checkout input.button,
.woocommerce-cart a.button,
.woocommerce-checkout a.button,
.woocommerce-checkout #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px !important;
  border: none !important;
  border-radius: var(--mk-radius-pill) !important;
  background: var(--mk-gradient-cta) !important;
  color: var(--mk-color-text-on-brand) !important;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow-lg);
}

/* secondary: "update cart", "apply coupon" */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .coupon .button {
  background: var(--mk-color-bg-muted) !important;
  color: var(--mk-color-primary-hover) !important;
  box-shadow: none !important;
}

.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: 0.5;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals {
    width: 100% !important;
    float: none !important;
  }

  .woocommerce-cart .cart-collaterals {
    margin-top: 18px;
  }
}

@media (max-width: 700px) {
  /* ⚠ the cart table cannot be a table on a phone. WooCommerce's own
     shop_table_responsive markup carries data-title on every cell, so each
     row becomes a card with its own labels — no horizontal scrollbar. */
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody,
  .woocommerce-cart table.shop_table.cart tr,
  .woocommerce-cart table.shop_table.cart td {
    display: block;
    width: 100%;
  }

  .woocommerce-cart table.shop_table.cart thead {
    display: none;
  }

  .woocommerce-cart table.shop_table.cart {
    border: none !important;
    background: none;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item {
    position: relative;
    margin-bottom: 12px;
    padding: 8px 6px;
    border-radius: var(--mk-radius-md);
    border: 1px solid var(--mk-color-border);
    background: var(--mk-color-surface);
  }

  /* ⚠ MEASURED: the desktop separator rule is
     `…cart tbody tr:not(:last-child) td` — that extra `tbody` ELEMENT makes it
     (0,4,4), one step above the phone rule's (0,4,3), so `border:none` lost and
     every cell (the ✕ and the photo included) kept a stray line. The phone
     override has to carry `tbody` too. */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
    border: none !important;
  }

  /* dividers only between the DATA rows — never under the ✕ or the photo */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal {
    border-top: 1px solid var(--mk-color-border) !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px !important;
    border: none !important;
    text-align: end;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td::before {
    content: attr(data-title);
    flex-shrink: 0;
    color: var(--mk-color-text-muted);
    font-size: var(--mk-fs-xs);
    font-weight: 700;
    text-align: start;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
    justify-content: flex-start;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail::before,
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove::before {
    display: none;
  }

  /* the ✕ belongs in the card's corner, not on a row of its own with an
     empty label slot beside it */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    padding: 0 !important;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
    padding-bottom: 0 !important;
  }

  /* the variation list must drop under the product name, not share its line */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name dl.variation {
    flex-basis: 100%;
    justify-content: flex-end;
  }

  /* ⚠ the desktop rule above forces `display:table-cell !important` on this
     cell (it must stay in the table flow there); the phone layout has to beat
     that with its own !important, not by lowering the desktop one. */
  .woocommerce-cart table.shop_table.cart td.actions {
    display: block !important;
    border-radius: var(--mk-radius-md);
  }

  .woocommerce-cart .coupon,
  .woocommerce-cart .coupon #coupon_code,
  .woocommerce-cart table.shop_table.cart td.actions .button {
    width: 100% !important;
    margin-inline-start: 0;
  }

  .woocommerce-cart table.shop_table.cart td.actions .button[name="update_cart"] {
    float: none;
    margin-top: 10px;
  }

  .woocommerce-cart .coupon {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-cart .cart_totals {
    padding: 18px 16px 20px;
  }
  
    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        grid-row-start: 4 !important;
    }
}

/* ---- Narrow phones: measured at 320px the product cell is only ~132px, so
   the stepper and the remove link cannot share a line at the sizes above.
   A smaller thumbnail buys the row back. ---- */
@media (max-width: 400px) {
  .wc-block-cart-items__row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 10px;
  }

  .wc-block-cart-item__image img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
  }

  .wc-block-components-quantity-selector__input {
    width: 30px !important;
  }

  .wc-block-components-quantity-selector__button {
    width: 26px !important;
  }

  .wc-block-cart-item__remove-link {
    padding: 5px 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart .button:hover,
  .woocommerce-checkout .button:hover,
  .woocommerce-checkout #place_order:hover {
    transform: none;
  }
}