/* =====================================================================
   RMK COMPONENTS: RMK Retail
   Reads ONLY from rmk-tokens.css. No hex values in this file.
   Looks follow the approved mock-ups in docs/design/website/pages/.
   Each component is defined once. A page that invents a variant is a
   defect: add the variant here instead. No inline styles in templates.

   Contents
     1. Base and type
     2. Layout helpers
     3. Buttons and links
     4. Public header, mobile menu, cart button
     5. Hero, bands, section titles
     6. Cards: audience, feature, step, tile, panel, stat, FAQ
     7. Villages and the village request form
     8. Products page: price toggle, info bar, search, chips,
        product card, stepper, cart panel
     9. Forms (shared rendering), error summary
    10. Alerts, badges, empty state, tables, meters, steps
    11. App layout (role homes) and bottom navigation
    12. Staff layout: top bar, sidebar, dashboard pieces
    13. Logistics and sourcing
    14. Footer
    15. Legacy layer: the Bootstrap class names older pages use
    16. Percentage helpers (bars, meters), print
   ===================================================================== */

/* ---------- 1. Base and type ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--rmk-font);
  font-size: var(--rmk-fs-base);
  font-weight: var(--rmk-fw-regular);
  line-height: var(--rmk-lh-body);
  color: var(--rmk-text);
  background: var(--rmk-bg-page);
  overflow-x: hidden;
}
body > main, .rmk-page-main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; }
p { margin: 0 0 var(--rmk-space-4); }
:focus-visible { outline: none; box-shadow: var(--rmk-focus-ring); border-radius: var(--rmk-radius-sm); }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--rmk-space-3);
  color: inherit;
  font-weight: var(--rmk-fw-heavy);
  line-height: var(--rmk-lh-heading);
}
h1 { font-size: var(--rmk-fs-2xl); letter-spacing: -0.5px; }
h2 { font-size: var(--rmk-fs-xl); letter-spacing: -0.4px; }
h3 { font-size: var(--rmk-fs-md); font-weight: var(--rmk-fw-bold); }
h4, h5, h6 { font-size: var(--rmk-fs-base); font-weight: var(--rmk-fw-bold); }

a { color: var(--rmk-text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--rmk-leave); }

.rmk-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--rmk-white);
            color: var(--rmk-black); padding: var(--rmk-space-3) var(--rmk-space-4); }
.rmk-skip:focus { left: var(--rmk-space-2); top: var(--rmk-space-2); }
.rmk-visually-hidden, .visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 2. Layout helpers ----------------------------------------- */
.rmk-container {
  width: 100%;
  max-width: var(--rmk-container);
  margin: 0 auto;
  padding: 0 var(--rmk-gutter);
}
.rmk-container--wide  { max-width: var(--rmk-container-wide); }
.rmk-container--staff { max-width: var(--rmk-container-staff); }
.rmk-container--narrow { max-width: 860px; }
@media (min-width: 640px) { .rmk-container { padding: 0 var(--rmk-gutter-wide); } }
.rmk-main { padding-top: var(--rmk-space-6); padding-bottom: var(--rmk-space-16); }   /* keeps the container's side gutter */
.rmk-stack > * + * { margin-top: var(--rmk-space-4); }
.rmk-stack-lg > * + * { margin-top: var(--rmk-space-6); }
.rmk-row { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); align-items: center; }
.rmk-row--between { justify-content: space-between; }
.rmk-row--start { align-items: flex-start; }
.rmk-row--end { align-items: flex-end; }
.rmk-split { display: flex; flex-wrap: wrap; gap: var(--rmk-space-12); align-items: center; }
.rmk-split--top { align-items: flex-start; }
.rmk-split > * { flex: 1 1 440px; min-width: 0; }
.rmk-split > .rmk-split__wide { flex: 1 1 520px; }
.rmk-grid { display: grid; gap: var(--rmk-space-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rmk-grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--rmk-space-4); }
.rmk-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rmk-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rmk-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmk-space-3); }
.rmk-center { text-align: center; }
.rmk-right  { text-align: right; }
.rmk-muted  { color: var(--rmk-text-muted); }
.rmk-small  { font-size: var(--rmk-fs-sm); }
.rmk-xsmall { font-size: var(--rmk-fs-xs); }
.rmk-strong { font-weight: var(--rmk-fw-bold); }
.rmk-heavy  { font-weight: var(--rmk-fw-heavy); }
.rmk-nowrap { white-space: nowrap; }
.rmk-money, .rmk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rmk-mt-0 { margin-top: 0 !important; }
.rmk-mb-0 { margin-bottom: 0 !important; }
.rmk-mt-2 { margin-top: var(--rmk-space-2); }
.rmk-mt-4 { margin-top: var(--rmk-space-4); }
.rmk-mt-6 { margin-top: var(--rmk-space-6); }
.rmk-mb-2 { margin-bottom: var(--rmk-space-2); }
.rmk-mb-4 { margin-bottom: var(--rmk-space-4); }
.rmk-mb-6 { margin-bottom: var(--rmk-space-6); }
.rmk-text-success { color: var(--rmk-success); font-weight: var(--rmk-fw-semibold); }
.rmk-text-warning { color: var(--rmk-warning); font-weight: var(--rmk-fw-semibold); }
.rmk-text-danger  { color: var(--rmk-danger);  font-weight: var(--rmk-fw-semibold); }
.rmk-inline-form { display: inline; }

/* ---------- 3. Buttons and links -------------------------------------- */
.rmk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--rmk-space-2);
  min-height: var(--rmk-tap);
  padding: 0 var(--rmk-space-5);
  font-family: inherit;
  font-size: var(--rmk-fs-base);
  font-weight: var(--rmk-fw-regular);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--rmk-black);
  background: var(--rmk-brand);
  border: var(--rmk-border-w) solid var(--rmk-brand);
  border-radius: var(--rmk-radius-btn);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.rmk-btn:hover { background: var(--rmk-brand-hover); border-color: var(--rmk-brand-hover); color: var(--rmk-black); }
.rmk-btn svg { flex-shrink: 0; }
.rmk-btn--lg { min-height: var(--rmk-tap-lg); padding: 0 var(--rmk-space-7); font-size: var(--rmk-fs-md);
               border-radius: var(--rmk-radius-lg); font-weight: var(--rmk-fw-semibold); }
.rmk-btn--sm { min-height: 40px; padding: 0 var(--rmk-space-4); font-size: var(--rmk-fs-sm); border-radius: var(--rmk-radius-md); }
.rmk-btn--block { display: flex; width: 100%; }
.rmk-btn--plain { font-weight: var(--rmk-fw-regular); }
/* White with black outline */
.rmk-btn--secondary { background: var(--rmk-white); color: var(--rmk-black); border-color: var(--rmk-black); }
.rmk-btn--secondary:hover { background: var(--rmk-grey-100); border-color: var(--rmk-black); }
/* On black: white outline */
.rmk-btn--ghost { background: transparent; color: var(--rmk-white); border-color: var(--rmk-white); font-weight: var(--rmk-fw-regular); }
.rmk-btn--ghost:hover { background: var(--rmk-black-raised); color: var(--rmk-white); border-color: var(--rmk-white); }
/* On black: cyan outline (Sign in) */
.rmk-btn--outline-brand { background: transparent; color: var(--rmk-brand); border-color: var(--rmk-brand); }
.rmk-btn--outline-brand:hover { background: var(--rmk-black-raised); color: var(--rmk-brand); border-color: var(--rmk-brand); }
/* On cyan: black button with cyan text */
.rmk-btn--dark { background: var(--rmk-black); color: var(--rmk-brand); border-color: var(--rmk-black); font-weight: var(--rmk-fw-semibold); }
.rmk-btn--dark:hover { background: var(--rmk-black-raised); color: var(--rmk-brand); border-color: var(--rmk-black-raised); }
/* On cyan: black outline */
.rmk-btn--outline-dark { background: transparent; color: var(--rmk-black); border: 2px solid var(--rmk-black); font-weight: var(--rmk-fw-regular); }
.rmk-btn--outline-dark:hover { background: var(--rmk-brand-hover); color: var(--rmk-black); border-color: var(--rmk-black); }
/* Leave this page: blue */
.rmk-btn--leave { background: var(--rmk-leave); color: var(--rmk-white); border-color: var(--rmk-leave); }
.rmk-btn--leave:hover { background: var(--rmk-leave-hover); color: var(--rmk-white); border-color: var(--rmk-leave-hover); }
/* Destructive actions only */
.rmk-btn--danger { background: var(--rmk-danger); color: var(--rmk-white); border-color: var(--rmk-danger); }
.rmk-btn--danger:hover { background: var(--rmk-danger); color: var(--rmk-white); filter: brightness(.9); }
.rmk-btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--rmk-text);
                 text-decoration: underline; text-underline-offset: 3px; }
.rmk-btn--link:hover { background: none; color: var(--rmk-leave); }
.rmk-btn:disabled, .rmk-btn[aria-disabled="true"] {
  background: var(--rmk-grey-300); color: var(--rmk-grey-600); border-color: var(--rmk-grey-300);
  cursor: not-allowed; filter: none;
}
.rmk-btn-row { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); align-items: center; }
.rmk-link-leave { color: var(--rmk-leave); font-weight: var(--rmk-fw-medium); }
.rmk-link-strong { font-weight: var(--rmk-fw-semibold); }

/* ---------- 4. Public header ------------------------------------------ */
.rmk-header { background: var(--rmk-black); border-bottom: var(--rmk-border-w) solid var(--rmk-black-raised); }
.rmk-header__inner {
  max-width: var(--rmk-container); margin: 0 auto;
  padding: 14px var(--rmk-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--rmk-space-3);
}
.rmk-header__inner--wide { max-width: var(--rmk-container-wide); }
@media (min-width: 640px) { .rmk-header__inner { padding: 14px var(--rmk-gutter-wide); gap: var(--rmk-space-4); } }
.rmk-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rmk-white); }
.rmk-logo:hover { color: var(--rmk-white); }
.rmk-logo__mark {
  width: 40px; height: 40px; border-radius: var(--rmk-radius-btn);
  background: var(--rmk-brand); color: var(--rmk-black);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--rmk-fw-heavy); font-size: var(--rmk-fs-nav);
}
.rmk-logo__mark--sm { width: 36px; height: 36px; border-radius: 9px; font-size: var(--rmk-fs-xs); }
.rmk-logo__name { font-weight: var(--rmk-fw-bold); font-size: 1.1875rem; }
.rmk-logo__name span, .rmk-accent { color: var(--rmk-brand); }
.rmk-mainnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rmk-space-half); }
.rmk-mainnav a {
  color: var(--rmk-grey-300); text-decoration: none; font-size: var(--rmk-fs-nav);
  padding: var(--rmk-space-3); min-height: var(--rmk-tap-sm); display: inline-flex; align-items: center;
}
.rmk-mainnav a:hover { color: var(--rmk-white); }
.rmk-mainnav a.is-products { color: var(--rmk-brand); font-weight: var(--rmk-fw-semibold); }
.rmk-mainnav a[aria-current="page"] { color: var(--rmk-white); box-shadow: inset 0 -3px 0 var(--rmk-brand); }
.rmk-header__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rmk-header__btn {
  min-height: var(--rmk-tap-sm); display: inline-flex; align-items: center; gap: var(--rmk-space-2);
  padding: 0 18px; border-radius: var(--rmk-radius-btn); text-decoration: none; font-size: var(--rmk-fs-nav);
  border: var(--rmk-border-w) solid var(--rmk-brand); font-family: inherit; cursor: pointer;
}
.rmk-header__btn--outline { color: var(--rmk-brand); background: transparent; }
.rmk-header__btn--outline:hover { color: var(--rmk-white); border-color: var(--rmk-white); }
.rmk-header__btn--solid { color: var(--rmk-black); background: var(--rmk-brand); font-weight: var(--rmk-fw-semibold); }
.rmk-header__btn--solid:hover { color: var(--rmk-black); background: var(--rmk-brand-hover); }
.rmk-header__btn--icon { padding: 0 var(--rmk-space-3); color: var(--rmk-brand); border-color: var(--rmk-black-line); background: var(--rmk-black-raised); }
.rmk-header__btn--icon:hover { color: var(--rmk-white); }
.rmk-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  background: var(--rmk-black); color: var(--rmk-brand); border-radius: var(--rmk-radius-pill);
  padding: 0 var(--rmk-space-2); font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-semibold);
}
.rmk-count--on-black { background: var(--rmk-brand); color: var(--rmk-black); }
.rmk-menu-toggle { display: none; }
.rmk-account-menu { position: relative; }
.rmk-account-menu > summary { list-style: none; }
.rmk-account-menu > summary::-webkit-details-marker { display: none; }
.rmk-account-menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px;
  background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border);
  border-radius: var(--rmk-radius-lg); box-shadow: var(--rmk-shadow-md); padding: var(--rmk-space-2);
}
.rmk-account-menu__panel a, .rmk-account-menu__panel button {
  display: flex; align-items: center; width: 100%; min-height: var(--rmk-tap-sm);
  padding: 0 var(--rmk-space-3); border-radius: var(--rmk-radius-md); color: var(--rmk-text);
  text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.rmk-account-menu__panel a:hover, .rmk-account-menu__panel button:hover { background: var(--rmk-grey-100); color: var(--rmk-text); }
.rmk-rolenav { background: var(--rmk-black-raised); }
.rmk-rolenav__inner { max-width: var(--rmk-container); margin: 0 auto; padding: 0 var(--rmk-gutter);
                      display: flex; flex-wrap: wrap; gap: var(--rmk-space-half); align-items: center; }
.rmk-rolenav__label { color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-sm); margin-right: var(--rmk-space-2); }
.rmk-rolenav a { color: var(--rmk-grey-300); text-decoration: none; font-size: var(--rmk-fs-sm);
                 padding: var(--rmk-space-3) var(--rmk-space-3); min-height: var(--rmk-tap-sm); display: inline-flex; align-items: center; }
