/* ==========================================================================
   Page: Shopper
   Figma: Shopper EN D1920 (4152:26452) — exact node values. Sections:
   banner (#F8FAFC) · 01 dark #001623 + teal glows · 02/03 white · 04 #F3F4F6
   · shop grid #EDF9FF · CTA card #002C45 r20 · FAQ (shared component).
   Buttons: DS Main Button square variants (button.css).
   RTL: logical properties; directional arrows mirrored.
   ========================================================================== */

/* ---- Banner ---- */
.mada-shopbanner {
	background-color: var(--color-white);
	padding-block: var(--pad-banner-block) var(--pad-banner-block);              /* 96 */
}
.mada-shopbanner__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}
.mada-shopbanner__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 72 */
	line-height: var(--lh-banner);                  /* 86 */
	letter-spacing: var(--ls-none);
	color: var(--color-black);
}
.mada-shopbanner__title span { display: block; }
.mada-shopbanner__accent { color: var(--color-primary); }
.mada-shopbanner__sub {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 28px;
	color: var(--color-neutral-600);
	max-inline-size: 62ch;
}
.mada-shopbanner__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);                         /* 20 */
	padding-block-start: var(--space-9);
}
/* Round-4: at 320 both buttons are FULL WIDTH and stacked - 4155:30143 draws
   two 288x56 with a 20 gap, 288 being the whole container, so "Discover
   stores" is the same size as "Start your journey with Mada" and sits under
   it. They only sit side by side once the row fits: the 639 frame
   (4155:30127) draws 300 + 20 + 189 = 509 inside a 607 container, so the row
   stops fitting at 509 + 2x16 = 541. */
@media (max-width: 540px) {
	.mada-shopbanner__cta { flex-direction: column; align-items: stretch; }
	.mada-shopbanner__cta > * { inline-size: 100%; }
}

/* ---- Numbered sections (01–04) ---- */
.mada-sstep {
	background-color: var(--color-white);
	padding-block: var(--pad-section-top) var(--pad-section-bottom); /* 80 / 96 */
	scroll-margin-block-start: 77px; /* sticky header height — step CTAs scroll to the next step */
}
.mada-sstep--dark { background-color: #001623; position: relative; overflow: hidden; }
.mada-sstep--dark::before,
.mada-sstep--dark::after {
	content: "";
	position: absolute;
	inline-size: 1200px;
	block-size: 448px;
	border-radius: var(--radius-full);
	background-color: rgba(0, 178, 175, 0.4);    /* Figma glow overlays */
	filter: blur(152px);
	pointer-events: none;
}
.mada-sstep--dark::before { inset-block-start: -300px; inset-inline-start: -10%; }
.mada-sstep--dark::after  { inset-block-end: -300px; inset-inline-end: -10%; }
.mada-sstep--grey { background-color: var(--color-neutral-100); }

.mada-sstep__inner {
	position: relative;
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);                        /* 48 */
}
.mada-sstep__inner--center {
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}

.mada-sstep__bandtitle {
	margin: 0;
	text-align: center;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 60 */
	line-height: var(--lh-section);                  /* 72 */
	color: var(--color-white);
}

.mada-sstep__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-13);
	/* Client feedback p29: while stacked (<1200) the children must span the
	   row — `center` let them size to content and overflow the viewport on
	   mobile, breaking the section padding. Desktop rows re-set centering. */
	align-items: stretch;
}
.mada-sstep__text {
	flex: 1 1 0;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);                         /* 20 */
}
.mada-sstep__visual {
	flex: 1 1 0;
	min-inline-size: 0;
	inline-size: 100%;
}

.mada-sstep__no {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-8xl);                    /* 96 */
	line-height: var(--lh-7xl);                  /* 128 */
	color: #006B69;                              /* MintPay/70 */
	opacity: 0.25;                               /* client feedback p24 — subtle numerals */
}
.mada-sstep__no--mint { color: var(--color-mint-15); /* #C5F7F6 */ }

.mada-sstep__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-subsection);                    /* 48 */
	font-size: var(--fs-subsection);
	line-height: var(--lh-subsection);                           /* Figma: 48/58 */
	color: var(--color-black);
}
.mada-sstep__title span { display: block; }
.mada-sstep__title--teal { color: var(--color-primary); }

.mada-sstep__desc {
	margin: 0;
	font-size: var(--fs-xl);                     /* 20 */
	line-height: 28px;
	color: var(--color-neutral-700);
	max-inline-size: 56ch;
}
.mada-sstep__desc--light { color: rgba(245, 245, 246, 0.75); }

