/* ==========================================================================
   11. HOMEPAGE — hero slider, best-sellers rail, category cards
   Loaded after 10-visual.css, so it is the last word on these components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 COLOUR REBALANCE

   The brand green had crept onto product names, secondary lines, counts and
   small UI. That reads as "every word is a link", flattens hierarchy, and is
   what made the site feel heavy rather than premium.

   Green is now reserved for ACTIONS and brand marks. Reading text is a warm
   near-black, support text a warm grey. The greens themselves are unchanged —
   the brand is intact; only where they are spent has changed.
   -------------------------------------------------------------------------- */
:root {
  --wadi-ink:        #1C1F1D;  /* headings, product names */
  --wadi-ink-soft:   #565E59;  /* body */
  --wadi-ink-muted:  #6E7873;  /* meta, counts (4.6:1 on cream) */
  --wadi-line:       #E6E4DE;  /* warm, not grey-green */
  --wadi-line-soft:  #F0EEE8;
}

/* Product names stay neutral. Green on a name competes with the price and the
   button for the same attention, three times per card. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .wadi-name,
.woocommerce ul.products li.product a:not(.button) {
  color: var(--wadi-ink) !important;
}
.woocommerce ul.products li.product .wadi-cat-line,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .wadi-product-en {
  color: var(--wadi-ink-muted) !important;
}

/* --------------------------------------------------------------------------
   11.2 INTERACTION STATES

   Reported: pressing a green button showed no hover at all.

   Two causes. The filled button set `background` in a rule carrying
   !important, so the hover rule — which did not — never applied. And on touch
   there is no hover at all, so a tap gave no feedback of any kind.

   Fixed with an !important hover that can actually win, plus an :active state
   that works on touch, and a focus ring for keyboards.
   -------------------------------------------------------------------------- */
.wadi-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.wadi-buynow,
.woocommerce div.product form.cart .single_add_to_cart_button {
  transition: background-color 160ms var(--wadi-ease),
              border-color 160ms var(--wadi-ease),
              color 160ms var(--wadi-ease),
              box-shadow 160ms var(--wadi-ease),
              transform 120ms var(--wadi-ease);
}

/* Filled green */
.wadi-btn--primary:hover,
.wadi-buynow--primary:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--wadi-olive-600, #0A3A23) !important;
  border-color: var(--wadi-olive-600, #0A3A23) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(14, 75, 46, .24) !important;
}

/* Outlined green */
.wadi-btn--secondary:hover,
.wadi-buynow--secondary:hover {
  background-color: var(--wadi-olive-100, #EAF1EC) !important;
  border-color: var(--wadi-olive) !important;
  color: var(--wadi-olive) !important;
}

/* Touch has no hover, so give the press itself a visible response. */
.wadi-btn:active,
.woocommerce .button:active,
.wadi-buynow:active {
  transform: translateY(1px);
  box-shadow: none !important;
}

.wadi-btn:focus-visible,
.woocommerce .button:focus-visible,
.wadi-buynow:focus-visible {
  outline: 3px solid var(--wadi-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-btn, .woocommerce .button, .wadi-buynow { transition: none; }
  .wadi-btn:active, .woocommerce .button:active, .wadi-buynow:active { transform: none; }
}

/* --------------------------------------------------------------------------
   11.3 HERO SLIDER

   A scroll-snap track: swipe, trackpad and keyboard all work with no JS, and
   JS only moves the scroll position and lights a dot.
   -------------------------------------------------------------------------- */
.wadi-hero {
  position: relative;
  margin-block-end: var(--wadi-sp-6);
  background: var(--wadi-cream-50);
  overflow: hidden;
  /* Landscape at every width, by request. A 4:5 phone crop was built first;
     the wide frame is what the owner wants at the top of the site. */
  aspect-ratio: 16 / 9;
}

/* CROSSFADE, NOT A MOVING TRACK.
   Two earlier versions of this failed for environment reasons rather than
   design ones. A scroll-snap track would not move in RTL at all: `scrollLeft`
   read back 0 for every value in both signs, and the overflow escaped to
   <main>, which grew to 1821px. A translated track then applied its transform
   inconsistently — the inline style said translateX(100%) while the computed
   style stayed at identity, with no CSS rule anywhere overriding it.

   Stacked slides with an opacity crossfade have no layout maths at all: no
   scroll offset, no percentage to resolve, no direction to get the sign of.
   It behaves identically in RTL and LTR, and for three photographs a calm
   dissolve suits the brief better than a slide. */
.wadi-hero__track {
  position: absolute;
  inset: 0;
}
.wadi-hero__track:focus-visible { outline: 3px solid var(--wadi-gold); outline-offset: -3px; }

.wadi-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms var(--wadi-ease), visibility 0s linear 620ms;
}
.wadi-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 620ms var(--wadi-ease), visibility 0s;
}
.wadi-hero__link,
.wadi-hero__slide picture { display: block; block-size: 100%; }

