/*
Theme Name: 3orod
Theme URI: https://3orod.net/
Description: Parent theme for 3orod.net — Arabic supermarket offers & coupons. RTL-first, built with CSS logical properties so the same styles work LTR (e.g. French Morocco). Country-agnostic: country specifics live in child themes (3orod-sa, 3orod-ma). No build step.
Version: 0.1.0
Author: 3orod.net
Text Domain: 3orod
Requires at least: 6.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   3orod.net — Stylesheet
   Pure CSS. Tokens mirror DESIGN.md. Uses logical properties so the same
   sheet works for RTL (Arabic) and LTR (e.g. French Morocco) with no fork.
   When ported to WordPress, this file becomes the theme stylesheet largely
   unchanged — :root tokens stay, selectors map to theme markup.
   ========================================================================== */

/* ---------- Design Tokens (from DESIGN.md) ---------- */
:root {
  /* Color — surfaces */
  --color-background: #f9f9f9;        /* Mist — global canvas */
  --color-surface: #f9f9f9;
  --color-surface-card: #ffffff;      /* Snow — clean shelf for cards */
  --color-surface-container-low: #f3f3f4;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;

  /* Color — text */
  --color-on-background: #1a1c1c;     /* Ink Black */
  --color-on-surface: #1a1c1c;
  --color-secondary: #5f5e5e;
  --color-muted: #6b6b6b;

  /* Color — brand */
  --color-primary: #8f000d;           /* Firebrick */
  --color-primary-container: #b22222;
  --color-on-primary: #ffffff;

  /* Color — lines & accents */
  --color-outline-variant: #e2beba;
  --color-hairline: rgba(26, 26, 26, 0.08);

  /* Color — footer */
  --color-footer-bg: #1a1a1a;
  --color-footer-text: #a3a3a3;

  /* Color — coupon / badge tints */
  --color-badge-bg: #fef3e2;
  --color-badge-text: #b45309;

  /* Typography */
  --font-ui: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-price: "Plus Jakarta Sans", "Cairo", sans-serif;

  /* Radius (component-level, per DESIGN.md "Shapes") */
  --radius-sm: 4px;    /* tags, checkboxes */
  --radius-md: 6px;    /* buttons, inputs */
  --radius-lg: 10px;   /* cards, media, modals */
  --radius-full: 9999px;

  /* Spacing — 4px grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --gutter: 16px;
  --margin-desktop: 48px;

  /* Layout */
  --container-max: 1280px;

  /* Elevation (DESIGN.md ambient shadows) */
  --shadow-card: 0 4px 12px rgba(26, 26, 26, 0.05);
  --shadow-card-hover: 0 8px 20px rgba(26, 26, 26, 0.1);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-on-background);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

/* ---------- Helpers ---------- */
.container {
  width: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  inline-size: 24px;
  block-size: 24px;
  display: block;
}
.icon--sm {
  inline-size: 16px;
  block-size: 16px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-md);
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: inset-block-start var(--dur) var(--ease);
}
.skip-link:focus {
  inset-block-start: var(--space-md);
}

/* ---------- 1. Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Compact bar — the static fallback for browsers without scroll-driven
     animations (e.g. current iOS Safari) and the end state of the shrink. */
  --header-bar-h: 72px;
  --header-logo-h: 55px;
}

/* Shrink-on-scroll — PURE CSS, no JS. The header starts tall with a big logo and
   collapses to the compact bar over the first 90px of scroll. The size is a
   smooth function of scroll offset (not a class toggled at a threshold), so
   there's no flicker/feedback loop. Browsers without `scroll()` timelines just
   keep the compact fallback above. The vars are @property-registered so they
   interpolate (plain custom properties would jump at 50%). */
@property --header-bar-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 72px;
}
@property --header-logo-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 55px;
}
@supports (animation-timeline: scroll()) {
  /* The header resize must not nudge the scroll position, or the snap would
     fight the browser's scroll-anchoring and flicker. Disabling anchoring on the
     root scroller keeps the two-step snap rock-steady. */
  html {
    overflow-anchor: none;
  }
  .site-header {
    --header-bar-h: 100px;
    --header-logo-h: 88px; /* almost fills the 100px bar */
    animation: threeorod-header-shrink linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90px;
  }
  /* Two discrete steps (cleaner than a gradual shrink): hold the tall bar, then
     snap to compact at ~35% of the range (~31px scrolled). */
  @keyframes threeorod-header-shrink {
    0%,
    35% {
      --header-bar-h: 100px;
      --header-logo-h: 88px;
    }
    35%,
    100% {
      --header-bar-h: 72px;
      --header-logo-h: 55px;
    }
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-bar-h);
}

