/**
 * Harvest — Base (reset, structural tokens, typography, layout container).
 *
 * Loaded first of the component kit, after the palette + derived tokens. Sets
 * the warm, organic food-&-grocery baseline the Harvest comps use: Karla body,
 * Bricolage Grotesque headings, an 1280px content container with 32px gutters,
 * and the radius/spacing scale every other component references (--hrv-radius
 * etc.) so a card here and a card there never drift.
 *
 * Structural tokens live here (not in _derived.css) because they are geometry,
 * not colour — they are palette-neutral and shared by every palette.
 */

:root,
[data-hrv-palette] {
  /* Geometry scale — measured from the Harvest comps
     (design/store-theme/03-harvest-food/pages/*.dc.html: 18px and 14px dominate,
     12px for small chips, 999px pills, 50% avatars). Noticeably rounder than the
     technical themes: "rounded and friendly" is the vertical's whole language, so
     these values ARE the design, not a default. */
  --hrv-radius: 18px;          /* cards, panels, hero */
  --hrv-radius-md: 14px;       /* buttons, inputs */
  --hrv-radius-sm: 12px;       /* badges, chips */
  --hrv-radius-pill: 999px;    /* filter pills, dot nav */
  --hrv-radius-circle: 50%;    /* avatars, icon buttons, dots */

  --hrv-gap: 16px;             /* default grid gap */
  --hrv-page-pad: 32px;        /* horizontal page gutter (desktop) */

  /* N-3 — the theme rendered ~10% narrower than the artboards, theme-wide.
     This token was 1280px. It is the OUTER cap (border-box), so with the 32px gutter it
     produced a 1216px content column, against the artboards' 1376px measured at a 1440
     viewport: 11.6% narrower, on every page.

     MEASURED, NOT READ. The artboards declare no container cap at all — grepping them for a
     width finds only `max-width: 44ch` prose measures, and grepping for the gutter as a
     literal `padding: 0 32px` matches ZERO times in all 48 files even though the computed
     value is 32px. The number below comes from rendering four artboards through this same
     rig at the same viewport (`--file`), which is also why that mode exists: comparing a
     rendered width against a declared one is not a comparison.
        Home 32px gutter -> 1376    T10 Product Detail -> 1376    T16 Cart -> 1376
        T2 Home Editorial 40px gutter -> 1360
     1440 outer - 2x32 gutter = 1376 content, so the cap is the viewport width itself.

     AND THE 1280 WAS OURS. Blank's `styles-l.css` also sets `.page-main { max-width: 1280px }`
     at the identical (0,1,0), so the computed 1280px was consistent with either winning. The
     tie goes to source order and this file loads at sheet index 13 against Blank's 4 — so
     Harvest's rule won and Harvest's token was the 1280. A defect that looks inherited and
     is not is the easiest kind to fix in the wrong file.

     One token, because header, footer, breadcrumbs, .hrv-container and .page-main all read
     it — which is what "not page-scoped" should mean in practice. */
  --hrv-container: 1440px;     /* outer cap; with --hrv-page-pad this gives the artboards' 1376px content */

  /* Softer, more diffuse than a technical theme's tight shadow — warm surfaces
     sit on the bg rather than snapping to it. */
  --hrv-shadow-card: 0 6px 20px var(--hrv-shadow-tint);
}

/* ---- Reset / normalisation (scoped to storefront pages, not core widgets) ---- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--hrv-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--hrv-text);
  background: var(--hrv-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Typography — Bricolage Grotesque display, friendly near-neutral tracking. ---- */
h1, h2, h3, h4, h5, h6,
.hrv-h1, .hrv-h2, .hrv-h3 {
  font-family: var(--hrv-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--hrv-text);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1, .hrv-h1 { font-size: 32px; }
h2, .hrv-h2 { font-size: 26px; }
h3, .hrv-h3 { font-size: 20px; }

p { margin: 0 0 1em; }

a { color: var(--hrv-accent); text-decoration: none; }
a:hover { color: var(--hrv-accent-hover); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hrv-focus-ring);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* Uppercase kicker / eyebrow label used across the comps. */
.hrv-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hrv-accent-2);
}

/* ---- Layout container + main column ---- */
.hrv-container,
.page-main,
.columns .column.main {
  width: 100%;
}
.hrv-container {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding-inline: var(--hrv-page-pad);
}

/* Magento core page frame: give the main content area the Harvest gutter so
   real catalog/CMS pages (which render inside .page-main) line up with our
   header/footer instead of hugging the viewport edge. */
.page-main {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding-inline: var(--hrv-page-pad);
  box-sizing: border-box;
}

/* Surface panel primitive (bordered card used by many sections). */
.hrv-panel {
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
}

/* Accessible visually-hidden helper (labels for icon-only controls).
   The native selectors below are core-rendered elements we cannot add a class
   to (table captions core prints for a11y, native qty/rating labels). They are
   kept in the DOM for screen readers and hidden visually per the comp, so they
   share this one recipe instead of re-declaring it per page. Add further native
   selectors here rather than pasting the block again.
   NOTE: only UNCONDITIONAL sr-only cases belong here. The `@media`-scoped
   `thead` hides in _expressreview/_multishipping/_returns are responsive
   card-stack behaviour (mobile only) and must stay in their page files. */
.hrv-visually-hidden,
.paypal-express-review .data.table > caption,
.paypal-review .data.table > caption,
.sales-guest-view .column.main .table-order-items > caption,
body[class*="multishipping-checkout"] .data.table > caption,
body[class*="multishipping-checkout"] .data.table .field.qty .label,
.account .column.main .data.table > caption,
.customer-review .rating-summary .label,
.review-customer-view .rating-summary .label,
.catalog-category-view .modes .modes-mode span,
.hrv-page-returns .hrv-returns__list .table-caption {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Striped placeholder primitive ----
   `.hrv-ph` is the theme's OWN class (it appears only in Harvest's own .phtml,
   never in core markup), so it needs no body-class scope. It was previously
   re-declared byte-identically under 11 different page scopes; it lives here
   once now. Pages that need a variant override it on top (e.g. _cart.css uses
   --hrv-radius-md), which still wins on specificity since this file loads
   first. Swapped for a real <img> as media gets wired — a page may also style
   `.hrv-ph img` locally. */
.hrv-ph {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--hrv-radius);
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)),
    color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)) 12px,
    color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 12px,
    color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 24px
  );
}
.hrv-ph > span {
  font-family: var(--hrv-font-mono);
  font-size: 11px;
  color: var(--hrv-text-subtle);
  text-align: center;
  padding: 0 10px;
}

/* ---- Responsive gutters ---- */
@media (max-width: 1023px) {
  :root,
  [data-hrv-palette] { --hrv-page-pad: 24px; }
}
@media (max-width: 767px) {
  :root,
  [data-hrv-palette] { --hrv-page-pad: 16px; }
  h1, .hrv-h1 { font-size: 26px; }
  h2, .hrv-h2 { font-size: 22px; }
}

/* ── Site-wide promo strip (chrome, above the header) ──────────────────────────
   Lives in the component kit, not in a page file: the artboards show this strip on
   every page above the header (Home.dc.html offset 894), and it is emitted by
   Magento_Theme/layout/default.xml, so scoping it to .cms-index-index would have
   left it unstyled everywhere else. */
/* --hrv-band, NOT --hrv-accent (M3-1). Every artboard draws this strip with
   `background: var(--band); color: #fff`. We match the BACKGROUND exactly and ship
   --hrv-band-text (= --hrv-bg, #FBF6EC on Wheat) for the label rather than a raw
   #fff, because token discipline forbids the hex; both clear AA comfortably
   (12.31:1 vs 13.27:1). Saying so rather than implying we matched both halves (m4-5) — Wheat #3A2E17 dark-brown, and the same
   inline style appears on Home and T2, so it is the band across the whole design, not
   a T3 quirk. The theme was rendering gold-on-dark instead.
   The galling part: cycle 2 moved --hrv-band OUT of _derived.css and into the
   per-palette files precisely BECAUSE it is a real artboard value — and then the one
   band element in the entire theme carried on ignoring it. Verified against the comp
   directly rather than taken from the review. */
.hrv-promobar {
  background: var(--hrv-band);
  color: var(--hrv-band-text);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
}

/* Promo strip link — the artboard makes only the campaign phrase clickable.
   Target is now the real T3 Campaign Landing page (/harvest-days). This previously
   read "points at the equivalent search until T3 lands"; T3 has landed and its CMS
   page is seeded, so the stand-in was retired rather than left to rot. A stand-in
   whose stated expiry condition has been met and is still in place is no longer a
   declared deferral — it is an undeclared defect. */
.hrv-promobar-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hrv-promobar-link:hover { text-decoration: none; }

/* Trust tiles gained the artboard's icon, so the tile is now a two-column flex row. */
.hrv-home-trust-item { display: flex; gap: 12px; align-items: center; }
.hrv-home-trust-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }

/* Label kept for screen readers — the artboard shows only the placeholder. */
.hrv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }