/**
 * MOBILE-2 — mobile + responsive verification, round two.
 * Report: SITE-AUDIT/MOBILE-2.md
 * Measured with a same-origin iframe harness at 360 / 375 / 390 / 414 / 768 CSS px
 * against logged-in snapshots of home, category, shop, search, product (simple + variable),
 * bag, checkout, my-account, the mobile menu drawer and the bag drawer.
 *
 * What round one (fix-a6-mobile.css / zx-mobile-fixes.css / zzz-mobile2.css) already fixed:
 *   horizontal overflow (0 offenders at every width tested), 4:5 product images,
 *   16px form fields, a static (non-covering) header on phones, 2-up phone grid.
 * What is left and what this file does:
 *   1. tap targets that stopped at 40px (or were never touched at all) -> 44x44
 *   2. tablet (768-1024) product grid: 2-up with 374px cards -> 3-up like lululemon
 *   3. bag quantity stepper: 35x30 number field -> 44px, matching its own +/- buttons
 *   4. bottom sticky bar + cookie banner no longer sit on top of the footer
 *   5. a blanket "no iOS focus zoom" rule so every future form field is >= 16px
 *
 * Load order note: this file is enqueued alphabetically, so several later area files
 * (mobile.css, pdp-*.css, zw-, zx-, zy-, zz-, zzz-) still load after it. Every rule below
 * therefore wins on SPECIFICITY, not on order: selectors start with `html body.yb…`
 * (which outranks the `.yb …` / `body.yb…` selectors used elsewhere) and `!important` is
 * used only where the value being corrected is itself `!important`.
 *
 * Owner freeze respected: no copy, heading, label, price or business fact is touched —
 * this file only changes sizes, spacing and column counts.
 */

/* ==========================================================================
   1. TAP TARGETS — every interactive control reaches 44 x 44 CSS px
   Round one standardised on 40px; Apple/lululemon use 44. These rules lift the
   whole family, so any new icon/button of the same kind is covered automatically.
   ========================================================================== */
@media (max-width: 1024px) {

	/* 1a. Header tools (account, wishlist, bag, search submit) were 40x44.
	       Negative side margins keep the header row exactly as wide as before. */
	/* NOTE: deliberately NOT scoped to `.whb-header` — the search-results template
	   renders the same header without that class, which is why round one's
	   `.whb-header .wd-header-mobile-nav > a` rule left a 28px hamburger there. */
	html body.yb .wd-tools-element > a,
	html body.yb .wd-tools-element > a.wd-tools-icon,
	html body.yb .wd-header-mobile-nav > a,
	html body.yb .wd-header-cart > a,
	html body.yb .wd-header-wishlist > a,
	html body.yb .wd-header-my-account > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	html body.yb .searchform .searchsubmit,
	html body.yb .wd-search-form .searchsubmit {
		min-width: 44px !important;
		min-height: 44px !important;
	}
	/* "Show sidebar" / other icon+text tools in the shop toolbar (19px tall) */
	html body.yb .wd-action-btn > a,
	html body.yb .wd-show-sidebar-btn > a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
	}

	/* 1b. Logo link: 138x21 box in a 50px-tall row — pad it out without moving it. */
	html body.yb .site-logo > a,
	html body.yb a.wd-logo {
		display: inline-block;
		padding-top: 12px;
		padding-bottom: 12px;
		margin-top: -12px;
		margin-bottom: -12px;
	}

	/* 1c. Product-card icon buttons (wishlist / compare / quick view icon):
	       round one pinned these to 40x40. */
	html body.yb .product-grid-item .wd-wishlist-btn > a,
	html body.yb .yb-card__wish .wd-wishlist-btn > a,
	html body.yb .product-grid-item .wd-action-btn > a,
	html body.yb .wd-wishlist-icon > a,
	html body.yb .wd-wishlist-btn > a,
	html body.yb .wd-buttons .wrap-wishlist-button .wd-wishlist-btn > a,
	html body.yb .wd-buttons .wd-action-btn > a,
	html body.yb .product-wrapper .wd-wishlist-btn > a {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	html body.yb .product-grid-item .wd-wishlist-btn,
	html body.yb .yb-card__wish,
	html body.yb .yb-card__wish .wd-wishlist-btn {
		min-width: 44px;
		min-height: 44px;
	}

	/* 1d. "Quick view" text links under a card were 22-24px tall.
	       Vertical padding + the same negative margin: hit area grows, layout does not. */
	html body.yb .open-quick-view,
	html body.yb .quick-view-button,
	html body.yb a.yb-quick,
	html body.yb .yb-card__quick {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
		padding-top: 11px !important;
		padding-bottom: 11px !important;
		margin-top: -11px !important;
		margin-bottom: -11px !important;
	}

	/* 1e. Footer: link columns get real 44px rows; the legal row (horizontal) keeps its
	       height and only grows its hit area. */
	html body.yb .yb-footer__list a:not(.yb-social),
	html body.yb .yb-footer__links a:not(.yb-social),
	html body.yb .yb-footer__col a:not(.yb-social),
	html body.yb .yb-gf-col__list a:not(.yb-social) {
		display: flex;
		align-items: center;
		min-height: 44px !important;
	}
	/* legal row: keeps its 20px line-height and the 4px underline offset, only the hit
	   area grows (padding needs !important — global-footer.css sets `padding: 0 0 4px`) */
	html body.yb .yb-footer__legal > li > a,
	html body.yb .yb-footer__legal a {
		display: inline-block;
		padding-top: 10px !important;
		padding-bottom: 14px !important;
		margin-top: -10px !important;
		margin-bottom: -14px !important;
	}

	/* 1f. Social icons: round one draws them with a content-box halo (20px glyph +
	       10px padding = 40px). One more pixel-pair each side reaches 44 without
	       changing the drawn icon. The selector has to out-rank zx-mobile-fixes.css. */
	html body.yb .yb-footer.yb-gf .yb-footer__list--social a.yb-social,
	html body.yb .yb-footer .yb-footer__list--social a.yb-social {
		padding: 12px !important;
		margin: -12px !important;
	}

	/* 1f2. Skip link measured 42px tall. */
	html body.yb .yb-a9-skip {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
	}

	/* 1g. Cookie notice: "Read more" link + accept/decline buttons. */
	html body.yb .cookies-more-btn,
	html body.yb .wd-cookies-popup a:not(.btn) {
		display: inline-block;
		padding-top: 13px;
		padding-bottom: 13px;
		margin-top: -13px;
		margin-bottom: -13px;
	}
	html body.yb .wd-cookies-popup .btn,
	html body.yb .cookies-buttons .btn {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	/* 1h. Category / search toolbars and filters. */
	html body.yb .yb-cf-title-btn,
	html body.yb .yb-cf-more,
	html body.yb .yb-search-tabs__tab,
	html body.yb .yb-cat-grid-seo__more,
	html body.yb .yb-lh2-cats__link,
	html body.yb .yb-fix-lh3__list > li > a,
	html body.yb .layered-nav-link {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
	}
	html body.yb .yb-cf-title-btn {
		width: 100%;
		justify-content: space-between;
	}
	/* short chips ("Men", "Kids", "Sale") were 27-41px wide */
	html body.yb .yb-lh2-cats__link,
	html body.yb .yb-fix-lh3__list > li > a {
		min-width: 44px !important;
		justify-content: center;
	}
	/* colour/size swatch links in the filter list were 44x36 */
	html body.yb .wd-swatch,
	html body.yb .layered-nav-link .wd-swatch,
	html body.yb ul.wd-swatches-filter > li > a {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* 1h2. Product-card title link: 40px (2 lines) / 43px. It is a real target, so give
	       it a 44px minimum — the card grows by at most 4px. */
	html body.yb .product-grid-item .wd-entities-title > a,
	html body.yb .product-element-bottom .wd-entities-title > a,
	html body.yb .wd-entities-title > a {
		display: flex;
		align-items: center;
		min-height: 44px !important;
	}

	/* 1i. Breadcrumbs (16px tall) — horizontal row, so vertical growth is free. */
	html body.yb .breadcrumbs a,
	html body.yb .breadcrumb-link,
	html body.yb .yb-st5-crumbs a,
	html body.yb .woocommerce-breadcrumb > a,
	html body.yb .woocommerce-breadcrumb a.breadcrumb-link {
		display: inline-block;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		margin-top: -14px !important;
		margin-bottom: -14px !important;
	}

	/* 1j. PDP: rating count + "Size guide"/"Reviews" links. Round one used 12px padding
	       (= 40/43px). 14px reaches 44 and the negative margin keeps the row height. */
	html body.yb.single-product .summary .yb-rating-row__count,
	html body.yb.single-product .summary .yb-link,
	html body.yb .yb-rating-row__count,
	html body.yb a.yb-link {
		display: inline-block;
		min-width: 44px;
		box-sizing: border-box;
		padding: 14px 6px !important;
		margin: -14px -6px !important;
		text-align: center;
	}

	/* 1k. Carousel controls: arrows 40x40, dots 20x20. The dots keep their drawn size
	       (content-box padding) and only their hit area grows. */
	html body.yb .owl-prev,
	html body.yb .owl-next,
	html body.yb .wd-btn-arrow,
	html body.yb .wd-prev,
	html body.yb .wd-next {
		min-width: 44px !important;
		min-height: 44px !important;
	}
	html body.yb .owl-dots .owl-dot,
	html body.yb .wd-nav-pagination > * {
		box-sizing: content-box !important;
		padding: 12px 6px !important;
		margin: -12px -6px !important;
		background-clip: content-box !important;
	}

	/* 1l. Bag page: remove / edit / move-to-wishlist were 40px, "Edit" only 24px wide. */
	html body.yb.woocommerce-cart .woocommerce-cart-form a.remove,
	html body.yb .yb-bag-item a.remove,
	html body.yb a.remove {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
	}
	html body.yb .yb-bag-item__edit,
	html body.yb .yb-bag-move,
	html body.yb .yb-bag-remove,
	html body.yb .yb-bag-promo__toggle {
		display: inline-flex !important;
		align-items: center;
		min-width: 44px;
		min-height: 44px !important;
		justify-content: flex-start;
	}
	html body.yb .remove_from_cart_button::after {
		width: 44px !important;
		height: 44px !important;
	}
	/* bag line-item product name (24px tall on tablet) */
	html body.yb .woocommerce-cart-form td.product-name > a,
	html body.yb .yb-bag-item__name > a,
	html body.yb .yb-bag-item__name {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
	}

	/* 1m. Checkout "Have a coupon?" toggle (18px tall). */
	html body.yb .showcoupon,
	html body.yb .woocommerce-form-coupon-toggle a {
		display: inline-block;
		padding-top: 13px;
		padding-bottom: 13px;
		margin-top: -13px;
		margin-bottom: -13px;
	}

	/* 1n. My account: "Log out" and the dashboard shortcut links. */
	html body.yb .yb-acc-dash__out,
	html body.yb .woocommerce-MyAccount-navigation a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
	}

	/* 1o. Drawers: mobile menu utility rows, bag drawer close, add-to-bag modal close. */
	html body.yb .yb-mnav__util a,
	html body.yb .yb-mnav__util button {
		min-height: 44px !important;
	}
	html body.yb .cart-widget-side .close-side-widget > a,
	html body.yb .wd-heading .close-side-widget > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	html body.yb .yb-atb-modal__close {
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
		min-height: 44px !important;
	}

	/* 1p. Promo bar arrows: round one gave them a -12px hit halo (= 60x40). -14px = 44. */
	html body.yb .yb-promo__arrow::after {
		top: -14px !important;
		right: -14px !important;
		bottom: -14px !important;
		left: -14px !important;
	}

	/* 1q. Checkboxes/radios keep their drawn size but get a 44px row via their label. */
	html body.yb .woocommerce-form__label-for-checkbox,
	html body.yb .yb-gf-check,
	html body.yb label.checkbox {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px !important;
	}
}

/* ==========================================================================
   2. FORM FIELDS — never let iOS zoom the page on focus
   Automatic rule: every text-entry control at <= 1024px is at least 16px,
   so any form added later (new WooCommerce field, new contact form) is safe.
   ========================================================================== */
@media (max-width: 1024px) {
	html body.yb input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
	html body.yb select,
	html body.yb textarea,
	html body.yb .select2-container .select2-selection__rendered,
	html body.yb .select2-search__field {
		font-size: 16px !important;
	}
	html body.yb input[type="checkbox"],
	html body.yb input[type="radio"] {
		font-size: 16px !important;
	}
	/* select2 fake dropdowns must be as tall as a real field */
	html body.yb .select2-container .select2-selection--single {
		min-height: 44px !important;
	}
	html body.yb .select2-container .select2-selection--single .select2-selection__rendered {
		line-height: 44px !important;
	}
}

/* ==========================================================================
   3. BAG QUANTITY STEPPER — the number field matched neither its own +/- buttons
   (44x44) nor a thumb: it measured 35 x 30.
   ========================================================================== */
@media (max-width: 1024px) {
	html body.yb .quantity input.qty,
	html body.yb .quantity input[type="number"] {
		width: 48px !important;
		min-width: 48px !important;
		height: 44px !important;
		min-height: 44px !important;
		padding: 0 !important;
		font-size: 16px !important;
		line-height: 44px !important;
		text-align: center;
		box-sizing: border-box;
	}
	html body.yb .quantity input.minus,
	html body.yb .quantity input.plus,
	html body.yb .quantity .minus,
	html body.yb .quantity .plus {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	html body.yb .quantity {
		display: inline-flex !important;
		align-items: center;
	}
}

/* ==========================================================================
   4. TABLET (768-1024) PRODUCT GRID — 3 up, not 2
   At 768px the archive was still 2-up: 374px-wide cards with 455px-tall images,
   roughly twice the size lululemon shows on the same screen. Carousels are not
   touched (they are not `.wd-products-holder`).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	html body.yb .products.wd-products-holder > .product-grid-item,
	html body.yb ul.products.wd-products-holder > li.product {
		flex: 0 0 33.3333% !important;
		width: 33.3333% !important;
		max-width: 33.3333% !important;
	}
}

/* Below 768 the phone grid stays 2 up (verified at 360/375/390/414) — this rule only
   makes that explicit so a theme-option change cannot silently drop it to 1. */
@media (max-width: 767px) {
	html body.yb .products.wd-products-holder > .product-grid-item,
	html body.yb ul.products.wd-products-holder > li.product {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
	}
}

/* ==========================================================================
   5. BOTTOM CHROME MUST NOT SIT ON THE FOOTER
   The PDP "Add to bag" bar is lifted above the cookie banner by fix-a6-mobile.js
   (--yb-a6-banner-h), but the page only reserved a flat 72px, so at the very bottom
   of a product page the footer legal row and copyright ended up behind both.
   ========================================================================== */
@media (max-width: 1024px) {
	html.yb-a6-banner-on body.yb.single-product.yb-zx-has-sticky {
		padding-bottom: calc(80px + var(--yb-a6-banner-h, 0px)) !important;
	}
	html body.yb.single-product.yb-zx-has-sticky {
		padding-bottom: 80px !important;
	}
	/* every other page: only the cookie banner is at the bottom */
	html.yb-a6-banner-on body.yb:not(.single-product) {
		padding-bottom: var(--yb-a6-banner-h, 0px) !important;
	}
}

/* ==========================================================================
   6. IMAGE RATIO SAFETY NET
   Every product image measured exactly 4:5 at every width. This keeps it that way
   for images added later that arrive without the ratio wrapper.
   ========================================================================== */
@media (max-width: 1024px) {
	html body.yb .product-grid-item .product-image-link img,
	html body.yb .product-grid-item .wd-product-img img,
	html body.yb .yb-card__img img {
		aspect-ratio: 4 / 5;
		width: 100%;
		height: auto;
		max-width: 100%;
	}
}