/**
 * Harvest — T3 "Campaign Landing", served at /harvest-days.
 *
 * Loaded by Magento_Theme/layout/cms_page_view_id_harvest-days.xml, which also owns
 * the composition. LAYOUT ONLY — the button skin lives in components/_buttons.css
 * and must not be restated here. On T2 restating it killed every tied rule and put
 * white on the Wheat accent at 3.04:1, an AA failure on the default palette.
 *
 * Colours are --hrv-* tokens only: no hex, and no hand-inlined color-mix formulas
 * (re-deriving a token locally means a palette overriding it is followed by every
 * page except this one).
 *
 * THE COMP — design/store-theme/03-harvest-food/colors/Wheat/pages/T3 Campaign
 * Landing.dc.html, measured before implementation and committed as
 * scripts/harvest/expectations/wheat-T3.json:
 *   3 <section> elements
 *   10 media frames — 1x 21/7 hero, 1x 4/3 panel, and 8x 1/1 PRODUCT TILES.
 *     Only the first two are theme-emitted; the eight tiles come from CatalogWidget
 *     as Magento markup, which is why the gate asserts --expect-media 2 and
 *     --expect-products 8. Treating those as one number is the blind spot that let
 *     an empty catalog section pass clean on T2.
 *   ONE border-top in the whole comp, belonging to the FOOTER. There are no
 *     dividers between sections — T2 invented four.
 */

/* VERTICAL RHYTHM ONLY — no max-width, no inline padding (M3-2). `.page-main`
   (components/_base.css) already caps the container at --hrv-container with
   --hrv-page-pad gutters. Re-declaring 1180px + 24px ON TOP of that inset every T3
   section 42px per side, so the page sat visibly narrower than the header and footer.
   _home.css:19-23 documents this EXACT pattern as a bug it removed — "the container
   is the shell's job, not the section's" — while the comment here asserted the
   opposite was a "deliberate, consistent theme-wide decision". Two files, opposite
   claims, NEITHER carrying a measurement; the reviewer's numbers (header 32,
   .page-main 32, section 74) settle it in _home's favour.
   T2 does the same thing and is therefore also wrong — flag it rather than copy it. */
.hrv-t3-section {
    margin: 0;
    padding: 48px 0 0;
    color: var(--hrv-text);
}

/* m4-3: the comp's HERO section is `position: relative` with NO padding — it sits
   flush under the header; the 48px above belongs to section 2 (comp line 37,
   `padding: 48px 40px 0`). The panel is already zeroed deliberately, so leaving the
   hero padded made the deviation selective and undeclared. Zeroed to match the comp. */
.hrv-t3-hero {
    padding-top: 0;
}

/* -------- hero: 21/7 frame with the copy overlaid (comp section 1) --------- */
.hrv-t3-hero {
    position: relative;
    display: grid;
}

.hrv-t3-hero-media,
.hrv-t3-panel-media {
    border-radius: var(--hrv-radius-md);   /* comp 14px; --hrv-radius-md IS 14px (m4-4). --hrv-radius is 18px. */
    overflow: hidden;
    background: var(--hrv-accent-tint);
}

/* Empty media frames — striped, per the comp (N-12). Third and last page carrying this
   defect: --hrv-accent-tint against the page is roughly 1.03 contrast, so the frames are
   present, correctly sized and functionally invisible.

   THE TWO FRAMES TAKE DIFFERENT TOKENS, AND THAT IS THE POINT OF THIS COMMENT.
   On T2 I transcribed a recipe from the right artboard and the WRONG THREE FRAMES within
   it, and it cost a major. So the mapping here was derived by aspect ratio before anything
   was written. T3's artboard splits 1 --bg / 9 --sf — the INVERSE of T2's 6/3 — and lines
   up as:
       L29   aspect-ratio 21/7    -> var(--bg)   == .hrv-t3-hero-media   (we set 21/7)
       L66   aspect-ratio 4/3     -> var(--sf)   == .hrv-t3-panel-media  (we set 4/3)
       L40-61 aspect-ratio 1/1 x8 -> var(--sf)   == product tiles, real catalog data
   Copying T2's single shared rule would have put the panel on the wrong base.
   THREE PAGES, THREE DIFFERENT MAPPINGS. THE RELIABLE STEP IS THE CORRESPONDENCE CHECK,
   NEVER THE PRECEDENT.

   Step values (45deg, 10%/4%, 12px/24px) are identical across both of T3's recipes —
   verified, not assumed, since Home's --bg variant steps 10px/20px instead.

   `:empty` is strict: the stripes vanish the moment a real <img> is added, and a single
   whitespace child would silently disable the rule. Both frames are strictly empty in the
   served HTML, checked attribute-order-agnostically — a naive `class="X"></div>` pattern
   reported 0 of 6 on T2 because the markup emits `class="X" role="presentation">`. */
.hrv-t3-hero-media:empty {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-bg)),
        color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-bg)) 12px,
        color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-bg)) 12px,
        color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-bg)) 24px
    );
}

.hrv-t3-panel-media:empty {
    background-image: 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-t3-hero-media img,
.hrv-t3-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hrv-t3-hero-media {
    aspect-ratio: 21 / 7;
    grid-area: 1 / 1;
}

/* LEFT-ALIGNED — and NOT full-bleed, which an earlier version of this comment claimed
   (m-4). The comp's section spans the viewport; this hero is bounded by `.page-main`'s
   container (--hrv-container + --hrv-page-pad), so it aligns with the header and
   footer rather than spanning the window.
   CORRECTED AGAIN (M3-2): this sentence previously said the hero was boxed at
   "max-width:1180px + 24px ... a deliberate, consistent theme-wide decision". That
   double container was the M3-2 defect and is gone; the claim outlived the code it
   described, which is the same failure mode as the CTA and deletion claims found in
   cycles 1 and 2. A comment is only true until the next edit.
   Per the comp's overlay: position:absolute; inset:0; flex column;
   justify-content:center; padding:0 64px; gap:16px. It is centred VERTICALLY only.
   The previous rule added justify-self:center and text-align:center, which centred
   the copy horizontally too and pulled it away from the left edge the rest of the
   page aligns to.
   NOTE: the m-4 edit that produced this comment left a PREMATURE `*` + `/` on the
   line above, closing the comment early. Lines 64-67 were then parsed as a selector
   prelude running into the `{` below, so .hrv-t3-hero-copy was DROPPED ENTIRELY and
   the whole hero overlay was dead CSS. A comment edit deleted the rule it described.
   The mobile copy of the selector survived, so it degraded into something that reads
   like a phone-only quirk. */
.hrv-t3-hero-copy {
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    padding: 0 64px;
}

/* Kills UA/Blank default margins on the overlay's children so the flex `gap` is the
   only baseline spacing. It does NOT mean "no element may carry a margin": the comp
   gives the countdown +6px and the CTA row +8px on top of the gap, and those rules
   come later at equal specificity so they win on source order (M3-3). An earlier
   version of this comment said the margins "are removed — keeping both would double
   the spacing", which was true of the theme's invented 20px and false of the comp's
   own two values; acting on it deleted real design. */
.hrv-t3-hero-copy > * {
    margin: 0;
}

/* var(--hrv-accent-2), NOT --hrv-text-muted. The comp colours every eyebrow with
   the palette's SECOND accent; muting it dropped that accent from the page
   entirely, so a palette token that exists was rendered invisible on this page.
   12px/700 matches the comp, which the previous 13px/600 did not. */
.hrv-t3-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hrv-accent-2);
}

/* margin-bottom DELETED (M2-1). The overlay is a flex column with gap:16px, and this
   20px stacked on top of it — the comment above claimed these margins "are removed"
   while they were still here and still won by source order, producing 36px where the
   comp has 22px. A comment asserting a deletion that never happened is the same
   defect class as a docblock asserting a comp feature that does not exist. */
.hrv-t3-title {
    margin: 0;
    font-size: clamp(30px, 4.5vw, 52px);
    line-height: 1.12;   /* comp: 1.12, not 1.06 (M2-4) */
    font-weight: 700;
}

/* -------- countdown: TRANSCRIBED FROM THE COMP (S1 finding C-1) ------------- */
/* The first version was DESIGNED here rather than transcribed, on the reasoning
   that a component with no T1/T2 precedent had nothing to adapt from. That was the
   error: no precedent is a reason to read the artboard MORE closely, not a licence
   to invent. It produced 30px bare numerals in stacked columns, each with its own
   uppercase label — three labels where the comp has one, and no chip at all.
   The artboard draws: flex row, gap 8px, align-items center; three FILLED chips in
   the text colour with inverted text, 12px radius, 10px/13px padding, 20px display
   face; colon separators between them; then ONE trailing muted label. */