.wadi-hero__slide img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Dots sit ON the image, bottom centre, over a soft scrim so they stay legible
   against both the bright sky and the dark stone. */
.wadi-hero__dots {
  position: absolute;
  inset-block-end: clamp(12px, 2.2vw, 22px);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.wadi-hero__dot {
  inline-size: 9px; block-size: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(26, 29, 27, .18), 0 1px 3px rgba(26, 29, 27, .25);
  cursor: pointer;
  transition: inline-size 200ms var(--wadi-ease), background 200ms var(--wadi-ease);
}
.wadi-hero__dot.is-active {
  inline-size: 26px;
  border-radius: 999px;
  background: #fff;
}
/* The dot itself is small by design, so the TARGET is padded out to 44px
   without changing how it looks. */
.wadi-hero__dot::before {
  content: "";
  position: absolute;
  inset-block: -17px;
  inset-inline: -8px;
}
.wadi-hero__dots { position: absolute; }
.wadi-hero__dot { position: relative; }
.wadi-hero__dot:focus-visible { outline: 3px solid var(--wadi-gold); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   11.4 BEST-SELLERS RAIL

   A horizontal scroller reusing the normal product card, so anything fixed on
   the card is fixed here too. Arrows appear only where there is a pointer to
   use them; touch just swipes.
   -------------------------------------------------------------------------- */
.wadi-rail { position: relative; }

.wadi-rail__track.products {
  display: flex !important;
  gap: var(--wadi-sp-4);
  margin: 0 !important;
  padding: 4px 0 var(--wadi-sp-3);
  /* The marquee owns the motion. Manual scrolling was fighting it — the track
     is translated while the browser also tried to scroll it, so the rail felt
     stuck on the first two cards. Hidden, and the loop shows everything. */
  overflow-x: hidden;
  scrollbar-width: none;
  list-style: none;
  width: max-content;
}
.wadi-rail__track.products::-webkit-scrollbar { display: none; }

.wadi-rail__track.products > li.product {
  /* Three-and-a-bit visible on a 390px phone instead of two, so the row reads
     as a row and the movement has somewhere to go. */
  flex: 0 0 clamp(138px, 36vw, 220px);
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* No arrow buttons and no edge fade.
   Arrows could not work: this page refuses every programmatic horizontal
   scroll on an RTL `overflow-x: auto` container. The fade that replaced them
   read as a dark band down the left-hand side in RTL, so it is gone too. The
   rail loops on its own, which says "there is more" better than a gradient. */


/* --------------------------------------------------------------------------
   11.5 CATEGORY CARDS — name BELOW the image

   The name used to sit inside the photograph under a dark wash, which meant
   the picture had to be darkened enough to carry text and the name was only as
   legible as whatever was behind it. Separating them lets the photograph be a
   photograph and the label be type.
   -------------------------------------------------------------------------- */
.wadi-catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  min-height: 0;
}

/* 4:5, not 4:3.
   The category photography is shot PORTRAIT — the olive set is 941x1672 — and
   a landscape frame could only hold it by cutting the bottle caps off or
   zooming into the olives. On a phone the card is 164px wide, so the 4:3 slot
   was 123px tall: too little for a scene with three bottles, a bowl and a
   stone base to read at all. 4:5 gives the same card 205px and matches the
   product cards, which moved to 4:5 for exactly this reason (§11.12). */
.wadi-catcard .wadi-media {
  border-radius: var(--wadi-r-lg);
  overflow: hidden;
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  aspect-ratio: 4 / 5;
  transition: box-shadow 220ms var(--wadi-ease), transform 220ms var(--wadi-ease);
}
.wadi-catcard .wadi-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--wadi-ease);
}
.wadi-catcard:hover .wadi-media { box-shadow: 0 12px 30px rgba(26, 29, 27, .12); }
.wadi-catcard:hover .wadi-media img { transform: scale(1.035); }

/* The caption block, now plain type on the page. */
.wadi-catcard__overlay {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--wadi-sp-3) 2px 0;
  background: none;
  text-align: center;
}
.wadi-catcard__title {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md);
  font-weight: 700;
  color: var(--wadi-ink) !important;
  line-height: 1.3;
}
/* English stays as a quiet brand accent under the three category names —
   one of the few places bilingual treatment earns its keep. */
.wadi-catcard__en {
  font-family: var(--wadi-font-latin);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wadi-ink-muted) !important;
}
.wadi-catcard__count {
  font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink-muted) !important;
}
.wadi-catcard__link { position: absolute; inset: 0; z-index: 2; font-size: 0; color: transparent; }
.wadi-catcard__link:focus-visible { outline: 3px solid var(--wadi-gold); outline-offset: 4px; border-radius: var(--wadi-r-lg); }

@media (prefers-reduced-motion: reduce) {
  .wadi-catcard .wadi-media,
  .wadi-catcard .wadi-media img { transition: none; }
  .wadi-catcard:hover .wadi-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   11.6 COMPACT SALE BADGE
   "-19%" rather than "خصم 19%": half the width, and it stops short of the
   product name instead of crowding it.
   -------------------------------------------------------------------------- */
.woocommerce span.onsale,
.wadi-save {
  padding: 3px 7px !important;
  font-family: var(--wadi-font-latin) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  border-radius: 5px !important;
  background: var(--wadi-sale) !important;
  color: #fff !important;
}
.wadi-save > bdi,
.woocommerce span.onsale > bdi { direction: ltr; unicode-bidi: isolate; }

/* Keep a clear gap between the badge and the name beneath the image. */
.woocommerce ul.products li.product .wadi-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-block-start: var(--wadi-sp-3); }

/* --------------------------------------------------------------------------
   11.7 SECTION RHYTHM
   The hero now runs full-bleed, so the first section below it needs its own
   breathing room rather than inheriting the old split-hero spacing.
   -------------------------------------------------------------------------- */
/* No padding rule here at all any more.
   It began as 32/24 — unequal. Equalising it to 32/32 fixed the top-to-bottom
   asymmetry but left a second one: every neighbouring section takes the
   section clamp, which is 32px on a phone but 64px on a desktop, so the rail
   still sat 32px shallower than the sections around it at desktop width.
   Two overrides were each solving half the problem. Removing both lets the row
   take the same rhythm as everything else, at every width. */
.wadi-section--rail .wadi-section__head { margin-block-end: var(--wadi-sp-4); }

@media (min-width: 900px) {
  /* No override at all from here up. The rail used to take sp-7 (48px) while
     every neighbour takes the section's own clamp, which resolves to 64px at
     this width — so the row sat 16px shallower than the sections above and
     below it. Equal top and bottom was only half the job; it also has to match
     the rhythm it lives in. */
}

@media (prefers-reduced-motion: reduce) {
  .wadi-hero__slide { transition: none; }
}

/* ==========================================================================
   11.8 THE RAIL MOVES ON ITS OWN                        2026-09-28
   "تتحرك وتروح وتيجي" — it drifts one way, then back, rather than looping.

   Driven by a CSS ANIMATION on a transform, not by scrolling. This page
   refuses every programmatic horizontal scroll on an RTL `overflow-x: auto`
   container (scrollLeft/scrollBy/scrollTo/scrollIntoView all read back 0),
   which is what killed the arrow buttons. A keyframe animation never touches
   that API, so it works where the buttons could not.

   The travel distance cannot be expressed in CSS — it is the overflow, which
   depends on how many cards there are — so JS measures it once and hands it
   over as --wadi-rail-shift. Everything else is declarative.

   The moment anyone touches the rail the animation is removed for good and it
   becomes an ordinary scroller. It moves to be noticed; it never fights you.
   ========================================================================== */
@keyframes wadi-rail-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--wadi-rail-shift, 0px)); }
}

/* A CONTINUOUS LOOP, not a there-and-back drift.
   The track holds the catalogue twice and travels exactly 50% of its own
   width, so as the first copy leaves the second is already in place and the
   jump back to zero is invisible. An `alternate` version of this slid out and
   then took just as long to return, which read as "it goes and never comes
   back". Linear, because any easing makes the seam visible. */
.wadi-rail__track.is-drifting {
  animation: wadi-rail-drift var(--wadi-rail-speed, 60s) linear infinite;
  will-change: transform;
}
.wadi-rail:hover .wadi-rail__track.is-drifting,
.wadi-rail__track.is-drifting:focus-within { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .wadi-rail__track.is-drifting { animation: none; }
}

/* ---- Card motion --------------------------------------------------------
   The cards themselves were static. A small lift with the image easing up
   inside its frame reads as "alive" without becoming a gimmick — and it gives
   the hover a visible answer, which is the same complaint as the buttons. */
.woocommerce ul.products li.product {
  transition: transform 260ms var(--wadi-ease), box-shadow 260ms var(--wadi-ease);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(26, 29, 27, .13);
}
.woocommerce ul.products li.product img {
  transition: transform 520ms var(--wadi-ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

/* Touch has no hover, so the press itself answers. */
.woocommerce ul.products li.product:active { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product img { transition: none; }
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product:hover img { transform: none; }
}

/* ==========================================================================
   11.9 PRODUCT NAME SIZE                                 2026-09-28
   The name was 17.4px at weight 600 and ate 78px of a 291px card — bigger
   than the price it sits above. It is a label, not a headline.
   ========================================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  margin-block-end: var(--wadi-sp-2) !important;
}
@media (min-width: 900px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2 { font-size: 15px !important; }
}

/* ==========================================================================
   11.10 BUTTON COLOUR                                    2026-09-28
   The bright olive read as downmarket. Replaced with a deep, desaturated
   charcoal-olive: still the brand family, but the saturation that made it feel
   cheap is gone. Cream text rather than pure white, so it sits with the
   photography instead of glaring against it. Gold stays the accent, which is
   where the "expensive" note in this identity actually lives.
   ========================================================================== */
:root {
  --wadi-btn:        #16241C;
  --wadi-btn-hover:  #24382C;
  --wadi-btn-text:   #FBF7EF;
}

.wadi-btn--primary,
.wadi-buynow--primary,
.woocommerce ul.products li.product .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--wadi-btn) !important;
  border-color: var(--wadi-btn) !important;
  color: var(--wadi-btn-text) !important;
}

.wadi-btn--primary:hover,
.wadi-buynow--primary:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--wadi-btn-hover) !important;
  border-color: var(--wadi-btn-hover) !important;
  color: var(--wadi-btn-text) !important;
  box-shadow: 0 6px 18px rgba(22, 36, 28, .26) !important;
}

/* Outlined secondary buttons follow the same tone. */
.wadi-btn--secondary,
.wadi-buynow--secondary {
  border-color: var(--wadi-btn) !important;
  color: var(--wadi-btn) !important;
}
.wadi-btn--secondary:hover,
.wadi-buynow--secondary:hover {
  background-color: var(--wadi-btn) !important;
  color: var(--wadi-btn-text) !important;
}

/* PDP add-to-cart stays in the sand/beige brand treatment. */
.woocommerce div.product form.cart .single_add_to_cart_button:not(.wadi-buynow) {
  background-color: var(--wadi-cream) !important;
  border-color: var(--wadi-gold) !important;
  color: var(--wadi-olive-900) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:not(.wadi-buynow):hover {
  background-color: var(--wadi-cream-200) !important;
  border-color: var(--wadi-gold) !important;
  color: var(--wadi-olive-900) !important;
}

/* ==========================================================================
   11.11 CATEGORY SLOT — awaiting the owner's artwork      2026-09-28
   The product packshots used as category images were removed; a design is
   being made for each of the three. This is the slot they drop into: the card,
   the caption beneath it and every measurement stay exactly as they are, so
   adding the images later changes nothing but the picture.
   ========================================================================== */
.wadi-catslot {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--wadi-cream-50) 0 10px,
      #F4F0E6 10px 20px);
  border: 1px dashed var(--wadi-line);
}
.wadi-catslot::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 28px; block-size: 28px;
  border: 2px solid var(--wadi-ink-muted);
  border-radius: 4px;
  opacity: .35;
}
.wadi-catcard:hover .wadi-catslot { box-shadow: none; }

