/** * Harvest — T4 Category Grid (PLP). * * Scoped to BOTH `.catalog-category-view` (the real core body class for the * catalog/category/view action) and our own `.hrv-page-category` hook, so nothing * here can bleed onto another route. Every colour is an --hrv-* token: no hex, so * all 5 palettes work with no rebuild. * * Comp: design/store-theme/03-harvest-food/colors//pages/"T4 Category Grid.dc.html" * - `grid-template-columns: 240px 1fr` — 240px filter rail + main column * - `repeat(3, 1fr)` product grid, 1/1 media * - rail groups: Aisles / Origin / Diet & label, with a "Clear all" link * - sort control on the toolbar row ("Freshest first / Price per L / Best rated") * - bottom "About this aisle" description card * * IMPORTANT — the native float/width reset. Magento/blank still lays this page out * with float-era rules (`.column.main`/`.sidebar` get percentage `width` + `float`, * and `.columns` carries a clearfix ::before/::after). Dropping a grid on top * WITHOUT neutralising those produces a collapsed sliver rail or a clearfix box * counted as a grid item — it passes static review and only shows up in a live * measurement. Those resets are therefore load-bearing, not tidying. */ /* ═════════════════════════════ Page shell: rail + main ═════════════════════ The float/width/clearfix resets live ONCE in components/_layout-columns.css (opted into by the `hrv-cols` body class), because T5, search and the account pages need the identical reset and page-local copies drift. This page therefore declares only its own TRACK SIZES — the comp's 240px rail + fluid main. `sidebar-additional` is removed in layout XML, not hidden here: hiding an unknown payload with display:none can make real CMS/promo content unreachable. */ .catalog-category-view.hrv-page-category .columns { grid-template-columns: 240px 1fr; } /* ═════════════════════════════ Page title + breadcrumbs ════════════════════ */ .catalog-category-view.hrv-page-category .page-title-wrapper .page-title { font-family: var(--hrv-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; } /* ═════════════════════════════ Toolbar (sort / limit / view) ═══════════════ */ .catalog-category-view.hrv-page-category .toolbar-products { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: transparent; padding: 0; margin: 0 0 16px; } .catalog-category-view.hrv-page-category .toolbar-products .toolbar-sorter { display: flex; align-items: center; gap: 8px; margin: 0; } .catalog-category-view.hrv-page-category .toolbar-products .sorter-label, .catalog-category-view.hrv-page-category .toolbar-products .toolbar-amount { font-size: 13px; color: var(--hrv-text-muted); } .catalog-category-view.hrv-page-category .toolbar-products select { font-family: var(--hrv-font-body); font-size: 13.5px; color: var(--hrv-text); background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: var(--hrv-radius-md); padding: 9px 12px; } .catalog-category-view.hrv-page-category .toolbar-products select:focus { outline: 2px solid var(--hrv-focus-ring); outline-offset: 1px; } /* ═════════════════════════════ Product grid — 3 up ════════════════════════ */ .catalog-category-view.hrv-page-category .products-grid .products.list.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hrv-gap); margin: 0; padding: 0; list-style: none; } /* Blank floats each `.item.product` and gives it a percentage width — both must go or the grid tracks are ignored. */ .catalog-category-view.hrv-page-category .products-grid .products.list.items > .item.product { width: auto; margin: 0; padding: 0; float: none; } /* Comp media is a 1/1 square. */ .catalog-category-view.hrv-page-category .products-grid .product-item-photo { display: block; width: 100%; } /* `.product-image-container` carries an INLINE `style="width:NNNpx"` from Magento's image helper, which beats any class rule — hence !important. */ .catalog-category-view.hrv-page-category .products-grid .product-image-container { display: block; width: 100% !important; } /* Blank sizes this box with `height: 0` + a percentage `padding-bottom` ratio hack. BOTH must go: an explicit `height: 0` BEATS `aspect-ratio`, so killing only the padding collapses every product image to 0px tall — invisible grid, HTTP 200. (Missed by an earlier harness that emulated the padding but not the height.) */ .catalog-category-view.hrv-page-category .products-grid .product-image-wrapper { padding: 0 !important; height: auto !important; aspect-ratio: 1 / 1; display: block; overflow: hidden; border-radius: var(--hrv-radius-sm); } .catalog-category-view.hrv-page-category .products-grid .product-image-photo { position: static; width: 100%; height: 100%; object-fit: cover; } /* ═════════════════════════════ Pagination ══════════════════════════════════ */ .catalog-category-view.hrv-page-category .pages .items { display: flex; gap: 6px; align-items: center; justify-content: center; list-style: none; margin: 22px 0 0; padding: 0; } .catalog-category-view.hrv-page-category .pages .item { margin: 0; } .catalog-category-view.hrv-page-category .pages a.page, .catalog-category-view.hrv-page-category .pages strong.page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--hrv-border); border-radius: var(--hrv-radius-md); font-size: 13.5px; text-decoration: none; color: var(--hrv-text); } .catalog-category-view.hrv-page-category .pages strong.page { background: var(--hrv-accent); border-color: var(--hrv-accent); color: var(--hrv-accent-text); } /* ═════════════════════════════ Keyboard focus ══════════════════════════════ These are the page's primary navigation controls and they are restyled with `text-decoration: none`, so an inherited/reset outline would leave keyboard focus invisible. Declare it explicitly rather than relying on inheritance. */ .catalog-category-view.hrv-page-category .pages a.page:focus-visible, .catalog-category-view.hrv-page-category .products-grid .product-item-link:focus-visible { outline: 2px solid var(--hrv-focus-ring); outline-offset: 2px; border-radius: var(--hrv-radius-sm); } /* ═════════════════════════════ "About this aisle" outro ════════════════════ */ /* Card styling hangs off the INNER `.category-description`, which exists only when the category actually has a description. A `:empty` guard on the outer container does NOT work — :empty does not match an element containing whitespace, and Magento's container renders newlines/indentation, leaving an empty bordered card. */ .catalog-category-view.hrv-page-category .hrv-category-outro > .category-description { background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: var(--hrv-radius); padding: 22px 24px; margin: 28px 0 0; color: var(--hrv-text-muted); font-size: 14px; line-height: 1.7; } /* ═════════════════════════════ Responsive ══════════════════════════════════ The dedicated Mobile/Tablet/Desktop verification tasks own the full sweep; these are the baseline reflows so the page never scrolls horizontally at 375/768. */ @media (max-width: 1023px) { .catalog-category-view.hrv-page-category .products-grid .products.list.items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { /* The page MUST re-declare its own single-column track here. The shared mobile rule in _layout-columns.css is `.hrv-cols .columns` (0,2,0) while this page's desktop track is `.catalog-category-view.hrv-page-category .columns` (0,3,0) — and a media query adds NO specificity, so the shared rule loses and the 240px rail track would survive on phones, squeezing the main column to 240px inside a 335px viewport (measured: main 240px, product images 85px — no overflow, so an overflow-only check misses it entirely). Rule of thumb: whoever declares the tracks owns every breakpoint of them. */ .catalog-category-view.hrv-page-category .columns { grid-template-columns: 1fr; } /* Column stacking itself is inherited from components/_layout-columns.css. Magento_LayeredNavigation's own styles hide `.filter-options` below 768px unless `.block.filter` carries `.active` (its mobile accordion). Since the rail here stacks as plain content with no drawer JS, that would render an EMPTY filter card on every phone — so force the options visible. */ .catalog-category-view.hrv-page-category .products-grid .products.list.items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* THE 44px TOUCH FLOOR THAT WAS HERE NOW LIVES IN components/_toolbar.css, inside that file's own `@media (max-width: 767px)` block, beside the 39px desktop floor it has to stay above. It is MOVED, not dropped: the computed value at 375 is unchanged (44.00, re-measured on /accessories.html and /cheese-charcuterie.html after the move). Why it could not stay here: this rule was (0,3,1) and a media query adds no specificity, so when register #19 gave `select` a theme-wide `min-height: 46px` this one kept winning at 375 and turned from a FLOOR into a CAP — 44px on touch against 46px on desktop, the inverse of what its comment said it was for. A rule whose correctness depends on a number declared in a different component, in a different file, is a rule that gets inverted by an edit nobody thought was near it. The component that owns the toolbar owns both floors. */ } /* No 479px breakpoint: the theme's documented scale is 1023 / 767 only, and the card component already reads well 2-up at 375. Adding a fourth breakpoint here would fork the scale for one page. */ /* ═════════════ Toolbar sorter — the comp's pill ════════════════════════════ Comp: a 999px pill, padding 9px 14px, 13.5px, 1px border, --sf background. Shipped: radius 14px, padding 9px 12px. Font size and border were already right, so this is two properties, measured rather than restyled wholesale. */ .catalog-category-view.hrv-page-category .toolbar-sorter #sorter { border-radius: var(--hrv-radius-pill); padding: 9px 14px; } /* DECLARED DEVIATIONS — the comp shows NEITHER of these controls, and BOTH ARE KEPT. .modes (grid/list) and .sorter-action (asc/desc) are absent from the artboard, and the obvious move is display:none to match it. *** THE GRID/LIST SWITCHER IS HOW A SHOPPER REACHES T5 "Category List". *** Hiding it to match a static artboard would make an entire page of this sprint unreachable from the storefront - a functional regression traded for a pixel. The sort-direction toggle is the only way to reverse an order and has the same character. An artboard cannot show a control's absence and its consequences at the same time; that is what this check is for. Both stay, styled to the theme, and the deviation is written down instead of being silently taken either way. */ /* ═══════════════ T5 "Category List" — the list-mode row ═══════════════════ Reached from the grid/list switcher kept in T4 (href is "#"; the toolbar JS navigates, verified by clicking it). THE COMP: each product is a three-column row — 200px 1fr 200px — a 1/1 image, then name + rating + description, then a right column holding price, "Add to basket" and "Save for later". WHAT SHIPPED, MEASURED: `.product-item` display:table at the full 1108px, `.product-item-info` still carrying the GRID CARD's 240px width, and the image rendering 30x30 — a grey stub — with ~868px of dead space to the right of every row. THE 30px WAS NEITHER A THEME VALUE NOR A SMALL FILE. Magento served a real image (view.xml defines category_page_list at 300x400; naturalWidth confirmed it live). Luma's styles-m.css lays list mode out as a TABLE and gives `.products-list .product-item-photo` `width: 1%` — the shrink-to-fit trick — while the theme's card rules collapsed the image inside that cell to 0x0, leaving a padding-only stub. Enumerated with a cascade probe, not guessed: the only two width rules matching that element are Luma's `1%` and `30%`, both at (0,2,0), neither ours. *** A NUMBER THAT MATCHES NOTHING IN YOUR OWN FILES IS COMING FROM THE PARENT THEME. *** I CHECKED THE DOM BEFORE WRITING THE GRID, AND MY FIRST DRAFT WAS WRONG. `.product-item-info` has only TWO children — `.product-item-photo` and `.product-item-details` — so a three-column grid on it would leave the third column empty. The price and the actions live INSIDE details. `display: contents` on details lets the real elements join the row grid, and each is then placed explicitly. That is the same technique as the product card, including its known trap: a `display: contents` element is not a grid item, so nothing may rely on a grid-area set on details itself. */ .catalog-category-view.hrv-page-category .products-list .product-item { display: block; width: auto; border-bottom: 1px solid var(--hrv-border); padding: 0 0 22px; margin: 0 0 22px; } .catalog-category-view.hrv-page-category .products-list .product-item:last-child { border-bottom: 0; margin-bottom: 0; } /* The row. `.product-item-info` is the CARD SHELL in grid mode, so its background, border, radius, padding and fixed height are cleared — a list row is not a card. */ .catalog-category-view.hrv-page-category .products-list .product-item-info { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; grid-template-rows: auto; column-gap: 24px; row-gap: 8px; align-items: start; width: auto; max-width: none; height: auto; padding: 0; border: 0; background: none; border-radius: 0; } /* Column 1 — a real 200px 1/1 frame, defeating Luma's 1% table cell. */ .catalog-category-view.hrv-page-category .products-list .product-item-photo { grid-column: 1; grid-row: 1 / span 3; display: block; width: 200px; max-width: none; padding: 0; aspect-ratio: 1 / 1; border-radius: var(--hrv-radius-md); overflow: hidden; } /* Magento emits a per-product inline rule sizing .product-image-container, and a padding-bottom aspect hack on the wrapper. Both fight a real frame, so both are overridden here — this is the one place !important earns its keep, because the competing declaration is generated per product id and cannot be out-specified from a stylesheet. */ .catalog-category-view.hrv-page-category .products-list .product-item-photo .product-image-container, .catalog-category-view.hrv-page-category .products-list .product-item-photo .product-image-wrapper { display: block; width: 100% !important; height: 100%; padding: 0 !important; } .catalog-category-view.hrv-page-category .products-list .product-item-photo .product-image-photo { position: static; width: 100%; height: 100%; object-fit: cover; } /* Let the real elements join the row grid. */ .catalog-category-view.hrv-page-category .products-list .product-item-details, .catalog-category-view.hrv-page-category .products-list .product-item-inner { display: contents; } /* Column 2 — name then description. */ .catalog-category-view.hrv-page-category .products-list .product-item-name { grid-column: 2; grid-row: 1; margin: 0; } .catalog-category-view.hrv-page-category .products-list .product-item-name .product-item-link { font-family: var(--hrv-font-display); font-size: 18px; font-weight: 700; color: var(--hrv-text); text-decoration: none; } .catalog-category-view.hrv-page-category .products-list .product-item-description { grid-column: 2; grid-row: 2 / span 2; align-self: start; font-size: 14px; line-height: 1.55; color: var(--hrv-text-muted); margin: 0; max-width: 62ch; } .catalog-category-view.hrv-page-category .products-list .product-item-description .action.more { display: inline-block; margin-top: 6px; color: var(--hrv-accent); font-weight: 600; text-decoration: none; } /* Column 3 — price above the actions. In GRID mode the theme deliberately puts the price and a round "+" on one row; a list row has the width for the labelled button the comp shows, so the grid-mode placement is undone rather than inherited. */ .catalog-category-view.hrv-page-category .products-list .price-box { grid-column: 3; grid-row: 1; margin: 0; justify-self: start; } .catalog-category-view.hrv-page-category .products-list .product-item-actions { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; } .catalog-category-view.hrv-page-category .products-list .actions-primary .action.tocart { width: auto; height: auto; min-height: 40px; padding: 10px 18px; border-radius: var(--hrv-radius-md); font-size: 14px; font-weight: 700; } /* The card's icon-only treatment clips this label; a list row shows the words. */ .catalog-category-view.hrv-page-category .products-list .actions-primary .action.tocart > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .catalog-category-view.hrv-page-category .products-list .actions-primary .action.tocart::after { content: none; } /* Wish List / Compare are hidden on T3's tile and pinned over the image on the grid card. In a list row the comp shows a labelled "Save for later", so they sit in flow here. */ .catalog-category-view.hrv-page-category .products-list .actions-secondary { position: static; display: flex; flex-direction: column; gap: 4px; opacity: 1; } /* ── T5 list row, below desktop ──────────────────────────────────────────────── THE THREE-COLUMN ROW HAS NO BUSINESS BELOW ~1024px AND I ALMOST SHIPPED IT THAT WAY. 200px + 200px of fixed track plus gaps leaves nothing for the middle. Measured before this block existed: 1440 -> 200px 660px 200px fine 768 -> 200px 4px 200px name and description crushed to 4px 375 -> 200px 0px 200px middle track GONE, 89px page overflow, 50 elements wider than the viewport Caught only because the T4 row-pin taught me to check every width rather than the one the rule was written for. A FIXED-TRACK GRID IS A DESKTOP STATEMENT; IT NEEDS A COLLAPSE, NOT A SMALLER COPY OF ITSELF. */ @media (max-width: 1023px) { /* Two columns: a smaller frame, everything else stacked beside it. */ .catalog-category-view.hrv-page-category .products-list .product-item-info { grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; } .catalog-category-view.hrv-page-category .products-list .product-item-photo { grid-column: 1; grid-row: 1 / span 4; width: 150px; } .catalog-category-view.hrv-page-category .products-list .product-item-name { grid-column: 2; grid-row: 1; } .catalog-category-view.hrv-page-category .products-list .product-item-description { grid-column: 2; grid-row: 2; } .catalog-category-view.hrv-page-category .products-list .price-box { grid-column: 2; grid-row: 3; } .catalog-category-view.hrv-page-category .products-list .product-item-actions { grid-column: 2; grid-row: 4; flex-direction: row; align-items: center; flex-wrap: wrap; } } @media (max-width: 599px) { /* One column. At this width even a 150px frame beside text leaves too little for a product name to break sensibly, so the image takes its own row. */ .catalog-category-view.hrv-page-category .products-list .product-item-info { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .catalog-category-view.hrv-page-category .products-list .product-item-photo { grid-column: 1; grid-row: 1; width: 100%; max-width: 260px; } .catalog-category-view.hrv-page-category .products-list .product-item-name { grid-column: 1; grid-row: 2; } .catalog-category-view.hrv-page-category .products-list .product-item-description { grid-column: 1; grid-row: 3; } .catalog-category-view.hrv-page-category .products-list .price-box { grid-column: 1; grid-row: 4; } .catalog-category-view.hrv-page-category .products-list .product-item-actions { grid-column: 1; grid-row: 5; } }