/* ==========================================================================
   WADI MATROUH — VISUAL LANGUAGE LAYER          added 2026-09-22
   Loads last. Owns three things the earlier layers did not have a concept of:

     1. ARABIC-LED, ENGLISH-ACCENT typography
     2. GREEN AS AN ACCENT, not the default text colour
     3. A real discount badge

   Design position: premium but accessible. The Wadi customer is not only
   Class A. Nothing here should read as luxury-boutique, foreign, or
   English-first — it should read as a confident, calm, modern Egyptian food
   brand that is easy to buy from.
   ========================================================================== */

/* ==========================================================================
   1. GREEN IS AN ACCENT
   The token change re-pointed headings and prices. These are the remaining
   places that set brand green directly on text.
   ========================================================================== */
.woocommerce div.product .product_title,
.woocommerce-products-header__title,
.woocommerce-loop-title,
.hero-section .page-title,
.hero-section .entry-title,
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.wadi-section__title,
.wadi-values__title,
.wadi-contact__title,
.wadi-deadend__title {
  color: var(--wadi-heading) !important;
}

/* Green stays on: the brand mark, primary CTAs, active nav, category chrome,
   and the small trust/reassurance lines where it carries meaning. */
.wadi-brand__text,
.wadi-nav__link[aria-current="page"],
/* .wadi-drawer__note is deliberately NOT in this list: the drawer is
   navigation chrome and carries no green. It is set in 06-header.css,
   which this file loads after and would otherwise override. */
.wadi-cart-cod,
.wadi-pdp-trust__item strong { color: var(--wadi-accent); }

/* Prices: neutral and confident. The old price is grey, never red — red is
   reserved for the discount badge so it means one thing on the page. */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price { color: var(--wadi-price) !important; }
.woocommerce .price del, .woocommerce .price del .amount {
  color: var(--wadi-ink-muted) !important; font-weight: 400;
}
.woocommerce .price ins { color: var(--wadi-price) !important; }

/* ==========================================================================
   2. ARABIC-LED, ENGLISH-ACCENT
   Arabic carries the meaning. English is a quiet supporting line: smaller,
   lighter, letter-spaced, uppercase, and never allowed to compete.

   The ratio is deliberate — English sits at roughly 55% of the Arabic size at
   a lighter weight and a muted colour. A customer who does not read English
   comfortably loses nothing by ignoring it entirely.
   ========================================================================== */
.wadi-en {
  display: block;
  font-family: var(--wadi-font-latin);
  font-size: .62em;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wadi-ink-muted);
  direction: ltr;
  unicode-bidi: isolate;
  margin-block-start: 2px;
}
/* Inside a dark band the muted grey disappears; lift it to cream at low alpha. */
.wadi-section--olive .wadi-en,
.wadi-footer .wadi-en,
.wadi-announce .wadi-en { color: rgba(248, 238, 217, .62); }

/* A heading that carries an English accent line underneath.
   The em-relative .62 above is right for small labels but WRONG inside a
   heading: on a 37px mobile H1 it produced a 23px English line — only 1.6x
   apart, so it read as a second headline rather than a caption.
   Headings therefore get absolute sizes, tuned so Arabic leads by ~3x. */
.wadi-titlepair { display: flex; flex-direction: column; gap: 0; }
h1 .wadi-en, .wadi-h1 .wadi-en {
  font-size: clamp(10px, .35vw + 8.6px, 13px);
  margin-block-start: 10px;
  color: var(--wadi-ink-muted);
}
h2 .wadi-en, .wadi-h2 .wadi-en {
  font-size: clamp(10px, .25vw + 8.8px, 12px);
  margin-block-start: 8px;
}
h3 .wadi-en, h4 .wadi-en, .wadi-values__title .wadi-en, .wadi-contact__title .wadi-en {
  font-size: 10px; margin-block-start: 4px;
}

/* Navigation: Arabic is the link, English is a whisper under it. Hidden below
   1024px — on a phone the nav is a drawer and the extra line is noise. */
.wadi-nav__link { flex-direction: column; align-items: flex-start; line-height: 1.25; }
.wadi-nav__link .wadi-en { font-size: 8.5px; letter-spacing: .1em; margin-block-start: 1px; }
@media (max-width: 1199.98px) { .wadi-nav__link .wadi-en { display: none; } }

/* Product name: Arabic primary, English secondary. Sentence case, not caps —
   a product name in caps reads like a label, not a name. */
.wadi-product-en {
  display: block;
  font-family: var(--wadi-font-latin);
  /* 11px against a ~17.6px Arabic name — roughly 62%. At the --wadi-fs-xs
     token (13.4px) it measured 76% of the Arabic, which is not a supporting
     line, it is a competing one. */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wadi-ink-muted);
  direction: ltr; unicode-bidi: isolate;
  margin-block-start: 3px;
}
/* The title reserves two lines. §2 of this file originally zeroed its
   min-height (it was 2.9em in the bridge layer) on the assumption the wrapper
   would hold the space — but that wrapper was removed when the duplicate-title
   bug was fixed, so nothing reserved it. Rows 2 and 3 then sat 28px — exactly
   one line — out of step with rows 1 and 4. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  /* 4.5em = two 25.6px lines plus the 16px top padding, measured rather than
     guessed: a two-line title renders at 72px, a one-line at 56px. 3.2em
     (51.2px) cleared neither, so one-line cards still sat 16px high. */
  min-height: 4.5em;
  padding: var(--wadi-sp-4) var(--wadi-sp-4) 0;
  margin-bottom: 0;
}

/* ==========================================================================
   3. DISCOUNT BADGE
   Compact, red, white text, LTR, small radius. Read as a commercial fact, not
   as decoration. Only ever rendered from a real WooCommerce reduction.
   ========================================================================== */
.woocommerce span.onsale,
.wadi-save {
  position: absolute; z-index: 3;
  inset-block-start: var(--wadi-sp-3);
  inset-inline-start: var(--wadi-sp-3);
  inset-inline-end: auto;
  display: inline-flex; align-items: center;
  min-height: 0 !important; min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  background: var(--wadi-sale) !important;
  color: #fff !important;
  /* Arabic, because the badge now reads "خصم 17%". The number keeps its own
     `> bdi` rule from §12.3 for the LTR isolate, not for a different typeface:
     --wadi-font-latin is itself Cairo-first, so both scripts render in one
     family by design. Nothing here needs a second font. */
  font-family: var(--wadi-font-ar) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em;
  border-radius: 6px !important;
  box-shadow: none !important;
  direction: ltr; unicode-bidi: isolate;
  white-space: nowrap;
}
.wadi-save bdi { direction: ltr; unicode-bidi: isolate; margin: 0; font-family: inherit; }

/* On the PDP the badge sits on a much larger image, so it earns a little more. */
.woocommerce div.product .woocommerce-product-gallery span.onsale,
.woocommerce div.product .wadi-save {
  inset-block-start: var(--wadi-sp-4);
  inset-inline-start: var(--wadi-sp-4);
  font-size: 12px !important;
  padding: 5px 11px !important;
}

/* ==========================================================================
   4. CATEGORY PRESENTATION
   Three commercial entry points. Each card is a calm field of colour with the
   Arabic name leading, the English accent beneath, and the real product count.
   ========================================================================== */
