/* ========================================================================== CHROME POLISH — the parts of the shop that are on every single page -------------------------------------------------------------------------- The footer, the mobile drawer, the mega-menu panel, the announcement bar and the mini-cart. None of these is "the shop"; all of them frame it. Four design passes have walked past them because they are nobody's feature. This file is deliberately small and deliberately quiet: it fixes hierarchy, it retires values the pack has deleted, and it leaves everything that is already right exactly where it is. WHAT THIS FILE DOES NOT DO — read this before adding a rule. 1. ELEVATION belongs to assets/css/surfaces-d4-d12.css. That file already moved .og-mega__panel, .mini-cart__panel and .og-drawer onto the pack's level-2 rung and owns every scrim. Exactly ONE box-shadow is declared below, and it CONSUMES a rung that file declared and explicitly reserved (--elev-edge-top, surfaces-d4-d12.css:120, "stuck to the top casts down"). No new shadow recipe is invented here. 2. PRESS AND HOVER belong to assets/css/motion.css. This file declares no transition, no animation and no transform, so prefers-reduced-motion has nothing here to switch off. Where a hover COLOUR is changed below, it is changed to agree with the press colour motion.css already ships for the same control — that is removing a second answer, not adding a fourth. 3. THE FOCUS RING belongs to assets/css/a11y.css. Nothing below touches outline or :focus-visible. One rule touches a :focus BORDER, which is a different property on a different pseudo-class, and it does so because that border currently resolves to 2.43:1 (arithmetic in section 1.7). 4. THE CHECKOUT. inc/chrome-polish.php returns before enqueueing there, so no rule in this file can reach the gateway area. CLAUDE.md invariant 1. TWO RECORDED FACTS THIS FILE RESPECTS, both re-verified before writing: · .mini-cart__item-remove is centred by `position:absolute; top:50%; right:8px` + `transform:translateY(-50%)` (cart-widget.css:185-190). Section 5 touches the subtotal and the action row and NOTHING in the item list — no positioning, no transform, and no `position: relative` anywhere near .mini-cart__item. a11y.css:176-183 and motion.css:416-427 both record what happens when that is forgotten. · The trust band's breakpoint is 940px (--bp-trustbar, tokens.css:75), an owner-sanctioned exception with a measured reason. This file names no trust-band selector and declares no 940px or 1024px query near one. SPECIFICITY. inc/chrome-polish.php collects every ostugrupp- style already queued and declares them as dependencies, so this file prints after footer.css, nav.css, cart-widget.css and main.css. Every rule below states its own weight and the weight it has to beat. Where the two are EQUAL the win is source order, and that is said out loud rather than assumed — CLAUDE.md trap 1 is two instances of a rule that looked live and was not. Nothing here is measured in a browser; this session had none. ========================================================================== */ /* ========================================================================== 1 · THE FOOTER The last thing every visitor sees, and the one surface no pass has touched. Today it is five horizontal bands of near-identical weight with three different label recipes in them, and on a phone — 73% of this shop — the three link columns stack into one unbroken 12-link run. The footer is also the pack's flagship DARK surface. tokens.css section A2b (lines 100-136) exists because of it, in the pack's own words: "Jalus, teateriba, hero, alumine CTA-riba, mega-banner, sahtli pais ja korvi teade on tumedad - 55 kasutust, millel ei olnud uhtki tokenit." The values below come from that block. NOTE ON THE DARK ITSELF: the footer's background is --slate-dark #1e293b, NOT the pack's --surface-inverse #0f172a (main.css:30-36 records that disagreement as an open blocker and lists --slate-dark among the six names the gateway block leans on). Every contrast number in this section is therefore computed against #1e293b, not against the pack's #0f172a, and the two differ: #94a3b8 is 6.96:1 on the pack's ink and 5.70:1 on ours. ========================================================================== */ /* --- 1.1 · One label recipe, not three ------------------------------------ The footer prints three "label" typographies today: .footer-widget__title main.css:232 700 14px display .08em #fff .site-footer__badge-label footer.css:195 700 11.5px .12em #94a3b8 .og-mega__rail-heading nav.css:274 700 11px .12em (menu) and the first of them is a hierarchy INVERSION: the column heading is 14px while the links underneath it are 14.5px (footer.css:100). The heading is literally smaller than its own list. The pack has one role for this: --label-sm (tokens.css:196), 600 12px/1 on --font-text with .06em tracking. Adopting it does not make the heading "smaller" in the way that matters — it makes it a different KIND of thing. A 12px uppercase semibold white label over 14.5px regular #94a3b8 links is a two-tone hierarchy; 14px white uppercase over 14.5px grey is a tie. text-transform is restated even though the `font` shorthand does not reset it: this rule is not going to sit downstream of main.css:232 forever, and a label that silently loses its uppercase is not a failure anyone would trace. --------------------------------------------------------------------------*/ .site-footer .footer-widget__title { /* (0,2,0) beats main.css:232 (0,1,0) and the bare h2 rule at main.css:143 (0,0,1). Both are outranked outright, not by order. */ font: var(--label-sm, 600 12px/1 "DM Sans", "Segoe UI", sans-serif); letter-spacing: var(--label-sm-tracking, .06em); text-transform: uppercase; color: var(--text-on-dark, #fff); margin-bottom: var(--space-12, 12px); } .site-footer .site-footer__badge-label { /* (0,2,0) beats footer.css:195 (0,1,0). Same recipe as the column heading, one step quieter in colour — #94a3b8 is byte-identical to the value footer.css:200 already prints, now carrying the role name that explains why it is that grey and not another. 5.70:1 on #1e293b. */ font: var(--label-sm, 600 12px/1 "DM Sans", "Segoe UI", sans-serif); letter-spacing: var(--label-sm-tracking, .06em); text-transform: uppercase; color: var(--text-on-dark-subtle, #94a3b8); } /* --- 1.2 · The link columns get a rhythm ---------------------------------- a11y.css:143-150 gives every .site-footer__links a `display:inline-flex` and `min-height:44px` for WCAG 2.5.5. footer.css:92-96 then adds `gap:10px` on top of that, so the real pitch is 54px and the column reads as a scatter of links rather than as a list. Removing the gap leaves a clean 44px pitch — the tap target is unchanged, the rhythm is regular, and four links occupy 176px instead of 206px, which on a phone is a third of a viewport back. Scoped to .a11y-ready ON PURPOSE. That class is added server-side by inc/accessibility.php:49 via the body_class filter, so it is present on every front-end page with or without JavaScript — but the 44px it unlocks comes from a11y.css and nowhere else. Tying the gap removal to the exact selector that supplies the height means the two can never separate: if that file is ever switched off, the 10px gap comes back with it instead of the list collapsing to bare line boxes. --------------------------------------------------------------------------*/ .a11y-ready .site-footer__links { /* (0,2,0) beats footer.css:92 (0,1,0). */ gap: 0; } /* --- 1.3 · Structure for the phone, where there is none ------------------- At >=640px the columns sit side by side and their headings separate them. Below 640px they stack, 32px apart, with no rule between them — so the footer's whole link region is one 12-row column and the only thing marking a group boundary is a label the eye has already learned to skip. A hairline is the honest fix and --on-dark-a2 is the pack's own value for a quiet tint on a dark surface (tokens.css:109). The gap drops 32 -> 24 in the same breath so the line sits centred in its own space (24 above, 24 below) instead of adding a third distance to the two already there. Strictly below 640px: at 640-1023 the grid is two columns wide (main.css:235) and `+ .site-footer__col` would put a top border on a column that is sitting BESIDE its predecessor, not under it. --------------------------------------------------------------------------*/ @media (max-width: 639.98px) { .site-footer .site-footer__cols { /* (0,2,0) beats footer.css:84 and main.css:231, both (0,1,0). */ gap: var(--space-24, 24px); } .site-footer .site-footer__col + .site-footer__col { /* (0,3,0). Nothing else in the theme styles this pair. */ padding-top: var(--space-24, 24px); border-top: 1px solid var(--on-dark-a2, rgb(255 255 255 / .12)); } } /* --- 1.4 · Band rhythm ---------------------------------------------------- The footer is five stacked bands and their block padding is 40 / 28 / 26 / 20 / 24. Two of those numbers (28, 26) are on no scale at all — the pack's ladder is tokens.css section A4, 4px based. Putting the newsletter and the badge row on --space-24 makes the middle of the footer one rhythm instead of two near-misses. The change on screen is 4px and 2px; the change in the source is that the next person reads a scale instead of a guess. --------------------------------------------------------------------------*/ .site-footer .site-footer__newsletter, .site-footer .site-footer__badges { /* (0,2,0) beats footer.css:116 and footer.css:187, both (0,1,0). padding-block only — the horizontal padding of both is 0 and stays 0. */ padding-block: var(--space-24, 24px); } /* --- 1.5 · A separator you can see ---------------------------------------- .site-footer__sep is the "·" between the copyright line and the company registration number. footer.css:250 paints it #475569, which on #1e293b is 1.93:1 — arithmetic: L(#475569)=0.0886, L(#1e293b)=0.0218, ratio = (0.0886+0.05)/(0.0218+0.05) = 1.93. It is aria-hidden decoration so no WCAG text rule is being failed, but a separator at 1.93:1 is not separating anything; the copyright row reads as one run-on string. --on-dark-a4 is the pack's role for exactly this and says so in eesti keeles: "rohutatud piir, eraldaja" (tokens.css:111). At .32 over #1e293b it composites to roughly #666f7c, about 2.9:1 — visible as a mark, still well below the 5.70:1 of the text on either side of it, which is what a separator should be. --------------------------------------------------------------------------*/ .site-footer .site-footer__sep { /* (0,2,0) beats footer.css:250 (0,1,0). */ color: var(--on-dark-a4, rgb(255 255 255 / .32)); } /* --- 1.6 · The newsletter field's focus border ---------------------------- footer.css:149-152 sets `border-color: var(--green)` on :focus. --green is --brand #047857, and tokens.css:114-115 states the problem outright: "#047857 on tumedam kui #0f172a, seega .06-.20 tint oleks tumedal nahtamatu." The border is not a tint, but the same physics apply. Measured by arithmetic against the field's own background (rgba(255,255,255,.06) over #1e293b, composited ~#2c3647, L=0.0787): #047857 (today) L=0.1415 -> 2.43:1 fails WCAG 1.4.11 (needs 3:1) #34d399 (below) L=0.4963 -> 6.94:1 --brand-on-dark IS #34d399 and its whole reason for existing is "roheline tumedal pinnal" (tokens.css:14). This is a role swap, not a new colour. Only the :focus BORDER moves. The keyboard ring is a11y.css's: `.a11y-ready input:focus-visible` (0,2,1) plus the dark-surface variant at a11y.css:58-66 which flips the ring to #6ee7b7 inside .site-footer. Neither is touched, and neither is footer.css's `outline:none` on the base element. --------------------------------------------------------------------------*/ .site-footer .site-footer__newsletter-input:focus { /* (0,3,0) beats footer.css:149 (0,2,0) outright. The .site-footer prefix is the same remedy CLAUDE.md trap 1 prescribes for the header logo — a structural parent box, not an invented class. */ border-color: var(--brand-on-dark, #34d399); } /* NOT TAKEN HERE, on purpose, and both are in the report: · The four dividers at rgba(255,255,255,.1) (footer.css:13/117/188/247 and main.css:231). The pack's border role on dark is --on-dark-a3 at .20 — twice as strong. Doubling four dividers across every page of the shop is a visible change I cannot see, so it is reported rather than made. · .site-footer__newsletter-btn's height. controls-d1-d2.css:107-113 already excluded it from the D1 size ladder and handed "both should go to 52 together" to the lead in writing. That handover is still open and it is not mine to close from a second file. */ /* ========================================================================== 2 · THE ANNOUNCEMENT BAR One rule. The bar is a 38px dark strip above a 72px header on every page, and the brief for this file is that the chrome should be calm — so the only thing done to it is the thing that is actually broken. .announcement-bar__inner (main.css:186) is a flex row with `min-height:38px`, `flex-wrap:wrap` and NO block padding. One line of 13px text at line-height 1.6 is 20.8px and sits comfortably. Two lines are 41.6px in a box whose only guarantee is 38px — so the moment the owner's eesti-keelne campaign sentence wraps on a 320-375px phone, the text touches the top and bottom edges of the bar with nothing between it and the header below. 8px of block padding costs nothing while the line fits: box-sizing is border-box (main.css:107), so 20.8 + 16 = 36.8px is still inside the 38px minimum and the bar does not move by a pixel. It only spends when it must. ========================================================================== */ .announcement-bar .announcement-bar__inner { /* (0,2,0) beats main.css:186 (0,1,0). padding-block only — the horizontal padding belongs to .container (main.css:151) and is left alone. */ padding-block: var(--space-8, 8px); } /* ========================================================================== 3 · THE MEGA-MENU PANEL surfaces-d4-d12.css:151-153 already gave this panel the pack's level-2 rung, which was the change it needed. What is left is one colour, and it is a colour the pack has DELETED. tokens.css:10 — "Brand. #059669 on siit kustutatud - seda ei ole enam olemas." nav.css:217 still paints the category count pill with rgb(4 120 87 / .12) and rgb(4 120 87 / .2) — that is #059669 at exactly the two alphas the pack replaced with --brand-a2 and --brand-a3. Same ladder, same rungs, retired hue. docs/DISAIN-KOMPONENDID.md section 3.2 records that pack-components.css already did this for the filter chips in five places. This is the same cleanup continuing into the menu, not a new opinion about green. ========================================================================== */ .og-mega__nav-item.is-active .og-mega__count, .og-mega__parent:hover .og-mega__count { /* (0,3,0) and (0,2,0) — the two selectors are copied verbatim from nav.css:216-217 so each matches the weight of the declaration it supersedes exactly and wins on source order. Deliberately not escalated: a component author must still be able to take the pill back locally. `color: var(--green-dark)` is NOT restated — it is already correct and a correct value does not need a second author. */ background: var(--brand-a2, rgb(4 120 87 / .12)); border-color: var(--brand-a3, rgb(4 120 87 / .20)); } /* NOT TAKEN: nav.css:277, the promo card's radial glow at rgba(5,150,105,.55). It is the same retired hue, but it sits on a DARK card and the alpha ladder has no .55 rung. tokens.css:114-120 says green on dark must be based on --brand-on-dark #34d399, not on --brand — which would turn that glow from deep green to mint. That is a look, not a swap, and it needs eyes. Reported. */ /* ========================================================================== 4 · THE MOBILE DRAWER The drawer is the whole navigation for 73% of this shop's traffic and it is the first surface a phone shopper ever opens. Five rules: one for the head they land on, one for the control that gets them back out, two for how the category tree reads, and one for a hairline that has nothing under it. ========================================================================== */ /* --- 4.1 · The head separates itself when the tree scrolls under it ------- .og-drawer__head is `position:sticky; top:0` (nav.css:372-376) over a list of ~17 categories, each of which can expand. Its only separation from the content sliding beneath it is a 1px --border hairline, white-on-white, and the head carries the ONE control that closes the drawer. This is the file's only box-shadow and it invents nothing: surfaces-d4-d12.css:120 declares --elev-edge-top as "0 2px 16px --ink-a3 … stuck to the top casts down" and marks it RESERVED. This consumes it for a surface that is stuck to the top. Same recipe, same file, named role. The literal fallback matters more than usual here: --elev-edge-top lives in surfaces-d4-d12.css's :root, and the owner can switch that whole module off from the settings panel. Custom properties resolve at computed-value time, so a later stylesheet's :root still reaches this rule — but a switched-off one does not, and then the literal is the only thing standing. VISIBLE, and I could not see it: the shadow is painted whether the drawer is scrolled or not. Making it conditional needs JavaScript or scroll-driven animation and this file adds neither. Flagged in the report. Forced colours need no extra rule: box-shadow is not painted there, and nav.css:374 already gives the head a real border-bottom that is. --------------------------------------------------------------------------*/ .og-drawer__head { /* (0,1,0) — the same weight as nav.css:372, won on source order. */ box-shadow: var(--elev-edge-top, 0 2px 16px rgb(15 23 42 / .12)); } /* --- 4.2 · The close button speaks one red, not two ---------------------- nav.css:383 hovers this button to #fee2e2 / #dc2626 / #fecaca. motion.css:404-408 presses the same button to --danger-a3 / --state-error. So on a phone, where a tap latches :hover and fires :active together, the one control that closes the drawer answers in two different reds depending on which state wins the frame. The pack replaced five reds with one (tokens.css:36-40) and #dc2626 is one of the four it retired. Moving the hover onto the same ladder makes hover -> press a single family deepening: a2 (.12) -> a3 (.20), --state-error text throughout. Arithmetic for the text: #b91c1c over --danger-a2 composited on --muted (~#eadbde) is 4.83:1, up from roughly 3.9:1 for #dc2626 on #fee2e2. --------------------------------------------------------------------------*/ .og-drawer__close:hover { /* (0,2,0) — the same weight as nav.css:383, won on source order. Left equal on purpose so motion.css's :active, which prints after this file, still wins the frame when both are live. That is the intended order. */ background: var(--danger-a2, rgb(185 28 28 / .12)); border-color: var(--danger-a3, rgb(185 28 28 / .20)); color: var(--state-error, #b91c1c); } /* --- 4.3 · Two targets that look like two targets ------------------------ .og-drawer__cat-row is a full-width link and, beside it, a 44px button — and they do completely different things. Tap the left and you leave for the category page; tap the right and the row expands in place. Today the button is `border:0`, transparent, and its entire visible content is a 13px grey chevron glyph (nav.css:402-406). There is nothing on screen that says the right-hand 44px of the row is a separate control, so a shopper who wants to browse a subcategory has to discover it by mis-tapping. A hairline is enough. .og-drawer__cat-row is `align-items:stretch`, so the border runs the full row height and the two targets read as two. The glyph goes 13 -> 18px in the same rule. The pack's accordion (D7, docs/DISAIN-KOMPONENDID.md section D7) specifies a 20px arrow that ROTATES rather than swapping icon — the rotation is already here (nav.css:407), the size was not. 18px is --fs-lg, the top of the pack's size ladder (tokens.css:174); 20 is not on it, and the pack's own first rule is that a missing value means a missing role, not a new number. These are atoms rather than a composed token by design: tokens.css:157-159 reserves the atoms for exactly this case, "reavahe ilma suuruseta ikooniglyyfil" — a glyph needs a size and a flat line box and nothing else. --------------------------------------------------------------------------*/ .og-drawer__cat-row .og-drawer__expand { /* (0,2,0) beats nav.css:402 (0,1,0). That rule's `border:0` shorthand (nav.css:403) is superseded on the left edge only; the other three sides stay 0. a11y.css:157 keeps the 44x44 hit area and is untouched — border-box (main.css:107) spends the 1px from the content box, not from the target. */ border-left: 1px solid var(--border, #e2e8f0); font-size: var(--fs-lg, 18px); line-height: var(--lh-flat, 1); } /* --- 4.4 · An open branch says which branch it is ------------------------- .og-drawer__subcats is a flat --muted block (nav.css:409). Once it is open, the parent it belongs to has scrolled up or is one indistinguishable row above it, and nothing connects the two. The desktop mega menu already answers this: nav.css:201+210 marks the active parent with `border-left: 3px solid var(--green)`. The drawer gets the same 3px, the same colour role, running down the open children. UPDATED with the drawer's left-edge pass. When this rule was written it read "3px of border plus 7px of padding is the same 10px nav.css already had", and that was true of the geometry at the time — but the indent was being summed across three boxes (the ul's -4px margin, its padding, and 14px on the link itself), so the 16px step a subcategory sits at was an accident of three numbers rather than one decision. nav.css now owns a single number for it and the link carries no horizontal padding at all, which is what lets its 44px tap row run the full width of the drawer. The step is 3px border + 13px padding = --space-16, measured from the parent row's own left edge. The border keeps its 3px because it is the same 3px the desktop mega menu marks an active parent with (nav.css:201+210) — matching marks, not matching accidents. --------------------------------------------------------------------------*/ .og-drawer__cat .og-drawer__subcats { /* (0,2,0) beats nav.css (0,1,0). border-left is a longhand, so that rule's border-bottom survives. padding-left is restated here rather than left to nav.css ONLY because this rule's border is what the 13px is measured against — the two numbers have to move together or the indent drifts. */ border-left: 3px solid var(--brand, #047857); padding-left: 13px; } /* --- 4.5 · A hairline with nothing under it ------------------------------ nav.css:414 gives every .og-drawer__links link a border-bottom. The list is rendered three times (Konto, Info, and the no-menu fallback), so the drawer ends on a rule with 28px of empty white beneath it. It is one pixel and it is the last pixel a phone shopper sees in the navigation. --------------------------------------------------------------------------*/ .og-drawer__links li:last-child a { /* (0,2,2) beats nav.css:414 (0,1,2). */ border-bottom: 0; } /* ========================================================================== 5 · THE MINI-CART The panel a shopper sees in the second after the most important action on the site. Today it is a tinted head, then an undifferentiated white column in which the running total, at 18px, sits between the product list and the buttons with a 1px line above it and nothing else marking it as the answer to the question that opened the panel. Two moves: give the panel a foot, and let the number be the number. Nothing in the item list is touched — see the header note about the remove "x". ========================================================================== */ /* --- 5.1 · The panel gets an anatomy ------------------------------------- Head / items / foot. The head is already --muted (cart-widget.css:68); --surface-muted is the same value under the pack's own name (main.css:44 aliases one onto the other), so the foot matches the head byte for byte. The pack names this exact treatment and is careful that it is not an elevation: "--surface-muted suvend - ei ole korgusaste, vaikne plokk pinna sees" (docs/DISAIN-KOMPONENDID.md, D4). A quiet block inside a surface — which is what a summary is. It is drawn as an inset card rather than a full-bleed band ON PURPOSE. .mini-cart__body carries 8px of padding (cart-widget.css:109) and a full-bleed foot would need negative margins compensating for that exact number — a rule that breaks silently the day someone changes the body's padding. Two radii and a shared tint need no such coupling. The rounded top rides on the border-top cart-widget.css:212 already declares, so the seam survives forced-colours mode, where the tint does not. --------------------------------------------------------------------------*/ .mini-cart__subtotal, .mini-cart__actions:not(.mini-cart__actions--empty) { /* (0,1,0) and (0,2,0). The first is equal to cart-widget.css:207 and wins on source order; the second outranks cart-widget.css:224 outright. The :not() is load-bearing, not tidiness — .mini-cart__actions--empty (inc/ajax-cart.php:109) is the empty cart's single "Vaata tooteid" button, which has no subtotal above it and must not grow a foot of its own. */ background: var(--surface-muted, #f1f5f9); } .mini-cart__subtotal { border-radius: var(--radius-12, 12px) var(--radius-12, 12px) 0 0; padding: var(--space-16, 16px) var(--space-16, 16px) var(--space-12, 12px); } .mini-cart__actions:not(.mini-cart__actions--empty) { border-radius: 0 0 var(--radius-12, 12px) var(--radius-12, 12px); padding: var(--space-8, 8px) var(--space-16, 16px) var(--space-16, 16px); } /* --- 5.2 · The number is the confirmation -------------------------------- cart-widget.css:217-221 gives the subtotal 18px and --slate-dark. 18px is not a step on the pack's price ladder — that ladder is --price-sm 14 / --price-md 20 / --price-lg clamp(26,5vw,32) (tokens.css:206-208) — so the one number the shopper opened this panel to read is written in a size the design system does not have. --price-md is the middle rung and the right one here: --price-lg is the product page's headline and would shout inside a 360px dropdown. THE ORDER OF THE NEXT TWO DECLARATIONS IS LOAD-BEARING. `font` is a shorthand and it resets font-variant, which includes font-variant-numeric — so restating tabular-nums AFTER it is what keeps the digits from shifting as the total changes. (type-rhythm.css:341 sets the same property on WooCommerce's own .woocommerce-Price-amount span inside, so the digits would survive anyway on a live cart; they would not survive on a plain-text total, and a rule that is only accidentally correct is not correct.) --------------------------------------------------------------------------*/ .mini-cart__subtotal strong { /* (0,1,1) — the same weight as cart-widget.css:217, won on source order. */ font: var(--price-md, 700 20px/24px "Space Grotesk", "DM Sans", sans-serif); letter-spacing: var(--price-md-tracking, -.015em); font-variant-numeric: tabular-nums; color: var(--price, #0f172a); } /* The "Vahesumma" label beside it is left exactly as it is: 14px --slate-600 is --text-sm on --text-muted, already the right pair, and a label that is correct does not need restating just because its neighbour moved. */ /* ========================================================================== 6 · THE COOKIE BAR — what this file does when it is on screen .oga-cc-bar is EXTERNAL, plugin-owned, position:fixed, bottom:0, z-index 999999 (recorded at cart-widget.css:425-436 and tokens.css:274-280). It cannot be controlled and must not be fought. Nothing in this file is position:fixed, position:sticky or position:absolute, and this file declares no z-index at all. The one sticky element it touches, .og-drawer__head, was already sticky and keeps the stacking it had. So the cookie bar's behaviour against this work is exactly its behaviour today: · Footer — normal flow, bottom of the document. The bar covers the copyright row until the visitor answers it, as it does now. Sections 1.1-1.6 change nothing about that, and section 1.3's hairlines are above the fold of the bar in every stacking case. · Drawer — z-index 1200 (nav.css:357), below 999999, so the bar paints over the drawer's bottom edge. Unchanged: the head shadow in 4.1 is at the top. · Mini-cart — z-index 200 (cart-widget.css:19), anchored under the header at the top of the viewport. It and the bar do not share screen space. · Announcement bar — top of the document, static, 8px of padding. No contact. The theme's own .og-cookie is a different element with a different z-index (engagement.css) and is not named anywhere in this file. ========================================================================== */ /* ========================================================================== END. Nothing here transitions, animates or transforms; nothing here declares a z-index or a position; nothing here names a selector on the checkout's gateway list, and inc/chrome-polish.php never enqueues the file on that page in the first place. ========================================================================== */