/* ==========================================================================
   WADI MATROUH — HEADER, DRAWER, SEARCH, MOBILE NAV
   Loads last so it wins over both the component layer and the Blocksy bridge.

   Design intent: the header should read as a shopfront, not a toolbar. One
   quiet olive announcement band, one generous white bar, category-led
   navigation. Gold appears only as a hairline accent — the brand kit calls it
   "ذهبي فاخر / RICH GOLD", and a gold that is everywhere is not rich.
   ========================================================================== */

/* Blocksy's own header is no longer rendered (see header.php). These rules
   exist only so a cached or plugin-injected copy cannot appear underneath. */
header.ct-header:not(.wadi-header),
#header.ct-header:not(.wadi-header) { display: none !important; }

/* ==========================  SKIP LINK  ========================== */
.wadi-skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 1000;
  background: var(--wadi-olive); color: #fff;
  padding: var(--wadi-sp-3) var(--wadi-sp-4); border-radius: 0 0 var(--wadi-r-md) 0;
}
.wadi-skip:focus { inset-inline-start: 0; color: #fff; }

/* ==========================  ANNOUNCEMENT BAR  ==========================
   A ticker, on the same mechanism as the best-sellers rail: the track holds
   one group of messages repeated enough times to overrun the screen, and
   travels exactly ONE group's width. At that point every copy has taken the
   place of the one before it, so the reset to zero is invisible and the bar
   never shows a gap. JS measures the group and writes --wadi-tick-shift and
   --wadi-tick-speed; everything else here is declarative. */
.wadi-announce {
  /* Olive ground, gold words — the identity colours.

     The beige version sat on the same family of colour as the page
     beneath it, so the bar and the body ran together instead of the
     bar reading as a frame around the site.

     BOTH messages are gold. The brand gold measures 4.84:1 on this
     green, so it carries text here — the same gold on the beige was
     1.82:1, which is why the offer had to be darkened to a bronze
     while that version was live. On olive it can simply be the gold. */
  background: var(--wadi-olive);
  color: var(--wadi-gold);
  font-size: var(--wadi-fs-xs);
  line-height: 1.5;
  /* A gold hairline, not a gold bar. */
  box-shadow: inset 0 -1px 0 rgba(212, 175, 55, .35);
}
/* The track is wider than the screen by design, so the overflow is clipped
   here rather than allowed to widen the document. */
.wadi-announce__viewport { overflow: hidden; }

.wadi-announce__track {
  display: flex; align-items: center;
  width: max-content;
  min-height: 38px; padding-block: var(--wadi-sp-2);
  will-change: transform;
}
.wadi-announce__group {
  display: inline-flex; align-items: center;
  gap: var(--wadi-sp-3);
  flex: 0 0 auto; white-space: nowrap;
  padding-inline-end: var(--wadi-sp-3);
}

@keyframes wadi-tick-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--wadi-tick-shift, 0px)); }
}
.wadi-announce__track.is-ticking {
  animation: wadi-tick-drift var(--wadi-tick-speed, 30s) linear infinite;
}
/* Readable on demand: resting on the bar stops it. */
.wadi-announce:hover .wadi-announce__track.is-ticking { animation-play-state: paused; }
.wadi-announce__tag {
  display: inline-flex; align-items: center; gap: var(--wadi-sp-2);
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-sm);
  color: var(--wadi-gold);
  letter-spacing: 0;
}
/* The sprig and the house carry the sentence, so they sit at its weight —
   slightly softer than the words themselves, never louder. */
.wadi-announce__tag .wadi-ico { flex: 0 0 auto; opacity: .8; }
.wadi-announce__sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .45; flex: 0 0 auto;
}
.wadi-announce__item { display: inline-flex; align-items: center; gap: var(--wadi-sp-2); opacity: .95; }
.wadi-announce__item .wadi-ico { color: var(--wadi-gold); flex: 0 0 auto; }

/* The tagline used to be dropped below 520px, because it and the claim could
   not share one line without shrinking past readability. A ticker has no such
   limit — the messages take turns instead of competing for the width — so both
   now show at every size. */
@media (prefers-reduced-motion: reduce) {
  .wadi-announce__track.is-ticking { animation: none; }
}

/* ==========================  HEADER BAR  ========================== */
.wadi-header {
  position: sticky; top: 0; z-index: var(--wadi-z-header);
  background: var(--wadi-surface);
  border-bottom: 1px solid var(--wadi-line);
  transition: box-shadow var(--wadi-dur) var(--wadi-ease),
              background var(--wadi-dur) var(--wadi-ease);
}
.wadi-header.is-stuck {
  box-shadow: 0 2px 16px rgba(14, 75, 46, .10);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
}
.wadi-sticky-sentinel { height: 1px; margin-bottom: -1px; }

/* Three columns, not a flex row, because the logo has to sit in the TRUE
   centre of the bar — not merely between its neighbours. The two outer tracks
   are 1fr each, so they stay equal whatever they contain and the middle column
   lands on the centre line regardless of how wide the burger or the icon group
   happens to be. A flex row cannot do this: it centres the leftover space, so
   the logo drifts off-centre the moment one side outweighs the other. */
.wadi-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--wadi-sp-3);
  min-height: 62px;
  transition: min-height var(--wadi-dur) var(--wadi-ease);
}
/* The burger and the desktop nav share column 1 — only one of the two is ever
   displayed, so they never collide. */
.wadi-header__burger, .wadi-header__nav { grid-column: 1; justify-self: start; }
.wadi-header__brand { grid-column: 2; justify-self: center; }
.wadi-header.is-stuck .wadi-header__bar { min-height: 56px; }

.wadi-header__nav   { display: none; }
.wadi-header__actions {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 2px;
}

/* ---- Brand lockup ----
   The logo file is a JPEG with a white background, so it can only ever sit on
   white. That is why the header bar is white rather than cream. Replace with a
   transparent PNG or SVG and this constraint disappears. */
.wadi-brand { display: inline-flex; align-items: center; text-decoration: none; }
.wadi-brand__logo {
  height: 38px; width: auto; display: block;
  transition: height var(--wadi-dur) var(--wadi-ease);
}
.wadi-header.is-stuck .wadi-brand__logo { height: 32px; }
.wadi-brand__text {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md); font-weight: 700; color: var(--wadi-olive);
}
@media (min-width: 1024px) {
  .wadi-brand__logo { height: 46px; }
  .wadi-header.is-stuck .wadi-brand__logo { height: 38px; }
}

/* ---- Icon buttons ----
   44px is the floor, not the target. Every interactive element in this header
   is at least 44x44 whether or not the glyph inside it is. */
.wadi-iconbtn {
  display: grid; place-items: center; position: relative;
  min-width: var(--wadi-tap-min); min-height: var(--wadi-tap-min);
  width: var(--wadi-tap-min); height: var(--wadi-tap-min);
  padding: 0; border: 0; background: transparent;
  /* Neutral, matching the bottom bar's resting state. These are chrome,
     not content, and olive is this site's link and button colour. */
  color: var(--wadi-ink-soft); cursor: pointer;
  border-radius: var(--wadi-r-md);
  transition: background var(--wadi-dur) var(--wadi-ease), color var(--wadi-dur) var(--wadi-ease);
}
.wadi-iconbtn:hover { background: var(--wadi-cream-50); color: var(--wadi-ink); }
.wadi-iconbtn:focus-visible { outline: 2px solid var(--wadi-ink); outline-offset: -2px; }
.wadi-header__burger { display: grid; }
@media (min-width: 1024px) { .wadi-header__burger { display: none; } }

/* ---- Cart badge ---- */
.wadi-cart-count {
  position: absolute; inset-block-start: 5px; inset-inline-end: 3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--wadi-amber); color: #fff;
  font-family: var(--wadi-font-latin);
  font-size: 11px; font-weight: 700; line-height: 18px;
  border-radius: var(--wadi-r-pill); text-align: center;
  direction: ltr; unicode-bidi: isolate;
  box-shadow: 0 0 0 2px var(--wadi-surface);
}
.wadi-cart-count.is-empty { display: none; }

