/* slim: 40/42 qaide rakhe gaye. source-md5: cd7234d273c7134a09bae4e53b7d4532 */
/* ==========================================================================
   1. HORIZONTAL OVERFLOW — the body must never scroll sideways
   ========================================================================== */
@media (max-width: 1024px){

	/* 1a. Long unbroken strings (product slugs in the A–Z index, order numbers, emails,
	       URLs pasted into help copy) inside the blocks added after A6. These lists are
	       multi-column / grid, so one long word pushes the whole track past the edge. */
	body.yb :is(
		.yb-lh1-index,
		.yb-lh1-cats,
		.yb-lh1-terms,
		.yb-lh1-pages,
		.yb-lh5-sitemap,
		.yb-lh2-cats,
		.yb-fix-lh3,
		.yb-fix-lh3-cat,
		.yb-fix-lh3-blog-cats,
		.yb-st5-crumbs
	) :is(a, li, p, h2, h3, dd, dt) {
		overflow-wrap: anywhere;
		word-break: normal;
	}

	/* 1c. Any table that reached the page without auto-content.css's `figure.wp-block-table`
	       wrapper or help-pages.css's `.yb-hp-table-wrap` gets its own scroller, so a wide
	       size/spec table scrolls inside its box instead of widening the document.
	       `display:block` on a table is the standard mobile scroller pattern. */
	body.yb .entry-content > table,
	body.yb .yb-lh5-sitemap table,
	body.yb .woocommerce-MyAccount-content > table:not(.shop_table_responsive) {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 1d. Code / preformatted copy (help pages, blog posts) — wrap instead of widening. */
	body.yb :is(.entry-content, .yb-hp-body, .yb-autoarch-post) :is(pre, code, samp, kbd) {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* 1e. Existing scrollers that were missing iOS momentum (see §8). */
	body.yb .yb-hp-table-wrap,
	body.yb .ybac-scroll {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	/* 1f. The size-guide / shipping popup used `width:100vw`. 100vw includes the scrollbar,
	       so on a tablet in a desktop browser the panel is wider than the page. 100% of the
	       fixed, inset:0 overlay is the same width without the scrollbar. */
	body.yb .yb-pdp-popup__panel { width: 100%; max-width: 100%; }
}@media (max-width: 560px){body.yb .yb-lh5-groups{ grid-template-columns: minmax(0, 1fr); }}@media (max-width: 1024px){body.yb .yb-lh1-pages{ line-height: 1.2; }body.yb .yb-fix-lh3__list a{
		display: inline-flex;
		align-items: center;
		min-height: 48px;
		box-sizing: border-box;
	}body.yb .yb-lh2-cats__item{
		align-items: center;
		min-height: 48px;
		box-sizing: border-box;
	}body.yb .yb-lh1-index__summary{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 48px;
	}body.yb .yb-lh1-index__summary::after{ float: none; }body.yb :is(.yb-lh1-index__list, .yb-lh1-cats__sub, .yb-lh5-group) li > a{
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}body.yb .yb-lh1-terms__list a{ position: relative; }body.yb .yb-lh1-terms__list a::after{
		content: "";
		position: absolute;
		top: -13px;
		right: -4px;
		bottom: -11px;
		left: -4px;
	}body.yb .yb-hp-sizebtn{
		min-height: 48px;
		box-sizing: border-box;
	}body.yb .yb-hp-units__switch::before{
		top: -9px;
		bottom: -9px;
	}}

@media (max-width: 767px){
	/* 2h. PDP gallery dots (fix-a4-pdp.css): 24×24 buttons. Widening them would spread the
	       dots apart and taking the row taller would break the 32px slot SP7 reserves for
	       CLS, so the hit area grows vertically only, with an overlay. */
	body.yb.single-product .yb-fix-a4-dots button { position: relative; }
	body.yb.single-product .yb-fix-a4-dots button::after {
		content: "";
		position: absolute;
		top: -10px;
		right: 0;
		bottom: -10px;
		left: 0;
	}
}@media (max-width: 767px){body.yb .yb-lh1-pages{ font-size: 14px; }body.yb .yb-lh1-index__intro,
	body.yb .yb-lh1-index__letter,
	body.yb .yb-lh1-index__list,
	body.yb .yb-lh1-cats__sub,
	body.yb .yb-lh1-cats__all{ font-size: 14px; }body.yb .yb-lh2-cats__count{ font-size: 14px; }body.yb .yb-lh5-count,
	body.yb .yb-lh5-products a{ font-size: 14px; }body.yb .yb-sp7-map__note{ font-size: 14px; }body.yb .yb-lh1-index__title,
	body.yb .yb-lh1-cats__title{ font-size: 20px; line-height: 1.3; }body.yb .yb-lh5-sitemap .yb-lh5-group h2{ font-size: 20px; line-height: 1.3; }body.yb .yb-lh5-sitemap .yb-lh5-group h3{ font-size: 15px; margin-top: 20px; }body.yb .yb-lh1-index{ margin-top: 24px; padding-top: 14px; }body.yb .yb-lh1-cats{ margin-top: 28px; padding-top: 16px; }body.yb .yb-fix-lh3-cat{ margin-top: 24px; }body.yb .yb-lh5-sitemap .yb-lh5-group li ul{ margin-left: 10px; padding-left: 10px; }}@media (max-width: 1024px){/* 4a. The page reserves 72px for the fixed bar (zx-mobile-fixes.css), but the bar itself
	       also carries `padding-bottom: env(safe-area-inset-bottom)`. On a notched iPhone the
	       bar is ~34px taller than the reservation, so the last footer row sits under it.
	       Same selector as zx, same !important — this file loads last, so it wins. */
	body.yb.single-product.yb-zx-has-sticky{
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}body.yb .yb-pdp-popup__panel{ height: 100dvh; max-height: 100dvh; }body.yb .yb-atb-minibag__panel{ max-height: max(320px, min(640px, calc(100dvh - 220px))); }body.yb .yb-search-panel{ max-height: min(560px, calc(100dvh - 140px)); }body.yb.single-product .related-and-upsells :is(.wd-carousel, .owl-stage-outer, .wd-carousel-inner){
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}}@media (max-width: 767px){/* 4d. Size row: the swatches are 48×44 inline-blocks with an 8px right margin and wrap on
	       their own. The container is only clamped here so a long attribute row can never
	       inherit a wider box from the variations <table>. The display mode is deliberately
	       NOT changed — WoodMart reuses .wd-swatches-product for colour swatches too. */
	body.yb.single-product .summary .wd-swatches-product{ max-width: 100%; }}@media (max-width: 1024px){/* 5a. The drawer had no momentum scrolling and no contained overscroll, so a flick at the
	       end of the filter list scrolled the category page behind it. Applied to the element
	       WoodMart already scrolls — no new scroll container is introduced, so the sticky
	       "View items (n)" button keeps working exactly as it does today. */
	body.yb .sidebar-container.yb-cf-sidebar{
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}body.yb .yb-zx-view-items{
		height: auto;
		min-height: 56px;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}}@media (max-width: 767px){body.yb.yb-st5 .yb-st5-crumbs ol{
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}body.yb.yb-st5 .yb-st5-crumbs ol::-webkit-scrollbar{ display: none; }body.yb.yb-st5 .yb-st5-crumbs li{ flex: 0 0 auto; overflow: visible; }}@media (max-width: 1024px){body.yb .yb-mnav__level{ padding-bottom: env(safe-area-inset-bottom, 0px); }body.yb .yb-mnav__head{ padding-top: env(safe-area-inset-top, 0px); }body.yb{
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}body.yb :is(a, button, summary, label, [role="button"], [role="tab"], input, select, textarea){
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}}}