/* ==========================================================================
   11.12 PRODUCT IMAGE SIZE IN THE CARD                   2026-09-28
   The bottles rendered small with wide white margins either side.

   The cause was a SQUARE frame holding a TALL photograph. The packshots are
   1086×1448 (3:4), so `object-fit: contain` inside a 1:1 box is limited by
   height: in a 290px card the bottle came out about 193px wide, leaving ~48px
   of white down each side — and a 16px padding on top of that.

   The frame now matches the photographs (4:5) and the padding drops to 6px, so
   the same bottle fills roughly 90% of the card width instead of 67%. Nothing
   is cropped — `contain` still shows the whole bottle — it simply stops being
   asked to fit a shape it was never shot for.
   ========================================================================== */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product figure img,
.woocommerce ul.products li.product .ct-media-container img,
.wadi-rail__track li.product img {
  aspect-ratio: 4 / 5 !important;
  object-fit: contain !important;
  padding: 6px !important;
  background: var(--wadi-surface) !important;
  width: 100% !important;
  height: auto !important;
}

/* The media wrapper has to follow, or the image is boxed by a square parent
   and nothing changes. */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product a.ct-media-container {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  background: var(--wadi-surface);
}

/* ==========================================================================
   11.13 PRICE SIZE + DRAGGABLE RAIL                      2026-09-28
   ========================================================================== */

/* The price was set larger than the product name and dominated the card.
   It is the second thing read, not the first. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .wadi-vprice__amount,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price ins .amount {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: .55;
}
@media (min-width: 900px) {
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .wadi-vprice__amount,
  .woocommerce ul.products li.product .price .amount,
  .woocommerce ul.products li.product .price ins .amount { font-size: 16px !important; }
}

/* The rail can now be DRAGGED while it is held.
   `touch-action: pan-y` keeps vertical page scrolling native while handing the
   horizontal axis to the drag handler — without it the browser claims the
   gesture and the rail cannot be pulled sideways at all. */
.wadi-rail__track.is-drifting { touch-action: pan-y; cursor: grab; }
.wadi-rail__track.is-dragging { cursor: grabbing; }

/* ==========================================================================
   11.14 HEADER LOGO                                      2026-09-28
   The brand-kit shield replaced the old wordmark. It is a PORTRAIT mark
   (1928×2224), so the header's wordmark sizing squashed it to 33×38px — a
   crest that small reads as a smudge. Sized by HEIGHT and allowed its natural
   width, which is how a crest wants to sit in a bar.
   ========================================================================== */
.site-logo-container img,
.custom-logo,
.wadi-header__logo img,
header .custom-logo-link img {
  height: 54px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}
@media (min-width: 900px) {
  .site-logo-container img,
  .custom-logo,
  .wadi-header__logo img,
  header .custom-logo-link img { height: 66px !important; }
}
/* The taller mark needs the bar to make room rather than clip it. */
.wadi-header__bar, .ct-header [data-row], header .site-header-inner { min-height: 76px; }

/* The header's own class. 06-header.css sized this for the OLD wordmark — a
   wide JPEG on a white background — and its note still says so. The mark is now
   the brand-kit shield: transparent, and PORTRAIT (1928×2224), so the old
   height squashed it to 33×38px. A crest needs height, not width. */
/* SITS ON THE CENTRE LINE, NOT ABOVE IT.
   `.wadi-brand` is an inline-flex box, so it is placed on a text baseline and
   carries the line-box's descender space underneath it. The grid then centres
   that box — space included — which left the mark itself riding visibly high
   in the bar. Making the lockup a flex box removes the line box entirely, so
   what gets centred is the image and nothing else.
   This was applied at 1024px and up while chasing the two-row header; the
   cause is not a desktop one, so it belongs at every width. */
.wadi-header__brand,
.wadi-header__brand .wadi-brand { display: flex; align-items: center; }

.wadi-brand__logo {
  /* Raised from 54px at the owner's request — a step up, not a jump. */
  height: 62px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  background: none !important;
  border-radius: 0 !important;
  mix-blend-mode: normal !important;
}
.wadi-header.is-stuck .wadi-brand__logo { height: 48px !important; }
@media (min-width: 900px) {
  .wadi-brand__logo { height: 66px !important; }
  .wadi-header.is-stuck .wadi-brand__logo { height: 52px !important; }
}
.wadi-drawer__head .wadi-brand__logo { height: 48px !important; }