.wadi-catcard {
  position: relative; overflow: hidden;
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  background: var(--wadi-cream-50);
  transition: border-color var(--wadi-dur) var(--wadi-ease),
              box-shadow var(--wadi-dur) var(--wadi-ease),
              transform var(--wadi-dur) var(--wadi-ease);
}
.wadi-catcard:hover {
  border-color: var(--wadi-olive);
  box-shadow: 0 12px 30px rgba(14, 75, 46, .10);
  transform: translateY(-2px);
}
.wadi-catcard__overlay {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--wadi-sp-5);
  background: linear-gradient(to top, rgba(14, 75, 46, .92) 0%, rgba(14, 75, 46, .72) 55%, rgba(14, 75, 46, 0) 100%);
  color: #fff;
}
.wadi-catcard__title {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md); font-weight: 600; color: #fff; line-height: 1.4;
}
.wadi-catcard__en {
  font-family: var(--wadi-font-latin);
  /* 10.5px against an 18.5px Arabic title — the token size measured 12.55px,
     only 1.48x apart, which reads as a subtitle rather than an accent. */
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  direction: ltr; unicode-bidi: isolate;
}
.wadi-catcard__count {
  font-size: var(--wadi-fs-xs); color: rgba(255, 255, 255, .80);
  margin-block-start: var(--wadi-sp-2);
}

/* ==========================================================================
   5. PRODUCT-CARD RHYTHM
   Quieter chrome, more air, and a single accent — the button. The card should
   let the photograph do the work once real photography lands.
   ========================================================================== */
.woocommerce ul.products li.product {
  border-color: var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  transition: border-color var(--wadi-dur) var(--wadi-ease),
              box-shadow var(--wadi-dur) var(--wadi-ease),
              transform var(--wadi-dur) var(--wadi-ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--wadi-line);
  box-shadow: 0 12px 30px rgba(26, 29, 27, .08);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product figure { border-bottom-color: var(--wadi-line-soft); }
.woocommerce ul.products li.product .meta-categories,
.woocommerce ul.products li.product .ct-product-categories {
  font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted);
}

/* ==========================================================================
   6. SECTION RHYTHM
   More white space between sections, and one consistent heading treatment:
   Arabic title, gold rule, English accent.
   ========================================================================== */
.wadi-section { padding-block: clamp(var(--wadi-sp-6), 6vw, var(--wadi-sp-8, 96px)); }
.wadi-section__head { margin-bottom: var(--wadi-sp-6); }
.wadi-section__title { font-size: var(--wadi-fs-2xl); font-weight: 600; letter-spacing: 0; }
.wadi-section__sub { color: var(--wadi-ink-soft); font-size: var(--wadi-fs-base); }
.wadi-section__head--center .wadi-rule-gold { margin-inline: auto; }

/* ==========================================================================
   7. BUTTONS
   One filled green primary per view. Everything else is outline or text, so
   the eye always knows where the commitment is.
   ========================================================================== */
.wadi-btn--primary,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--wadi-olive) !important;
  color: #fff !important;
  border-color: var(--wadi-olive) !important;
  transition: background var(--wadi-dur) var(--wadi-ease),
              transform var(--wadi-dur) var(--wadi-ease),
              box-shadow var(--wadi-dur) var(--wadi-ease);
}
.wadi-btn--primary:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--wadi-olive-500) !important;
  box-shadow: 0 6px 18px rgba(14, 75, 46, .22);
}
.wadi-btn--primary:active,
.woocommerce ul.products li.product .button:active { transform: translateY(1px); }

/* ==========================================================================
   8. MOTION — deliberately restrained
   Only three things move, all of them a direct response to the pointer:
   the card lift above, the button hover above, and the card image below.
   No scroll-triggered reveals, no parallax, no autoplay, no animation library.
   The architecture is ready for tasteful reveals later; this phase does not
   spend performance or attention on them.
   ========================================================================== */
.woocommerce ul.products li.product img.wp-post-image {
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.woocommerce ul.products li.product:hover img.wp-post-image { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product img.wp-post-image,
  .wadi-catcard, .wadi-btn--primary,
  .woocommerce ul.products li.product .button { transition: none !important; transform: none !important; }
}

/* Touch devices get no hover lift — it only ever fires as a sticky artefact. */
@media (hover: none) {
  .woocommerce ul.products li.product:hover,
  .wadi-catcard:hover { transform: none; box-shadow: none; }
  .woocommerce ul.products li.product:hover img.wp-post-image { transform: none; }
}

/* ==========================================================================
   11. CATEGORY CARDS WITHOUT PHOTOGRAPHY
   The dark olive gradient in §4 is designed to sit over a photograph. With no
   photograph it covers the whole card, so the homepage rendered as three large
   solid green blocks — the exact green-heaviness this phase is removing.

   Until category photography exists, a card with a placeholder gets a light
   treatment: its own tinted field, dark neutral text, and the category colour
   as a thin top rule rather than a flood. The gradient version stays and takes
   over automatically the moment a real image is set.
   ========================================================================== */
.wadi-catcard:has(.wadi-placeholder) .wadi-catcard__overlay {
  position: static;
  background: none;
  padding: var(--wadi-sp-5);
  color: var(--wadi-ink);
}
.wadi-catcard:has(.wadi-placeholder) {
  display: flex; flex-direction: column;
  background: var(--wadi-cream-50);
  border-top: 3px solid var(--wadi-accent-cat, var(--wadi-olive));
}
/* The media slot is locked to 1:1 so photography drops in without layout
   shift. With no photo that produced a 500px-tall cream card holding one
   short label — all air, no content. Until an image exists the slot is a
   fixed, modest band; the 1:1 ratio returns with the photograph. */
.wadi-catcard:has(.wadi-placeholder) .wadi-media {
  aspect-ratio: auto !important;
  height: 96px; min-height: 0;
  background: transparent; border: 0;
  display: grid; place-items: center;
  font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted);
}
@media (min-width: 768px) {
  .wadi-catcard:has(.wadi-placeholder) .wadi-media { height: 120px; }
}
.wadi-catcard:has(.wadi-placeholder) .wadi-catcard__title { color: var(--wadi-ink); }
.wadi-catcard:has(.wadi-placeholder) .wadi-catcard__en    { color: var(--wadi-ink-muted); }
.wadi-catcard:has(.wadi-placeholder) .wadi-catcard__count { color: var(--wadi-ink-soft); }

/* Each category gets its own quiet top rule, so the three read as a set of
   distinct entry points rather than three identical green tiles. */
.wadi-grid--3 .wadi-catcard:nth-child(1) { --wadi-accent-cat: var(--wadi-olive); }
.wadi-grid--3 .wadi-catcard:nth-child(2) { --wadi-accent-cat: var(--wadi-leaf); }
.wadi-grid--3 .wadi-catcard:nth-child(3) { --wadi-accent-cat: var(--wadi-amber); }

/* Browsers without :has() keep the gradient — degraded, never broken. */
@supports not selector(:has(*)) {
  .wadi-catcard__overlay { background: linear-gradient(to top, rgba(14,75,46,.92), rgba(14,75,46,0)); }
}

/* ==========================================================================
   12. FIXES FROM INDEPENDENT REVIEW          2026-09-22
   An independent reviewer audited the build. These are the confirmed defects,
   most of them introduced by the visual batch itself.
   ========================================================================== */

/* ---- 12.1 CRITICAL: the final CTA headline was invisible ------------------
   .wadi-section--olive is an INVERTED band: dark green field, cream text.
   03-layout.css sets that correctly. But §1 of this file listed
   .wadi-section__title in a long `color: var(--wadi-heading) !important`
   sweep, which won on !important and painted the biggest text on the band
   near-black on dark green.

   Measured: #1a1d1b on #0E4B2E = 1.67:1. Effectively unreadable.

   The tell-tale was already in the markup: the sibling paragraph carried an
   inline color:inherit, because someone hit this on the <p> and patched it
   inline instead of fixing the cascade.

   Two classes beat one, so this wins without another !important escalation
   being needed anywhere else.                                              */
.wadi-section--olive .wadi-section__title,
.wadi-section--olive :is(h1, h2, h3, h4, h5, h6),
.wadi-footer :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wadi-cream-50) !important;
}
.wadi-section--olive .wadi-section__sub { color: var(--wadi-cream) !important; opacity: .9; }

/* ---- 12.2 Green used as a heading colour where the brief says neutral ----
   The "كيف تطلب / How to Order" step titles were brand green — content
   headings, not CTAs, which is exactly the pattern being removed. Green stays
   on the ringed step icon, which is where it carries meaning.              */
.wadi-trust__title { color: var(--wadi-heading); }
.wadi-trust__item .wadi-ring { color: var(--wadi-accent); border-color: var(--wadi-accent); }

/* ---- 12.3 Discount badge: RTL placement ---------------------------------
   `direction: ltr` was set on the badge BOX so the Latin text would read
   correctly. It also flipped inset-inline-start to mean LEFT, so the sale
   badge sat top-left while the out-of-stock badge — identical CSS, no
   direction override — sat top-right. Same card, opposite corners.

   In an RTL layout the scan entry point is top-RIGHT. The box now stays RTL
   and only the inner text runs LTR.                                        */
.woocommerce span.onsale,
.wadi-save {
  direction: rtl;
  inset-inline-start: var(--wadi-sp-3);
  inset-inline-end: auto;
}
.wadi-save > bdi,
.woocommerce span.onsale > bdi {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--wadi-font-latin);
}

/* ---- 12.4 Mobile sort control was a broken 44px pill --------------------
   Blocksy deliberately collapses the ordering <select> to an icon below
   690px (width 34, transparent text, icon overlaid). 07-shop.css then
   re-added min-width:44px, padding and a visible colour — restoring the TEXT
   but not the WIDTH, leaving ~12px of usable space for a 95px label. The
   result rendered as a dead pill with clipped text.

   Committing to Blocksy's icon-only pattern, at a proper 44px target.      */
@media (max-width: 689.98px) {
  .woocommerce .woocommerce-ordering select,
  .woocommerce select.orderby {
    width: var(--wadi-tap-min) !important;
    min-width: var(--wadi-tap-min) !important;
    padding: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
  }
  .woocommerce .woocommerce-ordering { position: relative; }
}

/* ---- 12.5 English micro-type was below a legibility floor ---------------
   Nav English measured 8.5px. The subordination RATIO was right, the
   absolute size was not: 8.5px Latin at a 3.13:1 contrast is grey noise, and
   it inflated every nav link to 49px tall for text nobody can read.        */
.wadi-nav__link .wadi-en { font-size: 10px; }

/* ---- 12.6 Hero lead had tight Arabic leading ----------------------------
   18.5px / 28.7px = 1.55 on the most-read paragraph on the site. Arabic
   needs more room than Latin: ascenders, descenders and diacritics collide
   below about 1.7.                                                         */
.wadi-lead { line-height: 1.8; }

/* ---- 12.7 Prices and buttons did not share a baseline across a row ------
   Buttons already aligned (margin-block-start:auto). Prices floated,
   because the name block is 1 or 2 lines depending on the product. Measured
   price offsets in one row: 511 / 511 / 511 / 483.                         */
/* The Arabic titles were already uniform (67px across all 14 cards). The real
   cause was the ENGLISH line: 20px where it fits on one line, 41px where it
   wraps to two ("Organic Apple Cider Vinegar"). That 21px propagated straight
   into the price offset, which measured 550 vs 571 in the same row.
   Two lines of space are reserved whether or not they are used. */
.woocommerce ul.products li.product .wadi-product-en {
  min-height: 2.9em;
  display: block;
}

/* ---- 12.8 Empty products header held 72px of padding and no content -----
   On a category page this block carries the English term name. On /shop/ it
   renders empty but keeps its padding, costing 72px above the first product
   on a page that already spends 459px of a 900px viewport on chrome.       */
.woocommerce-products-header:not(:has(*)) { display: none; }
.post-type-archive-product .woocommerce-products-header { padding-block: 0; }

/* ---- 12.9 Bottom-nav clearance was 7px short ----------------------------
   Resolved properly at source. The 7px gap existed because the nav had no
   declared height: it measured 65px from its contents while three files had
   each hard-coded 58px. Patching a fourth figure (68px) in here only added
   another number to keep in sync — and it did drift, because the sticky
   purchase bar later guessed 58px again and landed 7px inside the nav.

   The nav's height is now the --wadi-mobilenav-h token, 06-header.css derives
   the body clearance from it, and this override is gone. */

