now draws the outline, so every cell gives up its own borders, radii and
background. Double-scoped with `.hrv-page-cart` so this wins on weight — arithmetic in
the block comment above. */
.checkout-cart-index.hrv-page-cart .cart.item .item-info > td,
.checkout-cart-index.hrv-page-cart .cart.item .item-info > td:first-child,
.checkout-cart-index.hrv-page-cart .cart.item .item-info > td:last-child,
.checkout-cart-index.hrv-page-cart .cart.item .item-actions > td,
.checkout-cart-index.hrv-page-cart .cart.item .item-actions > td:first-child,
.checkout-cart-index.hrv-page-cart .cart.item .item-actions > td:last-child {
border: 0;
border-radius: 0;
background: transparent;
}
/* THE CELL PADDING IS DELIBERATELY *NOT* DOUBLE-SCOPED, AND THAT IS LOAD-BEARING.
This is the one live declaration left over from the earlier mobile block (whose borders
and radii the reset above already overrode, which is why the rest of it was deleted).
Folding it INTO that reset list raised it from (0,4,1) to (0,5,1)/(0,6,1), and it then
beat a Blank rule it had never beaten before: Blank gives the media cell
`padding: 25px 0 10px 75px` and absolutely positions the 60px photo INTO that 75px
gutter. MEASURED at 375 with the promoted version: `.col.item` padding-left collapsed
75px -> 12px and the product name rendered UNDERNEATH the photo ("nal Harvest Crate").
At (0,4,1) it loses the media cell to Blank — which is correct — and still wins the
price/qty/subtotal strip and the actions cell. That split is what HEAD shipped and S3
approved; the A/B against HEAD is in the review notes. Do not merge this upward. */
.checkout-cart-index .cart.item .item-info > td,
.checkout-cart-index .cart.item .item-actions > td {
padding: 12px;
}
.checkout-cart-index .cart.item .item-info > td.item { flex: 0 0 100%; }
/* `.msrp` is in the same qty/price/subtotal cell group in Blank and is emitted when MSRP
("Minimum Advertised Price") is switched on. It is not emitted on this store today, so
listing it changes nothing now; without it, turning MSRP on would drop a fourth cell out
of the strip. */
.checkout-cart-index .cart.item .item-info > td.price,
.checkout-cart-index .cart.item .item-info > td.qty,
.checkout-cart-index .cart.item .item-info > td.subtotal,
.checkout-cart-index .cart.item .item-info > td.msrp {
flex: 1 1 0;
min-width: 0; /* flex items floor at min-content without this, reintroducing the sliver */
}
.checkout-cart-index .cart.item .item-actions > td { flex: 1 1 100%; }
}
/* ===========================================================================
EMPTY CART — T17.
PROVENANCE, because it decides how much of this block to trust. The first
version of it shipped INSIDE T16 as an emergency fix: T16's final gate found
the empty cart completely unstyled, and the repair was written against the
LIVE MARKUP ONLY. It was never compared to T17's artboard. This rewrite is
the first time the comp has been read, and the comp disagrees with that
draft on the single biggest decision it made.
WHAT THE COMP ACTUALLY DRAWS (design/store-theme/03-harvest-food/colors/
Wheat/pages/T17 Cart Empty.dc.html, line 29):
padding: 80px 40px 0; display:flex; flex-direction:column;
align-items:center; gap:16px; text-align:center
— a bare centred column ON THE PAGE BACKGROUND. No surface, no border, no
radius, no max-width box. THE PREVIOUS DRAFT WRAPPED ALL OF IT IN A 560px
WHITE CARD, reasoning that the populated cart's `.cart-summary` is a card so
the empty state should be one too. That reasoning is defensible and it is
still wrong: it was derived from a sibling STATE instead of from the comp
for THIS state, and the comp is the authority. The card is removed.
ONE KNOCK-ON, DECLARED RATHER THAN LEFT TO BE FOUND: `_wishlist.css` gives
the wishlist's empty state a card (surface + border + radius) built by the
same reasoning. T17 is the ONLY artboard in this theme that draws an empty
state at all, and it draws no card, so the two pages now disagree. That is
a THEME-WIDE question — do empty states get a card? — and it is raised, not
silently settled by editing a CLOSED page from inside T17.
HOW THE COMP'S HIERARCHY MAPS ONTO CORE'S MARKUP. Core's
Magento_Checkout::cart/noItems.phtml emits ONLY this (read from the pod, and
re-read from vendor to confirm there is no auth branch in it):
You have no items in your shopping cart.
Click here to continue shopping.
The comp's stack is: basket mark, then a 32px display headline, then one
muted line, then two pill CTAs. The page ALREADY HAS a 32px display
headline — `h1.page-title`, MEASURED at 32px/600 Bricolage at 1440 and 768
and 26px at 375. So the h1 plays the comp's headline SLOT — its type and
position, not its words: it still reads core's "Shopping Cart" against the
comp's "Your basket is empty", which is a text change CSS cannot make (see
the wording note below). The first plays the comp's muted line, and the
basket mark is hung on the title wrapper so it lands ABOVE the headline
exactly as the comp orders them.
The alternative — keeping the mark on `.cart-empty` — puts the headline
above the mark and inverts the comp's order.
WHY `:has()` AND NOT A NEW SCOPE CLASS. `.page-title-wrapper` is shared with
the POPULATED cart, and the empty state has no body class of its own
(`checkout-cart-index` covers both — verified on the live page). `:has()` is
the only thing in CSS that can tell the two apart. If it is unsupported the
page degrades to a left-aligned title with no mark, which is the current
behaviour, not a broken one.
COLOURS WERE MEASURED, NOT ROUNDED BY EYE. The comp mixes its own ratios
(20% / 40% / 60% of text into bg) and this theme forbids page CSS minting
ratios, so each one maps to the nearest EXISTING token — chosen by resolving
both through the browser and comparing OKLab distance, after calibrating the
instrument against a published figure (band-text on band = 12.31, reproduced
exactly). Deltas from the comp, in OKLab:
ring comp 20% -> --hrv-border dE 0.074 (border-strong 0.110)
glyph comp 40% -> --hrv-border-strong dE 0.037 (text-subtle 0.075)
copy comp 60% -> --hrv-text-muted dE 0.038 (text-subtle 0.072)
The glyph moves OFF `--hrv-text-subtle`, which the previous draft used: the
measurement puts border-strong twice as close to what the comp draws. The
ring lands slightly fainter than the comp (1.25:1 against the comp's own
1.58:1 on wheat) — it is a decorative mark, not a meaningful UI component,
so 1.4.11's 3:1 does not apply; the number is recorded so the choice is
reviewable rather than invisible.
WHAT NEEDED MARKUP, AND WHERE IT NOW LIVES. Three things in the comp were
unreachable from CSS: the two pill CTAs, the "Popular right now" grid, and the
headline WORDING. THE FIRST TWO ARE BUILT — see the CTA and section blocks
further down this same file, and Magento_Checkout/layout/checkout_cart_index.xml
for the composition. Both use core's own seams (`checkout.cart.empty.widget`
inside `.cart-empty`, and the `checkout.cart.noitems` container for the grid),
so no core template is overridden and no new one is added.
THE WORDING IS THE ONE THAT REMAINS, and it qualifies the paragraph above: the
h1 is styled as the comp's headline, but it renders core's "Shopping Cart"
where the comp reads "Your basket is empty". CSS cannot change text.
AND AN i18n CSV ROW IS NOT THE WAY OUT, which is worth saying because it is the
first thing anyone reaches for. The h1 is `page-title`, shared with the POPULATED
cart: a `"Shopping Cart","Your basket is empty"` row would retitle the page that
HAS items too, where the phrase is simply false — and it would do it in every
place that string appears. The wording needs something state-aware: a title set
on the empty branch (layout `setPageTitle` under the no-items handle, or a
ViewModel), not a translation. Not done here, and not to be read as done.
NO ACCENT COLOUR AS TEXT anywhere in this block. This file already records
accent-on-background at 2.82:1 on wheat (AA fail). Body copy is
--hrv-text-muted on --hrv-bg, MEASURED at 5.69:1, and the link's state
feedback is underline weight rather than a colour change.
=========================================================================== */
/* The comp's centred column. Every declaration the card version set —
background, border, border-radius, max-width, padding — is GONE rather than
overridden, so nothing is left to leak into a later rule. */
.checkout-cart-index .cart-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
margin: 0 auto 72px;
padding: 0;
}
/* The basket mark + the headline, as one centred stack above the copy.
`padding-top: 80px` is the comp's own figure and lands on this element
because `.page-main` contributes 0 top padding (MEASURED, not assumed). */
body.checkout-cart-index:has(.cart-empty) .page-title-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 80px;
}
/* Ring and glyph are TWO pseudo-elements because they are two different tones
in the comp (20% and 40%), and one element painted through a mask can only
carry one colour — a mask clips the element's whole rendering, border
included, so a bordered-and-masked single box loses its ring.
They are overlaid without absolute positioning: both are flex items, `order`
pulls them in front of the h1, and the glyph's `margin-top: -76px` lifts it
exactly one ring-height so the two boxes coincide. Nothing here is coupled
to the container's padding, which an absolutely positioned mark would be. */
body.checkout-cart-index:has(.cart-empty) .page-title-wrapper::before {
content: '';
order: -2;
width: 76px;
height: 76px;
border: 2px solid var(--hrv-border);
border-radius: var(--hrv-radius-circle);
box-sizing: border-box;
}
/* The glyph. A MASK, not a background-image, so it takes a token and tracks
every palette instead of baking a hex into the data URI. The stroke inside
the URI is opaque black only because a mask reads ALPHA: opaque = show, and
the paint comes from `background-color`.
@supports IS LOAD-BEARING. Without it a browser with no masking renders this
as a 76x76 SOLID BLOCK. Gated, such a browser gets the empty ring, which is
a coherent mark rather than a defect. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
body.checkout-cart-index:has(.cart-empty) .page-title-wrapper::after {
content: '';
order: -1;
width: 76px;
height: 76px;
margin-top: -76px;
margin-bottom: 16px;
background-color: var(--hrv-border-strong);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.7 9.3a2 2 0 0 1-2 1.7H6.7a2 2 0 0 1-2-1.7L3 9Z'/%3E%3Cpath d='m8 9 2.2-5M16 9l-2.2-5'/%3E%3Cpath d='M9.6 13v3.4M14.4 13v3.4'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.7 9.3a2 2 0 0 1-2 1.7H6.7a2 2 0 0 1-2-1.7L3 9Z'/%3E%3Cpath d='m8 9 2.2-5M16 9l-2.2-5'/%3E%3Cpath d='M9.6 13v3.4M14.4 13v3.4'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}
}
/* Only the two properties that differ from what the page already renders.
font-size is NOT set: MEASURED at 32px desktop / 26px at 375, which is the
comp's 32px and a mobile step the comp does not specify but Blank already
provides. Re-declaring it would freeze the mobile size at the desktop one. */
body.checkout-cart-index:has(.cart-empty) .page-title-wrapper .page-title {
font-weight: 700;
line-height: 1.12;
text-wrap: balance;
margin: 0 0 16px;
}
/* `:first-of-type` / `:last-of-type` rather than `:first-child` — the first
ELEMENT child of `.cart-empty` is the first
, but keying on element type
survives core's `checkout_cart_empty_widget` container being filled, which
`:first-child` would not.
The first
is the comp's muted supporting line (14.5px, 46ch measure).
The WORDS are core's and are not changed here; changing them is a template
and i18n concern. */
.checkout-cart-index .cart-empty p:first-of-type {
font-size: 14.5px;
color: var(--hrv-text-muted);
max-width: 46ch;
margin: 0;
}
/* The second
sits where the comp puts its CTA row, and carries the comp's
8px offset. The container's 16px gap plus this 8px reproduces the comp's
16 + 8 exactly. */
.checkout-cart-index .cart-empty p:last-of-type {
font-size: 14.5px;
color: var(--hrv-text-muted);
margin: 8px 0 0;
}
/* FALLBACK STYLING ONLY — this link is normally NOT VISIBLE.
The rule above hides core's "Click here to continue shopping." whenever the CTA
pills are present, because they point at the same destination and the comp draws
only one control. These declarations therefore apply exactly in the case that
rule does not match: the layout failed to merge and the pills are absent, leaving
the inline "here" as the page's only way out. Styling it as a strong underlined
link rather than a pill is deliberate for that case — "Click [ HERE ] to continue
shopping." reads worse than the link it would replace. It is NOT faked with a
`content:` string either; a CSS string cannot go through `__()` and would be
untranslatable in de_DE / pl_PL. */
.checkout-cart-index .cart-empty p a {
color: var(--hrv-text);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Hover/focus feedback is UNDERLINE WEIGHT, not colour — see the AA note in
the block comment. `_buttons.css` owns no bare `.cart-empty a` selector, so
without this the link would have no state feedback at all, which is the
defect-by-omission this file already recorded on the line-item name link. */
.checkout-cart-index .cart-empty p a:hover,
.checkout-cart-index .cart-empty p a:focus-visible {
text-decoration-thickness: 3px;
}
/* ---------------------------------------------------------------------------
T17 CTA PAIR. Markup comes from Magento_Checkout/layout/checkout_cart_index.xml
(two Html\Link blocks in a
) — that file carries why it is composition and
not a template.
THE BUTTON IS NOT RE-DECLARED HERE. Each link carries `action primary` /
`action secondary`, so `_buttons.css` supplies the whole system: 13px 28px
padding (already exactly the comp's), inline-flex centring, the accent fill
with --hrv-accent-text, the outline variant, hover, focus, and the Blank
(0,2,1) radius repair. Only the three properties where the comp genuinely
differs from the theme's button are stated below. T15 shipped a duplicated
component beside the one that already existed; this is the opposite move.
--------------------------------------------------------------------------- */
/* NO `order` REVERSAL HERE ANY MORE. An earlier build hung this off core's
`checkout_cart_empty_widget`, which renders BEFORE both paragraphs, and flipped it
back visually with `order: 1`. That left the DOM reading [CTAs][copy] while the page
showed [copy][CTAs] — screen-reader and tab order reaching the buttons before the
sentence that explains them (WCAG 1.3.2, 2.4.3). The layout now attaches the
container to `shopping.cart.table.after`, which vendor's noItems.phtml renders
INSIDE .cart-empty after both paragraphs, so the source order is already the comp's
and the sequence needs no correcting.
The is a flex item of .cart-empty, so the container's 16px gap plus this 8px
reproduces the comp's 16 + 8 exactly — the same arithmetic as the paragraph above. */
.checkout-cart-index .cart-empty .hrv-empty-actions {
display: flex;
gap: 12px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
/* MEASURED, NOT PRECAUTIONARY. Blank ships `ul > li { margin-bottom: 10px }`, and the
first build of this row inherited it: the measured 56px around a 46px pill,
i.e. 10px of dead space hanging under the CTAs and pushing everything below them.
The pills themselves looked perfect in the screenshot — only the container's box
showed it. This is the reason the row's own height is worth measuring rather than
eyeballing: `list-style: none` above removes the marker, not the margin. */
.checkout-cart-index .cart-empty .hrv-empty-actions > li {
margin: 0;
}
/* The comp's pill is 999px / 15px / 700 against the theme button's 14px radius,
14px, 600. Three properties, page-scoped: the pill-vs-14px question is a
THEME-WIDE decision recorded in _buttons.css's docblock and is not settled from
inside T17.
Weight: (0,4,0) here against `a.action.primary` (0,2,1) in _buttons.css, so this
wins on specificity rather than relying on source order. */
.checkout-cart-index .cart-empty .hrv-empty-actions .hrv-empty-cta {
border-radius: var(--hrv-radius-pill);
font-size: 15px;
font-weight: 700;
/* STILL NOT REDUNDANT, AND NOT FOR THE REASON THE OLD COMMENT GAVE — see the history
note below. The theme-wide repair that shipped in _buttons.css added the `a.`
qualifier to the SECONDARY colour rule only, so `a.action.secondary` no longer needs
help here; `a.action.primary` still does, because the base rule in that file lists
`a.action.primary` (0,2,1) with `border: 1px solid transparent` while the primary
colour rule is only `.action.primary` (0,2,0). Removing this line was TRIED, DEPLOYED
AND MEASURED: the primary's computed border-top-color fell to rgba(0,0,0,0) and the
rendered pill changed — 604 differing pixels at 1440 / 586 at 375, max channel delta
52, in a bbox exactly the size of this button. Invisible in the fill, visible on the
antialiased curve of a 999px radius. Retiring it needs `a.action.primary` added to
_buttons.css's primary colour rule, which is a theme-wide change with its own
verification pass — filed, not smuggled in here. */
border-color: var(--hrv-accent);
}
/* THE HOVER STATE HAD TO FOLLOW, because the repair above outranks it.
`_buttons.css` darkens the primary on hover to --hrv-accent-hover on BOTH
background and border-color. Its `.action.primary:hover` is (0,3,0); the rule
above is (0,4,0) and carries no pseudo-class, so it applies in the hover state
too and pinned the border at --hrv-accent while the fill darkened underneath:
a lighter ring around a darker pill. A specificity repair inherits every state
of the thing it outranks.
MEASURED THIS ROUND, ON BOTH CONTROLS. An S4 pass proposed keeping this rule for a
DIFFERENT reason — that `_buttons.css`'s `.action.secondary:hover` sets background and
colour but not border-colour — and concluded it was therefore load-bearing for the
secondary only. That reasoning names a contest this rule never has: the winner without
it is the (0,4,0) rule ABOVE, not anything in _buttons.css. Removing the declaration from
the DEPLOYED sheet and forcing :hover by CDP (forcer control moved in every run):
WITHOUT primary border-top-color rgb(192,138,45) -> rgb(192,138,45)
secondary border-top-color rgb(192,138,45) -> rgb(192,138,45)
changedProps on both: backgroundColor ONLY — the fill darkens alone
WITH both -> oklab(0.570116 0.0242935 0.102407)
So it is load-bearing for BOTH buttons, for the reason at the top of this block.
`--hrv-accent-hover` is `color-mix(in oklab, #C08A2D 85%, black)`, which Chrome reports
as `oklab(...)` and NEVER as rgb — an assertion written against an rgb() figure would be
comparing to a value this engine cannot produce. */
.checkout-cart-index .cart-empty .hrv-empty-actions .hrv-empty-cta:hover,
.checkout-cart-index .cart-empty .hrv-empty-actions .hrv-empty-cta:focus-visible {
border-color: var(--hrv-accent-hover);
}
/* WHY border-color IS RESTATED ABOVE — HALF OF THIS IS NOW HISTORY, HALF IS STILL LIVE.
`_buttons.css`'s base rule is element-qualified (`a.action.primary`, `a.action.secondary`,
(0,2,1), `border: 1px solid transparent`) while its colour rules are not (`.action.primary`
/ `.action.secondary`, (0,2,0)). On an the base rule wins, so anchor-based buttons in
this theme got a transparent border — invisible on a filled primary, and on the outline
secondary the difference between a bordered pill and bare text. T17 was the first page to
render one prominently.
HISTORY: the SECONDARY half of that theme-wide repair has shipped — `_buttons.css`'s
secondary colour rule now carries `a.action.secondary`, so this page no longer props it up
and this block no longer asks for a fix that exists.
STILL LIVE: the PRIMARY half has NOT. The primary colour rule is still only
`.action.primary`, so `a.action.primary` keeps the transparent border theme-wide. Retiring
the restatement above was TRIED, DEPLOYED AND MEASURED here, and it is not a no-op: the
primary's computed border-top-color fell to rgba(0,0,0,0) and the pill's RENDERED PIXELS
changed — 604 differing pixels at 1440 / 586 at 375, max channel delta 52, in a bbox
exactly this button's 182x46. The fill hides it dead-centre; the antialiased curve of a
999px radius does not. Zero geometry moved and the whole-document snapshot diff was clean,
which is precisely why a computed-value check alone would have called the removal safe.
So the restatement stays until `a.action.primary` is added to _buttons.css's primary colour
rule — a theme-wide visual change owing its own verification pass over every page that
renders an anchor primary, which is not a side effect of a cart task. Fixed where it ships,
raised where it belongs — the second half of the same raise. */
/* AA — THE COMP'S SECONDARY LABEL COLOUR CANNOT SHIP AS DRAWN.
The comp paints "Sign in" in var(--ac) on the page background. MEASURED across
every palette that ships (canvas-resolved, instrument calibrated against
_derived.css's published 12.31 first), for a 15px/700 label — which is NOT WCAG
large text, so 4.5:1 applies:
accent on bg wheat 2.82 FAIL · honey 4.05 FAIL · basil 4.62 · tomato 4.55 · plum 6.88
accent-hover on bg wheat 4.21 STILL FAIL · honey 5.80 · basil 6.54 · tomato 6.42 · plum 9.11
Wheat is the DEFAULT palette and the one this task ships, so the comp's own
colour fails on the storefront it was drawn for, and the obvious darker token
does not rescue it either. The label therefore takes --hrv-text (15.34:1 on
wheat, 14.75-15.55 across the set) while the BORDER keeps the comp's accent, so
the control still reads as the accent-outlined pill the comp draws.
PAGE-SCOPED ON PURPOSE. `.action.secondary` carries the accent label theme-wide,
so this is a systemic component question — does the theme need an accent variant
that is legible as text on --hrv-bg? — and _derived.css already routes exactly
that class of question to design rather than settling it inside one page's task.
Fixed where it ships; raised where it belongs.
The border is accent-on-bg too (2.82 on wheat, under 1.4.11's 3:1 for UI
component boundaries). Left as the comp draws it: the control is identified by
its label, which is now high-contrast, and the border is emphasis rather than the
sole affordance. Recorded so the judgement is reviewable instead of invisible.
Hover: this rule is (0,5,0) and `_buttons.css`'s `.action.secondary:hover` is
(0,3,0), so the label stays --hrv-text on hover rather than moving to
--hrv-accent-hover (4.21 on wheat, also failing). Feedback survives as the
component's accent-tint background, which this file does not touch. */
.checkout-cart-index .cart-empty .hrv-empty-actions .action.secondary {
color: var(--hrv-text);
}
/* Core's own CTA is the word "here" inside "Click here to continue shopping." —
pointing at the SAME base URL the "Browse the aisles" pill now does. Two
controls, one destination, and the comp draws only one; the sentence goes.
CONDITIONAL ON THE PILLS ACTUALLY BEING THERE, deliberately. If the layout ever
fails to merge (a renamed container, a disabled module), :has() does not match,
the sentence stays, and the page still has a way out. A plain `display: none`
would turn one silent failure into a dead end. Nothing is lost to a screen
reader either — the destination survives under a better label. */
.checkout-cart-index .cart-empty:has(.hrv-empty-actions) p:last-of-type {
display: none;
}
/* ---------------------------------------------------------------------------
T17 "POPULAR RIGHT NOW". Block and collection are wired in the layout XML; read
the docblock there for why Bestsellers rather than a CatalogWidget.
The block renders nothing on a store with no order history — its own deliberate
guard, so a heading never appears over an empty grid. This tenant HAS order
history, so the section renders four cards and everything below is measured
against a live render, not reasoned about.
THE CARD AND THE GRID ARE NOT RE-DECLARED HERE. `_product-card.css` owns the
shell, the card width, the media sizing and the columns for this markup. What
remains below is only what that component cannot supply — the heading type and
the section's measure — because every `.hrv-home-*` rule in _home.css is scoped
`.cms-index-index.hrv-page-home`.
--------------------------------------------------------------------------- */
.checkout-cart-index .hrv-home-headrow {
margin: 0 0 20px;
text-align: center;
}
.checkout-cart-index .hrv-home-title {
font-family: var(--hrv-font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.12;
margin: 0;
}
/* The comp caps this row at 1180px and centres it. No top margin: .cart-empty's
own 72px bottom margin IS the comp's 72px gap between the two, and a second one
would double it. */
.checkout-cart-index .widget-product-grid {
max-width: 1180px;
margin: 0 auto;
padding: 0;
list-style: none;
}
/* NO BOTTOM MARGIN IS SET HERE. An earlier 72px had no source in the comp — it was
symmetry with the section's top gap — and it measured 111px of space below the row
against the comp's 64px, which the footer's own top margin already provides. A
figure invented for balance is still an invented figure. */
@media (max-width: 767px) {
/* The comp has no mobile artboard, so only the one figure that does not
survive the smaller canvas is changed: 80px of dead space above the mark
is most of a 375-wide viewport's first screen. Type is deliberately NOT
touched — the h1 already steps to 26px here on its own, and the copy is
14.5px body text at both sizes. */
body.checkout-cart-index:has(.cart-empty) .page-title-wrapper {
padding-top: 48px;
}
.checkout-cart-index .cart-empty {
margin-bottom: 48px;
}
/* Two 28px-padded pills side by side do not fit a 343px column. Wrapping
rather than stacking, so the pair still reads as one row where it fits. */
.checkout-cart-index .cart-empty .hrv-empty-actions {
flex-wrap: wrap;
justify-content: center;
}
}