.site-logo {
  font-family: var(--font-price);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--color-on-primary);
}
.site-logo--dark {
  color: var(--color-primary);
}
/* Custom logo (Customizer → Logo): height tracks the header var, width
   auto-scales to keep the aspect ratio. Use a white/transparent logo — the
   header bar is firebrick. */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.custom-logo {
  block-size: var(--header-logo-h);
  inline-size: auto;
  max-inline-size: 300px;
  object-fit: contain;
  display: block;
}

/* Mobile: gentler heights so the tall state isn't overbearing on a phone. */
@media (max-width: 767px) {
  .site-header { /* fallback (no scroll-timeline) */
    --header-bar-h: 58px;
    --header-logo-h: 40px;
  }
  @supports (animation-timeline: scroll()) {
    .site-header {
      --header-bar-h: 80px;
      --header-logo-h: 68px; /* almost fills the 80px mobile bar */
      animation-name: threeorod-header-shrink-m;
    }
    @keyframes threeorod-header-shrink-m {
      0%,
      35% {
        --header-bar-h: 80px;
        --header-logo-h: 68px;
      }
      35%,
      100% {
        --header-bar-h: 58px;
        --header-logo-h: 40px;
      }
    }
  }
}

/* Reduced motion: no scroll-linked resize — pin the compact bar. */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    animation: none;
    --header-bar-h: 72px;
    --header-logo-h: 55px;
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Country switcher ---------- */
.country-switcher {
  position: relative;
}
.country-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  block-size: 40px;
  padding-inline: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.country-switcher__toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.country-switcher__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.country-switcher__flag {
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex: none;
}
.country-switcher__name {
  white-space: nowrap;
}
.country-switcher__caret {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.country-switcher.is-open .country-switcher__caret {
  transform: rotate(180deg);
}

/* Dropdown panel (desktop): absolute, anchored to the toggle's inline-end. */
.country-switcher__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-inline-size: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}
.country-switcher.is-open .country-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.country-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-on-surface);
  text-decoration: none;
}
.country-switcher__item:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.country-switcher__item.is-current {
  font-weight: 700;
}
.country-switcher__item.is-current::after {
  content: "✓";
  margin-inline-start: auto;
  color: var(--color-primary);
}

/* Drawer context: dark-on-light toggle, static expanding list (no overlay). */
.country-switcher--drawer {
  inline-size: 100%;
}
.country-switcher--drawer .country-switcher__toggle {
  inline-size: 100%;
  color: var(--color-on-surface);
  background: var(--color-background);
  border-color: var(--color-hairline);
}
.country-switcher--drawer .country-switcher__caret {
  margin-inline-start: auto;
}
.country-switcher--drawer .country-switcher__menu {
  position: static;
  min-inline-size: 0;
  margin-block-start: var(--space-xs);
  padding-inline: 0;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: none;
}
.country-switcher--drawer.is-open .country-switcher__menu {
  display: block;
}

/* Hamburger only on small screens */
.nav-toggle {
  display: none;
}

/* ---------- 2. Primary Nav (inline in the red header bar) ---------- */
.main-nav {
  min-inline-size: 0; /* allow the flex item to shrink instead of overflowing */
  position: relative; /* containing block for the mega panel — sits OUTSIDE the
                         overflow-x scroll list below, so the panel isn't clipped */
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav__list::-webkit-scrollbar {
  display: none;
}

.main-nav__link {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur) var(--ease);
}
.main-nav__link:hover {
  color: #fff;
}
.main-nav__link.is-active {
  color: #fff;
}

/* ---------- Mobile Drawer ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(26, 26, 26, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer-backdrop.is-open {
  opacity: 1;
}

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0; /* slides from the right for RTL, auto-flips for LTR */
  z-index: 60;
  inline-size: min(320px, 85vw);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card-hover);
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}
/* In LTR the drawer sits on the left, so flip the hidden transform */
html[dir="ltr"] .drawer {
  transform: translateX(-100%);
}
.drawer.is-open {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
}
.drawer__close {
  color: var(--color-on-surface);
}
.drawer__close:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

.drawer__country {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-md);
}
.drawer__country-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
}
.drawer__country-select {
  font: inherit;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-on-surface);
}

