/* ============================================================================
   AlMasafa — "لوحة القياس" / Instrument Panel  (bold storefront direction)
   ----------------------------------------------------------------------------
   A bold, commercial visual layer for the PUBLIC storefront homepage. Loaded
   AFTER styles.css, so it reuses every AA-verified token from the design-system
   pass (--navy, --gold/--gold-text, --sp-*, --fs-*, --e-*) and only re-shapes
   the high-impact surfaces: hero, trust strip, category tiles, section rhythm,
   and the product card.

   Signature — grounded in what the store actually sells (Fluke meters, network
   testers, precision instruments): a "readout" treatment. Fixed-width tabular
   numerals for prices and specs, a faint blueprint measurement-grid, and a gold
   corner-tick that reads like a crosshair. Boldness is spent in ONE place (the
   readout + the card lift); everything around it stays disciplined.

   Scope guard: only the storefront. Admin (admin-styles.css) is untouched.
   No business logic, no markup contracts changed — styling only.
   ============================================================================ */

:root {
  /* Fixed-width face for the readout signature. System stack — no new network
     dependency, CSP-safe, instant. The instrument feel comes from tabular
     numerals + treatment, not from one specific face.

     "Cairo" sits immediately before the generic `monospace` on purpose. Font
     matching is PER CHARACTER: Latin digits resolve on ui-monospace/SF Mono
     and never reach Cairo, while Arabic characters — the د.ع that every
     formatPrice() emits, and any Arabic caught inside a readout — find no
     glyph in ANY of the Latin-only mono faces and fall through to Cairo
     instead of the OS last-resort Arabic font. Mono for Arabic text is wrong;
     this ordering is what keeps it from happening. */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               Menlo, Consolas, "Liberation Mono", "Cairo", monospace;

  /* Gold that sits on NAVY only — the navy backdrop makes the brighter value
     safe (7.9:1 there) and gives the hero its premium glint. Never on white. */
  --gold-hi:   #F5B33A;

  /* Blueprint grid lines. Deliberately faint — a texture, not a pattern. */
  --grid-navy: rgba(255, 255, 255, 0.05);
  --grid-ink:  rgba(30, 47, 111, 0.045);

  /* Hero rhythm */
  --hero-min: clamp(30rem, 62vh, 40rem);
}

/* A reusable measurement-grid background (32px cells). */
.bg-grid-navy {
  background-image:
    linear-gradient(var(--grid-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ────────────────────────────────────────────────────────────────────────
   1. HERO — the thesis. Big Cairo headline, mono readout kicker, gold CTA,
      the product on a lit bench over a blueprint grid.
   ──────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(46,76,168,0.35) 0%, transparent 55%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Blueprint grid + a gold horizon line, drawn behind the content. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(115% 90% at 70% 10%, #000 40%, transparent 92%);
          mask-image: radial-gradient(115% 90% at 70% 10%, #000 40%, transparent 92%);
}
/* A gold "measurement tick" bracket in the leading-top corner. */
.hero::after {
  content: "";
  position: absolute; inset-block-start: 26px; inset-inline-start: 26px; z-index: -1;
  width: 54px; height: 54px;
  border-inline-start: 2px solid var(--gold-hi);
  border-block-start: 2px solid var(--gold-hi);
  opacity: 0.55;
}

.hero .hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  min-height: var(--hero-min);
  padding-block: clamp(var(--sp-10), 6vh, var(--sp-13));
}

.hero__copy { max-width: 34rem; }

/* Readout kicker — mono, uppercase, letter-spaced, with a live gold tick. */
.hero__copy .eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid rgba(245,179,58,0.35);
  border-radius: var(--r-pill);
  background: rgba(245,179,58,0.06);
  margin-block-end: var(--sp-7);
}
[lang="ar"] .hero__copy .eyebrow { letter-spacing: 0.06em; }
.hero__copy .eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(245,179,58,0.25);
}

.hero__copy h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--track-display);
  color: #fff;
  margin-block-end: var(--sp-6);
  text-wrap: balance;
}
[lang="ar"] .hero__copy h1 { letter-spacing: 0; line-height: 1.2; }

.hero__copy .hero__lead {
  font-size: clamp(var(--fs-md), 1.6vw, var(--fs-xl));
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.72);
  margin-block-end: var(--sp-9);
}

/* Gold CTA — the single loudest moment. Navy-deep text on gold = 8.6:1. */
.hero__copy .button {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-md); font-weight: 800;
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -8px rgba(245,179,58,0.55);
  border: 0;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hero__copy .button::after {
  content: "→"; font-family: var(--font-mono); font-weight: 700;
}
[lang="ar"] .hero__copy .button::after { content: "←"; }
.hero__copy .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(245,179,58,0.6);
  filter: brightness(1.04);
}

