/* ═══════════════════════════════════════════════════════════════ Gadgets24 — Storefront global mobile-responsive safety net. Tailwind CDN handles most layouts; this file fixes the classic overflow offenders (tables, long words, fixed-width blocks, modals, iframes) on every page. ═══════════════════════════════════════════════════════════════ */ /* Opaque page background, painted WITHOUT depending on the Tailwind CDN. With only `body.bg-white` (a runtime-generated class) mobile Chrome can composite the PREVIOUS page behind the current one during the first frames / light scroll — users saw product-page text and the footer "ghosting" through the cart page. A plain-CSS background on removes that layer entirely. */ html { background: #fff; } /* Kill the rubber-band overscroll reveal on mobile: light scrolling at the top/bottom of the cart (or any short page) no longer bounces the document and exposes content behind/around it. */ html { overscroll-behavior-y: none; } /* No horizontal page scroll — sticky/Fixed elements stay safe */ html, body { overflow-x: clip; } /* Media & embeds never exceed their container */ img, video, iframe, svg { max-width: 100%; } img, video { height: auto; } /* Long words / URLs / SKUs must wrap, not overflow */ body { overflow-wrap: break-word; } /* Raw tables (CMS content, order pages, policies) scroll on mobile */ table { max-width: 100%; } :not(.overflow-x-auto) > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Keep it from looking broken when table fits: no scrollbar in that case */ /* Inputs & selects never exceed container */ input, select, textarea { max-width: 100%; } /* Fixed modals: always fit small screens */ @media (max-width: 640px) { .fixed.inset-0 > div[class*="max-w-"] { margin-left: 12px; margin-right: 12px; } } /* Very small phones: tighten container gutters */ @media (max-width: 400px) { .max-w-7xl, .max-w-6xl { padding-left: 0; } } /* Sticky purchase panel: disable stickiness below 1024px (mobile PDP renders its own purchase block) */ @media (max-width: 1023px) { .g24-pdp-purchase-col { position: static !important; } } /* Cart / account grids stack cleanly (Tailwind handles most; safety) */ @media (max-width: 640px) { .g24-qty-btn { width: 32px; height: 34px; } .g24-qty-val { width: 34px; height: 34px; } } /* Print: hide interactive chrome (nice-to-have) */ @media print { header, footer, .fixed { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ Modern scrollbars — slim, rounded, subtle. Replaces the chunky default bars on every storefront page (main scroll + panels). ═══════════════════════════════════════════════════════════════ */ html { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.35) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.30); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.55); } ::-webkit-scrollbar-corner { background: transparent; } /* Hidden-but-scrollable utility (filter rails, drawers): .scrollbar-hide already defined inline in the layout ; re-declared here so the utility works even if that inline block is ever removed, and so cached pages pick it up from this file. */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; width: 0; height: 0; }