/* MemberLoop marketing: layout helpers + responsive rules.
 * Supplements the canonical brand web.css (never modifies it). Uses only brand
 * tokens. Everything is scoped to .ml-page / .ml-* so the member app is untouched. */

/* Section container: content-width, centred, brand side margins. */
.ml-section { max-width: calc(var(--content-width) + 2 * var(--space-8)); margin: 0 auto; padding: var(--space-16) var(--space-8); }
.ml-section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.ml-eyebrow { font: 600 15px/20px var(--font-head); color: var(--harbour); margin: 0 0 var(--space-3); }
.ml-h2 { font: 700 34px/40px var(--font-head); color: var(--deep-lake); letter-spacing: -0.01em; }
.ml-h1 { font: 700 46px/52px var(--font-head); color: var(--deep-lake); letter-spacing: -0.02em; }
.ml-lead { font-size: 19px; line-height: 30px; color: var(--slate); max-width: var(--text-width); }
.ml-prose { font-size: 17px; line-height: 28px; color: var(--ink); max-width: var(--text-width); }
.ml-prose p { margin: 0 0 var(--space-4); }

/* Dark closing band on Deep Lake. Covers every heading level: .ml-page sets
 * h1-h4 to deep-lake, so a heading left out here renders deep-lake on
 * deep-lake and disappears. */
.ml-band { background: var(--deep-lake); }
.ml-band h1, .ml-band h2, .ml-band h3, .ml-band h4 { color: var(--white); }
.ml-band p { color: var(--glacier); }
.ml-band a:not(.ml-btn) { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* Soft panel on Glacier. */
.ml-panel { background: var(--glacier); border-radius: var(--radius-md); }

/* Uneven 7/5 split (text + aside); stacks on narrow screens. */
.ml-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: start; }
.ml-split > * { min-width: 0; }
/* Even two-up (paired form fields, card pairs); stacks on phones. */
.ml-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
/* Auto card grid for action panels (gated downloads, offers). */
.ml-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }

/* Legal / policy prose: long-form documents on brand type and tokens. */
.ml-legal { color: var(--ink); max-width: var(--text-width); font-size: 16px; line-height: 26px; }
.ml-legal h2 { font: 700 26px/32px var(--font-head); color: var(--deep-lake); letter-spacing: -0.01em; margin: var(--space-12) 0 var(--space-3); }
.ml-legal h3 { font: 600 19px/26px var(--font-head); color: var(--deep-lake); margin: var(--space-8) 0 var(--space-2); }
.ml-legal p { margin: 0 0 var(--space-4); }
.ml-legal ul, .ml-legal ol { margin: 0 0 var(--space-4); padding-left: 1.25em; display: grid; gap: var(--space-2); }
.ml-legal li { line-height: 26px; }
.ml-legal a { color: var(--harbour); text-decoration: underline; text-underline-offset: 3px; }
.ml-legal a:hover { color: var(--deep-lake); }
.ml-legal strong { color: var(--deep-lake); font-weight: 600; }
.ml-legal code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 14px; background: var(--mist); padding: 1px 6px; border-radius: var(--radius-sm); }
.ml-legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 15px; }
.ml-legal th, .ml-legal td { text-align: left; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.ml-legal th { font: 600 14px/20px var(--font-head); color: var(--deep-lake); border-bottom: 2px solid var(--deep-lake); }
/* Internal counsel note: a calm informational panel, not an alert. */
.ml-note { background: var(--glacier); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-size: 14px; line-height: 22px; color: var(--ink); margin-bottom: var(--space-8); }

/* LoopDiagram: desktop uses the absolute-positioned ring; phones stack the
 * labels under the symbol, as the brand book specifies. */
.ml-loop-desktop { display: block; }
/* Wider bottom label, still centred under the ring (centre x = 260px), so
 * longer French labels stay on one line inside the 440px-tall diagram. */
.ml-loop__label--vendors { left: 120px; width: 280px; }
.ml-loop-mobile { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-4); }
.ml-loop-mobile li { border-top: 1px solid var(--line); padding-top: var(--space-3); font-size: 15px; line-height: 22px; color: var(--slate); }
.ml-loop-mobile b { display: block; font: 700 18px/24px var(--font-head); color: var(--deep-lake); }
.ml-loop-mobile__mark { width: 120px; height: 120px; display: block; margin-bottom: var(--space-4); }