/* Product visual — floated on a lit platform. */
.hero__visual {
  position: relative;
  display: grid; place-items: center;
  min-height: 18rem;
}
.hero__visual::before {
  content: "";
  position: absolute; inset-block-end: 8%; inset-inline: 12%;
  height: 42%;
  background: radial-gradient(60% 80% at 50% 50%, rgba(245,179,58,0.22), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}
.hero__visual img {
  max-width: 100%; max-height: 30rem; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 45px rgba(0,0,0,0.45));
}

/* Slider navigation: the side arrows overlapped the headline on the 2-col
   hero, so they move to a tidy pill at the block-end beside the dots. The
   pager dots remain the primary (keyboard-reachable) control. */
.hero-slider__arrow {
  inset-block: auto var(--sp-7);
  inset-inline-start: auto;
  inset-inline-end: var(--sp-9);
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff; backdrop-filter: blur(4px);
}
.hero-slider__arrow--prev { inset-inline-end: calc(var(--sp-9) + 46px); }
.hero-slider__arrow:hover { background: rgba(245,179,58,0.95); color: var(--navy-deep); border-color: transparent; }
.hero-slider__dot { background: rgba(255,255,255,0.28); }
.hero-slider__dot.is-active { background: var(--gold-hi); width: 26px; border-radius: var(--r-pill); }

/* ────────────────────────────────────────────────────────────────────────
   2. TRUST STRIP — reframed as an instrument readout row.
   ──────────────────────────────────────────────────────────────────────── */
.trust-bar {
  background: var(--navy-deep);
  border-block: 1px solid rgba(255,255,255,0.06);
  margin-block-start: 0;
}
.trust-bar__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}
.trust-bar__item {
  display: flex; align-items: center; gap: var(--sp-5);
  color: #fff;
  padding-inline: var(--sp-6);
  border-inline-start: 1px solid rgba(255,255,255,0.08);
}
.trust-bar__item:first-child { border-inline-start: 0; }
/* The bar flipped from white to navy, so every rule styles.css wrote for the
   LIGHT version has to be answered explicitly — inheriting `color:#fff` from
   the parent is not enough when a more specific rule already names a colour.
   Without these three the strong label rendered navy-on-navy at 1.11:1, the
   hover turned the cell into a light block (~1.2:1), and the icon kept its
   pale chip so gold-on-near-white measured 1.68:1. */
.trust-bar__item > svg {
  color: var(--gold-hi);            /* 7.86:1 on navy-deep */
  background: rgba(255,255,255,0.06);
  flex: none;
}
.trust-bar__item:hover { background: rgba(255,255,255,0.04); }
.trust-bar__item:hover > svg {
  background: rgba(245,179,58,0.16);
  color: var(--gold-hi);
  transform: none;                  /* the light-bar rotate read as a glitch here */
}
.trust-bar__item strong {
  display: block; font-size: var(--fs-sm); font-weight: 700;
  color: #fff;                      /* 18.78:1 on navy-deep */
}
.trust-bar__item span {
  display: block; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55); margin-block-start: 2px;
}
[lang="ar"] .trust-bar__item span { font-family: inherit; letter-spacing: 0; }

/* ────────────────────────────────────────────────────────────────────────
   3. SECTION RHYTHM — mono kicker that reads like a measurement label.
   ──────────────────────────────────────────────────────────────────────── */
.section-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}
[lang="ar"] .section-kicker { letter-spacing: 0.04em; font-family: inherit; }
.section-kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px;
}
.section-heading--center .section-kicker { justify-content: center; }
.section-heading h2 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--navy);
}
[lang="ar"] .section-heading h2 { letter-spacing: 0; }

/* ────────────────────────────────────────────────────────────────────────
   4. PRODUCT CARD — the signature. Elevated, gold corner-tick, mono readout
      meta + tabular gold price, decisive hover lift.
   ──────────────────────────────────────────────────────────────────────── */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-raised);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Gold crosshair tick in the leading-top corner — the instrument motif. */
.product-card::before {
  content: "";
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  width: 14px; height: 14px; z-index: 2; pointer-events: none;
  border-inline-start: 2px solid var(--gold);
  border-block-start: 2px solid var(--gold);
  opacity: 0; transition: opacity .2s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-overlay);
  border-color: var(--gold);
}
.product-card:hover::before { opacity: 1; }

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: stretch;
  padding: 0;                 /* full-bleed — the image IS the frame */
  overflow: hidden;
  background:
    linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--surface);
  border: 0; cursor: pointer; width: 100%;
}
/* Product imagery — edge-to-edge WITHOUT destroying the product.
   `!important` is required, not sloppiness: styles.css's "POLISH LAYER v6"
   (~3993) sets `padding: !important` and `object-fit: !important` on exactly
   these two selectors.

   Why not `cover`: measured on the live catalogue, the photos range from 0.363
   to 0.938 aspect — they are not normalised — so filling a square frame by
   cropping discarded 40% of the average image and 64% of the worst. On a tools
   catalogue that means the customer cannot tell what the product is, which
   costs more than a tidy edge is worth.

   So: `contain` (zero crop, whole product) with padding REMOVED, which is what
   actually caused the dead space — the image now grows until it touches the
   frame on its constraining axis instead of floating inside a 20px inset. The
   frame is 4/5 rather than 1/1 because the photos skew portrait, which shrinks
   the leftover band further; what remains shows the blueprint grid, so it reads
   as a measurement bench the product sits on rather than as a gap. */
.product-card__media,
.featured-card__img {
  padding: 0 !important;
  /* 3/2 because the catalogue itself is 3/2: measured across the live grid,
     13 of 15 photos are exactly 1.500 (1536x1024). Matching the frame to the
     source is what removes the leftover band WITHOUT cropping — the image fills
     essentially the whole frame under `contain`. The two odd sizes (1.25, 0.907)
     land inside the same frame with a small band that shows the blueprint grid. */
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
}
.product-card__media img,
.featured-card__img img {
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: contain !important; object-position: center !important;
  transition: transform .3s ease;
}
.product-card:hover .product-card__media img,
.featured-card:hover .featured-card__img img { transform: scale(1.045); filter: none; }

.product-card__body { padding: var(--sp-6) var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.product-card__meta,
.featured-card__cat {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);                /* 4.73:1 on the pill's white fill */
}
[lang="ar"] .product-card__meta,
[lang="ar"] .featured-card__cat { font-family: inherit; letter-spacing: 0; }
.product-card__body h3 { margin: 0; }
.product-card__body h3 .link-button {
  font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug);
  color: var(--navy); text-align: start;
}
.product-card__desc {
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
  color: var(--text-mid);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.product-card__footer {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-block-start: 1px solid var(--navy-softer);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.product-card__price-row { display: flex; align-items: center; justify-content: space-between; }
.product-card__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl); font-weight: 800;
  color: var(--gold-text);
  /* 0, not the -0.01em this rule used to carry: section 6 states the standing
     rule (a readout tracks at 0, never negative, because it can end in the
     Arabic د.ع) and this was the one readout breaking it. It also measured
     -0.21px against the identical price on `.featured-card` beside it. */
  letter-spacing: 0;
}
.product-card__fav { flex: none; }

.product-card__add {
  width: 100%;
  font-size: var(--fs-sm); font-weight: 800;
  color: #fff;
  background: var(--navy);
  border: 0; border-radius: var(--r-md);
  padding-block: var(--sp-6);
  transition: background .18s ease, transform .12s ease;
}
.product-card__add:hover,
.featured-card__btn:hover { background: var(--navy-deep); }
.product-card__add:active,
.featured-card__btn:active { transform: scale(0.985); }

/* ────────────────────────────────────────────────────────────────────────
   4b. FEATURED / DEALS CARD — the same species as .product-card.

   `.featured-card` and `.product-card` sit on the same homepage and stand for
   the same thing (a product you can open and buy), so they take the same five
   moves. Before this block the deals grid had none of them: its price was
   --red in Cairo while the grid below it read gold and tabular, and its image
   sat on flat white while the product card sat on the blueprint grid. Two
   unrelated-looking cards for one concept reads as a bug, not a hierarchy.

   Every declaration here answers a rule styles.css already wrote for the old
   look — same specificity, later sheet — so nothing relies on !important.
   ──────────────────────────────────────────────────────────────────────── */
.featured-card {
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--e-raised);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* MOVE 4 — the decisive lift, plus the gold hairline. */
.featured-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-overlay);
  border-color: var(--gold);
}
/* MOVE 2 — the crosshair tick. It goes in the TRAILING-top corner here, not
   the leading one: `.featured-card__badge` already owns the leading corner
   (top:12px / inset-inline-start:12px) and a tick under a gold pill is just a
   smudge. Same motif, same 14px, mirrored to the free corner. */
.featured-card::before {
  content: "";
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: 14px; height: 14px; z-index: 3; pointer-events: none;
  border-inline-end: 2px solid var(--gold);
  border-block-start: 2px solid var(--gold);
  opacity: 0; transition: opacity .2s ease;
}
.featured-card:hover::before { opacity: 1; }

/* MOVE 3 — the blueprint grid behind the product. styles.css:3994 flattened
   this canvas to plain --surface; the grid is painted underneath the same
   white so the `padding: !important` and the contain-fit image are untouched. */
.featured-card__img {
  background:
    linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--surface);
  padding: 0;                 /* full-bleed, same as the product card */
}
.featured-card__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* MOVE 1 — the readout. Face + tabular figures come from the shared block in
   section 6; the colour is set here because it depends on the fill underneath
   (--gold-text is 4.52:1 on the card's white body, 4.29:1 on any tint). */
.featured-card__price strong {
  color: var(--gold-text);
  font-size: var(--fs-xl);
  font-weight: 800;
}
.featured-card__old { color: var(--muted); }   /* 4.73:1 on white */

/* MOVE 5 — one gold CTA per screen, and it is the hero's. Both product
   buttons stay navy so nothing on the grid competes with it. */
.featured-card__btn { background: var(--navy); }

/* ────────────────────────────────────────────────────────────────────────
   5. CATEGORY TILES — bold, liftable.
   ──────────────────────────────────────────────────────────────────────── */
.category-tile {
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--e-raised);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.category-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-overlay);
  border-color: var(--gold);
}
.category-tile span { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   6. THE READOUT — the shared numeric primitive.

   One rule, every figure the storefront shows: prices, line totals, cart
   totals, stat counters, order ids and order dates. Fixed-width face +
   tabular numerals so digits sit on a column and a changing quantity does
   not reflow the row it lives in.

   Two standing rules are encoded here rather than repeated per surface:
     · letter-spacing is 0 — never negative, because a readout can carry the
       Arabic د.ع suffix and Arabic is cursive.
     · the COLOUR is set per surface below, not here, because gold-for-text
       (--gold-text #B26205) is 4.52:1 on white but only 4.29:1 on --faint.
       A readout is only gold when it sits on a white fill.
   ════════════════════════════════════════════════════════════════════════ */
.stat-number,
.stat-card__num,
.pmc-price strong,
.pmc-price__old,
.pmc-price__discount,
.pm-suggest-card__price,
.featured-card__price strong,
.featured-card__old,
.cart-line__price span,
.cart-panel__total strong,
.cart-drawer__item-body .cart-drawer__item-price,
.checkout-form__row strong,
.shipping-card__price,
.pp-order-head strong,
.pp-order-body span,
.pp-order-body strong,
.pp-fav .price,
.footer-contact a {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ONE money figure on the storefront deliberately does NOT take the block
   above: the free-shipping banner in checkout, which is an Arabic SENTENCE
   carrying a price ("أضف 25,000 د.ع إضافية للحصول على شحن مجاني") rather than
   a bare figure. It still has to be a readout — it is a price two rows under
   the shipping figure — but the fixed-width face cannot be how it gets there.

   Measured, on the running page at 16px: Arabic LETTERS do fall through the
   --font-mono stack to Cairo exactly as the note at the top of this file
   claims (a letters-only run measures 211.62px under either stack — delta 0).
   What does NOT fall through is U+0020 and the full stop: those are common,
   not Arabic, so they resolve on ui-monospace at 9.63px against Cairo's 3.52.
   On "35,000 د.ع" that is one space and one dot and it reads as deliberate
   figure spacing. On a five-space sentence it is +30.57px of word gap through
   Arabic prose, and "Arabic always Cairo" outranks "every figure is mono".

   So this one takes the numeral half only. Cairo's digits are already uniform
   width (111111 and 000000 both measure 53.77px), so the figures still sit on
   a column and a changing remaining-amount does not reflow the sentence. The
   green hairline + --green-text are untouched: 4.53:1, certified status
   coding, and re-tinting it is how contrast gets lost. */
.checkout-form__free-banner span {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Micro-labels that sit beside a readout. Latin goes mono + tracked; Arabic
   keeps Cairo and loses the tracking (see the --font-mono note above — the
   face falls through on its own, the tracking has to be undone by hand). */
.stat-label,
.cart-line__meta,
.pmc-feature__sub {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[lang="ar"] .stat-label,
[lang="ar"] .cart-line__meta,
[lang="ar"] .pmc-feature__sub {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

/* ────────────────────────────────────────────────────────────────────────
   7. ANNOUNCEMENT BAR — the top edge of the instrument. A gold hairline
      under it reads as the first measurement rule of the page.
   ──────────────────────────────────────────────────────────────────────── */
.announcement-bar {
  border-block-end: 2px solid var(--gold);
  font-variant-numeric: tabular-nums;
}
.announcement-bar__sep { color: var(--gold-hi); font-family: var(--font-mono); }

/* ────────────────────────────────────────────────────────────────────────
   8. CATEGORY TILES + BRAND CARDS — browsable things, so they carry the
      gold corner tick. (Editorial cards below get the lift only; the tick
      is reserved for a card that stands for something you can go look at.)
   ──────────────────────────────────────────────────────────────────────── */
/* .category-tile::before is already the hover wash in styles.css, so the
   tick lands on ::after. */
.category-tile::after,
.media-card::before,
.pp-fav::before,
.stat-card::before {
  content: "";
  position: absolute;
  inset-block-start: 10px; inset-inline-start: 10px;
  width: 14px; height: 14px; z-index: 2; pointer-events: none;
  border-inline-start: 2px solid var(--gold);
  border-block-start: 2px solid var(--gold);
  opacity: 0; transition: opacity .2s ease;
}
.category-tile:hover::after,
.media-card:hover::before,
.pp-fav:hover::before,
.stat-card:hover::before { opacity: 1; }

.media-card { position: relative; }
.media-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--e-overlay);
}

/* ────────────────────────────────────────────────────────────────────────
   9. STATS BAND — four readouts on navy. --gold-hi is 9.15:1 there, so the
      figures can take the brighter gold the hero uses.
   ──────────────────────────────────────────────────────────────────────── */
.stat-number {
  color: var(--gold-hi);
  font-weight: 800;
  letter-spacing: 0;
}
.stat-label {
  color: rgba(255,255,255,0.72);
  font-size: var(--fs-2xs);
}

/* ────────────────────────────────────────────────────────────────────────
   10. EDITORIAL SURFACES — news, why, about, shipping, contact.
       These get exactly ONE of the five moves: the decisive lift. No tick,
       no gold text. They are the quiet field the product surfaces read
       against.
   ──────────────────────────────────────────────────────────────────────── */
.news-card:hover,
.why-card:hover,
.shipping-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-overlay);
}
/* The gold hairline is the second half of the lift. .why-card is the one
   exception: it already carries a colour-coded accent bar that IS its
   identity, and a gold border around a teal or purple bar is two accents
   arguing. It keeps the lift and nothing else. */
.news-card:hover,
.shipping-card:hover { border-color: var(--gold); }
.news-card__content a { font-weight: 700; }

/* about-panel: the four claim lines read as a spec sheet — hairline-ruled
   rows. The teal check marker is left exactly as it is: it is a certified
   non-text indicator and re-tinting it is how contrast gets lost. */
.about-feature + .about-feature { border-block-start: 1px solid var(--navy-softer); }
.about-panel__content h2 { letter-spacing: var(--track-display); }
[lang="ar"] .about-panel__content h2 { letter-spacing: 0; }

/* shipping: the rate is a figure, so it is a readout. It sits on --inset
   (#F8F9FB) where --gold-text is only 4.29:1 — white fill + hairline is the
   pattern this codebase already uses for exactly that problem, and it puts
   the number back on white at 4.52:1. */
.shipping-card__price {
  background: var(--surface);
  border: 1px solid var(--navy-soft);
  color: var(--gold-text);
}
.shipping-card__price strong { color: var(--gold-text); }

/* contact + newsletter forms: calm on purpose. Only the focus ring changes. */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--navy-light); }