/* ---- 12.10 Hide empty SKU and zero-review affordances ------------------- */
.woocommerce div.product .product_meta .sku_wrapper:has(.sku:empty) { display: none; }

/* ==========================================================================
   13. BUY NOW + STICKY MOBILE PURCHASE BAR        2026-09-23
   ========================================================================== */

/* ---- 13.1 The two purchase actions ---------------------------------------
   LAYOUT. The buttons do not live directly in form.cart — Blocksy wraps the
   quantity box and the buttons together in `.ct-cart-actions`, a wrapping flex
   row. So the row is:

       [ quantity ] [ أضف للسلة ]
       [        اشترِ الآن        ]

   Quantity deliberately stays ABOVE the primary action rather than beside it.
   This store averages 2.45 items per order; a primary CTA placed above the
   quantity box invites a one-item checkout on a brand people stock up on.

   Buy Now claims its own full-width row explicitly. It reached that position
   by accident first — the widths simply happened to wrap — which would have
   silently rearranged itself the first time a label, a font or the quantity
   box changed width.

   The design system allows exactly one filled green button per view. Buy Now
   keeps that primary role; Add to Cart uses the warm brand beige requested by
   the owner, so the two actions stay distinct without another green block.  */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .wadi-buynow {
  flex: 1 1 160px;
  /* Both buttons and the quantity box share one height. Buy Now carries two
     lines of label, so its block padding has to go or it renders 9px taller
     than everything beside it. */
  min-height: 52px !important;
  padding-block: 0 !important;
  display: inline-flex !important;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding-inline: var(--wadi-sp-5) !important;
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-base) !important;
  font-weight: 700 !important;
  line-height: 1.25;
  border-radius: var(--wadi-r-pill) !important;
  cursor: pointer;
}

/* Its own full row, under the quantity + Add to Cart line. Declared, not left
   to whether the widths happen to wrap. */
.woocommerce div.product form.cart .wadi-buynow { flex: 1 0 100%; }

/* Buy Now is the filled-green primary. Add to Cart steps down to the same
   beige/gold/dark-olive state as a chosen size. */
.wadi-buynow--primary {
  background: var(--wadi-olive) !important;
  color: #fff !important;
  border: 1px solid var(--wadi-olive) !important;
}
.wadi-buynow--primary:hover:not(.disabled) {
  background: var(--wadi-olive-500) !important;
  box-shadow: 0 6px 18px rgba(14, 75, 46, .22);
}
.woocommerce div.product form.cart:has(.wadi-buynow--primary) .single_add_to_cart_button:not(.wadi-buynow) {
  background: var(--wadi-cream) !important;
  color: var(--wadi-olive-900) !important;
  border: 1px solid var(--wadi-gold) !important;
  box-shadow: none !important;
}

/* The mirror image, if WADI_BUY_NOW_PRIMARY is flipped to false. */
.wadi-buynow--secondary {
  background: transparent !important;
  color: var(--wadi-olive) !important;
  border: 1px solid var(--wadi-olive) !important;
}
.wadi-buynow--secondary:hover:not(.disabled) { background: var(--wadi-olive-100) !important; }

.wadi-buynow__ar { display: block; }

/* Unavailable until a size is chosen — WooCommerce's own variation script
   applies these classes to both buttons at once. */
