/*
 * Mashin Irani — Header v2 (search-first, three rows).
 *
 * TOKEN RULE: this sheet is enqueued globally, so it may reference ONLY --mi-* tokens from
 * tokens.css. The short aliases (--space-4, --navy-900, --radius-md, --border ...) are declared
 * inside mi.css / pages/home.css / pages/product.css — exactly ONE of which loads per request —
 * so a bare var(--space-4) silently drops the whole declaration on the homepage and every
 * product page. Not one alias appears below.
 *
 * SCOPE RULE: everything is scoped to .mi-hdr2-on (body flag) or the new .mi-hdr__* classes, so
 * the v1 header is untouched when the gate is off.
 *
 * The row-1 container is .mi-hdr__bar, NOT .hdr — deliberately. That single rename makes every
 * legacy header rule inert (the 21 rules in mirani-header-spacing.css and the triplicated
 * .hdr blocks in mi.css / home.css / product.css) with zero edits to any of those files.
 */

/* ---------------------------------------------------------------------------
 * 0. Header shell
 * ------------------------------------------------------------------------ */

/*
 * hello-elementor's header-footer.css sets .site-header{display:flex;flex-wrap:wrap}.
 * Three stacked rows cannot live in a flex row, so force block. (0,1,1) beats hello's (0,1,0)
 * without !important, and does not fight chrome-fix.css's max-width:none!important.
 *
 * backdrop-filter + the rgba fill are deliberately dropped: a filtered element creates BOTH a
 * containing block and a stacking context (a documented hazard for #miDesktopMega and the
 * finder dropdown), it is the most expensive per-frame paint in a sticky bar on mid-range
 * Android, and all five reference headers are opaque white. position:sticky alone still supplies
 * the containing block the two dropdowns need.
 */
body.mi-hdr2-on .site-header {
  display: block;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mi-z-sticky-header);
  background: var(--mi-color-bg-elevated);
  border-block-end: 1px solid transparent;
  /* Never set overflow here — it would clip the finder dropdown and the mega panel. */
  transition:
    box-shadow var(--mi-motion-duration-200) var(--mi-ease-standard),
    border-color var(--mi-motion-duration-200) var(--mi-ease-standard);
}

/* .scrolled is toggled at scrollY>8 by chrome.js / home.js / product.js — id and class retained. */
body.mi-hdr2-on .site-header.scrolled {
  box-shadow: var(--mi-shadow-e2);
  border-block-end-color: var(--mi-color-border);
}

/*
 * Published header height. Always the UNCOLLAPSED value: sticky children must clear the header
 * at its tallest, or content slips under it on the way back up.
 * Measured, not assumed: 72px bar + 48px nav + 1px nav top border + 1px header bottom border.
 */
body.mi-hdr2-on {
  --mi-header-h: 122px;
  --mi-sticky-offset: calc(var(--mi-header-h) + var(--mi-space-6));
}

/* Shared inner container (explicit, so it does not depend on alias-token .container). */
body.mi-hdr2-on .mi-hdr__top-in,
body.mi-hdr2-on .mi-hdr__bar,
body.mi-hdr2-on .mi-hdr__nav-in {
  max-inline-size: var(--mi-container-wide);
  margin-inline: auto;
  padding-inline: var(--mi-container-padding-inline);
}

/* Defensive: every header glyph is an outline. Belt-and-braces against fill-blob regressions. */
body.mi-hdr2-on .site-header svg,
body.mi-hdr2-on .topbar svg {
  fill: none;
}

body.mi-hdr2-on .mi-hdr__ic {
  inline-size: var(--mi-icon-size-lg);
  block-size: var(--mi-icon-size-lg);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 1. ROW 0 — trust / contact strip (sibling of the header; never sticky)
 * ------------------------------------------------------------------------ */

body.mi-hdr2-on .mi-hdr__top {
  background: var(--mi-color-navy-900);
  color: var(--mi-color-text-on-dark);
  font-size: var(--mi-font-size-caption);
  font-weight: var(--mi-type-weight-500);
}

body.mi-hdr2-on .mi-hdr__top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-space-4);
  min-block-size: 38px;
}

