/*
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;
  /* Kill any horizontal overflow (e.g. a responsive AdSense unit that sizes
     wider than the viewport on mobile) so the page never scrolls sideways.
     `clip` — not `hidden` — so it doesn't become a scroll container and break
     the sticky header. It also lets responsive ads measure the true viewport
     width, so they render at the correct size instead of overflowing. */
  overflow-x: clip;
}

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;
}

/* Language switcher (Polylang, e.g. /ma AR↔FR) — compact pill toggle, no
   dropdown/JS. Two plain links; the active language is the filled pill. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  block-size: 40px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 32px;
  padding-inline: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch__item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.lang-switch__item.is-current {
  background: #fff;
  color: var(--color-primary, #8f000d);
}
.lang-switch__item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Drawer: full-width row inside the mobile menu. */
.drawer__lang {
  margin-block-start: var(--space-md);
}
.drawer__lang-label {
  display: block;
  margin-block-end: var(--space-xs);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-background, #1a1c1c);
}
.lang-switch--drawer {
  display: flex;
  inline-size: 100%;
}
.lang-switch--drawer .lang-switch__item {
  flex: 1 1 0;
}

/* 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);
  overflow-y: auto; /* let the menu scroll when it's taller than the viewport */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* 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);
  /* Never let an ad wrapper exceed the column it sits in. */
  max-inline-size: 100%;
}
.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;
}

/* Live AdSense <ins> units: responsive, with a reserved min-height so the page
   doesn't shift when the ad paints (good CWV). Width fills the wrap; max keeps
   it sane on wide screens. The fixed-size .ad-slot--* boxes above are only the
   staging/local placeholders. */
.ad-unit {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: auto;
  /* Clip any ad iframe that still renders wider than its column so it can't
     push the page sideways on mobile (belt-and-suspenders with body clip). */
  overflow: hidden;
}
/* The AdSense-injected iframe must also stay within the unit box. */
.ad-unit iframe {
  max-inline-size: 100%;
}
.ad-unit--leaderboard {
  min-block-size: 90px;
  max-inline-size: 970px;
}
.ad-unit--rectangle,
.ad-unit--large {
  min-block-size: 250px;
  max-inline-size: 336px;
}
.ad-unit--large {
  min-block-size: 280px;
}
@media (max-width: 560px) {
  .ad-unit--leaderboard {
    min-block-size: 100px;
  }
}
/* In-grid in-feed ad: span the full grid row so the card rhythm isn't broken. */
.ad-wrap--cell {
  grid-column: 1 / -1;
}
.ad-unit--infeed,
.ad-unit--in_article {
  min-block-size: 120px;
}
/* Placeholder boxes for the in-feed / in-article units (staging/local). */
.ad-slot--infeed,
.ad-slot--in_article {
  inline-size: 100%;
  max-inline-size: 728px;
  block-size: 120px;
}

/* ---------- 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);
  /* A full-width in-feed ad (.ad-wrap--cell, grid-column:1/-1) can land mid-row
     when the ad position (after card 4) isn't a multiple of the current column
     count — e.g. at the 3-col breakpoint it leaves 2 empty cells before the ad.
     `dense` backfills those cells with the following cards, so no gaps at any
     breakpoint. No effect on uniform grids (only reflows around the spanning ad);
     DOM/reading order is unchanged. */
  grid-auto-flow: row dense;
}
.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 grid (homepage sections) ----------
   ~90% of traffic is mobile and users mostly browse the homepage, so the offer
   sections are a VERTICAL grid (no horizontal swipe): 2-up on phones → 3 → 4
   across, reusing .grid.grid--4 (layout lives there — no second grid system).
   Each section shows its first 12 cards; the rest come in via the per-section
   "load more" button below (.btn-load-more). The container also carries
   .offers-grid / .js-offers-grid as append hooks for the load-more JS. */

