/** * Global Guard (v1.5.0) — loads site-wide. * * Purpose: eliminate the horizontal scrollbar that appears when any element * (parent theme section, plugin widget, embed, or wide table) exceeds the * viewport width. * * IMPORTANT — why `overflow-x: clip` and NOT `overflow-x: hidden`: * `overflow-x: hidden` on / silently creates a scroll container, * which BREAKS every `position: sticky` descendant (our sticky gallery and * sticky summary column would stop sticking). `overflow-x: clip` contains * the overflow WITHOUT creating a scroll container, so sticky keeps working. * Supported in all current browsers; the `hidden` fallback below only * applies to legacy engines that don't understand `clip`. */ /* Fallback for very old engines (they'd have no sticky support anyway) */ html, body { max-width: 100%; overflow-x: hidden; } /* Modern browsers: clip contains overflow but preserves position:sticky */ @supports (overflow-x: clip) { html, body { overflow-x: clip; overflow-y: visible; } } /* Common overflow offenders — constrain media and embeds to their container */ img, video, iframe, embed, object, canvas, svg { max-width: 100%; } /* Wide tables scroll inside their own box instead of the page */ table { max-width: 100%; } /* Our own components: enforce border-box so padding never adds to width. Scoped to `jw-` classes only — never touches parent theme layout. */ [class^="jw-"], [class*=" jw-"], [class^="jw-"] *, [class*=" jw-"] * { box-sizing: border-box; } /* Full-bleed shelf sections must never exceed the viewport */ .jw-shelf, .jw-details-section, .jw-product__layout, .jw-product__below { max-width: 100%; overflow-x: clip; } /* Price breakup table scrolls inside its own wrapper on narrow screens */ .jw-breakup-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }