/* ==========================================================================
   WADI MATROUH — FOOTER · CART · CHECKOUT · ACCOUNT
   Loads last. Commerce pages are styled here; none of their logic is touched.
   ========================================================================== */

/* ==========================================================================
   0. SCREEN-READER TEXT
   WooCommerce prints an sr-only description inside every price ("نطاق السعر:
   من … خلال …"). Once .price becomes a flex container that span turns into a
   flex ITEM and starts taking layout — so the hidden text rendered visibly
   next to the price on cards and on the PDP.

   The standard clip technique, applied late enough that no theme rule can
   re-expose it.
   ========================================================================== */
.screen-reader-text,
.woocommerce .screen-reader-text,
.woocommerce-Price-amount + .screen-reader-text {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================================================== 
   CHECKOUT — dependent area + isolated Buy Now order review  2026-10-11
   ========================================================================== */
.woocommerce-checkout .form-row.wadi-area-waiting label {
  color: var(--wadi-ink-muted);
}
.woocommerce-checkout #billing_city:disabled,
.woocommerce-checkout .wadi-area-waiting .select2-selection--single {
  cursor: not-allowed;
  color: var(--wadi-ink-muted);
  background: var(--wadi-cream-50);
  opacity: .78;
}

/* The product row itself is the compact card inside "طلبك". Its table header
   adds no information on a single-product checkout. */
.wadi-buy-now-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}
.wadi-buy-now-product {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}
.wadi-buy-now-product__media {
  display: block;
  width: 52px;
  height: 64px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-md);
  background: var(--wadi-surface);
}
.woocommerce table.shop_table img.wadi-buy-now-product__image,
.wadi-buy-now-product__image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.wadi-buy-now-product__name {
  min-width: 0;
  color: var(--wadi-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.wadi-buy-now-checkout #order_review dl.variation {
  margin: 4px 60px 0 0;
  color: var(--wadi-ink-soft);
  font-size: var(--wadi-fs-xs);
}

.wadi-buy-now-qty {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  width: max-content;
  margin-block-start: 4px;
  overflow: hidden;
  border: 1px solid var(--wadi-gold);
  border-radius: var(--wadi-r-pill);
  background: var(--wadi-cream);
  vertical-align: middle;
}
.wadi-buy-now-qty__step,
.wadi-buy-now-qty__value {
  width: 24px;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wadi-olive-900);
  font-family: var(--wadi-font-latin);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.wadi-buy-now-qty__step {
  cursor: pointer;
  font-family: var(--wadi-font-ar);
}
.wadi-buy-now-qty__step:hover,
.wadi-buy-now-qty__step:focus-visible {
  background: var(--wadi-cream-200);
  outline: 0;
}
.wadi-buy-now-qty__value {
  border-inline: 1px solid rgba(201, 166, 70, .45);
}

@media (max-width: 480px) {
  .wadi-buy-now-product {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 7px;
  }
  .wadi-buy-now-product__media {
    width: 48px;
    height: 60px;
  }
  .wadi-buy-now-checkout #order_review dl.variation {
    margin-inline-start: 55px;
  }
}
.screen-reader-text:focus {
  position: static !important; width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important; margin: 0 !important;
}

/* ==========================================================================
   1. FOOTER
   ========================================================================== */
.wadi-footer {
  background: var(--wadi-olive);
  color: var(--wadi-cream);
  margin-block-start: var(--wadi-sp-7);
}
.wadi-footer__grid {
  display: grid; gap: var(--wadi-sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--wadi-sp-7);
}
@media (min-width: 640px)  { .wadi-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* The three list columns are equal now. The last was 1.2fr back when it held
   a phone number, an email and WhatsApp; it holds one line today, and the extra
   width only made the row look lopsided. The brand column keeps its 1.5fr —
   it carries a paragraph, not a list. */
@media (min-width: 1024px) { .wadi-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--wadi-sp-6); } }

/* The production mark is a transparent shield, so it can now sit directly on
   the olive footer without the old white rectangle. Keep it deliberately
   larger than the header mark while preserving its natural proportions. */
.wadi-brand--footer { display: inline-flex; align-items: center; }
.wadi-brand--footer .wadi-brand__logo {
  display: block;
  width: auto !important;
  height: 112px !important;
  max-width: 124px !important;
  object-fit: contain;
}
.wadi-brand--footer::after { content: none; }

.wadi-footer__tag {
  font-family: var(--wadi-font-ar-display);
  color: var(--wadi-gold);
  font-size: var(--wadi-fs-md);
  margin: var(--wadi-sp-2) 0 var(--wadi-sp-3);
}
.wadi-footer__text {
  color: var(--wadi-cream); opacity: .82;
  font-size: var(--wadi-fs-sm); line-height: var(--wadi-lh-body);
  margin: 0 0 var(--wadi-sp-4); max-width: 38ch;
}
.wadi-footer__cod {
  display: inline-flex; align-items: center; gap: var(--wadi-sp-2);
  margin: 0; padding: var(--wadi-sp-2) var(--wadi-sp-4);
  font-size: var(--wadi-fs-sm); font-weight: 600;
  color: var(--wadi-gold);
  border: 1px solid rgba(212, 175, 55, .40);
  border-radius: var(--wadi-r-pill);
}

.wadi-footer__head {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md); font-weight: 700;
  color: #fff; margin: 0 0 var(--wadi-sp-4);
}
.wadi-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wadi-footer__col li { margin: 0; }
.wadi-footer__col a {
  display: inline-flex; align-items: center; gap: var(--wadi-sp-2);
  min-height: var(--wadi-tap-min);
  color: var(--wadi-cream); text-decoration: none;
  font-size: var(--wadi-fs-sm); opacity: .85;
  transition: opacity var(--wadi-dur) var(--wadi-ease), color var(--wadi-dur) var(--wadi-ease);
}
.wadi-footer__col a:hover { opacity: 1; color: var(--wadi-gold); }
.wadi-footer__contact .wadi-ico { color: var(--wadi-gold); flex: 0 0 auto; }
.wadi-footer__contact bdi { direction: ltr; unicode-bidi: isolate; font-family: var(--wadi-font-latin); }

.wadi-footer__bar {
  border-top: 1px solid rgba(248, 238, 217, .16);
  background: rgba(0, 0, 0, .12);
}
/* `space-between` was right when this bar held the copyright AND a developer
   credit. The credit is gone, and with a single child `space-between` pins it
   to one edge — so a line meant to close the page sat hard against the side. */
.wadi-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: var(--wadi-sp-3);
  align-items: center; justify-content: center;
  padding-block: var(--wadi-sp-4);
  text-align: center;
}
.wadi-footer__bar p { margin: 0; font-size: var(--wadi-fs-xs); color: var(--wadi-cream); opacity: .75; }

/* The mobile bottom nav sits over the footer; give the footer room. */
@media (max-width: 1023.98px) { .wadi-footer__bar-inner { padding-bottom: var(--wadi-sp-5); } }

/* ==========================================================================
   2. CART
   ========================================================================== */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce { padding-block: var(--wadi-sp-5) var(--wadi-sp-7); }

.woocommerce table.shop_table {
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  border-collapse: separate; border-spacing: 0;
  overflow: hidden; width: 100%;
}
.woocommerce table.shop_table th {
  background: var(--wadi-cream-50);
  font-family: var(--wadi-font-ar); font-weight: 700; font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink); padding: var(--wadi-sp-4); text-align: start;
  border-bottom: 1px solid var(--wadi-line);
}
.woocommerce table.shop_table td {
  padding: var(--wadi-sp-4); border-bottom: 1px solid var(--wadi-line);
  vertical-align: middle; font-size: var(--wadi-fs-sm);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--wadi-r-md); background: var(--wadi-surface); }
.woocommerce table.shop_table .product-name a { color: var(--wadi-ink); font-weight: 600; text-decoration: none; }
.woocommerce table.shop_table .product-name a:hover { color: var(--wadi-olive); }
.woocommerce a.remove {
  width: var(--wadi-tap-min); height: var(--wadi-tap-min);
  display: inline-grid !important; place-items: center;
  color: var(--wadi-ink-muted) !important; font-size: 20px;
  border-radius: 50%; background: transparent !important;
}
.woocommerce a.remove:hover { color: #fff !important; background: var(--wadi-sale, #B3261E) !important; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  padding: var(--wadi-sp-5);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--wadi-font-ar-display); color: var(--wadi-olive);
  font-size: var(--wadi-fs-lg); margin: 0 0 var(--wadi-sp-4);
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td { background: transparent; border: 0; padding-block: var(--wadi-sp-3); }
.woocommerce .order-total .amount, .woocommerce .cart_totals .amount {
  font-family: var(--wadi-font-latin); direction: ltr; unicode-bidi: isolate;
  font-weight: 700; color: var(--wadi-olive); font-feature-settings: "tnum" 1;
}

.woocommerce .checkout-button,
.woocommerce .button.checkout-button,
.woocommerce #place_order {
  width: 100%; min-height: 52px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--wadi-olive) !important; color: #fff !important;
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-md) !important; font-weight: 700 !important;
  border-radius: var(--wadi-r-pill) !important;
}
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover { background: var(--wadi-olive-500) !important; }

.woocommerce .cart-empty, .woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-radius: var(--wadi-r-md);
  border: 1px solid var(--wadi-line);
  background: var(--wadi-cream-50) !important;
  color: var(--wadi-ink) !important;
  font-size: var(--wadi-fs-sm);
  padding: var(--wadi-sp-4) var(--wadi-sp-5) !important;
}
.woocommerce-message { border-color: var(--wadi-olive); }
.woocommerce-error  { border-color: var(--wadi-sale, #B3261E); }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none !important; }

/* ==========================================================================
   3. CHECKOUT
   A cash-on-delivery checkout lives or dies on the phone number and the
   address. Both get full-width, 48px-tall fields with visible labels — never
   placeholder-only labels, which disappear the moment the customer types.
   ========================================================================== */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--wadi-sp-6); align-items: start;
  }
  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
  .woocommerce-checkout form.checkout #order_review { position: sticky; top: calc(76px + var(--wadi-sp-4)); }
}
.woocommerce form .form-row { padding: 0; margin: 0 0 var(--wadi-sp-4); }
.woocommerce form .form-row label {
  display: block; text-align: start;
  font-family: var(--wadi-font-ar); font-weight: 600; font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink); margin-bottom: var(--wadi-sp-2);
}
.woocommerce form .form-row .required { color: var(--wadi-sale, #B3261E); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%; min-height: 48px;
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  color: var(--wadi-ink); background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  transition: border-color var(--wadi-dur) var(--wadi-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--wadi-olive); outline: 2px solid var(--wadi-olive-100); }
/* Phone and any numeric field stays LTR even inside the RTL form. */
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row #billing_phone,
.woocommerce form .form-row #billing_postcode {
  direction: ltr; unicode-bidi: isolate; text-align: start;
  font-family: var(--wadi-font-latin);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--wadi-sale, #B3261E); }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 {
  font-family: var(--wadi-font-ar-display); color: var(--wadi-olive);
  font-size: var(--wadi-fs-lg); margin: 0 0 var(--wadi-sp-4);
}

/* Payment box */
.woocommerce-checkout #payment {
  background: transparent; border-radius: 0; margin-block-start: var(--wadi-sp-4);
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0; border: 0; margin: 0 0 var(--wadi-sp-4); list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--wadi-sp-4);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  background: var(--wadi-surface); margin-bottom: var(--wadi-sp-3);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--wadi-font-ar); font-weight: 700; color: var(--wadi-ink);
  display: inline-flex; align-items: center; gap: var(--wadi-sp-2); min-height: var(--wadi-tap-min);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--wadi-cream-50) !important; color: var(--wadi-ink-soft);
  border-radius: var(--wadi-r-md); font-size: var(--wadi-fs-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

/* ==========================================================================
   4. MY ACCOUNT
   ========================================================================== */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25%; float: none; display: inline-block; vertical-align: top;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: calc(75% - var(--wadi-sp-6)); float: none;
    display: inline-block; vertical-align: top; margin-inline-start: var(--wadi-sp-6);
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg); overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
  font-family: var(--wadi-font-ar); font-weight: 600; font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink); text-decoration: none;
  border-bottom: 1px solid var(--wadi-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--wadi-cream-50); color: var(--wadi-olive);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--wadi-line) !important;
  border-radius: var(--wadi-r-lg);
  padding: var(--wadi-sp-5) !important;
  background: var(--wadi-surface);
}
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
  min-height: var(--wadi-tap-min);
  background: var(--wadi-olive) !important; color: #fff !important;
  border-radius: var(--wadi-r-pill) !important;
  font-family: var(--wadi-font-ar); font-weight: 700;
}

/* ==========================================================================
   5. TARGET SIZES
   Two different floors, deliberately.

   CONTROLS — the brand link, the variation reset, anything that performs an
   action — get 44px, the mobile-touch figure.

   INLINE TEXT LINKS inside prose (breadcrumbs, product meta) get 24px, which
   is what WCAG 2.2 AA actually requires for a target. Forcing 44px on a
   breadcrumb would make the trail taller than the page title it sits above.
   ========================================================================== */
.wadi-brand,
.woocommerce div.product form.cart .reset_variations {
  min-height: var(--wadi-tap-min);
  display: inline-flex; align-items: center;
}

.woocommerce-breadcrumb a,
.woocommerce-breadcrumb,
.woocommerce div.product .product_meta a,
.ct-breadcrumbs a {
  display: inline-flex; align-items: center;
  min-height: 26px;
  padding-block: 4px;
}
.woocommerce-breadcrumb, .ct-breadcrumbs {
  font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted);
  flex-wrap: wrap; gap: 2px;
}
.woocommerce-breadcrumb a, .ct-breadcrumbs a { color: var(--wadi-ink-soft); text-decoration: none; }
.woocommerce-breadcrumb a:hover, .ct-breadcrumbs a:hover { color: var(--wadi-olive); }

/* ==========================================================================
   6. DEAD ENDS — 404 and empty search
   Both previously rendered with zero links. Every dead end now offers the
   same three routes: search, categories, shop.
   ========================================================================== */
.wadi-deadend { padding-block: var(--wadi-sp-7); }
.wadi-deadend__inner,
.wadi-deadend--inline {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 640px; margin-inline: auto;
}
.wadi-deadend--inline { padding-block: var(--wadi-sp-6); }

.wadi-ring--lg { width: 76px; height: 76px; }

.wadi-deadend__title {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-xl); color: var(--wadi-olive);
  margin: var(--wadi-sp-4) 0 0;
}
.wadi-deadend .wadi-rule-gold { margin-inline: auto; }
.wadi-deadend__text {
  color: var(--wadi-ink-soft); font-size: var(--wadi-fs-base);
  margin: 0 0 var(--wadi-sp-5); max-width: 46ch;
}

.wadi-deadend__search {
  display: flex; align-items: center; gap: var(--wadi-sp-2);
  width: 100%; max-width: 460px;
  padding: var(--wadi-sp-2);
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-pill);
  margin-bottom: var(--wadi-sp-6);
}
.wadi-deadend__search > .wadi-ico { color: var(--wadi-ink-muted); flex: 0 0 auto; margin-inline-start: var(--wadi-sp-3); }
.wadi-deadend__field {
  flex: 1 1 auto; min-width: 0; min-height: var(--wadi-tap-min);
  border: 0; background: transparent; padding-inline: var(--wadi-sp-2);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base); color: var(--wadi-ink);
}
.wadi-deadend__field:focus { outline: 0; }

