/* ======================================================================= RV LAYOUT, MOBILE AND TABLET GEOMETRY - rv-layout-mobile-1.css Loaded last, after tokens-7, rv-blocks-3, petrol-chrome-34, petrol-v12-3 and rv-layout-desktop-5. COMPANION TO rv-layout-desktop-5.css, NOT A REPLACEMENT FOR IT. That file is entirely inside @media (min-width: 1025px). This file is entirely inside @media (max-width: 1024px). The two can never collide, and neither can leak into the other's range. WHAT WAS ACTUALLY WRONG BELOW 1025px Measured at 390px (iPhone 14), 360px (common Android) and 768px (tablet portrait) in a real emulated mobile viewport with an Android user agent, not by resizing a desktop window. The good news first: there is NO horizontal overflow anywhere. Every page type measured documentElement.scrollWidth === the layout viewport, the 51 row table on /knife-laws-by-state already scrolls inside .rv-table-wrap, and the rune table on /elder-futhark-runes already fits. The mobile rail was never broken. What was broken was stacking, clearance and touch. 1. .rv-buybar sat at z-index 20 while the theme's back to top button is 350 and the off canvas and search layers are 400 and 500. The round back to top button painted straight through the sticky buy bar. 2. body had padding-bottom: 0, so the 79px buy bar covered the last of the footer once a phone reached the bottom of a product page. 3. .rv2-hero__panel inset itself with calc((100vw - var(--shell)) / 2), and --shell is a percentage expression, which resolves against the element that USES it. Below 1025px the hero is single column so it happens to come out right today, but the trap is still armed: the moment that grid gains a second column under 1025px the headline jumps. Pinned to a plain token so there is no percentage in the chain. 4. Two rails, three pixels apart. .site-content sits on --rv-gutter (18px on a phone) while the rv2 system hardcoded 40px of shell subtraction, i.e. 20px. Now both read the same token. 5. Touch targets. Thirty controls per archive page were under the 44px minimum: the four header tool icons at 40x40, the logo link at 24px tall, every product card add to cart at 40x40 and wishlist at 35x35, the filter opener at 130x22, the sort select at 30x30, the quantity stepper at 25px wide, and the buy bar's own button at 43px. 6. The homepage trust badges were a 2x2 grid at 390px, which left the description text a 97px column running to six ragged lines. Geometry, stacking, clearance and touch only. No colour, no type scale, no content, no component redesigned. NO !important IS USED ANYWHERE IN THIS FILE. It loads after every other stylesheet, so an equal specificity selector already wins the cascade. ========================================================================== */ @media (max-width: 1024px) { /* -------------------------------------------------------------------------- 0. TOKENS FOR THIS LAYER --rv-gutter is inherited from tokens-7: 20px, and 18px below 768px. It is the single number every rail below reads, so a phone and a tablet stay internally consistent without either being hardcoded here. -------------------------------------------------------------------------- */ :root { /* The sticky buy bar measures 79px tall at 390px: 59px of content plus the 10px block padding on .rv-buybar__inner top and bottom. 80px is that, rounded up, and it is what the body clearance below reserves. */ --rv-buybar-h: 80px; /* Above the theme's back to top (350), below its off canvas overlay (400) and its side panels (500). See section 1. */ --rv-z-buybar: 380; /* WCAG 2.2 target size, and the Apple and Android minimum. */ --rv-tap: 44px; } /* -------------------------------------------------------------------------- 1. THE STICKY BUY BAR STACKS ABOVE THE BACK TO TOP BUTTON .rv-buybar took z-index from --rv-z-sticky, which is 20. The theme's own fixed furniture, measured on a live product page: a.scrollToTop 350 .wd-close-side 400 the dimmer behind an open off canvas .wd-search-full-screen 400 .mobile-nav 500 .cart-widget-side 500 So the round back to top button painted on top of the buy bar, over the price and next to the button, on every product page on every phone. 380 is chosen, not 500: the bar must clear the back to top button but must NOT climb over the search overlay or the off canvas menu, or opening the menu would leave a buy bar floating on top of it. 380 is the only band that satisfies both. --rv-z-sticky itself is deliberately NOT redefined. Other components read that token and none of them have this problem; changing the token to fix one component would move all of them. -------------------------------------------------------------------------- */ body.rv-petrol .rv-buybar { z-index: var(--rv-z-buybar); } /* -------------------------------------------------------------------------- 2. FOOTER CLEARANCE, ONLY WHILE THE BAR IS ACTUALLY THERE The bar is position: fixed, so it takes no space. With padding-bottom: 0 on body, the last 79px of the footer - the payment marks and the shipped from Tennessee line - sat underneath it and could not be scrolled clear. The clearance is keyed off :has(#rv-buybar:not([hidden])) rather than a body class, because [hidden] is exactly the attribute snippet 31's IntersectionObserver toggles. So the padding appears the instant the bar appears and disappears with it, and pages that never render a bar - every archive, the cart, the checkout, the whole blog - keep padding-bottom: 0 and gain no dead space at the foot. If a browser does not support :has(), nothing matches and the page behaves exactly as it does today. It degrades to the current state, not to a broken one. env(safe-area-inset-bottom) covers the iPhone home indicator. -------------------------------------------------------------------------- */ body.rv-petrol:has(#rv-buybar:not([hidden])) { padding-block-end: calc(var(--rv-buybar-h) + env(safe-area-inset-bottom, 0px)); scroll-padding-block-end: calc(var(--rv-buybar-h) + env(safe-area-inset-bottom, 0px)); } /* Woodmart's own bottom toolbar, when it is switched on, lifts the buy bar by its height (petrol-chrome-34 line 830). The clearance has to clear both. */ body.rv-petrol.sticky-toolbar-on:has(#rv-buybar:not([hidden])) { padding-block-end: calc( var(--rv-buybar-h) + var(--wd-bottom-toolbar-h, 50px) + env(safe-area-inset-bottom, 0px) ); } /* And the bar's own content clears the home indicator rather than sitting under it. Matches the 10px block padding already on .rv-buybar__inner. */ body.rv-petrol .rv-buybar__inner { padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); } /* The bar's button was 43px tall. One pixel under the minimum is still under the minimum, and this is the single most important button on the page. */ body.rv-petrol .rv-buybar__btn { min-block-size: var(--rv-tap); } /* -------------------------------------------------------------------------- 3. THE --shell PERCENTAGE TRAP, DISARMED BELOW 1025px TOO .rv2-hero__panel insets its headline with calc((100vw - var(--shell)) / 2). --shell is declared on .rv2 as a percentage expression, and a percentage inside a custom property is resolved against the element that USES the property, not the one that declares it. On desktop the panel is a 655px grid child, --shell collapsed, and the padding came out at 405px instead of 72px. rv-layout-desktop-5 pinned it above 1025px. Below 1025px the hero is currently a single column, so the same expression happens to resolve correctly. That is luck, not correctness. Pinned to the gutter token directly so there is no percentage anywhere in the chain and the headline cannot move if that grid ever gains a column at tablet width. -------------------------------------------------------------------------- */ body.rv-petrol .rv2-hero__panel { padding-inline-start: var(--rv-gutter); padding-inline-end: var(--rv-gutter); } /* -------------------------------------------------------------------------- 4. ONE MOBILE RAIL Measured at 390px before this file: .site-content 354px at x=18 (Woodmart, on --rv-gutter) .rv2-wrap 350px at x=20 (rv2, on a hardcoded 40px) .rv2-foot__grid 354px at x=18 Two pixels is not a catastrophe, but it is why a homepage band and the footer under it did not start on the same x. The rv2 shell now reads the same token as everything else, so all three land on one line at every width in this range - 18px on a phone, 20px on a tablet. min() is dropped because within this media query the 1860px arm can never win: 100% is at most 1024px here. -------------------------------------------------------------------------- */ body.rv-petrol .rv2 { --shell: calc(100% - (var(--rv-gutter) * 2)); } /* -------------------------------------------------------------------------- 5. HEADER TOUCH TARGETS, WITH THE HEADER GEOMETRY LEFT ALONE The four tool icons measured 40x40 and the logo link 24px tall. The icons have a transparent background and centre their glyph, so growing the box to 44px grows only the hit area - the glyph does not move and nothing is repainted. The header row is 80px tall, so nothing is pushed either. The container padding is NOT touched. The icons currently carry a -10px offset that puts the painted glyph at x=15, three pixels off the 18px text rail, which is already as close as it needs to be. Re-padding the container to 18px would have moved the glyph OUT to 28px and made the header worse, not better. Measured both ways before choosing. -------------------------------------------------------------------------- */ body.rv-petrol .whb-main-header .wd-tools-element > a, body.rv-petrol .whb-main-header .wd-header-mobile-nav > a { min-inline-size: var(--rv-tap); min-block-size: var(--rv-tap); } /* The logo is also a link - it is how a phone gets home - and its box was 24px tall. The image is untouched; the anchor grows around it. */ body.rv-petrol .site-logo > a, body.rv-petrol a.wd-logo { display: inline-flex; align-items: center; min-block-size: var(--rv-tap); } /* -------------------------------------------------------------------------- 6. THE ARCHIVE TOOL BAR .wd-show-sidebar-btn - the filter opener, the single most used control on a category page on a phone - measured 130x22. The sort select measured 30x30. Both are transparent, so both grow invisibly. -------------------------------------------------------------------------- */ body.rv-petrol .wd-shop-tools .wd-show-sidebar-btn, body.rv-petrol .wd-shop-tools .wd-action-btn { min-block-size: var(--rv-tap); align-items: center; } body.rv-petrol .wd-shop-tools .woocommerce-ordering { min-inline-size: var(--rv-tap); min-block-size: var(--rv-tap); align-items: center; justify-content: center; } body.rv-petrol .wd-shop-tools .woocommerce-ordering select.orderby { min-inline-size: var(--rv-tap); min-block-size: var(--rv-tap); } /* -------------------------------------------------------------------------- 7. PRODUCT CARD CONTROLS Forty add to cart buttons at 40x40 and forty wishlist buttons at 35x35 per archive page. The wishlist and compare buttons are transparent, so they grow invisibly. The add to cart button is a solid petrol square, so it does grow by four pixels a side - which is the smallest change that gets a purchase control to the documented minimum, and is the reason the minimum exists. -------------------------------------------------------------------------- */ body.rv-petrol .wd-product .wd-add-btn > a, body.rv-petrol .wd-product .wd-wishlist-btn > a, body.rv-petrol .wd-product .wd-compare-btn > a, body.rv-petrol .wd-product .wd-quick-view-btn > a { min-inline-size: var(--rv-tap); min-block-size: var(--rv-tap); } /* -------------------------------------------------------------------------- 8. THE ADD TO CART ROW ON A PRODUCT PAGE Measured at 390px: form.cart is 360px of flex with a 10px gap, holding a 80px quantity stepper, a 144px Add to cart and a 116px Buy now. That is 340 plus 20 of gap - exactly 360. It fits at 390 by one pixel and wraps badly at 360. Inside the stepper the minus and plus were 25px wide and the number field 30px. Three targets under half the minimum, side by side, on the control that decides how many of something a customer buys. The stepper is given real targets and the two buttons are allowed to take a row of their own and share it. Nothing is restyled; the row simply stops trying to hold five controls across a phone. -------------------------------------------------------------------------- */ body.rv-petrol form.cart .quantity input.minus, body.rv-petrol form.cart .quantity input.plus, body.rv-petrol .woocommerce div.product form.cart .quantity input.minus, body.rv-petrol .woocommerce div.product form.cart .quantity input.plus { min-inline-size: 40px; min-block-size: var(--rv-tap); } body.rv-petrol form.cart .quantity input.qty, body.rv-petrol .woocommerce div.product form.cart .quantity input.qty { min-inline-size: var(--rv-tap); min-block-size: var(--rv-tap); } body.rv-petrol form.cart .single_add_to_cart_button, body.rv-petrol form.cart .wd-buy-now-btn { flex: 1 1 calc(50% - 5px); min-block-size: 48px; } /* The engraving picker rendered by snippet 38. The tabs and the text field already measured 42px; four more pixels brings them to the minimum. The family crest checkbox was 13x13 - its