body.mi-hdr2-on .mi-hdr__top .tb-note,
body.mi-hdr2-on .mi-hdr__top .tb-ship,
body.mi-hdr2-on .mi-hdr__top .tb-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
}

body.mi-hdr2-on .mi-hdr__top .tb-right {
  display: flex;
  align-items: center;
  gap: var(--mi-space-5);
}

body.mi-hdr2-on .mi-hdr__top .mi-hdr__ic {
  inline-size: var(--mi-icon-size-sm);
  block-size: var(--mi-icon-size-sm);
  stroke: var(--mi-color-gold-300);
}

body.mi-hdr2-on .mi-hdr__top a {
  color: var(--mi-color-gold-300);
}

/* ---------------------------------------------------------------------------
 * 2. ROW 1 — main bar. Grid, so the search track can grow uncapped.
 *
 * Under direction:rtl the grid-template-areas string reads RIGHT to LEFT, so
 * "brand search cta utils" puts the logo at the right edge and the utility
 * cluster at the left — matching the reference headers.
 * ------------------------------------------------------------------------ */

body.mi-hdr2-on .mi-hdr__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand search cta utils";
  align-items: center;
  gap: var(--mi-space-6);
  min-block-size: 72px;
  padding-block: var(--mi-space-3);
}

body.mi-hdr2-on .mi-hdr__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--mi-space-3);
  flex: none;
}

body.mi-hdr2-on .mi-hdr__brand img {
  inline-size: 44px;
  block-size: 44px;
}

body.mi-hdr2-on .mi-hdr__brand .wm {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

body.mi-hdr2-on .mi-hdr__brand .wm b {
  font-family: var(--mi-font-logo);
  font-size: var(--mi-font-size-body);
  color: var(--mi-color-text-primary);
}

body.mi-hdr2-on .mi-hdr__brand .wm span {
  font-size: 0.7rem;
  color: var(--mi-color-text-gold);
  font-weight: var(--mi-type-weight-600);
}

body.mi-hdr2-on .mi-hdr__cta {
  grid-area: cta;
  flex: none;
}

/*
 * Match the gold CTA to the search field's 48px. The frozen .btn ships 9px padding + a 21.6px
 * line-box = 51px, which was the single tallest control in the row and alone set the bar's
 * height (48px search + 24px padding should be 72px, not 75px). Levelling it keeps the row
 * rhythm even AND makes --mi-header-h below an exact figure rather than an approximation.
 */
body.mi-hdr2-on .mi-hdr__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-space-2);
  block-size: 48px;
  padding-block: 0;
  line-height: 1;
}

body.mi-hdr2-on .mi-hdr__cta .btn .mi-hdr__ic {
  inline-size: var(--mi-icon-size-md);
  block-size: var(--mi-icon-size-md);
}

body.mi-hdr2-on .mi-hdr__utils {
  grid-area: utils;
  display: flex;
  align-items: center;
  gap: var(--mi-space-2);
  flex: none;
}

/* ---------------------------------------------------------------------------
 * 3. THE SEARCH FIELD — the centrepiece.
 *
 * The Octane Finder component is reused verbatim; these are skin overrides only,
 * every one prefixed .mi-hdr__search so the drawer and 404 instances are untouched.
 * The results dropdown already floats (absolute, anchored to .mi-finder) — nothing
 * to do there beyond cosmetics.
 * ------------------------------------------------------------------------ */

body.mi-hdr2-on .mi-hdr__search {
  grid-area: search;
  min-inline-size: 0; /* mandatory: lets the 1fr track actually shrink */
}

body.mi-hdr2-on .mi-hdr__search .mi-finder__box {
  min-block-size: 48px;
  border-radius: var(--mi-radius-lg);
  background: var(--mi-color-bg-sunken);
  border: 1px solid transparent;
  box-shadow: none;
  padding-inline: var(--mi-space-4);
  gap: var(--mi-space-3);
}

/* Warm ivory-family grey, never a cool #f2f2f2 — that would be the only off-palette surface. */
body.mi-hdr2-on .mi-hdr__search .mi-finder__box:hover {
  background: var(--mi-color-n-100);
  border-color: var(--mi-color-border);
}

body.mi-hdr2-on .mi-hdr__search .mi-finder__box:focus-within {
  background: var(--mi-color-bg-elevated);
}

/*
 * The input inherits a 1px solid #666 / 3px-radius box from a global form rule that out-specifies
 * mirani-finder.css's border:0 — a pre-existing defect that was invisible on the old 44px icon
 * field and glaring on a 577px one (it drew a second, misaligned box inside the search field).
 * Reset it here rather than in mirani-finder.css so the drawer and 404 instances are untouched.
 */
body.mi-hdr2-on .mi-hdr__search .mi-finder__input {
  block-size: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* 1rem is mandatory — anything under 16px triggers iOS zoom-on-focus. */
  font-size: var(--mi-font-size-body);
}

body.mi-hdr2-on .mi-hdr__search .mi-finder__input::placeholder {
  color: var(--mi-color-text-tertiary);
  opacity: 1;
}

body.mi-hdr2-on .mi-hdr__search .mi-finder__icon {
  inline-size: var(--mi-icon-size-md);
  block-size: var(--mi-icon-size-md);
}

body.mi-hdr2-on .mi-hdr__search .mi-finder__dropdown {
  box-shadow: var(--mi-shadow-e4);
  border-radius: var(--mi-radius-lg);
  max-block-size: min(70vh, 560px);
}

/* ---------------------------------------------------------------------------
 * 4. UTILITY CLUSTER — RTL right→left: account → cart.
 *
 * Cart terminates the row at the far left, matching ROJA / خانومی / DIGISTYLE.
 * No wishlist icon: there is no wishlist route on this install, and a header link
 * to a 404 is worse than an absent affordance.
 * ------------------------------------------------------------------------ */

/* Logged-out: outlined pill. .btn.btn-outline is already patched at (0,2,0) in
   mirani-home-fixes.css, so the typed-<button> reset bleed cannot reach it. */
body.mi-hdr2-on .mi-hdr__utils .mi-hdr__acct.btn.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
  border-radius: var(--mi-radius-pill);
  min-block-size: 44px;
  padding-inline: var(--mi-space-4);
  font-size: var(--mi-font-size-body-sm);
  font-weight: var(--mi-type-weight-600);
  white-space: nowrap;
}

body.mi-hdr2-on .mi-hdr__utils .mi-hdr__acct .mi-hdr__ic {
  inline-size: var(--mi-icon-size-md);
  block-size: var(--mi-icon-size-md);
}

/* Logged-in: avatar + wallet chip. A NEW class (.mi-hdr__wallet) rather than reviving
   .wallet-pill, which carries a site-wide display:none!important in mirani-home-fixes.css. */
body.mi-hdr2-on .mi-hdr__acct--in {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
  min-block-size: 44px;
  padding-inline: var(--mi-space-1) var(--mi-space-3);
  border: 1px solid var(--mi-color-border);
  border-radius: var(--mi-radius-pill);
  background: var(--mi-color-bg-elevated);
}

body.mi-hdr2-on .mi-hdr__acct--in:hover {
  border-color: var(--mi-color-border-strong);
  background: var(--mi-color-bg-sunken);
}

body.mi-hdr2-on .mi-hdr__acct--in .avatar {
  inline-size: 32px;
  block-size: 32px;
}

body.mi-hdr2-on .mi-hdr__wallet {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-1);
  font-size: var(--mi-font-size-caption);
  font-weight: var(--mi-type-weight-700);
  color: var(--mi-color-text-primary);
}