.rmk-rolenav a:hover { color: var(--rmk-white); }
.rmk-rolenav a[aria-current="page"] { color: var(--rmk-brand); box-shadow: inset 0 -3px 0 var(--rmk-brand); }
@media (max-width: 900px) {
  .rmk-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--rmk-space-2);
    min-height: var(--rmk-tap-sm); padding: 0 var(--rmk-space-4); background: none; color: var(--rmk-brand);
    border: var(--rmk-border-w) solid var(--rmk-brand); border-radius: var(--rmk-radius-btn);
    font: inherit; font-size: var(--rmk-fs-nav); cursor: pointer;
  }
  .rmk-mainnav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch;
                 padding-bottom: var(--rmk-space-2); }
  .rmk-mainnav.is-open { display: flex; }
  .rmk-mainnav a { border-top: var(--rmk-border-w) solid var(--rmk-black-raised); }
  .rmk-mainnav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--rmk-brand); }
  .rmk-rolenav { display: none; }
  .rmk-rolenav.is-open { display: block; }
  .rmk-rolenav__inner { flex-direction: column; align-items: stretch; }
}
.rmk-show-xs { display: none !important; }
@media (max-width: 420px) {
  .rmk-show-xs { display: inline-flex !important; }
  .rmk-logo__name { font-size: var(--rmk-fs-md); }
  .rmk-header__btn { padding: 0 var(--rmk-space-3); }
  .rmk-hide-xs { display: none !important; }
}

/* ---------- 5. Hero, bands, section titles ---------------------------- */
.rmk-band { background: var(--rmk-white); }
.rmk-band--page { background: var(--rmk-grey-100); }
.rmk-band--black { background: var(--rmk-black); color: var(--rmk-white); }
.rmk-band--brand { background: var(--rmk-brand); color: var(--rmk-black); }
.rmk-band__inner { max-width: var(--rmk-container); margin: 0 auto; padding: var(--rmk-space-14) var(--rmk-gutter); }
.rmk-band__inner--narrow { max-width: 860px; }
@media (min-width: 640px) { .rmk-band__inner { padding: var(--rmk-space-22) var(--rmk-gutter-wide); } }
.rmk-band__inner--tight { padding-top: var(--rmk-space-12); padding-bottom: var(--rmk-space-12); }
@media (min-width: 640px) { .rmk-band__inner--tight { padding-top: var(--rmk-space-16); padding-bottom: var(--rmk-space-16); } }

.rmk-hero { background: var(--rmk-black); color: var(--rmk-white); }
.rmk-hero__inner {
  max-width: var(--rmk-container); margin: 0 auto;
  padding: var(--rmk-space-12) var(--rmk-gutter) var(--rmk-space-14);
  display: flex; flex-wrap: wrap; gap: var(--rmk-space-14); align-items: center;
}
@media (min-width: 640px) { .rmk-hero__inner { padding: var(--rmk-space-18) var(--rmk-gutter-wide) var(--rmk-space-22); } }
.rmk-hero__inner--block { display: block; }
.rmk-hero__text { flex: 1 1 520px; min-width: 0; }
.rmk-hero__aside { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.rmk-hero__aside--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmk-space-4); }
.rmk-hero__aside--top { display: block; }
.rmk-hero h1, .rmk-hero__title {
  margin: 0 0 var(--rmk-space-5);
  font-size: clamp(2.25rem, 8vw, var(--rmk-fs-hero));
  line-height: var(--rmk-lh-hero); font-weight: var(--rmk-fw-heavy); letter-spacing: -1.8px;
  max-width: 900px;
}
.rmk-hero__lead { margin: 0 0 var(--rmk-space-8); font-size: 1.25rem; color: var(--rmk-grey-on-black); max-width: 580px; }
.rmk-hero__lead--wide { max-width: 720px; }
.rmk-hero .rmk-btn-row { margin-bottom: var(--rmk-space-9); }
.rmk-hero .rmk-btn-row:last-child { margin-bottom: 0; }
.rmk-pill-note {
  margin: 0 0 var(--rmk-space-5); display: inline-flex; align-items: center; gap: var(--rmk-space-2);
  padding: 6px 14px; border: var(--rmk-border-w) solid var(--rmk-black-line); border-radius: var(--rmk-radius-pill);
  color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-sm);
}
.rmk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rmk-brand); display: inline-block; }
.rmk-trust { display: flex; flex-wrap: wrap; gap: var(--rmk-space-6); color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-nav); }
.rmk-trust span { display: inline-flex; align-items: center; gap: var(--rmk-space-2); }
.rmk-trust svg { color: var(--rmk-brand); }
.rmk-crumbs { margin: 0 0 var(--rmk-space-3); font-size: var(--rmk-fs-sm); color: var(--rmk-grey-on-black); }
.rmk-crumbs a { color: var(--rmk-grey-on-black); }
.rmk-crumbs a:hover { color: var(--rmk-white); }

/* Hero card: the order tracking illustration */
.rmk-hero-card {
  width: 100%; max-width: 420px; background: var(--rmk-white); color: var(--rmk-black);
  border-radius: var(--rmk-radius-3xl); padding: var(--rmk-space-7); box-shadow: var(--rmk-shadow-hero);
}
.rmk-hero-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rmk-space-1); gap: var(--rmk-space-2); }
.rmk-hero-card__title { font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-md); }
.rmk-hero-card__sub { margin: 0 0 22px; color: var(--rmk-text-muted); font-size: var(--rmk-fs-sm); }
.rmk-hero-card__foot { border-top: var(--rmk-border-w) solid var(--rmk-border); padding-top: var(--rmk-space-4);
                       font-size: var(--rmk-fs-nav); color: var(--rmk-text-muted); margin: 0; }
.rmk-track { display: flex; flex-direction: column; margin: 0 0 22px; padding: 0; list-style: none; }
.rmk-track li { display: flex; gap: 14px; max-width: none; }
.rmk-track__rail { display: flex; flex-direction: column; align-items: center; }
.rmk-track__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                  border: 2px solid var(--rmk-border); flex-shrink: 0; }
.rmk-track__line { width: 2px; height: 22px; background: var(--rmk-border); }
.rmk-track__text { font-size: var(--rmk-fs-nav); color: var(--rmk-text-muted); }
.rmk-track li.is-done .rmk-track__dot { background: var(--rmk-success); border-color: var(--rmk-success); color: var(--rmk-white); }
.rmk-track li.is-done .rmk-track__line { background: var(--rmk-success); }
.rmk-track li.is-done .rmk-track__text { color: var(--rmk-text); font-weight: var(--rmk-fw-semibold); }
.rmk-track li.is-current .rmk-track__dot { background: var(--rmk-brand); border-color: var(--rmk-black); }
.rmk-track li.is-current .rmk-track__text { color: var(--rmk-text); font-weight: var(--rmk-fw-bold); }

/* Section titles */
.rmk-eyebrow { margin: 0 0 var(--rmk-space-2); font-size: var(--rmk-fs-sm); font-weight: var(--rmk-fw-bold);
               letter-spacing: 1.5px; text-transform: uppercase; color: var(--rmk-text-muted); }
.rmk-band--black .rmk-eyebrow { color: var(--rmk-brand); }
.rmk-section-title {
  margin: 0 0 var(--rmk-space-10); font-size: clamp(1.75rem, 6vw, var(--rmk-fs-4xl));
  line-height: var(--rmk-lh-heading); letter-spacing: -1px; font-weight: var(--rmk-fw-heavy); max-width: 760px;
}
.rmk-section-title--tight { margin-bottom: var(--rmk-space-3); }
.rmk-section-title--mid { margin-bottom: var(--rmk-space-6); }
.rmk-section-title--md { font-size: clamp(1.625rem, 5vw, var(--rmk-fs-3xl)); letter-spacing: -0.8px; margin-bottom: var(--rmk-space-6); }
.rmk-section-lead { margin: 0 0 var(--rmk-space-10); color: var(--rmk-text-muted); font-size: var(--rmk-fs-md); max-width: 760px; }
.rmk-band--black .rmk-section-lead { color: var(--rmk-grey-on-black); }
.rmk-section-lead strong { color: var(--rmk-text); }

/* CTA band */
.rmk-cta__inner {
  max-width: var(--rmk-container); margin: 0 auto; padding: var(--rmk-space-12) var(--rmk-gutter);
  display: flex; flex-wrap: wrap; gap: var(--rmk-space-6); align-items: center; justify-content: space-between;
}
@media (min-width: 640px) { .rmk-cta__inner { padding: var(--rmk-space-16) var(--rmk-gutter-wide); } }
.rmk-cta__text { flex: 1 1 420px; min-width: 0; }
.rmk-cta h2 { margin: 0 0 var(--rmk-space-2); font-size: clamp(1.75rem, 6vw, var(--rmk-fs-3xl)); font-weight: var(--rmk-fw-heavy); }
.rmk-cta p { margin: 0; font-size: var(--rmk-fs-md); }

/* App and staff page headings */
.rmk-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
                 gap: var(--rmk-space-4); margin-bottom: var(--rmk-space-5); }
.rmk-page-head h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 1.875rem); letter-spacing: -0.6px; }
.rmk-page-head__kicker { margin: 0 0 var(--rmk-space-1); color: var(--rmk-text-muted); font-size: var(--rmk-fs-sm); }
.rmk-page-head__lead { margin: 6px 0 0; color: var(--rmk-text-muted); max-width: 720px; }
.rmk-page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- 6. Cards ---------------------------------------------------- */
.rmk-card {
  background: var(--rmk-bg-surface); border: var(--rmk-border-w) solid var(--rmk-border);
  border-radius: var(--rmk-radius-card); padding: var(--rmk-space-6);
}
.rmk-card--strong { border: 2px solid var(--rmk-black); }
.rmk-card--brand { background: var(--rmk-brand-tint); border-color: var(--rmk-brand-hover); }
.rmk-card--flat { background: var(--rmk-grey-100); border-color: transparent; }
.rmk-card > :last-child { margin-bottom: 0; }
.rmk-card__title { font-weight: var(--rmk-fw-bold); font-size: 1.1875rem; margin: 0 0 var(--rmk-space-2); }
.rmk-card__text { margin: 0; color: var(--rmk-text-muted); }

/* Audience cards ("Who are you?") */
.rmk-audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--rmk-space-5); }
.rmk-audience {
  text-decoration: none; color: var(--rmk-black); border: var(--rmk-border-w) solid var(--rmk-border);
  border-radius: var(--rmk-radius-card); padding: var(--rmk-space-7); display: flex; flex-direction: column; gap: var(--rmk-space-3);
  background: var(--rmk-white);
}
.rmk-audience:hover { color: var(--rmk-black); border-color: var(--rmk-black); }
.rmk-audience__title { font-size: var(--rmk-fs-lg); font-weight: var(--rmk-fw-bold); }
.rmk-audience__text { color: var(--rmk-text-muted); }
.rmk-audience__link { margin-top: auto; font-weight: var(--rmk-fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.rmk-audience--feature {
  grid-column: 1 / -1; color: var(--rmk-white); background: var(--rmk-black); border-color: var(--rmk-black);
  border-radius: var(--rmk-radius-3xl); padding: var(--rmk-space-9); flex-direction: row; flex-wrap: wrap;
  gap: var(--rmk-space-7); align-items: center; justify-content: space-between;
}
.rmk-audience--feature:hover { color: var(--rmk-white); border-color: var(--rmk-brand); }
.rmk-audience--feature .rmk-audience__body { flex: 1 1 420px; min-width: 0; display: block; }
.rmk-audience--feature .rmk-audience__title { display: block; font-size: 1.875rem; font-weight: var(--rmk-fw-heavy);
                                              letter-spacing: -0.6px; margin-bottom: var(--rmk-space-2); }
.rmk-audience--feature .rmk-audience__text { display: block; color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-md); }
.rmk-audience__fine { display: block; margin-top: var(--rmk-space-2); font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); }
.rmk-audience--feature .rmk-audience__fine { color: var(--rmk-grey-on-black); }
.rmk-credit-terms__ncr { white-space: nowrap; }
/* A row of filters (Village leads): wraps on a phone. */
.rmk-filters { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); align-items: flex-end; }
.rmk-filters label { display: flex; flex-direction: column; gap: var(--rmk-space-1); font-size: var(--rmk-fs-sm); }
/* The village request form's honeypot: off screen for people, still filled in by simple robots. */
.rmk-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rmk-audience__cta {
  min-height: var(--rmk-tap-lg); display: inline-flex; align-items: center; padding: 0 var(--rmk-space-7);
  background: var(--rmk-brand); border-radius: var(--rmk-radius-lg); color: var(--rmk-black);
  font-size: var(--rmk-fs-md); font-weight: var(--rmk-fw-semibold);
}
.rmk-icon-box {
  width: 52px; height: 52px; border-radius: var(--rmk-radius-xl); background: var(--rmk-black);
  display: flex; align-items: center; justify-content: center; color: var(--rmk-brand); flex-shrink: 0;
}
.rmk-icon-box--sm { width: 44px; height: 44px; border-radius: var(--rmk-radius-lg); }

