/* ==========================================================================
   WADI MATROUH — BRAND BRIDGE
   Blocksy and WooCommerce render their own chrome from their own palettes.
   Left alone, the site stays orange/brown (the OLD identity) no matter what
   the homepage looks like. This layer maps them onto the approved brand kit.

   Load order: tokens -> typography -> layout -> components -> THIS
   ========================================================================== */

/* ==========================================================================
   1. BLOCKSY PALETTE OVERRIDE  — the single highest-leverage rule here.
   Was: #f39200 orange · #59482d brown · #3A4F66 blue-grey (old site)
   ========================================================================== */
/* Blocksy prints its palette in an INLINE <style id="ct-main-styles-inline-css">
   which lands after this file in source order. Same :root specificity means
   source order wins, so these need !important. Custom properties honour it. */
html:root, :root, body {
  --theme-palette-color-1: var(--wadi-olive)      !important;  /* primary / CTA */
  --theme-palette-color-2: var(--wadi-olive-500)  !important;  /* hover */
  --theme-palette-color-3: var(--wadi-olive)      !important;  /* headings */
  --theme-palette-color-4: var(--wadi-ink)        !important;  /* body text */
  --theme-palette-color-5: var(--wadi-line)       !important;  /* borders */
  --theme-palette-color-6: var(--wadi-cream)      !important;  /* section bg */
  --theme-palette-color-7: var(--wadi-cream-50)   !important;  /* soft bg */
  --theme-palette-color-8: var(--wadi-surface)    !important;  /* white */

  --theme-link-initial-color: var(--wadi-olive)     !important;
  --theme-link-hover-color:   var(--wadi-olive-500) !important;
  --theme-text-color:         var(--wadi-ink)       !important;
  --theme-headings-color:     var(--wadi-olive)     !important;
  --theme-border-color:       var(--wadi-line)      !important;
  --theme-font-family:        var(--wadi-font-ar)   !important;
  --theme-button-background-initial-color: var(--wadi-olive)     !important;
  --theme-button-background-hover-color:   var(--wadi-olive-500) !important;
  --theme-button-text-initial-color: #fff !important;
  --theme-button-text-hover-color:   #fff !important;
  --theme-content-spacing: var(--wadi-sp-5) !important;
}

/* ==========================================================================
   2. HEADER — branded, solid, calm
   ========================================================================== */
.ct-header {
  background: var(--wadi-surface) !important;
  border-bottom: 1px solid var(--wadi-line);
  box-shadow: none;
}
.ct-header [data-row] { background: transparent !important; }

/* Logo — cap height so a large upload can't blow up the bar */
.site-logo-container img,
.ct-header .site-logo-container img { max-height: 48px; width: auto; }
@media (max-width: 767px) { .site-logo-container img { max-height: 38px; } }

/* Nav links */
.ct-header .menu > li > a,
.header-menu > li > a {
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-base);
  font-weight: var(--wadi-fw-medium);
  color: var(--wadi-ink);
}
.ct-header .menu > li > a:hover,
.ct-header .menu > li.current-menu-item > a { color: var(--wadi-olive); }

/* 🔴 TAP TARGETS — header icons were under 44px on mobile */
.ct-header [data-id="cart"] a,
.ct-header [data-id="account"] a,
.ct-header [data-id="search"] a,
.ct-header .ct-header-cart,
.ct-header .ct-header-account,
.ct-header .ct-toggle-close,
.ct-header button,
.ct-header .ct-icon-container {
  min-width: var(--wadi-tap-min);
  min-height: var(--wadi-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
}
.ct-header svg, .ct-header .ct-icon { width: 21px; height: 21px; }

/* Cart bubble in brand amber */
.ct-cart-count, .ct-dynamic-count {
  background: var(--wadi-amber) !important;
  color: #fff !important;
  font-family: var(--wadi-font-latin);
  direction: ltr; unicode-bidi: isolate;
}

/* ==========================================================================
   3. BUTTONS — Woo + Blocksy, unified
   Gold is deliberately NOT used for CTAs: it fails contrast on cream.
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button, .wp-block-button__link,
.ct-button, .ct-button-ghost {
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-sm) !important;
  font-weight: var(--wadi-fw-semi) !important;
  line-height: 1.2 !important;
  min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3) var(--wadi-sp-4) !important;
  border-radius: var(--wadi-r-pill) !important;
  background: var(--wadi-olive) !important;
  color: #fff !important;
  border: 1px solid var(--wadi-olive) !important;
  transition: background var(--wadi-dur) var(--wadi-ease) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  text-align: center;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wadi-olive-500) !important;
  border-color: var(--wadi-olive-500) !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--wadi-olive) !important; }

/* Checkout button — the most important CTA on the site */
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button {
  width: 100%; font-size: var(--wadi-fs-md) !important;
  padding: var(--wadi-sp-4) !important; min-height: 52px;
}

/* ==========================================================================
   4. PRODUCT CARD — Woo loop
   ========================================================================== */
.woocommerce ul.products { display: grid; gap: var(--wadi-sp-4); margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  display: flex; flex-direction: column;
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  overflow: hidden; padding: 0 !important;
  transition: border-color var(--wadi-dur) var(--wadi-ease), box-shadow var(--wadi-dur) var(--wadi-ease);
}
.woocommerce ul.products li.product:hover { border-color: var(--wadi-olive); box-shadow: var(--wadi-shadow-md); }

/* Image sits on white, contained, fixed square — no layout shift when photos land */
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--wadi-surface);
  padding: var(--wadi-sp-3);
  margin: 0 !important; border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-base) !important;
  font-weight: var(--wadi-fw-semi);
  line-height: var(--wadi-lh-snug);
  color: var(--wadi-ink);
  padding: var(--wadi-sp-4) var(--wadi-sp-4) 0 !important;
  margin: 0 0 var(--wadi-sp-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}
.woocommerce ul.products li.product .price {
  padding: 0 var(--wadi-sp-4); margin: 0 0 var(--wadi-sp-3);
  font-size: var(--wadi-fs-md); font-weight: var(--wadi-fw-bold);
  color: var(--wadi-price) !important;
  display: flex; align-items: baseline; gap: var(--wadi-sp-2); flex-wrap: wrap;
}
.woocommerce ul.products li.product .price del {
  font-size: var(--wadi-fs-sm); font-weight: var(--wadi-fw-regular);
  color: var(--wadi-ink-muted); opacity: 1; text-decoration-thickness: 1px;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .amount {
  font-family: var(--wadi-font-latin); direction: ltr; unicode-bidi: isolate;
  font-feature-settings: "tnum" 1;
}
.woocommerce ul.products li.product .button {
  margin: auto var(--wadi-sp-4) var(--wadi-sp-4) !important;
  width: calc(100% - var(--wadi-sp-4) * 2);
}

/* Sale flash — styled, but only shown where WooCommerce reports a genuine reduction */
.woocommerce span.onsale {
  background: var(--wadi-sale) !important; color: #fff !important;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-xs) !important;
  font-weight: var(--wadi-fw-semi); min-height: 0; min-width: 0;
  padding: 3px 10px !important; border-radius: var(--wadi-r-pill) !important;
  inset-block-start: var(--wadi-sp-3); inset-inline-start: var(--wadi-sp-3);
  inset-inline-end: auto; margin: 0 !important; line-height: 1.6;
}
.woocommerce ul.products li.product .out-of-stock,
.wadi-oos { background: var(--wadi-ink-muted); color: #fff; }

/* ==========================================================================
   5. SHOP / CATEGORY PAGES
   ========================================================================== */
.woocommerce-products-header { padding-block: var(--wadi-section-y-tight) var(--wadi-sp-4); }
.woocommerce-products-header__title, .woocommerce-loop-title, .page-title {
  font-family: var(--wadi-font-ar-display) !important;
  font-size: var(--wadi-fs-2xl) !important;
  color: var(--wadi-olive) !important;
  margin-bottom: var(--wadi-sp-2) !important;
}
.woocommerce-products-header .term-description { color: var(--wadi-ink-soft); max-width: var(--wadi-container-text); }
.woocommerce .woocommerce-result-count { color: var(--wadi-ink-muted); font-size: var(--wadi-fs-sm); margin: 0; }
.woocommerce .woocommerce-ordering select {
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm);
  min-height: var(--wadi-tap-min); padding: var(--wadi-sp-2) var(--wadi-sp-3);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md); background: var(--wadi-surface);
}
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: var(--wadi-sp-2); display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: var(--wadi-tap-min); min-height: var(--wadi-tap-min);
  display: grid; place-items: center;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  font-family: var(--wadi-font-latin); color: var(--wadi-olive);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wadi-olive); color: #fff; border-color: var(--wadi-olive); }

/* ==========================================================================
   6. PDP
   ========================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--wadi-font-ar-display); font-size: var(--wadi-fs-2xl);
  color: var(--wadi-olive); margin-bottom: var(--wadi-sp-3);
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-size: var(--wadi-fs-xl) !important; font-weight: var(--wadi-fw-bold);
  color: var(--wadi-olive) !important; margin-bottom: var(--wadi-sp-4);
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--wadi-ink-soft); }
.woocommerce div.product div.images img { background: var(--wadi-surface); border-radius: var(--wadi-r-lg); }

/* Variation selector — size must be unmistakable (COD refusal risk) */
.woocommerce div.product form.cart .variations { margin-bottom: var(--wadi-sp-4); border: 0; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; width: 100%; text-align: start; padding: 0 0 var(--wadi-sp-2); }
.woocommerce div.product form.cart .variations label {
  font-family: var(--wadi-font-ar); font-weight: var(--wadi-fw-semi);
  font-size: var(--wadi-fs-base); color: var(--wadi-ink);
}
.woocommerce div.product form.cart .variations select {
  width: 100%; min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3); font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md); background: var(--wadi-surface);
}
/* Woo Variation Swatches */
.wvs-style-squared .variable-item, .variable-items-wrapper .variable-item {
  min-width: 56px !important; min-height: var(--wadi-tap-min) !important;
  border-radius: var(--wadi-r-md) !important; border: 1px solid var(--wadi-line) !important;
  font-family: var(--wadi-font-ar) !important; font-size: var(--wadi-fs-sm) !important;
  box-shadow: none !important; padding: var(--wadi-sp-2) var(--wadi-sp-3) !important;
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item[aria-checked="true"] {
  border-color: var(--wadi-gold) !important; border-width: 2px !important;
  background: var(--wadi-cream) !important; color: var(--wadi-olive-900) !important;
}

.woocommerce .quantity .qty {
  min-height: var(--wadi-tap-min); width: 84px; text-align: center;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  font-family: var(--wadi-font-latin); direction: ltr;
}
.woocommerce div.product form.cart .button { min-height: 52px; font-size: var(--wadi-fs-md) !important; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: var(--wadi-sp-5); border-bottom: 1px solid var(--wadi-line); display: flex; gap: var(--wadi-sp-4); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wadi-font-ar); font-weight: var(--wadi-fw-semi);
  color: var(--wadi-ink-soft); padding: var(--wadi-sp-3) 0; display: block;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wadi-olive); border-bottom-color: var(--wadi-olive); }

.related.products > h2, .upsells.products > h2, .cross-sells > h2 {
  font-size: var(--wadi-fs-xl); color: var(--wadi-olive); margin-bottom: var(--wadi-sp-5);
}

/* ==========================================================================
   7. CART
   ========================================================================== */
.woocommerce table.shop_table { border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--wadi-font-ar); font-weight: var(--wadi-fw-semi); color: var(--wadi-ink); background: var(--wadi-cream-50); }
.woocommerce table.shop_table td { border-top: 1px solid var(--wadi-line); }
.woocommerce table.cart img { width: 64px; border-radius: var(--wadi-r-md); background: var(--wadi-surface); }
.woocommerce .cart_totals h2 { font-size: var(--wadi-fs-lg); color: var(--wadi-olive); }
.woocommerce a.remove {
  color: var(--wadi-danger) !important; width: var(--wadi-tap-min); height: var(--wadi-tap-min);
  display: grid !important; place-items: center; font-size: 20px;
}
.woocommerce a.remove:hover { background: transparent !important; color: var(--wadi-danger) !important; }

/* ==========================================================================
   8. CHECKOUT — COD-first, mobile-first
   ========================================================================== */
.woocommerce-checkout h3 { font-size: var(--wadi-fs-lg); color: var(--wadi-olive); margin-bottom: var(--wadi-sp-4); }
.woocommerce form .form-row { padding: 0; margin-bottom: var(--wadi-sp-4); }
.woocommerce form .form-row label {
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm);
  font-weight: var(--wadi-fw-medium); color: var(--wadi-ink); margin-bottom: var(--wadi-sp-2); display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  min-height: var(--wadi-tap-min) !important; height: auto !important;
  padding: var(--wadi-sp-3) !important;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  border: 1px solid var(--wadi-line) !important; border-radius: var(--wadi-r-md) !important;
  background: var(--wadi-surface);
}
/* Phone is the primary contact field for COD delivery */
.woocommerce form .form-row input[type="tel"],
#billing_phone { direction: ltr; text-align: right; font-family: var(--wadi-font-latin); font-size: var(--wadi-fs-md); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--wadi-danger) !important; }

/* One field per row on mobile */
@media (max-width: 767px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; margin-inline: 0; }
}

#order_review, .woocommerce-checkout-review-order {
  background: var(--wadi-cream-50); border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg); padding: var(--wadi-sp-5);
}
.woocommerce-checkout #payment { background: transparent; border-radius: var(--wadi-r-lg); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--wadi-line); padding: 0 0 var(--wadi-sp-4); }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment ul.payment_methods label {
  font-weight: var(--wadi-fw-semi); font-size: var(--wadi-fs-base); color: var(--wadi-ink);
  display: inline-flex; align-items: center; min-height: var(--wadi-tap-min);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--wadi-cream) !important; color: var(--wadi-olive-900);
  border-radius: var(--wadi-r-md); font-size: var(--wadi-fs-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
#place_order { width: 100%; min-height: 54px; font-size: var(--wadi-fs-md) !important; }

/* ==========================================================================
   9. MY ACCOUNT — functional, not over-designed
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: var(--wadi-sp-1); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: var(--wadi-sp-3); min-height: var(--wadi-tap-min);
  border-radius: var(--wadi-r-md); color: var(--wadi-ink); text-decoration: none;
  font-weight: var(--wadi-fw-medium);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--wadi-olive-100); color: var(--wadi-olive); }

/* ==========================================================================
   10. NOTICES / EMPTY STATES
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0 !important; border-inline-start: 3px solid var(--wadi-olive);
  background: var(--wadi-cream-50); border-radius: var(--wadi-r-md);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm); color: var(--wadi-ink);
  padding: var(--wadi-sp-4) var(--wadi-sp-5);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--wadi-olive); }
.woocommerce-error { border-inline-start-color: var(--wadi-danger); }
.woocommerce-error::before { color: var(--wadi-danger); }
.cart-empty, .woocommerce-info.cart-empty { text-align: center; font-size: var(--wadi-fs-md); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.ct-footer, footer.ct-footer { background: var(--wadi-olive) !important; color: var(--wadi-cream-50); }
.ct-footer [data-row] { background: transparent !important; }
.ct-footer a, .ct-footer .menu a { color: var(--wadi-cream-50) !important; opacity: .9; }
.ct-footer a:hover { opacity: 1; }
.ct-footer :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }

/* ==========================================================================
   12. RESPONSIVE GRID — Woo loop
   ========================================================================== */
/* Column count travels as a custom property, never as grid-template-columns
   on a higher-specificity selector. WooCommerce prints .columns-N on the same
   <ul>, so any attempt to neutralise it by re-declaring the shorthand loses to
   specificity — and `inherit` is worse still: it resolves to the parent's
   `none`, which silently collapses the whole shop to a single column.
   One declaration of the shorthand, one overridable variable. */
.woocommerce ul.products {
  --wadi-cols: 2;
  grid-template-columns: repeat(var(--wadi-cols), minmax(0, 1fr));
}
@media (min-width: 768px)  { .woocommerce ul.products { --wadi-cols: 3; gap: var(--wadi-sp-5); } }
@media (min-width: 1200px) { .woocommerce ul.products { --wadi-cols: 4; } }

/* Honour a deliberately NARROWER Woo setting, never a wider one — five or six
   product cards across is below the readable card width the design allows. */
@media (min-width: 1200px) {
  .woocommerce ul.products.columns-1 { --wadi-cols: 1; }
  .woocommerce ul.products.columns-2 { --wadi-cols: 2; }
  .woocommerce ul.products.columns-3 { --wadi-cols: 3; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .woocommerce ul.products.columns-1 { --wadi-cols: 1; }
  .woocommerce ul.products.columns-2 { --wadi-cols: 2; }
}