/* ==========================  DESKTOP NAV  ==========================
   Two rows, because a centred logo and a full category nav cannot share one.
   Centring is what forces it: the mark only lands on the centre line if the
   two side columns are equal, so a 680px nav on one side demands 680px of
   empty space on the other — about 1400px of header inside a 1200px
   container. The nav overlapped the logo exactly that way.
   Giving the nav its own row, centred under the mark, keeps the logo on the
   centre line at every width and is the usual premium-retail arrangement. */
@media (min-width: 1024px) {
  .wadi-header__bar {
    grid-template-rows: auto auto;
    gap: var(--wadi-sp-2) var(--wadi-sp-5);
    /* The rows set the height now, so the old min-height would only add
       dead space underneath. */
    min-height: 0;
    padding-block: var(--wadi-sp-3);
    transition: padding var(--wadi-dur) var(--wadi-ease);
  }
  .wadi-header__brand   { grid-row: 1; grid-column: 2; }
  .wadi-header__actions { grid-row: 1; grid-column: 3; }
  .wadi-header__nav {
    display: block;
    grid-row: 2; grid-column: 1 / -1; justify-self: center;
  }
  /* Scrolled state tightens the padding rather than the height — with two
     rows there is no single min-height left to animate. */
  .wadi-header.is-stuck .wadi-header__bar { padding-block: var(--wadi-sp-2); }
}

.wadi-nav__list {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(var(--wadi-sp-3), 1.4vw, var(--wadi-sp-5));
  list-style: none; margin: 0; padding: 0;
}
.wadi-nav__item { margin: 0; }
.wadi-nav__link {
  position: relative; display: inline-flex; align-items: center;
  min-height: var(--wadi-tap-min);
  padding-block: var(--wadi-sp-2);
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-sm); font-weight: 600;
  color: var(--wadi-ink); text-decoration: none;
  white-space: nowrap;
  transition: color var(--wadi-dur) var(--wadi-ease);
}
.wadi-nav__link:hover { color: var(--wadi-olive); }
/* The underline grows from the inline start, which in RTL is the right edge —
   using a logical property means this reads correctly in both directions. */
.wadi-nav__link::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 10px;
  width: 0; height: 2px; background: var(--wadi-gold);
  transition: width var(--wadi-dur) var(--wadi-ease);
}
.wadi-nav__link:hover::after { width: 100%; }
.wadi-nav__link[aria-current="page"] { color: var(--wadi-olive); }
.wadi-nav__link[aria-current="page"]::after { width: 100%; background: var(--wadi-olive); }

/* ==========================  SEARCH PANEL  ========================== */
.wadi-search {
  position: sticky; top: 0; z-index: calc(var(--wadi-z-header) + 1);
  background: var(--wadi-cream-50);
  border-bottom: 1px solid var(--wadi-line);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--wadi-dur) var(--wadi-ease), transform var(--wadi-dur) var(--wadi-ease);
}
.wadi-search.is-open { opacity: 1; transform: none; }
.wadi-search__form {
  display: flex; align-items: center; gap: var(--wadi-sp-2);
  padding-block: var(--wadi-sp-4);
}
.wadi-search__form > .wadi-ico { color: var(--wadi-ink-muted); flex: 0 0 auto; }
.wadi-search__field {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  color: var(--wadi-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--wadi-line);
}
.wadi-search__field:focus { outline: 0; border-bottom-color: var(--wadi-olive); }

/* ==========================  OVERLAY  ========================== */
.wadi-overlay {
  position: fixed; inset: 0; z-index: calc(var(--wadi-z-drawer) - 1);
  background: rgba(10, 36, 22, .48);
  opacity: 0; transition: opacity var(--wadi-dur) var(--wadi-ease);
}
.wadi-overlay.is-open { opacity: 1; }
body.wadi-locked { overflow: hidden; }

/* ==========================  DRAWER  ========================== */
/* The drawer belongs on the side the burger is on — the START of the inline
   axis, which is the RIGHT in Arabic. It was anchored to inset-inline-END,
   which in RTL resolves to the LEFT: the button sat top-right and the menu
   flew in from the opposite corner.
   inset-inline-start puts it back under the button in RTL and keeps it under
   the button in LTR, so the pairing survives either direction. */