/* Badges (pills) */
.rmk-badge {
  display: inline-flex; align-items: center; gap: var(--rmk-space-1); padding: var(--rmk-space-1) var(--rmk-space-3);
  font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-semibold); line-height: 1.3;
  border-radius: var(--rmk-radius-pill); border: var(--rmk-border-w) solid transparent;
  background: var(--rmk-grey-100); color: var(--rmk-black);
}
.rmk-badge--brand   { background: var(--rmk-brand); color: var(--rmk-black); font-weight: var(--rmk-fw-bold); }
.rmk-badge--tint    { background: var(--rmk-brand-tint); border-color: var(--rmk-brand-hover); }
.rmk-badge--neutral { background: var(--rmk-grey-100); border-color: var(--rmk-border); }
.rmk-badge--success { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-badge--warning { background: var(--rmk-warning-tint); border-color: var(--rmk-warning); }
.rmk-badge--danger  { background: var(--rmk-danger-tint);  border-color: var(--rmk-danger); }
.rmk-badge--dark    { background: var(--rmk-black); color: var(--rmk-brand); }
.rmk-badge--on-black { background: transparent; border-color: var(--rmk-black-line); color: var(--rmk-grey-300);
                       font-weight: var(--rmk-fw-regular); font-size: var(--rmk-fs-sm); padding: 6px 14px; }
.rmk-badge--sm { padding: 1px var(--rmk-space-2); font-size: var(--rmk-fs-2xs); font-weight: var(--rmk-fw-bold); }
.rmk-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Feature cards */
.rmk-feature { border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-card); padding: 26px; background: var(--rmk-white); }
.rmk-feature__title { font-weight: var(--rmk-fw-bold); font-size: 1.1875rem; margin: 0 0 var(--rmk-space-2); }
.rmk-feature__text { margin: 0; color: var(--rmk-text-muted); }
.rmk-feature__text + .rmk-badge { margin-top: 14px; }
.rmk-feature--dark { background: transparent; border-color: var(--rmk-black-line); }
.rmk-feature--dark .rmk-feature__title { color: var(--rmk-brand); }
.rmk-feature--dark .rmk-feature__text { color: var(--rmk-grey-300); }
.rmk-hero-stat { border: var(--rmk-border-w) solid var(--rmk-black-line); border-radius: var(--rmk-radius-card); padding: var(--rmk-space-6); }
.rmk-hero-stat__value { font-size: var(--rmk-fs-2xl); font-weight: var(--rmk-fw-heavy); color: var(--rmk-brand); margin-bottom: 6px; line-height: 1.2; }
.rmk-hero-stat p { margin: 0; color: var(--rmk-grey-300); }
@media (max-width: 420px) { .rmk-hero-stat { padding: var(--rmk-space-4); } .rmk-hero-stat__value { font-size: var(--rmk-fs-lg); } }

/* Numbered step cards */
.rmk-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--rmk-space-5); }
.rmk-step {
  background: var(--rmk-white); border-radius: var(--rmk-radius-card); padding: var(--rmk-space-6);
  border-top: 4px solid var(--rmk-brand);
}
.rmk-step--grey { background: var(--rmk-grey-100); }
.rmk-step--lg { padding: var(--rmk-space-7); }
.rmk-step__num { font-size: var(--rmk-fs-4xl); font-weight: var(--rmk-fw-heavy); line-height: 1; margin-bottom: var(--rmk-space-3); }
.rmk-step--lg .rmk-step__num { font-size: 2.75rem; margin-bottom: var(--rmk-space-4); }
.rmk-step__title { font-weight: var(--rmk-fw-bold); margin: 0 0 6px; font-size: var(--rmk-fs-base); }
.rmk-step--lg .rmk-step__title { font-size: 1.1875rem; margin-bottom: var(--rmk-space-2); }
.rmk-step p { margin: 0; color: var(--rmk-text-muted); }

/* Numbered list with round cyan numbers */
.rmk-numlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--rmk-space-4); }
.rmk-numlist li { display: flex; gap: 14px; align-items: flex-start; }
.rmk-numlist__n { width: 34px; height: 34px; border-radius: 50%; background: var(--rmk-brand); display: flex;
                  align-items: center; justify-content: center; font-weight: var(--rmk-fw-heavy); flex-shrink: 0; }

/* Info tiles (trust row) */
.rmk-tile { background: var(--rmk-grey-100); border-radius: var(--rmk-radius-card); padding: var(--rmk-space-6); }
.rmk-tile__title { font-weight: var(--rmk-fw-bold); margin-bottom: var(--rmk-space-1); }
.rmk-tile__text { color: var(--rmk-text-muted); font-size: var(--rmk-fs-nav); }
.rmk-tile--white { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); padding: 18px; }

/* Panel card with a black header (fee breakdown, "three ways") */
.rmk-panel { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-2xl); overflow: hidden; }
.rmk-panel__head { background: var(--rmk-black); color: var(--rmk-brand); padding: 18px var(--rmk-space-6);
                   font-weight: var(--rmk-fw-bold); font-size: 1.1875rem; margin: 0; }
.rmk-panel__head--sm { padding: var(--rmk-space-4) 22px; font-size: 1.0625rem; }
.rmk-panel__body { padding: var(--rmk-space-6); }
.rmk-panel__body p { color: var(--rmk-text-muted); margin: 0 0 14px; }
.rmk-panel__body p:last-child { margin-bottom: 0; }
.rmk-panel__fine { font-size: var(--rmk-fs-sm); }

/* Fee breakdown lines */
.rmk-fees { padding: 22px; display: flex; flex-direction: column; gap: 10px; font-size: var(--rmk-fs-base); }
.rmk-fees__line { display: flex; justify-content: space-between; gap: var(--rmk-space-3); }
.rmk-fees__line--fee { color: var(--rmk-text-muted); }
.rmk-fees__total { display: flex; justify-content: space-between; gap: var(--rmk-space-3); border-top: 2px solid var(--rmk-black);
                   padding-top: var(--rmk-space-3); font-weight: var(--rmk-fw-heavy); font-size: 1.25rem; }
.rmk-fees__total small { font-size: var(--rmk-fs-sm); font-weight: var(--rmk-fw-medium); color: var(--rmk-text-muted); }
.rmk-note {
  margin-top: var(--rmk-space-5); background: var(--rmk-brand-tint); border: var(--rmk-border-w) solid var(--rmk-brand-hover);
  border-radius: var(--rmk-radius-xl); padding: 18px 22px; font-size: var(--rmk-fs-base);
}

/* Check list with green ticks */
.rmk-checklist { display: flex; flex-direction: column; gap: var(--rmk-space-4); margin: 0; padding: 0; list-style: none; }
.rmk-checklist li { display: flex; gap: 14px; font-size: 1.0625rem; max-width: none; }
.rmk-checklist svg { color: var(--rmk-success); flex-shrink: 0; }
.rmk-checklist--sm li { font-size: var(--rmk-fs-base); gap: var(--rmk-space-3); }
.rmk-doclist { display: flex; flex-direction: column; gap: var(--rmk-space-3); margin: 0; padding: 0; list-style: none; }
.rmk-doclist li { display: flex; gap: 14px; align-items: center; border: var(--rmk-border-w) solid var(--rmk-border);
                  border-radius: var(--rmk-radius-lg); padding: 14px 18px; max-width: none; background: var(--rmk-white); }

/* "What you get" rows */
.rmk-rows { display: flex; flex-direction: column; gap: 14px; }
.rmk-rows > div { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); padding: 18px; }
.rmk-rows span { color: var(--rmk-text-muted); }
.rmk-whitebox { background: var(--rmk-white); border-radius: var(--rmk-radius-2xl); padding: 26px; display: flex; flex-direction: column; gap: 14px; }

/* FAQ */
.rmk-faq { display: flex; flex-direction: column; gap: var(--rmk-space-3); }
.rmk-faq details { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); padding: 0 22px; }
.rmk-faq summary { min-height: 60px; display: flex; align-items: center; font-weight: var(--rmk-fw-bold); font-size: 1.0625rem; cursor: pointer; }
.rmk-faq details p { margin: 0 0 var(--rmk-space-5); color: var(--rmk-text-muted); }

/* Phone illustration (Shops page) */
.rmk-phone { width: 300px; max-width: 100%; border-radius: 36px; background: var(--rmk-black); padding: var(--rmk-space-3); box-shadow: var(--rmk-shadow-phone); }
.rmk-phone__screen { background: var(--rmk-grey-100); border-radius: 26px; overflow: hidden; }
.rmk-phone__top { background: var(--rmk-black); color: var(--rmk-white); padding: 18px; }
.rmk-phone__hi { color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-2xs); }
.rmk-phone__name { font-weight: var(--rmk-fw-heavy); font-size: var(--rmk-fs-md); margin-bottom: 10px; }
.rmk-phone__card { background: var(--rmk-black-raised); border-radius: var(--rmk-radius-lg); padding: 10px var(--rmk-space-3); }
.rmk-phone__card small { display: block; font-size: 11px; color: var(--rmk-grey-on-black); }
.rmk-phone__card strong { color: var(--rmk-brand); font-weight: var(--rmk-fw-heavy); font-size: 1.25rem; }
.rmk-phone__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rmk-phone__next { background: var(--rmk-white); border: 2px solid var(--rmk-black); border-radius: var(--rmk-radius-lg); padding: var(--rmk-space-3);
                   font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-sm); }
.rmk-phone__next span { display: block; margin-top: var(--rmk-space-2); background: var(--rmk-brand); border-radius: var(--rmk-radius-md);
                        padding: var(--rmk-space-2); text-align: center; font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-regular); }
.rmk-phone__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmk-space-2); }
.rmk-phone__tiles span { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-btn);
                         padding: var(--rmk-space-3); font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-bold); }

/* Referral card (Sales reps page) */
.rmk-refcard { width: 100%; max-width: 400px; background: var(--rmk-white); color: var(--rmk-black); border-radius: var(--rmk-radius-3xl); padding: 26px; }
.rmk-refcard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rmk-space-4); gap: var(--rmk-space-2); }
.rmk-refcard__row { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.rmk-refcard__qr { width: 110px; height: 110px; flex-shrink: 0; border: 2px solid var(--rmk-black); border-radius: var(--rmk-radius-lg);
                   padding: var(--rmk-space-2); display: flex; align-items: center; justify-content: center; text-align: center;
                   font-size: var(--rmk-fs-2xs); color: var(--rmk-text-muted); }
.rmk-refcard__qr img, .rmk-refcard__qr svg { width: 100%; height: 100%; }
.rmk-refcard__code { font-weight: var(--rmk-fw-heavy); font-size: 1.625rem; letter-spacing: 2px; word-break: break-all; }
.rmk-minitile { background: var(--rmk-grey-100); border-radius: var(--rmk-radius-lg); padding: var(--rmk-space-3); }
.rmk-minitile small { display: block; color: var(--rmk-text-muted); font-size: var(--rmk-fs-2xs); }
.rmk-minitile strong { font-weight: var(--rmk-fw-heavy); font-size: 1.25rem; }

/* Tender list (public) */
.rmk-tenders { display: flex; flex-direction: column; gap: var(--rmk-space-3); }
.rmk-tender { border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); padding: 18px;
              display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rmk-space-3); align-items: center; background: var(--rmk-white); }
.rmk-tender__item { font-weight: var(--rmk-fw-bold); font-size: 1.0625rem; }
.rmk-tender__meta { color: var(--rmk-text-muted); font-size: var(--rmk-fs-nav); }

/* Long text (privacy, terms, help pages) */
.rmk-prose { max-width: var(--rmk-measure); }
.rmk-prose h1, .rmk-prose h2 { font-size: var(--rmk-fs-xl); margin: var(--rmk-space-8) 0 var(--rmk-space-3); }
.rmk-prose h3 { margin: var(--rmk-space-6) 0 var(--rmk-space-2); }
.rmk-prose ul, .rmk-prose ol { padding-left: var(--rmk-space-6); margin: 0 0 var(--rmk-space-4); }
.rmk-prose li { margin-bottom: var(--rmk-space-1); }
.rmk-prose table { border-collapse: collapse; width: 100%; margin-bottom: var(--rmk-space-4); }
.rmk-prose th, .rmk-prose td { border: var(--rmk-border-w) solid var(--rmk-border); padding: var(--rmk-space-2); text-align: left; }
.rmk-prose img { border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-md); }

/* ---------- 7. Villages ------------------------------------------------- */
.rmk-villages { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rmk-village {
  min-height: var(--rmk-tap); display: inline-flex; align-items: center; gap: 10px; padding: 0 var(--rmk-space-4);
  background: var(--rmk-brand); color: var(--rmk-black); border-radius: var(--rmk-radius-lg); text-decoration: none;
  font-weight: var(--rmk-fw-semibold); border: 0; font-family: inherit; font-size: var(--rmk-fs-base); cursor: pointer;
}
.rmk-village:hover { background: var(--rmk-brand-hover); color: var(--rmk-black); }
.rmk-village[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--rmk-white); }
.rmk-village--soon { background: transparent; border: var(--rmk-border-w) dashed var(--rmk-grey-on-black); color: var(--rmk-grey-300);
                     font-weight: var(--rmk-fw-regular); cursor: default; }
