/* USBM_NAVBAR_HEIGHT — match the blue menu bar height to the top trust strip (50px). DESKTOP ONLY: below 981px the nav must be free to grow so the mobile burger menu can expand. Remove this block to revert. */ @media (min-width: 981px){ .mm-nav, .mm-nav .mm-inner{height:50px !important; min-height:50px !important;} .mm-nav .mm-top, .mm-nav .mm-item{height:50px !important;} .mm-nav .mm-link{padding-top:0 !important; padding-bottom:0 !important; height:50px !important; display:flex; align-items:center; font-size:16px !important;} .mm-nav .mm-inner{padding-left:32px !important;} } /* USBM_CONTENT_WIDTH — readable layout for blog posts & legal/info pages */ .section .container .entry{max-width:760px} .pgs-sec .container.pgs-prose{max-width:var(--container)} .pgs-sec .container.pgs-prose>*{max-width:800px} /* USBM_LOGO_GROW — header logo +20% at top, shrinks to current size when scrolled */ .header{z-index:200} .mm-nav{z-index:50} .header .brand-logo{transition:width .2s ease} body.usbm-top .header .brand-logo{width:190px !important;height:auto !important;max-height:none !important} /* USBM_SEARCH_FIX — WP adds class "search" to on search-results pages, colliding with the header form.search box rule in site.css and crushing the page to 400px. Reset the body. */ body.search{flex:none !important;width:auto !important;max-width:none !important;min-width:0 !important;margin-inline:0 !important;position:static !important} /* USBM_NAV_ICONS — line icons before each top-level nav label (Lucide, recolourable masks) */ .mm-nav a.mm-link::before{content:"";display:inline-block;width:18px;height:18px;margin-right:9px;vertical-align:-4px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain} .mm-nav a.mm-link[href$="/usb-sticks"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%227%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M4.7%2019.3%2019%205%22%2F%3E%3Cpath%20d%3D%22m21%203-3%201%202%202%201-3z%22%2F%3E%3Cpath%20d%3D%22M9.26%207.68%205%2012l2%205%22%2F%3E%3Cpath%20d%3D%22m10%2014%205%202%203.5-3.5%22%2F%3E%3Cpath%20d%3D%22m18%2012%201-1%201%201-1%201z%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%227%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M4.7%2019.3%2019%205%22%2F%3E%3Cpath%20d%3D%22m21%203-3%201%202%202%201-3z%22%2F%3E%3Cpath%20d%3D%22M9.26%207.68%205%2012l2%205%22%2F%3E%3Cpath%20d%3D%22m10%2014%205%202%203.5-3.5%22%2F%3E%3Cpath%20d%3D%22m18%2012%201-1%201%201-1%201z%22%2F%3E%3C%2Fsvg%3E')} .mm-nav a.mm-link[href$="/power-banks"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E')} .mm-nav a.mm-link[href$="/branded-tech"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.01%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.01%22%2F%3E%3C%2Fsvg%3E')} .mm-nav a.mm-link[href$="/usb-packaging"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%2F%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%2F%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E')} .mm-nav a.mm-link[href$="/express-usb-sticks"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22%2F%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22%2F%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M15%209c-1.08%201.62%200%205%200%205s3.03-.55%204-2c1.08-1.62%200-5%200-5%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22%2F%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22%2F%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M15%209c-1.08%201.62%200%205%200%205s3.03-.55%204-2c1.08-1.62%200-5%200-5%22%2F%3E%3C%2Fsvg%3E')} .mm-nav a.mm-link[href$="/usbs-for-photographers"]::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E')} /* USBM_NAV_CARET — dropdown arrow +35% (11px -> 14.85px) */ .mm-nav .mm-caret{font-size:14.85px;line-height:1} /* USBM_HOVER_DELAY: slight show-delay on hover cards (instant hide) so they don't trigger on a quick mouse sweep */ #colOpts .swatch > .bh, #usbVerOpts .opt > .bh, #brOpts .opt > .bh { transition-delay: 0s; } #colOpts .swatch:hover > .bh, #usbVerOpts .opt:hover > .bh, #brOpts .opt:hover > .bh { transition-delay: .2s; } .fil-sw .fil-sw-card { transition-delay: 0s; } .fil-sw:hover .fil-sw-card { transition-delay: .2s; } /* USBM_MOBILE_QUOTE_CTA — below 640px the header "Request a Quote" cannot fit (it needs ~159px but only ~92px remains) and was being clipped off-screen. Hide it there and show the quote button that header.php injects into the category nav bar instead, where there is room beside the burger. Nothing changes above 640px. Remove this block (and the matching block in header.php) to revert. */ @media (max-width: 640px){ .header .h-right .btn.btn-cta{display:none !important;} .mm-quote.btn.btn-cta{display:inline-flex !important;} } @media (min-width: 641px){ .mm-quote.btn.btn-cta{display:none !important;} } /* USBM_MOBILE_OVERFLOW — fixes the page being swipeable left/right on iOS. (1) ROOT LOCK: the site relied on body{overflow-x:clip}, but WebKit does NOT propagate the body overflow to the viewport (Chromium does), so Safari had nothing holding the page. overflow-x:clip on html applies to the viewport in every engine. It MUST be clip, never hidden - hidden creates a scroll container and would break the sticky header. Vertical scrolling is unaffected (verified). (2) The real overflow sources on mobile, so there is nothing to pan to in the first place: .u-right = 4 utility links locked to one nowrap line (+45px, site-wide; they are also in the footer). .qx-grid child = grid item with min-width:auto that could not shrink (+57px). .acc-vis = collapses to 0 width on mobile but its absolutely-positioned .tagpill escaped (+37px). Remove this block to revert. */ html{overflow-x:clip;} .qx-grid>*{min-width:0;} @media (max-width: 1024px){ /* the trust strip un-hides all 5 items above 640px, so u-left(710px)+u-right(277px)=987px does not fit until ~1000px. These 4 links are duplicated in the footer. */ .utility .u-right{display:none !important;} } @media (max-width: 640px){ /* USBM_MOBILE_UTILITY_BAR — on phones the navy utility bar rendered ONE trust line ("Factory Direct Pricing") with ~300px of empty navy beside it, costing 38px directly above the sticky header. The other 4 trust items were already display:none at this width, and the 4 links are duplicated in the footer. The trust points also have a proper home in the 8-benefit trust band (usbm_render_trust_benefits). So the bar earns nothing on a phone. Hidden <=640px only — it still shows in full from 641px up (all 5 trust items), and the links return from 1025px. Remove this rule to revert. */ .utility{display:none !important;} .acc-vis{display:none !important;} /* "Step 1 of 1 - takes less than 1 minute" is nowrap and ran 73px past its flex parent, so it was being clipped mid-sentence. Let it wrap. */ .qx-step{white-space:normal !important;} } /* USBM_IOS_INPUT_ZOOM — iOS Safari force-zooms the page whenever a text field with a font-size under 16px receives focus. Every field on both quote forms was 14-15px (and the header search 15px), so tapping any of them zoomed the page in and the user had to pinch back out — on the main conversion path. 16px is the iOS threshold, not a design choice. Scoped to <=980px so desktop typography is completely unchanged. Verified: 33 sub-16px fields -> 0, no new clipping, field height only 44px -> 45px. Remove this block to revert. */ @media (max-width: 980px){ input[type="text"],input[type="search"],input[type="email"],input[type="tel"], input[type="url"],input[type="password"],input[type="number"],input[type="date"], input[type="datetime-local"],input[type="month"],input[type="time"],input[type="week"], input:not([type]),select,textarea{font-size:16px !important;} } /* USBM_MOBILE_HEADER — mobile header consolidated to ONE bar: logo .......... [basket][burger]. header.php lifts the burger out of the blue nav bar into .h-right (safe because megamenu.js now uses document.querySelector for it). The "Request a Quote" pill was removed from the nav bar. With the burger gone, the blue nav bar would otherwise leave an empty ~56px navy strip, so it is collapsed to nothing when closed — it must NOT be display:none because the menu list lives in it and still has to expand on tap. Remove this block to revert. */ @media (max-width: 980px){ .header .h-right{align-items:center !important;gap:10px !important;} .header .h-right .usbm-bag{order:1 !important;} .header .h-right .mm-burger{order:2 !important;} .mm-nav{min-height:0 !important;} .mm-nav .mm-inner{min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;} } /* USBM_MOBILE_HEADER_PAIR — basket + burger as one matched pair on mobile. The basket carries position:relative;top:5px (nudged it 5px below the burger) and a margin-right:10px that doubled the flex gap to 20px; the burger carries margin:8px 0 and was 38px tall vs the basket's 42px. Neutralise all four so both boxes are 42px, share one top/bottom edge, and sit 10px apart with the burger to the right. Remove this block to revert. */ @media (max-width: 640px){ /* breathing room between the basket and the burger (the ≤980 block sets gap:10px; tablet keeps that) */ .header .h-right{gap:14px !important;} .header .h-right .usbm-bag{position:relative !important;top:0 !important;margin:0 !important;} .header .h-right .mm-burger{margin:0 !important;} /* match the basket's box: the burger had no border and radius 8 vs the basket's 1px #cdd6e4 + radius 11 */ .header .h-right .mm-burger{border:1px solid #cdd6e4 !important;border-radius:11px !important;background:#fff !important;} .header .h-right .usbm-bag, .header .h-right .mm-burger{height:42px !important;min-height:42px !important;align-self:center !important;box-sizing:border-box !important;} } /* USBM_MOBILE_LOGO — halve the header logo on phones (Richard). It rendered 190x47 on mobile because USBM_LOGO_GROW forces width:190px while body.usbm-top is set. Both states are halved so the grow/shrink-on-scroll behaviour is preserved proportionally: the usbm-top state 190px -> 95px, and the base site.css state height:39px -> 20px (width stays auto). Phones only (<=640px); tablet and desktop keep the full-size logo. Remove this block to revert. */ @media (max-width: 640px){ .header .brand-logo{height:32px !important;width:auto !important;} /* Logo size history: 190 desktop -> 95 (-50%) -> 114 (+20%) -> 137 (+20%) -> 151 (+10%). Height 32. The cap is NOT cosmetic: .h-right is only held right by margin-left:auto, so an oversized logo SHOVES the basket+burger group off the right edge — at 320px a flat 151 puts the burger 16px off-screen. Worse, html{overflow-x:clip} (see USBM_MOBILE_OVERFLOW) HIDES that: scrollWidth still reads 0 while the burger is genuinely clipped. So ALWAYS measure the burger right edge vs clientWidth after touching this. calc(100vw - 200px) is derived from the real constraint (~147px .h-right + ~2x16px padding + a ~20px gap): it yields 120 at 320px (burger unmoved) and the full 151 from ~351px up, so every real phone gets the full size with no hard breakpoint. A flat vw cap (36vw) was rejected — it would have held 390px phones down to 140. */ body.usbm-top .header .brand-logo{width:min(151px,calc(100vw - 200px)) !important;height:auto !important;} /* The header row packs LEFT (.header .container is justify-content:normal) and only looked right-aligned because form.search carries margin-left:auto — but the search is display:none on phones, so nothing pushed .h-right over. With the logo halved this became obvious. Push the basket+burger to the right edge properly. */ .header .h-right{margin-left:auto !important;} } /* USBM_MOBILE_HERO_IMAGE — hide the hero cluster photo on phones only (Richard). Both the front page (front-page.php) and every hero-v2 category hero render the same structure: .hero .hero-stage > img.cluster (Front_Page_Hero.webp / *_Hero.webp), which was eating ~222px of vertical space on a phone before the headline and CTA. Hiding .hero-stage removes the image and its wrapper so no empty box is left behind; the hero gradient and copy remain. <=640px ONLY — tablet and desktop keep the hero imagery exactly as designed. Remove this block to revert. */ @media (max-width: 640px){ .hero .hero-stage{display:none !important;} } /* USBM_MOBILE_FOOTER_GRID — the 4 footer menus 2x2 on phones (Richard). .nfx-grid was grid-template-columns:348px on mobile = ONE column, so all 5 blocks stacked and the footer ran 1669px tall. Two columns puts the 4 menus (Products | Services / Buyers | Company) in a 2x2, and .nfx-brand ("Get In Touch") spans the full width beneath so it is not orphaned in a half cell. 1669px -> 1042px (-627px). Verified: 0 links overflow their 174px cell, 0 clipping. <=640px only — tablet/desktop footer layout untouched. Remove this block to revert. */ @media (max-width: 640px){ .nfx-grid{grid-template-columns:1fr 1fr !important;column-gap:20px !important;} .nfx-brand{grid-column:1 / -1 !important;} } /* USBM_MOBILE_FOOTER_BADGES — the 4 footer trust badges 2x2, matching the menu grid (Richard). .nfx-bot (Trusted by businesses / ISO 9001 / Rated Excellent / Fast Delivery) is a flex-wrap row that stacked 1-per-row on phones (268px tall). Made it the SAME grid as .nfx-grid above it: minmax(0,1fr) x2 with column-gap:0 gives 174px|174px at x40/x214 - pixel-aligned with the Products|Services / Buyers|Company columns. minmax(0,1fr) (not 1fr) is required or the tracks size to each badge min-content and come out uneven (122/116). Its padding was 20px 70px 12px - that 70px desktop inset left only a 208px content box (96px tracks), so it is zeroed on phones. 268px -> 169px. Remove this block to revert. */ @media (max-width: 640px){ .nfx-bot{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:20px !important;row-gap:20px !important;padding-left:0 !important;padding-right:0 !important; justify-content:stretch !important;align-items:start !important;} .nfx-bot>*{min-width:0 !important;} /* Shrink the badge icon + type on phones so the 4 cells line up. At 164px wide the first badge ("Trusted by businesses" / "Premium branded tech, delivered with care.") wrapped to 95px while the other three were 39px - a ragged 56px spread. icon 37->26 and type 12->10 brings the spread down to 16px (49/33/33/33) and the block 187->135px. The first badge stays slightly taller because its subtitle is simply longer than the others - that is the copy, not the layout. */ .nfx-bi{gap:8px !important;} .nfx-bi .nfx-bic{width:26px !important;height:26px !important;flex:0 0 26px !important;} .nfx-bi .nfx-bic svg{width:13px !important;height:13px !important;} .nfx-bi b{font-size:10px !important;} .nfx-bi div span{font-size:10px !important;} } /* USBM_MOBILE_PRICE_TILE — hide the "Bulk branded USBs from £1.27/unit" price tile on phones (Richard). .bulk-card is the 280x226 card overlaid in the front-page hero. Checked the whole site: .bulk-card and .tagpill exist ONLY on the front page (not on categories, /all-products, /bulk-usb-sticks or product pages), so this one rule covers every page that uses the tile. The sibling "From £1.27 / unit" .tagpill is already hidden on phones via .acc-vis in the USBM_MOBILE_OVERFLOW block. <=640px only; desktop/tablet keep the tile. NOTE: the £1.27 claim itself is a separate open item (the security/launch list flags the home-page price, and the Bulk Pricing page has a £1.27 vs £2.27 contradiction). Hiding it on mobile does not resolve that. Remove this block to revert. */ @media (max-width: 640px){ .bulk-card{display:none !important;} } /* USBM_MOBILE_QUICKVIEW — Quick View was a full-bleed sheet on phones and got cut off top+bottom. The template's own rule (@media max-width:620px) sets margin:0; height:100vh; max-height:100vh; border-radius:0 — so the card is flush to every edge AND, because iOS Safari resolves 100vh to the LARGE viewport (the height with the browser bars hidden), the card is taller than the visible area and its top/bottom sit behind Safari's chrome. Fix = inset it 16px all round and switch the cap to dvh, which tracks the ACTUAL visible height as the bars show/hide. The vh line is a fallback for engines without dvh; the dvh line overrides it where supported. height:auto lets short products shrink rather than stretch. Content still scrolls inside .qv-grid, so nothing is hidden. 620px matches the template's own breakpoint, not our usual 640. Remove this block to revert. */ @media (max-width: 620px){ #usbm-qv .qv-card{ margin:16px auto !important; height:auto !important; max-height:calc(100vh - 32px) !important; max-height:calc(100dvh - 32px) !important; width:calc(100vw - 32px) !important; max-width:calc(100vw - 32px) !important; border-radius:16px !important; } } /* USBM_CHECKOUT_BACKDROP — BUG FIX: /quote-checkout was UNUSABLE on phones. The country combobox backdrop is