/* M2-1 removed a THEME-INVENTED 24px margin-bottom that stacked on the overlay gap.
   That was right. But it ALSO dropped the comp's own 6px margin-top, justified by
   "absorbed by the overlay gap" — AND THAT MECHANISM DOES NOT EXIST. Flex `gap` and
   item margins are ADDITIVE, so the comp's 16px gap + 6px margin is a deliberate 22px
   and the theme was rendering 16px (M3-3). Over-correcting a real defect past the
   comp's own values is still a defect; the invented number had to go, this one did
   not. Restored. */
.hrv-t3-countdown {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hrv-t3-countdown-chip {
    background: var(--hrv-text);
    color: var(--hrv-bg);
    border-radius: var(--hrv-radius-sm);   /* exactly the comp's 12px (m-6) */
    padding: 10px 13px;
    font-family: var(--hrv-font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* One trailing label for the whole row — "days : hrs : min" — NOT per chip. */
.hrv-t3-countdown-label {
    margin-left: 10px;
    font-size: 12.5px;
    color: var(--hrv-text-muted);
}

.hrv-t3-countdown-sep {
    font-size: 18px;
    color: var(--hrv-text-muted);
}

/* -------- CTAs: layout only, skin from components/_buttons.css ------------- */
.hrv-t3-ctas {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* flex-start, not center (m-2). This was leftover from the centred hero M-1 removed.
   It is inert TODAY only because align-items:flex-start shrink-wraps the row — which
   means it would silently re-centre the CTA the moment that changes. A rule that is
   wrong but currently harmless is a trap for the next edit, not a no-op. */
/* margin-top 8px is the comp's own value on this row (M3-3), additive with the
   overlay's 16px gap for a deliberate 24px — the same over-correction as the
   countdown's 6px. Scoped to the hero so the panel is unaffected. It sits AFTER
   `.hrv-t3-hero-copy > * { margin: 0 }`, which is the same specificity, so this wins
   on source order — the reset still kills UA margins on everything else. */
.hrv-t3-hero .hrv-t3-ctas {
    justify-content: flex-start;
    margin-top: 8px;
}

/* -------- section 2: "The harvest table" heading over the product grid ----- */
/* comp: 28px / lh 1.12 / margin-bottom 22px (M2-4). The old clamp resolved to 34px at
   every desktop width — a value the comp never states, reached by scaling a number
   nobody measured. The clamp is kept only to shrink on small screens; its CEILING is
   now the comp's actual size rather than an invented one. */
.hrv-t3-table-title {
    margin: 0 0 22px;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.12;
    font-weight: 700;
}

/* -------- section 3: bordered 2-up panel (this border IS in the comp) ------ */
.hrv-t3-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 56px;
    background: var(--hrv-surface);
    border: 1px solid var(--hrv-border);
    border-radius: var(--hrv-radius);
    overflow: hidden;
    padding: 0;
}

/* comp: the frame sits in a 20px-inset column and keeps its 14px radius (M2-4). It
   was flush to the panel edge with radius 0 — the border-radius:0 here was actively
   overriding the shared frame rule above, so the panel's own media lost the rounding
   every other frame on the page has. */
.hrv-t3-panel-media {
    aspect-ratio: 4 / 3;
    margin: 20px;
}

.hrv-t3-panel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 48px;   /* comp: 48px, not 32px (M2-4) */
}

/* Eyebrow + dashed promo callout — section 3, transcribed with C-3. The callout is
   the page's conversion mechanism and the previous version dropped it entirely.
   `width: fit-content` keeps the dashed box hugging the sentence as the comp draws
   it, rather than stretching the full column width. */
.hrv-t3-panel-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hrv-accent-2);
}

.hrv-t3-promo {
    margin: 8px 0 0;
    padding: 12px 16px;
    border: 1px dashed var(--hrv-accent);
    border-radius: var(--hrv-radius-md);   /* comp 14px = --hrv-radius-md (m4-4) */
    font-size: 14px;
    width: fit-content;
}

.hrv-t3-promo-code {
    letter-spacing: 0.08em;
}