.drawer__list {
  display: flex;
  flex-direction: column;
}
.drawer__list a {
  display: block;
  padding: var(--space-md) var(--space-sm);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-on-surface);
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.drawer__list a:hover {
  background: var(--color-surface-container-low);
}
.drawer__list a.is-active {
  color: var(--color-primary);
}

body.no-scroll {
  overflow: hidden;
}

/* The [hidden] attribute must win over the display rules above */
.drawer[hidden],
.drawer-backdrop[hidden] {
  display: none;
}

/* ---------- Main-menu mega panels (supermarkets + coupons) ----------
   Desktop: hover/focus panel anchored to .main-nav (escapes the nav list's
   overflow clipping). Drawer: a tap-to-expand accordion of the same markup.
   `.has-mega` is auto-added to any item carrying a mega-* panel class
   (mega-supermarkets/appliances/mobile/electronics or mega-coupons). */

/* The flagged menu item gets a caret to signal the panel — points DOWN by
   default, flips UP when the panel opens (like the country switcher). Physical
   borders (not logical) so the chevron stays vertical under RTL. */
.main-nav__list .has-mega > .main-nav__link::after {
  content: "";
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: 6px;
  vertical-align: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* down */
  opacity: 0.85;
  transition: transform var(--dur) var(--ease);
}
.main-nav .has-mega:hover > .main-nav__link::after,
.main-nav .has-mega:focus-within > .main-nav__link::after,
.main-nav .has-mega.is-open > .main-nav__link::after {
  transform: rotate(225deg); /* up */
}

/* ----- Desktop panel ----- */
.store-mega--desktop {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inline-size: min(760px, 92vw);
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(26, 26, 26, 0.18);
  padding: var(--space-lg);
  z-index: 60;
  /* hidden until hover/focus */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0.18s var(--ease);
}
.main-nav .has-mega:hover > .store-mega--desktop,
.main-nav .has-mega:focus-within > .store-mega--desktop,
.main-nav .has-mega.is-open > .store-mega--desktop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.store-mega__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  margin-block-end: var(--space-sm);
}
.store-mega__featured {
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
}
.store-mega__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
}
.store-mega__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xs) var(--space-sm);
}

/* One store cell */
.store-mega__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 8px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  min-block-size: 44px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.store-mega__item:hover {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
}
/* Featured cells: stacked, boxed, logo bigger */
.store-mega__item.is-featured {
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}
.store-mega__logo {
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.store-mega__item.is-featured .store-mega__logo {
  inline-size: 46px;
  block-size: 46px;
}
.store-mega__logo--initial {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
}
.store-mega__item.is-featured .store-mega__logo--initial {
  font-size: 18px;
}
.store-mega__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

/* ----- Coupon-category row (coupons mega only) ----- */
.store-mega__cats {
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
}
.store-mega__catrow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}
.store-mega__item--cat {
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.store-mega__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  /* duotone palette derived from the brand colour (matches the homepage tiles) */
  --icon-fg: var(--color-primary);
  --icon-tint: #eccac6;
  --icon-tint: color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.store-mega__item--cat:hover .store-mega__icon {
  background: #fdecec;
  --icon-tint: color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.store-mega__icon svg {
  inline-size: 24px;
  block-size: 24px;
  display: block;
}
.store-mega__icon .duo-tint {
  fill: var(--icon-tint);
}
.store-mega__icon .duo-fg {
  fill: var(--icon-fg);
}
.store-mega__icon .duo-stroke {
  fill: none;
  stroke: var(--icon-fg);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Drawer accordion (mobile) ----- */
.store-mega--drawer {
  display: none;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-sm);
}
.drawer__list .has-mega.is-open .store-mega--drawer {
  display: block;
}
.store-mega--drawer .store-mega__row,
.store-mega--drawer .store-mega__grid {
  grid-template-columns: repeat(2, 1fr);
}
.store-mega--drawer .store-mega__catrow {
  grid-template-columns: repeat(3, 1fr);
}
.store-mega--drawer .store-mega__icon {
  inline-size: 34px;
  block-size: 34px;
}
.store-mega--drawer .store-mega__featured {
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-sm);
}
.store-mega--drawer .store-mega__item.is-featured {
  flex-direction: row;
  text-align: start;
  border: 0;
  padding: 6px 8px;
}
.store-mega--drawer .store-mega__item.is-featured .store-mega__logo {
  inline-size: 30px;
  block-size: 30px;
}
.store-mega--drawer .store-mega__name {
  color: var(--color-on-surface);
}
/* Caret on the drawer parent, rotates when open */
.drawer__list .has-mega > a {
  position: relative;
}
.drawer__list .has-mega > a::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* down */
  transition: transform var(--dur) var(--ease);
}
.drawer__list .has-mega.is-open > a::after {
  transform: rotate(225deg); /* up */
}