/* ────────────────────────────────────────────────────────────────────────
   11. FOOTER — the plate the instrument is bolted to. Address lines that
       carry Latin data (mail, tel) become readouts; the Arabic address line
       stays Cairo because it is prose, not a figure.
   ──────────────────────────────────────────────────────────────────────── */
.footer-contact a { font-size: var(--fs-xs); }
.footer-grid h3::after { background: var(--gold); }
.footer-bottom { border-block-start: 1px solid rgba(255,255,255,0.10); }
/* The copyright line was rgba(255,255,255,0.45) on --navy — 4.37:1, just under
   the bar, and at 11px it gets no large-text exemption. 0.56 puts it at
   6.05:1 while staying visibly quieter than the 0.70 the footer body uses. */
.footer-bottom p {
  font-size: 0.6875rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.56);
}
[lang="ar"] .footer-bottom p { letter-spacing: 0; }

/* ════════════════════════════════════════════════════════════════════════
   12. PRODUCT MODAL — after the grid, this is where the sale is made.
       Blueprint backdrop behind the product, the price as THE readout, and
       add-to-cart as the one gold CTA of the surface. Everything else on it
       (category badge, favourite, quantity) stays navy or neutral.
   ════════════════════════════════════════════════════════════════════════ */
.pmc-hero::before {
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 28px 28px;
}
.pmc-hero {
  border-block-end: 1px solid var(--navy-softer);
}

.pmc-price strong {
  color: var(--gold-text) !important;   /* 4.52:1 on the modal's white body */
  font-weight: 800 !important;
  letter-spacing: 0;
}
.pmc-price__old { color: var(--muted); }

