/**
 * MOBILE-2 — second mobile/tablet pass over the ~30 blocks added after A6.
 * Report: SITE-AUDIT/A6-ROUND2.md
 *
 * Why the filename: area CSS is enqueued by functions.php in byte-sorted glob order
 * (assets/css/areas/*.css). "zzz-" sorts after zw / zx / zy / zz-lead-fixes, so this file
 * is the LAST stylesheet of the child theme. Several of the new blocks print their CSS
 * inline from wp_head priority 60 (fix-lh1-click-depth.php, fix-lh3-contextual-links.php,
 * fix-lh5-sitemap.php), i.e. AFTER every enqueued file — so load order alone is not enough
 * for those. Every rule below therefore starts with `body.yb…`, which outranks their
 * `.yb-lh1-…` / `.yb .yb-fix-lh3-…` selectors on specificity, not on order.
 *
 * Scope: `.yb` (the child-theme body class) everywhere. `!important` only where the value
 * being corrected is itself `!important` (marked inline). Nothing here changes desktop:
 * §1-§7 are inside max-width media queries, §8 is the shared iOS block (also ≤1024px).
 *
 * Owner rules respected: no price, no copy, no business fact, no menu item is touched;
 * no file belonging to another agent is edited.
 */

/* ==========================================================================
   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%; }
}

/* 1b. Sitemap page: `repeat(auto-fit, minmax(240px, 1fr))` resolves to a 240px track when the
       container is narrower than 240px (a 320px phone with a 40px gutter, or large text), and
       the page then scrolls sideways. One column below 560px removes the floor; the tablet
       (768px) auto-fit layout is deliberately left alone. */
@media (max-width: 560px) {
	body.yb .yb-lh5-groups { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   2. TAP TARGETS — every control added by the new modules
   Visual size is kept wherever an invisible ::after hit area can do the job.
   ========================================================================== */
@media (max-width: 1024px) {

	/* 2a. Hub / landing pagination row (fix-lh1-click-depth.php): links were 24×20px.
	       This row is a small centred nav, so growing it to 44px is the right fix. */
	body.yb .yb-lh1-pages a,
	body.yb .yb-lh1-pages [aria-current] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 8px;
	}
	body.yb .yb-lh1-pages { line-height: 1.2; }

	/* 2b. Contextual-link chips (fix-lh3-contextual-links.php) — on nearly every template.
	       9px+9px+18px = 36px. Keep the padding, raise the box to 44px. */
	body.yb .yb-fix-lh3__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
	}

	/* 2c. Link-equity category pills (fix-lh2-link-equity.css) — same 36px box.
	       align-items moves from baseline to center so the count stays optically centred. */
	body.yb .yb-lh2-cats__item {
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
	}

	/* 2d. A–Z index <summary> toggle: 6px+6px+18px = 30px. The "+" / "–" marker is a
	       float inside a <summary>; as a flex item the float is ignored and
	       space-between puts it back on the right. */
	body.yb .yb-lh1-index__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
	}
	body.yb .yb-lh1-index__summary::after { float: none; }

	/* 2e. Dense link lists (A–Z index, sitemap tree, category tree, related terms).
	       Making each of these 44px would double the page height, so they get a 36px row —
	       above the WCAG 2.5.8 24px minimum — and the terms row keeps its exact look by
	       using an invisible overlay instead of padding (padding would move its underline). */
	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;
	}

	/* 2f. Size-guide page: the "Find my size" CTA was 31px; the CM/IN switch hit area was
	       40px (zx-mobile-fixes.css `::before`). Both to 44 with no visual change to the
	       switch. The `::before` override wins on specificity (body + 2 classes + pseudo). */
	body.yb .yb-hp-sizebtn {
		min-height: 44px;
		box-sizing: border-box;
	}
	body.yb .yb-hp-units__switch::before {
		top: -9px;
		bottom: -9px;
	}

	/* 2g. Maps facade (fix-sp7-cls.css) is already 44px — the label above it is not a
	       control, so nothing is needed there. Listed here so the next pass does not re-check. */
}

@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;
	}
}

/* ==========================================================================
   3. TYPE SCALE — the new blocks were written desktop-first
   Site floor for body copy is 14px (see 00-tokens.css / A6 §5). 12–13px values below
   that floor are raised on phones only; desktop keeps the measured lululemon values.
   ========================================================================== */
@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; }

	/* Section headings: 18/22px desktop values read as body copy next to the 24px H1s the
	   phone templates use, so they step down one notch instead of staying flat. */
	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; }

	/* Spacing: 32/40px block gaps and a 48px chip-row gap are desktop rhythm. */
	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; }
}

/* ==========================================================================
   4. PDP — sticky add-to-bag, safe area, popups
   ========================================================================== */
@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;
	}

	/* 4b. Full-screen sheets that used 100vh. On iOS Safari 100vh is the URL-bar-less height,
	       so the bottom of the sheet (its close button, its CTA) is under the toolbar and the
	       page scrolls. dvh is the visual viewport; the 100vh line stays first as the fallback
	       for browsers without dvh. */
	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)); }

	/* 4c. "You may also like" / related carousel: make the horizontal swipe behave like the
	       gallery — contained overscroll, so a sideways flick never drags the page or fires
	       the browser's back gesture. */
	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%; }
}

/* ==========================================================================
   5. CATEGORY — filter drawer
   ========================================================================== */
@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;
	}
	/* 5b. The sticky "View items (n)" bar sits at bottom:0 — on a notched iPhone it lands
	       under the home indicator once viewport-fit=cover is enabled (A6 OWNER Q1). */
	body.yb .yb-zx-view-items {
		height: auto;
		min-height: 56px;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* ==========================================================================
   6. BREADCRUMBS at phone width
   fix-st5-breadcrumbs.css keeps the trail on one line with `flex-wrap:nowrap` +
   `overflow:hidden` on the <ol>. Flex items shrink evenly, so a 4-level trail on a 375px
   screen clips EVERY crumb ("Ho… / Me… / Hoo…") instead of only the product name.
   Letting the row scroll sideways inside its own box keeps every crumb readable and still
   never widens the page. The rules below only touch the non-product `.yb-st5-crumbs` list,
   which is the one that wraps a full trail; the product-page trail already shrinks its last
   item first and is left alone.
   ========================================================================== */
@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; }
}

/* ==========================================================================
   7. MOBILE DRAWER — safe area
   mobile.css pins .yb-mnav__panel top:0/bottom:0. With viewport-fit=cover the last utility
   row would sit under the home indicator. env() is 0px today, so this is inert until the
   viewport meta changes (A6 OWNER Q1) and then correct automatically.
   ========================================================================== */
@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); }
}

/* ==========================================================================
   8. iOS SPECIFICS
   ========================================================================== */
@media (max-width: 1024px) {

	/* 8a. Focus zoom. fix-a6-mobile.css §2 covers text/email/tel/password/search/number/url/
	       date, select and textarea. The four remaining typing types are added here so any
	       future form (booking, gift card, returns) is covered without manual work.
	       !important because the rule it extends is !important. */
	body.yb input:is([type="datetime-local"], [type="time"], [type="month"], [type="week"]):not(#wpadminbar input) {
		font-size: 16px !important;
	}

	/* 8b. iOS inflates text in landscape unless this is pinned. */
	body.yb {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* 8c. Grey/blue flash on every tap. lululemon suppresses it; the theme had no rule at all.
	       Focus-visible outlines (fix-a9-a11y.css) are untouched — this is the touch flash only. */
	body.yb :is(a, button, summary, label, [role="button"], [role="tab"], input, select, textarea) {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
}