/** * assets/css/hqt-mobile.css — THE MOBILE LAYER (built to mockups/mobile/, approved 2026-07-28) * * Purpose : ~95% of visitors are on phones. This sheet turns the desktop-first * layout into an app-like mobile experience: a sticky bottom dock, * product cards that carry their rating, tall vertical stacks turned * into swipe rails, and a WhatsApp button that no longer covers the * ADD button. * * THE ONE RULE: every visual rule lives inside @media (max-width: 768px). * The founder's verdict is that desktop is already right, so desktop * must come out of this byte-identical. The only rules outside the * media query are BASE HIDES — they stop mobile-only markup (the dock, * the card rating row) from ever appearing on desktop. * * Loaded : last, at wp_enqueue_scripts priority 999, so it wins the cascade * against every earlier sheet without needing !important everywhere. * Inputs : tokens from hqt-tokens.css. No new colours are invented here. * Refs : mockups/mobile/_sys.css (the approved contract) · ledger row 84. */ /* ============================================================ BASE (all viewports) — keep mobile-only furniture off desktop ============================================================ */ .hqt-dock { display: none; } .hqt-home__pcrate { display: none; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 768px) { /* ---- 1 · BOTTOM DOCK ------------------------------------------------- The single biggest "feels like an app" signal, and the thing the competitor audit found we lacked entirely. Thumb-reachable, always there. */ .hqt-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: grid; grid-template-columns: repeat(5, 1fr); height: 58px; background: #fff; border-top: 1px solid var(--hqt-line, #e3e8db); box-shadow: 0 -2px 14px rgba(45, 80, 22, .07); padding-bottom: env(safe-area-inset-bottom, 0); } .hqt-dock__i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; text-decoration: none; color: var(--hqt-soft, #55613f); font-family: var(--hqt-ff-body, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; } .hqt-dock__i.is-on { color: var(--hqt-forest, #2d5016); } .hqt-dock__i.is-on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hqt-mid, #6ba62f); } .hqt-dock__i svg { width: 21px; height: 21px; display: block; } /* Keyboard focus. The browser default ring already renders — nothing in this theme resets outline — so this is polish, not a rescue. But the dock is the site's primary navigation and it was the last interactive component without the brand ring the rest of the site uses (matches hqt-drawer.css:77). :focus-visible, never :focus, so a thumb tap never leaves a ring stuck on a dock item. Negative offset keeps the ring inside the 58px bar instead of bleeding over the content above it. */ .hqt-dock__i:focus-visible { outline: 2px solid var(--hqt-mid, #6ba62f); outline-offset: -3px; border-radius: 6px; } .hqt-dock__n { position: absolute; top: 5px; right: 50%; margin-right: -19px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--hqt-pink, #e91e63); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; } /* every page reserves room so the dock never covers the last element */ body.hqt { padding-bottom: 58px; } /* ---- 2 · WHATSAPP — off the ADD button ------------------------------- Measured on staging: the FAB sat bottom-LEFT at 56px and hit-tested as covering the left product card's ADD+ button, so that tap opened WhatsApp instead of adding to cart. Moved right and lifted above the dock. !important is deliberate: hqt-tokens.css and hqt-pdp.css already set left/bottom on this element and this sheet must win without editing them. */ .hqt-wa, .hqt-wa--icon { left: auto !important; right: 14px !important; bottom: 72px !important; } .hqt-wa--icon { width: 48px; height: 48px; } .hqt-wa--icon svg { width: 26px; height: 26px; } /* the PDP's sticky buy bar sits above the dock, so the FAB clears both */ .single-product .hqt-wa { bottom: 130px !important; } /* ---- 3 · STICKY BARS sit ABOVE the dock, never underneath it ---------- */ .hqt-pdp-sticky { bottom: 58px !important; } /* ---- 4 · PRODUCT CARD RATING ---------------------------------------- Rendered from the founder's DATED marketplace figures through hqt_featured_rating(). Products with no qualifying platform render no rating row at all — a missing star row is correct, never a filled-in guess. The platform is always named, because these are listing ratings from Amazon/Flipkart, not on-site reviews (we have none yet). */ .hqt-home__pcrate { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; color: var(--hqt-soft, #55613f); margin: 2px 0 4px; } .hqt-home__pcrate b { color: var(--hqt-ink, #1e2417); font-weight: 700; } .hqt-home__pcrate .hqt-stars { font-size: 12px; } .hqt-home__pcrate small { font-size: 10.5px; opacity: .85; } /* ---- 5 · SWIPE RAILS ------------------------------------------------- The single biggest length saving. Measured on staging, the mobile home ran 12,509px = 14.8 screens against Blue Tea's 9.9 — because every row that is a grid on desktop collapses to a ONE-COLUMN STACK on phones (hqt-home.css line 156). Shop-by-type alone cost 2,297px — 2.7 screens — to show four tiles. A horizontal scroll-snap rail keeps every item reachable while costing one screen instead of three. CSS-only on purpose: no template is touched, so there is nothing to break server-side and desktop cannot be reached from inside this media query. */ .hqt-home__cards:not(.hqt-shop__grid), .hqt-home__tiles, .hqt-home__blog, .hqt-home__ritualsteps, .hqt-mstrip__row { display: grid !important; /* beats the 1fr stack set at 600px */ grid-auto-flow: column; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* bleed to the screen edge so a peeking card signals "swipe me" */ margin-left: -16px; margin-right: -16px; padding: 2px 16px 8px; } .hqt-home__cards:not(.hqt-shop__grid)::-webkit-scrollbar, .hqt-home__tiles::-webkit-scrollbar, .hqt-home__blog::-webkit-scrollbar, .hqt-home__ritualsteps::-webkit-scrollbar, .hqt-mstrip__row::-webkit-scrollbar { display: none; } .hqt-home__cards:not(.hqt-shop__grid) > *, .hqt-home__tiles > *, .hqt-home__blog > *, .hqt-home__ritualsteps > *, .hqt-mstrip__row > * { scroll-snap-align: start; } /* Card width per row. A partially visible next card is deliberate: it is the only honest affordance that more exists to the right. */ .hqt-home__cards:not(.hqt-shop__grid) { grid-auto-columns: 63%; gap: 12px; } .hqt-home__tiles { grid-auto-columns: 46%; gap: 12px; } .hqt-home__blog { grid-auto-columns: 62%; gap: 12px; } .hqt-home__ritualsteps { grid-auto-columns: 46%; gap: 10px; } .hqt-mstrip__row { grid-auto-columns: 78%; gap: 12px; } /* /shop/ stays a two-up GRID. It shares the .hqt-home__cards class with the home rows, so without this it would become a swipe strip and hide the whole 18-product catalogue behind horizontal scrolling. Browsing all teas is a grid job; a home row is a rail job. Matches the approved shop mockup. */ .hqt-home__cards.hqt-shop__grid { display: grid !important; grid-auto-flow: row; grid-template-columns: 1fr 1fr !important; gap: 12px; overflow: visible; margin: 0; padding: 0; } /* .hqt-home__reelrow is ALREADY a scroll-snap rail in hqt-home.css — left alone on purpose rather than declared twice. */ /* ---- 6 · PDP RAILS --------------------------------------------------- Same disease as the home page, different stylesheet: hqt-pdp.css line 178 collapses the benefit grid, ritual grid and suitability grid to a single column at 860px, and line 214 does the same to the marketplace score cards — which is why the live PDP measured 13,057px / 12.4 screens with individual sections running 1,468 / 1,533 / 1,602 / 1,411px. NOT railed on purpose: .hqt-pdp__fbt (bought-together). That is a two-item comparison pair where seeing both at once IS the point; railing it would hide half the comparison behind a swipe. */ .hqt-pdp__bengrid, .hqt-pdp__ritgrid, .hqt-pdp__suit, .hqt-mrv__grid { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px 8px; } .hqt-pdp__bengrid::-webkit-scrollbar, .hqt-pdp__ritgrid::-webkit-scrollbar, .hqt-pdp__suit::-webkit-scrollbar, .hqt-mrv__grid::-webkit-scrollbar { display: none; } .hqt-pdp__bengrid > *, .hqt-pdp__ritgrid > *, .hqt-pdp__suit > *, .hqt-mrv__grid > * { scroll-snap-align: start; } .hqt-pdp__bengrid { grid-auto-columns: 62%; gap: 12px; } .hqt-pdp__ritgrid { grid-auto-columns: 62%; gap: 12px; } .hqt-pdp__suit { grid-auto-columns: 66%; gap: 12px; } .hqt-mrv__grid { grid-auto-columns: 72%; gap: 12px; } /* ---- 7 · TAP TARGETS ------------------------------------------------- Measured on the live PDP: the gallery prev/next arrows rendered 34px tall, under the 44px a thumb needs. They were the only primary control failing. The 7px gallery dots are indicators, not controls, and are left as they are. */ .hqt-pdp__galnav { min-width: 44px; min-height: 44px; display: grid; place-items: center; } /* ---- 8 · COMMERCE FORMS — the iOS zoom trap ------------------------- Measured on the live checkout: the state, country and address-type SELECTS compute to 13.86px. Safari on iOS auto-zooms the whole page whenever a focused field is under 16px, which throws the customer out of the layout mid-checkout and is one of the classic mobile conversion killers. The text inputs already cleared 16px; only the selects failed. 16px here is a functional threshold, not a style choice. */ .woocommerce-checkout select, .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="number"], .woocommerce-checkout textarea, .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-cart input[type="text"] { font-size: 16px !important; } /* ---- 9 · CART QUANTITY STEPPERS ------------------------------------- Measured at 38px on the live cart — under the 44px minimum, and these are the controls a customer taps most often before paying. */ .hqt-cart__qty button, .hqt-qty button, .quantity .qty-btn, .quantity button { min-width: 44px; min-height: 44px; } /* ---- 10 · ACCOUNT LOGIN -------------------------------------------- "Log in" measured 39px. Same reasoning as above: it is the gate to every returning customer's order history. */ .woocommerce-account .woocommerce-Button, .woocommerce-account button[type="submit"], .woocommerce-form-login button[type="submit"] { min-height: 44px; } /* ================================================================ 11 · DOCK COLLISIONS — found by the phase re-audit 2026-07-28 and each MEASURED live, not assumed. The dock is fixed at the bottom with z-index 9990, so anything else anchored to the viewport bottom collides with it. ================================================================ */ /* (a) GIFT BUILDER — was fully blocked, the worst defect of the build. MEASURED: .hqt-gift__summary is fixed bottom:0 (z 50); its CTA rendered at 792-832px while the dock starts at 786px, and elementsFromPoint at the button's CENTRE returned .hqt-dock__i. The entire gift-box purchase path was unreachable on a phone. Same treatment the PDP buy bar already had. */ .hqt-gift__summary { bottom: 58px !important; } /* (b) CART DRAWER — the drawer (z 95) loses to the dock (z 9990), so the bottom 15px of its Checkout CTA was swallowed (measured: button 744-801, dock top 786; a probe 5px above the button's lower edge returned .hqt-dock__i). The drawer is a modal and the dock is not part of it, so the dock should not be there at all while it is open. Sibling selector: footer.php prints #hqt-dw (line 129) BEFORE the dock (line 136), so `~` reaches it. Chosen over :has() for older Android WebView, and over a JS class so there is no new wiring. */ #hqt-dw:not([hidden]) ~ .hqt-dock { display: none; } /* (d) CART PAGE DEAD SPACE — the cart wrapper reserves its own bottom padding and body now adds 58px for the dock, so the two stacked into a large empty band at the end of the cart, which is the opposite of what this pass is for. Selector note: the live rule is `.woocommerce-cart .custom-cart-page` (hqt-cart.css line 26, padding 28px 20px 70px). A bare `.custom-cart-page` here lost on specificity and measured no change — matched it instead. The auditor cited woocommerce-cart.css's 80px, but that legacy value is not the one that wins; measuring beat reading. */ .woocommerce-cart .custom-cart-page { padding-bottom: 20px; } /* (c) SEARCH RESULTS — must NOT be a rail. MEASURED on /?s=rose: 2 matches, 1 visible, 1 hidden behind a horizontal swipe. search.php emits `hqt-home__cards hqt-search__prods`, which the M3 rail's :not(.hqt-shop__grid) exclusion missed. Search is an arbitrary-length paginated result set — the same browsing job as /shop/, not a curated 3-4 item home row. */ .hqt-home__cards.hqt-search__prods { display: grid !important; grid-auto-flow: row; grid-template-columns: 1fr 1fr !important; gap: 12px; overflow: visible; margin: 0; padding: 0; } } /* ================================================================ 12 · TABLET BAND 769-860px — also found by the phase re-audit. hqt-pdp.css line 178 collapses the PDP benefit/ritual/suitability grids to ONE COLUMN at max-width:860px, but the rails above only begin at 768px. Between 769 and 860 (10in Android portrait, unfolded foldables) those sections got the tall single-column stack with none of the rail relief — the very problem the rails exist to solve, left uncovered. hqt-cart.css line 218 shares that 860px boundary, so the 38px quantity steppers survived there too. This block covers ONLY that gap: it cannot reach <=768 (already handled above) and cannot reach >860 (desktop stays untouched). ================================================================ */ @media (min-width: 769px) and (max-width: 860px) { .hqt-pdp__bengrid, .hqt-pdp__ritgrid, .hqt-pdp__suit { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 46%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hqt-pdp__bengrid::-webkit-scrollbar, .hqt-pdp__ritgrid::-webkit-scrollbar, .hqt-pdp__suit::-webkit-scrollbar { display: none; } .hqt-pdp__bengrid > *, .hqt-pdp__ritgrid > *, .hqt-pdp__suit > * { scroll-snap-align: start; } /* same 44px thumb minimum as the phone band */ .hqt-cart__qty button, .hqt-qty button, .quantity button { min-width: 44px; min-height: 44px; } }