/* ---- Two-row desktop header: keep the sticky bar shallow ----
   From 1024px the nav sits on its own row under the centred logo, which made
   the sticky header 160px deep — a fifth of an 800px screen, permanently.
   The mark keeps the stage it was given; the space around it is what tightens.
   `display:flex` on the lockup removes the ~10px of half-leading an
   inline-level box inherits, which was padding the row for nothing. */
@media (min-width: 1024px) {
  .wadi-header__bar { gap: var(--wadi-sp-1) var(--wadi-sp-5); padding-block: var(--wadi-sp-2); }
  .wadi-brand__logo { height: 64px !important; }

  .wadi-header.is-stuck .wadi-header__bar { padding-block: var(--wadi-sp-1); }
  .wadi-header.is-stuck .wadi-brand__logo { height: 44px !important; }
}

/* ==========================================================================
   11.13 THE PRESS — from grove to bottle                    2026-09-29
   Three stages, read as one line on a desktop and one column on a phone.
   Built on the category card's frame so the two sections rhyme rather than
   each inventing their own proportions: same 4:5 slot, same radius, same
   caption treatment underneath.
   ========================================================================== */
.wadi-press { display: grid; gap: var(--wadi-sp-5); }
@media (min-width: 768px) { .wadi-press { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wadi-sp-5); } }

.wadi-press__step { display: flex; flex-direction: column; }

.wadi-press__step .wadi-media {
  border-radius: var(--wadi-r-lg);
  overflow: hidden;
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  aspect-ratio: 4 / 5;
}
.wadi-press__step .wadi-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Centred, 2026-10-10.
 *
 * These three read as captions UNDER a picture, not as body copy beside one,
 * and the category cards above them have been centred all along — so leaving
 * the stages ranged right was the one thing stopping the two sections from
 * rhyming, which is what §11.13 says they are built to do.
 *
 * The «كيف تطلب» row is deliberately NOT included. Its text sits beside an
 * icon in a flex row, and centring text against an icon's edge only makes the
 * edge look broken. */
.wadi-press__cap {
  padding-block-start: var(--wadi-sp-4);
  text-align: center;
}

/* The 01 / 02 / 03 index was removed on 2026-10-10 at the owner's word. The
   three stages still read in order because they ARE in order, down the page on
   a phone and left to right on a desktop — the numbers were restating what the
   layout already said. Its rule is deleted rather than hidden so no dead
   selector is left behind; the markup went with it, out of the home page. */
.wadi-press__title {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md);
  color: var(--wadi-heading);
  margin: 0 0 var(--wadi-sp-1);
}
.wadi-press__text {
  font-size: var(--wadi-fs-sm);
  line-height: var(--wadi-lh-body);
  color: var(--wadi-ink-soft);
  margin: 0;
}

/* ---- The hero dots are reachable ----
   They measured 9x9. A fingertip is about 44px, so hitting one was a matter of
   luck — and on a slider with no other visible control, the dots ARE the
   control. The mark stays the same size; the tappable area around it grows to
   meet the finger. */
.wadi-hero__dot {
  position: relative;
  min-inline-size: 10px;
  min-block-size: 10px;
}
.wadi-hero__dot::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 44px; block-size: 44px;
  /* Invisible: it exists to be touched, not seen. */
}
.wadi-hero__dots { gap: var(--wadi-sp-3); }

/* ==========================================================================
   11.14  PAGES THAT ARE MOSTLY WORDS                              2026-10-10
   «من نحن» and the policy pages. Until now the About page was built in
   Elementor and every single line of it — the vision, the mission, the values,
   the body copy — was marked up as an <h2>. With everything a heading, nothing
   is: the page had no hierarchy to read, which is exactly what the owner meant
   by asking for «فونت محترم وألوان محترمة».
   These classes give a text page the same type scale, rhythm and palette the
   rest of the site already uses, so it reads as the same brand.
   ========================================================================== */

/* A measured column. Arabic at this size is comfortable to about 70 characters;
   past that the eye loses the start of the next line. */
.wadi-prose {
  max-width: 68ch;
  margin-inline: auto;
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-base);
  line-height: var(--wadi-lh-body);
  color: var(--wadi-ink-soft);
}
.wadi-prose > * + * { margin-block-start: var(--wadi-sp-4); }
.wadi-prose p { margin: 0; }
.wadi-prose strong { color: var(--wadi-ink); font-weight: 700; }