body.mi-hdr2-on .mi-hdr__wallet .mi-hdr__ic {
  inline-size: var(--mi-icon-size-sm);
  block-size: var(--mi-icon-size-sm);
  stroke: var(--mi-color-text-gold);
}

body.mi-hdr2-on .mi-hdr__wallet em {
  font-weight: var(--mi-type-weight-400);
  color: var(--mi-color-text-tertiary);
  font-style: normal;
}

/* Icon buttons. Asserted for <button> too: mirani-home-fixes.css re-colours bare buttons
   navy on hover at (0,1,0), which would flash a navy wash across the hamburger. */
body.mi-hdr2-on .site-header .icon-btn,
body.mi-hdr2-on .site-header .menu-toggle {
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mi-radius-md);
  background: transparent;
  color: var(--mi-color-text-primary);
}

body.mi-hdr2-on .site-header .icon-btn:hover,
body.mi-hdr2-on .site-header .menu-toggle:hover,
body.mi-hdr2-on .site-header .menu-toggle:focus-visible {
  background: var(--mi-color-bg-sunken);
  color: var(--mi-color-text-primary);
}

/*
 * The hamburger exists only below the row-2 breakpoint; above it, the browse strip IS the nav.
 * This must come AFTER the shared .icon-btn rule above: .menu-toggle also carries .icon-btn, and
 * both selectors are (0,3,0), so source order decides. It re-asserts what mi.css's
 * .menu-toggle{display:none} (0,1,0) can no longer do once the sizing rule out-specifies it.
 */
body.mi-hdr2-on .site-header .menu-toggle {
  display: none;
}

/*
 * Keyboard focus ring. The site standard is base-rtl.css's 2px --mi-color-link at 2px offset;
 * the hamburger was picking up a 1.5px navy outline from the global button styling instead, so
 * the header had two different focus treatments. Normalise to the site ring.
 */
body.mi-hdr2-on .site-header .icon-btn:focus-visible,
body.mi-hdr2-on .site-header .menu-toggle:focus-visible,
body.mi-hdr2-on .site-header .mi-hdr__acct:focus-visible,
body.mi-hdr2-on .mi-hdr__nav a:focus-visible {
  outline: 2px solid var(--mi-color-link);
  outline-offset: 2px;
}

/*
 * The badge span is now ALWAYS rendered (empty at zero) and hidden with :empty.
 * This also fixes a latent site-wide bug: home.js:107 does
 * document.querySelector('.icon-btn .badge').textContent = ... with no null guard, so on the
 * old header every add-to-cart click on the homepage threw a TypeError while the cart was empty.
 */
body.mi-hdr2-on .site-header .badge:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 5. ROW 2 — browse strip
 * ------------------------------------------------------------------------ */

body.mi-hdr2-on .mi-hdr__nav {
  background: var(--mi-color-bg-base);
  border-block-start: 1px solid var(--mi-color-border);
}

body.mi-hdr2-on .mi-hdr__nav-in {
  display: flex;
  align-items: center;
  gap: var(--mi-space-6);
  min-block-size: 48px;
  flex-wrap: nowrap;
}

/* Must beat mi.css .primary{margin-inline:auto}, which would centre the nav and detach it
   from the start-anchored mega panel. */
body.mi-hdr2-on .mi-hdr__nav .primary {
  display: flex;
  align-items: center;
  gap: var(--mi-space-1);
  margin-inline: 0;
  min-inline-size: 0;
}

