/* ========================================================================= Quality Auto — V30 UNIVERSAL RESPONSIVE LAYER Purpose: make every page render identically and correctly on every device (Windows PC, MacBook, iPad, Android phone, iPhone) WITHOUT changing any content, copy, image, link, colour or intended layout. This file is ADDITIVE ONLY. It is loaded LAST on every page and never deletes or replaces an existing design decision. It repairs only what was measurably broken: 1. Cross-OS rendering differences (scrollbar maths, iOS text inflation) 2. Grid / flex blow-out that caused overlapping blocks 3. The 921px-1024px navigation "dead zone" 4. Colliding floating buttons in the bottom-right corner 5. Modals / overlays cut off by mobile browser toolbars 6. Tap targets under 44px and iOS zoom-on-focus 7. One display heading that overflowed on small phones ========================================================================= */ /* ------------------------------------------------------------------------- 0. RUNTIME TOKENS --qa30-sbw scrollbar width, measured by v30-responsive-runtime.js --qa30-header-h live height of the sticky header --qa30-dock-h live height of any full-width bottom bar --qa30-fa-h live height of the floating action column ------------------------------------------------------------------------- */ :root{ --qa30-sbw:0px; --qa30-header-h:72px; --qa30-dock-h:0px; --qa30-fa-h:0px; --qa30-safe-b:env(safe-area-inset-bottom, 0px); --qa30-safe-r:env(safe-area-inset-right, 0px); --qa30-vh:100vh; --qa30-tap:44px; } @supports (height:100dvh){ :root{ --qa30-vh:100dvh; } } /* ------------------------------------------------------------------------- 1. CROSS-OS BASE NORMALISATION Windows and Linux reserve 15-17px for the scrollbar, macOS and iOS reserve zero. Every rule written in vw units therefore resolved differently on each machine. `scrollbar-gutter:stable` removes that difference. `overflow-x:clip` contains the full-bleed sections without turning the page into a scroll container, so the sticky header keeps working (unlike overflow-x:hidden). `text-size-adjust` stops iOS Safari inflating body text on its own. ------------------------------------------------------------------------- */ html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable; -webkit-tap-highlight-color:rgba(19,118,109,.16); } @supports (overflow-x:clip){ html, html body.qa19-page{ overflow-x:clip !important; } } @supports not (overflow-x:clip){ html{ overflow-x:hidden; } } html body.qa19-page{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ------------------------------------------------------------------------- 2. FULL-BLEED SECTIONS — SCROLLBAR-CORRECTED The internal footer used `width:100vw` with `margin: … calc(50% - 50vw) …`. On Windows that is ~15px wider than the page on each side, which pushed the whole layout sideways and produced a horizontal scrollbar. Subtracting the measured scrollbar makes PC and MacBook resolve to the same pixel. Only the horizontal values are touched; vertical spacing is untouched. ------------------------------------------------------------------------- */ html body.qa19-internal-page .footer-rich, html body.qa19-internal-page .footer-note{ width:auto !important; max-width:none !important; margin-left:calc(50% - 50vw + (var(--qa30-sbw) / 2)) !important; margin-right:calc(50% - 50vw + (var(--qa30-sbw) / 2)) !important; padding-left:max(24px, calc((100vw - var(--qa30-sbw) - var(--qa19-max, 1240px)) / 2 + 24px)) !important; padding-right:max(24px, calc((100vw - var(--qa30-sbw) - var(--qa19-max, 1240px)) / 2 + 24px)) !important; } /* The hero gutter uses the same maths. Desktop only — the phone and tablet paddings are fixed pixel values and are left exactly as designed. */ @media (min-width:1025px){ html body.qa19-home-page .qa19-hero-copy{ padding-left:max(32px, calc((100vw - var(--qa30-sbw) - var(--qa19-max, 1240px)) / 2 + 24px)) !important; } } /* ------------------------------------------------------------------------- 3. GRID / FLEX BLOW-OUT GUARD Grid and flex items default to `min-width:auto`, so a long price string, heading or image refuses to shrink and pushes its neighbours out of the container. This is the direct cause of the overlapping blocks on phones. No column counts are changed here — only the ability of a cell to shrink. ------------------------------------------------------------------------- */ html body.qa19-page :is( .qa19-shell, .qa19-header-inner, .topbar, .header-inner, .qa19-hero, .qa19-hero-copy, .qa19-proof, .qa19-price-rail, .qa19-intro, .qa19-intro-heading, .qa19-service-grid, .qa19-trust-grid, .qa19-review-grid, .qa19-review-cta, .qa19-contact-grid, .qa19-location-layout, .qa19-location-list, .qa19-footer-grid, .qa19-footer-bottom, .qa19-free-grid, .qa24-hours-inner, .qa19-offerbar-inner, .utility-strip-inner, .qa19-header-actions, .qa19-hero-actions, .qa19-form-grid, .floating-actions, .offer-sticky-bar, .breadcrumbs, .qa19-location-info-row, .qa19-review-actions, .qa19-contact-cta-row ) > *{ min-width:0; } html body.qa19-page :is([class*="-grid"], [class*="grid-"], [class*="-row"], [class*="-columns"]) > *{ min-width:0; } /* Long words, prices, phone numbers, emails and URLs stay inside their box. */ html body.qa19-page :is(h1,h2,h3,h4,h5,h6,p,li,td,th,dd,dt,summary,label,figcaption,blockquote, .qa19-hero-lead,.qa19-hero-tagline,.qa19-shopline,.qa19-kicker){ overflow-wrap:break-word; word-break:normal; } html body.qa19-page :is(a[href^="mailto:"], a[href^="tel:"], .qa19-contact-big, .qa19-contact-row){ overflow-wrap:anywhere; } /* ------------------------------------------------------------------------- 4. MEDIA SAFETY — nothing is removed, only constrained to its container. ------------------------------------------------------------------------- */ html body.qa19-page :is(img,svg,video,canvas,picture,iframe,embed,object){ max-width:100%; } html body.qa19-page iframe{ width:100%; max-width:100%; border:0; display:block; } /* Images shipped without width/height attributes keep their aspect ratio. */ html body.qa19-page :is(.gallery-grid, .brand-grid, .brands-grid, .qr-grid, .offer-grid) img{ height:auto; } /* ------------------------------------------------------------------------- 5. ONE NAVIGATION BREAKPOINT FOR EVERY PAGE (<= 1024px) Before: the home page switched to the hamburger at 920px and the internal pages at 980px. Between 921px and 1024px (iPad landscape, a half-width MacBook window, most Android tablets) the full menu was still forced into the header, where it overlapped the logo and the call button. A single breakpoint removes that dead zone and makes every page behave the same. ------------------------------------------------------------------------- */ @media (max-width:1024px){ html body.qa19-page :is(.qa19-menu, .nav-toggle){ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; padding:0 !important; flex:0 0 auto !important; cursor:pointer; } html body.qa19-page :is(#site-nav, .qa19-nav){ display:none !important; position:fixed !important; top:calc(var(--qa30-header-h) + 8px) !important; left:12px !important; right:12px !important; bottom:auto !important; width:auto !important; max-width:none !important; max-height:calc(var(--qa30-vh) - var(--qa30-header-h) - 24px) !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:0 !important; padding:10px !important; background:#102826 !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:16px !important; box-shadow:0 28px 80px rgba(0,0,0,.40) !important; z-index:1200 !important; } html body.qa19-page :is(#site-nav, .qa19-nav).open{ display:flex !important; } html body.qa19-page :is(#site-nav, .qa19-nav) > a, html body.qa19-page :is(#site-nav, .qa19-nav) > details > summary{ display:flex !important; align-items:center !important; width:100% !important; min-height:var(--qa30-tap) !important; padding:13px 12px !important; margin:0 !important; color:#ffffff !important; font-size:16px !important; border:0 !important; border-bottom:1px solid rgba(255,255,255,.12) !important; border-radius:0 !important; background:transparent !important; list-style:none !important; text-align:left !important; } html body.qa19-page :is(#site-nav, .qa19-nav) > a:last-child{ border-bottom:0 !important; } html body.qa19-page :is(#site-nav, .qa19-nav) > a::after{ display:none !important; } /* The "More" dropdown becomes a plain expanding block inside the drawer. */ html body.qa19-page :is(#site-nav, .qa19-nav) .nav-dropdown-menu{ position:static !important; display:grid !important; width:100% !important; min-width:0 !important; margin:0 0 6px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#0b1f1d !important; box-shadow:none !important; transform:none !important; opacity:1 !important; visibility:visible !important; } html body.qa19-page :is(#site-nav, .qa19-nav) .nav-dropdown-menu > a{ display:flex !important; align-items:center !important; min-height:var(--qa30-tap) !important; padding:12px 18px !important; color:#dfe7e5 !important; border-bottom:1px solid rgba(255,255,255,.07) !important; } /* While the drawer is open the page behind it must not scroll. */ html body.qa19-page.qa30-nav-open{ overflow:hidden !important; touch-action:none; } html body.qa19-page .qa30-nav-scrim{ position:fixed !important; inset:0 !important; z-index:1190 !important; background:rgba(6,18,17,.52); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border:0; padding:0; margin:0; } /* The header row must never crush its own contents. The nav is out of flow at this width, so the brand takes the flexible track. */ html body.qa19-page :is(.qa19-header-inner, .topbar, .header-inner){ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:10px !important; } html body.qa19-page .qa19-header-actions{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; min-width:0 !important; } html body.qa19-page :is(.qa19-brand-link, .brand-link){ min-width:0 !important; } html body.qa19-page :is(.qa19-brand-copy strong, .brand b){ display:block !important; white-space:normal !important; overflow-wrap:break-word !important; font-size:clamp(15px, 3.4vw, 20px) !important; line-height:1.14 !important; } } /* Above the breakpoint the menu is always the horizontal bar, never a drawer. */ @media (min-width:1025px){ html body.qa19-page :is(.qa19-menu, .nav-toggle){ display:none !important; } html body.qa19-page :is(#site-nav, .qa19-nav){ position:static !important; display:flex !important; flex-direction:row !important; max-height:none !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; z-index:auto !important; } html body.qa19-page .qa30-nav-scrim{ display:none !important; } } /* ------------------------------------------------------------------------- 6. FLOATING CONTROL STACK Floating controls are stacked in one deterministic column measured at runtime. ------------------------------------------------------------------------- */ /* Layer order, lowest to highest. */ html body.qa19-page :is(.qa19-mobile-dock, .offer-sticky-bar){ z-index:1000 !important; } html body.qa19-page :is(.back-to-top, .qa19-backtop, .qa19-free-tab){ z-index:1010 !important; } html body.qa19-page .floating-actions{ z-index:1020 !important; } html body.qa19-page .qa-search-btn{ z-index:1040 !important; } /* Reserve room at the end of the page for whichever bottom bar is present. */ html body.qa19-page{ padding-bottom:calc(var(--qa30-dock-h) + var(--qa30-safe-b) + 8px) !important; } /* Bottom bars respect the iPhone home indicator. */ html body.qa19-page .qa19-mobile-dock{ padding-bottom:var(--qa30-safe-b) !important; } /* Back-to-top: left column, always clear of the bottom bar. */ html body.qa19-page :is(.back-to-top, .qa19-backtop){ bottom:calc(var(--qa30-dock-h) + var(--qa30-safe-b) + 14px) !important; width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; display:grid !important; place-items:center !important; padding:0 !important; } /* Call / Directions column sits directly above the bottom bar. */ html body.qa19-page .floating-actions:not(.qa30-is-bar){ bottom:calc(var(--qa30-dock-h) + var(--qa30-safe-b) + 14px) !important; right:calc(14px + var(--qa30-safe-r)) !important; left:auto !important; } /* Site search keeps its desktop mid-right position and joins the stack on tablet and phone. */ @media (max-width:1024px){ html body.qa19-page .qa-search-btn{ top:auto !important; transform:none !important; right:calc(14px + var(--qa30-safe-r)) !important; left:auto !important; bottom:calc(var(--qa30-dock-h) + var(--qa30-fa-h) + var(--qa30-safe-b) + 80px) !important; width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; } html body.qa19-page .qa-search-btn:hover{ transform:scale(1.04) !important; } } /* ------------------------------------------------------------------------- 7. OVERLAYS, MODALS AND PANELS On mobile Safari and Chrome, `vh` refers to the viewport WITHOUT the address bar, so panels sized in vh were taller than the visible screen and their close button ended up underneath the browser toolbar — which is why tapping a price card opened a panel that could not be read or dismissed. `dvh` tracks the real visible area on every browser. ------------------------------------------------------------------------- */ html body.qa19-page .price-detail-panel{ z-index:1500 !important; } html body.qa19-page .pdp-sheet{ max-height:calc(var(--qa30-vh) - 24px) !important; padding-bottom:calc(32px + var(--qa30-safe-b)) !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } html body.qa19-page .pdp-close{ width:var(--qa30-tap) !important; height:var(--qa30-tap) !important; min-width:var(--qa30-tap) !important; min-height:var(--qa30-tap) !important; font-size:16px !important; top:12px !important; right:12px !important; } /* Artwork mode: centre the image and keep the close button on the artwork instead of at the far edge of the screen. */ html body.qa19-page .price-detail-panel.pdp-image-mode .pdp-sheet{ position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; width:max-content !important; max-width:min(1120px, calc(100vw - var(--qa30-sbw) - 32px)) !important; max-height:calc(var(--qa30-vh) - 32px) !important; padding:0 !important; margin:0 !important; overflow:visible !important; } html body.qa19-page .price-detail-panel.pdp-image-mode .pdp-service-image{ max-width:min(1120px, calc(100vw - var(--qa30-sbw) - 32px)) !important; max-height:calc(var(--qa30-vh) - 32px) !important; } /* Site search overlay. */ html body.qa19-page .header-search-panel{ z-index:1550 !important; overflow-y:auto !important; overscroll-behavior:contain; } html body.qa19-page .header-search-box{ max-height:calc(var(--qa30-vh) - 12vh - 24px) !important; overflow-y:auto !important; margin-bottom:24px !important; } html body.qa19-page .header-search-results{ max-height:none !important; } html body.qa19-page .header-search-close{ width:var(--qa30-tap) !important; height:var(--qa30-tap) !important; min-width:var(--qa30-tap) !important; min-height:var(--qa30-tap) !important; } html body.qa19-page :is(.tire-size-search-panel, .qa19-form-panel){ max-width:100% !important; min-width:0 !important; } /* ------------------------------------------------------------------------- 8. TAP TARGETS AND FORM BEHAVIOUR Any input under 16px makes iOS Safari zoom the entire page on focus, which is why the layout "jumped" and looked different after tapping a field. ------------------------------------------------------------------------- */ @media (max-width:1024px){ html body.qa19-page :is(input, select, textarea){ font-size:16px !important; max-width:100% !important; min-height:var(--qa30-tap) !important; } html body.qa19-page :is( .btn, .qa19-btn, .float-btn, .nav-toggle, .qa19-menu, .pdp-close, .price-filter-tab, .search-tag, .qa-search-btn, .header-search-close, .offer-claim-btn, .offer-directions-btn, .back-to-top, .qa19-backtop ){ min-height:var(--qa30-tap) !important; } } /* ------------------------------------------------------------------------- 9. HORIZONTAL STRIPS AND WIDE TABLES Strips that must stay on one line scroll instead of overflowing the page. The price comparison table gets a scroll container added at runtime — no row, cell or value is altered. ------------------------------------------------------------------------- */ html body.qa19-page :is(.qa24-hours-inner, .utility-strip-inner, .breadcrumbs){ max-width:100% !important; overflow-x:auto !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; } html body.qa19-page :is(.qa24-hours-inner, .utility-strip-inner, .breadcrumbs)::-webkit-scrollbar{ display:none; } html body.qa19-page .qa30-tablewrap{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ------------------------------------------------------------------------- 10. SMALL PHONES (<= 400px) — iPhone SE, Galaxy A, older Android The pull-quote is set at a fixed 72px below 640px. On a 320-360px screen a single line of it is wider than the page, which broke the section open. Only this one heading is rescaled; every other type size is untouched. ------------------------------------------------------------------------- */ @media (max-width:400px){ html body.qa19-page .qa19-trust blockquote{ font-size:clamp(38px, 12vw, 62px) !important; line-height:.92 !important; } } /* ------------------------------------------------------------------------- 11. FOCUS — consistent, visible keyboard outline on every browser. ------------------------------------------------------------------------- */ html body.qa19-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:3px solid var(--qa19-yellow, #e7bb4e) !important; outline-offset:2px !important; } @media (prefers-reduced-motion:reduce){ html body.qa19-page *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ------------------------------------------------------------------------- 12. PRINT — unchanged behaviour, floating controls simply hidden. ------------------------------------------------------------------------- */ @media print{ html body.qa19-page :is( .qa-search-btn, .floating-actions, .qa19-mobile-dock, .back-to-top, .qa19-backtop, .qa19-free-tab, .qa30-nav-scrim ){ display:none !important; } html body.qa19-page{ padding-bottom:0 !important; } } /* ========================================================================= 13. TARGETED MOBILE REPAIR PASS — 2026-09-14 Scope is deliberately narrow: mobile drawer stacking, breadcrumb flow, tire-size finder presentation, and offer date/countdown legibility only. ========================================================================= */ /* Mobile drawer: the sticky header is its own stacking context. When the scrim is appended to , it must stay below that context or it blurs and intercepts the drawer itself. Raise only the header while the drawer is open; search/modals remain above it via their existing 1500+ layers. */ @media (max-width:1024px){ html body.qa19-page.qa30-nav-open :is(header.site-header, .site-header, .qa19-header){ z-index:1210 !important; } html body.qa19-page.qa30-nav-open .qa30-nav-scrim{ z-index:1190 !important; } html body.qa19-page.qa30-nav-open :is(#site-nav, .qa19-nav){ z-index:1220 !important; } } /* Breadcrumbs are semantic