.wadi-deadend__cats {
  display: grid; gap: var(--wadi-sp-3);
  grid-template-columns: 1fr; width: 100%;
  margin-bottom: var(--wadi-sp-5);
}
@media (min-width: 560px) { .wadi-deadend__cats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.wadi-deadend__cat {
  display: flex; flex-direction: column; align-items: center; gap: var(--wadi-sp-1);
  min-height: 96px; justify-content: center;
  padding: var(--wadi-sp-4);
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg);
  color: var(--wadi-ink); text-decoration: none;
  transition: border-color var(--wadi-dur) var(--wadi-ease), background var(--wadi-dur) var(--wadi-ease);
}
.wadi-deadend__cat:hover { border-color: var(--wadi-olive); background: var(--wadi-olive-100); color: var(--wadi-olive); }
.wadi-deadend__cat .wadi-ico { color: var(--wadi-olive); }
.wadi-deadend__cat span { font-weight: 600; font-size: var(--wadi-fs-sm); }
.wadi-deadend__cat em {
  font-style: normal; font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted);
}
.wadi-deadend__cat bdi { direction: ltr; unicode-bidi: isolate; font-family: var(--wadi-font-latin); }
.wadi-deadend__cta { margin: 0; }

/* Blocksy leaves an empty .page-description wrapper once its apology string is
   filtered out; collapse it so it does not leave a gap under the title. */
.search-no-results .page-description:empty,
.error404 .page-description:empty { display: none; }

/* ==========================================================================
   7. CONTACT PAGE
   Rebuilt 2026-09-21. The previous page was an Elementor layout carrying
   fabricated contact details and two social icons with no href. Until the
   owner confirms real details, the working contact form is the page.
   ========================================================================== */
.wadi-contact {
  display: grid; gap: var(--wadi-sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .wadi-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.wadi-contact__form { min-width: 0; }
.wadi-contact__side { display: grid; gap: var(--wadi-sp-3); }
.wadi-contact__card {
  padding: var(--wadi-sp-4) var(--wadi-sp-5);
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
}
.wadi-contact__title {
  display: flex; align-items: center; gap: var(--wadi-sp-2);
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-base); font-weight: 700;
  color: var(--wadi-olive); margin: 0 0 var(--wadi-sp-1);
}
.wadi-contact__title .wadi-ico { color: var(--wadi-gold); flex: 0 0 auto; }
.wadi-contact__text { margin: 0; font-size: var(--wadi-fs-sm); color: var(--wadi-ink-soft); }
.wadi-contact__text a { color: var(--wadi-olive); font-weight: 600; }

/* Contact Form 7 — the plugin ships unstyled markup. */
.wpcf7 form { display: grid; gap: var(--wadi-sp-4); }
.wpcf7 label {
  display: block;
  font-family: var(--wadi-font-ar); font-weight: 600; font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%; min-height: 48px;
  margin-block-start: var(--wadi-sp-2);
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  color: var(--wadi-ink); background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus {
  outline: 2px solid var(--wadi-olive-100); border-color: var(--wadi-olive);
}
.wpcf7 input[type="submit"] {
  justify-self: start;
  min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3) var(--wadi-sp-6);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base); font-weight: 700;
  color: #fff; background: var(--wadi-olive);
  border: 0; border-radius: var(--wadi-r-pill); cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wadi-olive-500); }
.wpcf7-not-valid-tip { color: var(--wadi-sale, #B3261E); font-size: var(--wadi-fs-xs); }
.wpcf7 .wpcf7-response-output {
  margin: 0 !important; padding: var(--wadi-sp-4) !important;
  border-radius: var(--wadi-r-md); border-width: 1px !important;
  font-size: var(--wadi-fs-sm);
}

/* ==========================================================================
   8. CART REFINEMENTS  (2026-09-22)
   ========================================================================== */

/* ---- 8.1 Quantity control -------------------------------------------------
   Blocksy renders quantity as data-type="type-2": two absolutely positioned
   span controls (.ct-increase / .ct-decrease) laid OVER the number input.
   With a 44px minimum tap target on each, they covered the number entirely —
   the customer could see + and minus, but not the quantity between them.

   Rebuilt as a three-column grid so the controls sit BESIDE the number
   instead of on top of it. Still 44px each, still one tap.                  */
.woocommerce .quantity,
.woocommerce .quantity[data-type="type-2"] {
  display: grid !important;
  grid-template-columns: var(--wadi-tap-min) minmax(44px, 1fr) var(--wadi-tap-min);
  align-items: center;
  width: max-content;
  /* Blocksy sets .quantity to 38px tall. The three 44px children then overflowed
     a shorter box and were clipped by overflow:hidden, so the number and the
     minus control were cut off and only the plus showed. */
  height: auto !important;
  min-height: var(--wadi-tap-min);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-pill);
  overflow: hidden;
  background: var(--wadi-surface);
}
/* Every control is pinned to row 1 explicitly. WooCommerce also renders a
   visually-hidden <label> inside .quantity; left to auto-placement it consumed
   a grid cell and pushed the number down onto a second row. */
.woocommerce .quantity .ct-decrease,
.woocommerce .quantity .minus,
.woocommerce .quantity button.minus { grid-column: 1; grid-row: 1; }
.woocommerce .quantity .qty          { grid-column: 2; grid-row: 1; }
.woocommerce .quantity .ct-increase,
.woocommerce .quantity .plus,
.woocommerce .quantity button.plus   { grid-column: 3; grid-row: 1; }
.woocommerce .quantity > label       { grid-area: 1 / 1; }

.woocommerce .quantity .ct-increase,
.woocommerce .quantity .ct-decrease,
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
  position: static !important;
  inset: auto !important;
  width: var(--wadi-tap-min); height: var(--wadi-tap-min);
  display: grid !important; place-items: center;
  margin: 0 !important;
  color: var(--wadi-olive); background: transparent; border: 0;
  font-size: var(--wadi-fs-md); line-height: 1; cursor: pointer;
  opacity: 1 !important;
}
.woocommerce .quantity .ct-increase:hover,
.woocommerce .quantity .ct-decrease:hover { background: var(--wadi-olive-100); }

.woocommerce .quantity .qty {
  width: auto !important; min-width: 44px;
  height: var(--wadi-tap-min);
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important;
  text-align: center;
  font-family: var(--wadi-font-latin);
  font-size: var(--wadi-fs-base) !important;   /* was 12.6px — too small to read */
  font-weight: 700;
  color: var(--wadi-ink) !important;
  direction: ltr; unicode-bidi: isolate;
  -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- 8.2 Line-item thumbnail ---------------------------------------------
   Blocksy wraps it in .ct-media-container, which had no size of its own, so
   the cell rendered as an empty white block.                                */
.woocommerce table.shop_table .product-thumbnail a,
.woocommerce table.shop_table .product-thumbnail .ct-media-container {
  display: block; width: 72px; height: 72px;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  overflow: hidden; background: var(--wadi-surface);
}
.woocommerce table.shop_table .product-thumbnail img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: 4px; margin: 0;
  aspect-ratio: 1 / 1;
}

/* ---- 8.3 Coupon, collapsed -----------------------------------------------
   An open coupon field at the top of a cart is a known conversion leak: it
   announces that a discount exists and sends people off-site to hunt for one.
   Collapsed behind a quiet link. Nothing is removed — one tap opens it.     */