body.mi-hdr2-on .mi-hdr__nav .primary ul {
  display: flex;
  align-items: center;
  gap: var(--mi-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mi-hdr2-on .mi-hdr__nav .primary a {
  display: inline-flex;
  align-items: center;
  position: relative;
  block-size: 36px;
  padding-inline: var(--mi-space-3);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-font-size-body-sm);
  font-weight: var(--mi-type-weight-500);
  color: var(--mi-color-text-secondary);
  white-space: nowrap;
  transition: color var(--mi-motion-duration-120) var(--mi-ease-standard);
}

body.mi-hdr2-on .mi-hdr__nav .primary a:hover {
  color: var(--mi-color-text-primary);
  background: var(--mi-color-bg-sunken);
}

body.mi-hdr2-on .mi-hdr__nav .primary a.active {
  color: var(--mi-color-brand-primary);
  font-weight: var(--mi-type-weight-700);
}

body.mi-hdr2-on .mi-hdr__nav .primary a.active::after {
  content: "";
  position: absolute;
  inset-inline: var(--mi-space-3);
  inset-block-end: 0;
  block-size: 2px;
  border-radius: var(--mi-radius-pill);
  background: var(--mi-color-brand-accent);
}

/*
 * The «دسته‌بندی محصولات» anchor. Deliberately NOT gold: gold is spent on the free-octane
 * lead magnet (§3.2), and a second saturated accent in the same header would flatten it.
 * A sunken→navy fill gives the reference's anchored-category weight using existing tokens.
 *
 * No chevron is authored here — mirani-desktop-mega.js builds and appends its own
 * .mi-dm-tchev to every trigger it discovers.
 */
body.mi-hdr2-on .mi-hdr__lead {
  flex: none;
}

body.mi-hdr2-on .mi-hdr__nav .primary .mi-hdr__cats {
  gap: var(--mi-space-2);
  padding-inline: var(--mi-space-4);
  background: var(--mi-color-bg-sunken);
  color: var(--mi-color-text-primary);
  font-weight: var(--mi-type-weight-700);
  transition:
    background-color var(--mi-motion-duration-120) var(--mi-ease-standard),
    color var(--mi-motion-duration-120) var(--mi-ease-standard);
}

body.mi-hdr2-on .mi-hdr__nav .primary .mi-hdr__cats:hover,
body.mi-hdr2-on .mi-hdr__nav .primary .mi-hdr__cats[aria-expanded="true"] {
  background: var(--mi-color-brand-primary);
  color: var(--mi-color-text-on-dark);
}

body.mi-hdr2-on .mi-hdr__cats .mi-hdr__ic {
  inline-size: var(--mi-icon-size-md);
  block-size: var(--mi-icon-size-md);
}

body.mi-hdr2-on .mi-hdr__aside {
  display: flex;
  align-items: center;
  gap: var(--mi-space-3);
  margin-inline-start: auto;
  flex: none;
}

body.mi-hdr2-on .mi-hdr__aside-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
  font-size: var(--mi-font-size-caption);
  color: var(--mi-color-text-secondary);
  white-space: nowrap;
}

body.mi-hdr2-on .mi-hdr__aside-link:hover {
  color: var(--mi-color-text-primary);
}

body.mi-hdr2-on .mi-hdr__aside-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
  block-size: 32px;
  padding-inline: var(--mi-space-3);
  border: 1px solid var(--mi-color-border-strong);
  border-radius: var(--mi-radius-pill);
  font-size: var(--mi-font-size-caption);
  font-weight: var(--mi-type-weight-600);
  color: var(--mi-color-text-primary);
  white-space: nowrap;
}

body.mi-hdr2-on .mi-hdr__aside-chip:hover {
  background: var(--mi-color-bg-elevated);
  border-color: var(--mi-color-brand-primary);
}

body.mi-hdr2-on .mi-hdr__aside .mi-hdr__ic {
  inline-size: var(--mi-icon-size-sm);
  block-size: var(--mi-icon-size-sm);
}

/* ---------------------------------------------------------------------------
 * 6. Desktop mega panel — align to the container's start edge.
 *
 * The panel ships centred (left:50%), but our triggers are start-anchored in RTL, so a
 * centred panel reads as detached. This formula lands the start edge on the container edge
 * at both padded and centred viewports. Priority 220 > 104, so no !important is needed.
 * ------------------------------------------------------------------------ */

@media (min-width: 1081px) {
  body.mi-hdr2-on.mi-dmega-on .mi-dm {
    left: auto;
    right: auto;
    inset-inline-start: max(
      var(--mi-container-padding-inline),
      calc((100vw - var(--mi-container-wide)) / 2)
    );
    inline-size: min(1040px, calc(100vw - 2 * var(--mi-container-padding-inline)));
    transform: translateY(6px);
  }

  body.mi-hdr2-on.mi-dmega-on .mi-dm.is-open {
    transform: translateY(0);
  }

  /*
   * The «دسته‌بندی محصولات» panel carries BOTH browse axes side by side — vehicle first
   * (the actual mental model: "what fits my پراید"), then brand. product_cat holds only a single
   * Uncategorized term, so it cannot source this panel; these two taxonomies are what exist.
   */
  body.mi-hdr2-on.mi-dmega-on .mi-dm-main--cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mi-space-8);
    align-items: start;
  }

  body.mi-hdr2-on.mi-dmega-on .mi-dm-main--cats .mi-dm-grid--veh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mi-hdr2-on.mi-dmega-on .mi-dm-main--cats .mi-dm-grid--brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mi-hdr2-on.mi-dmega-on .mi-dm-main--cats .mi-dm-h {
    margin-block-end: var(--mi-space-4);
  }
}

/* ---------------------------------------------------------------------------
 * 7. Responsive
 * ------------------------------------------------------------------------ */

/* Laptop — tighten before anything is dropped. */
@media (max-width: 1280px) {
  body.mi-hdr2-on .mi-hdr__bar {
    gap: var(--mi-space-4);
  }

  body.mi-hdr2-on .mi-hdr__nav-in {
    gap: var(--mi-space-4);
  }

  body.mi-hdr2-on .mi-hdr__nav .primary a {
    padding-inline: var(--mi-space-2);
  }

  /* Account collapses to an icon-only circle; wallet balance moves to the account page. */
  body.mi-hdr2-on .mi-hdr__acct .login-text {
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__utils .mi-hdr__acct.btn.btn-outline {
    padding-inline: 0;
    inline-size: 44px;
    justify-content: center;
  }

  body.mi-hdr2-on .mi-hdr__wallet {
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__aside-link {
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__cta .cta-label {
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__cta .btn {
    padding-inline: 0;
    inline-size: 44px;
    justify-content: center;
  }
}

/* Tablet and below — row 2 folds into the mega drawer, which already carries all of it. */
@media (max-width: 1080px) {
  /* Measured: 72px bar + 1px header bottom border. */
  body.mi-hdr2-on {
    --mi-header-h: 73px;
  }

  body.mi-hdr2-on .mi-hdr__nav {
    display: none;
  }

  body.mi-hdr2-on .site-header .menu-toggle {
    display: inline-flex;
  }
}

/* Phone — the search drops to its own full-width line, exactly as in the references. */
@media (max-width: 767px) {
  /* Measured: 48px control line + 8px row gap + 44px search line + 16px padding + 1px border. */
  body.mi-hdr2-on {
    --mi-header-h: 117px;
  }

  body.mi-hdr2-on .mi-hdr__top {
    /* 38px of a 640px viewport, holding copy that is read once and also lives in the mobile
       footer from the same content keys. Reclaimed on every page. */
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__bar {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand cta utils"
      "search search search";
    gap: var(--mi-space-2) var(--mi-space-3);
    min-block-size: auto;
    padding-block: var(--mi-space-2);
  }

  body.mi-hdr2-on .mi-hdr__brand .wm {
    display: none;
  }

  /*
   * Phones only: the account moves into the mega drawer, where CR-005 already gives it a
   * prominent block at the top. Kept at 768-1080 — the tablet row has room, and dropping the
   * login CTA there would cost sign-ups for no layout gain. Specificity must match the base
   * .mi-hdr__acct.btn.btn-outline rule (0,5,0), or display:inline-flex wins.
   */
  body.mi-hdr2-on .mi-hdr__utils .mi-hdr__acct.btn.btn-outline,
  body.mi-hdr2-on .mi-hdr__utils .logged-in {
    display: none;
  }

  body.mi-hdr2-on .mi-hdr__search .mi-finder__box {
    min-block-size: 44px;
  }

  body.mi-hdr2-on .mi-hdr__search .mi-finder__input {
    block-size: 40px;
  }

  body.mi-hdr2-on .site-header .icon-btn,
  body.mi-hdr2-on .site-header .menu-toggle {
    inline-size: 48px;
    block-size: 48px;
  }

  body.mi-hdr2-on .mi-hdr__cta .btn {
    inline-size: 48px;
    block-size: 48px;
  }

  /*
   * Sustained scroll-down hides the search line only (56px of a 640px viewport ≈ 9%).
   * display:none rather than an animated collapse: animating block-size on a sticky element
   * that also paints a shadow forces a full-header repaint every frame on exactly the
   * mid-range Android this site's PSI work targeted, and a max-block-size transition would
   * clip the results dropdown mid-animation.
   */
  body.mi-hdr2-on .site-header.is-compact .mi-hdr__search {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * 8. Sticky offsets.
 *
 * The header grew 72px → 120px, but eleven sticky/anchor offsets across the theme and the
 * sandbox hardcode 96px (one uses 90px). Six of them live in frozen theme files, which is
 * exactly why the correction belongs in this globally-enqueued sheet. Every selector is
 * body-prefixed so it wins regardless of enqueue order.
 * ------------------------------------------------------------------------ */

body.mi-hdr2-on {
  scroll-padding-block-start: var(--mi-sticky-offset);
}

body.mi-hdr2-on .gallery,
body.mi-hdr2-on .acct-side,
body.mi-hdr2-on .co-summary,
body.mi-hdr2-on .toc,
body.mi-hdr2-on .mip-toc {
  inset-block-start: var(--mi-sticky-offset);
}

body.mi-hdr2-on .prose h2 {
  scroll-margin-block-start: var(--mi-sticky-offset);
}

/*
 * NOT part of the offset correction above — the opposite. `.compare-wrap` sets `overflow-x:auto`, and
 * per spec a non-visible value on one axis computes the other to `auto` too, so the wrapper is a
 * scroll container and IT, not the viewport, is this th's sticky scrollport. The header therefore
 * never tracks the page and never needs to clear the fixed header; an inset here just shoves it that
 * many pixels DOWN from the top of its own table — at 122px it landed in the middle of the tbody, on
 * top of the first rows, on /compare/, the homepage band, and every brand and category page.
 * Pin it to its own scrollport instead. (A horizontally scrollable wrapper and a viewport-sticky
 * child are mutually exclusive — there is no inset value that makes this track the page.)
 */
body.mi-hdr2-on table.compare thead th {
  inset-block-start: 0;
}

/*
 * The WooCommerce-page sticky rails. These live in their own skin sheets and out-specify a plain
 * body-prefixed selector, so each override below is built to beat its original exactly:
 *   body.mi-hdr2-on.woocommerce-checkout #order_review          (1,2,1) > (1,1,1)
 *   body.mi-hdr2-on.woocommerce-cart .cart-collaterals .cart_totals (0,4,1) > (0,3,1)
 *     — do NOT shorten to `body.mi-hdr2-on .cart_totals` (0,2,0), it loses.
 *   body.mi-hdr2-on .woocommerce-MyAccount-navigation           (0,2,0) > (0,1,0)
 * inset-block-start and top resolve to the same used value, so the logical form still wins.
 */
body.mi-hdr2-on.woocommerce-checkout #order_review,
body.mi-hdr2-on.woocommerce-cart .cart-collaterals .cart_totals,
body.mi-hdr2-on .woocommerce-MyAccount-navigation {
  inset-block-start: var(--mi-sticky-offset);
}

/* ---------------------------------------------------------------------------
 * 9. Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.mi-hdr2-on .site-header,
  body.mi-hdr2-on .mi-hdr__nav .primary a,
  body.mi-hdr2-on .mi-hdr__cats {
    transition: none;
  }
}