.wadi-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(86vw, 340px);
  display: flex; flex-direction: column;
  background: var(--wadi-surface);
  z-index: var(--wadi-z-drawer);
  overflow-y: auto; overscroll-behavior: contain;
  /* The shadow falls across the page, so it points AWAY from the drawer's
     edge — leftwards in RTL, rightwards in LTR. Hard-coding it meant the
     shadow was being cast off the side of the screen. */
  box-shadow: calc(8px * var(--wadi-flip, 1)) 0 32px rgba(14, 75, 46, .16);
  /* translate, not translateX — the logical inline axis flips under RTL and
     a hard-coded X value sends the drawer off the wrong edge. */
  transform: translate(calc(-100% * var(--wadi-flip, 1)), 0);
  transition: transform 220ms var(--wadi-ease);
}
[dir="rtl"] .wadi-drawer { --wadi-flip: -1; }
.wadi-drawer.is-open { transform: translate(0, 0); }

.wadi-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wadi-sp-3);
  padding: var(--wadi-sp-4);
  border-bottom: 1px solid var(--wadi-line);
}
.wadi-drawer__head .wadi-brand__logo { height: 34px; }

.wadi-drawer__nav { flex: 1 1 auto; padding-block: var(--wadi-sp-2); }
.wadi-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.wadi-drawer__nav li { margin: 0; }
.wadi-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wadi-sp-3);
  min-height: 52px;
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
  font-size: var(--wadi-fs-base); font-weight: 600;
  color: var(--wadi-ink); text-decoration: none;
  border-bottom: 1px solid var(--wadi-line-soft, rgba(14, 75, 46, .07));
}
.wadi-drawer__nav a:hover,
.wadi-drawer__nav a[aria-current="page"] {
  background: var(--wadi-cream-50); color: var(--wadi-ink);
}
/* The current page gets a gold edge rather than green text, matching the
   marker on the bottom bar. */
.wadi-drawer__nav a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--wadi-gold);
}
.wadi-drawer__count {
  font-family: var(--wadi-font-latin);
  font-size: var(--wadi-fs-xs); font-weight: 700;
  color: var(--wadi-ink);
  background: var(--wadi-cream-200);
  min-width: 24px; padding: 2px 8px; border-radius: var(--wadi-r-pill);
  text-align: center; direction: ltr; unicode-bidi: isolate;
}
.wadi-drawer__foot {
  padding: var(--wadi-sp-4);
  border-top: 1px solid var(--wadi-line);
  background: var(--wadi-cream-50);
}
.wadi-drawer__note {
  display: flex; align-items: center; gap: var(--wadi-sp-2);
  margin: 0; font-size: var(--wadi-fs-sm); color: var(--wadi-ink); font-weight: 600;
}
.wadi-drawer__note .wadi-ico { color: var(--wadi-gold); }

/* ==========================  MOBILE BOTTOM NAV  ========================== */
.wadi-mobilenav {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--wadi-z-header);
  display: flex;
  background: var(--wadi-surface);
  border-top: 1px solid var(--wadi-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(14, 75, 46, .07);

  /* The nav's height is DECLARED here, not left to its contents, so that the
     body's clearance and the sticky purchase bar can be derived from the same
     token instead of each guessing. border-box keeps the 1px border inside the
     token; the safe area is added on top, because it is real estate below the
     nav rather than part of it. */
  box-sizing: border-box;
  min-height: calc(var(--wadi-mobilenav-h) + env(safe-area-inset-bottom));
}
.wadi-mobilenav__item {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 58px; padding: var(--wadi-sp-2) var(--wadi-sp-1);
  font-size: var(--wadi-fs-xs); font-weight: 600;
  color: var(--wadi-ink-soft); text-decoration: none;
}
/* Ink, not olive: a weight-and-darkness change reads as "selected" without
   borrowing the link colour, and it keeps the 12px label legible — which a
   gold label at 2:1 on white would not be. */
.wadi-mobilenav__item[aria-current="page"] { color: var(--wadi-ink); font-weight: 700; }
/* The marker bar is the one place gold can go: it is a rule, not text. */
.wadi-mobilenav__item[aria-current="page"]::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 22%;
  height: 2px; background: var(--wadi-gold); border-radius: 0 0 2px 2px;
}
.wadi-mobilenav__item .wadi-cart-count { inset-block-start: 6px; inset-inline-end: 22%; }