.rmk-village--soon:hover { background: transparent; color: var(--rmk-grey-300); }
.rmk-village--soon small { font-size: var(--rmk-fs-xs); color: var(--rmk-grey-on-black); }
.rmk-village-shops { background: var(--rmk-black-raised); border-radius: var(--rmk-radius-xl); padding: var(--rmk-space-4) 18px; margin-bottom: 18px; }
.rmk-village-shops h3 { color: var(--rmk-brand); margin: 0 0 var(--rmk-space-2); font-size: var(--rmk-fs-md); }
.rmk-village-shops ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rmk-village-shops li { color: var(--rmk-grey-300); max-width: none; }
.rmk-village-shops li strong { color: var(--rmk-white); display: block; }
.rmk-village-shops li span { font-size: var(--rmk-fs-sm); color: var(--rmk-grey-on-black); }
.rmk-on-black-note { margin: 0; font-size: var(--rmk-fs-xs); color: var(--rmk-grey-on-black); }
/* October 2026: the slim village card near the top of every public page, and the village form as an advert. */
.rmk-village-card { padding: var(--rmk-space-3) var(--rmk-space-4); background: var(--rmk-grey-100); }
.rmk-village-card__inner {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--rmk-space-3); background: var(--rmk-black); color: var(--rmk-white); border-left: 6px solid var(--rmk-brand);
  border-radius: var(--rmk-radius-lg); padding: var(--rmk-space-3) var(--rmk-space-4);
}
.rmk-village-card__text { margin: 0; display: flex; align-items: center; gap: var(--rmk-space-2); font-weight: var(--rmk-fw-semibold); max-width: none; }
.rmk-village-card__text svg { color: var(--rmk-brand); flex: none; }
.rmk-village-card__actions { display: flex; flex-wrap: wrap; gap: var(--rmk-space-2); }
.rmk-advert { background: var(--rmk-brand-tint); border-radius: var(--rmk-radius-lg); padding: var(--rmk-space-4); }
.rmk-form-card .rmk-advert__title { margin: 0 0 var(--rmk-space-2); color: var(--rmk-black); font-weight: var(--rmk-fw-bold); }
.rmk-advert__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rmk-space-2); }
.rmk-advert__list li { display: flex; align-items: flex-start; gap: var(--rmk-space-2); max-width: none; }
.rmk-advert__list svg { flex: none; }
.rmk-village-progress { display: flex; flex-direction: column; gap: var(--rmk-space-2); }
.rmk-progress { width: 100%; height: 14px; accent-color: var(--rmk-black); }
.rmk-form-card {
  flex: 1 1 380px; min-width: 0; background: var(--rmk-white); color: var(--rmk-black); border-radius: var(--rmk-radius-3xl);
  padding: var(--rmk-space-7); display: flex; flex-direction: column; gap: var(--rmk-space-4);
}
.rmk-form-card h3 { margin: 0 0 6px; font-size: var(--rmk-fs-xl); font-weight: var(--rmk-fw-heavy); }
.rmk-form-card p { margin: 0; color: var(--rmk-text-muted); }
.rmk-form-card--grey { background: var(--rmk-grey-100); padding: var(--rmk-space-8); }
.rmk-form-card--grey h2 { margin: 0 0 6px; font-size: var(--rmk-fs-2xl); }
@media (max-width: 420px) { .rmk-form-card, .rmk-form-card--grey { padding: var(--rmk-space-5); } }

/* ---------- 8. Products page ------------------------------------------ */
.rmk-pricebar { background: var(--rmk-white); border-bottom: var(--rmk-border-w) solid var(--rmk-border); }
.rmk-pricebar__inner { max-width: var(--rmk-container-wide); margin: 0 auto; padding: 22px var(--rmk-gutter); }
@media (min-width: 640px) { .rmk-pricebar__inner { padding: 22px var(--rmk-gutter-wide); } }
.rmk-price-toggle { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); margin-bottom: 14px; }
.rmk-price-option {
  flex: 1 1 280px; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: var(--rmk-space-2) 22px;
  background: var(--rmk-white); border: 2px solid var(--rmk-black); border-radius: var(--rmk-radius-xl);
  font: inherit; text-align: left; cursor: pointer; color: var(--rmk-black); text-decoration: none;
}
.rmk-price-option:hover { color: var(--rmk-black); background: var(--rmk-grey-100); }
.rmk-price-option__title { display: block; font-weight: var(--rmk-fw-heavy); font-size: 1.1875rem; }
.rmk-price-option__sub { display: block; font-size: var(--rmk-fs-sm); color: var(--rmk-text-muted); }
.rmk-price-option svg { flex-shrink: 0; }
.rmk-price-option--retail[aria-selected="true"] { background: var(--rmk-brand); }
.rmk-price-option--retail[aria-selected="true"] .rmk-price-option__sub { color: var(--rmk-black); }
.rmk-price-option--wholesale[aria-selected="true"] { background: var(--rmk-black); color: var(--rmk-white); }
.rmk-price-option--wholesale[aria-selected="true"] svg,
.rmk-price-option--wholesale[aria-selected="true"] .rmk-price-option__title { color: var(--rmk-brand); }
.rmk-price-option--wholesale[aria-selected="true"] .rmk-price-option__sub { color: var(--rmk-grey-on-black); }
.rmk-infobar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center;
  background: var(--rmk-brand-tint); border: var(--rmk-border-w) solid var(--rmk-brand-hover);
  border-radius: var(--rmk-radius-lg); padding: var(--rmk-space-3) var(--rmk-space-4); font-size: var(--rmk-fs-nav);
}
.rmk-infobar a { font-weight: var(--rmk-fw-semibold); }
.rmk-infobar--dark { background: var(--rmk-black); color: var(--rmk-white); border-color: var(--rmk-black); }
.rmk-infobar--dark strong { color: var(--rmk-brand); }
.rmk-infobar--dark .rmk-infobar__aside { color: var(--rmk-grey-on-black); }
.rmk-infobar--warn { background: var(--rmk-warning-tint); border-color: var(--rmk-warning); }

.rmk-shop { max-width: var(--rmk-container-wide); margin: 0 auto; padding: var(--rmk-space-6) var(--rmk-gutter);
            display: flex; flex-wrap: wrap; gap: var(--rmk-space-6); align-items: flex-start; }
@media (min-width: 640px) { .rmk-shop { padding: var(--rmk-space-6) var(--rmk-gutter-wide); } }
.rmk-shop__main { flex: 999 1 640px; min-width: 0; }
.rmk-shop__aside { flex: 1 1 300px; min-width: 0; max-width: 100%; }
@media (min-width: 960px) { .rmk-shop__aside { position: sticky; top: var(--rmk-space-4); } }
.rmk-shop__filters { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); margin-bottom: 14px; }
.rmk-search {
  flex: 3 1 320px; display: flex; align-items: center; gap: 10px; background: var(--rmk-white);
  border: var(--rmk-border-w) solid var(--rmk-grey-600); border-radius: var(--rmk-radius-lg); padding: 0 14px; min-height: 52px;
}
.rmk-search svg { color: var(--rmk-text-muted); flex-shrink: 0; }
.rmk-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: var(--rmk-fs-base); min-height: var(--rmk-tap); background: transparent; }
.rmk-search:focus-within { box-shadow: var(--rmk-focus-ring); }
.rmk-collect { flex: 2 1 240px; min-width: 0; }
.rmk-collect select { width: 100%; min-height: 52px; padding: 0 14px; border: var(--rmk-border-w) solid var(--rmk-grey-600);
                      border-radius: var(--rmk-radius-lg); font: inherit; font-size: var(--rmk-fs-base); background: var(--rmk-white); color: var(--rmk-text); }
.rmk-chiprow { display: flex; flex-wrap: wrap; gap: var(--rmk-space-2); margin-bottom: 26px; }
.rmk-chip {
  min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--rmk-space-4); border-radius: var(--rmk-radius-pill);
  background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); text-decoration: none; font-size: var(--rmk-fs-sm); color: var(--rmk-black);
}
.rmk-chip:hover { border-color: var(--rmk-black); color: var(--rmk-black); }
.rmk-chip--local { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-chip[aria-current="true"] { background: var(--rmk-black); color: var(--rmk-brand); border-color: var(--rmk-black); font-weight: var(--rmk-fw-semibold); }
.rmk-shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--rmk-space-2); margin-bottom: 14px; }
.rmk-shelf-head h1, .rmk-shelf-head h2 { margin: 0; }
.rmk-shelf-head h1 { font-size: var(--rmk-fs-2xl); letter-spacing: -0.5px; }
.rmk-shelf-head h2 { font-size: var(--rmk-fs-xl); letter-spacing: -0.4px; }
.rmk-shelf-head span { font-size: var(--rmk-fs-sm); color: var(--rmk-text-muted); }

.rmk-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rmk-space-4); margin-bottom: var(--rmk-space-9); }
@media (max-width: 520px) { .rmk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmk-space-3); } }
.rmk-pcard { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-card);
             overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.rmk-pcard--special { border: 2px solid var(--rmk-black); }
.rmk-pcard__img { aspect-ratio: 4 / 3; background: var(--rmk-brand-tint); display: flex; align-items: center; justify-content: center;
                  position: relative; color: var(--rmk-black); }
.rmk-pcard__img--local { background: var(--rmk-success-tint); }
.rmk-pcard__img img { width: 100%; height: 100%; object-fit: contain; background: var(--rmk-white); }
.rmk-pcard__img a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: inherit; }
.rmk-pcard__badge { position: absolute; top: 10px; left: 10px; background: var(--rmk-brand); border: var(--rmk-border-w) solid var(--rmk-black);
                    border-radius: var(--rmk-radius-pill); padding: var(--rmk-space-half) 10px; font-size: var(--rmk-fs-2xs); font-weight: var(--rmk-fw-bold); }
.rmk-pcard__badge--local { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-pcard__badge + .rmk-pcard__badge { top: 38px; }
.rmk-pcard__body { padding: 14px; display: flex; flex-direction: column; gap: var(--rmk-space-1); flex: 1; }
.rmk-pcard__name { font-weight: var(--rmk-fw-semibold); font-size: var(--rmk-fs-base); overflow-wrap: anywhere; }
.rmk-pcard__name a { color: inherit; text-decoration: none; }
.rmk-pcard__name a:hover { text-decoration: underline; }
.rmk-pcard__prices { display: flex; align-items: baseline; gap: var(--rmk-space-2); flex-wrap: wrap; }
.rmk-pcard__price { font-weight: var(--rmk-fw-heavy); font-size: var(--rmk-fs-lg); font-variant-numeric: tabular-nums; }
.rmk-pcard__was { color: var(--rmk-text-muted); text-decoration: line-through; font-size: var(--rmk-fs-sm); }
.rmk-pcard__sub { color: var(--rmk-text-muted); font-size: var(--rmk-fs-xs); margin-bottom: 10px; }
.rmk-pcard__from { color: var(--rmk-warning); font-weight: var(--rmk-fw-semibold); }   /* "Price from <date>" */
.rmk-pcard__add { margin-top: auto; }
.rmk-pcard__add .rmk-btn { width: 100%; }
@media (max-width: 520px) {
  .rmk-pcard__body { padding: 10px; }
  .rmk-pcard__price { font-size: var(--rmk-fs-md); }
}
.rmk-stepper { display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--rmk-black);
               border-radius: var(--rmk-radius-btn); min-height: var(--rmk-tap); }
.rmk-stepper button { width: var(--rmk-tap); min-height: var(--rmk-tap-sm); background: none; border: 0; font: inherit;
                      font-size: 1.375rem; cursor: pointer; color: var(--rmk-black); flex-shrink: 0; }
.rmk-stepper span { font-weight: var(--rmk-fw-bold); text-align: center; font-size: var(--rmk-fs-sm); }
.rmk-pholder { color: var(--rmk-black); }

.rmk-cart { background: var(--rmk-white); border: 2px solid var(--rmk-black); border-radius: var(--rmk-radius-2xl); overflow: hidden; }
.rmk-cart__head { background: var(--rmk-black); color: var(--rmk-brand); padding: var(--rmk-space-4) var(--rmk-space-5);
                  font-weight: var(--rmk-fw-heavy); font-size: var(--rmk-fs-md); display: flex; justify-content: space-between; gap: var(--rmk-space-2); margin: 0; }
.rmk-cart__head span:last-child { color: var(--rmk-white); }
.rmk-cart__body { padding: var(--rmk-space-4) var(--rmk-space-5); display: flex; flex-direction: column; gap: 10px; }
.rmk-cart__line { display: flex; justify-content: space-between; gap: 10px; font-size: var(--rmk-fs-nav); }
.rmk-cart__total { display: flex; justify-content: space-between; border-top: 2px solid var(--rmk-black); padding-top: var(--rmk-space-3);
                   font-weight: var(--rmk-fw-heavy); font-size: 1.25rem; gap: var(--rmk-space-2); }
.rmk-cart__go { min-height: var(--rmk-tap-lg); font-size: 1.0625rem; }
.rmk-cart__note { margin: 0; font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); }
.rmk-cart__empty { margin: 0; color: var(--rmk-text-muted); }