.wadi-prose h2,
.wadi-prose h3 {
  font-family: var(--wadi-font-ar-display);
  color: var(--wadi-heading);
  line-height: 1.35;
  margin-block: var(--wadi-sp-6) var(--wadi-sp-2);
}
.wadi-prose h2 { font-size: var(--wadi-fs-lg); }
.wadi-prose h3 { font-size: var(--wadi-fs-md); }
.wadi-prose > :first-child { margin-block-start: 0; }

/* Lists carry a gold marker rather than an emoji. A ✅ in body copy is somebody
   else's typeface dropped into the middle of ours. */
.wadi-prose ul { margin: 0; padding: 0; list-style: none; }
.wadi-prose ul li {
  position: relative;
  padding-inline-start: var(--wadi-sp-5);
  margin-block-start: var(--wadi-sp-3);
}
.wadi-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wadi-gold);
}
.wadi-prose ol { margin: 0; padding-inline-start: var(--wadi-sp-5); }
.wadi-prose ol li { margin-block-start: var(--wadi-sp-3); }
.wadi-prose ol li::marker { color: var(--wadi-gold); font-weight: 700; }

/* A quiet panel for the one thing on a policy page that must not be missed. */
.wadi-note {
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-inline-start: 3px solid var(--wadi-gold);
  border-radius: var(--wadi-r-md);
  padding: var(--wadi-sp-4);
  color: var(--wadi-ink);
}
.wadi-note strong { color: var(--wadi-olive); }

/* --------------------------------------------------------------------------
   A photograph placed by [wadi_photo]
   -------------------------------------------------------------------------- */
.wadi-photo {
  margin: 0;
  border-radius: var(--wadi-r-lg);
  overflow: hidden;
  border: 1px solid var(--wadi-line);
  background: var(--wadi-cream-50);
}
.wadi-photo__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* The About page opens on the grove. Wide on a desktop, squarer on a phone —
   a 16:7 strip on a 375px screen is 164px tall and shows nothing. */
.wadi-about__hero { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .wadi-about__hero { aspect-ratio: 16 / 7; }
}

/* Two statements side by side on a desktop, stacked on a phone. */
.wadi-split {
  display: grid;
  gap: var(--wadi-sp-5);
  max-width: var(--wadi-container-text, 68ch);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .wadi-split { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.wadi-split__card {
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  padding: var(--wadi-sp-5);
}
.wadi-split__card h3 {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md);
  color: var(--wadi-olive);
  margin: 0 0 var(--wadi-sp-2);
}
.wadi-split__card p {
  margin: 0;
  font-size: var(--wadi-fs-sm);
  line-height: var(--wadi-lh-body);
  color: var(--wadi-ink-soft);
}

/* ==========================================================================
   CUSTOMER REVIEWS — the best-sellers rail, carrying screenshots  2026-10-12

   Motion, pausing and drag all come from `mountRails()`, which adopts this
   because the markup carries `data-wadi-rail`. Everything below is size.

   The cards are narrower than the product cards: a review is read, not
   glanced at, so more of the next one showing is a cue to keep going.
   ========================================================================== */
.wadi-reviews .wadi-reviews__track {
  display: flex;
  gap: var(--wadi-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;

  /* The rail animates `transform`, so the row must NOT also be a scroller —
     two mechanisms moving the same box fight each other. Best Sellers has
     the same pairing. */
  overflow: visible;
}
.wadi-reviews { overflow: hidden; }

.wadi-reviews__item {
  flex: 0 0 72%;
  min-width: 0;
}

.wadi-reviews__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;

  /* No card behind it. These PNGs are transparent and carry their own gold
     botanical border; a white rounded rectangle would sit inside that border
     and cut off its outer glow. */
}

/* ---- On the product page ------------------------------------------------ */
.wadi-reviews-block {
  margin-block-start: var(--wadi-sp-6);
}
.wadi-reviews-block__title {
  margin: 0 0 var(--wadi-sp-2);
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-lg);
  font-weight: 800;
  color: var(--wadi-ink);
  text-align: center;
}

@media (min-width: 768px) {
  .wadi-reviews__item { flex-basis: 40%; }
}
@media (min-width: 1024px) {
  .wadi-reviews__item { flex-basis: 26%; }
}