/* 01 photo card */
.mada-sstep__photo {
	position: relative;
	margin: 0;
	border-radius: var(--radius-3xl);            /* 24 */
	overflow: hidden;
}
.mada-sstep__photo img { inline-size: 100%; display: block; }
.mada-sstep__photochip {
	position: absolute;
	inset-block-start: var(--space-9);
	inset-inline-end: var(--space-9);
	background-color: var(--color-white);
	color: var(--color-black);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 20px;
	padding-block: var(--space-3);
	padding-inline: var(--space-5);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
}

/* 02 left extras */
.mada-sstep__ready {
	margin: 0;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-xl);                     /* 20 */
	line-height: 28px;
	color: var(--color-black);
}
.mada-sstep__approval {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	inline-size: 100%;
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	box-shadow: var(--shadow-base);
}
.mada-sstep__approval-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--radius-xl);
	background-color: var(--color-primary);
}
.mada-sstep__approval-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-sm);
	line-height: 20px;
	color: var(--color-neutral-600);
}
.mada-sstep__approval-text strong {
	font-size: var(--fs-xl);                     /* 20 */
	line-height: 28px;
	font-weight: var(--fw-semibold);
	color: var(--color-black);
}

/* 02 payment visual */
.mada-paycard {
	background-color: var(--color-ice-credit-dark); /* #A8D9FF */
	border-radius: var(--radius-3xl);
	padding: var(--space-13) 0 0 var(--space-13);
	overflow: hidden;
}
[dir="rtl"] .mada-paycard { padding: var(--space-13) var(--space-13) 0 0; }
.mada-paycard__panel {
	background-color: var(--color-trust-80);     /* #002C45 */
	border-radius: var(--radius-2xl) 0 0 0;
	padding: var(--space-9);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
[dir="rtl"] .mada-paycard__panel { border-radius: 0 var(--radius-2xl) 0 0; }
.mada-paycard__heading {
	margin: 0 0 var(--space-2);
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                    /* 36 */
	line-height: 40px;
	color: #FFFFFF;
}
.mada-paycard__rowline {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background-color: rgba(245, 245, 246, 0.06);
	border-radius: var(--radius-2xl);
	padding: var(--space-5) var(--space-6);
}
.mada-paycard__dot {
	inline-size: 20px; block-size: 20px;
	border-radius: var(--radius-full);
	border: 2px solid rgba(245, 245, 246, 0.25);
}
.mada-paycard__bars { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.mada-paycard__bars span { display: block; block-size: 8px; border-radius: 4px; background-color: rgba(245, 245, 246, 0.15); }
.mada-paycard__bars span:first-child { inline-size: 60%; }
.mada-paycard__bars span:last-child  { inline-size: 35%; }
.mada-paycard__pill { inline-size: 40px; block-size: 24px; border-radius: var(--radius-full); background-color: rgba(245, 245, 246, 0.12); }

.mada-paycard__active {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background-color: var(--color-liquid-mint);
	color: var(--color-vault-navy);
	border-radius: var(--radius-2xl);
	padding: var(--space-5) var(--space-6);
	font-size: var(--fs-xl);                     /* Figma: 23.5 ≈ */
	font-size: 22px;
	line-height: 34px;
}
.mada-paycard__radio {
	inline-size: 20px; block-size: 20px;
	border-radius: var(--radius-full);
	border: 6px solid var(--color-vault-navy);
	background: #FFFFFF;
	flex: 0 0 auto;
}
/* Figma 4152:26585 — 28px app-icon tile (its own gradient + white logomark). */
.mada-paycard__logo {
	margin-inline-start: auto;
	display: block;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 7px;
	flex: 0 0 auto;
}

/* 03 divide cards */
.mada-divide {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);                         /* 24 — row gap, matches Figma */
	inline-size: 100%;
	/* Round-3 (Shopper S1) "revisit the spacing between the elements":
	   on 4152:19696 the step header block is 348 tall and the card block
	   starts at y=428 → 80, not 48. */
	padding-block-start: var(--space-17);        /* 80 */
	text-align: start;
}
/* Round-3 (Shopper S1). Measured on 4152:19696 (1228 frame) and cross-checked
   against 4152:26692 (1536 row): the ice "Automatic" card is a FIXED 380 and
   the teal card absorbs whatever is left —
       1036 row →  632 + 24 + 380
       1536 row → 1132 + 24 + 380
   The old `flex: 1132 / 380` treated that as a ratio, so at 1036 it resolved
   to ~758/254 and the ice card shrank below its design width. */
.mada-divide__zero {
	flex: 1 1 auto;
	min-inline-size: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
	background-color: var(--color-mint-70);      /* #006B69 */
	border-radius: var(--radius-3xl);
	padding: var(--space-11);
	color: var(--color-white);
	align-items: flex-start;
}
/* Heading/Large 36/40. Figma stacks the two lines as separate 40-tall blocks
   16 apart (y=0 and y=56), and the description starts 16 below the pair
   (block ends 96, container at 112) — the build had 12 and no line gap. */
.mada-divide__zerotext h4 {
	margin: 0 0 var(--space-5);                  /* 16 */
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                    /* 36 */
	line-height: 40px;
	color: var(--color-white);
}
.mada-divide__zerotext h4 span { display: block; margin-block-start: var(--space-5); }
.mada-divide__zerotext p {
	margin: 0;
	font-size: var(--fs-xl);
	font-size: 18px;
	line-height: 28px;
	color: rgba(245, 245, 246, 0.85);
}

/* Client feedback p26: the Pay-in-4 card and the months breakdown are the
   client's own exports (0% pill baked in), replacing the HTML mini-card. */
.mada-divide__paycard { display: block; flex: 0 0 auto; max-inline-size: 420px; }
.mada-divide__paycard img { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 1024px) {
	.mada-divide__paycard { max-inline-size: 640px; inline-size: 100%; }
}
.mada-flex-band__months { display: block; inline-size: 100%; max-inline-size: 578px; block-size: auto; }

/* ---- Pay-in-4 mock, below 640 only (Figma 4157:20807) -------------------
   Drawn rather than exported — see the note in steps.php. Every value here
   is off that node: card TrustBlue/5 with 8/12 padding and a 10.5 radius,
   title 20/28 Bold and sub 12/16 on TrustBlue/80, a dot track whose three
   connectors run 61 / 21 / 19, and the "0% interest" pill riding 9px over
   the card's top edge. */
.mada-payin4 { display: none; }
.mada-payin4__title,
.mada-payin4__sub { margin: 0; color: var(--color-trust-80); }   /* #002C45 */
.mada-payin4__title { font-weight: var(--fw-bold); font-size: 20px; line-height: 28px; }
.mada-payin4__sub { margin-block-start: 3.646px; font-size: 12px; line-height: 16px; }
.mada-payin4__track {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-block-start: 24px;                    /* 16 stack gap + 8 method pad */
}
.mada-payin4__dot {
	flex: 0 0 auto;
	inline-size: 7.293px;
	block-size: 7.293px;
	border-radius: var(--radius-full);
	background-color: var(--color-trust-80);
}
.mada-payin4__dot--now {
	inline-size: 10.939px;
	block-size: 10.939px;
	background-color: var(--color-liquid-mint-dark);   /* #2ECFC0 */
}
.mada-payin4__line {
	block-size: 1px;
	background-color: rgba(0, 44, 69, 0.15);
	flex: 1 1 0;
}
/* The design's connectors are 61 / 21 / 19 — kept as ratios so the track
   fills whatever width the card has. */
.mada-payin4__line--a { flex-grow: 61; }
.mada-payin4__line--b { flex-grow: 21; }
.mada-payin4__line--c { flex-grow: 19; }
.mada-payin4__days {
	display: flex;
	align-items: flex-start;
	/* Figma sets a flat 31 gap; space-between lands the labels in the same
	   places and cannot overflow when the Arabic runs longer. */
	justify-content: space-between;
	margin-block-start: 12px;
	padding-block-end: 8px;
}
.mada-payin4__day {
	display: flex;
	flex-direction: column;
	font-weight: var(--fw-medium);
	font-size: 8px;
	line-height: 16px;
	color: var(--color-neutral-500);             /* #888F93 */
}
.mada-payin4__day--now em {
	font-style: normal;
	font-weight: var(--fw-regular);
	font-size: 12px;
	line-height: 16px;
	color: var(--color-liquid-mint-dark);        /* #2ECFC0 */
}
.mada-payin4__day--now i {
	font-style: normal;
	font-weight: var(--fw-semibold);
	font-size: 8px;
	line-height: 16px;
	color: var(--color-mint-30);                 /* #58D1CF */
}
.mada-payin4__pill {
	position: absolute;
	inset-block-start: -9px;
	inset-inline-end: 11.67px;
	display: inline-flex;
	align-items: center;
	gap: 5.833px;
	padding: 7.583px 9.916px;
	border-radius: 23.333px;
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(11.462px);
	backdrop-filter: blur(11.462px);
	border: 0.583px solid rgba(0, 45, 78, 0.1);
	box-shadow: 0 9.333px 28px rgba(0, 45, 78, 0.16), 0 2.333px 9.333px rgba(0, 45, 78, 0.08);
	font-weight: var(--fw-semibold);
	font-size: 10px;
	line-height: 16px;
	color: var(--color-vault-navy);              /* #002D4E */
	white-space: nowrap;
}
/* In Arabic the title is right-aligned and long enough to reach under the
   pill (which mirrors to the inline-start edge), so the pill rides higher —
   clear of the title band, which is also where the AR export puts it. */
[dir="rtl"] .mada-payin4__pill { inset-block-start: -22px; }
.mada-payin4__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18.667px;
	block-size: 18.667px;
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.04);
	color: var(--color-primary);
}

.mada-divide__auto {
	/* Stacked (column) the basis would size the BLOCK axis, so the fixed 380
	   is applied only in the row context — see the ≥1025 block. */
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-5);                         /* 16 — heading→desc (was 12) */
	background-color: var(--color-trust-10);     /* #D6F0FF */
	border-radius: var(--radius-3xl);
	padding: var(--space-11);
	align-items: flex-start;
}
.mada-divide__auto h4 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                    /* 36 */
	line-height: 40px;
	color: var(--color-trust-60);                /* #00588A */
}
/* Client feedback p25: the Automatic card subtitle is BLUE, not teal. */
.mada-divide__auto p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-trust-40); }

.mada-flex-band {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
	inline-size: 100%;
	background-color: var(--color-mint-10);      /* #DBFFFE */
	border-radius: var(--radius-3xl);
	padding: var(--space-11);
	text-align: start;
	align-items: flex-start;
}
.mada-flex-band__text h4 { margin: 0 0 var(--space-3); font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: 40px; color: var(--color-neutral-900); }
.mada-flex-band__text p { margin: 0; font-size: 18px; line-height: 28px; color: var(--color-neutral-700); }
/* Drawn only below 640 — the client's export takes over from there. */
.mada-flex-band__chips { display: none; gap: var(--space-4); flex-wrap: wrap; }
/* 4443:18016 — glass, not solid white: white @10% over the card's mint tint,
   a hairline VaultNavy @10% border, radius 6, and the drop shadow on the
   FIRST tile only. Value is Bold VaultNavy, label Regular Neutral/600. */
.mada-flex-band__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(11.462px);
	backdrop-filter: blur(11.462px);
	border: 0.583px solid rgba(0, 45, 78, 0.1);
	border-radius: var(--radius-base);           /* 6 */
	padding: var(--space-4) var(--space-6);
	min-inline-size: 96px;
	text-align: center;
}
.mada-flex-band__chip:first-child {
	box-shadow: 0 9.333px 28px rgba(0, 45, 78, 0.16), 0 2.333px 9.333px rgba(0, 45, 78, 0.08);
}
.mada-flex-band__chip em { font-style: normal; font-size: var(--fs-sm); line-height: 20px; color: var(--color-neutral-600); }
.mada-flex-band__chip strong { font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: 28px; color: var(--color-vault-navy); }

/* 04 phone visual */
/* Figma 4152:26774 (EN) / 4147:59994 (AR) — the whole panel ships as an
   exported image (see steps.php); it only needs the design's 24px radius. */
.mada-track {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-3xl);            /* 24 */
}

/* ---- Shop grid ---- */
.mada-shopgrid {
	background-color: var(--color-trust-5);      /* #EDF9FF */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-shopgrid__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}
.mada-shopgrid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
}
.mada-shopgrid__title {
	margin: 0 0 var(--space-3);
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 60 */
	line-height: var(--lh-section);
	color: var(--color-black);
}
.mada-shopgrid__sub { margin: 0; font-size: 18px; line-height: 28px; color: var(--color-neutral-600); }
.mada-shopgrid__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-primary);
	text-decoration: none;
}

/* ---- The bento -----------------------------------------------------------
   There is NO width at which these four cards become one column. Every
   Shopper frame in the file keeps a bento; only its SHAPE changes:

     < 640   2-col : featured across the top (243) · two smalls (288) ·
                     wide across the bottom (144).  Gaps 24 across / 16 down.
     >= 640  3-col : featured down the whole left side (600) · two smalls on
                     the top right (288) · wide under them (288).  Gap 24.

   Frames measured: 320 `4152:22871` · 639 `4152:23445` · 640 `4152:22280` ·
   800 `4152:21704` · 1024 `4152:21127` · 1025 `4152:20551` ·
   1228 `4152:19975` · 1920 `4152:26958`.
   Row heights are fixed px on purpose — these frames are fixed-type /
   fluid-container (CLAUDE.md 3.6.1), so the rows do not scale with width. */
.mada-shopgrid__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 243px 288px 144px;
	column-gap: var(--space-7);                  /* 24 */
	row-gap: var(--space-5);                     /* 16 */
}
.mada-shopgrid__card--featured { grid-column: 1 / -1; grid-row: 1; }
.mada-shopgrid__card--sm       { grid-row: 2; }
.mada-shopgrid__card--wide     { grid-column: 1 / -1; grid-row: 3; }

.mada-shopgrid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--space-3);                         /* 8 */
	border-radius: var(--radius-2xl);            /* 16 */
	overflow: hidden;
	background-size: cover;
	background-position: center;
	padding: var(--space-5);                     /* 16 */
	color: var(--color-white);
}
/* Small cards carry a FLAT scrim, not the bottom gradient — 4157:21055 is a
   solid rgba(0,15,50,0.72) at 50-65% opacity over the whole image. The wide
   card fades from its text side and sits on its own tint. */
.mada-shopgrid__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 45, 78, 0.8) 0%, rgba(0, 45, 78, 0) 50%);
}
.mada-shopgrid__card--sm { justify-content: flex-end; padding: var(--space-7) var(--space-5); }
.mada-shopgrid__card--sm::before { background: rgba(0, 15, 50, 0.4); }

/* Round-4: "the home and decor image is not clear and zoomed in at 320".
   The wide card is the only one whose box is nowhere near its source: it is
   2.0:1 at 320 and 2.6:1 at 1920 against a 512x512 photo, so `cover` scaled
   to the height and threw away most of the width — the chair and the side
   table both fell outside the frame.
   The design never covers this one. Both frames size the image to the box
   WIDTH and slide it vertically: at 320 (4157:21067) `w-full` with the image
   at 422% of the box height, at 1024 (4155:20602) `w-full` at 151.56% with
   top -39.67% — a slice centred ~59% down in both. So: fit the width, take
   that slice, and the whole scene stays in frame at every size. */
.mada-shopgrid__card--wide {
	justify-content: center;
	background-size: 100% auto;
	/* Which band of the photo the slice lands on depends on the box ratio, so
	   no single % reproduces every frame exactly. Anchoring on the floor line
	   — the thing the design frames to — wants 84 at 2.0:1 (320), 79 at 1.6:1
	   (1024) and 87 at 2.6:1 (1920), so 82 sits within five points of all
	   three and keeps the whole scene (chair, side table, floor) in frame. */
	background-position: center 82%;
	background-repeat: no-repeat;
	background-color: var(--color-trust-80);     /* fills above/below the slice */
}
/* The copy side is darkened by a fade; the flat tint on top of it is drawn
   only in the 320 frame (4157:21068, rgba(0,15,50,.72) at 58%). Carrying it
   into the desktop frames is what greyed the teal out there. */
.mada-shopgrid__card--wide::before {
	background: linear-gradient(to left, rgba(0, 45, 78, 0.6), rgba(0, 45, 78, 0));
}
/* The fade must darken the side the copy sits on, which swaps with direction
   and is the one thing a gradient cannot express logically. */
[dir="rtl"] .mada-shopgrid__card--wide::before {
	background: linear-gradient(to right, rgba(0, 45, 78, 0.6), rgba(0, 45, 78, 0));
}
@media (max-width: 639px) {
	.mada-shopgrid__card--wide::before {
		background: linear-gradient(to left, rgba(0, 45, 78, 0.6), rgba(0, 45, 78, 0)), rgba(0, 15, 50, 0.42);
	}
	[dir="rtl"] .mada-shopgrid__card--wide::before {
		background: linear-gradient(to right, rgba(0, 45, 78, 0.6), rgba(0, 45, 78, 0)), rgba(0, 15, 50, 0.42);
	}
}
.mada-shopgrid__card > * { position: relative; margin: 0; }
/* Card type is authored literally: the design uses the SAME DS desktop styles
   in the 320 frame as in the 1920 one (Heading/Small 24/32, Heading/XSmall
   20/28, Paragraph/Small 14/20), so reading --fs-* would shrink them a step
   below 640. Only the featured heading actually steps. */
.mada-shopgrid__card h3 { font-weight: var(--fw-bold); font-size: 24px; line-height: 32px; color: var(--color-white); }
.mada-shopgrid__card--featured h3 { font-size: 24px; line-height: 32px; }
.mada-shopgrid__card--wide h3 { font-size: 24px; line-height: 32px; }
.mada-shopgrid__card p { font-size: 14px; line-height: 20px; color: rgba(248, 250, 252, 0.9); max-inline-size: 320px; }
.mada-shopgrid__card--wide p { font-size: 16px; line-height: 24px; max-inline-size: none; }
.mada-shopgrid__h-sm { font-size: 20px !important; line-height: 28px !important; }
.mada-shopgrid__chip {
	background-color: var(--color-liquid-mint);
	color: var(--color-trust-80);                /* #002C45 */
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-5);      /* 4 / 16 */
	font-size: 12px;
	line-height: 16px;
	font-weight: var(--fw-semibold);
	margin-block-end: var(--space-3);            /* 8 (+ the card's 8 gap = 16) */
}

/* ---- Shop CTA (gradient card) ---- */
.mada-shopcta {
	background-color: var(--color-white);
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom); /* 80 / 112 */
}
.mada-shopcta__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
}
/* Figma 4152:27000 — TrustBlue/80 base with a full-bleed mesh-gradient
   artwork (node 4152:27005) laid over it, r20, p80. The flat navy alone read
   as the wrong colour; the gradient is what makes the card slate-blue on one
   side and teal on the other. */
.mada-shopcta__card {
	position: relative;
	overflow: hidden;
	background-color: var(--color-trust-80);     /* #002C45 */
	background-image: url("../../images/shopper/cta-gradient.jpg");
	background-size: cover;
	background-position: center;
	border-radius: 20px;                         /* Figma */
	padding: var(--space-17);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}
/* Figma 4152:27006: 448px circle, MintPay @40%, blur 151.65, pinned near the
   card's inline-start and pulled above the top edge. */
.mada-shopcta__glow {
	position: absolute;
	inset-inline-start: 6px;
	inset-block-start: -186px;
	inline-size: 448px;
	block-size: 448px;
	background-color: rgba(0, 178, 175, 0.4);
	filter: blur(151.65px);
	border-radius: var(--radius-full);
	pointer-events: none;
}
.mada-shopcta__card h2 {
	position: relative;
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 60 */
	line-height: var(--lh-section);                  /* 72 */
	color: var(--color-white);
}
/* Figma 4152:27013: Poppins Medium 20/28 in Core/Black — the subtitle is dark
   on the gradient, not white. */
.mada-shopcta__card p {
	position: relative;
	margin: 0;
	font-weight: var(--fw-medium);
	font-size: var(--fs-xl);
	line-height: 28px;
	color: var(--color-black);                   /* #071124 */
	max-inline-size: 70ch;
}
.mada-shopcta__badges {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	padding-block-start: var(--space-4);
}
/* Client feedback p27: official store badges (provided images) — no more
   hand-built badge chrome. */
.mada-storebadge { display: inline-flex; }
/* S28: badge must keep its aspect ratio when the row gets narrow. */
.mada-storebadge img { display: block; block-size: 64px; inline-size: auto; object-fit: contain; max-inline-size: 100%; }

/* Round-4: "in the 320 view the buttons are vertical". They are a ROW in the
   design (4157:20981) — two 118.037 x 39.346 badges with a 3.927 gap, which
   is 240 inside the 256 the card leaves at 320. Ours were 64px tall, so at
   the official 228px badge width they needed 400 and wrapped. Below 640 the
   pair is sized by WIDTH instead, which is also how the store guidelines want
   the two badges matched; the 2.85 and 3.35 intrinsic ratios then give
   slightly different heights, so the row centres them. */
@media (max-width: 639px) {
	.mada-shopcta__badges { flex-wrap: nowrap; gap: 4px; }
	.mada-storebadge { flex: 0 1 118px; }
	.mada-storebadge img { inline-size: 100%; block-size: auto; }
}