/* Per-section "load more" (§4). */
.section-more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}
.btn-load-more {
  position: relative; /* anchor for the loading spinner overlay */
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg); /* match the offer cards */
  padding: 0.7em 2em;
  min-block-size: 44px; /* comfortable tap target */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn-load-more:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn-load-more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn-load-more[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
.btn-load-more--error {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Loading state: keep the label in flow but invisible so the button width
   never changes, and overlay a pure-CSS spinner centred over it. */
.btn-load-more[aria-busy="true"] .btn-load-more__label {
  visibility: hidden;
}
.btn-load-more__spinner {
  display: none;
}
.btn-load-more[aria-busy="true"] .btn-load-more__spinner {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto; /* inset:0 + margin:auto + fixed size = perfect centre, RTL/LTR alike */
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent; /* the gap that reveals the spin */
  border-radius: 50%;
  animation: btn-load-more-spin 0.6s linear infinite;
}
@keyframes btn-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-load-more[aria-busy="true"] .btn-load-more__spinner {
    animation: none; /* static ring — still a clear "busy" cue */
  }
}

/* ---------- 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);
  /* No overflow:hidden here — the town/region picker dropdown must escape the
     card bounds on mobile. The image is clipped independently by
     .offer-card__media (its own radius + overflow:hidden, inset by the link
     padding), so the card's rounded corners don't need a card-level clip. */
  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);
}
/* Branch/scope suffix on the card title (TOWN-OFFERS-PHASE3, §B/§E) — the town's
   branches on a town page, or the store-hub scope label. Reads as secondary. */
.offer-card__scope {
  font-weight: 500;
  font-size: 0.92em;
  color: var(--color-secondary, #6a6a6a);
}
.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);
}

/* ---------- Grouped multi-region offer card ----------
   One store's regional editions in a single card + a region picker. overflow is
   visible so the picker dropdown can escape the card bounds. */
.offer-card--group {
  position: relative;
  overflow: visible;
}
/* While its picker is open, lift the whole card above the grid cards below it
   (set by initRegionPicker on the closest .offer-card) so the dropdown — which
   overflows the card downward into the next row — paints ON TOP of those cards
   instead of behind them. Sibling cards paint in DOM order otherwise, so the
   next row would clip the panel's tail. */
.offer-card.is-picker-open {
  z-index: 5;
}
.offer-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-primary-container);
  background: var(--color-surface-container-low);
}
/* The single red toggle sits top-start (the leading corner) and IS the affordance:
   "اختر المنطقة" + a caret that flips when the region list is open. */
.region-picker {
  position: absolute;
  inset-block-start: calc(var(--space-sm) + var(--space-xs));
  inset-inline-end: calc(var(--space-sm) + var(--space-xs));
  z-index: 3;
}
.region-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 11px;
  min-block-size: 32px;
  cursor: pointer;
}
.region-picker__caret {
  inline-size: 13px;
  block-size: 13px;
  transition: transform var(--dur) var(--ease);
}
.region-picker.is-open .region-picker__toggle {
  background: var(--color-primary-container);
}
.region-picker.is-open .region-picker__caret {
  transform: rotate(180deg);
}
.region-picker__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  /* Match the toggle button's width: .region-picker shrink-wraps the toggle (the
     menu is out-of-flow, so it doesn't widen the wrapper), so 100% here IS the
     button width. The panel sits directly under the button, same width — and,
     being that narrow, is always within the viewport on any screen, so it needs
     no viewport cap. A long town list scrolls inside a capped height instead of
     running down the page (mirrors the header town picker). */
  inline-size: 100%;
  max-block-size: min(60vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
}
.region-picker__menu[hidden] {
  display: none;
}
.region-picker__menu li {
  margin: 0;
}
.region-picker__menu a {
  display: flex;
  /* The menu is only as wide as the toggle button, so a region row (name + a
     nowrap dates chunk) may not fit on one line — let it wrap to a second line
     instead of overflowing. Town rows (name only) never wrap. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  text-decoration: none;
  font-size: 14px;
}
.region-picker__menu a:hover,
.region-picker__menu a:focus {
  background: var(--color-surface-container-low);
}
.region-picker__name {
  font-weight: 600;
}
.region-picker__dates {
  color: var(--color-secondary);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---------- 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);
}

/* Single-offer branch labels (TOWN-OFFERS): "متوفر في:" + the offer's covered
   branches as plain grey chips — NOT links (the "browse all branches" button
   below is the link). Sits between the store/validity meta line and the CTA. */
.offer-branches {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin-block-start: var(--space-sm);
}
.offer-branches__label {
  flex: none;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
}
.offer-branches-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-branches-tags__item {
  padding: 3px 10px;
  background: color-mix(in srgb, var(--color-on-surface) 7%, transparent);
  color: var(--color-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Store hub: neutral "store not available in your city" info notice, shown only
   on the out-of-scope fallback path above the (all-offers) grid. Info, not error. */
.store-scope-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  margin-block: 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  font-size: 14px;
}
.store-scope-notice__cta {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.store-scope-notice__cta:hover,
.store-scope-notice__cta:focus-visible {
  text-decoration: underline;
}

.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);
}
/* Editorial offer bodies (e.g. mobile-network promos) are heading + list heavy,
   not just catalogue scans, so they need a section rhythm the flyer bodies never
   did. Without these, h2/ul/li fell back to UA margins + the global list reset
   (no bullets, cramped rows, uneven gaps between sections). */
.offer__content h2,
.offer__content h3 {
  margin-block: var(--space-lg) var(--space-sm);
  line-height: 1.4;
}
.offer__content h2 {
  font-size: 22px;
}
.offer__content h3 {
  font-size: 19px;
}
.offer__content ul,
.offer__content ol {
  margin-block: var(--space-sm) var(--space-md);
  padding-inline-start: 1.6em;
}
.offer__content ul {
  list-style: disc;
}
.offer__content ol {
  list-style: decimal;
}
.offer__content li {
  margin-block: var(--space-xs);
}
.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;
  text-align: center;
  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: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  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 {
  grid-column: 2;
  text-align: center;
  font-family: var(--font-price);
  font-weight: 800;
  letter-spacing: 0.15em;
  font-size: 16px;
}
.coupon-code__icon {
  grid-column: 3;
  justify-self: end;
}
.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 reading-forward direction: left on RTL (default),
   flipped to point right on LTR (French) so "Tout voir ›" reads correctly. */
.see-all .icon--sm {
  inline-size: 18px;
  block-size: 18px;
}
:dir(ltr) .see-all .icon--sm {
  transform: scaleX(-1);
}

/* ---------- 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: center;
  text-align: center;
  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);
}

/* Share row — single offer / coupon / article (Facebook / X / WhatsApp / Telegram) */
.share {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-hairline);
}
.share__label {
  font-weight: 700;
  color: var(--color-on-background);
}
.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  color: var(--color-on-background);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.share-btn:hover,
.share-btn:focus-visible {
  color: #fff;
}
.share-btn--facebook:hover,
.share-btn--facebook:focus-visible {
  background: #1877f2;
}
.share-btn--x:hover,
.share-btn--x:focus-visible {
  background: #000;
}
.share-btn--whatsapp:hover,
.share-btn--whatsapp:focus-visible {
  background: #25d366;
}
.share-btn--telegram:hover,
.share-btn--telegram:focus-visible {
  background: #229ed9;
}
.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);
}

