/* ==========================================================================
   Donaloop section primitives
   New markup blocks (not overrides) used to build the redesigned marketing
   pages (Home, How it Works, Our Cause) on top of the tokens in
   donaloop-tokens.css. Reused across all three pages for the "one section =
   one colour band" rhythm described in the design system readme.
   ========================================================================== */

.dl-section {
	padding: var(--section-y) 0;
}
.dl-section--sm { padding: var(--section-y-sm) 0; }
.dl-section--white { background: var(--surface-page); color: var(--text-body); }
.dl-section--sand { background: var(--surface-sand); color: var(--text-body); }
.dl-section--muted { background: var(--surface-muted); color: var(--text-body); }
.dl-section--navy { background: var(--surface-invert); color: var(--text-on-dark); }
.dl-section--black { background: var(--surface-black); color: var(--text-on-dark); }
/* Full-bleed image hero (Section's `image` prop) — cause-screen.kit.js's own
   hero. Combine with .dl-section--navy for the onDark heading/eyebrow/rule
   color treatment; the image + scrim is applied inline per-page since the
   image itself varies. */
.dl-section--image { background-size: cover; background-position: center; }
/* Higher specificity than jaidee-style.css's ".container .row h1/h2/h3" rules
   (0,3,1) so CMS-authored headings inside a dark band stay readable. */
.dl-section--navy h1, .dl-section--navy h2, .dl-section--navy h3,
.dl-section--navy .container .row h1, .dl-section--navy .container .row h2, .dl-section--navy .container .row h3,
.dl-section--black h1, .dl-section--black h2, .dl-section--black h3,
.dl-section--black .container .row h1, .dl-section--black .container .row h2, .dl-section--black .container .row h3 {
	color: var(--white);
}
.dl-section--navy p, .dl-section--navy li, .dl-section--navy .dl-lede,
.dl-section--black p, .dl-section--black li, .dl-section--black .dl-lede {
	color: var(--text-on-dark-muted);
}

/* SectionHeading: eyebrow (12px/1.3, bold, wide tracking, accent) → heading
   (black weight, display font, -.02em tracking) → 4px/88px accent rule
   (margin-top:20px) → optional lede. Exact values from components/core/SectionHeading.jsx */
.dl-eyebrow {
	display: block;
	font-size: var(--fs-micro);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--brand-accent);
	margin-bottom: var(--space-3);
}
.dl-section--navy .dl-eyebrow, .dl-section--black .dl-eyebrow { color: var(--orange-300); }
.dl-heading {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-display);
	line-height: var(--lh-heading);
	color: var(--text-strong);
	margin: 0;
}
h1.dl-heading, .dl-heading--h1 { font-size: var(--fs-display-lg); line-height: var(--lh-display); }
h2.dl-heading, .dl-heading--h2 { font-size: var(--fs-h2); }
h3.dl-heading, .dl-heading--h3 { font-size: var(--fs-h3); }
.dl-section--navy .dl-heading, .dl-section--black .dl-heading { color: var(--white); }
.dl-rule {
	display: block;
	width: 88px;
	height: var(--rule-width);
	background: var(--brand-accent);
	margin-top: var(--space-5);
}
.dl-section--navy .dl-rule, .dl-section--black .dl-rule { background: var(--white); }
.text-center .dl-rule { margin-left: auto; margin-right: auto; }
.dl-lede {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--text-muted);
	margin: var(--space-4) 0 0;
	max-width: 62ch;
}
.dl-lede + .dl-btn, .dl-lede + .dl-btn-row { margin-top: var(--space-6); }
/* The stats-band copy next to a SectionHeading isn't a generic muted lede —
   home-screen.kit.js styles it separately: 16px/1.75, fw-medium, solid white
   (not --text-on-dark-muted). */
.dl-lede.dl-lede--strong {
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	font-weight: var(--fw-medium);
	color: var(--white);
	max-width: none;
}
/* The app-download band's copy (black section) also isn't a generic muted
   lede — its own inline style in home-screen.kit.js: 18px/1.65, fw-regular,
   color ink-200 specifically (not --text-on-dark-muted/navy-100). */
.dl-lede.dl-lede--app {
	font-size: var(--fs-body-lg);
	line-height: 1.65;
	font-weight: var(--fw-regular);
	color: var(--ink-200);
	max-width: 48ch;
	margin-top: var(--space-4);
}
/* Cause band's own copy: 16px/1.7, fw-regular, --text-body (darker than the
   generic --text-muted every other .dl-lede uses), max-width 46ch. */
.dl-lede.dl-lede--cause {
	font-size: var(--fs-body);
	line-height: 1.7;
	font-weight: var(--fw-regular);
	color: var(--text-body);
	max-width: 46ch;
	margin: 0 0 var(--space-6);
}
/* .dl-btn is inline-flex, not block, so its margin-top doesn't collapse with
   a preceding block's margin-bottom the way two blocks would — the generic
   ".dl-lede + .dl-btn" rule below was stacking its own space-6 on top of
   this paragraph's own space-6 bottom margin, doubling the gap to 48px. */
.dl-lede--cause + .dl-btn { margin-top: 0; }

/* Buttons — 3 sizes (sm/md/lg) + variants, per components/core/Button.jsx */
.dl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
	/* <button> elements don't reliably inherit font-family from the page in
	   every browser/reset combo — set it explicitly rather than relying on
	   inheritance, since the header's login button (a real <button>) was
	   silently falling back to a generic sans-serif instead of the brand font. */
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-control, background-color var(--dur-base) var(--ease-out));
	border: 1px solid transparent;
	box-sizing: border-box;
}
.dl-btn:hover { text-decoration: none; }
/* brand-buttons.card.html's documented interaction states — press shrinks
   1.5%, focus is an orange ring, disabled is a flat ink-200/text-subtle fill
   regardless of tone. Previously only :hover was implemented per-variant. */
.dl-btn:active { transform: scale(var(--press-scale)); }
/* Without this, a mouse/tap click can still show the browser's default focus
   outline around the button (visible as a stray border on the flat-color
   variants) in engines that don't treat a click as :focus-visible. */
.dl-btn:focus { outline: none; }
.dl-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dl-btn:disabled, .dl-btn.disabled {
	background: var(--ink-200) !important;
	color: var(--text-subtle) !important;
	border-color: var(--ink-200) !important;
	box-shadow: none !important;
	cursor: not-allowed;
	transform: none;
}
/* default (no size class) = lg, used for hero/section CTAs */
.dl-btn, .dl-btn--lg { height: 54px; padding: 0 32px; font-size: var(--fs-body); }
.dl-btn--md { height: 44px; padding: 0 22px; font-size: var(--fs-body-sm); }
.dl-btn--sm { height: 34px; padding: 0 14px; font-size: var(--fs-caption); }
.dl-btn--primary { background: var(--brand-accent); color: var(--text-on-accent); border-color: var(--brand-accent); }
.dl-btn--primary:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--white); box-shadow: var(--shadow-accent); }
/* onDark: white-filled pill with navy text — the only "secondary" treatment that
   exists on a navy/black band, per Button.jsx (there is no outline variant) */
.dl-btn--onDark { background: var(--white); color: var(--brand-primary); border-color: var(--white); }
.dl-btn--onDark:hover { background: var(--navy-50); color: var(--brand-primary); }
.dl-btn--ghost { background: transparent; color: var(--brand-primary); border-color: transparent; }
.dl-btn--ghost:hover { background: var(--navy-50); }
/* navy: solid brand-navy fill — Button.jsx's "primary" tone (name kept as
   --navy here since --primary was already taken by the orange/accent tone
   above when this was first built). Used for secondary CTAs on light bands,
   e.g. hero's "How it Works". */
.dl-btn--navy { background: var(--brand-primary); color: var(--text-on-dark); border-color: var(--brand-primary); }
.dl-btn--navy:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: var(--white); }
/* danger: not one of Button.jsx's tones, but the app has real destructive
   actions (remove item, delete row) that used Bootstrap's btn-danger — give
   them a matching solid-red treatment from the existing red-5/600 tokens
   rather than leaving them on old Bootstrap styling or forcing brand-accent
   orange onto a delete button. */
.dl-btn--danger { background: var(--red-500); color: var(--white); border-color: var(--red-500); }
.dl-btn--danger:hover { background: var(--red-600); border-color: var(--red-600); color: var(--white); }
/* secondary: Button.jsx's actual "secondary" tone — white fill with a visible
   navy outline (unlike onDark, whose border is white and only reads on a
   dark band). Used on light bands, e.g. how-it-works hero's "Create an
   account". */
.dl-btn--secondary { background: var(--white); color: var(--brand-primary); border-color: var(--brand-primary); }
.dl-btn--secondary:hover { background: var(--navy-50); }
.dl-btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* Two-column section grid — heading/copy paired layouts (impact stats, app
   download) per home-screen.kit.js's inline grid usage. */
.dl-two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gutter); align-items: start; }
.dl-two-col--center { align-items: center; }
.dl-two-col--auto-end { grid-template-columns: minmax(0,1fr) auto; }
/* Cause band's own ratio: minmax(0,1fr) minmax(0,1.1fr) per home-screen.kit.js */
.dl-two-col--cause { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
/* How it Works FAQ band's own ratio: minmax(0,1.1fr) minmax(0,1fr) — the
   accordion column is wider, per how-it-works-screen.kit.js */
.dl-two-col--faq { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
@media (max-width: 767px) {
	.dl-two-col, .dl-two-col--auto-end, .dl-two-col--cause, .dl-two-col--faq { grid-template-columns: 1fr; }
}

/* How it Works — 3-step cards (Section tone="white") */
.dl-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.dl-step-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-7);
}
.dl-step-card i { font-size: 34px; color: var(--brand-accent); }
.dl-step-card h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1.25; color: var(--brand-primary); }
.dl-step-card p { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--text-muted); }
@media (max-width: 767px) { .dl-step-grid { grid-template-columns: 1fr; } }

/* How it Works — "where does the money come from" breakdown rows (navy) */
.dl-lede.dl-lede--navy-copy { font-size: var(--fs-body); line-height: 1.75; font-weight: var(--fw-regular); color: var(--white); max-width: none; margin: 0; }
.dl-money-rows { display: grid; gap: var(--space-3); }
.dl-money-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: rgba(255,255,255,.08);
	border: var(--border-width) solid var(--border-invert);
	border-radius: var(--radius-md);
}
.dl-money-who { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h5); line-height: 1; min-width: 96px; }
.dl-money-what { font-weight: var(--fw-medium); font-size: var(--fs-body-sm); line-height: 1.4; color: var(--white); }

/* How it Works — FAQ accordion */
.dl-accordion { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.dl-accordion-item { border-top: var(--border-width) solid var(--border-subtle); }
.dl-accordion-item:first-child { border-top: none; }
.dl-accordion-trigger {
	width: 100%; display: flex; align-items: center; gap: var(--space-4); text-align: left;
	padding: 18px 20px; border: 0; cursor: pointer; background: var(--white);
	font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1.4;
	color: var(--text-strong); transition: var(--transition-control);
}
.dl-accordion-trigger span { flex: 1; }
.dl-accordion-trigger i { color: var(--brand-accent); }
.dl-accordion-item.active .dl-accordion-trigger { background: var(--surface-muted); color: var(--brand-primary); }
.dl-accordion-panel { display: none; padding: 0 20px 20px; font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--text-muted); }
.dl-accordion-item.active .dl-accordion-panel { display: block; }

/* How it Works — trust badge + testimonials column */
.dl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-weight: var(--fw-bold); font-size: var(--fs-caption); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; border-radius: var(--radius-pill); }
.dl-badge--outline { color: var(--brand-primary); background: transparent; border: var(--border-width) solid var(--brand-primary); }
.dl-testimonial-col { display: flex; flex-direction: column; gap: var(--space-6); }
.dl-testimonial { margin: 0; display: flex; gap: var(--space-5); align-items: flex-start; }
.dl-testimonial-body { flex: 1; background: var(--surface-muted); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7); }
.dl-testimonial-body i.fa-quote-left { font-size: 18px; color: var(--brand-accent); margin-bottom: var(--space-4); display: block; }
.dl-testimonial-body blockquote { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.7; color: var(--text-muted); }
.dl-testimonial-caption { margin-top: var(--space-5); text-align: right; }
.dl-testimonial-caption .name { font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: 1.3; color: var(--text-strong); }
.dl-testimonial-caption .role { font-weight: var(--fw-regular); font-size: var(--fs-caption); line-height: 1.3; color: var(--text-subtle); }

/* Hero — replaces the old illustrated carousel banner. Grid/spacing exact
   values from components/layout/PageHero.jsx. */
.dl-hero { padding: var(--section-y-sm) 0; background: var(--surface-page); }
.dl-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--gutter); align-items: center; }
.dl-hero-title {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-display-lg);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--text-strong);
	margin: 0 0 var(--space-5);
}
.dl-hero-text .dl-lede { max-width: 46ch; margin: 0 0 var(--space-7); }
.dl-hero-text .dl-btn-row { margin-top: 0; }
.dl-hero-text .dl-app-badges { justify-content: flex-start; margin-top: var(--space-6); }
.dl-hero-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.dl-hero-media img { min-height: 260px; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; }
@media (max-width: 767px) {
	.dl-hero-grid { grid-template-columns: 1fr; }
	.dl-hero-media { order: -1; }
}

/* Brand wall — exact values from the inline styles in home-screen.kit.js's
   "Shop 500+ Major Brands" band (label + chip grid, not a carousel). Used as
   a coded placeholder since the real retailer list is CMS-driven and the
   design shows a fixed 8-name wall, not a scrolling logo strip. */
.dl-brandwall { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; }
.dl-brandwall-label {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: var(--ls-display);
	color: var(--text-strong);
	flex: 0 0 220px;
}
.dl-brandwall-grid {
	flex: 1;
	min-width: 260px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: var(--space-4);
	align-items: center;
}
.dl-brandwall-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Spec's inline style is content-box height:68px (no box-sizing set), so its
	   rendered box is 68 + 2*8px padding + 2*1px border = 86px. This project
	   resets everything to border-box (Bootstrap's reboot), so the height has
	   to include padding/border explicitly to land on the same 86px. */
	height: 86px;
	padding: 8px;
	background: var(--white);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-sm);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	line-height: 1.25;
	color: var(--text-muted);
}
.dl-brandwall-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 68px;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-h5);
	line-height: 1.2;
	color: var(--text-strong);
}
.dl-brandwall-note { text-align: center; font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-3); }

/* Stat tiles — a card, per components/core/StatTile.jsx (value is navy/white,
   never orange; 3-col grid with 20px gap, 80px margin above the row) */
.dl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-11); }
.dl-stat-tile {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--surface-sand);
	border: 1px solid var(--orange-100);
}
.dl-section--navy .dl-stat-tile, .dl-section--black .dl-stat-tile {
	background: rgba(255,255,255,.08);
	border-color: var(--border-invert);
}
.dl-stat-tile .dl-stat-value {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-display);
	line-height: 1.1;
	color: var(--brand-primary);
	display: block;
}
.dl-section--navy .dl-stat-tile .dl-stat-value, .dl-section--black .dl-stat-tile .dl-stat-value { color: var(--white); }
.dl-stat-tile .dl-stat-label {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	color: var(--text-muted);
	overflow-wrap: break-word;
	word-break: break-word;
}
.dl-section--navy .dl-stat-tile .dl-stat-label, .dl-section--black .dl-stat-tile .dl-stat-label { color: var(--text-on-dark-muted); }
@media (max-width: 767px) {
	.dl-stats { grid-template-columns: 1fr; }
}

/* "Where would you like to shop?" — segmented Tabs (navigation/Tabs.jsx,
   variant="segmented") + category tile grid (commerce/CategoryTile.jsx).
   Tab switching is done with a small vanilla JS toggle in home.blade.php
   rather than a framework, matching the rest of the jQuery-based stack. */
.dl-tabs-wrap { display: flex; justify-content: center; margin-bottom: var(--space-7); }
.dl-tabs { display: flex; gap: 0; background: var(--ink-50); padding: 4px; border-radius: var(--radius-sm); }
.dl-tabs-btn {
	border: 0;
	cursor: pointer;
	background: transparent;
	padding: 8px 16px;
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	line-height: 1.2;
	color: var(--text-muted);
	border-radius: var(--radius-xs);
	box-shadow: none;
	text-decoration: none;
	display: inline-block;
	transition: var(--transition-control);
}
.dl-tabs-btn:hover, .dl-tabs-btn:focus { text-decoration: none; color: var(--text-muted); }
.dl-tabs-btn.active { background: var(--white); color: var(--brand-primary); box-shadow: var(--shadow-xs); }

.dl-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.dl-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 104px;
	min-width: 0;
	box-sizing: content-box;
	padding: var(--space-4) var(--space-3);
	text-align: center;
	text-decoration: none;
	background: var(--navy-50);
	color: var(--brand-primary);
	border: var(--border-width) solid var(--navy-100);
	border-radius: var(--radius-md);
	transition: var(--transition-control);
}
.dl-category-tile:hover, .dl-category-tile.active {
	background: var(--brand-primary);
	color: var(--white);
	border-color: var(--brand-primary);
	text-decoration: none;
}
.dl-category-tile i { font-size: 24px; }
.dl-category-tile-label { font-weight: var(--fw-bold); font-size: var(--fs-micro); line-height: 1.3; overflow-wrap: break-word; }
@media (max-width: 991px) { .dl-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dl-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* News cards — exact values from components/commerce/NewsCard.jsx. The whole
   card is a single link; image/meta/title/excerpt/CTA are one flex column so
   the "Read more" line pins to the bottom of uneven-height cards. */
.dl-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.dl-news-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--surface-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--border-width) solid var(--border-subtle);
	box-shadow: none;
	transition: box-shadow var(--dur-base) var(--ease-out);
}
.dl-news-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.dl-news-card-media { height: 200px; overflow: hidden; background: var(--ink-50); }
.dl-news-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.dl-news-card:hover .dl-news-card-media img { transform: scale(1.03); }
.dl-news-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dl-news-card-meta {
	font-weight: var(--fw-bold);
	font-size: var(--fs-micro);
	line-height: 1;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--brand-accent);
}
.dl-news-card-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h5);
	line-height: 1.35;
	color: var(--text-strong);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dl-news-card-excerpt {
	margin: 0;
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dl-news-card-cta {
	margin-top: auto;
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	line-height: 1;
	color: var(--brand-accent);
}
.dl-news-card:hover .dl-news-card-cta { color: var(--brand-accent-hover); }
@media (max-width: 767px) {
	.dl-news-grid { grid-template-columns: 1fr; }
}

/* App download badges */
.dl-app-badges { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.dl-app-badges img { height: 48px; width: auto; }
.dl-app-badges--end { justify-content: flex-end; margin-top: 0; }
@media (max-width: 767px) {
	.dl-app-badges--end { justify-content: center; margin-top: var(--space-6); }
}

/* Cause widget — CauseWidget.jsx has no max-width or box-shadow at all (it's
   a plain flex div that fills its container); the home-screen usage overrides
   only background (white) and padding (space-6). Gap is the component's own
   default, space-4, not space-5. */
.dl-cause-widget {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.dl-cause-widget img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); flex: 0 0 56px; }
.dl-cause-widget .dl-cause-name { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-strong); }
.dl-cause-widget .dl-cause-amount {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-h5);
	line-height: 1.2;
	color: var(--brand-accent);
	display: block;
	margin: 2px 0;
}
.dl-cause-widget .dl-cause-caption { font-size: var(--fs-micro); line-height: 1.45; color: var(--text-muted); }
/* CauseWidget.jsx's actual default (onDark=false, no override) — surface-muted
   bg + component's own space-4 padding, used as-is by login-screen.kit.js. */