/* ---- Responsive ---- */
@media (max-width: 639px) {
	/* Client feedback p28: step titles flow on one line when width allows. */
	.mada-sstep__title span { display: inline; }
	.mada-shopbanner__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-sstep__title { font-size: var(--fs-subsection); line-height: var(--lh-subsection); }
	.mada-sstep__no { font-size: var(--fs-7xl); line-height: 1.1; }
	.mada-sstep__bandtitle { font-size: var(--fs-section); line-height: var(--lh-section); }
	.mada-shopgrid__title { font-size: var(--fs-section); line-height: var(--lh-section); }
	/* 4152:22871 — header sits 32 above the bento here, 40 from 640 up. */
	.mada-shopgrid__inner { gap: var(--space-9); }
	.mada-shopcta__card { padding: var(--space-9); }
	.mada-shopcta__card h2 { font-size: var(--fs-section); line-height: var(--lh-section); }
	.mada-paycard__heading { font-size: var(--fs-2xl); line-height: 1.3; }
	/* Client feedback p29: section 02 overflowed the viewport on mobile — the
	   pay-card mock's fixed paddings + nowrap row exceeded 390px, shifting the
	   whole section's padding off against the other sections. Tighten it. */
	.mada-paycard { padding: var(--space-6) 0 0 var(--space-6); }
	[dir="rtl"] .mada-paycard { padding: var(--space-6) var(--space-6) 0 0; }
	.mada-paycard__panel { padding: var(--space-5); gap: var(--space-4); }
	.mada-paycard__rowline { padding: var(--space-4) var(--space-5); }
	.mada-paycard__active { font-size: var(--fs-sm); padding-block: var(--space-4); }
	.mada-paycard__pill { inline-size: 28px; }

	/* ---- Step 03's two cards at 320 (4152:22577) -------------------------
	   Both were laid out on the desktop numbers: 40px padding took 80 of the
	   288 card, leaving the mocks 208 to render in, and the headings ran at
	   the desktop ramp. The frame draws 16 padding, Heading/Small 24/32 and
	   Paragraph/Medium 16/24, which is what gives the mocks their full 256. */
	.mada-divide__zero { padding: var(--space-5); gap: var(--space-6); border-radius: var(--radius-xl); }   /* 16 / 20 / 12 */
	.mada-flex-band { padding: var(--space-5); gap: var(--space-7); border-radius: var(--radius-xl); }     /* 16 / 24 / 12 */

	/* The drawn mock replaces the export here — see steps.php. */
	.mada-divide__paycard { display: none; }
	.mada-payin4 {
		display: block;
		position: relative;
		inline-size: 100%;
		padding: 8px 12px;
		border-radius: 10.5px;
		background-color: var(--color-trust-5);  /* #EDF9FF */
	}

	/* 4157:20658 keeps "Zero interest." and "always." on ONE 32-tall line;
	   ours broke them into two blocks 16 apart at the desktop size. */
	.mada-divide__zerotext h4 { margin-block-end: var(--space-3); font-size: 24px; line-height: 32px; }
	/* Each half stays whole and the only break opportunity is BETWEEN them
	   (the markup has no whitespace there, hence the zero-width space), so it
	   sets as one line where it fits and as "Zero interest." / "always."
	   where it does not — never "Zero" / "interest.always.". */
	.mada-divide__zerotext h4 span { display: inline; margin-block-start: 0; white-space: nowrap; }
	.mada-divide__zerotext h4 span + span::before { content: "\200B"; }
	.mada-divide__zerotext p { font-size: 16px; line-height: 24px; }

	.mada-flex-band__text h4 { font-size: 24px; line-height: 32px; }
	.mada-flex-band__text p { font-size: 14px; line-height: 20px; }

	/* Months: markup tiles instead of the export — 4443:18015 draws four
	   60x90 tiles on one row with an 8 gap, label 12/16 and value 20/28. */
	.mada-flex-band__months { display: none; }
	.mada-flex-band__chips {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--space-3);                     /* 8 */
		inline-size: 100%;
	}
	.mada-flex-band__chip {
		flex: 1 1 0;
		min-inline-size: 0;
		block-size: 90px;
		gap: var(--space-4);                     /* 12 */
		padding: var(--space-3) var(--space-2);
		justify-content: flex-start;
	}
	.mada-flex-band__chip em { font-size: 12px; line-height: 16px; }
	.mada-flex-band__chip strong { font-size: 20px; line-height: 28px; }
}

/* Round-3 (Shopper S1): "revisit the breakpoint where the cards switch to
   a vertical layout … it should still be horizontal at 1024."  The row was
   gated at ≥1025, so the 1024 tablet frame stacked. It now turns at 1024 and
   only stacks below the tablet band. The ice card keeps its fixed 380 here
   (a flex-basis in the stacked column would size the BLOCK axis instead);
   at 1024 that leaves the teal card 960 − 24 − 380 = 556.
   (Section 2 — the shop bento — used to turn here too. Round-4 moved it to
   640, and its 1fr fallback away entirely; see the bento block above.) */
@media (min-width: 1024px) {
	.mada-divide { flex-direction: row; align-items: stretch; }
	.mada-divide__auto { flex: 0 0 380px; }      /* fixed width; teal takes the rest */
}

/* Round-4: "the Choose-payment-process card size is different from Figma at
   799-800 and 1024." Measured on the 1024 frame (4152:20671): the ice card is
   460x460 with the navy panel inset 53 from the left and 77 from the top, the
   heading is one 24/32 line and "Pay later with mada" is one 16/24 line. Ours
   carried the desktop 36/40 heading and 22/34 active row into this band, which
   wrapped both to two lines and pushed the card to 439x500 — narrower and
   taller than the design. 1025 and up is untouched, as asked. */
