/**
 * Harvest — Header (C1), Top bar (C2), Primary nav / mega-menu (C3).
 *
 * Desktop: dark top bar → surface header (logo + wide search + actions) → nav row.
 * Mobile (≤767): top bar collapses, header becomes hamburger + logo + cart, and
 * the nav turns into a full-width drawer toggled by the pure-CSS #hrv-nav-toggle
 * checkbox (no theme JS). Tablet (768–1023): search narrows, nav stays inline.
 *
 * All colour via --hrv-* tokens → every palette + dark Midnight works unchanged.
 */

/* ---------- Core header container (N-3 alignment) ----------
   `.header.content` is MAGENTO'S container, not ours — the ownership probe returns
   `owner: null` for it — and no Harvest rule matched it at all. Blank's `styles-l.css` was
   the only thing sizing it: `max-width: 1280px; padding: 30px 20px 0`.

   It is NOT dead markup: measured 1280x92 with 17 visible descendants ("My Cart", "Search",
   "Advanced Search"). Its edges sit on screen beside the page body's, and they never agreed —
   before N-3 the header content was 32px WIDER than the body content on each side; raising
   --hrv-container to 1440 turned that into 48px NARROWER. A width fix that corrected
   .page-main and left this alone would have made the visible misalignment worse, which is why
   this rule ships in the same change.

   (0,3,0) so specificity decides rather than source order, matching the N-16 reasoning.
   Only the HORIZONTAL padding is overridden: Blank's 30px top / 0 bottom is vertical rhythm
   this fix has no business touching. */
.page-header .header.content,
.page-wrapper .header.content {
  max-width: var(--hrv-container);
  padding-left: var(--hrv-page-pad);
  padding-right: var(--hrv-page-pad);
}

/* ---------- Top bar (C2) ---------- */
.hrv-topbar {
  background: var(--hrv-band);
  color: var(--hrv-band-text);
  font-size: 12.5px;
}
.hrv-topbar-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 8px var(--hrv-page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hrv-topbar-links { display: flex; gap: 18px; align-items: center; }
.hrv-topbar a { color: inherit; text-decoration: none; opacity: 0.92; }
.hrv-topbar a:hover { opacity: 1; }
.hrv-topbar-locale { opacity: 0.8; }

/* ---------- Header row (C1) ---------- */
.hrv-header {
  background: var(--hrv-surface);
  border-bottom: 1px solid var(--hrv-border);
  position: relative;
}
.hrv-header-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 16px var(--hrv-page-pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

.hrv-logo {
  font-family: var(--hrv-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--hrv-text);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.hrv-logo:hover { color: var(--hrv-text); }
.hrv-logo-accent { color: var(--hrv-accent); }

/* Search — input + attached accent button, fills the middle. */
.hrv-search {
  flex: 1;
  display: flex;
  max-width: 560px;
}
.hrv-search-input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.hrv-search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 12px 22px;
}

/* Account / wishlist / cart. */
.hrv-header-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 500;
}
.hrv-header-actions > a { color: var(--hrv-text); text-decoration: none; }
.hrv-header-actions > a:hover { color: var(--hrv-accent); }
.hrv-header-cart { color: var(--hrv-accent) !important; font-weight: 600; }

/* ---------- Primary nav (C3) ---------- */
.hrv-mainnav {
  background: var(--hrv-surface);
  border-bottom: 1px solid var(--hrv-border);
}
.hrv-mainnav-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 12px var(--hrv-page-pad);
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.hrv-mainnav a { color: var(--hrv-text); text-decoration: none; }
.hrv-mainnav a:hover { color: var(--hrv-accent); }
.hrv-mainnav-deals { color: var(--hrv-accent); font-weight: 600; }

/* Mega-menu panel primitive (C3) — a nav item can host a .hrv-megamenu drop
   panel; shown on hover/focus-within of its .hrv-mainnav-item parent. Kept
   token-driven so the money-path/category task can populate it. */
.hrv-mainnav-item { position: relative; }
.hrv-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 640px;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  box-shadow: var(--hrv-shadow-card);
  padding: 24px;
  display: none;
  z-index: 40;
}
.hrv-mainnav-item:hover > .hrv-megamenu,
.hrv-mainnav-item:focus-within > .hrv-megamenu { display: block; }