.dl-cause-widget--default { background: var(--surface-muted); padding: var(--space-4); }

/* How it Works — 3-step "how-work" cards (page-howitworks page-section-4).
   how-it-works-screen.kit.js overrides Card's own 20px default padding to 32px. */
.page-howitworks .page-section-4 .how-work {
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	padding: var(--space-7);
}
.page-howitworks .page-section-4 img { border-radius: var(--radius-sm); }

/* Category tiles (restyle of the shared #categories-carousel block).
   CategoryTile.jsx default state is LIGHT (navy-50 bg / navy text / navy-100
   border); it only fills solid navy on hover/active. The legacy markup splits
   icon + label into two stacked divs inside <li> — style the <li> itself as
   the single card so both pieces read as one tile, matching min-height 104px
   / padding 16px 12px / radius 10px / gap 10px from the spec. */
#categories-carousel.owl-carousel .owl-item li.category_nav_shop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 104px;
	padding: var(--space-4) var(--space-3);
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
	border-radius: var(--radius-md);
	transition: var(--transition-control);
}
#categories-carousel.owl-carousel .owl-item li.category_nav_shop:hover {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}
#categories-carousel .icon { margin: 0; padding: 0; }
#categories-carousel .icon i { color: var(--brand-primary); font-size: 24px; }
#categories-carousel li.category_nav_shop:hover .icon i { color: var(--white); }
#categories-carousel .cate-title { background: transparent; padding: 0; min-height: 0; display: block; width: 100%; }
#categories-carousel .cate-title a { display: block; color: var(--brand-primary); font-weight: var(--fw-bold); font-size: var(--fs-micro); }
#categories-carousel li.category_nav_shop:hover .cate-title a { color: var(--white); }
#categories-carousel .owl-item .cate-title, #categories-carousel:after { border-right: 0; background: transparent; }

@media (max-width: 767px) {
	.dl-section { padding: var(--section-y-sm) 0; }
	.dl-stats { gap: var(--space-5); }
}

/* Our Cause page */
.dl-stats-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.dl-stats-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
.dl-cause-copy { margin: var(--space-5) 0 0; font-size: var(--fs-body); line-height: 1.75; font-weight: var(--fw-regular); color: var(--text-body); }
.dl-cause-copy--strong { font-weight: var(--fw-medium); color: var(--text-strong); }
.dl-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.dl-work-card { padding: var(--space-6); background: rgba(255,255,255,.08); border: var(--border-width) solid var(--border-invert); border-radius: var(--radius-md); }
.dl-work-card i { font-size: 30px; color: var(--orange-400); }
.dl-work-card h3 { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: 1.25; color: var(--white); }
.dl-work-card p { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--navy-100); }
@media (max-width: 767px) {
	.dl-stats-2x2 { grid-template-columns: 1fr; }
	.dl-stats-4 { grid-template-columns: 1fr 1fr; }
	.dl-work-grid { grid-template-columns: 1fr; }
}

/* Back-to-home utility bar — the design bundle's own "not yet designed"
   placeholder pages (e.g. the shopping directory's own index) all carry a
   slim bar like this directly under the header, for pages that aren't the
   marketing site's own top-level nav destinations. */
.dl-back-bar { background: var(--navy-900); padding: var(--space-3) 0; }
.dl-back-bar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--white);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-caption);
	text-decoration: none;
}
.dl-back-bar a:hover { color: var(--white); text-decoration: underline; }

/* ==========================================================================
   Stores directory (Shop Online) — matches shopping/store-list-screen.kit.js:
   cause strip + breadcrumb under the header, a static category tile grid
   (reusing .dl-category-grid/.dl-category-tile from the home page), a
   bordered "Refine results" sidebar card, an "All stores" heading + count
   pill, a 3-up store card grid, and numbered pagination.
   ========================================================================== */

/* Exact spec from shop-chrome.kit.js's MemberCauseStrip (navy-800, not the
   generic --surface-invert navy-700) wrapping an onDark CauseWidget.jsx. */
.dl-cause-strip { background: var(--navy-800); padding: var(--space-4) 0; }
.dl-cause-strip-inner { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.dl-cause-strip-left { display: flex; align-items: center; gap: var(--space-4); flex: 1 1 320px; }
.dl-cause-strip-left img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.dl-cause-strip-name { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-caption); line-height: 1.35; color: var(--white); }
.dl-cause-strip-amount { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h5); line-height: 1.2; color: var(--orange-300); }
.dl-cause-strip-caption { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-micro); line-height: 1.45; color: var(--navy-100); }
.dl-cause-strip-note { margin-left: auto; font-family: var(--font-text); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: 1.5; color: var(--navy-100); max-width: 34ch; }

/* Exact Breadcrumb.jsx spec. */
.dl-breadcrumb-bar { background: var(--surface-page); border-bottom: var(--border-width) solid var(--border-subtle); padding: var(--space-3) 0; }
.dl-breadcrumb-bar nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: 1.4; }
.dl-breadcrumb-bar a { color: var(--brand-accent); text-decoration: none; }
.dl-breadcrumb-bar a:hover { text-decoration: underline; }
.dl-breadcrumb-bar .dl-breadcrumb-current { color: var(--text-muted); }
.dl-breadcrumb-bar .dl-breadcrumb-sep { color: var(--text-subtle); font-size: 11px; }

.dl-category-tile-row { margin: var(--space-6) 0; }
/* store-list-screen.kit.js's own grid — NOT the same as home-screen's
   .dl-category-grid (fixed repeat(5,...)). This one is
   repeat(auto-fill,minmax(150px,1fr)), which is what produces 6 tiles per
   row at the page's 1140px container width; a fixed column count would drift
   from the design at other widths. Kept as its own class so this page's grid
   can't accidentally change the already-approved Home page grid. */
.dl-store-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
/* Exact spec from CategoryTile.jsx: fw-medium/fs-micro/1 line-height, font-text,
   opacity .7 on the inherited (currentColor) text — not a separate muted token,
   so it dims correctly against both the light and hover (navy-filled) states. */
.dl-category-tile-count { display: block; font: var(--fw-medium) var(--fs-micro)/1 var(--font-text); opacity: .7; }

.dl-refine-card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--ink-900);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
	/* Sticks the filter card as the (much taller, paginated) store grid scrolls
	   past it, instead of ending partway down a page of results. */
	position: sticky;
	top: var(--space-5);
}
@media (max-width: 767px) {
	.dl-refine-card { position: static; }
}
/* Every size/weight/line-height below is copied from the design system's own
   component source (_ds_bundle.js: Card/SectionHeading title row, Select's
   label+control, SearchInput, Checkbox, and the kit's own inline "by letter"
   buttons) rather than approximated, per the exact-match requirement. */
.dl-refine-title {
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-width) solid var(--border-subtle);
	font-family: var(--font-display);
	/* !important: a legacy ".container .row h3" rule (jaidee-style.css) has higher
	   specificity than this class alone and was silently overriding size/weight/color. */
	font-weight: var(--fw-bold) !important;
	font-size: var(--fs-h5) !important;
	line-height: 1.3;
	color: var(--text-strong) !important;
}
.dl-refine-search {
	display: flex;
	align-items: stretch;
	margin-bottom: var(--space-5);
	background: var(--white);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: var(--transition-control);
}
.dl-refine-search:focus-within { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--orange-100); }
.dl-refine-search i { align-self: center; padding: 0 0 0 14px; color: var(--text-subtle); }
.dl-refine-search input {
	flex: 1;
	min-width: 0;
	height: var(--control-h);
	border: 0;
	outline: none;
	background: transparent;
	padding: 0 12px;
	font-family: var(--font-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-sm);
	line-height: 1;
	color: var(--text-strong);
}
.dl-refine-label { display: block; font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-micro); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3); }
/* Selects/inputs/buttons don't reliably inherit font-family from the page in
   every browser (same issue .dl-btn already works around) — set it explicitly
   on every new form control in this sidebar rather than relying on inheritance. */
.dl-refine-select {
	margin-bottom: var(--space-5);
	height: var(--control-h);
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-sm);
	line-height: 1;
	color: var(--text-strong);
}
.dl-refine-checkbox { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-5); }
/* Custom checkbox — exact Checkbox.jsx spec: native input hidden/absolute, a
   20px square span drawn in its place (filled brand-primary + fa-check when
   checked), so it doesn't fall back to the browser's default checkbox look. */