@media (min-width: 1024px) { .wadi-mobilenav { display: none; } }
/* The one place the page clears the bottom nav. 10-visual.css §12.9 used to
   carry a second, conflicting figure for this; both now read the token. */
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(var(--wadi-mobilenav-h) + env(safe-area-inset-bottom)); }
}

/* ==========================  BLOCKSY PAGE HERO  ==========================
   Blocksy's page-title hero was set, in theme options, to a stock olive/lemon
   graphic under a 27% orange wash. It is neither brand photography nor brand
   colour. Until real photography exists for it, the band becomes a quiet cream
   field with the gold hairline the rest of the system uses.
   The theme option itself is left untouched, so restoring it is one click. */
.hero-section[data-type="type-2"],
.hero-section[data-type="type-1"] {
  background-image: none !important;
  background-color: var(--wadi-cream-50) !important;
  border-bottom: 1px solid var(--wadi-line);
  padding-block: var(--wadi-sp-5) var(--wadi-sp-4);
  text-align: center;
}
/* Blocksy's theme options put min-height:250px and 50px block padding on the
   page-title container. On a 390px phone that is 331px — two fifths of the
   screen — spent on the single word "المتجر" before one product is visible.
   The band owns its own spacing instead. */
.hero-section[data-type="type-2"] > [class*="ct-container"],
.hero-section[data-type="type-1"] > [class*="ct-container"],
.hero-section .entry-header {
  min-height: 0 !important;
  padding-block: 0 !important;
}
@media (min-width: 1024px) {
  .hero-section[data-type="type-2"],
  .hero-section[data-type="type-1"] { padding-block: var(--wadi-sp-6) var(--wadi-sp-5); }
}
.hero-section .page-title,
.hero-section .entry-title {
  font-family: var(--wadi-font-ar-display) !important;
  color: var(--wadi-olive) !important;
  margin: 0;
}
/* Gold rule under the page title — the same 56px mark used on the homepage. */
.hero-section .entry-header::after {
  content: ""; display: block; width: 56px; height: 2px;
  background: var(--wadi-gold); margin: var(--wadi-sp-4) auto 0;
}

/* ==========================  REDUCED MOTION  ========================== */
@media (prefers-reduced-motion: reduce) {
  .wadi-drawer, .wadi-search, .wadi-overlay, .wadi-header,
  .wadi-header__bar, .wadi-brand__logo, .wadi-nav__link::after {
    transition: none !important;
  }
}

/* ==========================================================================
   SALE BADGE — see inc/shop.php for why this is a saving, not a "SALE" sticker
   ========================================================================== */
.woocommerce span.onsale,
.wadi-save {
  position: absolute; z-index: 2;
  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 10px !important;
  background: var(--wadi-olive) !important;
  color: var(--wadi-gold) !important;
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-xs) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  border-radius: var(--wadi-r-pill) !important;
  box-shadow: none !important;
}
.wadi-save bdi { direction: ltr; unicode-bidi: isolate; font-family: var(--wadi-font-latin); }

/* The drawer's logo is a link home, so it needs the same 44px floor as every
   other target in the panel. */
.wadi-drawer__head .wadi-brand { min-height: var(--wadi-tap-min); align-items: center; }

/* ==========================================================================
   NAV ROBUSTNESS
   At 1024px the seven nav items measured 701px inside 701px of available
   space — an exact fit with zero slack. One longer category name, or a fourth
   category (the harissa packshot suggests new products are coming), and the
   row would have broken the header layout.

   Two guards, in order of preference:
   1. Tighten spacing and size in the 1024–1199 band so there is real slack.
   2. If it ever still overflows, the list scrolls horizontally instead of
      pushing the cart and search icons off the bar. Scrollbar hidden — this is
      a safety net, not a designed interaction.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .wadi-nav__list { gap: var(--wadi-sp-3); }
  .wadi-nav__link { font-size: var(--wadi-fs-xs); }
  .wadi-header__bar { gap: var(--wadi-sp-3); }
}
@media (min-width: 1024px) {
  .wadi-header__nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .wadi-header__nav::-webkit-scrollbar { display: none; }
}

/* ==========================  WHATSAPP CONTROL  ==========================
   Header rules removed with the header control itself; WhatsApp now lives
   only in the mobile bottom nav. While no number has been confirmed that
   item renders as a <span>, not an <a> — it looks finished without being
   clickable to a destination nobody has agreed on yet. */
.wadi-mobilenav__item.is-pending { cursor: default; opacity: .45; }
/* WhatsApp's own mark, in WhatsApp's own green.
   "الأيقونة الأصلية" is the whole point of using a brand's logo — the colour is
   half of what makes it recognisable at 21px, and the contact channel is the
   one item in this row that should be easy to pick out. It is solid rather
   than stroked, so it needs no stroke allowance and sits slightly smaller than
   the line icons to carry the same visual weight. */
.wadi-mobilenav__item .wadi-ico--whatsapp {
  width: 21px; height: 21px;
  color: #25D366;
}
/* The label stays in the row's own voice; only the mark is WhatsApp's. */
.wadi-mobilenav__item[aria-current="page"] .wadi-ico--whatsapp { color: #25D366; }

/* ---- A pulse on the WhatsApp tab ----                            2026-10-10
   On a cash-on-delivery store the conversation IS the order channel, and this
   tab is the way into it. A ring that breathes outward once every couple of
   seconds marks it as the live thing in the row without shouting.

   A RING, not a filled disc: a disc would wash over the mark it is meant to
   draw attention to. The ring expands past the glyph and fades, so the glyph
   itself is never touched.

   Nearly half the cycle is still — 58% out, then a rest. That pause is what
   makes it read as a heartbeat rather than a throb, which is what «بالص خفيف»
   asks for; a continuous pulse on a fixed bar becomes irritating within a
   minute of reading a page.

   Targeted on the href. Every WhatsApp destination on this site is a wa.me
   link and nothing else is one, so the selector cannot drift out of step with
   a class the PHP would otherwise have to carry.

   No z-index: -1. The bar paints its own background, and a negative index on a
   child of a positioned element disappears behind it — the ring would simply
   never be seen. The mark is lifted above the ring instead. */
.wadi-mobilenav__item[href*="wa.me"] .wadi-ico--whatsapp {
  position: relative;
  z-index: 1;
}
.wadi-mobilenav__item[href*="wa.me"]::after {
  content: "";
  position: absolute;
  /* Centred on the 21px mark, not on the whole tab — the label sits below it
     and would drag the centre down. Measured: the mark's centre sits 19px below
     the tab's top edge, so a 30px ring starts at 19 - 15. The first guess put
     it at 10px and the ring hung 6px low under the glyph. */
  inset-block-start: 4px;
  inset-inline-start: 50%;
  width: 30px; height: 30px;
  margin-inline-start: -15px;
  border: 2px solid #25D366;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: wadi-wa-pulse 2600ms cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes wadi-wa-pulse {
  0%   { transform: scale(.55); opacity: 0; }
  12%  { opacity: .55; }
  58%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* It has done its job the moment it is touched. */
.wadi-mobilenav__item[href*="wa.me"]:hover::after,
.wadi-mobilenav__item[href*="wa.me"]:focus-visible::after,
.wadi-mobilenav__item[href*="wa.me"]:active::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-mobilenav__item[href*="wa.me"]::after { animation: none; }
}

/* ---- The header does not animate on arrival ----
   See wadi-ui.js: the shrink-on-stick decision comes from an
   IntersectionObserver, which cannot report until after the first paint. Until
   the page says it has settled, these simply have no transition to play, so
   the header draws once at the right size instead of twitching into it. */
html:not(.wadi-ready) .wadi-header__bar,
html:not(.wadi-ready) .wadi-brand__logo,
html:not(.wadi-ready) .wadi-header {
  transition: none !important;
}

/* ==========================================================================
   CART BADGE — it answers when something lands in it          2026-10-12

   The number simply blinked into existence, so on a phone the only proof an
   add-to-cart worked was noticing a digit had changed in the corner.

   It now plays ONCE, when the count GOES UP. Not a loop: a badge that
   pulses forever is the thing that looks cheap, and after two seconds it is
   nagging rather than confirming. Scale and a soft ring, ~450ms, settling on
   a slight overshoot — the same shape of motion a native app uses.
   ========================================================================== */
@keyframes wadi-cart-bump {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(.92);  }
  100% { transform: scale(1);    }
}
/* 1.75, not 2.1: this sits inside a badge that is itself scaling to 1.45
   at the same moment, and the two transforms multiply. */
@keyframes wadi-cart-ring {
  0%   { opacity: .7; transform: scale(1);    }
  100% { opacity: 0;  transform: scale(1.75); }
}

.wadi-cart-count.is-bumped {
  animation: wadi-cart-bump .45s cubic-bezier(.34, 1.56, .64, 1);
}
/* The ring is a pseudo-element so it expands past the badge without
   resizing it or pushing the icon around.

   HOLLOW, not filled. An absolutely-positioned pseudo paints above its
   parent's inline content, so a filled disc would wipe out the digit it
   is meant to be drawing attention to — and pushing it behind with
   z-index:-1 only hides it under the badge's own amber background. An
   outline has no middle to get in the way. */
.wadi-cart-count::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--wadi-amber);
  opacity: 0;
  pointer-events: none;
}
.wadi-cart-count.is-bumped::after {
  animation: wadi-cart-ring .55s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-cart-count.is-bumped,
  .wadi-cart-count.is-bumped::after { animation: none; }
}
/* ==========================================================================
   CART BADGE — a standing heartbeat while the cart holds something  2026-10-12

   The one-shot bump on add stays; this is the quieter signal underneath it,
   running the whole time there is anything to check out. It is what reminds
   somebody three screens down the shop that they already have five items
   waiting.

   DELIBERATELY SLOW AND SHALLOW: 2.6s, and the ring only reaches 1.9x at a
   quarter opacity. A fast or high-contrast loop in the corner of the screen
   is the thing that reads as cheap, and it is on every page, permanently —
   it has to survive being looked at for an hour.

   `.is-empty` already hides the badge at zero, so nothing pulses over an
   empty cart.
   ========================================================================== */
@keyframes wadi-cart-heartbeat {
  0%, 70%, 100% { transform: scale(1); }
  82%           { transform: scale(1.12); }
}
@keyframes wadi-cart-halo {
  0%   { opacity: .4; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.9); }
  100% { opacity: 0;  transform: scale(1.9); }
}

.wadi-cart-count:not(.is-empty) {
  animation: wadi-cart-heartbeat 2.6s ease-in-out infinite;
}
.wadi-cart-count:not(.is-empty)::after {
  animation: wadi-cart-halo 2.6s ease-out infinite;
}

/* The add-to-cart bump takes over for its half second, then the heartbeat
   resumes — the two must not run on the same element at once. */
.wadi-cart-count.is-bumped {
  animation: wadi-cart-bump .45s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.wadi-cart-count.is-bumped::after {
  animation: wadi-cart-ring .55s ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-cart-count:not(.is-empty),
  .wadi-cart-count:not(.is-empty)::after { animation: none !important; }
}
/* ==========================================================================
   ANNOUNCEMENT BAR — beige, olive, deep gold                 2026-10-12
   ========================================================================== */
.wadi-announce__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* THE REASON THE MARKS FAILED BEFORE.
   wadi_icon() draws at stroke-width 1.6 on a 24-unit viewBox, so at 16px the
   line lands at about 1.07 device pixels — under a whole pixel once the
   browser rounds it, which is why the shapes looked broken and cheap. Drawn
   at 18px and weighted up here, they read as solid marks. */
.wadi-announce .wadi-ico {
  stroke-width: 2.1;
  flex: 0 0 auto;
  opacity: .9;
}

/* The offer sits in the SAME gold as the tagline now — the bar reads as one
   line rather than two colours competing. It keeps the heavier weight so
   it is still the thing the eye lands on.

   (While the bar was beige this had to be a dark bronze at #806318,
   because the brand gold was unreadable on cream. On olive that
   workaround is unnecessary.) */
.wadi-announce__tag--offer {
  font-weight: 700;
}
.wadi-announce__tag--offer .wadi-ico { opacity: 1; }

/* A quiet dot between the messages, not a rule. */
.wadi-announce__sep {
  display: inline-block;
  width: 4px; height: 4px;
  margin-inline: var(--wadi-sp-5);
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  vertical-align: middle;
}