/* comp: 24px / lh 1.12. This is the sharpest instance of M2-4 — farm-panel.phtml:12
   states "h3, display face, 24px, line-height 1.12" AS TRANSCRIPTION, and the CSS
   committed in the same change shipped 22px/1.2. The measurement was right and simply
   was not applied, which is C-2's provenance repeating one commit later. */
.hrv-t3-panel-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 700;
}

/* comp: 14.5px / lh 1.7 (M2-4). It inherited 14px/1.6 from the body. */
.hrv-t3-panel-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--hrv-text-muted);
}

/* THE HEADING AND THE GRID MUST SHARE A LEFT EDGE (S1 MAJOR). In the comp both live
   inside ONE <section id="grid" style="padding: 48px 40px 0">. In this theme they are
   SIBLINGS — the heading is a themed block inside .hrv-t3-section (which carries the
   40px inline padding) while the grid is CatalogWidget output with none, so the
   heading indented 40px and the tiles started hard against the viewport edge.
   Matching the padding here rather than wrapping both in a new container on purpose:
   a wrapper would change the page's section count, and the expectations manifest
   commits to exactly 3 sections measured from the artboard. Fixing an alignment bug
   by moving a number the gate checks would invalidate the measurement instead of
   satisfying it.
   (An earlier version ended here claiming "the mobile step below mirrors
   .hrv-t3-section's 18px" — there is no 18px on that selector at any width and no
   such step below; M3-2 deleted it. m4-1.) */
/* CORRECTED (M2-2). The previous version asserted .hrv-t3-section "carries the 40px
   inline padding" and matched 40px. IT CARRIES 24px (see the .hrv-t3-section rule
   above) — the number was remembered, not read, in the very commit whose comment
   said "checked, rather than assumed". Worse, matching a padding could never have
   worked at all: .hrv-t3-section is ALSO max-width:1180px with margin:0 auto and the
   widget block is not, so below 1244px the two boxes have different widths and no
   single padding value aligns them. The result looked right at 1440px — the width a
   single screenshot gets taken at — and sat 16px out at every tablet and small-laptop
   width. Matching the CONSTRAINT, not just the padding, is what actually aligns them. */
/* THE OUTER BLOCK ONLY. The previous version listed .block-products-list AND
   .products-grid in the same rule — but .products-grid is NESTED INSIDE
   .block-products-list, so both got 24px and the tiles indented 48px against the
   heading's 24px. MEASURED at the time: heading left 706, grid left 730, 24px apart. SUPERSEDED — M3-2 later removed the double container entirely, and both now sit at 664 (the .page-main content edge). The numbers below are kept as the record of the defect, not as a description of the current render. The fix for M2-2 reintroduced M2-2 at half the magnitude, and a markup
   gate could never see it — the HTML is identical either way. */
/* Now that .hrv-t3-section no longer re-declares the container (M3-2), the widget
   block must not either — otherwise the heading and the grid would disagree again,
   which is the M2-2 defect. Both now inherit .page-main's single container, so they
   align with each other AND with the header/footer. The only remaining job here is
   killing Blank's own list padding. */
.hrv-page-t3 .block-products-list {
    padding-left: 0;
    padding-right: 0;
}

/* ── Campaign product grid — 4-up, two rows of four ────────────────────────── */
/* WHY THIS BLOCK EXISTS AT ALL. It did not, and that was S1 finding C-2: the page
   asks CatalogWidget for EIGHT products and then carried NO column rule, so all
   eight fell to Blank's 3-up default and rendered 3+3+2 instead of the comp's 4+4.
   The expectations manifest had already recorded `repeat(4, 1fr)` from the artboard
   — the number was measured correctly and then simply never implemented.
   The provenance of the miss is worth keeping: T2's comment said the grid "is
   styled by the shared component rules", which was true for T2 ONLY BY LUCK — T2
   needs three tiles and Blank's default is three. Inheriting that sentence to a
   page needing four carried over a claim that had never actually been measured.
   Scoped to `.hrv-page-t3`, the class the layout handle puts on <body>, read from
   cms_page_view_id_harvest-days.xml rather than guessed — a reskin scoped to an
   invented body class is 100% dead CSS that still passes static review.
   THIS IS NOT JUST A COLUMN COUNT. Blank floats each item, gives it a percentage
   width, and sizes the media box with `height: 0` plus a percentage-padding ratio
   hack; an explicit height:0 BEATS aspect-ratio, so setting only
   grid-template-columns yields a tidy 4-up grid of ZERO-PIXEL-TALL images at HTTP
   200. The float/width and the padding hack must both be reset too. Carried from
   the proven block in _home.css §5 rather than re-derived. */
