/* ==========================================================================
   Merchant Catalog ("Shop your favorites")
   Figma "Merchant Catalog - Ready" canvas 4374:23111 — EN 4446:53948 /
   AR 4446:53947. Exact node values noted per block. Mobile-first; the design
   frames step at 320 · 640 · 936 · 1024 · 1200 · 1500 (grid: 1 → 2 → 3 cols).
   RTL-SAFE: logical properties only; directional glyphs use
   .mada-icon--directional. Token-driven per CLAUDE.md §3/§13.
   ========================================================================== */

/* ==========================================================================
   1. Hero + search + chips + store grid band
   Figma Hero Section 4437:89762 — light gradient wash behind the search and
   the whole grid, through "Show More".
   ========================================================================== */
.mada-cat-top {
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(0, 178, 175, 0.10) 0%, rgba(0, 178, 175, 0) 60%),
		linear-gradient(180deg, #EAF6FF 0%, #F5FBFF 45%, var(--color-white) 100%);
	padding-block: var(--space-15) var(--space-18);   /* 64 / 96 */
}
/* p.5 "revisit the top margin across all screen sizes": both mobile frames
   (M320 4437:89391 and M639 4437:89022) start their content 32 below the
   header, not 64. Desktop's 80 is set in the ≥1025 block and already matched. */
@media (max-width: 639px) {
	.mada-cat-top { padding-block-start: var(--space-9); }   /* 32 */
}
/* Round-3 (Catalog p.5) "revisit the spacing between the elements" and
   "revisit the top margin across all screen sizes". Measured on the default
   catalog frames — M320 (4437:89391) and Desktop1500 (4437:88123):

                        mobile 320    desktop 1500
     top margin             32             80
     title → subtitle       16             16
     subtitle → search      40             40   (16 gap + 24 inside its box)
     hero → chips           44             80
     chips → grid           32             64

   The inner flex gap carries the chips→grid figure and the chips add the
   remainder on top, because one gap cannot be both. 640–1024 is left at the
   inherited 64/32 — the design has no tablet catalog frame (M320, M639,
   D1499, D1500, D1920 only). */
.mada-cat-top__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-9);                              /* 32 — chips→grid (mobile) */
}
.mada-cat-chips { margin-block-start: var(--space-4); }   /* 32 + 12 = 44 */

/* ---- Hero heading + search ---------------------------------------------- */
.mada-cat-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);                              /* 16 */
	text-align: center;
}
.mada-cat-hero__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);
	line-height: var(--lh-banner);
	letter-spacing: var(--ls-tight);
	color: var(--color-black);
}
:lang(ar) .mada-cat-hero__title,
[dir="rtl"] .mada-cat-hero__title { letter-spacing: var(--ls-none); }
.mada-cat-hero__sub {
	margin: 0;
	max-inline-size: 640px;
	font-size: var(--fs-lg);                          /* 16 / 18 */
	line-height: var(--lh-md);
	color: var(--color-neutral-700);
}

.mada-cat-search {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	inline-size: 100%;
	max-inline-size: 768px;
	/* 24 + the hero's 16 gap = the 40 the design puts between the subtitle and
	   the search box. This was tightened to 8 "for mobile", but both catalog
	   mobile frames measure the same 40 as desktop (M320 4437:89395: title
	   block 180, search container y=196, input 24 inside it). */
	margin-block-start: var(--space-7);               /* 24 */
	padding: var(--space-4);                          /* 12 */
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-base);                /* 6 */
	box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}
.mada-cat-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-md);                          /* 16 (I4760:68605 — Paragraph/Medium) */
	line-height: var(--lh-sm);                        /* 24 */
	color: var(--color-text);
}
.mada-cat-search__input::placeholder { color: var(--color-neutral-400); }
.mada-cat-search__input:focus-visible { outline: none; }
.mada-cat-search__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--radius-base);
	background-color: var(--color-primary);
	color: var(--color-white);
	cursor: pointer;
	box-shadow: inset 0 2px 0 0 rgba(251, 251, 251, 0.24);
	transition: background-color 0.18s ease;
}
.mada-cat-search__btn:hover,
.mada-cat-search__btn:focus-visible { background-color: var(--color-vault-navy); }

/* ---- Category filter chips (horizontal scroll) -------------------------- */
/* scroll-margin so a ?category= deep-link lands the chips below the sticky
   header instead of tucked under it. */
.mada-cat-chips { position: relative; scroll-margin-block-start: 96px; }
.mada-cat-chips__scroll {
	display: flex;
	gap: var(--space-5);                              /* 16 */
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-block: var(--space-2);
	scrollbar-width: none;                            /* Firefox */
	-ms-overflow-style: none;
}
.mada-cat-chips__scroll::-webkit-scrollbar { display: none; }