/* ---------- Mobile hamburger toggle (pure CSS) ---------- */
.hrv-nav-toggle-cb { display: none; }
.hrv-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  /* 44x44, not 40x40. The ClickUp mobile DoD sets the bar at 44px and this is THE mobile
     control - the one every shopper on a phone touches before anything else. It measured
     40x40, which fails by 4px, and 4px is not a rounding matter on a thumb. */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--hrv-border-strong);
  border-radius: var(--hrv-radius-md);
  flex-shrink: 0;
}
.hrv-nav-toggle-bar {
  width: 18px;
  height: 2px;
  background: var(--hrv-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hrv-header-inner { gap: 18px; }
  .hrv-search { max-width: 380px; }
  .hrv-mainnav-inner { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .hrv-mainnav-inner::-webkit-scrollbar { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hrv-topbar-promo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hrv-topbar-links { display: none; }

  .hrv-header-inner { flex-wrap: wrap; gap: 12px; }
  .hrv-nav-toggle { display: flex; order: 1; }

  /* TAP TARGETS, measured rather than assumed. At 375 the header's own controls came in at
     search 93x42, basket 65x25 and logo 86x22 - all under the 44px the mobile DoD requires,
     and all three are controls rather than prose links, so there is no inline-link exemption
     to argue. min-height is used instead of height so a wrapped label still grows the box. */
  /* Chips need WIDTH as well as height: "Men" measured 30x47 - tall enough and too narrow.
     Only the smaller dimension matters to a thumb, so a height-only rule passes a control that
     still fails. */
  .hrv-mainnav a { min-width: 44px; }  /* effective once the rows are block, above */

  /* `.logo` is Magento's CHECKOUT header logo - a different element from the theme's
     `.hrv-logo`, on a page that renders its own minimal header with no nav and no hamburger.
     Fixing .hrv-logo left this one at 170x37, which is the shape of a per-instance fix passing
     for a per-class one: same role, same page family, different selector. */
  .checkout-index-index .logo,
  .hrv-search-btn,
  .hrv-header-cart,
  .hrv-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hrv-logo { order: 2; font-size: 22px; }
  .hrv-header-actions { order: 3; gap: 14px; margin-left: auto; }
  .hrv-header-actions > a:not(.hrv-header-cart) { display: none; } /* keep Cart visible; rest live in the drawer */
  .hrv-search { order: 4; flex-basis: 100%; max-width: none; }

  /* Nav becomes a collapsible drawer under the header. */
  .hrv-mainnav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .hrv-nav-toggle-cb:checked ~ .hrv-mainnav { max-height: 480px; }
  .hrv-mainnav-inner {
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }
  .hrv-mainnav a {
    /* display:block matters as much as the padding. The drawer rows are non-replaced INLINE
       boxes by default, and an inline box IGNORES min-width - so the `.hrv-mainnav a
       { min-width: 44px }` rule added a moment earlier was inert, and the chip stayed 30px
       wide while the rule sat in the stylesheet looking applied. Full-width rows are what the
       drawer wants anyway: they are already stacked in a column with a rule between each. */
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--hrv-border);
    font-size: 15px;
  }
  /* Hamburger → X when open.
     THESE THREE SELECTORS DESCEND THROUGH .hrv-header-inner and originally did not. The file
     was written for a flat header in which the checkbox, the toggle and the nav were all
     siblings - but the rules right above set order:1/2/3/4 on the toggle, logo, actions and
     search, and `order` only applies between children of ONE flex container, so the toggle has
     to live inside .hrv-header-inner while .hrv-mainnav is a full-width band outside it. Both
     constraints cannot hold for a single sibling chain. The drawer rule keeps the sibling form
     (checkbox and nav really are siblings); this one descends. Neither rule had ever run, so
     there is nothing here that used to work. */
  .hrv-nav-toggle-cb:checked ~ .hrv-header-inner .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hrv-nav-toggle-cb:checked ~ .hrv-header-inner .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .hrv-nav-toggle-cb:checked ~ .hrv-header-inner .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hrv-megamenu { position: static; min-width: 0; box-shadow: none; border: none; padding: 0 0 12px; }
}

/* ---------------------------------------------------------------- N-28
   Header nav chips — the comp's pills, and the real finding behind the
   "Porto is blocking us" mirage.

   FOR DAYS THIS WAS RECORDED AS A CATALOG-DATA BLOCKER: "Porto occupies nav slots 1-8 of 17 on
   a food storefront", escalated as a decision only the user could make. It was never that. The
   nav renders whatever categories the TENANT has — that is correct behaviour, and every
   merchant installing this theme has their own. The decisive test was never run: **deleting
   every Porto category would not have made this nav match the artboard.** It would still be
   square-cornered, zero-padded, untinted text links instead of pills.

   So the defect is here, in the theme, and it is small.

   MEASURED ON BOTH SIDES rather than argued:
       artboard  radius 999px · padding 9px 16px · 14px/700 · nav gap 8px
                 inactive  background color-mix(in oklab, text 6%, bg)
                 active    background text, colour bg  (inverted)
       theme     radius 0    · padding 0 12px  · 14px/700
   Font size and weight already agreed; only the pill shape, padding and tint were missing.

   WHICH ELEMENTS ARE PILLS — N-14 asked for this to be read across pages rather than decided on
   one, so it was: all 48 artboards scanned. `border-radius: 999px` lands on the 7 header chips,
   the header search field and the Basket CTA in **39 of 48** files, plus status badges (New,
   Sale, Delivered, Processing). Body buttons are genuinely mixed — which is exactly why N-14
   refused a blanket change to the shared button block, and why this rule is scoped to the
   header only.

   NOT hardcoding seven names. The comp's Pantry/Fresh/Bakery/... are illustrative of a food
   catalogue; the chips are a SHAPE, and the labels come from the merchant's categories. */
.navigation .level0 > .level-top {
    padding: 9px 16px;
    border-radius: var(--hrv-radius-pill);
    background: color-mix(in oklab, var(--hrv-text) 6%, var(--hrv-bg));
    color: var(--hrv-text);
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navigation .level0 > .level-top:hover {
    background: color-mix(in oklab, var(--hrv-text) 12%, var(--hrv-bg));
}
/* Active category reads inverted in the comp, not accent-coloured.
 *
 * `border-color` IS THE THIRD DECLARATION HERE, AND IT IS THE ONE THAT WAS MISSING.
 * (basil-T4 S8, finding 1.) Blank ships the active nav item as a TAB, underlined in Luma
 * orange:
 *     .navigation .level0.active>.level-top,.navigation .level0.has-active>.level-top
 *       { border-color:#ff5501; border-style:solid; border-width:0 0 3px; color:#333 }
 *   -- styles-l.css, (0,4,0), same selector as this block.
 * This block restated `background` and `color` and left the border alone, so a 3px
 * #ff5501 bottom border went on painting -- and because the chip is `border-radius: 999px`
 * it renders as a bright ORANGE ARC under the pill, on an all-green storefront.
 * MEASURED on the deployed basil build before the fix:
 *     borderBottomColor rgb(255, 85, 1)  width 3px  style solid  radius 999px
 * and an every-element sweep of the page found it was the ONLY thing painting rgb(255,85,1)
 * -- one instance on this page, but on the SHARED header, so every route with an active
 * category, in all five palettes, in every locale.
 *
 * WHY THE HEX IS INVISIBLE TO GATE B. `#ff5501` lives in Magento/blank's compiled
 * styles-l.css, not in any Harvest file, so the "grep the compiled theme CSS for raw hex"
 * check (CLAUDE.md 11.3) is structurally incapable of seeing it. An inherited colour is
 * still a colour on our page; the gate's silence was about Harvest's files, not the render.
 *
 * BORDER-COLOR, NOT BORDER-WIDTH, AND NOT `!important`. Zeroing the width would remove 3px
 * of box and move the chip; recolouring keeps the geometry byte-identical and only changes
 * what is painted. Specificity is EQUAL to Blank's (0,4,0) and that is sufficient here --
 * proven, not assumed: the `background` and `color` in this same block already beat Blank's
 * `color:#333` on the deployed page, so this sheet demonstrably wins on order at this
 * selector. `var(--hrv-text)` matches the pill's own fill, so the border disappears into it
 * in every palette rather than being suppressed with a hardcoded transparent. */
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top {
    background: var(--hrv-text);
    color: var(--hrv-bg);
    border-color: var(--hrv-text);
}

/* THE SECOND INSTANCE OF THE SAME CLASS, found by asking how many the class has rather than
 * fixing the one that was reported (CLAUDE.md 3.18). Blank paints the SAME orange as a 3px
 * LEFT border on the active row inside an open megamenu:
 *     .navigation .level0 .submenu .active>a
 *       { border-color:#ff5501; border-style:solid; border-width:0 0 0 3px }
 *   -- styles-l.css, (0,4,1).
 * It was not in the before-sweep because it only exists while a submenu is open, so this is
 * an equal-specificity restatement of a rule whose defect is inherited and reachable, not a
 * measurement of a live one. An accent-coloured marker is the right active affordance for a
 * dropdown row, so this recolours rather than removes.
 *
 * There is a THIRD Blank rule in this family --
 *     .block-wishlist-management .wishlist-select-items .current{border-bottom:3px solid #ff5501}
 * -- and it is deliberately NOT fixed: `Magento_MultipleWishlist` is a Commerce module and
 * `ls vendor/magento/ | grep -i multiplewishlist` on this build returns nothing, so no markup
 * on this store can ever match it. A rule written against markup that cannot exist is dead
 * CSS, and dead CSS that looks like a fix is worse than the gap it papers over. */
.navigation .level0 .submenu .active > a {
    border-color: var(--hrv-accent);
}

/* AND THE MOBILE ONE — FOUND ONLY BY MEASURING AT 375, WHICH IS THE ENTIRE ARGUMENT FOR
 * CLAUDE.md 11.4 BEING A GATE RATHER THAN A COURTESY.
 *
 * The desktop fix above measured clean at 1440 and 768. At 375 the orange came straight back,
 * on a DIFFERENT SIDE: the every-element sweep reported one painter,
 * `borderLeftColor: rgb(255,85,1)` on the active chip, with `borderBottomWidth: 0px`. Blank
 * carries a second, independent rule for the mobile drawer, in styles-m.css:
 *     .navigation .level0.active>a:not(.ui-state-active),
 *     .navigation .level0.has-active>a:not(.ui-state-active)
 *       { border-color:#ff5501; border-style:solid; border-width:0 0 0 8px }
 * an 8px LEFT bar rather than a 3px bottom one. At (0,4,1) — `:not()` contributes its
 * argument's specificity, and `a` adds the element — it OUTRANKS the (0,4,0) fix above, so
 * that fix could never have reached it at any width. The two rules only looked like one
 * problem because both painted the same hex.
 *
 * *** A CORRECTION I OWE, BECAUSE IT NEARLY CLOSED THIS AT TWO OF FOUR INSTANCES. *** Earlier
 * in this task I ran `grep -c 'ff5501' styles-m.css`, read `1`, and concluded the mobile sheet
 * carried the colour only on `a:active`. `grep -c` counts LINES, and minified CSS is one line:
 * the real count is EIGHT occurrences, and this rule is among them. A count that cannot exceed
 * one is not a count. The instance total for this defect class is therefore 4, not the 1 that
 * was reported: desktop chip, desktop submenu, mobile drawer, and a wishlist rule that cannot
 * render on Open Source.
 *
 * Same selector shape for an equal-specificity, sheet-order win, and `var(--hrv-text)` again so
 * the bar disappears into the active pill's own fill in every palette while the 8px of box —
 * which Blank compensates with `span{margin-left:-8px}` — stays exactly where it was. */
.navigation .level0.active > a:not(.ui-state-active),
.navigation .level0.has-active > a:not(.ui-state-active) {
    border-color: var(--hrv-text);
}
/* The drawer's "All Categories" row, same rule family, same sheet. FIVE classes, so
   (0,5,0) - this comment said (0,4,0) until a reviewer counted them. The weight is not
   load-bearing here (the rule is a same-selector restatement either way), but a
   specificity figure in this theme is treated as evidence, and evidence that was never
   counted is the thing register #17 exists for. */
.navigation .level0.active .all-category .ui-state-focus {
    border-color: var(--hrv-text);
}
/* The comp's nav is `display:flex; gap:8px`. Magento emits floated list items, so the gap has to
   come from the items themselves — a flex container here would fight the megamenu's positioning
   and the mobile drawer, both of which already work. */
.navigation .level0 {
    margin-right: 8px;
}

/* N-28b — the header SEARCH FIELD is a pill too.
   Same artboard header, same scan: the search input carries border-radius:999px in 39 of 48
   files, alongside the nav chips and the Basket CTA. The comp declares 12px first and 999px
   second on the same element, so 999px is what actually applies — reading only the first
   declaration would have "confirmed" the theme's 14px as correct.
       artboard  999px · padding 10px 18px · width 220
       theme     14px  · padding 12px 14px · width 235
   Width is left to the theme: 220 is the comp's canvas measurement, and the field is inside a
   flex row that already sizes it sensibly at every breakpoint. Shape and padding are the
   design; an exact pixel width copied off one artboard is not. */
.block-search .control input,
.block-search input#search {
    border-radius: var(--hrv-radius-pill);
    padding: 10px 18px;
}

/* Type-ahead panel for the header search.
 *
 * quickSearch (Magento_Search/js/form-mini) writes its suggestions into the element named by
 * `destinationSelector`; without a positioned, painted container the markup lands in the flow and
 * pushes the header apart, which reads as a layout bug rather than a missing style. Hidden until
 * it has children so an empty panel never paints a bare box - the suggest endpoint returns
 * nothing on a store with no search history, and an empty bordered rectangle under the field is
 * exactly the "validation state that renders no text" shape 3.10 calls a defect. */
.hrv-search { position: relative; }
.hrv-search-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius-md);
  box-shadow: var(--hrv-shadow-card);
  overflow: hidden;
}
.hrv-search-autocomplete:empty { display: none; }
.hrv-search-autocomplete ul { list-style: none; margin: 0; padding: 0; }
.hrv-search-autocomplete li {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--hrv-text);
  cursor: pointer;
}
.hrv-search-autocomplete li:hover,
.hrv-search-autocomplete li.selected { background: var(--hrv-canvas); }