/* ========================================================================== cart-total.css — the cart subtotal under the header cart icon. Owner reference: cart icon, and the sum beneath it, with the item count in a circle at the icon's corner. This sheet turns the existing one-row cart button into that two-row button. Markup added by header.php is ONE span (.header-cart__total); everything else here is layout on elements that already exist. -------------------------------------------------------------------------- SPECIFICITY ARITHMETIC (CLAUDE.md Trap 1 — read the real numbers, do not assume the rule applies) Every existing rule that sets .header-cart geometry is a SINGLE class: main.css:215 .header-account, .header-cart (0,1,0) main.css:217 .header-cart__count (0,1,0) main.css:218 .header-cart__count.is-empty (0,2,0) nav.css:44 .header-cart (0,1,0) nav.css:53 .header-account, .header-cart (0,1,0) nav.css:72 <=1023 .header-account, .header-cart (0,1,0) nav.css:82 <=1023 .header-cart__count (0,1,0) cart-widget.css:8 .header-cart (0,1,0) This sheet is enqueued by inc/cart-total.php. functions.php globs the inc folder ALPHABETICALLY, so cart-total.css is enqueued BEFORE nav.css (c < n) — at equal specificity nav.css wins on source order. So source order cannot be relied on and every geometry rule below is written as .site-header .header-cart (0,2,0) which beats all eight rules above on specificity alone, at any source order. (.site-header genuinely sits above it in the DOM: header.php renders header.site-header > .container.site-header__inner > .site-header__actions > a.header-cart. Verified against http://og.local/ 2026-08-15.) The one rule that must NOT be beaten is main.css:218 `.header-cart__count.is-empty { display:none }` at (0,2,0). Nothing below sets `display` on .header-cart__count, so the empty badge stays hidden. No WooCommerce-core or plugin sheet can collide here: .header-cart and .header-cart__* are theme-only class names, they exist in no vendor CSS. -------------------------------------------------------------------------- THE CONTAINER-DISPLAY TRAP — checked, not assumed .header-cart is ALREADY display:inline-flex (main.css:215), so its children are already flex items; this sheet only changes flex-direction. Before relying on that: grepped every sheet in assets/css/ for a ::before/::after on .header-cart or .header-cart__* — ZERO hits (2026-08-15). So there is no pseudo-element that a direction change could promote into a real box. This is the check that was skipped on the account page, where a WooCommerce clearfix ::before/::after became real grid items and stood two cards on a diagonal. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · The cart button becomes two rows: icon on top, sum beneath. flex-direction:column is what makes the button's width max(icon, sum) instead of icon + gap + sum. That distinction is the whole reason this fits on a phone — see the space arithmetic in section 3. Consequence that has to be handled: with a column direction the count badge would become a THIRD row (icon / count / sum). So the badge is taken out of flow at every width in section 4 — which is also exactly what the owner's reference shows (count in a circle at the icon's corner). -------------------------------------------------------------------------- */ .site-header .header-cart { flex-direction: column; /* align-items:center is already set by main.css:215; justify-content:center is only set below 1024px by nav.css:73, so state it here for >=1024px too or the two rows would sit flex-start in the 44px min-height box. */ justify-content: center; align-items: center; gap: 2px; /* --space-2: the one token allowed for optical nudges. 4px pushed the button past 52px tall for no legibility gain. */ /* nav.css:73 sets a FIXED `width:44px` below 1024px. A fixed width would clip the sum instead of letting the button grow, so it is relaxed to a floor. min-height:44px (main.css:215) is untouched — the touch target stays >=44px in both axes: the button is 44px tall at every width and never narrower than 44px. */ width: auto; min-width: 44px; } /* -------------------------------------------------------------------------- 2 · The sum itself. -------------------------------------------------------------------------- */ .site-header .header-cart__total { /* No `color`. Inheriting from the anchor means the sum darkens to var(--green) together with the icon on :hover (main.css:216) for free, and it inherits var(--slate) #334155 = 10.4:1 on the header's white — no new contrast risk introduced. */ font-size: var(--fs-2xs, 12px); font-weight: var(--fw-bold, 700); line-height: var(--lh-flat, 1); /* WooCommerce emits `913,00 €` — the   already stops a break between the number and the euro sign. nowrap is the belt to that braces: it also stops a break inside a long sum, so the button can never silently become three rows tall and shove the header row out of alignment. */ white-space: nowrap; /* Tabular figures: the sum changes every time something is added, and proportional digits would make the button breathe by a pixel or two on every update. Fixed-advance digits keep the header still. */ font-variant-numeric: tabular-nums; } /* Empty cart -> no sum. Mirrors main.css:218's decision for the count badge. (0,3,0) beats section 2's (0,2,0). This is a CLASS, not the [hidden] attribute — [hidden] is a user-agent rule that any author `display` would beat, and section 1 sets `display` on the parent, not on this element, but the class is used anyway so the rule can never be lost that way.) */ .site-header .header-cart .header-cart__total.is-empty { display: none; } /* -------------------------------------------------------------------------- 3 · SPACE ARITHMETIC — does the sum actually fit on a phone? These are computed from this repo's own stylesheets plus the real logo file (assets/img/ostugrupp-logo.png, intrinsic 635x80) and the real markup pulled from http://og.local/ on 2026-08-15. They are ARITHMETIC, not browser measurements — the text advances in particular are estimates for DM Sans (var(--font-text)) at ~0.60em per digit. THE LEAD MUST RE-MEASURE. The phone header row (<=767px) holds exactly three boxes: .mobile-menu-toggle 44px (main.css:219) .site-branding > logo img 190.5px (635/80 x 24px, nav.css:94 at <=380) 206.4px (635/80 x 26px, main.css:200 above) .site-header__actions > cart 44px today (nav.css:73) .header-account is display:none <=1023 (nav.css:78) and .header-search and .site-nav are display:none <1024, so nothing else is in the row. Row gap: 10px at <=380px (nav.css:93), else 12px (nav.css:67). .container padding-inline: 18px each side at <=767px (main.css:496). Widest sum the shop can actually produce: there is NO thousands separator in this store's currency format — the most expensive product is "2976,90 €" (checked via /pood/?orderby=price-desc, 2026-08-15). So the realistic worst case is 9 characters, ~53px at 11px DM Sans, ~58px at 12px. Available width for the cart button = viewport - 36 - toggle - logo - gaps 320px: 284 - 44 - 190.5 - 20 = 29.5px <-- ALREADY OVERFLOWING TODAY 360px: 324 - 44 - 190.5 - 20 = 69.5px 375px: 339 - 44 - 190.5 - 20 = 84.5px 390px: 354 - 44 - 206.4 - 24 = 79.6px 414px: 378 - 44 - 206.4 - 24 = 103.6px Cart button width today = 44px. With the sum stacked beneath the icon it becomes max(20px icon, ~53px sum) = ~53px, i.e. +9px: 360px: 53 <= 69.5 fits, ~16px to spare 375px: 53 <= 84.5 fits, ~31px to spare 390px: 53 <= 79.6 fits, ~27px to spare PRE-EXISTING FINDING, NOT CAUSED BY THIS FEATURE: at 320px the row already needs 298.5px inside 284px and overflows by ~14.5px today, hidden by `body { overflow-x: clip }` (main.css:124). This feature would add ~9px to that existing overflow, so the sum is switched OFF below 360px rather than made a bad situation slightly worse. 360px is the narrowest phone still in real use; 375px and 390px, the common iPhone widths, keep the sum. -------------------------------------------------------------------------- */ @media (max-width: 359px) { .site-header .header-cart .header-cart__total { display: none; } /* Give the fixed 44px button back so nothing else shifts on those phones. */ .site-header .header-cart { width: 44px; } } /* Phones and tablets: one step down in size. 11px is the size nav.css:85 already uses for the count badge here, so this introduces no new type size, and it is what buys the ~5px that keeps 360px comfortable. */ @media (max-width: 1023px) { .site-header .header-cart__total { font-size: 11px; } } /* -------------------------------------------------------------------------- 4 · The count badge sits on the ICON's corner at every width. Below 1024px nav.css:82 already lifts the badge out of flow. Above 1024px it is still an in-flow sibling, which under the column direction from section 1 would stack as a third row (icon / count / sum). So it goes out of flow at every width — which is also what the owner's reference shows: the count in a circle on the corner of the icon. WHY NOT `right: 2px` (what nav.css uses below 1024px) Out of flow, the badge is positioned against .header-cart — and .header-cart is exactly what section 1 just made wider. The icon is a 20px column flex item, centred, so the icon's right edge is always at 50% + 10px no matter how wide the button gets. Pinning the badge to the BUTTON's right edge would therefore drift away from the icon as the sum widens it: button 44px (min): icon right edge 32px, right:2px badge starts at 25px button 53px (phone):icon right edge 36px, right:2px badge starts at 34px button 74px (desk): icon right edge 47px, right:2px badge starts at 54px ^ 7px of clear air, badge detached from the icon Anchoring with `left: calc(50% + 4px)` instead keeps the badge's left edge 6px inside the icon's right edge at EVERY button width — a corner badge that stays on the corner. `right:auto` is required to cancel nav.css:83. .header-cart is already position:relative (nav.css:44 and cart-widget.css:8, both (0,1,0), both the same value — no conflict), so it is the containing block and no new stacking context is introduced. VISIBLE CHANGE ON DESKTOP — flagged in the report. -------------------------------------------------------------------------- */ .site-header .header-cart .header-cart__count { position: absolute; top: 2px; left: calc(50% + var(--space-4, 4px)); right: auto; /* The badge is inside the anchor. Without this the pointer flickers between the badge and the link it sits on; the click still reaches the link either way. Matches nav.css:85. */ pointer-events: none; } @media (min-width: 1024px) { .site-header .header-cart .header-cart__count { /* Desktop keeps 8px of padding (below), so the icon's top edge is at 8px rather than the ~4.5px it sits at on a phone. Nudge the badge down to match, so it overlaps the icon's top edge by the same ~2px at both breakpoints instead of floating above it. */ top: 6px; min-width: 18px; height: 18px; padding: 0 var(--space-4, 4px); font-size: 11px; /* The ring lifts the badge off the icon stroke it now overlaps, so the digit stays readable. Same device as nav.css:86, which does this for the same reason below 1024px. */ box-shadow: 0 0 0 2px rgb(255 255 255 / .9); } /* With the badge out of flow the desktop button no longer needs 12px of side padding to clear it. 8px keeps the sum off the edges while holding the button as narrow as the already-tight header row allows — see section 5. */ .site-header .header-cart { padding: var(--space-8, 8px); } } /* -------------------------------------------------------------------------- 5 · DESKTOP COST — stated, because the row above 1024px has no slack. nav.css:106-146 documents that the >=1024px header row already overflows at the narrow end, and that .site-header__actions is deliberately pinned (flex-shrink:0) while .site-nav is the box that yields into a scroller. That comment's own figure for the actions box is 24px light, incidentally: it counts the cart as 44px, but at >=1024px the cart is 12 + 20 icon + 4 gap + 20 badge + 12 = 68px, because the badge was in flow. What this feature does to that number: cart button before: 12 + 20 + 4 + 20 + 12 = 68px cart button after: 8 + max(20 icon, ~58 sum) + 8 = 74px delta = +6px So the actions box grows by 6px and the menu scroller absorbs 6px. That is the trade nav.css already chose on purpose — a menu that scrolls is a nuisance, a cart button pushed off-screen is lost revenue, and the cart is pinned. 6px is small, but it is not zero and the lead should measure it at 1024px and 1100px before shipping. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 6 · Motion. This sheet adds no animation of its own — the fragment swap is instant, and an animated money figure would draw the eye to a number that is merely correcting itself. The one inherited animation is cart-widget.css:9-10, which scales .header-cart__count on `.is-bumped`; cart-widget.css:464 already disables it under prefers-reduced-motion. The guard below is therefore belt-and-braces for the badge in its new out-of-flow position, and it is what keeps this file honest about the requirement rather than relying on another sheet to have got it right. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .site-header .header-cart .header-cart__count, .site-header .header-cart__total { transition: none; animation: none; } }