.hrv-page-t3 .widget-product-grid,
.hrv-page-t3 .products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;   /* comp: 18px; --hrv-gap is 16px (M2-4) */
    list-style: none;
    margin: 0;
    padding: 0;
}
/* !important IS JUSTIFIED HERE, AND THE JUSTIFICATION IS MEASURED (S4 B-3).
   This file argues against unjustified !important and that rule stands — an
   !important whose reason does not exist is a landmine. This one's reason exists and
   was proven by experiment:
     styles-l.css @media(min-width:1024px)
       .page-layout-1column .block.widget .products-grid .product-item
         { margin-left:2%; width:calc((100% - 8%) / 5) }        <- FIVE classes
   calc((100%-8%)/5) = 18.4% of a 290.5px track = 53.44px, which is EXACTLY what every
   card measured. This reset was three classes and therefore INERT: injecting it alone
   did not move the width off 53.4375px. A FOUR-class selector is ALSO insufficient —
   tested, and 4 of 8 tiles keep margin-left:5.797px because blank's nth-child variants
   outrank it too. So the cards were 53.4px slivers inside 290.5px tracks with their
   name, price and button overflowing OUTSIDE the bordered card.
   Measured after this fix: 8/8 cards 290.5px at 104.5/413/721.5/1030 in both rows. */
.hrv-page-t3 .products-grid .product-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    float: none;
}
/* CORRECTED IN CYCLE 2 (C2-1). The comment that used to sit above this block said
   Blank sizes the media box with `height: 0` plus a percentage-padding hack. THAT IS
   NOT THIS MAGENTO. A render of this very page (.cg/t3.html) emits:
       .product-image-container-306 { width: 240px; height: auto; aspect-ratio: 240/300; }
       @supports not (aspect-ratio: auto) { … padding-bottom: 125%; }
   The padding hack is the @supports FALLBACK; the live mechanism is `aspect-ratio`
   ON THE CONTAINER. Resetting only the wrapper left the container at 240/300, so
   every tile carried a ~25% dead band under a square image. The comp is 1/1 on all
   eight tiles. The environment claim was INHERITED from _home.css §5 instead of read
   from the capture that was already sitting in .cg/ — the same "inherit a comment,
   inherit an unmeasured claim" failure as C-2 itself. */
.hrv-page-t3 .products-grid .product-image-container {
    display: block;
    /* NO !important, and the old reason was fiction (M3-5). It read "beats Magento's
       inline style=width:NNNpx" — but .cg/t3.html, the capture cited eleven lines
       above, contains ZERO `style="width:`. The width comes from a GENERATED
       per-product class rule (.product-image-container-306 { width:240px }), which is
       (0,1,0) against this selector's (0,3,0). Plain declarations already win.
       An !important whose stated justification does not exist is a landmine: the next
       person can neither verify nor safely remove it. */
    width: 100%;
    aspect-ratio: 1 / 1;      /* beats the generated 240/300 container ratio */
    height: auto;
}
.hrv-page-t3 .products-grid .product-image-wrapper {
    padding: 0;   /* m4-2: (0,3,0)+ beats the generated (0,2,1); no !important needed, and !important here would also break the @supports-not padding fallback */
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    border-radius: var(--hrv-radius-sm);
}
.hrv-page-t3 .products-grid .product-image-photo {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 767px) {
    /* The 4-up campaign grid drops to 2-up before the single-column break, so a
       375px phone never renders four 60px-wide tiles. */
    .hrv-page-t3 .widget-product-grid,
    .hrv-page-t3 .products-grid .product-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* vertical only — the shell owns the gutter at every viewport (M3-2) */
    .hrv-t3-section {
        padding: 32px 0 0;
    }

    /* m4-3 AT MOBILE — caught by a real 375px RENDER, which is exactly why the
       render was owed. The desktop `.hrv-t3-hero { padding-top: 0 }` is (0,1,0) and
       so is the mobile `.hrv-t3-section` rule directly above, which is LATER in
       source — so below 768px the hero took 32px of top padding the comp does not
       have. IDENTICAL TRAP TO M4-1 (mobile section beating an explicit zero), in the
       same file, one round later; my own m4-3 fix was desktop-only without me
       noticing. Re-zeroed after the section rule.
       A DECLARATION CHECK WOULD HAVE PASSED THIS: the desktop rule was present and
       correct. Only a layout read at 375 exposed which one actually won. */
    .hrv-t3-hero {
        padding-top: 0;
    }

    .hrv-t3-hero-media {
        aspect-ratio: 4 / 3;
    }

    /* Keep the hero copy inside the frame at phone width — 64px of inline padding
       leaves almost no measure on a 375px screen. */
    .hrv-t3-hero-copy {
        padding: 0 18px;
        gap: 10px;
    }

    /* M4-1: the mobile `.hrv-t3-section { padding: 32px 0 0 }` above is (0,1,0) — a
       media query adds NO specificity — and sits LATER in source than the desktop
       `.hrv-t3-panel { padding: 0 }`, so below 768px it handed the panel 32px of
       interior top padding. Inside a rounded, bordered panel whose media child already
       carries margin:20px, the frame sat 52px from the top and 20px from the sides:
       visibly lopsided, and the comp's panel has no padding at ANY width.
       Re-zeroed here, where it is later than the section rule.
       A DESKTOP-ONLY DOM MEASUREMENT CANNOT SEE THIS — the defect lives entirely
       inside a breakpoint, which is exactly where the M3-2 restructure displaced it.
       (The orphaned comment previously here described a mobile grid-padding rule that
       the M3-2 fix deleted; the prose outlived its code, again.) */
    .hrv-t3-panel {
        padding: 0;
        grid-template-columns: 1fr;
        margin-top: 36px;
    }
}