.mada-cat-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);                              /* 8 */
	padding-block: var(--space-4);                    /* 12 */
	padding-inline: var(--space-7);                   /* 24 */
	border-radius: var(--radius-full);               /* pill */
	background-color: var(--color-white);
	color: var(--color-neutral-700);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);                          /* 16 (4760:69680 — Label/Medium) */
	line-height: var(--lh-sm);                        /* 24 */
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 178, 175, 0.12);
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mada-cat-chip__icon {
	display: inline-flex;
	inline-size: 24px;
	block-size: 24px;
}
.mada-cat-chip__icon svg { inline-size: 24px; block-size: 24px; }
.mada-cat-chip:hover { box-shadow: 0 6px 12px rgba(0, 178, 175, 0.2); }
.mada-cat-chip.is-active {
	background-color: var(--color-trust-70);          /* #004268 */
	color: var(--color-white);
	box-shadow: none;
}

/* Scroll affordances (fade + arrow) — pointer devices only. Two buttons:
   --prev at the inline-start, --next at the inline-end. JS shows each only
   when there is more to scroll in that direction. */
.mada-cat-chips__nav {
	position: absolute;
	inset-block: 0;
	display: none;
	align-items: center;
	inline-size: 96px;
	cursor: pointer;
}
.mada-cat-chips__nav[hidden] { display: none !important; }
.mada-cat-chips__nav--next {
	inset-inline-end: 0;
	justify-content: flex-end;
	padding-inline-end: var(--space-2);
	background: linear-gradient(to right, rgba(245, 251, 251, 0) 0%, #F2FBFB 60%);
}
.mada-cat-chips__nav--prev {
	inset-inline-start: 0;
	justify-content: flex-start;
	padding-inline-start: var(--space-2);
	background: linear-gradient(to left, rgba(245, 251, 251, 0) 0%, #F2FBFB 60%);
}
/* In RTL the start/end sides swap, so the fades must swap too. */
[dir="rtl"] .mada-cat-chips__nav--next { background: linear-gradient(to left, rgba(245, 251, 251, 0) 0%, #F2FBFB 60%); }
[dir="rtl"] .mada-cat-chips__nav--prev { background: linear-gradient(to right, rgba(245, 251, 251, 0) 0%, #F2FBFB 60%); }
/* Round-3: the design's slider control is a BARE arrow — no white pill, no
   shadow. Measured off the Nav frame (4446:16298): a 36×30 #002D4E arrow
   sitting straight on the section background. The build wrapped a 20px glyph
   in a white circle with a shadow, which is what still made it look wrong
   after the path itself was corrected. */
.mada-cat-chips__nav > svg {
	inline-size: 36px;
	block-size: 30px;
	color: var(--color-vault-navy);              /* #002D4E */
}
/* S15: "the arrows are not visible on responsive screens." They were gated to
   pointer devices at >=1024, so every touch/tablet/mobile width lost them even
   though the chip row is exactly where it scrolls furthest. Now shown at all
   widths whenever there is more to scroll; JS still hides each one when that
   direction is exhausted. The narrower fade below keeps them off the chips. */
.mada-cat-chips__nav { display: flex; }
.mada-cat-chips__nav[hidden] { display: none !important; }

@media (max-width: 1023px) {
	.mada-cat-chips__nav { inline-size: 56px; }
	/* Bare arrow at every width — just a slightly smaller one below 1024. */
	.mada-cat-chips__nav > svg { inline-size: 28px; block-size: 23px; }
}

/* ---- Category view header (4437:112640) ---------------------------------
   Reached from a Selected-Partners promo or a "Shop by Category" tile. The
   search hero is replaced by breadcrumbs + a plain "Stores" title; both
   marketing bands are dropped server-side (see sections.php). */
.mada-cat-hero--filtered {
	align-items: flex-start;
	text-align: start;
	gap: var(--space-6);                              /* 20 */
}
.mada-cat-crumbs {
	display: flex;
	align-items: center;
	gap: var(--space-2);                              /* 4 */
	font-size: var(--fs-sm);
	line-height: var(--lh-xs);
	color: var(--color-neutral-600);
}
.mada-cat-crumbs a {
	color: var(--color-neutral-600);
	text-decoration: none;
}
.mada-cat-crumbs a:hover,
.mada-cat-crumbs a:focus-visible { color: var(--color-primary-hover); }
.mada-cat-crumbs [aria-current="page"] { color: var(--color-black); font-weight: var(--fw-semibold); }
/* The chevron points along the reading direction, so mirror it in RTL. */
[dir="rtl"] .mada-cat-crumbs svg { transform: scaleX(-1); }

/* ---- Search result count ------------------------------------------------ */
.mada-cat-count {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-md);
	color: var(--color-neutral-600);
	text-align: start;
}

/* ---- Store grid --------------------------------------------------------- */
.mada-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);                              /* 24 */
}
.mada-cat-card {
	display: flex;
	align-items: center;
	gap: var(--space-5);                              /* 16 */
	/* S15: "reduce the merchant card padding to 16px on mobile and tablet
	   instead of 24px" — 24 stays from the desktop band (1025) up. */
	padding: var(--space-5);                          /* 16 */
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-300);
	border-radius: var(--radius-3xl);                /* 24 */
	color: inherit;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.mada-cat-card:hover,
a.mada-cat-card:focus-visible {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	text-decoration: none;
	transform: translateY(-2px);
}
/* Cards past the initial count, and cards filtered out, are hidden. */
.mada-cat-card.is-overflow { display: none; }
.mada-cat-grid.is-expanded .mada-cat-card.is-overflow { display: flex; }

/* ---- Search results — round-3 p.5 ---------------------------------------
   "when I search for something and it's found the card should take bigger
   space like the sample in figma."
   In the search-found frame (4446:34277 → General Category 4446:34980) the
   match is a single FULL-WIDTH row — Dashboard Preview 1308x140 across the
   whole 1308 container — rather than a cell in the 3-up grid. The count sits
   80 below the hero and the first card 40 below the count.
   One column at every width; catalog.js sets .is-searching. The 80/40 rhythm
   is applied only from 1025 up — that is the frame I measured, and the mobile
   search frames were not checked. */
.mada-cat-top.is-searching .mada-cat-grid { grid-template-columns: 1fr; }

@media (min-width: 1025px) {
	.mada-cat-top.is-searching .mada-cat-top__inner { gap: var(--space-11); }        /* 40 → count→card */
	/* margin, not padding — padding grows the box inward and leaves its top
	   edge where it was, so the 80 would not actually appear. */
	.mada-cat-top.is-searching .mada-cat-count { margin-block-start: var(--space-11); } /* 40 + 40 = 80 below the hero */
}
.mada-cat-card.is-hidden { display: none !important; }

.mada-cat-card__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 80px;
	block-size: 80px;
	border-radius: var(--radius-full);
	background-color: var(--color-neutral-50);
	border: 0.8px solid var(--color-neutral-150);
	overflow: hidden;
}
.mada-cat-card__logo img {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 68px;
	max-block-size: 40px;
	object-fit: contain;
}
.mada-cat-card__initial {
	font-weight: var(--fw-bold);
	font-size: var(--fs-3xl);
	color: var(--color-neutral-400);
	line-height: 1;
}
.mada-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);                              /* 4 */
	min-inline-size: 0;
}
.mada-cat-card__name {
	font-weight: var(--fw-bold);
	font-size: var(--fs-3xl);                         /* 24 / 30 (Heading/Medium) */
	line-height: var(--lh-xl);
	color: var(--color-black);
	overflow-wrap: anywhere;
}
.mada-cat-card__cat {
	font-size: var(--fs-md);                          /* 14 / 16 */
	line-height: var(--lh-sm);
	color: var(--color-neutral-400);
}

