/* ========================================================================== W10 — ONE OVERLAY LADDER FOR ≤1024 px Matrix rows 338 (cookie banner sits on the sticky Add-to-bag CTA at 375 px), 402 (scroll/sticky/z-index layers are not documented as one ladder), 337. THE PROBLEM THIS FILE CLOSES Every fixed thing on a phone was pinned to `bottom: 0` by its own file and given a z-index by its own author. Verified at 375 px: `.wd-cookies-popup` (fixed, 360 × 145) and `.yb-pdp-sticky` (fixed, 73 px) shared the bottom edge, so the consent banner covered the single most important control on the site. THE RULE — memorise these two sentences, they are the whole file: 1. NOTHING IS PINNED TO `bottom: 0` ANY MORE. Everything that sits at the bottom edge is pinned to `calc(var(--yb-...) + …)`, so it stacks on top of whatever is already there instead of landing on it. 2. Z-INDEX ONLY DECIDES WHAT HAPPENS WHEN A MEASUREMENT FAILS. Two elements should never overlap in the first place — the offsets above see to that. The ladder is the failsafe, not the fix. ── THE LADDER (≤1024 px, bottom of the stack first) ────────────────────── | z-index | element | where it lives | |-----------|-------------------------------------------|------------------| | 1–20 | in-page sticky rows: category toolbar, | zx-mobile-fixes | | | `.yb-zx-view-items` inside the filter | | | | drawer, sticky table headers | | | 370 | `.yb-promo` promo bar | zw-desktop-fixes | | 380 | `.yb-search-panel` suggestions, | search.css, | | | `.yb-pdp-sticky` **desktop** top bar | pdp-below.css | | 390 | `.whb-main-header` (not sticky ≤1024), | style.css | | | `.yb-chat` WhatsApp bubble | | | **9997** | PINNED ACTION BARS: `.yb-pdp-sticky` | HERE + pdp-below,| | | (mobile, bottom edge) and | fix-bag-checkout3| | | `.yb-bc3-stickybar` (bag checkout bar) | | | 9998 | `.yb-bc3-toasts` ("… removed. Undo?") | fix-bag-checkout3| | 99900 | COOKIE NOTICE: `.yb-a12-cc` (ours, OFF | fix-a12-legal, | | | today) and `.wd-cookies-popup` (WoodMart) | HERE for the WM | | **99960**| WoodMart filter drawer scrim `.wd-close- | HERE | | **99970**| side` + panel `.sidebar-container` | | | 100000 | `.yb-mnav` nav drawer + its own scrim | mobile.css | | 100040 | `.yb-pdp-popup` gallery popup | pdp-top.css | | 100050 | `.yb-atb-modal` "added to your bag" | added-to-bag.css | | 100100 | `.yb-autoef-toasts` global toasts | auto-emails-forms| | 1000001 | skip link | fix-a9-a11y.css | WHY THE COOKIE NOTICE SITS WHERE IT DOES — the one judgement call. It is ABOVE everything that is merely pinned (bars, toasts, the chat bubble) and BELOW every user-invoked, dismissible, full-screen overlay (drawers, modals, the gallery popup). So if a height measurement ever fails, the consent buttons win over a CTA that is one dismissal away from being usable — and an open drawer still looks like an open drawer. This keeps the tiers INTEGRATION-3 S7 already assigned (99900 < 100000 < 100040 < 100050 < 100100) exactly as they are; W10 only fills the gaps and fixes the offsets. (The WORK-QUEUE line "cookie banner > sticky CTA > drawer" is followed for the first half; the drawer deliberately stays ABOVE the banner, as S7 shipped it.) HEIGHTS ARE VARIABLES, NOT MAGIC NUMBERS. `--yb-cookie-h` is written by assets/js/areas/fix-a6-mobile.js, which already measures whichever banner is on screen (`.yb-a12-cc` OR `.wd-cookies-popup`) and puts the pixel height in `--yb-a6-banner-h` + `html.yb-a6-banner-on`. No new JS. Our cookie notice is OFF today, so `--yb-cookie-h` is `0px` and every `calc()` below collapses to exactly what it was before — the rules are correct with the banner and without it. `--yb-sticky-h` / `--yb-bagbar-h` are the two bar heights. If a bar's design changes, edit ONE line here and every offset and the page padding follow. SCOPE — everything that changes behaviour is inside `@media (max-width:1024px)`. Desktop keeps the top-anchored `.yb-pdp-sticky` at z 380 and is untouched. This file loads between fix-mobile2.css and fix-parity.css (glob order in functions.php), so selectors here are written to out-specify the later files (mobile.css, pdp-below.css, zx-mobile-fixes.css, zzz-mobile2.css) as well. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Declared globally (harmless — nothing outside the media query reads them) so any future overlay can be written against the same names. ----------------------------------------------------------------------- */ :root { /* iPhone home-indicator strip. */ --yb-safe-b: env(safe-area-inset-bottom, 0px); /* Height of the bottom consent banner that is CURRENTLY on screen. 0 when there is none — which is today's state, the notice is OFF by default. */ --yb-cookie-h: 0px; /* PDP sticky add-to-bag bar: 52px button + 2 × 10px padding, measured 73px at 375px (GAP-G2). Its own safe-area padding is added separately below. */ --yb-sticky-h: 73px; /* Bag page checkout bar (fix-bag-checkout3.css: 44px row + 2 × 10px). */ --yb-bagbar-h: 76px; /* Breathing room between a floating element and whatever it sits above. */ --yb-overlay-gap: 16px; /* Ladder tiers as tokens, so the next floating element has a value to reuse instead of inventing one. Kept identical to the table at the top. */ --yb-z-sticky-row: 380; --yb-z-header: 390; --yb-z-pinned-bar: 9997; --yb-z-page-toast: 9998; --yb-z-cookie: 99900; --yb-z-filter-scrim: 99960; --yb-z-filter-drawer: 99970; --yb-z-nav-drawer: 100000; --yb-z-modal: 100050; --yb-z-toast: 100100; } /* fix-a6-mobile.js only sets this class while a banner is really visible and really touching the bottom edge, so this is the single source of truth for "is a consent banner eating the bottom of the screen right now". */ html.yb-a6-banner-on { --yb-cookie-h: var(--yb-a6-banner-h, 0px); } /* -------------------------------------------------------------------------- 2. WHAT IS PINNED ON THIS PAGE, RIGHT NOW Two different questions, two different answers: --yb-pinned-h = space the page must RESERVE (padding-bottom). Uses the "a bar exists on this page" classes, so the reservation never changes while the user scrolls — no layout jump. --yb-pinned-now = what is VISIBLE at this instant. Used by floating things (chat bubble, toasts) that must clear it. ----------------------------------------------------------------------- */ body.yb { --yb-pinned-h: var(--yb-cookie-h); --yb-pinned-now: var(--yb-cookie-h); } /* PDP: zx-mobile-fixes.js adds .yb-zx-has-sticky when the bar exists, .yb-zx-sticky-on (pdp-below.js) while it is actually shown. */ body.yb.single-product.yb-zx-has-sticky { --yb-pinned-h: calc(var(--yb-cookie-h) + var(--yb-sticky-h) + var(--yb-safe-b)); } body.yb.single-product.yb-zx-sticky-on { --yb-pinned-now: calc(var(--yb-cookie-h) + var(--yb-sticky-h) + var(--yb-safe-b)); } /* Bag: fix-bag-checkout3.js adds .yb-bc3-has-stickybar only while the bar is rendered and un-hidden, so reserved and visible are the same number. */ body.yb.yb-bc3-has-stickybar { --yb-pinned-h: calc(var(--yb-cookie-h) + var(--yb-bagbar-h) + var(--yb-safe-b)); --yb-pinned-now: calc(var(--yb-cookie-h) + var(--yb-bagbar-h) + var(--yb-safe-b)); } /* Same two values on , for `scroll-padding-bottom` (an anchor jump must not land behind a pinned bar). `:has()` is progressive enhancement — where it is missing the page simply keeps today's anchor behaviour, nothing breaks. The body-level declarations above stay the ones the offsets actually read. */ html:has(> body.yb.single-product.yb-zx-has-sticky), html:has(> body.yb.yb-bc3-has-stickybar), html.yb-a6-banner-on { scroll-padding-bottom: var(--yb-pinned-h, var(--yb-cookie-h)); } html:has(> body.yb.single-product.yb-zx-has-sticky) { --yb-pinned-h: calc(var(--yb-cookie-h) + var(--yb-sticky-h) + var(--yb-safe-b)); } html:has(> body.yb.yb-bc3-has-stickybar) { --yb-pinned-h: calc(var(--yb-cookie-h) + var(--yb-bagbar-h) + var(--yb-safe-b)); } @media (max-width: 1024px) { /* ---------------------------------------------------------------------- 3. THE LADDER, APPLIED Only the tiers that were missing or wrong. Everything else already carries the right value in its own file and is left alone. ------------------------------------------------------------------- */ /* 3a. The PDP CTA becomes a bottom-edge action bar at this width (zx-mobile- fixes.css flips it from top to bottom) but kept the DESKTOP tier, 380 — below the 390 chat bubble and below every dropdown. Promote it to the pinned-bar tier so it shares one number with the bag bar. */ html body.yb .yb-pdp-sticky { z-index: var(--yb-z-pinned-bar, 9997) !important; } /* 3b. WoodMart's own cookie popup had no tier of ours at all; it inherited whatever the parent theme ships. Pin it to the same tier as our own notice — only one of the two is ever on screen (fix-a12 hides the WoodMart one when ours is on). */ html body.yb .wd-cookies-popup { z-index: var(--yb-z-cookie, 99900) !important; } /* 3c. WoodMart's filter drawer is a user-invoked full-height overlay, so it belongs above the consent banner, not under it — otherwise the banner floats over the drawer's "Mostra N prodotti" button. Just below the nav drawer (100000); the two are never open together. Inert if the parent theme ever renames these classes. */ html body.yb .wd-close-side { z-index: var(--yb-z-filter-scrim, 99960) !important; } html body.yb .sidebar-container.wd-side-hidden { z-index: var(--yb-z-filter-drawer, 99970) !important; } /* ---------------------------------------------------------------------- 4. OFFSETS — THE ACTUAL FIX FOR ROW 338 Each rule repeats the exact selectors used by the earlier files it supersedes (fix-a6-mobile.css, fix-mobile2.css), because in a selector list each selector keeps its own specificity — this file loads after both, so the identical selector wins the tie and there is one owner of the number instead of three. ------------------------------------------------------------------- */ /* 4a. PDP sticky add-to-bag bar sits ON TOP OF the consent banner, never under it. With no banner --yb-cookie-h is 0px and this is bottom:0, i.e. byte-for-byte today's behaviour. */ html body.yb .yb-pdp-sticky, html body.yb .yb-pdp-sticky.is-visible, html.yb-a6-banner-on .yb-pdp-sticky, html.yb-a6-banner-on .yb-pdp-sticky.is-visible { top: auto !important; bottom: var(--yb-cookie-h, 0px) !important; } /* 4b. Bag checkout bar — same treatment. This one was never offset at all, so the banner covered the Checkout button on /carrello/ (row 337). */ html body.yb .yb-bc3-stickybar { bottom: var(--yb-cookie-h, 0px) !important; } /* 4c. The bag's "… removed. Undo?" toast clears the bar AND the banner. fix-bag-checkout3.css hard-codes 84px for the bar case only. */ html body.yb .yb-bc3-toasts, html body.yb.yb-bc3.yb-bc3-has-stickybar .yb-bc3-toasts { bottom: calc(var(--yb-pinned-now, 0px) + var(--yb-overlay-gap)) !important; } /* 4d. Global toasts (wishlist, form errors). They are at the top of the ladder (100100), so they would happily cover the CTA and the consent buttons — they must be lifted, not lowered. */ html body.yb .yb-autoef-toasts { bottom: calc(var(--yb-pinned-now, 0px) + var(--yb-overlay-gap)) !important; } /* 4e. WhatsApp chat bubble. It was juggled by four files with four numbers (14 / 20 / 90 / 92 px, plus a banner variant). One expression now. */ html body.yb .yb-chat, html body.yb.single-product .yb-chat, html body.yb.single-product.yb-zx-sticky-on .yb-chat, html.yb-a6-banner-on body.yb .yb-chat, html.yb-a6-banner-on body.yb.single-product.yb-zx-sticky-on .yb-chat { bottom: calc(var(--yb-pinned-now, 0px) + var(--yb-overlay-gap)) !important; } /* 4f. Both consent banners keep their own safe-area padding so the buttons are never under the iPhone home indicator (a6 already does this for the same two selectors; repeated here so the whole ladder is in one file and a6 can be retired without losing it). Deliberately NOT setting `bottom` on these two: WoodMart may animate its popup with `bottom`, and forcing a value could pin a banner open. They are the floor of the stack — nothing has to lift them. */ html body.yb .yb-a12-cc, html body.yb .wd-cookies-popup { padding-bottom: calc(12px + var(--yb-safe-b)) !important; } /* 4g. Back-to-top: mobile.css hides `.scrollToTop` and the WoodMart bottom toolbar entirely at this width, which is the lululemon pattern, so there is nothing to offset. The rule is restated (not re-hidden) so nobody re-enables it at the bottom edge without reading this file: if it ever comes back it belongs at tier 9997 with `bottom: calc(var(--yb-pinned-now) + var(--yb-overlay-gap))`. */ /* ---------------------------------------------------------------------- 5. PAGE BOTTOM PADDING — what is pinned must not eat the footer Only bodies that actually have something pinned are touched; a page with no bar and no banner keeps whatever padding it had. ------------------------------------------------------------------- */ /* 5a. PDP. Supersedes three different reservations: zx (flat 72px), zzz (72px + safe), fix-mobile2 (80px, or 80px + banner). */ html body.yb.single-product.yb-zx-has-sticky, html.yb-a6-banner-on body.yb.single-product.yb-zx-has-sticky { padding-bottom: calc(var(--yb-pinned-h, 0px) + var(--yb-overlay-gap)) !important; } /* 5b. Bag page. */ html body.yb.yb-bc3-has-stickybar { padding-bottom: calc(var(--yb-pinned-h, 0px) + var(--yb-overlay-gap)) !important; } /* 5c. Every other page, banner only. */ html.yb-a6-banner-on body.yb:not(.single-product):not(.yb-bc3-has-stickybar) { padding-bottom: var(--yb-cookie-h, 0px) !important; } /* ---------------------------------------------------------------------- 6. TAP TARGETS ≥ 44 px on every control in the bottom stack content-polish.css drops the accept button to 40px at phone width and the "more" link has no height of its own at all. ------------------------------------------------------------------- */ html body.yb .wd-cookies-popup .cookies-accept-btn, html body.yb .wd-cookies-popup .cookies-more-btn, html body.yb .wd-cookies-popup .btn, html body.yb .wd-cookies-popup .cookies-buttons > a, html body.yb .wd-cookies-popup .cookies-buttons > button, html body.yb .yb-a12-cc__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; } /* The CTA itself is already 52px (zx-mobile-fixes.css); this is the floor, not a resize, so a future edit cannot take it below the threshold. */ html body.yb .yb-pdp-sticky .yb-pdp-sticky__btn, html body.yb .yb-bc3-stickybar .yb-bc3-stickybar__btn { min-height: 44px !important; } /* ---------------------------------------------------------------------- 7. REDUCED MOTION Every element in the ladder slides or fades. Under the OS setting they appear and disappear instead. Visibility/opacity end states are unchanged, so nothing becomes unreachable. ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html body.yb .yb-pdp-sticky, html body.yb .yb-pdp-sticky.is-visible, html body.yb .yb-bc3-stickybar, html body.yb .yb-bc3-toasts, html body.yb .yb-bc3-toast, html body.yb .yb-autoef-toasts, html body.yb .yb-autoef-toast, html body.yb .yb-a12-cc, html body.yb .wd-cookies-popup, html body.yb .yb-chat, html body.yb .yb-mnav__overlay, html body.yb .yb-mnav__panel, html body.yb .wd-close-side, html body.yb .sidebar-container.wd-side-hidden { transition: none !important; animation: none !important; } } }