.dl-refine-checkbox label {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-sm);
	line-height: 1.45;
	color: var(--text-body);
	cursor: pointer;
	/* jaidee-style.css's global "form label { text-transform: uppercase }"
	   otherwise leaks into any checkbox inside a <form> — Checkbox.jsx's own
	   label text is plain sentence case. */
	text-transform: none;
}
.dl-refine-checkbox label:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.dl-refine-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.dl-refine-checkbox .dl-checkbox-box {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-xs);
	border: var(--border-width-thick) solid var(--border-strong);
	background: var(--white);
	color: var(--white);
	font-size: 11px;
	transition: var(--transition-control);
}
.dl-refine-checkbox .dl-checkbox-box i { display: none; }
.dl-refine-checkbox input[type="checkbox"]:checked + .dl-checkbox-box { background: var(--brand-primary); border-color: var(--brand-primary); }
.dl-refine-checkbox input[type="checkbox"]:checked + .dl-checkbox-box i { display: inline; }
.dl-letter-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: var(--space-5); }
.dl-letter-btn {
	width: 28px;
	height: 28px;
	border: var(--border-width) solid var(--border-subtle);
	background: var(--white);
	border-radius: var(--radius-xs);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-micro);
	line-height: 1;
	color: var(--text-muted);
	cursor: pointer;
}
.dl-letter-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.dl-letter-btn.letter_active { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--white); }
/* Ghost-button spec (Button.jsx variant="ghost" size="sm" block): transparent
   bg, brand-primary text, full-width, centered — not a left-aligned link. */
.dl-clear-filters {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--control-h-sm);
	box-sizing: border-box;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-caption);
	color: var(--brand-primary);
	text-decoration: none;
	transition: var(--transition-control);
}
.dl-clear-filters:hover { background: var(--navy-50); color: var(--brand-primary); text-decoration: none; }

.dl-stores-heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
/* Specificity 0,3,1 — needs to beat both jaidee-style.css's ".container .row h1"
   and the ".page-stores h1.dl-category-title" rule above it (both 0,2,1). */
.page-stores .dl-stores-heading-row h1.dl-category-title { margin: 0; }
/* Exact Badge.jsx tone="outline" (default, non-"lg" size). */
.dl-stores-count-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: var(--border-width) solid var(--brand-primary);
	border-radius: var(--radius-pill);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-micro);
	line-height: 1.3;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--brand-primary);
	background: transparent;
	white-space: nowrap;
}
.dl-store-toolbar { margin-bottom: var(--space-3); }
.dl-add-shortcut-link { padding: 0; font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-caption); color: var(--text-muted); }
.dl-add-shortcut-link:hover { color: var(--brand-primary); }

.dl-store-card-col { margin-bottom: var(--space-5); }
/* Brief dim while an AJAX filter/pagination request for #dl-store-results is in flight. */
#dl-store-results.dl-loading { opacity: .5; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.dl-store-card { position: relative; height: 100%; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out); }
.dl-store-card:hover { box-shadow: var(--shadow-md); }
/* Exact StoreCard.jsx "tag" prop spec — a decorative corner flag, not tied to
   any real recency logic (see resolveImageUrl's caller in stores.blade.php). */
.dl-store-card-tag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 5px 10px;
	background: var(--brand-primary);
	color: var(--white);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-micro);
	line-height: 1;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	border-bottom-right-radius: var(--radius-sm);
}
.dl-store-card-link { display: block; color: inherit; text-decoration: none; }
.dl-store-card-link:hover { text-decoration: none; color: inherit; }
/* Exact FavouriteToggle.jsx spec — replaces the legacy sprite-background
   ".FavouriteStore" div (a different, pre-Donaloop icon) with the real
   fa-heart-o/fa-heart button the design actually uses. */
.dl-fav-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-circle);
	cursor: pointer;
	background: var(--white);
	border: var(--border-width) solid var(--border-default);
	color: var(--text-subtle);
	box-shadow: var(--shadow-xs);
	transition: var(--transition-control);
	padding: 0;
}
.dl-fav-btn:hover { color: var(--brand-accent); }
.dl-fav-btn.active { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--white); }
/* Without this, clicking leaves the browser's default (often black) focus
   ring around the circle instead of FavouriteToggle.jsx's own outline. */
.dl-fav-btn:focus { outline: none; }
.dl-fav-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Exact StoreCard.jsx image-well spec: 150px min-height + space-5 padding on a
   white background (not var(--surface-muted)) -- box-sizing: content-box so
   the site-wide border-box reset doesn't shrink min-height by eating the
   padding into it (same fix as .dl-category-tile). */
.dl-store-card-image { box-sizing: content-box; min-height: 150px; display: flex; align-items: center; justify-content: center; background: var(--white); padding: var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); }
.dl-store-card-image img.set-image { max-width: 130px; max-height: 130px; object-fit: contain; }
.dl-store-card-body { padding: var(--space-4); }
/* Exact StoreCard.jsx spec: name is body-sm bold (not body/16px); commission is
   a BIG display-black number (fs-h4/800/font-display/tight tracking) — it's
   meant to read like a price, not a small caption; note is fs-micro, not
   fs-caption. */
.dl-store-card-name { margin: 0 0 4px; font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: 1.35; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-store-card-commission { margin: 0 0 6px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-display); color: var(--brand-accent); }
.dl-store-card-desc { margin: 0; font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; min-height: calc(1.45em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* local-store/datalist.blade.php's merchant cards keep contact info StoreCard.jsx
   has no slot for; styled as a second desc-style line so it doesn't compete with
   name/commission. Not a link (the whole card is already one, per StoreCard). */
.dl-store-card-contact { margin: 6px 0 0; font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-micro); color: var(--text-subtle); line-height: 1.45; overflow-wrap: anywhere; }
.dl-store-card-contact i { margin-right: 3px; }
.dl-store-card-contact i + i { margin-left: 8px; }
/* Legacy "pre-on" recommended-merchant flag for level-2 category tiles — kept
   as an image badge (no design-system equivalent) in the FavouriteToggle's
   corner spot so it doesn't collide with the card content below. */
.dl-store-card-preview-badge { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* Exact Pagination.jsx: "Total N records" is fw-semibold/fs-caption/lh-1; cells
   are square (no radius), 38px, fw-bold/fs-caption, and sit flush against each
   other (no gap) since adjoining borders are the intended look. */
/* width:100% + flex:1 1 100% so this stretches full-width even when its own
   parent is itself a flex container (e.g. DataTables' bootstrap integration
   puts .form-inline — display:flex — on #xxx_wrapper, which otherwise shrinks
   this to its content width like any other flex item instead of a full row). */
.dl-pagination-wrap { display: flex; width: 100%; flex: 1 1 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.dl-pagination-info { font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: 1; color: var(--text-muted); }
.dl-pagination { display: flex; }
.dl-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	margin-left: -1px;
	border: var(--border-width) solid var(--border-default);
	background: var(--white);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-caption);
	line-height: 1;
	color: var(--brand-primary);
	text-decoration: none;
}
.dl-page-btn:first-child { margin-left: 0; }
.dl-page-btn:hover { background: var(--navy-50); text-decoration: none; }
.dl-page-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); }
.dl-page-btn.disabled { color: var(--text-subtle); pointer-events: none; }
@media (max-width: 767px) {
	.dl-cause-strip-inner { flex-direction: column; align-items: flex-start; }
	.dl-pagination-wrap { flex-direction: column; align-items: flex-start; }
}

/* Login/signup split screen (member_account/login-screen.kit.js): dark
   scrimmed-photo panel + white form panel. .dl-btn--block and the .dl-input-*
   set are new here — no full-width button modifier or generic text input
   component existed elsewhere in the app yet. */
.dl-btn--block { display: flex; width: 100%; }
.dl-auth-split { display: grid; grid-template-columns: minmax(0,1fr) 460px; min-height: 100vh; }
.dl-auth-visual {
	min-width: 0;
	padding: var(--space-11) var(--space-10);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-9);
	color: var(--white);
	background-size: cover;
	background-position: center;
}
.dl-auth-logo { height: 36px; width: auto; align-self: flex-start; }
.dl-auth-visual-copy h1 {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-display-md);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: var(--white);
	max-width: 22ch;
	/* "ch" is sized off the Latin "0" glyph and Thai has no spaces within a
	   compound word, so an un-segmented Thai heading can exceed the viewport's
	   available width and force the whole (single-column, mobile-stacked)
	   grid track wider than the screen instead of wrapping. */
	overflow-wrap: break-word;
	word-break: break-word;
}
.dl-auth-visual-copy .dl-lede { max-width: 44ch; color: var(--navy-100); overflow-wrap: break-word; word-break: break-word; }
.dl-auth-visual .dl-stats-2x2 { max-width: 480px; }
.dl-auth-form-panel {
	min-width: 0;
	background: var(--white);
	padding: var(--space-9) var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	justify-content: center;
}
.dl-auth-form-panel h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--ls-display); }
.dl-auth-form-panel .dl-lede { margin: 0; font-size: var(--fs-body-sm); }
/* Underline tabs — Tabs.jsx's default (non-"segmented") variant, used as-is
   by login-screen.kit.js's <Tabs> (no variant prop passed). Not the same
   component as the pill-style .dl-tabs used elsewhere in the app. */
.dl-auth-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-width) solid var(--border-subtle); }
.dl-auth-tabs a {
	display: inline-block;
	padding: 0 0 12px;
	margin-bottom: -1px;
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-sm);
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: var(--transition-control);
}
.dl-auth-tabs a:hover { text-decoration: none; color: var(--text-muted); }
.dl-auth-tabs a.active { color: var(--brand-primary); border-bottom-color: var(--brand-accent); }
/* Checkbox + "Forgotten password?" must always share one row (never stack) —
   nowrap keeps both flex items on the same line; min-width:0 + shrinkable
   checkbox label lets the left item give way on narrow screens instead of
   forcing the row wider than its container. */
.dl-auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: nowrap; }
.dl-auth-row a { flex: 0 0 auto; font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-caption); color: var(--text-link); white-space: nowrap; }
/* .dl-refine-checkbox's own margin-bottom:space-5 is meant for stacked filter
   checkboxes (stores sidebar); here it was inflating this row's flex cross-size
   by 20px, which is why the checkbox item looked vertically offset from the
   "Forgotten password?" link instead of centered against it. */
.dl-auth-row .dl-refine-checkbox { min-width: 0; margin-bottom: 0; }
.dl-auth-row .dl-refine-checkbox label { min-width: 0; }
.dl-input-group { display: grid; gap: 6px; }
/* Exact TextInput.jsx label spec: micro/bold/uppercase/wide tracking/muted —
   not the same treatment as .dl-refine-label elsewhere in the app. */
.dl-input-label { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.dl-input-wrap { position: relative; }
.dl-input-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.dl-input-wrap .dl-input { padding-left: 38px; }
.dl-input {
	height: var(--control-h);
	padding: 0 14px;
	font-family: var(--font-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-sm);
	color: var(--text-strong);
	background: var(--white);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	width: 100%;
}
.dl-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--navy-100); }
@media (max-width: 900px) {
	/* Stacking to a single column turns the split into two grid ROWS. With no
	   explicit row-sizing, CSS Grid's default align-content:normal STRETCHES
	   both auto rows to fill the container's min-height:100vh — so each panel
	   was inflating to a full screen's height (visual panel with a huge empty
	   gap before the stat tiles, form panel's content vertically centered in
	   a screen-tall cell with dead space above/below) instead of just sizing
	   to its own content like a normal stacked page. */
	.dl-auth-split { grid-template-columns: 1fr; min-height: 0; align-content: start; }
	.dl-auth-visual { padding: var(--space-8) var(--space-6); }
}

/* ==========================================================================
   Member account area (member/layout.blade.php + member/*.blade.php):
   sidebar nav, hero/greeting band, card panel, alert, badges, data table.
   Ported from cashback-screen.kit.js + account-app.kit.js and their
   SidebarMenu/Card/Alert/Badge/DataTable/StatTile/SectionHeading/Select specs.
   ========================================================================== */

/* StatTile's optional third line — .dl-stat-tile/.dl-stat-value/.dl-stat-label
   already exist (home/login hero stats); this page is the first to use the
   "note" line, e.g. "3 transactions". */
.dl-stat-note { font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-micro); line-height: 1.4; color: var(--text-subtle); }
.dl-section--navy .dl-stat-note, .dl-section--black .dl-stat-note { color: var(--navy-200); }

/* Card.jsx default (tone="plain", no href/onClick so elevation "none") */
.dl-card-panel { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6); }

/* Alert.jsx — exact TONES (success/info/warning/error) */
.dl-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--font-text); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); line-height: 1.5; }
.dl-alert i { margin-top: 2px; font-size: 16px; }
.dl-alert--success { color: var(--green-600); background: var(--green-100); }
.dl-alert--info { color: var(--navy-700); background: var(--navy-50); }
.dl-alert--warning { color: var(--status-requested-fg); background: var(--amber-100); }
.dl-alert--error { color: var(--red-600); background: var(--red-100); }

/* Badge.jsx TONES — .dl-badge already exists (lg size, outline variant only);
   these are the status tones the cashback/invoice tables need. Default .dl-badge
   size is the lg (6px 14px) variant already defined; add a --sm to match the
   component's non-lg default (used inline in a table cell). */
.dl-badge--sm { padding: 4px 10px; font-size: var(--fs-micro); }
.dl-badge--pending { color: var(--status-pending-fg); background: var(--status-pending-bg); border: var(--border-width) solid transparent; }
.dl-badge--cleared { color: var(--status-cleared-fg); background: var(--status-cleared-bg); border: var(--border-width) solid transparent; }
.dl-badge--requested { color: var(--status-requested-fg); background: var(--status-requested-bg); border: var(--border-width) solid transparent; }
.dl-badge--paid { color: var(--status-paid-fg); background: var(--status-paid-bg); border: var(--border-width) solid transparent; }
.dl-badge--rejected { color: var(--status-rejected-fg); background: var(--status-rejected-bg); border: var(--border-width) solid transparent; }

/* DataTable.jsx port — applied to the existing DataTables.net <table>, so only
   the table/thead/td chrome is styled here; DataTables' own wrapper divs
   (.dataTables_wrapper etc.) are left alone except for re-skinning its
   generated pager to match .dl-page-btn below. */
.dl-table-wrap { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); overflow-x: auto; background: var(--white); }
table.dl-table { width: 100%; border-collapse: collapse; }
table.dl-table thead th {
	text-align: left;
	padding: 14px 16px;
	white-space: nowrap;
	background: var(--surface-muted);
	border-bottom: var(--border-width) solid var(--border-subtle);
	font-family: var(--font-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-micro);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
table.dl-table tbody td { padding: 14px 16px; border-bottom: var(--border-width) solid var(--border-subtle); font-family: var(--font-text); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); line-height: 1.4; color: var(--text-body); }
table.dl-table tbody tr:nth-child(even) { background: var(--ink-50); }
table.dl-table tbody td.dl-td-strong { font-weight: var(--fw-bold); color: var(--text-strong); }
/* Re-skin DataTables.net's own generated pager + "Showing x of y" info line to
   look like .dl-page-btn/.dl-pagination-info, without touching its JS/paging
   logic (serverSide AJAX paging stays exactly as-is). */
/* The bootstrap-integrated build adds .form-inline to #xxx_wrapper, which is
   display:flex in Bootstrap — that turned the length control, the table, and
   our .dl-pagination-wrap into flex ITEMS sized to their own content instead
   of stacked full-width blocks (length control drifting beside the table
   header row, pagination row collapsing to a narrow left-aligned cluster
   instead of spanning the card). Cancel it back to normal block stacking. */
.dataTables_wrapper.form-inline { display: block; }
.dataTables_wrapper .dataTables_info { font-family: var(--font-text); font-weight: var(--fw-semibold); font-size: var(--fs-caption); color: var(--text-muted); padding-top: var(--space-4); }
.dataTables_wrapper .dataTables_paginate { padding-top: var(--space-4); }
/* NOTE: the actual visual button box/border for DataTables' Bootstrap-style
   pager (<ul class="pagination"><li class="paginate_button"><a>...) belongs on
   the <a>/<span> inside — not on this <li> itself. Styling both here AND on
   `.pagination>li>a` (each page's own <style> block, since the exact hover/
   active semantics vary slightly per page) produced two nested bordered
   boxes. Leave only cosmetic list-reset here; the border/background/size
   live in the per-page `.pagination>li>a` rule. */
.dataTables_wrapper .dataTables_paginate .paginate_button { list-style: none; }

/* Select.jsx (size="sm") — a filter dropdown, distinct from .dl-refine-select
   (stores sidebar) since that one has its own established look already. */
.dl-select-wrap { position: relative; display: inline-block; }
.dl-select {
	appearance: none;
	height: var(--control-h-sm);
	padding: 0 34px 0 14px;
	font-family: var(--font-text);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-sm);
	color: var(--text-strong);
	background: var(--white);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	width: 100%;
}
.dl-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--navy-100); }
.dl-select-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 12px; }

/* SidebarMenu.jsx — member/layout.blade.php's account nav */
.dl-sidebar-menu { background: var(--white); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.dl-sidebar-menu-title { padding: 14px 16px; background: var(--brand-primary); color: var(--white); font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; }
.dl-sidebar-menu-row-wrap { border-top: var(--border-width) solid var(--border-subtle); }
.dl-sidebar-menu-row-wrap:first-child { border-top: none; }
.dl-sidebar-menu-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	text-decoration: none;
	font-family: var(--font-text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
	line-height: 1.3;
	color: var(--text-body);
	background: transparent;
	border-left: 3px solid transparent;
	transition: var(--transition-control);
}
.dl-sidebar-menu-row:hover { text-decoration: none; color: var(--brand-primary); background: var(--navy-50); }
.dl-sidebar-menu-row i { width: 16px; text-align: center; color: var(--text-subtle); }
.dl-sidebar-menu-row:hover i { color: var(--brand-accent); }
.dl-sidebar-menu-row.active { font-weight: var(--fw-bold); color: var(--brand-primary); background: var(--navy-50); border-left-color: var(--brand-accent); }
.dl-sidebar-menu-row.active i { color: var(--brand-accent); }
.dl-sidebar-menu-row-badge { margin-left: auto; font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-micro); color: var(--text-subtle); }
/* Mobile collapse: the toggle button (#open-menu) shows/hides this same menu
   instead of member/layout.blade.php's old approach of duplicating the whole
   list into a second ".member-menu-navbar" block. */
.dl-account-menu-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; padding: 14px 16px; margin-bottom: var(--space-4); background: var(--brand-primary); color: var(--white); border: 0; border-radius: var(--radius-md); font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); }
@media (max-width: 991px) {
	.dl-account-menu-toggle { display: flex; }
	.dl-sidebar-menu { display: none; }
	.dl-sidebar-menu.dl-open { display: block; }
}

/* Member area greeting band (navy strip above the sidebar+content grid) */
.dl-account-hero { background: var(--surface-invert); color: var(--text-on-dark); padding: var(--space-6) 0; }
.dl-account-hero-inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.dl-account-hero-eyebrow { font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--orange-300); margin-bottom: 6px; }
.dl-account-hero-name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--ls-display); }
.dl-account-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--gutter); align-items: start; padding: var(--space-8) 0 var(--space-11); }
/* Grid items default to min-width:auto (content-based) — on the stacked
   mobile layout that let the sidebar/table content (DataTables etc.) force
   the single column wider than the viewport instead of actually shrinking. */
.dl-account-layout > * { min-width: 0; }
.dl-stack-gap-7 { display: grid; gap: var(--space-7); }
.dl-stack-gap-7 > * { min-width: 0; }
@media (max-width: 991px) {
	.dl-account-layout { grid-template-columns: 1fr; }
}

/* Contact us page: intro + form card beside an image, then 4 enquiry cards. */
.dl-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-9); align-items: center; }
.dl-contact-intro { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--space-6); }
.dl-contact-intro p { margin: 0 0 var(--space-3); }
.dl-contact-form { display: grid; gap: var(--space-5); }
.dl-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.dl-contact-row > *, .dl-contact-form > * { min-width: 0; }
.dl-input--textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.dl-contact-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.dl-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dl-contact-card { align-items: flex-start; }
.dl-contact-card h3 { font-size: var(--fs-h4); }
.dl-contact-card-body, .dl-contact-card-body p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.7; color: var(--text-muted); }
.dl-contact-card-body a { color: var(--text-link); font-weight: var(--fw-semibold); }
.dl-contact-card-body a:hover { color: var(--text-link-hover); }
@media (max-width: 991px) {
	.dl-contact-grid { grid-template-columns: 1fr; gap: var(--space-7); }
	.dl-contact-media { display: none; }
}
@media (max-width: 575px) {
	.dl-contact-row, .dl-contact-cards { grid-template-columns: 1fr; }
}

/* Help & Support hub (views-all-faqs): 3-up grid of linked topic cards. */
.dl-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.dl-support-card, .dl-support-card:hover, .dl-support-card:focus, .dl-support-card:hover * { text-decoration: none !important; }
.dl-support-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.dl-support-card:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-accent); transform: translateY(-2px); }
.dl-support-card:hover h3 { color: var(--brand-accent); }
@media (max-width: 991px) { .dl-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dl-support-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home — mobile polish (<=767px). Scales the desktop display sizes down to
   phone width, makes CTAs/tabs full-width tap targets, and tightens spacing.
   ========================================================================== */
@media (max-width: 767px) {
	.dl-hero { padding: var(--space-5) 0 var(--space-7); }
	.dl-hero-grid { gap: var(--space-5); }
	.dl-hero-media { gap: var(--space-2); }
	.dl-hero-media img { min-height: 0; height: 190px; }
	.dl-hero-title { font-size: 34px; line-height: 1.2; margin-bottom: var(--space-4); }
	.dl-hero-text .dl-lede { max-width: none; margin-bottom: var(--space-5); }
	.dl-hero-text .dl-btn-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
	.dl-hero-text .dl-btn-row .dl-btn { width: 100%; }
	.dl-hero-text .dl-app-badges { justify-content: center; margin-top: var(--space-5); }
	.dl-app-badges img { height: 42px; }

	h2.dl-heading, .dl-heading--h2, .dl-heading { font-size: 24px; line-height: 1.25; }
	.dl-section--sm { padding: var(--space-8) 0; }

	.dl-brandwall { flex-direction: column; align-items: stretch; gap: var(--space-4); }
	.dl-brandwall-label { flex: none; font-size: 22px; text-align: center; }
	.dl-brandwall-grid { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.dl-brandwall-chip { height: 64px; }
	.dl-brandwall-more { height: auto; font-size: var(--fs-body-lg); text-align: center; padding: var(--space-2) 0; }

	.dl-stats { margin-top: var(--space-7); gap: var(--space-3); }
	.dl-two-col { gap: var(--space-5); }
	.dl-section--navy .dl-btn, .dl-section--sand .dl-btn { width: 100%; }

	.dl-tabs-wrap { display: block; margin-bottom: var(--space-5); }
	.dl-tabs { width: 100%; }
	.dl-tabs-btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: var(--fs-caption); white-space: normal; }
	.dl-category-grid { gap: var(--space-3); }

	.dl-news-card-media, .dl-news-card-media img { height: 180px; }
	.dl-app-badges--end { margin-top: var(--space-5); }
}

/* Shop pages — cause strip on mobile. In column direction the desktop
   "flex: 1 1 320px" on the left block became a 320px *height* basis, leaving a
   huge empty navy band. Size to content and tighten. */
@media (max-width: 767px) {
	.dl-cause-strip { padding: var(--space-3) 0; }
	.dl-cause-strip-inner { gap: var(--space-2); }
	.dl-cause-strip-left { flex: 0 0 auto; gap: var(--space-3); }
	.dl-cause-strip-left img { width: 44px; height: 44px; flex-basis: 44px; }
	.dl-cause-strip-note { margin-left: 0; max-width: none; font-size: var(--fs-micro); }
}

/* Shop pages — category tiles: 2 columns on mobile (auto-fill/150px collapsed
   to a single column at phone width because of the container's side padding). */
@media (max-width: 767px) {
	.dl-store-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.dl-store-category-grid .dl-category-tile { padding: var(--space-4) var(--space-2); min-width: 0; }
}

/* Legacy jaidee-responsive.css paints .page-stores-sidebar / .charity-sidebar
   purple (#a95099 / #a75097) on tablet/mobile — it showed as a purple frame
   around the new white "Refine results" card. */
.page-stores-sidebar, .charity-sidebar { background: transparent !important; }

/* ==========================================================================
   Shop pages — mobile layout (<=767px). Goal: get the store grid on screen
   fast. Category tiles become one swipeable row, the filter card collapses
   behind a "Refine results" bar, and store cards get shorter.
   ========================================================================== */
.dl-refine-toggle { display: none; }
@media (max-width: 767px) {
	/* 1. category tiles: single horizontal scroll row */
	.dl-category-tile-row { margin: var(--space-4) 0; }
	.dl-store-category-grid {
		display: flex; grid-template-columns: none; gap: var(--space-2);
		overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
		padding: 0 var(--space-4) var(--space-2); margin: 0 calc(var(--space-4) * -1);
		scrollbar-width: none;
	}
	.dl-store-category-grid::-webkit-scrollbar { display: none; }
	.dl-store-category-grid .dl-category-tile { flex: 0 0 104px; min-height: 0; padding: var(--space-3) var(--space-2); scroll-snap-align: start; gap: 6px; }
	.dl-store-category-grid .dl-category-tile i { font-size: 20px; }
	.dl-store-category-grid .dl-category-tile-label { font-size: var(--fs-micro); line-height: 1.25; }
	.dl-store-category-grid .dl-category-tile-count { display: none; }

	/* 2. filters: collapsed behind a toggle bar */
	.dl-refine-toggle {
		display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 48px;
		padding: 0 var(--space-4); margin-bottom: var(--space-4);
		background: var(--white); border: var(--border-width) solid var(--ink-900); border-radius: var(--radius-md);
		font-family: var(--font-text); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-strong);
		cursor: pointer;
	}
	.dl-refine-toggle:focus { outline: none; }
	.dl-refine-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
	.dl-refine-toggle .dl-refine-toggle-chev { margin-left: auto; font-size: 20px; transition: transform var(--dur-base, .2s); }
	.dl-refine-toggle.is-open .dl-refine-toggle-chev { transform: rotate(180deg); }
	.dl-refine-card { display: none; margin-bottom: var(--space-4); padding: var(--space-4); }
	.dl-refine-card.is-open { display: block; }
	.dl-refine-title { display: none; }
	.dl-letter-grid { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
	.dl-letter-grid::-webkit-scrollbar { display: none; }
	.dl-letter-grid .dl-letter-btn { flex: 0 0 36px; height: 36px; }

	/* 3. results heading */
	.dl-stores-heading-row { flex-wrap: nowrap; gap: var(--space-3); margin-bottom: var(--space-3); }
	.dl-category-title, .page-stores .dl-stores-heading-row h1.dl-category-title { font-size: 24px !important; line-height: 1.2; margin-bottom: 0; }
	.dl-stores-count-pill { flex: 0 0 auto; font-size: 10px; padding: 3px 8px; }
	.dl-store-toolbar { display: none; }

	/* 4. store cards: 2 columns, shorter */
	.list_body { margin-left: -6px; margin-right: -6px; }
	.dl-store-card-col { padding-left: 6px; padding-right: 6px; margin-bottom: var(--space-3); }
	.dl-store-card-image { min-height: 96px; padding: var(--space-3); }
	.dl-store-card-image img.set-image { max-width: 84px; max-height: 84px; }
	.dl-store-card-body { padding: var(--space-3); }
	.dl-store-card-name { font-size: var(--fs-caption); }
	.dl-store-card-commission { font-size: var(--fs-h5); margin-bottom: 2px; }
	.dl-store-card-desc { min-height: 0; -webkit-line-clamp: 1; }
	.dl-fav-btn { width: 30px; height: 30px; top: 6px; right: 6px; font-size: 13px; }
	.dl-store-card-tag { padding: 4px 8px; font-size: 10px; }

	/* 5. pagination */
	.dl-pagination-wrap { gap: var(--space-3); margin-top: var(--space-4); }
}
@media (max-width: 767px) {
	.dl-store-category-grid .dl-category-tile { box-sizing: border-box; min-height: 84px; }
}
@media (max-width: 767px) {
	/* keep the sidebar column's 15px gutter so the Refine bar lines up with the cards/heading below */
	.page-stores-sidebar { padding-left: 15px !important; padding-right: 15px !important; }
}
@media (max-width: 767px) {
	.dl-refine-toggle, .dl-refine-card { border-color: var(--navy-100); }
	.dl-refine-toggle { background: var(--navy-50); color: var(--brand-primary); }
	.dl-refine-toggle.is-open { border-color: var(--brand-primary); }
}

/* Leave room for the fixed mobile header when scrolled to the results heading. */
#dl-store-heading { scroll-margin-top: 80px; }

/* ==========================================================================
   Our Cause — mobile (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
	/* hero */
	.dl-section--image { padding: var(--space-9) 0 var(--space-8); }
	.dl-section--image h1.dl-heading, .dl-section--image .dl-heading--h1 { font-size: 34px; line-height: 1.15; }
	.dl-section--image .dl-lede { font-size: var(--fs-body); line-height: 1.6; }
	.dl-section--image .dl-btn { width: 100%; }

	/* foundation intro + stats: 2x2 instead of a 4-high stack */
	.dl-cause-copy { margin-top: var(--space-4); font-size: var(--fs-body-sm); line-height: 1.7; }
	.dl-two-col > div > .dl-btn { width: 100%; }
	.dl-stats-2x2 { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
	.dl-stats-2x2 .dl-stat-tile { padding: var(--space-4); gap: 4px; }
	.dl-stats-2x2 .dl-stat-value { font-size: 22px; }
	.dl-stats-2x2 .dl-stat-label { font-size: var(--fs-caption); line-height: 1.35; }

	/* where the money goes */
	.dl-work-grid { gap: var(--space-3); }
	.dl-work-card { padding: var(--space-4); display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-3); align-items: start; }
	.dl-work-card i { grid-row: 1 / span 2; font-size: 24px; text-align: center; padding-top: 2px; }
	.dl-work-card h3 { margin: 0 0 4px; font-size: var(--fs-h5); }
	.dl-work-card p { font-size: var(--fs-caption); line-height: 1.6; }

	/* total + testimonial */
	.dl-cause-widget { padding: var(--space-4); }
	.dl-two-col--cause .dl-btn { width: 100%; }
	.dl-testimonial { gap: var(--space-3); }
	.dl-testimonial-body { padding: var(--space-5); border-radius: var(--radius-md); }
	.dl-testimonial-body blockquote { font-size: var(--fs-body-sm); line-height: 1.65; }
}

/* ==========================================================================
   How it Works — mobile (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
	/* hero */
	.dl-section--sand h1.dl-heading, .dl-section--sand .dl-heading--h1 { font-size: 34px; line-height: 1.15; }
	.dl-section--sand .dl-btn-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
	.dl-section--sand .dl-btn-row .dl-btn { width: 100%; }

	/* 3 steps: compact icon-left cards instead of tall stacked boxes */
	.dl-step-grid { gap: var(--space-3); }
	.dl-step-card { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--space-4); row-gap: 4px; padding: var(--space-5); align-items: start; }
	.dl-step-card i { grid-row: 1 / span 2; font-size: 26px; text-align: center; padding-top: 2px; }
	.dl-step-card h3 { font-size: var(--fs-h5); }
	.dl-step-card p { font-size: var(--fs-caption); line-height: 1.6; }

	/* where the money comes from */
	.dl-money-rows { gap: var(--space-2); }
	.dl-money-row { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
	.dl-money-who { flex: 0 0 92px; min-width: 0; font-size: var(--fs-body); line-height: 1.2; }
	.dl-money-what { font-size: var(--fs-caption); }

	/* FAQ */
	.dl-accordion-trigger { padding: 14px var(--space-4); font-size: var(--fs-body-sm); }
	.dl-accordion-panel { padding: 0 var(--space-4) var(--space-4); font-size: var(--fs-caption); line-height: 1.65; }
	.dl-testimonial-col { gap: var(--space-4); margin-top: var(--space-2); }
}

/* About page hero: the title (CMS-provided <h2>) rendered dark on a busy
   photo and got lost. Darken the photo with a navy scrim and make the title
   white with a soft shadow + an accent underline. */
.page-abouts .page-section-1.bg-about {
	background-image: linear-gradient(rgba(4,25,59,.62), rgba(4,25,59,.62)), url('../images-local/about-bg.jpg');
	background-size: cover;
	background-position: center;
}
.page-abouts .page-section-1 h1,
.page-abouts .page-section-1 h2,
.page-abouts .page-section-1 .container .row h2 {
	color: var(--white) !important;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-display);
	text-shadow: 0 2px 16px rgba(0,0,0,.35);
	text-transform: none;
	display: inline-block;
	margin-bottom: 0;
}
.page-abouts .page-section-1 h2:after {
	width: 64px;
	height: 4px;
	background: var(--brand-accent);
	border-radius: 2px;
	margin-top: var(--space-5);
}
.page-abouts .page-section-1 p { color: var(--white); }
@media (max-width: 767px) {
	.page-abouts .page-section-1 { padding: 96px 0 !important; }
	.page-abouts .page-section-1 h2, .page-abouts .page-section-1 .container .row h2 { font-size: 36px !important; line-height: 1.15; }
}

/* For Distributor — Q&A blocks. The balloon bullet was position:absolute with
   the text meant to be indented 50px, but the new heading styles reset that
   indent so the icon sat on top of the question. Make the icon a normal
   inline element above each question and drop the indents (all widths). */
.page-howto-for-distributor .page-section-2 img,
.page-howto-for-distributor .page-section-3 img {
	position: static;
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	margin: 0 0 var(--space-3);
}
.page-howto-for-distributor .page-section-2 h3,
.page-howto-for-distributor .page-section-2 p,
.page-howto-for-distributor .page-section-3 h3,
.page-howto-for-distributor .page-section-3 p { margin-left: 0; }
.page-howto-for-distributor .page-section-2 [class*="col-"],
.page-howto-for-distributor .page-section-3 [class*="col-"] { margin-bottom: var(--space-6); }
@media (max-width: 767px) {
	.page-howto-for-distributor .page-section-2 h3,
	.page-howto-for-distributor .page-section-3 h3 { font-size: 20px; line-height: 1.3; margin-bottom: var(--space-2); }
	.page-howto-for-distributor .page-section-2 p,
	.page-howto-for-distributor .page-section-3 p { font-size: var(--fs-body-sm); line-height: 1.7; }
}

/* ==========================================================================
   New Member Support (page-how-to-for-member) — mobile (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
	.page-how-to-for-member .page-section-1 { padding: var(--space-6) 0 var(--space-4) !important; }
	.page-how-to-for-member .page-section-1 .container .row h1,
	.page-how-to-for-member .page-section-1 h1,
	.page-how-to-for-member .page-section-1 h2 { font-size: 32px !important; line-height: 1.15; margin-bottom: var(--space-4); }
	.page-how-to-for-member .page-section-1 .dl-btn { display: flex; width: 100%; margin-top: var(--space-4) !important; margin-bottom: var(--space-5); }
	.page-how-to-for-member .page-section-1 img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-md); margin: 0; display: block; }

	.page-how-to-for-member .page-section-2 { padding: var(--space-5) 0 var(--space-8) !important; }
	.page-how-to-for-member .page-section-2 p { font-size: var(--fs-body-sm); line-height: 1.7; }

	/* FAQ rows: question text was rendering ~22px; bring it to a comfortable size and tighten rows */
	.page-how-to-for-member .accordion-tab { margin-top: var(--space-3); }
	.page-how-to-for-member .accordion-tab > ul > li { padding: 14px 36px 14px 4px; margin-bottom: 0; }
	.page-how-to-for-member .accordion-tab > ul > li:after { top: 16px; right: 6px; }
	.page-how-to-for-member .accordion-tab ul li h2,
	.page-how-to-for-member .accordion-tab ul li h3,
	.page-how-to-for-member .accordion-tab ul li h4,
	.page-how-to-for-member .accordion-tab ul li > p:first-child { font-size: 16px !important; line-height: 1.4 !important; margin: 0 !important; font-weight: 600 !important; }
	.page-how-to-for-member .accordion-answer { margin-top: var(--space-3) !important; padding: var(--space-3) var(--space-4); font-size: var(--fs-body-sm); border-radius: var(--radius-sm); }
	.page-how-to-for-member .accordion-answer p { font-size: var(--fs-body-sm) !important; }
}

/* ==========================================================================
   Member tables on phones (<=767px) — My Account > Transaction / Invoice.
   Each DataTables row becomes a stacked card instead of a wide table that
   scrolls sideways (scrollX is switched off below 768px in cashback.blade.php,
   which also sets data-label on every <td>).
   ========================================================================== */
@media (max-width: 767px) {
	#data_table_wrapper .dataTables_length, #table_invoice_wrapper .dataTables_length { display: none; }
	.dl-table-wrap:has(#data_table), .dl-table-wrap:has(#table_invoice) { border: 0; background: transparent; overflow: visible; }

	#data_table, #table_invoice, #data_table tbody, #table_invoice tbody { display: block; width: 100% !important; }
	#data_table thead, #table_invoice thead { display: none; }

	#data_table tbody tr, #table_invoice tbody tr {
		display: grid; align-items: center; column-gap: var(--space-3); row-gap: 6px;
		padding: var(--space-4); margin-bottom: var(--space-3);
		background: var(--white) !important; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md);
	}
	#data_table tbody td, #table_invoice tbody td { display: block; padding: 0; border: 0; min-width: 0; font-size: var(--fs-body-sm); line-height: 1.35; text-align: left; }
	#data_table tbody td.dataTables_empty, #table_invoice tbody td.dataTables_empty { grid-column: 1 / -1; text-align: center; padding: var(--space-5) 0; color: var(--text-muted); }
	#data_table tbody tr:has(td.dataTables_empty), #table_invoice tbody tr:has(td.dataTables_empty) { display: block; }

	/* Transaction: [icon] Merchant ........ [status]
	                       # 4
	                       30 Aug 2026 15:10
	                       THB ................. 99.00           */
	#transaction_bashback_area #data_table tbody tr { grid-template-columns: 28px 1fr auto; }
	#transaction_bashback_area #data_table td:nth-child(1) { grid-column: 1; grid-row: 1; text-align: center; }
	#transaction_bashback_area #data_table td:nth-child(3) { grid-column: 2; grid-row: 1; font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-body); }
	#transaction_bashback_area #data_table td:nth-child(4) { grid-column: 3; grid-row: 1; }
	#transaction_bashback_area #data_table td:nth-child(2) { grid-column: 2 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--fs-caption); }
	#transaction_bashback_area #data_table td:nth-child(2)::before { content: "# "; }
	#transaction_bashback_area #data_table td:nth-child(5) { grid-column: 2 / -1; grid-row: 3; color: var(--text-muted); font-size: var(--fs-caption); }
	#transaction_bashback_area #data_table td:nth-child(6) { grid-column: 2; grid-row: 4; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); color: var(--text-muted); font-weight: var(--fw-bold); }
	#transaction_bashback_area #data_table td:nth-child(7) { grid-column: 3; grid-row: 4; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); text-align: right; font-weight: var(--fw-black); font-size: var(--fs-body); color: var(--text-strong); }

	/* Invoice: # 1 ............ [status]
	            30 Aug 2026 15:10
	            THB ............. 99.00
	            [Detail]                  */
	#table_invoice tbody tr { grid-template-columns: 1fr auto; }
	.page-member\.cashback #table_invoice td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: var(--fw-bold); color: var(--text-strong); }
	.page-member\.cashback #table_invoice td:nth-child(1)::before { content: "# "; }
	.page-member\.cashback #table_invoice td:nth-child(2) { grid-column: 2; grid-row: 1; }
	.page-member\.cashback #table_invoice td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--fs-caption); }
	.page-member\.cashback #table_invoice td:nth-child(4) { grid-column: 1; grid-row: 3; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); color: var(--text-muted); font-weight: var(--fw-bold); }
	.page-member\.cashback #table_invoice td:nth-child(5) { grid-column: 2; grid-row: 3; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); text-align: right; font-weight: var(--fw-black); font-size: var(--fs-body); color: var(--text-strong); }
	.page-member\.cashback #table_invoice td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
	.page-member\.cashback #table_invoice td:nth-child(6) a, .page-member\.cashback #table_invoice td:nth-child(6) button { display: flex; align-items: center; justify-content: center; width: 100%; }

	/* pager row under the cards */
	#data_table_wrapper .dl-pagination-wrap, #table_invoice_wrapper .dl-pagination-wrap { margin-top: var(--space-2); }
}

/* Member > Agent: "Referral" table (name + type) as stacked rows on phones.
   Uses the same card treatment as the cashback tables (generic #data_table
   rules above); only the 2-column layout is specific. */
@media (max-width: 767px) {
	.dl-table--agent tbody tr { grid-template-columns: 1fr auto; }
	.dl-table--agent td:nth-child(1) { grid-column: 1; font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-body); overflow-wrap: anywhere; }
	.dl-table--agent td:nth-child(2) { grid-column: 2; text-align: right; color: var(--text-muted); font-size: var(--fs-caption); }
	.dl-table--agent .dataTables_empty { grid-column: 1 / -1; }
}

/* Agent Commission invoice table — column order differs from the cashback one:
   ID | Date | Amount | Currency | Status | Detail */
@media (max-width: 767px) {
	.page-member\.commission #table_invoice td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: var(--fw-bold); color: var(--text-strong); }
	.page-member\.commission #table_invoice td:nth-child(1)::before { content: "# "; }
	.page-member\.commission #table_invoice td:nth-child(5) { grid-column: 2; grid-row: 1; }
	.page-member\.commission #table_invoice td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--fs-caption); }
	.page-member\.commission #table_invoice td:nth-child(4) { grid-column: 1; grid-row: 3; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); color: var(--text-muted); font-weight: var(--fw-bold); }
	.page-member\.commission #table_invoice td:nth-child(3) { grid-column: 2; grid-row: 3; padding-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); text-align: right; font-weight: var(--fw-black); font-size: var(--fs-body); color: var(--text-strong); }
	.page-member\.commission #table_invoice td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
	.page-member\.commission #table_invoice td:nth-child(6) a, .page-member\.commission #table_invoice td:nth-child(6) button { display: flex; align-items: center; justify-content: center; width: 100%; }
}

/* ==========================================================================
   My Account (all tabs) — shared mobile layout (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
	.dl-account-hero { padding: var(--space-5) 0; }
	.dl-account-hero-name { font-size: 26px; }
	.dl-account-layout { padding: var(--space-5) 0 var(--space-8); gap: var(--space-4); }
	.dl-sidebar-menu { margin-bottom: var(--space-2); }

	/* cards: drop the desktop inline indents, tighter padding */
	.myaccount-content .dl-card-panel { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: var(--space-4); padding: var(--space-4); }
	.myaccount-content .card { padding: var(--space-4); }
	.myaccount-content .dl-card-panel h3.dl-heading, .myaccount-content .card h5 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }

	/* stack header rows (title | button | filter) and keep columns from squeezing */
	.myaccount-content .row > [class*="col-md-"], .myaccount-content .row > [class*="col-6"] { flex: 0 0 100%; max-width: 100%; margin-bottom: var(--space-3); }
	.myaccount-content .row > .col-6.text-right, .myaccount-content .row > .col-md-6.text-right { text-align: left !important; }

	/* buttons: full-width tap targets; undo float-right / fixed widths */
	.myaccount-content form .dl-btn, .myaccount-content .f_right, .myaccount-content button.btn-jaidee { float: none !important; display: flex; width: 100% !important; margin-top: var(--space-2); }
	.myaccount-content .card .dl-btn, .myaccount-content .dl-card-panel > .row .dl-btn { display: flex; width: 100%; margin-bottom: var(--space-2); }
	.myaccount-content .dl-btn--sm { width: auto; }
	.myaccount-content .form-control, .myaccount-content .dl-input, .myaccount-content .dl-select, .myaccount-content select { width: 100% !important; max-width: 100%; }
	.myaccount-content .row[style*="padding-left: 10%"] { padding-left: 0 !important; padding-right: 0 !important; }

	/* Personal details: key/value table → label above value */
	.myaccount-content .card-body table.table, .myaccount-content .card-body table.table tbody { display: block; width: 100%; }
	.myaccount-content .card-body table.table tr { display: block; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); }
	.myaccount-content .card-body table.table td { display: block; border: 0; padding: 0; }
	.myaccount-content .card-body table.table td:first-child { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-label); font-weight: var(--fw-bold); color: var(--text-muted); margin-bottom: 2px; }
	.myaccount-content .card-body table.table td:last-child { font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }

	/* Marketplace items list: image on top, details below, Edit full width */
	.myaccount-content .dl-card-panel .row > .col-4 { flex: 0 0 38%; max-width: 38%; }
	.myaccount-content .dl-card-panel .row > .col-8 { flex: 0 0 62%; max-width: 62%; }
	.myaccount-content .dl-card-panel .row > .col-8 > div[style*="float: right"] { float: none !important; margin-bottom: var(--space-2); }
	.myaccount-content .box_expiry span[style*="margin-left"] { margin-left: 0 !important; display: block; }

	/* item add/edit */
	.myaccount-content .thumbnail { width: 100% !important; }
	.myaccount-content .thumbnail img, .myaccount-content img { max-width: 100%; height: auto; }

	/* stand-alone (non-DataTables) tables: scroll inside their card rather than the page */
	.myaccount-content .dl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* QR / referral link blocks */
	.myaccount-content canvas { max-width: 100%; height: auto !important; }
	.myaccount-content input[readonly], .myaccount-content .dl-input { text-overflow: ellipsis; }

	/* "popular stores" carousel footer */
	.myaccount-content .member_area { margin-bottom: var(--space-5); }
}

/* Favourite stores empty-state CTA: the inline width:50% made the label
   overflow its pill on phones. Size it to its content on desktop, full width
   (and allowed to wrap) on mobile. */
.dl-btn--fav-cta { width: auto; min-width: 50%; }
@media (max-width: 767px) {
	.myaccount-content .dl-btn { white-space: normal; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; text-align: center; line-height: 1.3; }
	.dl-btn--fav-cta { display: flex; width: 100%; min-width: 0; }
}