/* ---------- Ad slots ---------- */
.ad-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: var(--space-lg);
}
.ad-wrap--center {
  margin-block: var(--space-xl);
}
.ad-label {
  font-size: 11px;
  color: var(--color-secondary);
  margin-block-end: var(--space-xs);
}
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-high);
  /* border: 1px solid var(--color-outline-variant); */
  border-radius: var(--radius-md);
  color: var(--color-secondary);
  font-size: 13px;
  /* fixed dimensions reserve space => no layout shift (good CWV + AdSense) */
}
.ad-slot--leaderboard {
  inline-size: 100%;
  max-inline-size: 728px;
  block-size: 90px;
}
.ad-slot--rectangle {
  inline-size: 300px;
  block-size: 250px;
}
.ad-slot--large {
  inline-size: 336px;
  block-size: 280px;
}

/* ---------- Main / page intro ---------- */
.site-main {
  padding-block-end: var(--margin-desktop);
}

.block {
  margin-block-start: var(--space-xl);
}

.page-intro {
  margin-block-start: var(--space-lg);
}
.breadcrumb {
  font-size: 14px;
  color: var(--color-secondary);
  margin-block-end: var(--space-md);
}
.breadcrumb a:hover {
  color: var(--color-primary);
}
.breadcrumb__sep {
  margin-inline: var(--space-xs);
}
.page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-block-end: var(--space-sm);
}
.page-lead {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 26px;
  max-inline-size: 70ch;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  color: var(--color-primary-container);
  margin-block-end: var(--space-lg);
}

/* ---------- Grids ---------- */
.grid {
  display: grid;
  gap: var(--gutter);
}
.grid--2 {
  grid-template-columns: 1fr;
}
.grid--3 {
  grid-template-columns: 1fr;
}
/* Offers grid: A4-portrait cards, so 2-up even on phones (a full-width
   single column would be ~1.4× the screen tall). 2 → 3 → 4 across. */
.grid--4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Offers vertical strip (homepage sections) ----------
   Mobile (majority traffic): a horizontal scroll-snap SLIDER so the four offer
   sections don't make the homepage endlessly long. ≥640px it becomes the usual
   offers grid (2→3→4 across, matching .grid--4). Same markup, CSS-only switch. */
.offers-strip {
  position: relative; /* anchor for the mobile .swipe-hint */
}
.offers-strip__track {
  --visible: 2.15; /* ~2 portrait cards + a peek to signal "swipe" */
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* room so card shadows aren't clipped by the scroll box */
  padding-block: 6px;
  margin-block: -6px;
  scrollbar-width: none; /* Firefox */
}
.offers-strip__track::-webkit-scrollbar {
  display: none; /* WebKit */
}
.offers-strip__track > .offer-card {
  flex: 0 0
    calc((100% - (var(--visible) - 1) * var(--gutter)) / var(--visible));
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .offers-strip__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 0;
    margin-block: 0;
  }
}
@media (min-width: 900px) {
  .offers-strip__track {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Offer card ---------- */
.offer-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.offer-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.offer-card__link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}
.offer-card__media {
  position: relative; /* anchor for the "منتهي" expired badge */
  aspect-ratio: 210 / 297; /* A4 portrait — matches flyer feature images, no crop */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-container-low);
  margin-block-end: var(--space-sm);
}
.offer-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Expired offer (within the grace window) — badge + dimmed image. */
.offer-card__badge {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 1;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.offer-card--expired .offer-card__media img {
  opacity: 0.65;
}
.offer-card__meta--expired {
  color: var(--color-primary);
  font-weight: 600;
}
.offer-card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary-container);
  margin-block-end: var(--space-xs);
}
.offer-card__meta {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-secondary);
  font-size: 14px;
  padding-block-start: var(--space-sm);
}

/* ---------- Single offer ---------- */
.offer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
  color: var(--color-secondary);
  font-size: 14px;
}
.offer__store,
.offer__valid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.offer__store {
  font-weight: 700;
  color: var(--color-primary);
}
.offer__store:hover {
  color: var(--color-primary-container);
}

.offer-expired {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}
.offer-expired a {
  color: var(--color-primary);
  text-decoration: underline;
}

.offer__hero {
  margin-block: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-container-low);
  box-shadow: var(--shadow-card);
}
.offer__hero img {
  inline-size: 100%;
  block-size: auto;
}

.offer__content {
  font-size: 16px;
  line-height: 28px;
}
.offer__content p {
  margin-block: var(--space-md);
}
.offer__content a {
  color: var(--color-primary);
  text-decoration: underline;
}
/* Catalogue scans inside the body — full width, rounded, spaced. */
.offer__content img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-md);
}

/* Centered emphasis line used inside offer bodies (e.g. "تصفّح بالأسفل ↓"). */
.offer__content .offer-note {
  text-align: center;
  font-weight: 700;
  color: var(--color-primary);
  margin-block: var(--space-lg) var(--space-sm);
}

/* "Follow us" row — inline-SVG social buttons (no Font Awesome, no requests). */
.offer-follow {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-sm) var(--space-xl);
}
.offer-follow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full);
  color: #fff;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.offer-follow a:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
.offer-follow svg {
  inline-size: 20px;
  block-size: 20px;
  fill: currentColor;
}
.offer-follow__fb {
  background: #1877f2;
}
.offer-follow__x {
  background: #000;
}
.offer-follow__tg {
  background: #229ed9;
}
.offer-follow__wa {
  background: #25d366;
}

/* Catalogue page links (wp_link_pages) */
.offer-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-lg);
  font-size: 14px;
}
.offer-pages__label {
  color: var(--color-secondary);
  font-weight: 600;
}
.offer-pages a .offer-pages__num,
.offer-pages > .offer-pages__num {
  display: inline-grid;
  place-items: center;
  min-inline-size: 36px;
  min-block-size: 36px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  font-weight: 700;
}
.offer-pages a:hover .offer-pages__num {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* current page (wp_link_pages outputs it as a bare span, not a link) */
.offer-pages > .offer-pages__num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- Coupon card ---------- */
.coupon-card {
  position: relative;
  background: var(--color-surface-card);
  /* border: 1px solid var(--color-outline-variant); */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.coupon-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.badge {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 2;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.coupon-card__media {
  aspect-ratio: 2 / 1;     /* matches 400×200 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-container);
}
.coupon-card__media-link {
  display: block;
  block-size: 100%;
}
.coupon-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.coupon-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-primary-container);
}
.coupon-card__title a {
  color: inherit;
}
.coupon-card__title a:hover {
  color: var(--color-primary);
}
.coupon-code {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  inline-size: 100%;
  background: #fff;
  border: 1px dashed var(--color-primary-container);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-primary-container);
  transition: background var(--dur) var(--ease);
}
.coupon-code:hover {
  background: #fff5f5;
}
.coupon-code__value {
  font-family: var(--font-price);
  font-weight: 800;
  letter-spacing: 0.15em;
  font-size: 16px;
}
.coupon-code__icon .icon {
  inline-size: 18px;
  block-size: 18px;
}
.coupon-code.is-copied {
  border-style: solid;
  border-color: #1b7f3b;
  color: #1b7f3b;
  background: #f0fbf3;
}

/* ---------- Section head (title + see-all + slider controls) ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-lg);
}
.section-head .section-title {
  margin-block-end: 0;
}
.section-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.see-all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.see-all:hover {
  color: var(--color-primary-container);
}
/* Chevron points toward the inline-start (auto-flips with [dir]) */
.see-all .icon--sm {
  inline-size: 18px;
  block-size: 18px;
}

/* ---------- Slider arrows (overlaid on the sides) ---------- */
.coupon-slider {
  position: relative;
}
.slider-arrow {
  position: absolute;
  inset-block-start: calc(50% - 6px); /* offset for the track's -6px margin */
  transform: translateY(-50%);
  z-index: 3;
  inline-size: 40px;
  block-size: 40px;
  display: none; /* shown ≥560px; mobile uses swipe */
  place-items: center;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-on-surface);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.16);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
@media (min-width: 560px) {
  .slider-arrow {
    display: grid;
  }
}
/* prev → start side (right in RTL, left in LTR); next → end side */
.slider-arrow--prev {
  inset-inline-start: -8px;
}
.slider-arrow--next {
  inset-inline-end: -8px;
}
.slider-arrow .icon {
  inline-size: 22px;
  block-size: 22px;
}
.slider-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-50%) scale(1.06);
}
.slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.1);
  pointer-events: none;
}
/* Chevrons are authored for LTR; flip under RTL so each points the right way. */
[dir="rtl"] .slider-arrow .icon {
  transform: scaleX(-1);
}

/* ---------- Mobile swipe hint (coupon slider + category strip) ----------
   A small chevron that nudges toward the scroll direction to signal "swipe for
   more". Shown only where touch-scrolling replaces the arrows (< 560px).
   Decorative + pointer-events:none so it never blocks the swipe; script.js
   removes it after the first scroll or when there's nothing to scroll. */
.swipe-hint {
  display: none;
}
@media (max-width: 559.98px) {
  .swipe-hint {
    --swipe-dir: -1; /* RTL: more content lies toward the left (inline-end) */
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6px;
    z-index: 3;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    margin-block-start: -17px; /* pull up by half its height to center */
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    color: var(--color-primary);
    box-shadow: 0 3px 12px rgba(26, 26, 26, 0.22);
    pointer-events: none; /* let swipes pass straight through */
    opacity: 0.95;
    animation: swipe-nudge 1.4s ease-in-out infinite;
  }
  [dir="ltr"] .swipe-hint {
    --swipe-dir: 1; /* LTR: more content toward the right */
  }
  .swipe-hint .icon {
    inline-size: 20px;
    block-size: 20px;
  }
  /* chevron authored pointing right (›); flip under RTL so it points the swipe way */
  [dir="rtl"] .swipe-hint .icon {
    transform: scaleX(-1);
  }
  .swipe-hint.is-hidden {
    display: none;
  }
}
@keyframes swipe-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(var(--swipe-dir) * 6px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint {
    animation: none;
  }
}

/* ---------- Coupon slider ---------- */
.coupon-track {
  /* visible cards per view — overridden per breakpoint */
  --visible: 2.15;
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* room so card shadows aren't clipped by the scroll box */
  padding-block: 6px;
  margin-block: -6px;
  scrollbar-width: none; /* Firefox */
}
.coupon-track::-webkit-scrollbar {
  display: none; /* WebKit */
}
.coupon-track:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.coupon-slide {
  flex: 0 0
    calc((100% - (var(--visible) - 1) * var(--gutter)) / var(--visible));
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .coupon-track {
    --visible: 3;
  }
}
@media (min-width: 1024px) {
  .coupon-track {
    --visible: 5;
  }
}

/* Compact coupon card — only inside the slider, so the base .coupon-card stays
   reusable at full size on a dedicated coupons page later. */
.coupon-track .coupon-card {
  block-size: 100%;
  padding: var(--space-sm);
  gap: var(--space-xs);
}
.coupon-track .badge {
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  font-size: 10px;
  padding: 3px 6px;
}
.coupon-track .coupon-card__media {
  aspect-ratio: 2 / 1;     /* inherits the ratio, no fixed height needed */
}

.coupon-track .coupon-card__title {
  font-size: 15px;
  line-height: 22px;
  /* clamp to two lines so cards stay even height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coupon-track .coupon-code {
  padding: 6px var(--space-sm);
  gap: var(--space-xs);
}
.coupon-track .coupon-code__value {
  font-size: 13px;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coupon-track .coupon-code__icon .icon {
  inline-size: 15px;
  block-size: 15px;
  flex-shrink: 0;
}

/* ---------- Coupon archive: filter bar ---------- */
.coupon-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.coupon-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 180px;
  min-inline-size: 0;
}
.coupon-filters__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.coupon-filters select {
  inline-size: 100%;
  font: inherit;
  color: var(--color-on-surface);
  cursor: pointer;
  /* Custom chevron so we control its spacing (the native arrow can't be padded).
     RTL-first: arrow sits on the left; :dir(ltr) flips it right for Morocco. */
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5e5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left var(--space-md) center;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding-block: 10px;
  padding-inline: var(--space-md);
  padding-inline-end: calc(var(--space-md) + 24px); /* room for the chevron */
}
.coupon-filters select:dir(ltr) {
  background-position: right var(--space-md) center;
}
.coupon-filters select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.coupon-filters__submit {
  flex: 0 0 auto;
  padding: 10px var(--space-lg);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.coupon-filters__submit:hover {
  background: var(--color-primary-container);
}
.coupon-filters__reset {
  flex: 0 0 auto;
  align-self: flex-end;
  padding-block: 10px;          /* match the submit button's height/baseline */
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: underline;
}
.coupon-filters__reset:hover {
  color: var(--color-primary);
}

/* ---------- Coupon archive: grid ----------
   Mirrors the slider's per-view counts (2 / 3 / 5). Cards reuse the slider's
   compact treatment so a 5-up grid stays even and tidy. */
.coupon-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .coupon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .coupon-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.coupon-grid .coupon-card {
  block-size: 100%;
  padding: var(--space-sm);
  gap: var(--space-xs);
}
.coupon-grid .coupon-card__title {
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coupon-grid .coupon-card__media {
  aspect-ratio: 2 / 1;
}
.coupon-grid .coupon-code {
  padding: 6px var(--space-sm);
  gap: var(--space-xs);
}
.coupon-grid .coupon-code__value {
  font-size: 13px;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  padding-block: var(--space-xl);
}

/* ---------- Pagination (the_posts_pagination) ---------- */
.pagination {
  margin-block-start: var(--space-xl);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  font-weight: 700;
  color: var(--color-on-surface);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination a.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ---------- Article byline ---------- */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-sm);
  font-size: 14px;
  color: var(--color-secondary);
}
.article-byline__author {
  font-weight: 600;
  color: var(--color-on-surface);
}
.article-byline__sep {
  color: var(--color-outline-variant);
}

/* ---------- Article card ---------- */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.article-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.article-card__link {
  display: block;
  color: inherit;
}
.article-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-container-low);
}
.article-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.article-card__title {
  padding: var(--space-sm) var(--space-md) 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-container);
}
.article-card__link:hover .article-card__title {
  color: var(--color-primary);
}
.article-card .article-byline {
  margin-block: var(--space-xs) 0;
  padding-inline: var(--space-md);
}
.article-card__excerpt {
  padding: var(--space-xs) var(--space-md) var(--space-md);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-secondary);
}

/* ---------- Article featured (archive hero) ---------- */
.article-featured {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-block-end: var(--space-xl);
}
@media (min-width: 768px) {
  .article-featured {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}
.article-featured__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-container-low);
}
.article-featured__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.article-featured__body {
  padding: var(--space-lg);
}
.article-featured__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary-container);
}
.article-featured__title a {
  color: inherit;
}
.article-featured__title a:hover {
  color: var(--color-primary);
}
.article-featured__excerpt {
  margin-block: var(--space-sm);
  font-size: 15px;
  line-height: 26px;
  color: var(--color-secondary);
}
.article-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--color-primary);
}
.article-featured__more:hover {
  text-decoration: underline;
}

/* ---------- Author box (single article) ---------- */
.author-box {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-block: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.author-box__avatar {
  flex: 0 0 auto;
}
.author-box__img {
  display: block;
  border-radius: var(--radius-full);
}
.author-box__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.author-box__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-secondary);
}
.author-box__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.author-box__bio {
  margin-block-start: var(--space-xs);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-secondary);
}

/* ---------- Coupon category tiles ----------
   Mobile/tablet: horizontal scroll-snap strip (RTL-aware via logical props).
   Desktop (>=900px): a single row of ten. */
.cat-strip {
  position: relative; /* anchor for the mobile .swipe-hint */
}
.cat-grid {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* keep snapped tiles clear of the leading edge (logical = RTL-correct) */
  scroll-padding-inline-start: var(--space-md);
  /* vertical breathing room so card shadow/hover-lift isn't clipped by overflow */
  padding-block: 2px var(--space-xs);
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
}
.cat-grid::-webkit-scrollbar {
  display: none;                    /* WebKit/Blink */
}
@media (min-width: 900px) {
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-sm);
    overflow: visible;             /* drop the scroller on desktop */
  }
}
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  /* strip mode: fixed-width tiles so long Arabic labels wrap consistently */
  flex: 0 0 auto;
  inline-size: 92px;
  scroll-snap-align: start;
  padding: var(--space-md) var(--space-sm);
  min-block-size: 48px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* Desktop: let each tile fill its 1fr grid column instead of the fixed strip
   width. Placed AFTER the base .cat-tile rule so it wins on equal specificity. */