/* Steps with five items: five columns on wide screens; the responsive
 * .ml-steps rules further down still take it to two and then one column. */
.ml-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* One sentence under each LoopDiagram label (How it works). */
.ml-loop-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); border-top: 1px solid var(--line); padding-top: var(--space-8); }
.ml-loop-notes h3 { font: 600 19px/26px var(--font-head); color: var(--deep-lake); margin: 0 0 var(--space-2); }
.ml-loop-notes p { font-size: 16px; line-height: 26px; color: var(--ink); margin: 0; max-width: 32em; }
@media (max-width: 860px) { .ml-loop-notes { grid-template-columns: 1fr; gap: var(--space-6); } }
/* Where notes follow the loop, its stacked phone labels would repeat them, so
 * phones show just the symbol and let the notes carry the labels. */
.ml-loop--with-notes .ml-loop-mobile li:not(:first-child) { display: none; }

/* Header: nav labels never wrap and the logo never shrinks. Below the width
 * where the nav fits on one line beside the full logo (992px in English,
 * 1258px in French with the 24px gap, measured), the header switches to the
 * menu button; each breakpoint keeps ~60px of slack for font rendering. */
.ml-nav > * { white-space: nowrap; flex-shrink: 0; }
.ml-header > a { flex-shrink: 0; } /* the logo keeps its size; the nav collapses instead */
@media (max-width: 1439px) { .ml-header .ml-nav { gap: var(--space-6); } }
.ml-menu-btn, .ml-mobile-menu { display: none; }
@media (max-width: 1055px) {
  .ml-header .ml-nav { display: none; }
  .ml-menu-btn { display: inline-flex; }
  .ml-mobile-menu { display: grid; gap: 4px; }
}
@media (max-width: 1319px) {
  .ml-header.ml-fr .ml-nav { display: none; }
  .ml-header.ml-fr .ml-menu-btn { display: inline-flex; }
  .ml-mobile-menu.ml-fr { display: grid; gap: 4px; }
}
/* In a 7/5 split the right column is too narrow for a readable ring below
 * 1200px, so the loop uses its stacked phone layout there. */
@media (max-width: 1199px) {
  .ml-split .ml-loop-desktop { display: none; }
  .ml-split .ml-loop-mobile { display: grid; }
}
/* Between the hero's stacking point and 1200px, a long headline (the French
 * "L'appartenance" needs ~503px at 72px) beside the 560px loop overflows the
 * page, so the hero trades side margin and headline size for room. */
@media (min-width: 1041px) and (max-width: 1199px) {
  .ml-hero { padding-left: var(--space-8); padding-right: var(--space-8); }
  .ml-hero__title { font-size: 56px; line-height: 60px; }
}

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .ml-hero { grid-template-columns: 1fr; gap: var(--space-12); padding: var(--space-12) var(--space-8); }
  .ml-loop-desktop { display: none; }
  .ml-loop-mobile { display: grid; }
}
@media (max-width: 860px) {
  .ml-section { padding-left: var(--space-6); padding-right: var(--space-6); }
  .ml-footer__top { grid-template-columns: 1fr 1fr; }
  .ml-ledger__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .ml-steps { grid-template-columns: 1fr 1fr; }
  .ml-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .ml-h1 { font-size: 38px; line-height: 44px; }
  .ml-hero__title { font-size: 52px; line-height: 56px; }
}
@media (max-width: 560px) {
  .ml-two { grid-template-columns: 1fr; }
  /* Wide legal tables scroll inside themselves instead of widening the page. */
  .ml-legal table { display: block; overflow-x: auto; }
  /* Let long cookie and key names wrap so every column fits on a phone. */
  .ml-legal td code { overflow-wrap: break-word; }
  .ml-legal table { font-size: 14px; }
  .ml-legal th, .ml-legal td { padding: var(--space-2); }
}
@media (max-width: 560px) {
  .ml-footer__top { grid-template-columns: 1fr; gap: var(--space-6); }
  .ml-footer__legal { flex-direction: column; align-items: flex-start; }
  .ml-steps { grid-template-columns: 1fr; }
  .ml-hero { padding: var(--space-8) var(--space-4); }
  .ml-hero__title { font-size: 42px; line-height: 46px; }
  .ml-section { padding: var(--space-12) var(--space-4); }
}

/* Section sub-navigation (the vendor guide): plain text links on a Line
 * hairline, the current page marked in Deep Lake. No Lantern: the header dot
 * is the only Lantern in the chrome. */
.ml-subnav { border-bottom: 1px solid var(--line); }
.ml-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.ml-subnav a { display: inline-flex; align-items: center; min-height: var(--target-min, 44px); font: 500 15px/20px var(--font-head); color: var(--slate); text-decoration: none; border-radius: var(--radius-sm); }
.ml-subnav a:hover { color: var(--deep-lake); text-decoration: underline; text-underline-offset: 6px; }
.ml-subnav a[aria-current="page"] { color: var(--deep-lake); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ml-subnav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Plain list of short items (categories, exclusions), on Line hairlines. */
.ml-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--deep-lake); max-width: var(--text-width); }
.ml-list li { border-bottom: 1px solid var(--line); padding: var(--space-3) 0; font-size: 17px; line-height: 26px; color: var(--ink); }
.ml-list--cols { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--space-6); }

.ml-h3 { font: 600 24px/32px var(--font-head); color: var(--deep-lake); }
@media (max-width: 860px) {
  .ml-h3 { font-size: 21px; line-height: 28px; }
}

/* ---- Marketing diagrams (components/marketing/diagrams.tsx) ----
 * Line work in Deep Lake and Harbour, one Lantern accent each, brand tokens
 * only. Text is real DOM (never set inside an image); SVG is decorative only. */
.ml-diagram { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); padding: var(--space-8); }
.ml-diagram__cap { font-size: 14px; line-height: 20px; color: var(--slate); margin: var(--space-4) 0 0; text-align: center; }

/* CommissionLoop */
.ml-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--space-3); }
.ml-flow__node { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); border: 1.5px solid var(--deep-lake); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4); text-align: center; }
.ml-flow__node b { font: 700 18px/24px var(--font-head); color: var(--deep-lake); }
.ml-flow__node span { font-size: 14px; line-height: 20px; color: var(--slate); }
.ml-flow__dot { position: absolute; top: var(--space-3); left: var(--space-3); width: 10px; height: 10px; border-radius: 50%; background: var(--lantern); }
.ml-flow__chev { align-self: center; color: var(--harbour); flex: none; }
.ml-flow__back { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.ml-flow__backline { width: 100%; height: 10px; display: block; }
.ml-flow__back p { font-size: 14px; line-height: 20px; color: var(--slate); margin: 0; }

/* DataResidency */
.ml-data { display: grid; grid-template-columns: 7fr auto 4fr; align-items: center; gap: var(--space-4); }
.ml-data__boundary { border: 1.5px solid var(--deep-lake); border-radius: var(--radius-md); padding: var(--space-6); }
.ml-data__boundary-label { font: 600 14px/20px var(--font-head); color: var(--deep-lake); margin: 0 0 var(--space-4); }
.ml-data__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ml-data__card { position: relative; border-radius: var(--radius-sm); padding: var(--space-4); }
.ml-data__card b { display: block; font: 700 16px/22px var(--font-head); color: var(--deep-lake); }
.ml-data__card span { display: block; font-size: 13px; line-height: 19px; color: var(--slate); margin-top: var(--space-1); }
.ml-data__card--held { background: var(--glacier); border: 1px solid var(--deep-lake); }
.ml-data__card--ml { background: var(--white); border: 1px solid var(--line); }
.ml-data__dot { position: absolute; top: var(--space-3); right: var(--space-3); width: 9px; height: 9px; border-radius: 50%; background: var(--lantern); }
.ml-data__cross { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.ml-data__cross p { margin: 0; font-size: 12px; line-height: 17px; color: var(--slate); max-width: 11em; }
.ml-data__vendors { border: 1.5px solid var(--deep-lake); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; }
.ml-data__vendors b { display: block; font: 700 16px/22px var(--font-head); color: var(--deep-lake); }
.ml-data__vendors span { display: block; font-size: 13px; line-height: 19px; color: var(--slate); margin-top: var(--space-1); }

/* SavingsCategories */
.ml-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--deep-lake); }
.ml-cats__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.ml-cats__item svg { width: 26px; height: 26px; color: var(--deep-lake); flex: none; }
.ml-cats__item b { display: block; font: 600 16px/22px var(--font-head); color: var(--ink); }
.ml-cats__item span { display: block; font-size: 13px; line-height: 19px; color: var(--slate); margin-top: 2px; }


/* RevenueLines */
.ml-revbars { display: flex; gap: var(--space-16); align-items: flex-end; justify-content: center; }
.ml-revbars__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.ml-revbars__stack { width: 128px; display: flex; flex-direction: column; justify-content: flex-end; }
.ml-revbars__seg { display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-head); }
.ml-revbars__seg--dues { height: 96px; background: var(--glacier); border: 1px solid var(--deep-lake); color: var(--deep-lake); }
.ml-revbars__seg--nondues { height: 36px; background: var(--lantern); border: 1px solid var(--lantern); color: var(--ink); }
.ml-revbars__label { font-size: 13px; line-height: 18px; color: var(--slate); }

@media (max-width: 860px) {
  .ml-flow { grid-template-columns: 1fr; }
  .ml-flow__chev { transform: rotate(90deg); justify-self: center; }
  .ml-data { grid-template-columns: 1fr; }
  .ml-data__cross { flex-direction: row; justify-content: center; }
  .ml-data__cross svg { transform: rotate(90deg); }
  .ml-data__cross p { max-width: none; }
  .ml-cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ml-flow__back { grid-template-columns: 1fr; }
  .ml-cats { grid-template-columns: 1fr; }
  .ml-revbars { gap: var(--space-12); }
  .ml-revbars__stack { width: 104px; }
  /* Two side-by-side cards leave ~80px each at 320px, too narrow for words
     like "MemberLoop", so they stack; the boundary box gives back padding. */
  .ml-data > * { min-width: 0; }
  .ml-data__boundary { padding: var(--space-4); }
  .ml-data__inner { grid-template-columns: 1fr; }
}

/* ---- Member storefront (components/marketing/storefront.tsx) ----
 * A product-forward portal preview. Hairline surfaces, one Lantern accent
 * (the featured offer only), one unified merchant-mark style. Brand tokens
 * only; the association's own brand colour is set inline (fictional). */
.ml-store { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--white); }
.ml-store__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); color: var(--white); }
.ml-store__assoc { display: flex; align-items: center; gap: var(--space-3); font: 700 15px/1.2 var(--font-head); }
.ml-store__crest { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--white); font: 700 12px/1 var(--font-head); flex: none; }
.ml-store__nav { display: flex; gap: var(--space-6); font: 500 14px/1 var(--font-head); color: rgba(255,255,255,0.72); }
.ml-store__nav .is-on { color: var(--white); }
.ml-store__body { padding: var(--space-8); }

/* featured offer: the one dark band, the one Lantern */
.ml-store__featured { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--deep-lake); color: var(--white); padding: var(--space-8) 36px; margin-bottom: var(--space-8); min-height: 190px; display: flex; align-items: center; }
.ml-store__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ml-store__featured-content { position: relative; z-index: 1; max-width: 30em; }
.ml-store__eyebrow { display: inline-block; font: 600 12px/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lantern); margin-bottom: var(--space-3); }
/* Specific enough to beat .ml-page h3 (deep-lake) so the title shows on the dark band. */
.ml-store__featured .ml-store__featured-title { font: 700 28px/1.1 var(--font-head); letter-spacing: -0.012em; color: var(--white); margin: 0 0 var(--space-2); max-width: 16ch; }
.ml-store__featured-desc { font-size: 15px; line-height: 1.5; color: var(--glacier); max-width: 34ch; margin: 0 0 var(--space-6); }
.ml-store__featured-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ml-store__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill); font: 700 15px/1 var(--font-head); background: var(--white); color: var(--deep-lake); }
.ml-store__ghost { display: inline-flex; align-items: center; font: 600 13px/1 var(--font-head); color: var(--white); background: rgba(255,255,255,0.1); border: 1px solid rgba(220,238,240,0.34); padding: 9px 14px; border-radius: var(--radius-pill); }

/* savings ribbon */
.ml-store__ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-12); }
.ml-store__stat { display: flex; gap: var(--space-4); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; }
.ml-store__stat-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--glacier); display: flex; align-items: center; justify-content: center; color: var(--deep-lake); }
.ml-store__stat-ic svg { width: 22px; height: 22px; }
.ml-store__stat-k { font: 600 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-1); }
.ml-store__stat-v { font: 800 23px/1 var(--font-head); color: var(--deep-lake); }

/* section head */
.ml-store__shead { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--space-4); }
.ml-store__shead h4 { font: 700 19px/1 var(--font-head); color: var(--deep-lake); margin: 0; }
.ml-store__link { font: 600 13px/1 var(--font-head); color: var(--harbour); }

/* category tiles */
.ml-store__cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.ml-store__cat { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 10px; text-align: center; }
.ml-store__cat-badge { width: 50px; height: 50px; margin: 0 auto var(--space-3); border-radius: 14px; background: var(--glacier); display: flex; align-items: center; justify-content: center; color: var(--deep-lake); }
.ml-store__cat-badge svg { width: 24px; height: 24px; }
.ml-store__cat b { display: block; font: 600 13px/1.2 var(--font-head); color: var(--ink); }
.ml-store__cat span { display: block; font: 400 11px/1.2 var(--font-body); color: var(--slate); margin-top: var(--space-1); }

/* offer grid */
.ml-store__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ml-store__card { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.ml-store__card-top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 18px var(--space-3); }
.ml-store__mark { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--glacier); color: var(--deep-lake); font: 800 15px/1 var(--font-head); }
.ml-store__card-merch { font: 700 15px/1.1 var(--font-head); color: var(--ink); }
.ml-store__card-b { padding: var(--space-4) 18px 18px; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--line); }
.ml-store__card-cat { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 11px/1 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.ml-store__card-cat svg { width: 13px; height: 13px; }
.ml-store__card-name { font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.ml-store__card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.ml-store__chip { font: 600 12px/1 var(--font-head); color: var(--deep-lake); background: var(--glacier); padding: 7px 11px; border-radius: var(--radius-pill); }
.ml-store__view { font: 600 13px/1 var(--font-head); color: var(--harbour); }

.ml-store__more { margin-bottom: var(--space-6); }
.ml-store__expand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: var(--target-min); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white); color: var(--deep-lake); font: 600 14px/1 var(--font-head); cursor: pointer; }
.ml-store__expand:hover { background: var(--glacier); }
.ml-store__expand svg { width: 18px; height: 18px; transition: transform 150ms ease; }
.ml-store__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ml-store__expand svg { transition: none; } }

.ml-store__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 18px var(--space-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--slate); }
.ml-store__foot b { color: var(--deep-lake); }

@media (max-width: 860px) {
  .ml-store__featured { grid-template-columns: 1fr; padding: var(--space-6); }
  .ml-store__cats { grid-template-columns: repeat(3, 1fr); }
  .ml-store__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ml-store__nav { display: none; }
  .ml-store__ribbon { grid-template-columns: 1fr; }
  .ml-store__cats { grid-template-columns: 1fr 1fr; }
  .ml-store__grid { grid-template-columns: 1fr; }
  .ml-store__body { padding: var(--space-4); }
  .ml-store__featured-title { font-size: 24px; }
}
/* Compact storefront beside a hero: bar, featured offer and savings only */
.ml-store--compact .ml-store__nav { display: none; }
/* In a half-width column the rings would sit on the featured headline */
.ml-store--compact .ml-store__art { display: none; }
.ml-store--compact .ml-store__body { padding: var(--space-6); }
.ml-store--compact .ml-store__featured { margin-bottom: var(--space-6); }
.ml-store--compact .ml-store__ribbon { margin-bottom: 0; gap: var(--space-3); }
.ml-store--compact .ml-store__stat { min-width: 0; padding: var(--space-4); }
.ml-store--compact .ml-store__stat-ic { display: none; }
.ml-store--compact { container-type: inline-size; }
@container (max-width: 400px) {
  .ml-store--compact .ml-store__ribbon { grid-template-columns: 1fr; }
}
/* Below this width the decorative rings would sit on the featured headline */
@media (max-width: 679px) {
  .ml-store__art { display: none; }
}

/* Vendor overview: the vendor's own card in the portal preview, outlined in
 * Deep Lake with a small Glacier tag. No Lantern: this is a highlight, not
 * the returning value. */
.ml-offer-preview__yours { box-shadow: 0 0 0 2px var(--deep-lake); border-color: var(--deep-lake); }
.ml-offer-preview__tag { margin-left: auto; background: var(--glacier); color: var(--deep-lake); font: 700 12px/1 var(--font-head); padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; }