/* The [hidden] attribute must beat the explicit display on these blocks
   (JS toggles them). Without this, .mada-cat-empty{display:flex} wins over
   the UA [hidden]{display:none}. */
.mada-cat-chips[hidden],
.mada-cat-count[hidden],
.mada-cat-empty[hidden],
.mada-cat-more[hidden] { display: none !important; }

/* ---- No-results empty state --------------------------------------------- */
/* Round-3 p.6 — measured on the no-results frames, Desktop1500 (4446:35440)
   and M320 (4446:52928):
                    mobile   desktop
     icon            80x80    80x80
     icon → title      12       16
     title → sub       12       16
     title          20/28     24/32
     sub            18/28     18/28
   The icon is the 80px "search-status" glyph itself — the old 56px circle
   with a 28px magnifier inside it was neither the right mark nor the right
   size. Sub is 18/28 on mobile too, which is the DS desktop Paragraph/Large,
   so it is authored literally rather than via --fs-lg (16 on mobile). */
.mada-cat-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);                              /* 12 — mobile */
	padding-block: var(--space-15);
	text-align: center;
}
.mada-cat-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 80px;
	block-size: 80px;
}
.mada-cat-empty__icon img { inline-size: 80px; block-size: 80px; display: block; }
.mada-cat-empty__title {
	margin: 0;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-2xl);                         /* 20 → 24 */
	line-height: var(--lh-lg);                        /* 28 → 32 */
	color: var(--color-black);
}
.mada-cat-empty__title--static {
	padding-block: var(--space-13);
	text-align: center;
	color: var(--color-neutral-500);
	font-weight: var(--fw-regular);
}
.mada-cat-empty__sub {
	margin: 0;
	font-size: 18px;                                  /* Paragraph/Large at both bands */
	line-height: 28px;
	color: var(--color-neutral-500);
}
@media (min-width: 1025px) {
	.mada-cat-empty { gap: var(--space-5); }          /* 16 on desktop */
}

/* ---- Show More ---------------------------------------------------------- */
.mada-cat-more {
	display: flex;
	justify-content: center;
	padding-block-start: var(--space-11);             /* 40 */
}
.mada-cat-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-5);                    /* 16 */
	padding-inline: var(--space-9);                   /* 32 */
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-primary);
	border-radius: var(--radius-lg);                 /* 8 */
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-lg);
	line-height: var(--lh-sm);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.mada-cat-more__btn:hover,
.mada-cat-more__btn:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* ==========================================================================
   2. Shared section header (Selected Partners / Shop by Category)
   Figma: Display/Small title (60/72 bold, tracking -2.5) + Paragraph/Large sub.
   ========================================================================== */
.mada-cat-sechead {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.mada-cat-sechead__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                         /* 48 / 60 */
	line-height: var(--lh-section);
	letter-spacing: var(--ls-tight);
	color: var(--color-black);
}
:lang(ar) .mada-cat-sechead__title,
[dir="rtl"] .mada-cat-sechead__title { letter-spacing: var(--ls-none); }
.mada-cat-sechead__sub {
	margin: 0;
	font-size: var(--fs-lg);                          /* 18 */
	line-height: var(--lh-md);
	color: var(--color-neutral-700);
}

/* ==========================================================================
   3. Selected Partners
   Figma 4437:90099 — grey band; 12-col grid, featured 8 + side 4, row 480.
   ========================================================================== */
.mada-cat-partners {
	background-color: var(--color-neutral-50);
	padding-block: var(--pad-section-top) var(--pad-section-bottom);                   /* 96 */
}
.mada-cat-partners__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);                             /* 64 */
}
.mada-cat-partners__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);                              /* 24 */
}

/* Featured card */
.mada-cat-feature {
	position: relative;
	display: block;
	min-block-size: 280px;
	border-radius: var(--radius-xl);                 /* 12 */
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 178, 175, 0.12);
	color: var(--color-white);
	text-decoration: none;
}
.mada-cat-feature__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mada-cat-feature__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 45, 78, 0.9) 0%, rgba(0, 45, 78, 0.2) 50%, rgba(0, 45, 78, 0) 100%);
}
.mada-cat-feature__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);                              /* 12 */
	padding: var(--space-11);                         /* 40 */
	block-size: 100%;
	justify-content: flex-end;
	text-align: start;
}
.mada-cat-feature__badge {
	align-self: flex-start;
	padding-block: var(--space-2);
	padding-inline: var(--space-4);
	border-radius: var(--radius-full);
	background-color: var(--color-ice-credit);
	color: var(--color-trust-80);
	/* 4760:68447 — Paragraph/XSmall, Regular. Was SemiBold at 14. */
	font-weight: var(--fw-regular);
	font-size: var(--fs-xs);                          /* 12 */
	line-height: var(--lh-2xs);                       /* 16 */
}
.mada-cat-feature__title {
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                         /* 36 (Heading/Large) */
	line-height: var(--lh-2xl);                       /* 40 */
	color: var(--color-white);
}
.mada-cat-feature__text {
	/* No cap: the design's copy block is the full card width (4760:68446 is
	   w-1016 inside the 1016 card). The old 640 forced a wrap two words early
	   in Arabic. */
	font-size: var(--fs-lg);                          /* 18 (Paragraph/Large) */
	line-height: var(--lh-md);                        /* 28 */
	color: var(--color-white);
}
.mada-cat-feature__btn {
	display: inline-flex;
	align-items: center;
	margin-block-start: var(--space-2);
	padding-block: var(--space-5);                    /* 16 */
	padding-inline: var(--space-9);                   /* 32 */
	border-radius: var(--radius-lg);                 /* 8 */
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);                          /* 16 (Label/Large) */
	line-height: var(--lh-sm);                        /* 24 */
}
/* These cards are always links now (they filter the catalog to a category), so
   they need base.css's a:hover underline cancelled at matching specificity —
   .mada-cat-feature alone (0,1,0) loses to a:hover (0,1,1) and the rule would
   strike a line through the whole card. Same pattern as a.mada-cat-dir below. */
a.mada-cat-feature:hover,
a.mada-cat-feature:focus-visible { text-decoration: none; }
a.mada-cat-feature:hover .mada-cat-feature__btn,
a.mada-cat-feature:focus-visible .mada-cat-feature__btn { background-color: var(--color-vault-navy); }

/* Side promo cards */
.mada-cat-partners__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);                              /* 24 */
}
.mada-cat-promo {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);                              /* 16 */
	padding: var(--space-7);                          /* 24 */
	border-radius: var(--radius-xl);                 /* 12 */
	color: inherit;
	text-decoration: none;
	block-size: 100%;
}
/* Cancels base.css a:hover (see the note on a.mada-cat-feature above) and gives
   the card the same lift as the Shop-by-Category tiles. */