/* The one gold moment on this surface. navy-deep on --gold = 5.90:1, on
   --gold-hi = 10.19:1. White on gold would fail, so the label is navy. */
.pmc-cta {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  color: var(--navy-deep);
  box-shadow: 0 10px 26px -8px rgba(217,119,6,0.55);
}
.pmc-cta:hover { box-shadow: 0 16px 34px -8px rgba(217,119,6,0.6); }
.pmc-feature__sub { font-size: 0.625rem; color: var(--muted); }

/* The suggested-products carousel lives in this same dialog, a few hundred
   pixels under `.pmc-price`. It was rendering its prices as plain red Cairo
   while the price it sits beneath was a gold tabular readout — one surface,
   two treatments. It is a price, so it is a readout.

   The compound selector is deliberate: styles.css:2209 sets the colour with
   `.pm-suggest-card .pm-suggest-card__price` (0,2,0), so a bare class here
   would lose. The card's fill is --surface (styles.css:3383 overrides the
   original --surface-soft), which is what keeps --gold-text at 4.52:1 — the
   hover fill is #fff too, so the state change never drops it. */
.pm-suggest-card .pm-suggest-card__price {
  color: var(--gold-text);
  font-weight: 800;
}
/* The discount chip is the third figure in the price row. It takes the face
   and the tabular figures (section 6) but keeps its green hairline + text:
   that pairing is the certified status coding, and re-tinting it gold would
   both lose the status meaning and put gold on a chip it was never measured
   against. */

/* ════════════════════════════════════════════════════════════════════════
   13. CART PANEL / DRAWER — line prices are readouts, the total is the
       loudest readout on the page, checkout is the one gold CTA.
   ════════════════════════════════════════════════════════════════════════ */
.cart-panel__head { border-block-end: 2px solid var(--gold); }

/* The hover used to wash the row in --faint, which drops --gold-text to
   4.29:1. One clear state change instead: a gold marker on the leading edge,
   the row stays white and the readout stays certified. */
.cart-line {
  border-inline-start: 2px solid transparent;
  transition: border-color .18s ease;
}
.cart-line:hover {
  background: var(--surface);
  border-inline-start-color: var(--gold);
}
.cart-line__price span {
  color: var(--gold-text);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.cart-panel__total strong {
  color: var(--gold-text);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
}
.cart-panel__footer .button[data-cart-checkout],
.cart-panel__footer .button[data-cart-checkout]:hover {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  color: var(--navy-deep);
  font-weight: 800;
  box-shadow: 0 10px 26px -8px rgba(217,119,6,0.5);
}

/* Checkout breakdown lives inside the same panel. Rows stay navy because the
   breakdown card is --inset; only the total is lifted onto a white fill so
   it can carry the gold. */
.checkout-form__row strong { color: var(--navy); }
.checkout-form__row--total {
  background: var(--surface);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-6);
  margin-block-start: var(--sp-5);
}
.checkout-form__row--total strong {
  color: var(--gold-text);
  font-weight: 800;
}

/* Favourites drawer — same treatment, smaller. */
.cart-drawer__item {
  border-inline-start: 2px solid transparent;
  transition: border-color .18s ease;
}
.cart-drawer__item:hover {
  background: var(--surface);
  border-inline-start-color: var(--gold);
}
.cart-drawer__item-body .cart-drawer__item-price { color: var(--gold-text); }
.cart-drawer__item img {
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 16px 16px;
  background-color: var(--surface);
}

/* ────────────────────────────────────────────────────────────────────────
   14. AUTH MODAL — deliberately NOT bold. No gold, no lift, no tick. The
       only change is that the active tab's underline goes navy so the modal
       cannot be mistaken for a place where a decision is being sold.
   ──────────────────────────────────────────────────────────────────────── */
.auth-modal__inner { border-block-start: 2px solid var(--navy); }
.auth-tab.is-active,
.auth-tab.is-active::after { color: var(--navy); }
.auth-tab.is-active::after { background: var(--navy); }
.auth-label, .auth-divider span { letter-spacing: 0.06em; }
[lang="ar"] .auth-label, [lang="ar"] .auth-divider span { letter-spacing: 0; }

/* ════════════════════════════════════════════════════════════════════════
   15. PROFILE PAGE (profile.html) — the account instrument panel.
       Stat tiles, order cards and the favourites grid. The status chips are
       NOT touched: they already use the certified white-fill + hairline +
       accent-text pattern, and putting accent text back on a tint is the one
       thing that regressed contrast last time.
   ════════════════════════════════════════════════════════════════════════ */
.profile-page__hero::before {
  background-image:
    linear-gradient(var(--grid-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 90%);
}

.stat-card { position: relative; }
.stat-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--e-overlay);
}
.stat-card__num {
  color: var(--gold-text);   /* the tile is a white fill — 4.52:1 */
  font-weight: 800;
}
.stat-card__label {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
}
[lang="ar"] .stat-card__label { font-family: inherit; letter-spacing: 0; text-transform: none; }

.pp-order, .pp-fav { position: relative; }
.pp-order:hover, .pp-fav:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--e-overlay);
}
/* The order id is `#A93F1C` — a Latin run opened by a bidi-neutral `#`. In an
   RTL paragraph the neutral resolves to the paragraph direction and the hash
   lands at the wrong end ("A93F1C#"). Isolating the run fixes the reading
   order without touching the template that emits it. */
.pp-order-head strong {
  letter-spacing: 0.06em;
  direction: ltr;
  unicode-bidi: isolate;
}
.pp-order-body strong {
  color: var(--gold-text);   /* was --red; the total is a readout, not an alert */
  font-weight: 800;
}
.pp-fav img {
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: var(--surface);
}
.pp-fav .price { color: var(--gold-text); font-weight: 800; }

/* ────────────────────────────────────────────────────────────────────────
   16. DOCUMENT PAGES (support / privacy / account-deletion).
       These stay calm — that contrast is what makes the storefront read as
       deliberate. They get exactly two things: the readout face on dates and
       language micro-labels, and a gold tick on the leading end of the page
       rule. account-deletion.html additionally gets the blueprint grid on
       its hero card, which is a hero backdrop like any other.

       These three pages are deliberately standalone and carry no styles.css
       tokens, so every value below is either literal or a var() with the
       canonical literal as its fallback.
   ──────────────────────────────────────────────────────────────────────── */
.doc-page h1 { position: relative; }
.doc-page h1::after {
  content: "";
  position: absolute;
  inset-block-end: -3px; inset-inline-start: 0;
  width: 56px; height: 3px;
  background: var(--gold, #D97706);
}
.doc-page .meta { color: var(--text-mid, #525B6E); }
.doc-page .lang-switch a,
.doc-page .lang-switch button {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.doc-page .hero-card::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 90%);
}

/* ────────────────────────────────────────────────────────────────────────
   17. Motion discipline + responsive.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { max-width: none; margin-inline: auto; }
  .hero__copy .eyebrow { margin-inline: auto; }
  .hero__visual { order: -1; min-height: 14rem; }
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) 0; }
  .trust-bar__item:nth-child(odd) { border-inline-start: 0; }
  /* The stats band is four readouts; at this width they stack 2×2 and the
     figure has to stay the loudest thing in each cell. */
  .stat-number { font-size: var(--fs-2xl); }
  .cart-panel__total strong { font-size: var(--fs-xl); }
}

@media (max-width: 600px) {
  .pmc-cta { font-size: var(--fs-sm); }
  .checkout-form__row--total { padding: var(--sp-4) var(--sp-5); }
}

/* Every state change this sheet introduces is a transform or an opacity fade,
   so all of them are answerable here. The gold marker on a cart row and the
   gold hover border stay — they are colour, not motion, and removing them
   would remove the only cue a reduced-motion user gets. */
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card__media img, .category-tile,
  .featured-card, .featured-card__img img, .featured-card::before,
  .hero__copy .button, .hero-slider__arrow,
  .category-tile::after, .media-card::before, .pp-fav::before, .stat-card::before,
  .media-card, .news-card, .why-card, .shipping-card,
  .stat-card, .pp-order, .pp-fav,
  .cart-line, .cart-drawer__item, .pmc-cta { transition: none; }
  .product-card:hover, .category-tile:hover, .featured-card:hover,
  .media-card:hover, .news-card:hover, .why-card:hover, .shipping-card:hover,
  .stat-card:hover, .pp-order:hover, .pp-fav:hover { transform: none; }
  .product-card:hover .product-card__media img,
  .featured-card:hover .featured-card__img img { transform: none; }

  /* These three need the compound/pseudo-class form, not a bare `.button` or
     `.product-card`: the rules that introduce the transform are themselves
     compound (`.hero__copy .button:hover` is 0,3,0; the two :active rules are
     0,2,0), so a lower-specificity reset in this block never reaches them —
     which is exactly how `.hero__copy .button:hover` slipped through before. */
  .hero__copy .button:hover,
  .product-card__add:active,
  .featured-card__btn:active { transform: none; }
}


/* ────────────────────────────────────────────────────────────────────────
   13. Corrections — the readout is for FIGURES, not for Arabic sentences.
   ──────────────────────────────────────────────────────────────────────── */
/* The copyright line and the doc-page "last updated" line are Arabic
   SENTENCES that happen to contain a number. Arabic letters fall through the
   mono stack to Cairo, but U+0020 and the full stop are COMMON characters and
   resolve on ui-monospace — ~3x Cairo's space — so a multi-space sentence gains
   tens of px of word gap. They get the tabular figures only, no mono face. */
.footer-bottom p,
.doc-page .meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* MOVE 3 — the gold measurement kicker. styles.css scopes it as
   `.section-heading .section-kicker` (0,2,0), which outranks the bare class,
   so the kicker was still rendering navy and one of the five signature moves
   was invisible. Match the specificity. */
.section-heading .section-kicker,
.section-heading--center .section-kicker { color: var(--gold-text); }

/* MOVE 5 — one gold CTA per screen, and it is the hero's. The newsletter
   submit was a second solid-gold button on the same page; navy makes the hero
   CTA the only gold moment again. */
.newsletter__form button { background: var(--navy); color: #fff; }
.newsletter__form button:hover { background: var(--navy-deep); }

/* Arabic is cursive: no uppercasing, no tracking. Every other micro-label in
   this sheet already guards this; the hero eyebrow was the one that did not. */
[lang="ar"] .hero__copy .eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}


/* ────────────────────────────────────────────────────────────────────────
   14. BRANDS — one moving row, not a ragged grid.
   The 3-row grid left an orphan row and made the logo wall the loudest block
   on the page. A single marquee reads as "we carry these" and takes a fixed
   amount of vertical space no matter how many brands the admin adds.
   Mirrors .announcement-bar exactly: same duration curve, same :hover /
   :focus-within pause, same .is-paused hook for the WCAG 2.2.2 button.
   ──────────────────────────────────────────────────────────────────────── */
.brand-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6);
  /* Fade the two ends so logos enter and leave instead of being cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-grid.is-marquee {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--sp-7);
  animation: brand-scroll 38s linear infinite;
  will-change: transform;
}
/* The track holds the list TWICE, so translating by exactly -50% lands on the
   duplicate at the identical position and the loop has no visible seam. */
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[dir="rtl"] .brand-grid.is-marquee { animation-name: brand-scroll-rtl; }
@keyframes brand-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.brand-marquee:hover .brand-grid.is-marquee,
.brand-marquee:focus-within .brand-grid.is-marquee,
.brand-marquee.is-paused .brand-grid.is-marquee { animation-play-state: paused; }

/* One consistent tile: every logo gets the same box regardless of its own
   aspect ratio, which is what makes the row read as a single level. */
.brand-grid.is-marquee .media-card {
  flex: 0 0 auto;
  width: 168px; height: 96px;
  display: grid; place-items: center;
  padding: var(--sp-6);
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-md);
  box-shadow: var(--e-raised);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.brand-grid.is-marquee .media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-overlay);
  border-color: var(--gold);
}
.brand-grid.is-marquee .media-card img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;          /* logos must never be cropped */
  filter: none;
}

.brand-marquee .motion-toggle {
  position: absolute;
  inset-block-end: var(--sp-2); inset-inline-end: var(--sp-4);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-scroll at all — the row becomes a normal swipeable strip. */
  .brand-grid.is-marquee { animation: none; width: 100%; overflow-x: auto; }
  .brand-grid.is-marquee .media-card:hover { transform: none; }
}


/* ────────────────────────────────────────────────────────────────────────
   15. Remaining image surfaces — frame matched to the real source ratios.
   Measured on the live catalogue AFTER the CDN `resize=contain` fix, because
   before it every ratio reported was the squashed one and any frame chosen
   from those numbers would have been wrong.
   ──────────────────────────────────────────────────────────────────────── */

/* NEWS — article photos measure 1.52-1.85 (median ~1.6), but the card framed
   them at 2.72 via a fixed `height: 180px`, cropping ~40% off the top and
   bottom of every one. A ratio box instead of a fixed height also keeps the
   crop constant as the card width changes across breakpoints. */
.news-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* CATEGORIES stay 1/1 + cover: they are decorative mood shots, three of the
   seven are already exactly square, and a uniform square is what makes the
   tile grid read as a grid. Only the CDN fix was needed here. */

/* BRAND LOGOS — never crop a trademark. `contain` in a fixed tile, already set
   in section 14; restated here so the intent survives the next edit. */
.brand-grid.is-marquee .media-card img { object-fit: contain; }

/* SMALL THUMBNAILS (cart lines, favourites, suggestions) — these are
   identification aids at 56-64px, where a crop can remove the one detail that
   distinguishes two similar SKUs. Contain, on the measurement bench. */
.cart-line img,
.cart-drawer__item img,
.pm-suggest-card img {
  object-fit: contain;
  background:
    linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--surface);
}