/* RETAIL-03 / LAYOUTFIX (rmk_ui 1.4.0): Retail's own fixes for pages with RMK_CONNECT_UI on. Loaded LAST
   (layouts/_head.html: rmk_ui first, then Retail's sheets, then this file), only with the switch on. Every rule is
   under .rmk-body, the body class only those pages carry, so nothing here reaches a Retail page with the switch off.
   The hub's rmk_ui files are synced from the hub and never edited here.

   1. Retail's own header is the sticky site header; on phones (< 900 px) its main menu and the signed-in role menus
      fold into the shared drawer (data-rmk-drawer, opened by rmk_ui's rmk.js).
   2. rmk_ui and Retail share some class names (.rmk-header, .rmk-count, .rmk-band, .rmk-main, ...). Retail's sheets
      load after rmk_ui, so Retail wins on every property it sets; the rules below reset the few properties rmk_ui
      sets and Retail does not, so Retail pages look exactly as with the switch off. */

/* ---------- 1. Retail's header with the shared drawer --------------------------------------------------- */
.rmk-body .rmk-siteheader {
  --rmk-drawer-bg: var(--rmk-black);           /* black */
  --rmk-drawer-ink: var(--rmk-white);          /* 19.8:1 on the drawer */
  --rmk-drawer-current: var(--rmk-brand);      /* cyan, 13.4:1 on the drawer */
  color: inherit;                               /* rmk_ui's .rmk-header is white text; Retail's is not */
}
.rmk-body .rmk-header .rmk-drawer-toggle { color: var(--rmk-brand); border-width: var(--rmk-border-w);
  border-radius: var(--rmk-radius-btn); font-size: var(--rmk-fs-nav); font-weight: var(--rmk-fw-regular); }
.rmk-body .rmk-header .rmk-drawer-toggle:hover { color: var(--rmk-white); }
/* Products stays cyan in the drawer, like on the desktop bar. */
.rmk-body .rmk-header [data-rmk-drawer].is-open a.is-products { color: var(--rmk-brand) !important; font-weight: 700; }
/* The role menus' drawer groups are for phones only; the desktop has the role strip under the header. */
.rmk-body .rmk-drawer__group { display: none; }
@media (max-width: 899px) {
  .rmk-body [data-rmk-drawer].is-open .rmk-drawer__group { display: block; border-top: 1px solid var(--rmk-black-raised);
    margin-top: 8px; }
  .rmk-body [data-rmk-drawer].is-open .rmk-drawer__label { color: var(--rmk-grey-on-black); opacity: 1; }
  .rmk-body .rmk-rolenav { display: none !important; }
}

/* ---------- 2. rmk_ui properties Retail does not set ------------------------------------------------------
   Found with a computed-style comparison of the same pages with the switch off and on (360 and 1366 px). Each rule
   gives back Retail's own value. :where() keeps them at rmk_ui's specificity (they win only because this file loads
   last), so Retail's own modifiers still win. The RMK Connect home windows (.rmk-connect-main) use the rmk_ui
   patterns on purpose and are left alone. */
/* rmk_ui's .rmk-count is a badge pinned to the corner of an icon button; Retail's sits inside its buttons
   (it pushed the header 4 px past the screen edge at 360 px). The connect bar's own badge keeps rmk_ui's look. */
.rmk-body .rmk-count:not(.rmk-ui .rmk-count) { position: static; top: auto; right: auto; height: auto;
  line-height: inherit; border: 0; text-align: start; }
.rmk-body .rmk-header__inner { min-height: 0; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-hero { padding-top: 0; padding-bottom: 0; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band { display: block; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band h2 { margin-bottom: var(--rmk-space-3); }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band h2.rmk-section-title { margin-bottom: var(--rmk-space-10); }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band h2.rmk-section-title--tight { margin-bottom: var(--rmk-space-3); }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band h2.rmk-section-title--mid,
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band h2.rmk-section-title--md { margin-bottom: var(--rmk-space-6); }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band :is(.rmk-cta, .rmk-error-summary) h2 { margin-bottom: var(--rmk-space-2); }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band .rmk-form-card--grey h2 { margin-bottom: 6px; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-band :is(.rmk-shelf-head, .rmk-box__head) h2 { margin-bottom: 0; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-stack { display: block; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-field { display: block; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-check { padding-top: 0; padding-bottom: 0; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-check input { margin: 2px 3px 3px 4px; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-tile { display: block; border: 0; min-height: auto; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) .rmk-tile__title { font-size: inherit; line-height: inherit; }
:where(.rmk-body .rmk-page-main:not(.rmk-connect-main)) a.rmk-chip { padding-top: 0; padding-bottom: 0; gap: normal;
  font-size: var(--rmk-fs-sm); line-height: inherit; font-weight: var(--rmk-fw-regular); min-height: 40px; }
/* Retail's own footer (rmk_ui's footer rules are for its .rmk-ui footer). */
:where(.rmk-body) .rmk-footer:not(.rmk-ui), :where(.rmk-body) .rmk-footer:not(.rmk-ui) .rmk-footer__inner { font-size: var(--rmk-fs-base); line-height: var(--rmk-lh-body); }
:where(.rmk-body) .rmk-footer:not(.rmk-ui) .rmk-footer__links { margin-top: 0; flex-wrap: nowrap; }
:where(.rmk-body) .rmk-footer:not(.rmk-ui) .rmk-footer__links a { display: block; min-height: auto; align-items: normal; }

/* ---------- 3. The RMK Connect home windows (rmk_connect/*.html; were inline styles) --------------------- */
/* The greeting band lost the page's side margin (.rmk-greet resets the container's padding). */
.rmk-body .rmk-greet { padding-left: var(--rmk-gutter); padding-right: var(--rmk-gutter); }
.rmk-body .rmk-home__body { padding-top: 16px; }
.rmk-start { max-width: 640px; }
.rmk-start__offer { padding: 16px; }
.rmk-journey__fill.rmk-fill-0 { width: 0; }
.rmk-journey__fill.rmk-fill-1 { width: 10%; }
.rmk-journey__fill.rmk-fill-2 { width: 20%; }
.rmk-journey__fill.rmk-fill-3 { width: 30%; }
.rmk-journey__fill.rmk-fill-4 { width: 40%; }
.rmk-journey__fill.rmk-fill-5 { width: 50%; }
.rmk-journey__fill.rmk-fill-6 { width: 60%; }
.rmk-journey__fill.rmk-fill-7 { width: 70%; }
.rmk-journey__fill.rmk-fill-8 { width: 80%; }
.rmk-journey__fill.rmk-fill-9 { width: 90%; }
.rmk-journey__fill.rmk-fill-10 { width: 100%; }

/* ---------- 4. Floating buttons: no rmk_ui tab bar on Retail pages ----------------------------------------
   rmk_ui places HoneyGuide above its tab bar (--rmk-tabbar-h). Retail has no tab bar; on phones it has its own
   bottom navigation (76 px) for signed-in people. Retail's round "?" help button sits above HoneyGuide. */
.rmk-body { --rmk-tabbar-h: 0px; }
@media (max-width: 760px) { .rmk-body.rmk-has-bottomnav { --rmk-tabbar-h: 76px; } }
.rmk-body:has(.rmk-hg-fab) .rmk-helpfab { bottom: calc(var(--rmk-tabbar-h) + 84px); }