a.mada-cat-promo {
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.mada-cat-promo:hover,
a.mada-cat-promo:focus-visible {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	text-decoration: none;
}
.mada-cat-promo--brand {
	background-image: linear-gradient(144deg, #FFFFFF 0%, #F0FFFE 100%);
	border: var(--border-width-thin) solid var(--glass-border-brand);
}
.mada-cat-promo--muted { background-color: #D8E5E7; }
.mada-cat-promo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--radius-lg);                 /* 8 */
	background-color: var(--color-white);
	/* The glyph is VaultNavy in the design, not the teal primary — both the
	   monitor (Component 168) and the sparkles (Component 37) export with
	   fill #002D4E. The tile's teal-tinted shadow below is what carries the
	   brand accent, and it already matches the Figma filter (dy 4, blur 2,
	   rgb(0,178,175) @ 12%). */
	color: var(--color-vault-navy);                  /* #002D4E */
	box-shadow: 0 4px 2px rgba(0, 178, 175, 0.12);
}
.mada-cat-promo__icon svg,
.mada-cat-promo__icon img { inline-size: 32px; block-size: 32px; }
.mada-cat-promo__body { display: flex; flex-direction: column; gap: var(--space-2); }
.mada-cat-promo__title {
	font-weight: var(--fw-bold);
	font-size: var(--fs-2xl);                         /* 24 (Heading/Small) */
	line-height: var(--lh-lg);                        /* 32 */
	color: var(--color-black);
}
.mada-cat-promo__sub {
	font-size: var(--fs-xs);                          /* 12 (Paragraph/XSmall) */
	line-height: var(--lh-2xs);                       /* 16 */
	letter-spacing: var(--ls-wider);                  /* 0.2 — 4760:68430 */
	color: var(--color-neutral-500);
}
.mada-cat-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: auto;
	/* S17: "the buttons should be left in the Arabic version and right in the
	   English version" — i.e. the INLINE-END in both. flex-end on the cross
	   axis resolves per direction, so one rule covers both languages. */
	align-self: flex-end;
	font-weight: var(--fw-semibold);
	/* 4760:68431 — Label/Small (14/20) in a 6/10 button box, with a 24px
	   glyph. The build had it at Paragraph/Large (18/24) with a 20px glyph,
	   which is the single most oversized thing on the page. */
	font-size: var(--fs-sm);                          /* 14 */
	line-height: var(--lh-xs);                        /* 20 */
	padding-block: 6px;
	padding-inline: 10px;
}
.mada-cat-promo--brand .mada-cat-promo__cta { color: var(--color-primary); }
.mada-cat-promo--muted .mada-cat-promo__cta { color: var(--color-vault-navy); }
.mada-cat-promo__cta svg { inline-size: 24px; block-size: 24px; }

/* ==========================================================================
   4. Shop by Category
   Figma 4437:90141 — grey band; ice-blue cards r40, icon in trustblue/10 disc.
   ========================================================================== */
/* Round-3 p.8 — "revisit the background color and ensure it matches the Figma
   design" + "revisit the spacing between the sections, especially on
   responsive layouts".
   Background: sampled from a native render of the section (4437:88429) —
   #F3F4F6 (Neutral/100) is the dominant colour at 635k px, with the tiles on
   #D3EFFF. The build had Neutral/50 #F9FAFB.
   Spacing: the section is its own band, 80 top / 96 bottom (735 = 80 + 559 +
   96), exactly like Selected Partners above it — it does NOT continue that
   band with a 0 top. Using the --pad-section-* pair also makes it scale down
   correctly on the smaller bands, which is the responsive half of the note. */
.mada-cat-directory {
	background-color: var(--color-neutral-100);       /* #F3F4F6 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-cat-directory__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);                             /* 48 */
}
/* Flex (not grid) so a short last row fills the width — the Figma builds these
   cards as flex:1 0 0, i.e. a lonely last card stretches to fill (e.g. the 10th
   card at the 3-col widths). flex-basis sets the per-row count; grow fills. */
.mada-cat-directory__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);                              /* 24 */
}
.mada-cat-dir {
	flex: 1 1 calc(50% - 12px);                       /* 2 per row (mobile); 24px gap */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);                              /* 16 */
	padding: var(--space-7);                          /* 24 */
	background-color: var(--color-ice-credit);        /* #D3EFFF */
	border-radius: var(--radius-5xl);                /* 40 */
	box-shadow: var(--shadow-base);
	color: inherit;
	text-decoration: none;
	text-align: center;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.mada-cat-dir:hover,
a.mada-cat-dir:focus-visible {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	text-decoration: none;
}
.mada-cat-dir__corner {
	position: absolute;
	inset-block-start: var(--space-5);
	inset-inline-end: var(--space-5);
	color: var(--color-vault-navy);
	opacity: 0.5;
}
.mada-cat-dir__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--radius-full);
	background-color: var(--color-trust-10);          /* #D6F0FF */
	/* S19: "revisit the icon colors and ensure they match the Figma design."
	   The section binds TrustBlue/40, not the teal primary we were using
	   (verified via get_variable_defs on Figma 4437:90141). */
	color: var(--color-trust-40);                     /* #2B88BD */
}
/* Figma: the glyph is 44 inside the 64 tile (10 padding all round) —
   desktop grid 4437:107209/107210. Mobile drops to 28 in a 40 tile. */
.mada-cat-dir__icon svg { inline-size: 44px; block-size: 44px; }
@media (max-width: 639px) {
	.mada-cat-dir__icon { inline-size: 40px; block-size: 40px; }
	.mada-cat-dir__icon svg { inline-size: 28px; block-size: 28px; }
}
.mada-cat-dir__label {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);                          /* 16 (Label/Medium) */
	line-height: var(--lh-sm);                        /* 24 */
	color: var(--color-black);
}
.mada-cat-dir__count {
	font-size: var(--fs-xs);                          /* 12 (Paragraph/Tiny) */
	line-height: var(--lh-2xs);                       /* 16 */
	/* Round-4: the new tiles (4760:70466 and siblings) bind Neutral/600.
	   The S19 note above was measured on the superseded 4437 frames. */
	color: var(--color-neutral-600);                  /* #6B7280 */
}

/* ==========================================================================
   5. "Why shop with Mada?" band
   Figma 4437:90239 — navy card r20 p80, teal glows, glass "500+" mock.
   ========================================================================== */
.mada-cat-why {
	background-color: var(--color-neutral-50);
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom);
}
.mada-cat-why__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
}
.mada-cat-why__card {
	position: relative;
	display: flex;
	flex-direction: column-reverse;                   /* mobile: glass above text */
	gap: var(--space-11);
	overflow: hidden;
	padding: var(--space-13);                         /* 48 (80 on desktop) */
	border-radius: 20px;
	background-color: var(--color-trust-80);          /* #002C45 */
	color: var(--color-white);
}
.mada-cat-why__glow {
	position: absolute;
	border-radius: var(--radius-full);
	pointer-events: none;
}
.mada-cat-why__glow--teal {
	inline-size: 448px;
	block-size: 448px;
	inset-inline-start: 6px;
	inset-block-start: -186px;
	background-color: rgba(0, 178, 175, 0.4);
	filter: blur(152px);
}
/* 4760:69107 — anchored to the second list item at left 895 / top -111.12,
   which resolves to these fractions of the 1536x526 card. Expressed as
   percentages so it keeps its place as the card reflows. */
.mada-cat-why__glow--mint {
	inline-size: 384px;
	block-size: 384px;
	inset-inline-start: 63.5%;
	inset-block-start: 42.8%;
	background-color: rgba(86, 227, 214, 0.2);
	filter: blur(96px);
}
.mada-cat-why__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                             /* 40 */
	flex: 0 0 auto;
	min-inline-size: 0;
}
/* Round-4: this heading is Display/XSmall (48/58) in the design, NOT the
   60/72 the S8 "main section title" ramp gives — it is a heading inside a
   card, and 4760:69092 / the AR twin both bind 5xl + line-height 3xl. It was
   reading 25% oversized against every other element in the band. */
.mada-cat-why__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-5xl);                         /* 48 (Display/XSmall) */
	line-height: var(--lh-3xl);                       /* 58 */
	letter-spacing: var(--ls-tight);
	color: var(--color-white);
}
:lang(ar) .mada-cat-why__title,
[dir="rtl"] .mada-cat-why__title { letter-spacing: var(--ls-none); }
.mada-cat-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);                              /* 24 */
}
.mada-cat-why__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);                              /* 16 */
}
/* The two client-supplied marks stroke currentColor — LiquidMint per the DS. */
.mada-cat-why__ico {
	flex: 0 0 auto;
	display: inline-flex;
	inline-size: 24px;
	block-size: 24px;
	color: var(--color-liquid-mint);                  /* #56E3D6 */
}
.mada-cat-why__ico svg { inline-size: 24px; block-size: 24px; }
.mada-cat-why__itembody { display: flex; flex-direction: column; gap: var(--space-3); }
.mada-cat-why__itembody strong {
	font-weight: var(--fw-bold);
	font-size: var(--fs-xl);                          /* 20 (Heading/XSmall) */
	line-height: var(--lh-md);                        /* 28 */
	color: var(--color-white);
}
.mada-cat-why__itembody span {
	font-size: var(--fs-md);                          /* 16 (Paragraph/Medium) */
	line-height: var(--lh-sm);                        /* 24 */
	color: var(--color-neutral-50);
}