@media (min-width: 900px) {
  .cat-tile {
    inline-size: auto;
  }
}
.cat-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-outline-variant);
}
.cat-tile__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  /* Duotone palette — derived from the brand colour so it stays themeable.
     Fallback hex first for engines without color-mix(). */
  --icon-fg: var(--color-primary);
  --icon-tint: #eccac6;
  --icon-tint: color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.cat-tile:hover .cat-tile__icon {
  background: #fdecec;
  --icon-tint: #e6b8b3;
  --icon-tint: color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.cat-tile__icon svg {
  inline-size: 28px;
  block-size: 28px;
  display: block;
}
.cat-tile__icon .duo-tint {
  fill: var(--icon-tint);
}
.cat-tile__icon .duo-fg {
  fill: var(--icon-fg);
}
.cat-tile__icon .duo-stroke {
  fill: none;
  stroke: var(--icon-fg);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-tile__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.2;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-footer-bg);
  color: #fff;
  margin-block-start: var(--space-xl);
  padding-block-start: 48px;
  border-block-start: 3px solid var(--color-primary); /* firebrick brand accent */
}
/* One-line footer: brand · nav · social, then a centred bottom bar. */
.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.site-footer__logo {
  block-size: 88px;
  inline-size: auto;
  max-inline-size: 220px;
  object-fit: contain;
}
.site-footer__tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-footer-text);
  max-inline-size: 340px;
}
.site-footer__nav .site-footer__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-footer-text);
}
.site-footer__nav .site-footer__list a:hover {
  color: #fff;
}
.site-footer__social {
  display: flex;
  gap: var(--space-md);
}
/* Mobile: stack the row and centre everything. */
@media (max-width: 767.98px) {
  .site-footer__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }
  .site-footer__brand {
    align-items: center;
  }
  .site-footer__tagline {
    max-inline-size: 360px;
  }
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background var(--dur) var(--ease);
}
.social-btn:hover {
  background: var(--color-primary);
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  padding-block: var(--space-lg);
  font-size: 14px;
  color: var(--color-footer-text);
}
.site-footer__legal {
  display: flex;
  gap: var(--space-md);
}
.site-footer__legal a:hover {
  color: #fff;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: 90vw;
  z-index: 80;
  background: var(--color-on-background);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 14px;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive: show hamburger, hide inline nav ---------- */
@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
  }
  .main-nav {
    display: none;
  }
  /* Country switcher lives in the drawer on mobile; hide the header instance. */
  .country-switcher--desktop {
    display: none;
  }
  .site-logo {
    font-size: 22px;
  }
  .section-title {
    font-size: 22px;
    line-height: 30px;
  }
}

/* ---------- 404 ---------- */
.error-404 {
  text-align: center;
}
.error-404__code {
  font-size: clamp(64px, 18vw, 140px);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 var(--space-xs);
  color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.error-404__search {
  max-inline-size: 480px;
  margin: var(--space-md) auto 0;
}
.error-404__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.error-404__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.error-404__link:hover {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Single coupon — redemption card ---------- */
.coupon-redeem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  inline-size: 100%;
  max-inline-size: 400px;
  margin-block: var(--space-lg);
  padding: var(--space-lg);
  text-align: center;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-inline: auto;   /* ← add this line to center the card */
}
.coupon-redeem__media {
  inline-size: 100%;           /* fill the card width */
  aspect-ratio: 2 / 1;         /* matches 400×200 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-container-low);
}
.coupon-redeem__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
/* visible code box on the single page — larger than the slider version */
.coupon-redeem .coupon-code {
  inline-size: 100%;
  margin-block-start: 0;
}
.coupon-redeem .coupon-code__value {
  font-size: 20px;
  letter-spacing: 0.18em;
}
.coupon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.coupon-cta:hover {
  background: var(--color-primary-container);
  transform: translateY(-1px);
  color: var(--color-on-primary);
}
/* arrow points the right way under RTL */
[dir="rtl"] .coupon-cta .icon {
  transform: scaleX(-1);
}

/* ===== Store hub hero (logo + name + description) ===== */
.store-hero {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}
.store-hero__logo {
  flex-shrink: 0;
  inline-size: 96px;
  block-size: 96px;
  display: grid;
  place-items: center;
  padding: 10px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.store-hero__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.store-hero__initial {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 36px;
}
.store-hero__text {
  min-inline-size: 0;
}
.store-hero__text .page-title {
  margin-block: 0 6px;
}
.store-hero__text .page-lead {
  margin-block: 0;
}
@media (max-width: 560px) {
  /* Stack + center: logo above a centered title + description */
  .store-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }
  .store-hero__logo {
    inline-size: 72px;
    block-size: 72px;
    padding: 8px;
  }
  .store-hero__initial {
    font-size: 28px;
  }
}