/* ── Product tile internals — DEDUPLICATED (T3 S1 code review) ─────────────────
   THIS BLOCK USED TO IMPLEMENT THE COMP'S TILE PAGE-SCOPED, AND IT WAS RIGHT TO.
   Its predecessor transcribed the comp — name 14.5/700, price 17/700, a 36x36 round
   accent "+", footer on one row — and recorded, in this file, that the theme had
   never compared its tile to the comp and that .actions-secondary is opacity:0 yet
   STILL IN FLOW.

   I THEN RE-DERIVED ALL OF THAT FROM SCRATCH, THEME-WIDE, WITHOUT READING THIS FILE.
   The whole spec was already sitting here. That is the same mistake as hardcoding
   999px when --hrv-radius-pill already existed, one level up: READ THE SIBLING FILES
   BEFORE INVENTING WHAT THE THEME ALREADY KNOWS.

   Keeping both implementations produced two real defects, neither visible to a
   property check:

   1. TWO "+" GLYPHS. This file drew the glyph with ::before; _product-card.css draws
      it with ::after. On T3 BOTH matched, so a 36x36 button with overflow:hidden held
      two grid items and rendered a "+" with a second one clipped beneath it. The card
      probe passed throughout, because it only ever reads ::after. Caught by asking for
      both pseudo-elements and then LOOKING at the raster.

   2. AN INERT grid-area, AND IT IS THE EXACT BUG THIS BLOCK WAS WRITTEN TO RECORD.
      _product-card.css sets .product-item-inner to `display: contents` so the real
      controls can join the details grid. A `display: contents` element is not a grid
      item, so `grid-area: action` on it stopped applying. Measured, not assumed:
      INERT_GRID_AREA = true on /harvest-days, false on Home. The page still looked
      right because the theme-wide rules place the button numerically — RENDERING
      CORRECTLY BY ACCIDENT IS WHAT THIS BLOCK'S OWN COMMENT WARNED ABOUT.

   So the duplicated spec is gone and _product-card.css is the single owner of the
   tile. What remains below is only what is genuinely T3-SPECIFIC and NOT expressible
   theme-wide. */

/* The photo is a flex item of the card and must never absorb column overflow (B-1).
   Without this, .product-item-photo shrank to 156px around a 261px image inside an
   overflow:hidden anchor and clipped 40% of EVERY product image. */
.hrv-page-t3 .product-item-info .product-item-photo {
    flex-shrink: 0;
}

/* Wish List / Compare are not in T3's comp tile at ANY viewport — this is a page-level
   design decision, not a layout workaround, which is why it stays after the dedup.
   _product-card.css takes them out of flow and shows them on touch, because most pages
   DO want them; T3 does not want them at all. */
.hrv-page-t3 .product-item-inner .actions-secondary {
    display: none;
}