/* ---- Glass "500+" mock — Figma EN 4760:69108 / AR 4760:68557 -------------
   Two 256x320 r16 cards sharing one vertical centre, the front sitting 40px
   toward the inline-end of the back — that 40 is the only part of the
   relationship that mirrors between the EN and AR frames. The rotations do
   NOT mirror: both frames draw -12 on the back and +6 on the front.
   The back card's content (teal dot + three skeleton bars) was missing
   entirely; it is what the front pane blurs and glows through, and without
   it the pair read as two empty sheets.
   The three --glass-* values below are the only things that change per
   breakpoint — everything else derives from them. */
.mada-cat-why__visual {
	--glass-w: 200px;
	--glass-h: 250px;
	--glass-off: 31px;                                /* 40 x (200/256) */
	position: relative;
	flex: 0 0 auto;
	/* the rotated pair's bounding height: w*sin12 + h*cos12 */
	min-block-size: calc((var(--glass-w) * 0.2079) + (var(--glass-h) * 0.9781));
	display: flex;
	align-items: center;
	justify-content: center;
}
.mada-cat-why__glass {
	inline-size: var(--glass-w);
	block-size: var(--glass-h);
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-2xl);                /* 16 */
	padding: calc(var(--glass-w) * 0.0977);           /* 25 at 256 */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-sizing: border-box;
}
.mada-cat-why__glass--back {
	gap: calc(var(--glass-h) * 0.1);                  /* 32 at 320 */
	background-color: rgba(255, 255, 255, 0.1);
	border: var(--border-width-thin) solid rgba(255, 255, 255, 0.2);
	transform: rotate(-12deg);
}
.mada-cat-why__glass--front {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	margin-block-start: calc(var(--glass-h) / -2);
	margin-inline-start: calc((var(--glass-w) / -2) + var(--glass-off));
	gap: calc(var(--glass-h) * 0.25);                 /* 80 at 320 */
	align-items: flex-start;
	background-color: rgba(255, 255, 255, 0.2);
	/* Figma binds white @30% on the front edge (both frames). Round-3 had
	   raised this to Effects/glass/highlight/light (80%) chasing "the glassy
	   shape should be more clear" — the actual cause of that note was the
	   empty back card, now fixed, so the edge goes back to the design value. */
	border: var(--border-width-thin) solid rgba(255, 255, 255, 0.3);
	transform: rotate(6deg);
}
/* Back-card skeleton: dot pinned to the card's PHYSICAL right in both
   languages (Figma draws items-end in the EN and the AR frame alike, so this
   one is deliberately not mirrored); the bars follow the reading direction. */