.wadi-coupon-toggle {
  display: inline-flex; align-items: center; gap: var(--wadi-sp-2);
  min-height: var(--wadi-tap-min);
  background: none; border: 0; padding: 0;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm); font-weight: 600;
  color: var(--wadi-olive); cursor: pointer; text-decoration: underline;
  text-underline-offset: .22em;
}
.woocommerce .coupon[hidden] { display: none !important; }
.woocommerce .coupon {
  display: flex; flex-wrap: wrap; gap: var(--wadi-sp-2);
  align-items: center; width: 100%;
  margin-block: var(--wadi-sp-3) 0;
  padding: var(--wadi-sp-4);
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg);
}
.woocommerce .coupon label { display: none; }
.woocommerce .coupon #coupon_code {
  flex: 1 1 160px; min-width: 0; min-height: var(--wadi-tap-min);
  padding-inline: var(--wadi-sp-4);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-pill);
  background: var(--wadi-surface);
}
.woocommerce .coupon button {
  min-height: var(--wadi-tap-min); padding-inline: var(--wadi-sp-5);
  border-radius: var(--wadi-r-pill) !important;
  background: transparent !important; color: var(--wadi-olive) !important;
  border: 1px solid var(--wadi-olive) !important;
  font-family: var(--wadi-font-ar); font-weight: 600; font-size: var(--wadi-fs-sm);
}

/* ---- 8.4 Update-cart button ----------------------------------------------
   Secondary by definition — it only matters after a quantity change. It was
   rendering as a second full-width filled button competing with Checkout.   */
.woocommerce [name="update_cart"] {
  background: transparent !important;
  color: var(--wadi-olive) !important;
  border: 1px solid var(--wadi-line) !important;
  font-weight: 600 !important;
  min-height: var(--wadi-tap-min);
  border-radius: var(--wadi-r-pill) !important;
}
.woocommerce [name="update_cart"]:disabled { opacity: .45 !important; }

/* ---- 8.5 Line items on a phone -------------------------------------------
   Blocksy keeps its mobile quantity + price + remove controls inside
   .product-name, but their combined min-content width made the whole table
   384px wide inside a 330px content column. The table was then centred and
   clipped at both sides; most importantly, the remove button sat at x=-18.

   Keep Blocksy's one mobile control set and lay out only the two visible
   cells. The desktop quantity/subtotal/remove cells stay explicitly hidden,
   so the old duplicate-control failure cannot return.                      */
@media (max-width: 767px) {
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody {
    display: block !important;
  }

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

  .woocommerce-cart .woocommerce-cart-form tr.cart_item {
    width: 100%; min-width: 0;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    padding-block: var(--wadi-sp-2);
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-thumbnail {
    display: block !important; grid-column: 1;
    width: auto !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-name {
    display: block !important; grid-column: 2;
    width: auto !important; min-width: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-quantity,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-subtotal,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-remove {
    display: none !important;
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table tr:not(.cart_item),
  .woocommerce-cart .woocommerce-cart-form table.shop_table td.actions {
    display: block !important; width: 100% !important;
  }

  .woocommerce-cart .woocommerce-cart-form .product-mobile-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    row-gap: var(--wadi-sp-2) !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-mobile-actions a.remove {
    width: auto !important; min-width: 70px;
    padding-inline: 12px;
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 6px;
    color: var(--wadi-sale, #B3261E) !important;
    background: #fff5f3 !important;
    border: 1px solid currentColor;
    border-radius: var(--wadi-r-pill);
  }
  .woocommerce-cart .woocommerce-cart-form .product-mobile-actions a.remove::after {
    content: "حذف";
    font-family: var(--wadi-font-ar);
    font-size: 13px; font-weight: 700; line-height: 1;
  }
  .woocommerce-cart .woocommerce-cart-form .product-mobile-actions a.remove:hover,
  .woocommerce-cart .woocommerce-cart-form .product-mobile-actions a.remove:focus-visible {
    color: #fff !important;
    background: var(--wadi-sale, #B3261E) !important;
  }
}

/* ---- 8.6 COD reassurance in the totals box -------------------------------
   The one thing a cash-on-delivery customer wants confirmed before committing.
   Stated only because 100% of this store's recorded orders were COD.        */
.wadi-cart-cod {
  display: flex; align-items: center; gap: var(--wadi-sp-2);
  margin: var(--wadi-sp-4) 0 0; padding: var(--wadi-sp-3) var(--wadi-sp-4);
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  font-size: var(--wadi-fs-sm); font-weight: 600; color: var(--wadi-olive);
}
.wadi-cart-cod .wadi-ico { color: var(--wadi-gold); flex: 0 0 auto; }

/* ==========================================================================
   9. FORM CONTROLS — checkboxes, radios, password reveal   (2026-09-22)

   Measured on My Account at 390px before this block:
     password-reveal toggle ...... 14 x 14
     "remember me" checkbox ...... 16 x 16

   Both are real controls a customer has to hit on a phone. A 14px target is
   roughly a third of the 44px touch minimum, and the reveal toggle matters
   more than most: it is what a customer uses when a password fails on a
   phone keyboard.
   ========================================================================== */

/* ---- 9.1 Password reveal ---- */
.woocommerce .show-password-input,
.woocommerce button.show-password-input,
.woocommerce .password-input .show-password-input {
  width: var(--wadi-tap-min) !important;
  height: var(--wadi-tap-min) !important;
  display: grid !important; place-items: center;
  inset-inline-end: 4px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0; cursor: pointer;
  color: var(--wadi-ink-muted);
}
.woocommerce .password-input { position: relative; display: block; }
/* Keep typed characters clear of the toggle. */
.woocommerce .password-input input { padding-inline-end: calc(var(--wadi-tap-min) + 4px) !important; }

/* ---- 9.2 Checkboxes and radios ----
   Sized up, and the LABEL is made part of the target rather than decoration
   beside it — on a phone the label is what people actually aim at. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  width: 22px; height: 22px;
  min-width: 22px; min-height: 22px;
  margin: 0 !important;
  accent-color: var(--wadi-olive);
  cursor: pointer;
  flex: 0 0 auto;
}
.woocommerce label.woocommerce-form-login__rememberme,
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce .wc_payment_method label,
.woocommerce form .form-row label.checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: var(--wadi-sp-3);
  min-height: var(--wadi-tap-min);
  cursor: pointer;
  margin: 0;
}

/* ---- 9.3 Account panel ---- */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 460px;
  margin-inline: auto;
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button[type="submit"] {
  width: 100%;
  min-height: 52px !important;
  margin-block-start: var(--wadi-sp-2) !important;
}
.woocommerce-account .woocommerce-LostPassword {
  margin: var(--wadi-sp-3) 0 0; text-align: center;
}
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-text a {
  display: inline-flex; align-items: center;
  min-height: var(--wadi-tap-min);
  color: var(--wadi-olive); font-size: var(--wadi-fs-sm); font-weight: 600;
}

/* Order history table on a phone: Woo stacks it, but the status and total are
   what matter, so they get emphasis. */
.woocommerce-account .woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--wadi-olive); }
.woocommerce-account .woocommerce-orders-table__cell-order-total .amount {
  font-family: var(--wadi-font-latin); direction: ltr; unicode-bidi: isolate; font-weight: 700;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  min-height: var(--wadi-tap-min); border-radius: var(--wadi-r-pill) !important;
}

/* ---- 9.4 Residual small text links ----
   The last few inline links measured 23px, one pixel under the WCAG 2.2 AA
   24px target floor. Applied narrowly to commerce chrome rather than globally,
   so body prose links are not turned into blocks. */
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a,
.woocommerce .return-to-shop a,
.woocommerce-privacy-policy-text a {
  display: inline-flex; align-items: center;
  min-height: 26px; padding-block: 3px;
}

/* ==========================================================================
   10. NUMERALS — every money value, everywhere   (2026-09-22)

   The price selectors covered .price .amount and .cart_totals .amount, but
   WooCommerce also prints .amount inside the checkout order-review table, the
   mini-cart, order emails and the account order list. A QA sweep found 1 such
   element on /cart/ and 2 on /checkout/ still inheriting RTL.

   Left in RTL, the bidi algorithm can reorder the parts of a money string in
   an Arabic paragraph. On a checkout total that is not cosmetic.
   ========================================================================== */
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount,
.woocommerce bdi,
.wadi-footer .amount {
  direction: ltr !important;
  unicode-bidi: isolate;
  font-family: var(--wadi-font-latin);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* The symbol stays snug against its number. */
.woocommerce .woocommerce-Price-currencySymbol { margin-inline-start: .18em; }

/* WhatsApp's mark is solid, so it carries more weight than the line icons
   beside it at the same size — and it keeps its own green, as it does in the
   bottom nav. */
.wadi-footer .wadi-ico--whatsapp { width: 16px; height: 16px; color: #25D366; }

/* ==========================================================================
   CHECKOUT — compact fields, centred                         2026-10-05
   The form sat 45px from one edge and flush against the other: the heading
   above it was centred and the form was not, which is most of what made the
   page look broken. WooCommerce's own column grid is built for a two-column
   checkout with an order summary beside it; with a compact form and nothing
   beside them it had nothing to balance against.
   ========================================================================== */
/* The actual cause.
   Blocksy's block layout gives this wrapper `width: var(--theme-block-width)`
   — 330px — without the `margin-inline: auto` that normally centres a
   constrained block. A 330px box with no auto margins starts at the line's
   start edge, which under RTL is the RIGHT. So the heading above it was
   centred and the entire form beneath it was flush to one side: 45px of space
   on one edge and none on the other. It keeps the site's block width; it just
   sits in the middle of it now. */
.woocommerce-checkout .entry-content > .woocommerce,
.woocommerce-cart .entry-content > .woocommerce {
  margin-inline: auto !important;
}

.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #customer_details {
  width: 100% !important;
  max-width: 520px;
  margin-inline: auto !important;
  float: none !important;
  padding-inline: 0 !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important; float: none !important; padding: 0 !important;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  width: 100% !important; max-width: 520px; margin-inline: auto !important; float: none !important;
}

/* One field per line, compact without triggering iOS focus zoom. */
.woocommerce-checkout .form-row {
  width: 100% !important; float: none !important;
  padding: 0 !important; margin: 0 0 10px !important;
}
.woocommerce-checkout .form-row label {
  display: block; margin-block-end: 3px;
  font-size: 13px; font-weight: 600; color: var(--wadi-ink);
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100% !important;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-md);
  background: var(--wadi-surface);
  font-family: var(--wadi-font-ar);
  font-size: 16px;               /* under 16px, iOS zooms the page on focus */
  color: var(--wadi-ink);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus {
  outline: 2px solid var(--wadi-olive); outline-offset: 1px; border-color: var(--wadi-olive);
}
.woocommerce-checkout .form-row .required { color: var(--wadi-sale); text-decoration: none; }

/* The phone reads left-to-right even in an Arabic form. */
.woocommerce-checkout #billing_phone { direction: ltr; text-align: start; }

.wadi-checkout-note {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.65;
  color: var(--wadi-ink-soft);
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
  margin-block: 10px 8px !important;
  font-size: 18px !important;
  line-height: 1.5;
}
.wadi-buy-now-checkout #order_review {
  padding: 12px !important;
}
.wadi-buy-now-checkout #order_review table.shop_table th,
.wadi-buy-now-checkout #order_review table.shop_table td {
  padding: 8px 6px !important;
  font-size: 13px;
}
.wadi-buy-now-checkout #payment .form-row.place-order {
  padding: 10px 0 0 !important;
}
.wadi-buy-now-checkout .woocommerce-privacy-policy-text {
  margin-block-end: 8px;
  font-size: 12px;
  line-height: 1.65;
}

/* Confirm is the end of the page, so it reads like it. */
.woocommerce-checkout #place_order {
  width: 100%; min-height: 54px;
  font-size: var(--wadi-fs-md); font-weight: 700;
  border-radius: var(--wadi-r-pill);
}

/* ========================================================================== 
   CHECKOUT — one frame, pictured order, compact COD             2026-10-12

   The empty additional-information column, the form shell, #order_review and
   its table were each drawing their own rectangle. Keep the review itself as
   the one container, flatten everything inside it, and make the only payment
   method a short, readable choice rather than a tall panel.
   ========================================================================== */
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #customer_details .col-2 {
  display: none !important;
}
.woocommerce-checkout .entry-content > .woocommerce,
.woocommerce-checkout form.checkout,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .col-1 {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.woocommerce-checkout form.checkout {
  padding: 0 !important;
}
.woocommerce-checkout #order_review {
  padding: 12px !important;
  background: var(--wadi-cream-50) !important;
  border: 1px solid var(--wadi-line) !important;
  border-radius: var(--wadi-r-lg) !important;
  box-shadow: none !important;
}
.woocommerce-checkout #order_review table.shop_table {
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
}
.woocommerce-checkout #order_review table.shop_table thead {
  display: none;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  background: transparent !important;
  border-inline: 0 !important;
  padding: 9px 4px !important;
}
.woocommerce-checkout #order_review table.shop_table tbody tr:first-child td {
  padding-block-start: 0 !important;
}
.woocommerce-checkout #order_review table.shop_table .product-total {
  width: 88px;
  text-align: end;
}
.wadi-checkout-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wadi-checkout-item__media {
  width: 56px;
  height: 70px;
  display: grid;
  place-items: center;
}
.woocommerce-checkout .wadi-checkout-item__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.wadi-checkout-item__name {
  min-width: 0;
  color: var(--wadi-ink);
  font-weight: 600;
  line-height: 1.65;
}
.woocommerce-checkout #payment {
  margin-block-start: 8px;
}
.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid var(--wadi-line) !important;
  border-radius: 10px !important;
  background: var(--wadi-surface) !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  min-height: 32px !important;
  gap: 8px !important;
  font-size: 14px;
  line-height: 1.4;
}
.woocommerce-checkout #payment div.payment_box {
  display: none !important;
}
.woocommerce-checkout #payment .form-row.place-order {
  margin: 0 !important;
  padding: 6px 0 0 !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
.woocommerce-checkout .wadi-returns-policy-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--wadi-olive);
  font-weight: 700;
}

/* ==========================================================================
   CART ROW — quantity and remove on one line            2026-10-05
   Blocksy collapses the row to a two-column grid on a phone and moves the
   quantity, the line price and the remove control into the name cell. They
   came out stacked: a 209px-wide stepper with a 119px number box in the
   middle of it, and the remove button on a line of its own underneath.
   A quantity of 1–3 does not need a text field wide enough for four digits.
   ========================================================================== */
.woocommerce .cart_item .product-mobile-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wadi-sp-2) var(--wadi-sp-3);
}

/* The stepper is as wide as what it holds. */
.woocommerce .cart_item .product-mobile-actions .quantity {
  display: inline-flex !important;
  align-items: center;
  width: auto !important; max-width: none;
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-pill);
  overflow: hidden;
  background: var(--wadi-surface);
}
.woocommerce .cart_item .quantity .ct-increase,
.woocommerce .cart_item .quantity .ct-decrease {
  width: 40px !important; height: 44px !important;
  display: grid !important; place-items: center;
  cursor: pointer; color: var(--wadi-olive);
}
.woocommerce .cart_item .quantity input.qty {
  width: 44px !important; min-width: 0 !important;
  height: 44px; padding: 0; text-align: center;
  border: 0 !important; background: none !important;
  font-size: 16px; font-weight: 600; color: var(--wadi-ink);
  -moz-appearance: textfield;
}
.woocommerce .cart_item .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .cart_item .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Remove sits beside the stepper, not under it — and says what it does. */
.woocommerce .cart_item .product-mobile-actions a.remove {
  order: 2;
  width: auto !important; height: 44px !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  padding-inline: var(--wadi-sp-3);
  border: 1px solid rgba(179, 38, 30, .28);
  border-radius: var(--wadi-r-pill);
  background: none !important;
  color: var(--wadi-danger) !important;
  font-size: var(--wadi-fs-sm); font-weight: 600; line-height: 1;
}
.woocommerce .cart_item .product-mobile-actions a.remove::after {
  content: "حذف";
}
.woocommerce .cart_item .product-mobile-actions a.remove:hover {
  background: rgba(179, 38, 30, .06) !important;
}

/* The line total goes to its own row, where a price belongs. */
.woocommerce .cart_item .product-mobile-actions .ct-product-multiply-symbol,
.woocommerce .cart_item .product-mobile-actions > .woocommerce-Price-amount {
  order: 3;
  color: var(--wadi-ink-soft);
}
.woocommerce .cart_item .product-mobile-actions .ct-product-multiply-symbol { margin-inline-start: auto; }

/* The picture keeps its own proportions. */
.woocommerce .cart_item .product-thumbnail img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-md);
  padding: 4px;
}

/* Two measurements, two fixes.
   The stepper and the remove button needed 218px of a 209px row, so the button
   wrapped to a line of its own — nine pixels short. The buttons lose 4px each
   and the number box 4, which is 12 back: 196 in 209, with room to spare.
   And the picture kept coming out square because
   `.woocommerce table.shop_table .product-thumbnail img` carries one element
   more than the rule below it and therefore outranks it — the 4:5 was being
   written and then overruled. Stated at matching weight here. */
.woocommerce table.shop_table .cart_item .product-thumbnail img,
.woocommerce .cart_item .product-thumbnail img {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
}

.woocommerce .cart_item .product-mobile-actions { width: 100%; }
.woocommerce .cart_item .quantity .ct-increase,
.woocommerce .cart_item .quantity .ct-decrease { width: 36px !important; }
.woocommerce .cart_item .quantity input.qty { width: 40px !important; }

/* Placed, not flowed.
   Flex kept wrapping the remove button onto its own line: the two controls
   wanted a handful of pixels more than the row had, and flex solves that by
   breaking the line. Shaving widths bought a few pixels and lost them again to
   borders. A grid with named positions cannot wrap — the two controls are told
   which cell they sit in, and the line price takes the row beneath them. */
.woocommerce .cart_item .product-mobile-actions {
  display: grid !important;
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
  gap: var(--wadi-sp-2) var(--wadi-sp-3);
  width: 100%;
}
.woocommerce .cart_item .product-mobile-actions .quantity { grid-area: 1 / 1; }
.woocommerce .cart_item .product-mobile-actions a.remove  { grid-area: 1 / 2; }
.woocommerce .cart_item .product-mobile-actions .ct-product-multiply-symbol {
  grid-area: 2 / 1; margin-inline-start: 0;
}
.woocommerce .cart_item .product-mobile-actions > .woocommerce-Price-amount {
  grid-area: 2 / 2 / 3 / -1; justify-self: start;
  font-weight: 600; color: var(--wadi-ink);
}

/* ==========================================================================
   MOBILE CART — one card, one action row                    2026-10-05
   The thumbnail/title need their narrow two-column row, but the quantity,
   price and remove controls need the whole card width. JavaScript moves the
   existing Blocksy mobile controls into this full-width cell so the original
   WooCommerce click handlers remain attached.
   ========================================================================== */
.woocommerce-cart td.wadi-cart-line-actions { display: none; }

