/**
 * 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 48 x 48 CSS px
   Round one standardised on 40px, round two on Apple's 44. Google's own guidance
   (and Lighthouse) asks for 48x48 with 8px between targets, and Google is what
   ranking follows, so 48 is the number here. These rules lift the whole family,
   so any new icon/button of the same kind is covered automatically.
   Source: SITE-AUDIT/MOBILE-DESIGN-STANDARD.md
   ========================================================================== */
@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: 48px !important;
		min-height: 48px !important;
	}
	html body.yb .searchform .searchsubmit,
	html body.yb .wd-search-form .searchsubmit {
		min-width: 48px !important;
		min-height: 48px !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: 48px !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: 48px !important;
		min-height: 48px !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: 48px;
		min-height: 48px;
	}

	/* 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: 48px !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: 48px !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: 48px !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: 48px !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: 48px !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: 48px !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: 48px !important;
		min-height: 48px !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: 48px !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: 48px;
		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: 48px !important;
		min-height: 48px !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: 48px;
		min-height: 48px !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: 48px !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: 48px !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: 48px !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: 48px !important;
		min-height: 48px !important;
	}
	html body.yb .yb-atb-modal__close {
		width: 44px !important;
		min-width: 48px !important;
		height: 44px !important;
		min-height: 48px !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: 48px !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: 48px !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: 48px !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: 48px !important;
		min-height: 48px !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%;
	}
}