@media (min-width: 700px) and (max-width: 1024px) {
	/* Figma does not redraw this mock per frame — it SCALES the whole group,
	   so the 800 frame is the 1024 one at two thirds (heading 16 vs 24, rows
	   ~30 vs 45). Everything below is therefore a multiple of one size that
	   interpolates 16 -> 24 across 800 -> 1024, which reproduces both frames
	   and every width between them. Ours had the 1024 numbers frozen across
	   the band, so at 800 the heading ran to three lines and the card grew
	   taller and narrower than the design. */
	.mada-paycard {
		--pc: clamp(16px, calc(16px + (100vw - 800px) * 0.03571), 24px);
		padding-block-start: calc(var(--pc) * 3.208);   /* 77 at 24 */
		padding-inline-start: calc(var(--pc) * 2.208);  /* 53 */
	}
	[dir="rtl"] .mada-paycard {
		padding-block-start: calc(var(--pc) * 3.208);
		padding-inline-start: calc(var(--pc) * 2.208);
	}
	.mada-paycard__panel { padding: calc(var(--pc) * 1.792); gap: calc(var(--pc) * 0.792); }
	.mada-paycard__heading {
		margin-block-end: calc(var(--pc) * 0.167);
		font-size: var(--pc);
		line-height: calc(var(--pc) * 1.333);
	}
	.mada-paycard__rowline { padding: calc(var(--pc) * 0.5) calc(var(--pc) * 0.833); }
	.mada-paycard__bars span { block-size: calc(var(--pc) * 0.333); }
	.mada-paycard__active {
		padding: calc(var(--pc) * 0.5) calc(var(--pc) * 0.833);
		font-size: calc(var(--pc) * 0.667);
		line-height: var(--pc);
	}
	.mada-paycard__dot,
	.mada-paycard__radio { inline-size: calc(var(--pc) * 0.75); block-size: calc(var(--pc) * 0.75); }
	.mada-paycard__radio { border-width: calc(var(--pc) * 0.208); }
	.mada-paycard__pill { inline-size: calc(var(--pc) * 1.167); block-size: calc(var(--pc) * 0.833); }
	.mada-paycard__logo { inline-size: calc(var(--pc) * 1.167); block-size: calc(var(--pc) * 1.167); }
}

/* Round-4: "the picture of the lady should be moved to the right at 799-800
   and 1024, as it already is at 1025." The numbered steps put their visual
   beside the copy from well below the desktop band - the 800 frame
   (4152:21210) draws the text at ~338 and the image at ~343 inside a 736
   container, and 1024 (4152:20633) does the same. Only the 640 frame stacks
   (4152:21787 is 1428 tall against 800's 926). There is no Shopper frame
   between 640 and 800, so the turn is set at 700: it covers both widths the
   client tested and leaves 640 stacked, which is what the design draws.
   The two cards inside step 03 are NOT part of this - they stay stacked
   until 1025 (see the 800 frame 4152:21425). */
@media (min-width: 700px) {
	/* 40 is the 1024 frame's own column gap (4152:20672: 460 + 40 + 460 = the
	   960 container). The 80 below 1025 stays as it was. */
	.mada-sstep__row { flex-direction: row; gap: var(--space-11); }
	.mada-sstep--dark .mada-sstep__row,
	.mada-sstep--grey .mada-sstep__row { align-items: center; }
}

@media (min-width: 1025px) {
	.mada-sstep__row { gap: var(--space-17); }
	.mada-divide__zero { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.mada-flex-band { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Shop bento, >=640 ---------------------------------------------------
   The featured column is exactly half the container minus half the gap at
   EVERY frame — 756 of 1536, 506 of 1036, 468 of 960, 356 of 736, 276 of 576,
   436.5 of 897 — i.e. calc(50% - 12px). The two smalls then split what is
   left, which lands them on 366 / 241 / 222 / 166 / 126 / 206 exactly. This
   is why fr units alone could never match: the featured-to-small ratio drifts
   with the container (2.07 at 1920, 2.19 at 640). */
@media (min-width: 640px) {
	.mada-shopgrid__grid {
		grid-template-columns: calc(50% - 12px) 1fr 1fr;
		grid-template-rows: repeat(2, 288px);
		gap: var(--space-7);                     /* 24 */
	}
	.mada-shopgrid__card--featured { grid-column: 1; grid-row: 1 / 3; }
	.mada-shopgrid__card--sm       { grid-row: 1; grid-column: auto; }
	.mada-shopgrid__card--wide     { grid-column: 2 / 4; grid-row: 2; }

	/* Paddings step with the card: featured/wide 40, smalls 24 (4155:20592). */
	.mada-shopgrid__card--featured,
	.mada-shopgrid__card--wide { padding: var(--space-11); }   /* 40 */
	.mada-shopgrid__card--sm { padding: var(--space-7); }      /* 24 */
	/* Only the featured heading steps up — Heading/Large 36/40 (4155:20586). */
	.mada-shopgrid__card--featured h3 { font-size: 36px; line-height: 40px; }
}

/* S27: the Section 2 cards became links (they filter the catalog), so they need
   base.css's a:hover underline cancelled at matching specificity — the same
   trap that struck a line through the catalog cards. Lift instead. */
a.mada-shopgrid__card {
	text-decoration: none;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
a.mada-shopgrid__card:hover,
a.mada-shopgrid__card:focus-visible {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
a.mada-shopgrid__link:hover,
a.mada-shopgrid__link:focus-visible { text-decoration: none; color: var(--color-primary); }

/* The official store badges are links, so base.css's a:hover was underlining
   the alt-text baseline under the artwork. Cancel it (deep audit finding). */
a.mada-storebadge,
a.mada-storebadge:hover,
a.mada-storebadge:focus-visible { text-decoration: none; }