@media (max-width: 767px) {
  /* The cart form, coupon and totals are one continuous surface. */
  .woocommerce-cart .ct-woocommerce-cart-form {
    display: block !important;
    gap: 0 !important;
    overflow: hidden;
    background: var(--wadi-surface);
    border: 1px solid var(--wadi-line);
    border-radius: var(--wadi-r-lg);
  }
  .woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form table.shop_table {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
    width: 100% !important;
    margin: 0 !important;
    padding: var(--wadi-sp-5) !important;
    float: none !important;
    clear: both;
    border: 0 !important;
    border-top: 1px solid var(--wadi-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals h2 {
    margin-block-end: var(--wadi-sp-4);
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-thumbnail,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-name {
    border-bottom: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.wadi-cart-line-actions {
    display: block !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0;
    padding: 0 8px var(--wadi-sp-4) !important;
    border-bottom: 1px solid var(--wadi-line) !important;
  }

  /* RTL visual order, from the right edge: + | quantity | −, then price,
     then remove. Everything stays on the same row down to 320px. */
  .woocommerce-cart .cart_item .wadi-cart-line-actions .product-mobile-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    justify-content: start;
    align-items: center;
    gap: 0 6px !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity {
    grid-area: 1 / 1 !important;
    display: grid !important;
    grid-template-columns: 40px 44px 40px !important;
    width: 126px !important;
    direction: rtl;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity .ct-increase,
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity .ct-decrease {
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity .ct-increase {
    grid-column: 1 !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity input.qty {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 44px !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .quantity .ct-decrease {
    grid-column: 3 !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .ct-product-multiply-symbol {
    display: none !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .product-mobile-actions > .woocommerce-Price-amount {
    grid-area: 1 / 2 !important;
    justify-self: start;
    color: var(--wadi-ink) !important;
    font-weight: 700;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions a.remove {
    grid-area: 1 / 3 !important;
    min-width: 64px !important;
    padding-inline: 8px !important;
    justify-content: center;
  }

  /* Owner revision: bring the title closer to the logo, show the full portrait
     packshot, pin delete to the far left, and flatten the total inside the same
     outer card. */
  .woocommerce-cart .site-main > .ct-container-full {
    padding-block-start: 16px !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail a,
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail .ct-media-container {
    width: 72px !important;
    height: 96px !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions .product-mobile-actions {
    grid-template-columns: max-content max-content minmax(64px, 1fr) !important;
  }
  .woocommerce-cart .cart_item .wadi-cart-line-actions a.remove {
    justify-self: end !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals table.shop_table {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .woocommerce-cart.wadi-cart-auto-update [name="update_cart"] {
    display: none !important;
  }

  /* Owner correction: one cart frame, not a frame around every layer.
     Older generic table and thumbnail rules left borders on the cells, the
     action row, the image link and the image itself. Reset those only on the
     mobile cart; whitespace now separates products inside the single wrapper. */
  .woocommerce-cart .ct-woocommerce-cart-form {
    box-shadow: none !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form,
  .woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form table.shop_table tbody {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form table.shop_table tbody {
    padding: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    row-gap: 4px;
    margin: 0 !important;
    padding: 12px 10px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item + tr.cart_item {
    padding-block-start: 8px !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item::before,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item::after,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td::before,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td::after {
    display: none !important;
    content: none !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-thumbnail {
    padding: 0 6px 0 4px !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.product-name {
    padding: 4px 8px !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.wadi-cart-line-actions {
    padding: 4px 8px 8px !important;
    border: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail a,
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail .ct-media-container,
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail a,
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail .ct-media-container {
    overflow: visible !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    padding: 0 !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table td.actions,
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Owner refinement: compact mobile cart rhythm and one-line total.
     Keep the page title, but remove the large air around it. Products now use
     one quiet separator instead of a wide blank band, and WooCommerce's
     repeated totals heading/subtotal are hidden while the authoritative grand
     total and checkout action stay intact. */
  .woocommerce-cart .hero-section[data-type="type-1"],
  .woocommerce-cart .hero-section[data-type="type-2"] {
    padding-block: 10px 8px !important;
  }
  .woocommerce-cart .hero-section .entry-header::after {
    margin-block-start: 6px !important;
  }
  .woocommerce-cart .site-main > .ct-container-full {
    padding-block-start: 8px !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item {
    padding: 8px 10px 6px !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item + tr.cart_item {
    border-top: 1px solid var(--wadi-line) !important;
  }
  .woocommerce-cart .woocommerce-cart-form tr.cart_item > td.wadi-cart-line-actions {
    padding: 2px 8px 6px !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
    padding: 10px 16px 14px !important;
    border-top: 1px solid var(--wadi-line) !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals h2,
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals table.shop_table tr:not(.order-total) {
    display: none !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals table.shop_table {
    margin: 0 0 10px !important;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals .order-total th,
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals .order-total td {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals .order-total th {
    text-align: start;
  }
  .woocommerce-cart .ct-woocommerce-cart-form .cart_totals .order-total td {
    text-align: end;
  }
}

/* ==========================================================================
   CHECKOUT — the last four                                   2026-10-12
   ========================================================================== */

/* ---- المجموع repeats الإجمالي -------------------------------------------
   No shipping line, no tax line and no coupon on this store, so the subtotal
   and the total are always the same figure — and printing a total twice
   reads as though something was added in between that the customer missed.
   The row stays in the markup; deleting this one rule brings the breakdown
   back the day a shipping or discount line is introduced. */
.woocommerce .cart_totals tr.cart-subtotal,
.woocommerce-checkout #order_review tr.cart-subtotal {
  display: none !important;
}
/* With the subtotal gone the total is the first row in the foot, so the rule
   that separated them has to move onto it. */
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
  border-top: 1px solid var(--wadi-line) !important;
  padding-block-start: 10px !important;
}

/* ---- Money is black ------------------------------------------------------
   Every figure a customer is being asked to pay now reads in ink, not olive.
   Olive is this site's link colour and its button fill; a price wearing it
   looked clickable. Black and bold is also simply easier to read at a glance,
   which is the one thing a total has to be. */
.woocommerce .order-total .amount,
.woocommerce .cart_totals .amount,
.woocommerce-checkout #order_review .amount,
.woocommerce-checkout #order_review .product-total,
.woocommerce .cart_totals .order-total .amount bdi,
.woocommerce-checkout #order_review .order-total .amount bdi {
  color: var(--wadi-ink) !important;
  font-weight: 800 !important;
}

/* ---- Fields, tightened ---------------------------------------------------
   The form read as a column of tall boxes. Height comes down from 44 to 42
   and the gaps between rows close up, which is most of what made it feel
   bulky.

   FONT SIZE STAYS AT 16px. iOS Safari zooms the whole page in when a focused
   input is smaller than that, and the page does not zoom back out — so a
   15px field would shrink the box and then throw the layout sideways the
   moment somebody tapped the phone number. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  min-height: 42px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
}
.woocommerce-checkout .form-row {
  margin-block-end: 12px !important;
}
.woocommerce-checkout .form-row label {
  margin-block-end: 3px !important;
  font-size: var(--wadi-fs-sm) !important;
}

/* The cart's quantity stepper was built to the same 44px and reads just as
   heavy next to a 72px thumbnail. */
.woocommerce .cart_item .quantity .ct-increase,
.woocommerce .cart_item .quantity .ct-decrease,
.woocommerce .cart_item .quantity input.qty {
  height: 40px !important;
}

/* ---- The confirm button belongs inside the frame -------------------------
   #order_review carries 12px of padding; the button is the last thing in it
   and had nothing holding it off the bottom edge, so it read as sitting on
   the frame rather than within it. */
.woocommerce-checkout #payment .form-row.place-order {
  margin: 0 !important;
  padding: 10px 0 2px !important;
}
.woocommerce-checkout #place_order {
  width: 100% !important;
  display: block !important;
}
/* ==========================================================================
   CHECKOUT — tightened once more                             2026-10-12
   ========================================================================== */

/* The quantity now sits inside the title span (see inc/checkout.php) rather
   than on its own line under the picture. */
.wadi-checkout-item__qty {
  display: inline;
  margin-inline-start: 6px;
  font-weight: 800;
  color: var(--wadi-ink);
  white-space: nowrap;
}
/* The title column holds name + quantity as running text, so a long product
   name wraps and the quantity simply follows it. */
.wadi-checkout-item__name {
  display: block;
  line-height: 1.5 !important;
}
.wadi-checkout-item {
  align-items: center !important;
  gap: 8px !important;
}
.wadi-checkout-item__media {
  width: 48px !important;
  height: 60px !important;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 7px 4px !important;
}

/* ---- Cash on delivery: a line, not a panel ------------------------------
   One payment method that cannot be changed does not need a bordered card
   the width of the page. It is a statement of fact with a radio next to it. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  padding: 2px 10px !important;
  border-radius: 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  min-height: 26px !important;
  font-size: 13px !important;
  gap: 6px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
  max-height: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 4px !important;
}
.woocommerce-checkout #payment { margin-block-start: 4px !important; }

/* ---- Fields, shorter again ----------------------------------------------
   38px, down from 42. This is BELOW the 44px tap-target floor that Apple and
   Google both publish, which is a deliberate trade the owner asked for twice;
   the fields are full-width, so the target is still easy to hit even though
   it is short.

   The 16px font stays. iOS Safari zooms the page when a focused input is
   smaller than that and never zooms back out, so shrinking the text would
   buy a few pixels and break the layout the moment anyone tapped. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-size: 16px !important;
  line-height: 38px !important;
}
.woocommerce-checkout .form-row textarea,
.woocommerce form .form-row textarea {
  min-height: 70px !important;
  padding: 8px 10px !important;
  font-size: 16px !important;
}
.woocommerce-checkout .form-row { margin-block-end: 9px !important; }
.woocommerce-checkout .form-row label {
  margin-block-end: 2px !important;
  font-size: 13px !important;
}
.woocommerce-checkout .wadi-checkout-note {
  margin-block-end: 10px !important;
  font-size: 13px !important;
}

/* ========================================================================== 
   BUY NOW CHECKOUT — details first, then one calm order frame  2026-10-13

   The former product card above the customer fields duplicated the real cart
   row. The live Woo row now sits where it belongs: beneath billing details,
   inside the same `#order_review` frame as total, COD, policy and confirmation.
   ========================================================================== */
.wadi-buy-now-checkout form.checkout {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: auto !important;
}
.wadi-buy-now-checkout #customer_details {
  margin-block-end: 14px !important;
}
.wadi-buy-now-checkout #order_review_heading {
  margin-block: 14px 8px !important;
}
.wadi-buy-now-checkout #order_review {
  position: static !important;
  top: auto !important;
  padding: 12px !important;
}

/* One small product card inside the outer order frame. The table itself stays
   borderless, so there is no frame-inside-frame stack around totals/payment. */
.wadi-buy-now-checkout #order_review table.shop_table tbody td {
  padding: 8px !important;
  background: var(--wadi-surface) !important;
  border-block: 1px solid var(--wadi-line) !important;
}
.wadi-buy-now-checkout #order_review table.shop_table tbody td.product-name {
  border-inline-start: 1px solid var(--wadi-line) !important;
  border-inline-end: 0 !important;
  border-start-start-radius: var(--wadi-r-md);
  border-end-start-radius: var(--wadi-r-md);
}
.wadi-buy-now-checkout #order_review table.shop_table tbody td.product-total {
  width: 82px;
  border-inline-start: 0 !important;
  border-inline-end: 1px solid var(--wadi-line) !important;
  border-start-end-radius: var(--wadi-r-md);
  border-end-end-radius: var(--wadi-r-md);
  text-align: end;
}

.wadi-buy-now-line-total {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
}
.wadi-buy-now-line-total__label {
  color: var(--wadi-ink-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.wadi-buy-now-line-total strong {
  color: var(--wadi-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

/* COD is the only payment method: a compact chip, contained by the order
   frame, rather than another full-width panel. */
.wadi-buy-now-checkout #payment ul.payment_methods {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 4px !important;
}
.wadi-buy-now-checkout #payment ul.payment_methods li.wc_payment_method {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 8px !important;
}
.wadi-buy-now-checkout #payment ul.payment_methods li.wc_payment_method label {
  min-height: 24px !important;
  font-size: 12px !important;
  gap: 5px !important;
}

@media (max-width: 374.98px) {
  .wadi-buy-now-checkout #order_review table.shop_table tbody td {
    padding: 7px 6px !important;
  }
  .wadi-buy-now-checkout #order_review table.shop_table tbody td.product-total {
    width: 74px;
  }
  .wadi-buy-now-line-total strong { font-size: 13px; }
}

/* ========================================================================== 
   ORDER RECEIVED — quiet, single-frame confirmation                 2026-10-13
   ========================================================================== */

/* The endpoint title already reads "شكراً لإتمام طلبك". WooCommerce repeats
   the same sentence as a green notice below it; keep one heading only. */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  display: none !important;
}

.woocommerce-order-received .woocommerce-order {
  width: min(100%, 760px);
  margin-inline: auto;
  display: grid;
  gap: 20px;
}

/* Order number, date, total and payment method: one calm list rather than a
   two-by-two collection of boxes. Each fact reads label → value in one scan. */
.woocommerce-order-received ul.woocommerce-order-overview {
  margin: 0 !important;
  padding: 2px 18px !important;
  display: block !important;
  list-style: none !important;
  background: var(--wadi-surface) !important;
  border: 1px solid var(--wadi-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(31, 42, 35, .05) !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
  width: 100% !important;
  min-height: 50px;
  margin: 0 !important;
  padding: 11px 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  float: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wadi-line) !important;
  color: var(--wadi-ink-muted) !important;
  font-size: 13px !important;
  line-height: 1.45;
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
  border-bottom: 0 !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
  margin: 0 !important;
  color: var(--wadi-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.45;
  text-align: end;
}
.woocommerce-order-received ul.woocommerce-order-overview li.total strong,
.woocommerce-order-received ul.woocommerce-order-overview li.total .amount,
.woocommerce-order-received ul.woocommerce-order-overview li.total bdi {
  color: var(--wadi-olive) !important;
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  margin: 0 !important;
}
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 10px !important;
  color: var(--wadi-ink) !important;
  font-size: clamp(21px, 4vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.35;
}

/* One order card. The product row carries its own picture, name, quantity and
   price; the only other lines are the native WooCommerce totals beneath it. */
.woocommerce-order-received table.woocommerce-table--order-details {
  width: 100% !important;
  margin: 0 !important;
  table-layout: fixed;
  border: 1px solid var(--wadi-line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--wadi-surface) !important;
  box-shadow: 0 10px 28px rgba(31, 42, 35, .05) !important;
}
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
  border: 0 !important;
  background: transparent !important;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
  padding: 10px 16px !important;
  color: var(--wadi-ink-muted) !important;
  border-bottom: 1px solid var(--wadi-line) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.woocommerce-order-received table.woocommerce-table--order-details th.product-name,
.woocommerce-order-received table.woocommerce-table--order-details td.product-name {
  width: 72%;
}
.woocommerce-order-received table.woocommerce-table--order-details th.product-total,
.woocommerce-order-received table.woocommerce-table--order-details td.product-total {
  width: 28%;
  text-align: end !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--wadi-line) !important;
  vertical-align: middle !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name {
  text-align: start !important;
}
.woocommerce-order-received .wadi-thankyou-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}
.woocommerce-order-received .wadi-thankyou-item--no-image {
  grid-template-columns: minmax(0, 1fr);
}
.woocommerce-order-received .wadi-thankyou-item__image {
  width: 64px;
  height: 80px;
  display: grid;
  place-items: center;
}
.woocommerce-order-received .wadi-thankyou-item__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.woocommerce-order-received .wadi-thankyou-item__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.woocommerce-order-received .wadi-thankyou-item__title {
  display: block;
  color: var(--wadi-ink) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}
.woocommerce-order-received .wadi-thankyou-item__title a {
  color: inherit !important;
  text-decoration: none !important;
}
.woocommerce-order-received .wadi-thankyou-item__qty {
  display: block;
  color: var(--wadi-ink-muted) !important;
  font-size: 12px !important;
  font-weight: 700;
}
.woocommerce-order-received table.woocommerce-table--order-details .product-quantity {
  display: none !important;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta {
  margin: 4px 76px 0 0 !important;
  padding: 0 !important;
  color: var(--wadi-ink-muted) !important;
  font-size: 12px !important;
  line-height: 1.45;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta li,
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta p {
  margin: 0 !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody .amount {
  color: var(--wadi-ink) !important;
  font-weight: 800 !important;
  line-height: 1.4;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  padding: 9px 16px !important;
  border-bottom: 1px solid var(--wadi-line) !important;
  color: var(--wadi-ink-muted) !important;
  font-size: 13px !important;
  text-align: start !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  color: var(--wadi-ink) !important;
  font-weight: 700 !important;
  text-align: end !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
  padding-block: 12px !important;
  border-bottom: 0 !important;
  color: var(--wadi-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child .amount,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child bdi {
  color: var(--wadi-olive) !important;
}

/* Delivery address keeps the same visual language without another inner box. */
.woocommerce-order-received .woocommerce-customer-details address {
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--wadi-line) !important;
  border-radius: 16px !important;
  background: var(--wadi-surface) !important;
  box-shadow: 0 10px 28px rgba(31, 42, 35, .05) !important;
  color: var(--wadi-ink) !important;
  font-style: normal !important;
  line-height: 1.8;
}

@media (max-width: 689px) {
  .woocommerce-order-received .hero-section[data-type="type-1"],
  .woocommerce-order-received .hero-section[data-type="type-2"] {
    padding-block: 18px 12px !important;
  }
  .woocommerce-order-received .hero-section .entry-header::after {
    margin-block-start: 8px !important;
  }
  .woocommerce-order-received .site-main > .ct-container-full {
    padding-block-start: 14px !important;
  }
  .woocommerce-order-received .woocommerce-order {
    gap: 16px;
  }
  .woocommerce-order-received ul.woocommerce-order-overview {
    padding-inline: 14px !important;
    border-radius: 14px !important;
  }
  .woocommerce-order-received ul.woocommerce-order-overview li {
    min-height: 46px;
    padding-block: 9px !important;
  }
  .woocommerce-order-received table.woocommerce-table--order-details {
    border-radius: 14px !important;
  }
  .woocommerce-order-received table.woocommerce-table--order-details th.product-name,
  .woocommerce-order-received table.woocommerce-table--order-details td.product-name {
    width: 70%;
  }
  .woocommerce-order-received table.woocommerce-table--order-details th.product-total,
  .woocommerce-order-received table.woocommerce-table--order-details td.product-total {
    width: 30%;
  }
  .woocommerce-order-received table.woocommerce-table--order-details tbody td {
    padding: 10px 10px !important;
  }
  .woocommerce-order-received .wadi-thankyou-item {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 9px;
  }
  .woocommerce-order-received .wadi-thankyou-item__image {
    width: 56px;
    height: 70px;
  }
  .woocommerce-order-received .wadi-thankyou-item__title {
    font-size: 13px;
  }
  .woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta {
    margin-inline-start: 65px !important;
  }
  .woocommerce-order-received table.woocommerce-table--order-details tfoot th,
  .woocommerce-order-received table.woocommerce-table--order-details tfoot td {
    padding: 8px 12px !important;
  }
}