.mada-cat-why__dot {
	align-self: flex-end;
	inline-size: calc(var(--glass-w) * 0.1875);       /* 48 at 256 */
	block-size: calc(var(--glass-w) * 0.1875);
	border-radius: var(--radius-full);
	background-color: var(--color-liquid-mint);
}
[dir="rtl"] .mada-cat-why__dot { align-self: flex-start; }
.mada-cat-why__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--glass-h) * 0.05);                 /* 16 at 320 */
	inline-size: 100%;
}
.mada-cat-why__line {
	display: block;
	block-size: calc(var(--glass-h) * 0.05);          /* 16 at 320 */
	border-radius: var(--radius-md);                 /* 4 */
	background-color: rgba(255, 255, 255, 0.2);
}
.mada-cat-why__line--a { inline-size: 60.35%; }       /* 154.5 of 256 */
.mada-cat-why__line--b { inline-size: 40.23%; }       /* 103 of 256 */
.mada-cat-why__rule {
	display: block;
	inline-size: 100%;
	padding-block-start: calc(var(--glass-h) * 0.0531);   /* 17 at 320 */
	border-block-start: var(--border-width-thin) solid rgba(255, 255, 255, 0.1);
}
.mada-cat-why__line--c {
	inline-size: 100%;
	block-size: calc(var(--glass-h) * 0.1);           /* 32 at 320 */
	background-color: rgba(255, 255, 255, 0.3);
}
/* Front card: brand mark at the inline-end, stat block at the inline-start. */
.mada-cat-why__brand {
	display: flex;
	justify-content: flex-end;
	inline-size: 100%;
}
.mada-cat-why__brand img {
	inline-size: calc(var(--glass-w) * 0.3008);       /* 77 at 256 */
	block-size: calc(var(--glass-h) * 0.1);           /* 32 at 320 */
}
.mada-cat-why__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	inline-size: 100%;
}
.mada-cat-why__stat strong {
	/* "500+" is drawn LTR in the Arabic frame too (4760:68573 carries no
	   dir="auto"). Without the isolate, bidi reorders it to "+500". */
	direction: ltr;
	unicode-bidi: isolate;
	font-weight: var(--fw-bold);
	/* Display/Small 60/72 and Paragraph/Medium 16/24 — derived from the card
	   width rather than read straight off --fs-*, because the card itself
	   steps down below 1025 and fixed 60px type would not fit it. At the
	   desktop --glass-w of 256 these resolve to exactly 60/72 and 16/24. */
	font-size: calc(var(--glass-w) * 0.2344);         /* 60 at 256 */
	line-height: calc(var(--glass-w) * 0.2813);       /* 72 at 256 */
	letter-spacing: var(--ls-tight);
	color: var(--color-white);
}
:lang(ar) .mada-cat-why__stat strong,
[dir="rtl"] .mada-cat-why__stat strong { letter-spacing: var(--ls-none); }
.mada-cat-why__stat span {
	font-size: calc(var(--glass-w) * 0.0625);         /* 16 at 256 */
	line-height: calc(var(--glass-w) * 0.0938);       /* 24 at 256 */
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Responsive — column counts + section layouts per the Figma frames
   (320 · 640 · 936 · 1024/1025 · 1499/1500 · 1920):
     Store grid    : 1-col <936 · 2-col 936–1919 · 3-col ≥1920
     Category grid : 2-col <640 · 3-col 640–1499 · 5-col ≥1500 (last row fills)
     Sel. Partners : stacked <640 · featured+promo-row 640–935 · 8/4 split ≥936
     Why shop      : glass-over-text <640 · row ≥640
   ========================================================================== */

/* Phablet / small tablet ≥640 */
@media (min-width: 640px) {
	.mada-cat-hero__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-cat-dir { flex-basis: calc(33.333% - 16px); }          /* 3 per row */

	/* Selected Partners: featured full-width, two promo cards in a row below. */
	.mada-cat-partners__side { flex-direction: row; }
	.mada-cat-partners__side > * { flex: 1 1 0; }
	.mada-cat-feature { min-block-size: 500px; }

	/* Why shop stays STACKED here. The design has no frame between 640 and
	   1024, and the row split it used to take at 640 left a 224px column per
	   side — enough to break the heading over four lines and the body over
	   three words. The band goes side-by-side at 1025, which is where the
	   client's own desktop band (and the only desktop frame) begins. */
	.mada-cat-why__card { padding: var(--space-15); }
}

/* Tablet ≥936: store grid 2-col; Selected Partners becomes 8-col + 4-col split. */
@media (min-width: 936px) {
	.mada-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.mada-cat-partners__grid { grid-template-columns: 8fr 4fr; }
	.mada-cat-partners__side { flex-direction: column; }
	.mada-cat-feature { min-block-size: 400px; }
}

/* Desktop band: larger hero + roomier featured / why padding. */
@media (min-width: 1025px) {
	.mada-cat-hero__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-cat-top { padding-block: var(--space-17) var(--space-18); }   /* 80 top ✓ */
	.mada-cat-feature { min-block-size: 480px; }
	/* Why shop, desktop band — the composition and the sizes the design
	   actually draws (card 4760:69088, glass column 4760:69108). */
	.mada-cat-why__card {
		flex-direction: row;
		align-items: center;
		gap: var(--space-13);
		padding: var(--space-17);                    /* 80 */
	}
	.mada-cat-why__text,
	.mada-cat-why__visual { flex: 1 1 0; }
	.mada-cat-why__text { text-align: start; align-items: flex-start; }
	.mada-cat-why__visual { --glass-w: 256px; --glass-h: 320px; --glass-off: 40px; }
	.mada-cat-card {
		padding: var(--space-7);                     /* S15: 24 on desktop only */
		/* Store cards are 140 tall in the design at every desktop width —
		   460x140 in the category-view grid (4437:112640) and 1308x140 as the
		   full-width search result (4446:34983). Ours came out content-driven
		   at 130. */
		min-block-size: 140px;
	}
	/* Desktop half of the p.5 ladder — see the note by .mada-cat-top__inner. */
	.mada-cat-top__inner { gap: var(--space-15); }   /* 64 — chips→grid */
	.mada-cat-chips { margin-block-start: var(--space-5); }   /* 64 + 16 = 80 */
}

/* Wide desktop ≥1500: category grid goes to 5 per row. */
@media (min-width: 1200px) {
	.mada-cat-dir { flex-basis: calc(20% - 19.2px); }            /* 5 per row */
}

/* Full desktop ≥1920: store grid goes to 3 per row. */
@media (min-width: 1536px) {
	.mada-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small phones <640: compact padding. */
@media (max-width: 639px) {
	.mada-cat-why__card { padding: var(--space-9); }
	.mada-cat-sechead { text-align: center; }
}
/* S20: "please revisit the section title on mobile and center-align it."
   Applies to the whole stacked band, i.e. everything below the desktop
   breakpoint — not just <640. The glass keeps the base 200x250 here; see
   the --glass-* block. */
@media (max-width: 1024px) {
	.mada-cat-why__text { text-align: center; align-items: center; }
}