.wadi-buynow.disabled,
.wadi-buynow.wc-variation-selection-needed {
  opacity: .45 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* A brief, quiet highlight when someone tries to buy without choosing a size.
   It points at the control rather than printing an error they cannot see. */
.wadi-needs-pick {
  animation: wadi-pick 1.4s var(--wadi-ease);
  border-radius: var(--wadi-r-md);
}
@keyframes wadi-pick {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  25%      { box-shadow: 0 0 0 4px rgba(212, 175, 55, .55); }
  60%      { box-shadow: 0 0 0 4px rgba(212, 175, 55, .35); }
}

/* ---- 13.2 Sticky mobile purchase bar -------------------------------------
   Sits above the bottom navigation, never over it. Desktop never sees it: the
   purchase controls are already beside the gallery and the summary is sticky. */
.wadi-buybar {
  position: fixed; inset-inline: 0; z-index: calc(var(--wadi-z-header) + 2);
  bottom: calc(var(--wadi-mobilenav-h) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--wadi-line);
  box-shadow: 0 -6px 20px rgba(26, 29, 27, .08);
  transform: translateY(100%);
  transition: transform 260ms var(--wadi-ease);
}
.wadi-buybar.is-in { transform: translateY(0); }
.wadi-buybar[hidden] { display: none; }

.wadi-buybar__inner {
  display: flex; align-items: center; gap: var(--wadi-sp-3);
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
}
.wadi-buybar__price {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--wadi-font-latin);
  font-size: var(--wadi-fs-md); font-weight: 700; color: var(--wadi-price);
  direction: ltr; unicode-bidi: isolate;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wadi-buybar__price del { display: none; }          /* one number on a 390px bar */
.wadi-buybar__price ins { text-decoration: none; }

.wadi-buybar__actions { margin-inline-start: auto; display: flex; gap: var(--wadi-sp-2); flex: 0 0 auto; }
.wadi-buybar__btn {
  min-height: var(--wadi-tap-min); min-width: var(--wadi-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm); font-weight: 700;
  border-radius: var(--wadi-r-pill); cursor: pointer;
  transition: background var(--wadi-dur) var(--wadi-ease), opacity var(--wadi-dur) var(--wadi-ease);
}
.wadi-buybar__btn--cart {
  background: var(--wadi-cream); color: var(--wadi-olive-900);
  border: 1px solid var(--wadi-gold);
  padding: 0 var(--wadi-sp-3);
}
.wadi-buybar__btn--buy {
  background: var(--wadi-olive); color: #fff; border: 1px solid var(--wadi-olive);
  padding: 0 var(--wadi-sp-6);
}
.wadi-buybar__btn--buy:hover { background: var(--wadi-olive-500); }
.wadi-buybar.is-blocked .wadi-buybar__btn { opacity: .55; }
/* No out-of-stock variant: the bar is not rendered at all for an unavailable
   product. See inc/buy-now.php §3. */

/* Clearance so the bar never covers the last line of content: the nav, plus
   the bar's own 69px, plus a little air. Derived from the same token as the
   bar's offset, so the two can never disagree.

   GATED AT THE SAME BREAKPOINT AS THE BAR ITSELF. It was not, and the JS adds
   `wadi-has-buybar` at every width — so every desktop product page carried 137px
   of empty space below the content for a bar that was displaying `none`.
   Measured: document height 2895 with the class, 2758 without. The 900–1023px
   band had the same padding while the bottom nav was still on screen. */
@media (max-width: 899.98px) {
  body.wadi-has-buybar {
    padding-bottom: calc(var(--wadi-mobilenav-h) + 72px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 900px) { .wadi-buybar { display: none !important; } }

/* WooCommerce injects a "View cart" link into the actions row after an AJAX
   add. It arrived BETWEEN the two purchase actions at 40px tall — under the
   44px target minimum, and splitting the primary pair. It goes last, full
   width, at a real target size.

   `order: 99`, not a small number. Blocksy assigns its own order values inside
   .ct-cart-actions — quantity 1, Add to Cart 2, and 5 for anything it does not
   recognise, which is where Buy Now lands. An order of 1 here merely TIED with
   the quantity box, so the link inserted itself between quantity and Add to
   Cart and pushed the whole row apart. 99 is clear of anything Blocksy sets. */
.woocommerce div.product form.cart a.added_to_cart {
  order: 99;
  flex: 1 0 100%;
  min-height: var(--wadi-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-buybar { transition: none; }
  .wadi-needs-pick { animation: none; outline: 2px solid var(--wadi-gold); outline-offset: 3px; }
}

/* ==========================================================================
   14. HERO STAGE                                        2026-09-26
   The hero was a grey placeholder reading "صورة رئيسية قريباً".

   ART DIRECTION comes from the approved Brand Kit, not from stock olive-oil
   convention: warm Matrouh limestone and sand, deep olive, a thin gold line,
   and the brand's own tagline من أرضنا ... لكل بيت. The horizon, light and
   depth are drawn in CSS — abstract, not an imitation photograph — so nothing
   here pretends to be a place or a product that was never photographed.

   The product sits on its own white card rather than cut out. The only real
   olive-oil photograph in the library is a shrink-wrapped offer pack, and
   transparent plastic cannot be masked cleanly; a framed packshot is honest
   and reads as deliberate, where a ragged cutout would read as a mistake.

   PAYLOAD: one WebP the store already serves. Everything else is gradients
   and one inline SVG, so the hero costs no extra request and stays crisp at
   any pixel density.
   ========================================================================== */
.wadi-stage {
  position: relative;
  border-radius: var(--wadi-r-lg, 18px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255, 249, 235, .96) 0%, rgba(255, 249, 235, 0) 58%),
    linear-gradient(176deg, #FBF7EF 0%, #F6EEDC 52%, #EFE3CC 100%);
  box-shadow: 0 18px 50px rgba(26, 29, 27, .10), 0 2px 6px rgba(26, 29, 27, .05);
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: var(--wadi-sp-6) var(--wadi-sp-5);
}

/* An abstract horizon, not a photograph of one. */
.wadi-stage::before {
  content: "";
  position: absolute; inset-inline: -10%; bottom: -18%;
  height: 62%;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(14, 75, 46, .10) 0%, rgba(14, 75, 46, 0) 70%),
    linear-gradient(180deg, rgba(214, 128, 0, 0) 0%, rgba(214, 128, 0, .07) 100%);
  border-start-start-radius: 50% 40%;
  border-start-end-radius:   50% 40%;
  z-index: 0;
}

/* A single gold hairline. Gold is an accent in this system, never a surface. */
.wadi-stage::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wadi-gold), transparent);
  opacity: .55;
  z-index: 2;
}

.wadi-stage__frame {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 14px;
  padding: var(--wadi-sp-4);
  box-shadow: 0 20px 44px rgba(26, 29, 27, .14), 0 1px 0 rgba(255, 255, 255, .9) inset;
  transform: rotate(-1.2deg);
  max-width: 300px;
}
.wadi-stage__frame img {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
}

/* The brand line, set in the display face, quietly behind the product. */
.wadi-stage__mark {
  position: absolute; z-index: 0;
  inset-block-start: var(--wadi-sp-5);
  inset-inline-start: var(--wadi-sp-5);
  font-family: var(--wadi-font-ar-display);
  font-size: clamp(15px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--wadi-olive);
  opacity: .30;
  letter-spacing: .01em;
  pointer-events: none;
}

.wadi-stage__leaf {
  position: absolute; z-index: 0;
  inset-block-end: -6%; inset-inline-end: -4%;
  width: clamp(120px, 26%, 210px);
  color: var(--wadi-leaf, #7CA34A);
  opacity: .22;
  pointer-events: none;
}

@media (min-width: 900px) {
  .wadi-stage { min-height: 420px; padding: var(--wadi-sp-7) var(--wadi-sp-6); }
  .wadi-stage__frame { max-width: 340px; }
}

/* Motion: one quiet settle on load. Nothing loops, nothing follows the
   scroll, and it is skipped entirely for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .wadi-stage__frame { animation: wadi-settle 900ms var(--wadi-ease) both; }
  @keyframes wadi-settle {
    from { opacity: 0; transform: rotate(-1.2deg) translateY(14px) scale(.985); }
    to   { opacity: 1; transform: rotate(-1.2deg) translateY(0) scale(1); }
  }
}