/* 404 launchpad — prominent search, big CTA, store shortcuts (see 404.php) */
.error-404__lead {
  max-inline-size: 640px;
  margin-inline: auto;
}
.error-404__search {
  /* Widen past the shared .error-404 rule above — the search is the hero element.
     Flows in normal document flow (.ps-results just grows below), so no shift. */
  max-inline-size: 620px;
  text-align: start;
}
.e404-actions {
  margin-block-start: var(--space-md);
  text-align: center;
}
.e404-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  min-block-size: 48px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.e404-cta:hover {
  background: var(--color-primary-container);
  border-color: var(--color-primary-container);
}
.e404-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Store shortcuts: responsive auto-fill grid of the shared .store-mega__item cells. */
.e404-stores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-xs) var(--space-sm);
}

/* ---------- 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;
  }
}

/* ---------- Store-hub footprint / town-region selector (TOWN-OFFERS-PHASE2 §D) ---------- */
.store-footprint {
  margin-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}
.store-footprint--national {
  color: var(--color-ink-soft, #555);
  font-size: 0.95rem;
}
.store-footprint__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.store-footprint__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.store-footprint__chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 999px;
  background: var(--color-snow, #fff);
  color: var(--color-ink, #1a1c1c);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.store-footprint__chip:hover,
.store-footprint__chip:focus-visible {
  border-color: var(--color-primary, #8f000d);
  background: color-mix(in srgb, var(--color-primary, #8f000d) 8%, #fff);
}
.store-footprint__chip.is-current {
  border-color: var(--color-primary, #8f000d);
  background: var(--color-primary, #8f000d);
  color: #fff;
}
/* Edition (single offer) scope line — compact, tighter top margin. */
.store-footprint--offer {
  margin-block: var(--space-sm) 0;
  font-size: 0.9rem;
}
/* §E: demote the store-hub footprint chips — the offers are the main event, the
   chips are a secondary internal-link/AEO signal. Smaller, muted, tighter. */
.store-footprint--compact {
  margin-block: var(--space-sm);
  gap: var(--space-xs);
}
.store-footprint--compact .store-footprint__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-soft, #555);
}
.store-footprint--compact .store-footprint__chip {
  padding: 2px 10px;
  font-size: 0.82rem;
}
.store-footprint--compact.store-footprint--national {
  font-size: 0.85rem;
}

/* =========================================================================
   Per-store branches page (/store-branches/{slug}/) + the entry-point CTA.
   ====================================================================== */

/* "تصفّح فروع {store}" button — store hub + single offer. */
.store-branches-cta {
  margin-block: var(--space-md) 0;
}
.store-branches-cta__link {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--color-primary, #8f000d);
  border-radius: var(--radius-md);
  color: var(--color-primary, #8f000d);
  background: var(--color-snow, #fff);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.store-branches-cta__link:hover,
.store-branches-cta__link:focus-visible {
  background: var(--color-primary, #8f000d);
  color: #fff;
}

/* Branch groups (one per town) */
.branches {
  margin-block: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.branches-group__title {
  margin: 0 0 var(--space-md);
  font-size: 1.25rem;
  font-weight: 700;
  padding-block-end: var(--space-xs);
  border-block-end: 2px solid color-mix(in srgb, var(--color-primary, #8f000d) 20%, #fff);
}
.branches-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .branches-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .branches-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.branch-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-snow, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.branch-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink, #1a1c1c);
}
.branch-card__address {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft, #555);
  line-height: 1.5;
}
.branch-card__map {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block-start: var(--space-xs);
  color: var(--color-primary, #8f000d);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.branch-card__map:hover,
.branch-card__map:focus-visible {
  text-decoration: underline;
}
.branch-card__map .icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}

.branches-back {
  margin-block: var(--space-lg);
  font-weight: 700;
}
.branches-back a {
  color: var(--color-primary, #8f000d);
  text-decoration: none;
}
.branches-back a:hover,
.branches-back a:focus-visible {
  text-decoration: underline;
}

/* Town picker (§F): the location-pin reuses .country-switcher__flag for sizing,
   but must NOT inherit the flag's circular ring/shadow — it's a line icon. */
.town-switcher__pin {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
/* The town list carries up to 50 cities — cap the dropdown height and let it
   scroll internally. `overscroll-behavior: contain` stops the wheel/touch from
   chaining to the page behind it once the list hits its top/bottom. Applies to
   both the desktop (absolute) dropdown and the drawer (static) list. */
.town-switcher .country-switcher__menu {
  max-block-size: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Towns grouped under their region. Each group is a container <li>; its header
   is either a link to the region archive (/region/<slug>/) or a plain label
   (the "مدن أخرى" fallback), with the town items nested in a reset <ul>. */
.town-switcher__group {
  margin-block-start: 4px;
  padding-block-start: 4px;
  border-block-start: 1px solid var(--color-hairline);
}
.town-switcher__towns {
  margin: 0;
  padding: 0;
  list-style: none;
}
.town-switcher__region {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
}
a.town-switcher__region:hover,
a.town-switcher__region:focus-visible {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.town-switcher__region-arrow {
  flex: none;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease);
}
a.town-switcher__region:hover .town-switcher__region-arrow,
a.town-switcher__region:focus-visible .town-switcher__region-arrow {
  transform: translateX(-2px); /* nudge toward the leading edge (RTL) */
}
/* Indent the town rows so they read as children of the region header. */
.town-switcher__towns .country-switcher__item {
  padding-inline-start: 20px;
}

/* ---------- Offer products table enhancements ----------
   The table markup + its base styles ship from the publisher as raw HTML in the
   post content (.orod-offers-acc / .orod-offers-table, green theme). These rules
   only style the JS-injected search field and sticky fold button
   (initOfferProducts in script.js), matching the table's existing green. */
.orod-offers-search {
  padding: 12px 14px;
  background: #f7faf8;
  border-block-end: 1px solid #eceff1;
}
.orod-offers-search__input {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  color: #1a1c1c;
  background: #fff;
  border: 1px solid #cfe3d6;
  border-radius: 8px;
  outline: none;
}
.orod-offers-search__input:focus {
  border-color: #0f9d58;
  box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.15);
}
.orod-offers-empty td {
  text-align: center !important;
  color: #9aa0a6;
  padding: 18px 14px;
  font-size: 14px;
}

/* Floats pinned to the bottom of the viewport (the visible part of the table)
   the whole time the table is scrolled; toggled via .is-visible from JS. */
.orod-offers-fold {
  position: fixed;
  inset-block-end: 20px;
  /* physical left + translateX so it's truly centred in both RTL and LTR
     (inset-inline-start flips sides in RTL and threw it off-centre) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #0f9d58;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 94, 32, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, background 0.15s, transform 0.15s;
}
.orod-offers-fold.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.orod-offers-fold:hover {
  background: #0b7c44;
}
.orod-offers-fold:active {
  transform: translateX(-50%) translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .orod-offers-fold {
    transition: opacity 0.18s;
  }
}

/* ==========================================================================
   Site search — header overlay + product type-ahead (.js-product-search)
   Shared by the header magnifier overlay and the [threeorod_product_search]
   shortcode (the shortcode skips the overlay chrome, just .ps-form/.ps-results).
   ========================================================================== */
.site-search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center the panel horizontally */
  justify-content: flex-start;  /* anchor it near the top */
  padding-block-start: 88px;    /* drop below the header bar */
  padding-inline: var(--space-md);
}
/* Author display:flex above overrides the UA `[hidden]{display:none}` rule
   (equal specificity, author wins), which left the overlay covering the page
   and eating clicks while "closed". Re-assert hidden explicitly. */
.site-search[hidden] {
  display: none;
}
.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 28, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-search__panel {
  position: relative;
  inline-size: min(680px, 100%);   /* a centered box, not a full-bleed cover */
  background: var(--color-surface-card);
  box-shadow: 0 8px 28px rgba(26, 26, 26, 0.18);
  border-radius: var(--radius-lg);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  padding-block: var(--space-md);
  max-block-size: calc(100dvh - 120px);
  overflow-y: auto;
}
.site-search.is-open .site-search__backdrop {
  opacity: 1;
}
.site-search.is-open .site-search__panel {
  transform: translateY(0);
  opacity: 1;
}

.site-search__inner {
  display: block;
}

/* Search input row (overlay + shortcode share .ps-form) */
.ps-form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ps-form__icon {
  display: inline-flex;
  color: var(--color-muted);
  flex: 0 0 auto;
}
.ps-form__icon .icon {
  inline-size: 22px;
  block-size: 22px;
}
.ps-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px; /* ≥16px avoids iOS zoom-on-focus */
  color: var(--color-on-surface);
  background: var(--color-surface-card);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  outline: none;
}
.ps-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(143, 0, 13, 0.12);
}
.ps-submit {
  flex: 0 0 auto;
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.ps-submit:hover {
  background: var(--color-primary-container);
}
.site-search__close {
  flex: 0 0 auto;
}

/* Results */
.ps-results {
  margin-block-start: var(--space-md);
}
.ps-status,
.ps-empty {
  margin: 0;
  padding-block: var(--space-md);
  color: var(--color-muted);
  font-size: 14px;
}
.ps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-hairline);
}
.ps-item > a {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-sm);
  padding: 12px 4px;
  text-decoration: none;
  color: var(--color-on-surface);
  border-block-end: 1px solid var(--color-hairline);
  transition: background 0.12s;
}
.ps-item > a:hover {
  background: var(--color-surface-container-low);
}
/* Per-product crop thumbnail in the live type-ahead dropdown. */
.ps-thumb {
  flex: 0 0 auto;
  align-self: center;
  inline-size: 40px;
  block-size: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-surface-container-low);
}
.ps-name {
  font-weight: 600;
}
.ps-price {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
}
.ps-old {
  margin-inline-start: 4px;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.85em;
}
.ps-meta {
  flex-basis: 100%;
  color: var(--color-muted);
  font-size: 13px;
}
.ps-all {
  display: inline-block;
  margin-block-start: var(--space-md);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.ps-all:hover {
  text-decoration: underline;
}
/* "هل تقصد …؟" — Layer-2 fuzzy suggestion line in the type-ahead dropdown. */
.ps-suggest {
  margin: 0;
  padding-block: 10px;
  color: var(--color-muted);
  font-size: 14px;
}
.ps-suggest__btn {
  margin-inline-start: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}
.ps-suggest__btn:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .ps-submit {
    padding-inline: 14px;
  }
  .site-search {
    padding-block-start: 72px;
  }
  .site-search__panel {
    max-block-size: calc(100dvh - 92px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-search__backdrop,
  .site-search__panel {
    transition: opacity 0.18s ease;
    transform: none;
  }
}

/* Search results page (search.php) */
.search-term {
  color: var(--color-primary);
}
/* "هل تقصد …؟" / "نتائج عن … — ابحث بدلاً عن …" (Layer-2 fuzzy suggestion). */
.search-suggest {
  margin-block: calc(-1 * var(--space-sm)) var(--space-md);
  color: var(--color-muted);
  font-size: 15px;
}
.search-suggest__term {
  color: var(--color-primary);
}
.search-suggest__link {
  font-weight: 700;
  color: var(--color-primary);
}
.search-suggest__exact {
  margin-inline-start: var(--space-sm);
  color: var(--color-muted);
  text-decoration: underline;
}
.section-count {
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.8em;
}
.search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-list__item {
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
}
.search-list__item > a {
  font-weight: 700;
  color: var(--color-on-surface);
  text-decoration: none;
}
.search-list__item > a:hover {
  color: var(--color-primary);
}
.search-list__excerpt {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

/* Flyer-page anchors (#offer-page-N): keep the landing spot clear of the header
   for the native jump, the in-content "jump to page" links, and the JS re-anchor. */
[id^="offer-page-"] {
  scroll-margin-top: 84px;
}

/* Re-search form on the results page (reuses .ps-form). */
.search-page-form {
  max-inline-size: 560px;
  margin-block-start: var(--space-md);
}

/* Center the title + re-search form on the results page. */
.page-intro--search .page-title {
  text-align: center;
}
.page-intro--search .search-page-form {
  margin-inline: auto;
}

/* ── Search: product results table ─────────────────────────────────────
   Spreadsheet on desktop; each row reflows into a stacked card ≤640px so
   the price columns are never pushed off-screen on mobile (data-label
   pseudo-elements carry the column names). One markup, CSS-driven. */
.ps-table-wrap {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ps-table thead th {
  text-align: start;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-muted);
  background: var(--color-surface-container-low);
  padding: 12px var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
  white-space: nowrap;
}
.ps-table td {
  padding: 12px var(--space-md);
  border-block-end: 1px solid var(--color-hairline);
  vertical-align: middle;
}
.ps-table tbody tr:last-child td {
  border-block-end: 0;
}
.ps-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.ps-table__name a {
  font-weight: 700;
  color: var(--color-on-surface);
  text-decoration: none;
}
.ps-table__name a:hover {
  color: var(--color-primary);
}
/* Per-product crop thumbnail in the name cell (search page table). */
.ps-table__namelink {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ps-table__thumb {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-surface-container-low);
}
.ps-table .num {
  font-family: var(--font-price);
  font-weight: 700;
}
.ps-table__price {
  white-space: nowrap;
}
.ps-table__price--old .num {
  color: var(--color-muted);
  font-weight: 400;
  text-decoration: line-through;
}
.ps-table__price--new .num {
  color: var(--color-primary);
  font-size: 1.05em;
}
.ps-table__cur {
  font-size: 0.8em;
  color: var(--color-muted);
}
.ps-table__store,
.ps-table__valid {
  color: var(--color-muted);
  white-space: nowrap;
}
.ps-table__store a {
  /* Grey pill button (not a dotted-underline link) — clearer tap target. */
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-hairline);
  color: var(--color-on-surface);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ps-table__store a:hover,
.ps-table__store a:focus-visible {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
  color: var(--color-primary);
  text-decoration: none;
}
.ps-table__dash {
  color: var(--color-muted);
}
.ps-table__action {
  text-align: end;
}
.ps-table__btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
}
.ps-table__btn:hover {
  background: var(--color-primary-container);
}

@media (max-width: 640px) {
  .ps-table-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .ps-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  .ps-table,
  .ps-table tbody,
  .ps-table__row,
  .ps-table td {
    display: block;
  }
  .ps-table__row {
    background: var(--color-surface-card);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
  }
  .ps-table__row td {
    padding: 4px 0;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
  }
  .ps-table__row td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted);
  }
  .ps-table td.ps-table__name {
    display: block;
    border-block-end: 1px solid var(--color-hairline);
    padding-block-end: 8px;
    margin-block-end: 4px;
  }
  .ps-table__name a {
    font-size: 16px;
  }
  .ps-table td.ps-table__action {
    display: block;
    text-align: start;
    padding-block-start: 10px;
  }
  .ps-table__btn {
    display: block;
    text-align: center;
  }
}