/* ---------- 9. Forms ---------------------------------------------------- */
.rmk-form { max-width: 640px; }
.rmk-form--wide { max-width: none; }
.rmk-field { margin-bottom: var(--rmk-space-5); }
.rmk-form-card .rmk-field, .rmk-form-card--grey .rmk-field { margin-bottom: 0; }
.rmk-label { display: block; font-weight: var(--rmk-fw-semibold); margin-bottom: 6px; }
.rmk-label__opt { font-weight: var(--rmk-fw-regular); color: var(--rmk-text-muted); }
.rmk-required { color: var(--rmk-danger); margin-left: 2px; }
.rmk-input, .rmk-select, .rmk-textarea,
.rmk-form input[type="text"], .rmk-form input[type="email"], .rmk-form input[type="tel"],
.rmk-form input[type="number"], .rmk-form input[type="password"], .rmk-form input[type="date"],
.rmk-form input[type="datetime-local"], .rmk-form input[type="time"], .rmk-form input[type="url"],
.rmk-form input[type="search"], .rmk-form input[type="file"], .rmk-form select, .rmk-form textarea {
  display: block; width: 100%;
  min-height: 50px;
  padding: var(--rmk-space-3) 14px;
  font: inherit; font-size: var(--rmk-fs-base); color: var(--rmk-text);
  background: var(--rmk-white);
  border: var(--rmk-border-w) solid var(--rmk-grey-600);
  border-radius: var(--rmk-radius-btn);
}
.rmk-textarea, .rmk-form textarea { min-height: 120px; resize: vertical; }
.rmk-input:focus-visible, .rmk-select:focus-visible, .rmk-textarea:focus-visible,
.rmk-form input:focus-visible, .rmk-form select:focus-visible, .rmk-form textarea:focus-visible {
  border-color: var(--rmk-black); box-shadow: var(--rmk-focus-ring); border-radius: var(--rmk-radius-btn);
}
.rmk-input:disabled, .rmk-form input:disabled, .rmk-form select:disabled { background: var(--rmk-grey-100); color: var(--rmk-grey-600); cursor: not-allowed; }
.rmk-help  { display: block; font-size: var(--rmk-fs-sm); color: var(--rmk-text-muted); margin: 0 0 6px; }
.rmk-error { display: block; font-size: var(--rmk-fs-sm); color: var(--rmk-danger); margin-top: var(--rmk-space-1); font-weight: var(--rmk-fw-semibold); }
.rmk-field--error input, .rmk-field--error select, .rmk-field--error textarea { border-color: var(--rmk-danger); }
.rmk-check { display: flex; align-items: flex-start; gap: var(--rmk-space-3); min-height: var(--rmk-tap); }
.rmk-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--rmk-black); flex-shrink: 0; }
.rmk-check label { font-weight: var(--rmk-fw-regular); }
.rmk-choices { display: flex; flex-direction: column; gap: var(--rmk-space-2); margin: 0; padding: 0; list-style: none; }
.rmk-choices label { display: flex; align-items: center; gap: var(--rmk-space-3); min-height: var(--rmk-tap-sm); font-weight: var(--rmk-fw-regular); }
.rmk-choices input { width: 22px; height: 22px; accent-color: var(--rmk-black); }
.rmk-error-summary { border: 2px solid var(--rmk-danger); background: var(--rmk-danger-tint); border-radius: var(--rmk-radius-lg);
                     padding: var(--rmk-space-4) var(--rmk-space-5); margin-bottom: var(--rmk-space-5); }
.rmk-error-summary h2 { font-size: var(--rmk-fs-md); margin: 0 0 var(--rmk-space-2); }
.rmk-error-summary ul { margin: 0; padding-left: var(--rmk-space-5); }
.rmk-error-summary a { color: var(--rmk-black); font-weight: var(--rmk-fw-semibold); }
.rmk-form-actions { display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); align-items: center; margin-top: var(--rmk-space-2); }
.rmk-form-foot { margin: 0; color: var(--rmk-text-muted); font-size: var(--rmk-fs-sm); text-align: center; }
.rmk-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rmk-space-3); padding: var(--rmk-space-4);
              border: 2px dashed var(--rmk-border); border-radius: var(--rmk-radius-md); background: var(--rmk-white); }

/* Role picker (Register) */
.rmk-roles { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--rmk-space-4); padding: 0; border: 0; }
.rmk-role {
  display: flex; align-items: center; gap: 14px; background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border);
  border-radius: var(--rmk-radius-xl); padding: 14px; color: var(--rmk-black); cursor: pointer; text-decoration: none; position: relative;
}
.rmk-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rmk-role:has(input:checked), .rmk-role.is-selected { border: 2px solid var(--rmk-black); box-shadow: 0 0 0 3px var(--rmk-brand); padding: 13px; }
.rmk-role:has(input:focus-visible) { box-shadow: var(--rmk-focus-ring); }
.rmk-role__text { flex: 1; }
.rmk-role__title { display: block; font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-base); }
.rmk-role__sub { display: block; color: var(--rmk-text-muted); font-size: var(--rmk-fs-xs); }
.rmk-auth { max-width: 440px; margin: 0 auto; }
.rmk-auth h1 { font-size: 1.625rem; letter-spacing: -0.5px; margin: 0 0 6px; }
.rmk-auth__lead { margin: 0 0 18px; color: var(--rmk-text-muted); font-size: var(--rmk-fs-nav); }
.rmk-auth__foot { margin: var(--rmk-space-3) 0 0; text-align: center; font-size: var(--rmk-fs-nav); color: var(--rmk-text-muted); }
.rmk-auth__foot a { font-weight: var(--rmk-fw-semibold); }

/* ---------- 10. Alerts, tables, meters, steps, empty -------------------- */
.rmk-alert { padding: 14px 18px; border-radius: var(--rmk-radius-lg); border: var(--rmk-border-w) solid var(--rmk-border);
             background: var(--rmk-white); color: var(--rmk-black); margin-bottom: var(--rmk-space-4);
             display: flex; flex-wrap: wrap; gap: var(--rmk-space-3); justify-content: space-between; align-items: center; }
.rmk-alert > :last-child { margin-bottom: 0; }
.rmk-alert--success { border-color: var(--rmk-success); background: var(--rmk-success-tint); }
.rmk-alert--warning { border-color: var(--rmk-warning); background: var(--rmk-warning-tint); }
.rmk-alert--error, .rmk-alert--danger { border-color: var(--rmk-danger); background: var(--rmk-danger-tint); }
.rmk-alert--info { border-color: var(--rmk-brand-hover); background: var(--rmk-brand-tint); }
.rmk-alert__action { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--rmk-space-4);
                     background: var(--rmk-black); color: var(--rmk-brand); border-radius: var(--rmk-radius-md); text-decoration: none; font-size: var(--rmk-fs-sm); }
.rmk-alert__action:hover { color: var(--rmk-white); }
.rmk-messages { margin: var(--rmk-space-4) 0; }

/* position: relative keeps hidden labels (visually-hidden, absolutely positioned) inside the scroll box, so a wide
   table scrolls in its box instead of widening the whole page on a phone. */
.rmk-table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmk-table { width: 100%; border-collapse: collapse; font-size: var(--rmk-fs-nav); }
.rmk-table th { background: var(--rmk-black); color: var(--rmk-brand); text-align: left; font-weight: var(--rmk-fw-bold);
                padding: 10px var(--rmk-space-4); white-space: nowrap; }
.rmk-table td { padding: var(--rmk-space-3) var(--rmk-space-4); border-top: var(--rmk-border-w) solid var(--rmk-border); vertical-align: middle; }
.rmk-table tbody tr:nth-child(even) { background: var(--rmk-grey-100); }
.rmk-table .rmk-num, .rmk-table th.rmk-num { text-align: right; font-variant-numeric: tabular-nums; }
.rmk-table tfoot td { font-weight: var(--rmk-fw-bold); border-top: 2px solid var(--rmk-black); }
.rmk-table--sm { font-size: var(--rmk-fs-sm); }
.rmk-table--sm th, .rmk-table--sm td { padding: 9px var(--rmk-space-3); }
.rmk-table--wide { min-width: 860px; }
.rmk-table td.is-lowest { background: var(--rmk-success-tint); }
.rmk-table td.is-chosen { font-weight: var(--rmk-fw-bold); }
.rmk-table td.is-flag { color: var(--rmk-danger); }
.rmk-table .rmk-actions { text-align: right; white-space: nowrap; }
.rmk-table__reason { font-size: var(--rmk-fs-2xs); color: var(--rmk-text-muted); }

.rmk-meter { height: 10px; background: var(--rmk-grey-300); border-radius: var(--rmk-radius-pill); overflow: hidden; }
.rmk-meter--lg { height: 12px; }
.rmk-meter--sm { height: 8px; }
.rmk-meter--on-black { background: var(--rmk-black-line); }
.rmk-meter--on-warning { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-warning); }
.rmk-meter__bar { height: 100%; background: var(--rmk-brand); }
.rmk-meter__bar--edge { border-right: 2px solid var(--rmk-black); }
.rmk-meter__bar--success { background: var(--rmk-success); }
.rmk-meter__bar--warning { background: var(--rmk-warning); }
.rmk-meter__bar--danger  { background: var(--rmk-danger); }
.rmk-meter-label { display: flex; justify-content: space-between; gap: var(--rmk-space-2); font-size: var(--rmk-fs-sm); margin-bottom: 6px; }
.rmk-meter-note { font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-semibold); margin-top: var(--rmk-space-1); }

.rmk-progress-steps { display: flex; list-style: none; padding: 0; margin: 0 0 var(--rmk-space-6); gap: var(--rmk-space-2); counter-reset: s; flex-wrap: wrap; }
.rmk-progress-steps li { flex: 1; min-width: 90px; padding: var(--rmk-space-2) var(--rmk-space-3); border-radius: var(--rmk-radius-md);
                         background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); font-size: var(--rmk-fs-sm); counter-increment: s; }
.rmk-progress-steps li::before { content: counter(s) ". "; font-weight: var(--rmk-fw-bold); }
.rmk-progress-steps li.is-done { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-progress-steps li.is-current { background: var(--rmk-brand); border-color: var(--rmk-black); font-weight: var(--rmk-fw-bold); }
.rmk-progress-steps li.is-declined { background: var(--rmk-danger-tint); border-color: var(--rmk-danger); font-weight: var(--rmk-fw-bold); }

.rmk-empty { text-align: center; padding: var(--rmk-space-8) var(--rmk-space-5); background: var(--rmk-white);
             border: 2px dashed var(--rmk-border); border-radius: var(--rmk-radius-card); color: var(--rmk-text-muted); }
.rmk-empty p { margin: 0 auto var(--rmk-space-3); }
.rmk-empty p:last-child { margin-bottom: 0; }
.rmk-empty--on-black { background: transparent; border-color: var(--rmk-black-line); color: var(--rmk-grey-on-black); }

/* ---------- 11. App layout (role homes) ---------------------------------- */
.rmk-app { max-width: 720px; margin: 0 auto; }
.rmk-app-hero { background: var(--rmk-black); color: var(--rmk-white); }
.rmk-app-hero__inner { max-width: 720px; margin: 0 auto; padding: var(--rmk-space-4) var(--rmk-space-5) 22px; }
.rmk-app-hero__hi { margin: 0; color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-sm); }
.rmk-app-hero h1 { margin: 0 0 var(--rmk-space-4); font-size: var(--rmk-fs-xl); letter-spacing: -0.4px; }
.rmk-app-hero__card { background: var(--rmk-black-raised); border-radius: var(--rmk-radius-xl); padding: 14px var(--rmk-space-4); }
.rmk-app-hero__row { display: flex; justify-content: space-between; gap: var(--rmk-space-2); font-size: var(--rmk-fs-xs);
                     color: var(--rmk-grey-on-black); margin-bottom: var(--rmk-space-2); flex-wrap: wrap; }
.rmk-app-hero__value { font-size: 1.625rem; font-weight: var(--rmk-fw-heavy); color: var(--rmk-brand); margin-bottom: 10px; overflow-wrap: anywhere; }
.rmk-app-hero__value--text { font-size: var(--rmk-fs-md); }
.rmk-app-body { max-width: 720px; margin: 0 auto; padding: var(--rmk-space-4) var(--rmk-space-5) var(--rmk-space-10);
                display: flex; flex-direction: column; gap: 14px; }
.rmk-next { background: var(--rmk-white); border: 2px solid var(--rmk-black); border-radius: var(--rmk-radius-card); padding: var(--rmk-space-4); }
.rmk-next__title { font-weight: var(--rmk-fw-bold); font-size: 1.0625rem; margin: 6px 0 var(--rmk-space-1); }
.rmk-next p { margin: 0 0 var(--rmk-space-3); color: var(--rmk-text-muted); font-size: var(--rmk-fs-sm); }
.rmk-next .rmk-btn { width: 100%; }
.rmk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rmk-space-3); }
@media (min-width: 640px) { .rmk-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rmk-tile-link {
  background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl);
  padding: var(--rmk-space-4); text-decoration: none; color: var(--rmk-black); display: flex; flex-direction: column;
  gap: 10px; min-height: 96px;
}
.rmk-tile-link:hover { border-color: var(--rmk-black); color: var(--rmk-black); }
.rmk-tile-link__label { font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-nav); }
.rmk-tile-link__sub { color: var(--rmk-text-muted); font-size: var(--rmk-fs-xs); }
.rmk-row-link {
  background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl);
  padding: 14px var(--rmk-space-4); text-decoration: none; color: var(--rmk-black); display: flex; align-items: center;
  justify-content: space-between; min-height: var(--rmk-tap-lg); gap: var(--rmk-space-3);
}
.rmk-row-link:hover { border-color: var(--rmk-black); color: var(--rmk-black); }
.rmk-row-link__title { display: block; font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-nav); }
.rmk-row-link__sub { display: block; color: var(--rmk-text-muted); font-size: var(--rmk-fs-xs); }
.rmk-bottomnav { display: none; }
@media (max-width: 760px) {
  .rmk-has-bottomnav { padding-bottom: 76px; }
  .rmk-bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--rmk-black); padding: 6px var(--rmk-space-2) 14px;
  }
  .rmk-bottomnav a {
    min-height: var(--rmk-tap-lg); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--rmk-space-1); color: var(--rmk-grey-on-black); text-decoration: none; font-size: var(--rmk-fs-2xs);
  }
  .rmk-bottomnav a[aria-current="page"] { color: var(--rmk-brand); font-weight: var(--rmk-fw-semibold); }
}
.rmk-app-page { padding: var(--rmk-space-6) 0 var(--rmk-space-16); }
.rmk-app-page__head { margin-bottom: var(--rmk-space-5); }
.rmk-app-page__head h1 { margin: 0 0 var(--rmk-space-1); font-size: var(--rmk-fs-2xl); letter-spacing: -0.5px; }
.rmk-app-page__lead { margin: 0; color: var(--rmk-text-muted); font-size: var(--rmk-fs-md); }
.rmk-app-page__actions { margin-top: var(--rmk-space-3); }

/* ---------- 12. Staff layout --------------------------------------------- */
.rmk-staffbar { background: var(--rmk-black); color: var(--rmk-white); }
.rmk-staffbar__inner { padding: var(--rmk-space-3) var(--rmk-gutter); display: flex; flex-wrap: wrap; align-items: center;
                       justify-content: space-between; gap: var(--rmk-space-3); }
@media (min-width: 640px) { .rmk-staffbar__inner { padding: var(--rmk-space-3) var(--rmk-gutter-wide); } }
.rmk-staffbar__brand { display: flex; align-items: center; gap: 10px; color: var(--rmk-white); text-decoration: none; font-weight: var(--rmk-fw-bold); }
.rmk-staffbar__brand:hover { color: var(--rmk-white); }
.rmk-staffbar__brand small { color: var(--rmk-grey-on-black); font-weight: var(--rmk-fw-medium); font-size: inherit; }
.rmk-staffbar__right { display: flex; align-items: center; gap: 14px; color: var(--rmk-grey-on-black); font-size: var(--rmk-fs-sm); flex-wrap: wrap; }
.rmk-staffbar__right a, .rmk-staffbar__right button { color: var(--rmk-brand); text-decoration: none; background: none; border: 0;
                                                      font: inherit; cursor: pointer; padding: 0; min-height: var(--rmk-tap-sm); }
.rmk-staffbar__right a:hover, .rmk-staffbar__right button:hover { color: var(--rmk-white); }
.rmk-staffbar__right a[aria-current="page"] { color: var(--rmk-white); box-shadow: inset 0 -2px 0 var(--rmk-brand); }
.rmk-staff { display: flex; flex-wrap: wrap; flex: 1 0 auto; align-items: stretch; }
.rmk-sidebar { flex: 0 1 var(--rmk-sidebar); min-width: 220px; background: var(--rmk-white); border-right: var(--rmk-border-w) solid var(--rmk-border);
               padding: 18px var(--rmk-space-3); }
.rmk-sidenav { display: flex; flex-direction: column; gap: var(--rmk-space-half); font-size: var(--rmk-fs-nav); }
.rmk-sidenav a { min-height: var(--rmk-tap-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--rmk-space-2);
                 padding: 0 14px; border-radius: var(--rmk-radius-btn); color: var(--rmk-black); text-decoration: none; }
.rmk-sidenav a:hover { background: var(--rmk-grey-100); color: var(--rmk-black); }
.rmk-sidenav a[aria-current="page"] { background: var(--rmk-black); color: var(--rmk-brand); font-weight: var(--rmk-fw-semibold); }
.rmk-sidenav a.rmk-sidenav__leave { color: var(--rmk-leave); }
.rmk-sidenav__group { margin: 14px 14px var(--rmk-space-1); font-size: var(--rmk-fs-2xs); font-weight: var(--rmk-fw-bold); letter-spacing: 1px;
                      text-transform: uppercase; color: var(--rmk-text-muted); }
.rmk-sidenav__count { background: var(--rmk-brand); color: var(--rmk-black); border-radius: var(--rmk-radius-pill); padding: 0 var(--rmk-space-2);
                      font-size: var(--rmk-fs-2xs); font-weight: var(--rmk-fw-bold); }
.rmk-staff-main { flex: 999 1 560px; min-width: 0; padding: var(--rmk-space-5) var(--rmk-gutter); }
@media (min-width: 640px) { .rmk-staff-main { padding: var(--rmk-space-7); } }
.rmk-staff-menu-toggle { display: none; }
@media (max-width: 900px) {
  .rmk-staff-menu-toggle {
    display: inline-flex; align-items: center; min-height: var(--rmk-tap-sm); padding: 0 var(--rmk-space-4);
    border: var(--rmk-border-w) solid var(--rmk-brand); border-radius: var(--rmk-radius-btn); background: none;
    color: var(--rmk-brand); font: inherit; font-size: var(--rmk-fs-sm); cursor: pointer;
  }
  .rmk-sidebar { display: none; flex: 1 1 100%; border-right: 0; border-bottom: var(--rmk-border-w) solid var(--rmk-border); }
  .rmk-sidebar.is-open { display: block; }
}

/* Dashboard pieces */
.rmk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--rmk-space-4); margin-bottom: var(--rmk-space-5); }
.rmk-kpis--sm { gap: 14px; }
.rmk-kpi { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); padding: 18px; }
.rmk-kpi--top { border-top: 4px solid var(--rmk-brand); }
.rmk-kpi--strong { border: 2px solid var(--rmk-black); }
.rmk-kpi--good { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-kpi__label { color: var(--rmk-text-muted); font-size: var(--rmk-fs-sm); }
.rmk-kpi--good .rmk-kpi__label { color: var(--rmk-black); }
.rmk-kpi__value { font-size: var(--rmk-fs-2xl); font-weight: var(--rmk-fw-heavy); font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
.rmk-kpi__value small { font-size: var(--rmk-fs-base); color: var(--rmk-text-muted); font-weight: var(--rmk-fw-semibold); }
.rmk-kpi__note { color: var(--rmk-text-muted); font-size: var(--rmk-fs-xs); }
.rmk-kpi__note--up { color: var(--rmk-success); font-weight: var(--rmk-fw-semibold); }
.rmk-kpi__note--down { color: var(--rmk-danger); font-weight: var(--rmk-fw-semibold); }
.rmk-kpi__note--warn { color: var(--rmk-warning); font-weight: var(--rmk-fw-semibold); }
.rmk-kpi__note--dark { color: var(--rmk-black); }
.rmk-kpi__head { display: flex; justify-content: space-between; align-items: center; gap: var(--rmk-space-2); }
.rmk-panels { display: flex; flex-wrap: wrap; gap: var(--rmk-space-5); margin-bottom: var(--rmk-space-5); }
.rmk-panels > .rmk-box { flex: 1 1 280px; }
.rmk-panels > .rmk-box--wide { flex: 2 1 480px; }
.rmk-box { min-width: 0; background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); overflow: hidden; }
.rmk-box--strong { border: 2px solid var(--rmk-black); }
.rmk-box__head { padding: var(--rmk-space-4) var(--rmk-space-5); display: flex; justify-content: space-between; align-items: center;
                 border-bottom: var(--rmk-border-w) solid var(--rmk-border); gap: var(--rmk-space-3); flex-wrap: wrap; }
.rmk-box__head h2, .rmk-box__title { margin: 0; font-size: var(--rmk-fs-md); font-weight: var(--rmk-fw-bold); letter-spacing: 0; }
.rmk-box__head a { font-size: var(--rmk-fs-sm); }
.rmk-box__head--dark { background: var(--rmk-black); color: var(--rmk-white); border-bottom: 0; }
.rmk-box__head--dark .rmk-accent { color: var(--rmk-brand); }
.rmk-box__head--grey { background: var(--rmk-grey-100); }
.rmk-box__body { padding: 18px var(--rmk-space-5); }
.rmk-box__foot { padding: var(--rmk-space-3) 18px; border-top: var(--rmk-border-w) solid var(--rmk-border); font-size: var(--rmk-fs-xs);
                 color: var(--rmk-text-muted); display: flex; flex-wrap: wrap; gap: 18px; }
.rmk-covenant + .rmk-covenant { margin-top: 18px; }
.rmk-bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; border-bottom: var(--rmk-border-w) solid var(--rmk-border); padding-bottom: var(--rmk-space-1); }
.rmk-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 100%; min-width: 0; }
.rmk-bars__val { font-size: var(--rmk-fs-2xs); color: var(--rmk-text-muted); white-space: nowrap; }
.rmk-bars__val--now { color: var(--rmk-black); font-weight: var(--rmk-fw-bold); }
.rmk-bars__bar { width: 100%; background: var(--rmk-black); border-radius: 6px 6px 0 0; min-height: 2px; }
.rmk-bars__bar--now { background: var(--rmk-brand); border: var(--rmk-border-w) solid var(--rmk-black); }
.rmk-bars__labels { display: flex; gap: 14px; font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); margin-top: 6px; }
.rmk-bars__labels span { flex: 1; text-align: center; min-width: 0; }
.rmk-kv { display: flex; flex-direction: column; gap: 10px; font-size: var(--rmk-fs-nav); }
.rmk-kv > div { display: flex; justify-content: space-between; gap: var(--rmk-space-3); }
.rmk-kv__foot { font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); border-top: var(--rmk-border-w) solid var(--rmk-border); padding-top: 10px; }

/* ---------- 13. Logistics and sourcing ----------------------------------- */
.rmk-trip__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rmk-space-3); margin-bottom: 14px; font-size: var(--rmk-fs-sm); }
.rmk-trip__stats div > div:first-child { color: var(--rmk-text-muted); }
.rmk-trip__stats div > div:last-child { font-weight: var(--rmk-fw-bold); }
.rmk-trip__times { font-size: var(--rmk-fs-xs); color: var(--rmk-grey-on-black); }
.rmk-box__head--grey .rmk-trip__times { color: var(--rmk-text-muted); }
.rmk-layout-2 { display: flex; flex-wrap: wrap; gap: var(--rmk-space-5); align-items: flex-start; }
.rmk-layout-2 > .rmk-col { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--rmk-space-4); }
.rmk-layout-2 > .rmk-col--map { flex: 1.3 1 520px; }
.rmk-map { min-height: 620px; height: 620px; background: var(--rmk-grey-200); position: relative; }
@media (max-width: 640px) { .rmk-map { min-height: 360px; height: 360px; } }
.rmk-map--sm { min-height: 380px; height: 380px; border-radius: var(--rmk-radius-md); border: var(--rmk-border-w) solid var(--rmk-border); }
.rmk-legend { display: flex; gap: 14px; font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); flex-wrap: wrap; }
.rmk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rmk-legend__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rmk-black); }
.rmk-legend__line { width: 12px; height: 4px; background: var(--rmk-leave); }
.rmk-legend__swatch { display: inline-block; width: 12px; height: 12px; background: var(--rmk-success-tint); border: var(--rmk-border-w) solid var(--rmk-success); }
.rmk-map-pin { width: 30px; height: 30px; border-radius: 50%; background: var(--rmk-black); color: var(--rmk-brand); display: flex; align-items: center;
               justify-content: center; font-weight: var(--rmk-fw-heavy); font-size: var(--rmk-fs-2xs); border: 2px solid var(--rmk-white); }
.rmk-map-pin--pickup { background: var(--rmk-brand); color: var(--rmk-black); border-color: var(--rmk-black); border-radius: var(--rmk-radius-md); }
.rmk-map-pin--producer { background: var(--rmk-success); color: var(--rmk-white); }
.rmk-rebate { background: var(--rmk-warning-tint); border: var(--rmk-border-w) solid var(--rmk-warning); border-radius: var(--rmk-radius-xl);
              padding: var(--rmk-space-4) var(--rmk-space-5); margin-bottom: var(--rmk-space-5); }
.rmk-rebate--ok { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.rmk-rebate__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rmk-space-2); margin-bottom: var(--rmk-space-2); font-size: var(--rmk-fs-nav); }
.rmk-rebate p { margin: var(--rmk-space-2) 0 0; font-size: var(--rmk-fs-sm); }
.rmk-check-inline { display: flex; align-items: center; gap: var(--rmk-space-2); font-size: var(--rmk-fs-sm); }
.rmk-check-inline input { width: 20px; height: 20px; accent-color: var(--rmk-black); }

/* ---------- 14. Footer ---------------------------------------------------- */
.rmk-footer { background: var(--rmk-black); color: var(--rmk-grey-on-black); }
.rmk-footer--line { border-top: var(--rmk-border-w) solid var(--rmk-black-line); }
.rmk-footer__inner { max-width: var(--rmk-container); margin: 0 auto; padding: var(--rmk-space-12) var(--rmk-gutter) var(--rmk-space-8); }
@media (min-width: 640px) { .rmk-footer__inner { padding: var(--rmk-space-16) var(--rmk-gutter-wide) var(--rmk-space-8); } }
.rmk-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--rmk-space-8); margin-bottom: var(--rmk-space-10); }
.rmk-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rmk-footer__brand span:last-child { font-weight: var(--rmk-fw-bold); font-size: var(--rmk-fs-md); color: var(--rmk-white); }
.rmk-footer__head { color: var(--rmk-white); font-weight: var(--rmk-fw-bold); margin-bottom: var(--rmk-space-3); }
.rmk-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: var(--rmk-fs-nav); }
.rmk-footer a { color: var(--rmk-brand); text-decoration: none; }
.rmk-footer a:hover, .rmk-footer a:focus-visible { color: var(--rmk-white); }
.rmk-footer p { margin: 0; font-size: var(--rmk-fs-nav); }
.rmk-footer__bottom { border-top: var(--rmk-border-w) solid var(--rmk-black-line); padding-top: var(--rmk-space-6); font-size: var(--rmk-fs-sm);
                      display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rmk-space-3); }
.rmk-footer__compact { max-width: var(--rmk-container); margin: 0 auto; padding: var(--rmk-space-8) var(--rmk-gutter); font-size: var(--rmk-fs-sm);
                       display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rmk-space-3); }
@media (min-width: 640px) { .rmk-footer__compact { padding: var(--rmk-space-8) var(--rmk-gutter-wide); } }

/* ---------- 15. Legacy layer --------------------------------------------- */
/* Older pages were written with Bootstrap class names. Bootstrap's stylesheet
   is no longer loaded; these rules give the same class names the RMK look,
   using the tokens only. New templates use the rmk-* components above.    */
.container, .container-lg, .container-fluid { width: 100%; margin: 0 auto; padding: 0 var(--rmk-gutter); }
.container, .container-lg { max-width: var(--rmk-container); }
@media (min-width: 640px) { .container, .container-lg, .container-fluid { padding: 0 var(--rmk-gutter-wide); } }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--rmk-space-3) * -1); row-gap: 0; }
.row > * { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0 var(--rmk-space-3); min-width: 0; }
.row.g-1, .row.g-2, .row.g-3, .row.g-4 { margin: 0 calc(var(--g) * -0.5); row-gap: var(--g); }
.row.g-1 { --g: var(--rmk-space-1); } .row.g-2 { --g: var(--rmk-space-2); } .row.g-3 { --g: var(--rmk-space-4); } .row.g-4 { --g: var(--rmk-space-6); }
.row.g-1 > *, .row.g-2 > *, .row.g-3 > *, .row.g-4 > * { padding: 0 calc(var(--g) * 0.5); }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; } .col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-6 { flex: 0 0 auto; width: 50%; } .col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; } .col-3 { flex: 0 0 auto; width: 25%; }
@media (min-width: 576px) { .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 auto; width: 16.6667%; } .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; } .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; } .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .flex-md-row { flex-direction: row !important; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.6667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.3333%; } .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
}
/* Spacing utilities */
.m-0 { margin: 0 !important; } .p-0 { padding: 0 !important; }
.mt-1 { margin-top: var(--rmk-space-1) !important; } .mt-2 { margin-top: var(--rmk-space-2) !important; }
.mt-3 { margin-top: var(--rmk-space-4) !important; } .mt-4 { margin-top: var(--rmk-space-6) !important; }
.mt-5 { margin-top: var(--rmk-space-12) !important; } .mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--rmk-space-1) !important; }
.mb-2 { margin-bottom: var(--rmk-space-2) !important; } .mb-3 { margin-bottom: var(--rmk-space-4) !important; }
.mb-4 { margin-bottom: var(--rmk-space-6) !important; } .mb-5 { margin-bottom: var(--rmk-space-12) !important; }
.my-2 { margin-top: var(--rmk-space-2) !important; margin-bottom: var(--rmk-space-2) !important; }
.my-4 { margin-top: var(--rmk-space-6) !important; margin-bottom: var(--rmk-space-6) !important; }
.ms-1 { margin-left: var(--rmk-space-1) !important; } .ms-2 { margin-left: var(--rmk-space-2) !important; }
.ms-5 { margin-left: var(--rmk-space-12) !important; } .ml-2 { margin-left: var(--rmk-space-2) !important; }
.me-1 { margin-right: var(--rmk-space-1) !important; } .me-5 { margin-right: var(--rmk-space-12) !important; }
.mr-2 { margin-right: var(--rmk-space-2) !important; } .me-auto { margin-right: auto !important; }
.p-2 { padding: var(--rmk-space-2) !important; } .p-3 { padding: var(--rmk-space-4) !important; }
.px-2 { padding-left: var(--rmk-space-2) !important; padding-right: var(--rmk-space-2) !important; }
.px-3 { padding-left: var(--rmk-space-4) !important; padding-right: var(--rmk-space-4) !important; }
.py-1 { padding-top: var(--rmk-space-1) !important; padding-bottom: var(--rmk-space-1) !important; }
.py-2 { padding-top: var(--rmk-space-2) !important; padding-bottom: var(--rmk-space-2) !important; }
.py-3 { padding-top: var(--rmk-space-4) !important; padding-bottom: var(--rmk-space-4) !important; }
.py-4 { padding-top: var(--rmk-space-6) !important; padding-bottom: var(--rmk-space-6) !important; }
.pt-1 { padding-top: var(--rmk-space-1) !important; } .pt-3 { padding-top: var(--rmk-space-4) !important; }
.pb-2 { padding-bottom: var(--rmk-space-2) !important; }
/* Flex and display */
.d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; } .d-inline { display: inline !important; } .d-grid { display: grid !important; gap: var(--rmk-space-2); }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; } .flex-column { flex-direction: column !important; }
@media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; } .align-items-sm-end { align-items: flex-end !important; } }
.justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; } .align-self-center { align-self: center !important; }
.align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; }
.gap-1 { gap: var(--rmk-space-1) !important; } .gap-2 { gap: var(--rmk-space-2) !important; } .gap-3 { gap: var(--rmk-space-4) !important; }
.w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-100 { height: 100% !important; }
.order-lg-last { order: 0; }
/* Text */
.text-center { text-align: center !important; } .text-start, .text-left { text-align: left !important; }
.text-end, .text-right { text-align: right !important; }
.text-secondary, .text-muted { color: var(--rmk-text-muted) !important; }
.text-danger { color: var(--rmk-danger) !important; } .text-success { color: var(--rmk-success) !important; }
.text-warning-emphasis { color: var(--rmk-warning) !important; }
.text-dark { color: var(--rmk-black) !important; } .text-white { color: var(--rmk-white) !important; }
.text-decoration-none { text-decoration: none !important; } .text-uppercase { text-transform: uppercase; }
.text-break { overflow-wrap: anywhere; } .font-monospace { font-family: var(--rmk-font-mono); }
.fw-bold, .font-weight-bold { font-weight: var(--rmk-fw-bold) !important; } .fw-semibold { font-weight: var(--rmk-fw-semibold) !important; }
.fw-normal { font-weight: var(--rmk-fw-regular) !important; }
.small, small { font-size: var(--rmk-fs-sm); }
.lead { font-size: var(--rmk-fs-md); color: var(--rmk-text-muted); margin: var(--rmk-space-1) 0 0; }
.h3 { font-size: var(--rmk-fs-xl); font-weight: var(--rmk-fw-heavy); }
.h4 { font-size: 1.25rem; font-weight: var(--rmk-fw-bold); }
.h5, .fs-5 { font-size: var(--rmk-fs-md); font-weight: var(--rmk-fw-bold); }
.h6, .fs-6 { font-size: var(--rmk-fs-base); font-weight: var(--rmk-fw-bold); }
.fs-4 { font-size: 1.375rem; }
.money, td.num, th.num, .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num, th.num, .table .num { text-align: right; }
/* Backgrounds and borders */
.bg-white { background: var(--rmk-white) !important; } .bg-light { background: var(--rmk-grey-100) !important; }
.bg-dark { background: var(--rmk-black) !important; color: var(--rmk-white); }
.bg-primary { background: var(--rmk-black) !important; color: var(--rmk-brand) !important; }
.bg-secondary { background: var(--rmk-grey-600) !important; color: var(--rmk-white) !important; }
.bg-success { background: var(--rmk-success) !important; color: var(--rmk-white) !important; }
.bg-danger { background: var(--rmk-danger) !important; color: var(--rmk-white) !important; }
.bg-warning { background: var(--rmk-warning-tint) !important; color: var(--rmk-black) !important; }
.bg-info, .text-bg-info { background: var(--rmk-brand-tint) !important; color: var(--rmk-black) !important; }
.text-bg-secondary { background: var(--rmk-grey-600) !important; color: var(--rmk-white) !important; }
.text-bg-warning { background: var(--rmk-warning-tint) !important; color: var(--rmk-black) !important; }
.border { border: var(--rmk-border-w) solid var(--rmk-border) !important; }
.border-top { border-top: var(--rmk-border-w) solid var(--rmk-border) !important; }
.border-bottom { border-bottom: var(--rmk-border-w) solid var(--rmk-border) !important; }
.border-start { border-left: var(--rmk-border-w) solid var(--rmk-border) !important; }
.border-4 { border-width: 4px !important; }
.border-danger { border-color: var(--rmk-danger) !important; } .border-success { border-color: var(--rmk-success) !important; }
.border-warning { border-color: var(--rmk-warning) !important; }
.rounded { border-radius: var(--rmk-radius-md) !important; } .rounded-pill { border-radius: var(--rmk-radius-pill) !important; }
.shadow-sm { box-shadow: var(--rmk-shadow-sm) !important; }
.img-fluid { max-width: 100%; height: auto; }
.list-unstyled { list-style: none; padding-left: 0; }
.list-inline { list-style: none; padding-left: 0; } .list-inline-item { display: inline-block; margin-right: var(--rmk-space-3); }
.sticky-top { position: sticky; top: 0; z-index: 20; }
/* Page header used by older templates */
.page-header { padding: var(--rmk-space-6) 0 var(--rmk-space-3); display: flex; flex-wrap: wrap; gap: var(--rmk-space-3);
               justify-content: space-between; align-items: flex-end; }
.page-header h1 { margin: 0; font-size: var(--rmk-fs-2xl); letter-spacing: -0.5px; }
.page-header .lead { margin-top: var(--rmk-space-1); }
@media (max-width: 575.98px) { .primary-action { width: 100%; } .primary-action .btn, .primary-action .rmk-btn { width: 100%; } }
/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--rmk-tap-sm);
  padding: 0 var(--rmk-space-4); font: inherit; font-size: var(--rmk-fs-base); line-height: 1.2; text-align: center;
  text-decoration: none; border: var(--rmk-border-w) solid var(--rmk-black); border-radius: var(--rmk-radius-btn);
  background: var(--rmk-white); color: var(--rmk-black); cursor: pointer;
}
.btn:hover { background: var(--rmk-grey-100); color: var(--rmk-black); }
.btn-sm { min-height: 36px; padding: 0 var(--rmk-space-3); font-size: var(--rmk-fs-sm); border-radius: var(--rmk-radius-md); }
.btn-primary, .btn-buy, .btn-success, .btn-info, .cta-button, .blue-button {
  background: var(--rmk-brand); border-color: var(--rmk-brand); color: var(--rmk-black);
}
.btn-primary:hover, .btn-buy:hover, .btn-success:hover, .btn-info:hover, .cta-button:hover, .blue-button:hover {
  background: var(--rmk-brand-hover); border-color: var(--rmk-brand-hover); color: var(--rmk-black);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-secondary { background: var(--rmk-white); border-color: var(--rmk-black); color: var(--rmk-black); }
.btn-outline-danger { background: var(--rmk-white); border-color: var(--rmk-danger); color: var(--rmk-danger); }
.btn-outline-danger:hover { background: var(--rmk-danger-tint); color: var(--rmk-danger); }
.btn-danger { background: var(--rmk-danger); border-color: var(--rmk-danger); color: var(--rmk-white); }
.btn-danger:hover { background: var(--rmk-danger); color: var(--rmk-white); filter: brightness(.9); }
.btn-warning { background: var(--rmk-warning-tint); border-color: var(--rmk-warning); color: var(--rmk-black); }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { background: none; color: var(--rmk-leave); }
.btn:disabled, .btn.disabled { background: var(--rmk-grey-300); border-color: var(--rmk-grey-300); color: var(--rmk-grey-600); cursor: not-allowed; }
.btn-close { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: var(--rmk-fs-md); }
.btn-close::before { content: "\00D7"; }
.cta-button, .readmore { display: inline-flex; align-items: center; min-height: var(--rmk-tap-sm); padding: 0 var(--rmk-space-4);
                         border-radius: var(--rmk-radius-btn); text-decoration: none; }
.readmore { background: var(--rmk-brand); color: var(--rmk-black); }
.card-link { font-weight: var(--rmk-fw-semibold); }
/* Cards */
.card { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl); display: flex; flex-direction: column; min-width: 0; }
.card-body { padding: 18px var(--rmk-space-5); flex: 1 1 auto; }
.card-body > :last-child { margin-bottom: 0; }
.card-header { padding: var(--rmk-space-3) var(--rmk-space-5); background: var(--rmk-black); color: var(--rmk-brand); font-weight: var(--rmk-fw-bold);
               border-radius: var(--rmk-radius-xl) var(--rmk-radius-xl) 0 0; }
.card-title { font-weight: var(--rmk-fw-bold); }
.card-img-top { width: 100%; border-radius: var(--rmk-radius-xl) var(--rmk-radius-xl) 0 0; }
.next-step { border: 2px solid var(--rmk-black); }
/* Tables */
.table-responsive { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--rmk-fs-nav); background: var(--rmk-white); margin-bottom: var(--rmk-space-4); }
.table th { background: var(--rmk-black); color: var(--rmk-brand); text-align: left; font-weight: var(--rmk-fw-bold); padding: 10px var(--rmk-space-3); }
.table td { padding: 10px var(--rmk-space-3); border-top: var(--rmk-border-w) solid var(--rmk-border); vertical-align: top; }
.table tbody th { background: var(--rmk-grey-100); color: var(--rmk-black); }
.table-sm th, .table-sm td { padding: 6px 10px; }
.table-striped tbody tr:nth-child(even), .table tbody tr:nth-child(even) { background: var(--rmk-grey-100); }
.table-bordered td, .table-bordered th { border: var(--rmk-border-w) solid var(--rmk-border); }
.table-hover tbody tr:hover { background: var(--rmk-brand-tint); }
.align-middle td, .align-middle th, td.align-middle { vertical-align: middle; }
.table-warning, .table-warning td { background: var(--rmk-warning-tint) !important; }
.table-success, .table-success td { background: var(--rmk-success-tint) !important; }
.table-light th, .table-light td, thead.table-light th { background: var(--rmk-grey-100); color: var(--rmk-black); }
.table-active, .table-active td { background: var(--rmk-brand-tint) !important; }
/* Forms */
.form-label, label.label { display: block; font-weight: var(--rmk-fw-semibold); margin-bottom: 6px; }
.form-control, .form-select {
  display: block; width: 100%; min-height: 50px; padding: var(--rmk-space-3) 14px; font: inherit; font-size: var(--rmk-fs-base);
  color: var(--rmk-text); background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-grey-600); border-radius: var(--rmk-radius-btn);
}
textarea.form-control { min-height: 120px; resize: vertical; }
.form-control:focus-visible, .form-select:focus-visible { border-color: var(--rmk-black); box-shadow: var(--rmk-focus-ring); }
.form-control-sm, .form-select-sm { min-height: 40px; padding: 6px 10px; font-size: var(--rmk-fs-base); }
.form-text { display: block; font-size: var(--rmk-fs-sm); color: var(--rmk-text-muted); margin-top: var(--rmk-space-1); }
.invalid-feedback, .errorlist, .errornote { display: block; color: var(--rmk-danger); font-size: var(--rmk-fs-sm); font-weight: var(--rmk-fw-semibold); }
.errorlist { list-style: none; padding: 0; margin: var(--rmk-space-1) 0 0; }
.form-check { display: flex; align-items: center; gap: var(--rmk-space-2); min-height: var(--rmk-tap-sm); }
.form-check-input { width: 20px; height: 20px; accent-color: var(--rmk-black); flex-shrink: 0; }
.form-check-label { font-weight: var(--rmk-fw-regular); }
.form-group, .form-row { margin-bottom: var(--rmk-space-4); }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--rmk-radius-btn); border-bottom-left-radius: var(--rmk-radius-btn); }
.input-group > :last-child { border-top-right-radius: var(--rmk-radius-btn); border-bottom-right-radius: var(--rmk-radius-btn); }
.input-group > .btn { border-radius: 0; }
.input-group-text { display: flex; align-items: center; padding: 0 var(--rmk-space-3); background: var(--rmk-grey-100);
                    border: var(--rmk-border-w) solid var(--rmk-grey-600); }
.qty-input, .quantity-input { width: 5.5rem; }
/* Alerts and badges */
.alert { padding: 14px 18px; border-radius: var(--rmk-radius-lg); border: var(--rmk-border-w) solid var(--rmk-border);
         background: var(--rmk-white); color: var(--rmk-black); margin-bottom: var(--rmk-space-4); }
.alert > :last-child { margin-bottom: 0; }
.alert-success { border-color: var(--rmk-success); background: var(--rmk-success-tint); }
.alert-warning { border-color: var(--rmk-warning); background: var(--rmk-warning-tint); }
.alert-danger { border-color: var(--rmk-danger); background: var(--rmk-danger-tint); }
.alert-info { border-color: var(--rmk-brand-hover); background: var(--rmk-brand-tint); }
.alert-secondary { border-color: var(--rmk-border); background: var(--rmk-grey-100); }
.alert-link { font-weight: var(--rmk-fw-bold); color: var(--rmk-black); }
.alert-dismissible { position: relative; padding-right: var(--rmk-space-12); }
.alert-dismissible .btn-close { position: absolute; right: var(--rmk-space-2); top: var(--rmk-space-2); }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; font-size: var(--rmk-fs-xs); font-weight: var(--rmk-fw-semibold);
         border-radius: var(--rmk-radius-pill); background: var(--rmk-grey-100); color: var(--rmk-black); border: var(--rmk-border-w) solid var(--rmk-border); line-height: 1.4; }
.badge.bg-success { background: var(--rmk-success-tint) !important; color: var(--rmk-black) !important; border-color: var(--rmk-success); }
.badge.bg-danger { background: var(--rmk-danger-tint) !important; color: var(--rmk-black) !important; border-color: var(--rmk-danger); }
.badge.bg-warning { border-color: var(--rmk-warning); }
.badge.bg-secondary, .badge-secondary { background: var(--rmk-grey-100) !important; color: var(--rmk-black) !important; border-color: var(--rmk-border); }
.badge.bg-primary, .badge.bg-dark { background: var(--rmk-black) !important; color: var(--rmk-brand) !important; border-color: var(--rmk-black); }
.badge.bg-info { border-color: var(--rmk-brand-hover); }
.badge-special { background: var(--rmk-brand); color: var(--rmk-black); border-color: var(--rmk-black); }
.badge-local { background: var(--rmk-success-tint); color: var(--rmk-black); border-color: var(--rmk-success); }
.badge-status { background: var(--rmk-grey-100); color: var(--rmk-black); }
.badge-status-paid, .badge-status-collected, .badge-status-approved, .badge-status-matched { background: var(--rmk-success-tint); border-color: var(--rmk-success); }
.badge-status-cancelled, .badge-status-declined, .badge-status-overdue, .badge-status-rejected { background: var(--rmk-danger-tint); border-color: var(--rmk-danger); }
.badge-status-ready_for_collection, .badge-status-in_transit, .badge-status-submitted, .badge-status-awaiting_shop { background: var(--rmk-warning-tint); border-color: var(--rmk-warning); }
/* List groups */
.list-group { display: flex; flex-direction: column; padding: 0; margin: 0 0 var(--rmk-space-4); border: var(--rmk-border-w) solid var(--rmk-border);
              border-radius: var(--rmk-radius-xl); overflow: hidden; background: var(--rmk-white); }
.list-group-numbered { counter-reset: lg; }
.list-group-numbered > .list-group-item::before { counter-increment: lg; content: counter(lg) ". "; font-weight: var(--rmk-fw-bold); }
.list-group-item { display: block; padding: var(--rmk-space-3) var(--rmk-space-4); border-top: var(--rmk-border-w) solid var(--rmk-border);
                   color: var(--rmk-black); background: var(--rmk-white); max-width: none; }
.list-group-item:first-child { border-top: 0; }
.list-group-item-action { text-decoration: none; min-height: var(--rmk-tap-sm); }
.list-group-item-action:hover { background: var(--rmk-grey-100); color: var(--rmk-black); }
/* Nav pills, pagination, progress, accordion */
.nav { display: flex; flex-wrap: wrap; gap: var(--rmk-space-2); padding: 0; margin: 0 0 var(--rmk-space-4); list-style: none; }
.nav-pills .nav-link, .nav .nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--rmk-space-4);
  border-radius: var(--rmk-radius-pill); background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); text-decoration: none; color: var(--rmk-black); }
.nav-pills .nav-link.active, .nav .nav-link.active, .nav .nav-link[aria-current="page"] { background: var(--rmk-black); color: var(--rmk-brand); border-color: var(--rmk-black); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--rmk-space-1); list-style: none; padding: 0; margin: var(--rmk-space-4) 0; }
.page-link { display: inline-flex; align-items: center; min-height: var(--rmk-tap-sm); padding: 0 var(--rmk-space-4); border: var(--rmk-border-w) solid var(--rmk-border);
             border-radius: var(--rmk-radius-md); text-decoration: none; background: var(--rmk-white); color: var(--rmk-black); }
.page-item.active .page-link { background: var(--rmk-black); color: var(--rmk-brand); border-color: var(--rmk-black); }
.page-item.disabled .page-link { color: var(--rmk-text-muted); }
.progress { height: 12px; background: var(--rmk-grey-300); border-radius: var(--rmk-radius-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--rmk-brand); }
.accordion details, details.accordion-item { background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border);
  border-radius: var(--rmk-radius-xl); padding: 0 var(--rmk-space-4); margin-bottom: var(--rmk-space-2); }
.accordion summary { min-height: var(--rmk-tap); display: flex; align-items: center; font-weight: var(--rmk-fw-bold); cursor: pointer; }
.collapse:not(.show) { display: none; }
.fade:not(.show) { opacity: 0; }
/* Old empty state and help panels */
.empty-state { text-align: center; color: var(--rmk-text-muted); padding: var(--rmk-space-8) var(--rmk-space-4); }
.no-orders, .no-applications { color: var(--rmk-text-muted); }
.rmk-map-legacy { height: 380px; }
/* Font Awesome icons are no longer loaded; old icon tags take no space. */
.fas, .fab, .fa { display: none; }
.input-group-text:has(> .fas:only-child), .input-group-text:has(> .fa:only-child) { display: none; }
/* Pages that print */
.page-break { page-break-after: always; }

/* ---------- 16. Percentage helpers ---------------------------------------- */
/* Bars and meters take their size from a class (rounded to 5%), never from
   an inline style. rmk_pct (portal/templatetags/rmk.py) gives the number.  */
.rmk-w-0 { width: 0; } .rmk-w-5 { width: 5%; } .rmk-w-10 { width: 10%; } .rmk-w-15 { width: 15%; }
.rmk-w-20 { width: 20%; } .rmk-w-25 { width: 25%; } .rmk-w-30 { width: 30%; } .rmk-w-35 { width: 35%; }
.rmk-w-40 { width: 40%; } .rmk-w-45 { width: 45%; } .rmk-w-50 { width: 50%; } .rmk-w-55 { width: 55%; }
.rmk-w-60 { width: 60%; } .rmk-w-65 { width: 65%; } .rmk-w-70 { width: 70%; } .rmk-w-75 { width: 75%; }
.rmk-w-80 { width: 80%; } .rmk-w-85 { width: 85%; } .rmk-w-90 { width: 90%; } .rmk-w-95 { width: 95%; }
.rmk-w-100 { width: 100%; }
.rmk-h-0 { height: 0; } .rmk-h-5 { height: 5%; } .rmk-h-10 { height: 10%; } .rmk-h-15 { height: 15%; }
.rmk-h-20 { height: 20%; } .rmk-h-25 { height: 25%; } .rmk-h-30 { height: 30%; } .rmk-h-35 { height: 35%; }
.rmk-h-40 { height: 40%; } .rmk-h-45 { height: 45%; } .rmk-h-50 { height: 50%; } .rmk-h-55 { height: 55%; }
.rmk-h-60 { height: 60%; } .rmk-h-65 { height: 65%; } .rmk-h-70 { height: 70%; } .rmk-h-75 { height: 75%; }
.rmk-h-80 { height: 80%; } .rmk-h-85 { height: 85%; } .rmk-h-90 { height: 90%; } .rmk-h-95 { height: 95%; }
.rmk-h-100 { height: 100%; }

/* ---------- 17. Buy again, Help button, stars (October 2026) ------------- */
.rmk-again { display: flex; flex-direction: column; gap: var(--rmk-space-2); margin-bottom: var(--rmk-space-6); }
.rmk-again__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rmk-space-3);
                  background: var(--rmk-white); border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-xl);
                  padding: var(--rmk-space-3) var(--rmk-space-4); }
.rmk-again__row.is-unavailable { background: var(--rmk-grey-100); color: var(--rmk-text-muted); }
.rmk-again__name { font-weight: var(--rmk-fw-bold); }
.rmk-again__sub { display: block; font-size: var(--rmk-fs-xs); color: var(--rmk-text-muted); }
.rmk-again-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rmk-space-3); }
.rmk-helpfab { position: fixed; right: var(--rmk-space-4); bottom: var(--rmk-space-4); z-index: 41; width: 52px; height: 52px;
               border-radius: 50%; background: var(--rmk-black); color: var(--rmk-brand); display: flex; align-items: center;
               justify-content: center; text-decoration: none; font-size: 1.5rem; font-weight: var(--rmk-fw-bold);
               box-shadow: var(--rmk-shadow-md); }
.rmk-helpfab:hover { color: var(--rmk-white); }
@media (max-width: 760px) { .rmk-has-bottomnav .rmk-helpfab { bottom: 92px; } }
@media print { .rmk-helpfab { display: none; } }
.rmk-guide { font-size: 1.1875rem; line-height: 1.6; }
.rmk-guide img { max-width: 100%; height: auto; border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-card); }
.rmk-guide ol > li { margin-bottom: var(--rmk-space-3); }
.rmk-guide-search { display: flex; gap: var(--rmk-space-2); margin-bottom: var(--rmk-space-5); }
.rmk-stars { display: inline-flex; gap: 2px; color: var(--rmk-black); }
.rmk-stars__off { color: var(--rmk-grey-300); }
.rmk-starpick { display: flex; flex-wrap: wrap; gap: var(--rmk-space-2); border: 0; padding: 0; margin: 0 0 var(--rmk-space-3); }
.rmk-starpick label { min-width: var(--rmk-tap); min-height: var(--rmk-tap); display: flex; align-items: center; justify-content: center;
                      border: var(--rmk-border-w) solid var(--rmk-border); border-radius: var(--rmk-radius-btn); cursor: pointer;
                      font-weight: var(--rmk-fw-bold); }
.rmk-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rmk-starpick input:checked + span { color: var(--rmk-black); }
.rmk-starpick label:has(input:checked) { background: var(--rmk-brand); border-color: var(--rmk-black); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .rmk-header, .rmk-footer, .rmk-staffbar, .rmk-sidebar, .rmk-bottomnav, .rmk-rolenav, .rmk-btn, .btn,
  .rmk-menu-toggle, .no-print, .d-print-none, .primary-action { display: none !important; }
  body { background: var(--rmk-white); }
  .rmk-table th, .table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}