/* Mobile QA round 2 fixes (QA-ROUND2-MOBILE.md). Pairs with assets/js/areas/zx-mobile-fixes.js.
   Loads after the other area files, before zy-product-images.css and zz-lead-fixes.css.
   Everything is inside @media (max-width: 1024px) (or narrower) except the Quick Shop "View details" link
   at the very end: its text is black on a black bar at every width, so that fix is global.
   Issue #8 (large help/gift-card images) is left for the lead. No image aspect-ratio/object-fit here. */

@media (max-width: 1024px) {

	/* ===============================================================
	   #1 Category toolbar: [Filter] [Sort] ........ 18 products
	   (sticky row, 56px tall, full-bleed background so cards never show through)
	   =============================================================== */
	.yb.yb-cat-grid .shop-loop-head {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 8px !important;
		height: 56px;
		box-sizing: border-box;
		width: auto !important;
		max-width: none !important;
		margin: 0 -15px 16px !important;
		padding: 0 15px !important;
		overflow: visible;
	}
	.yb.yb-cat-grid .shop-loop-head .wd-shop-tools {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		min-width: 0;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.yb.yb-cat-grid .shop-loop-head .wd-shop-tools:first-child { order: 2 !important; margin-left: auto !important; }
	.yb.yb-cat-grid .shop-loop-head .wd-shop-tools:last-child { order: 1 !important; }
	.yb.yb-cat-grid .shop-loop-head .woocommerce-result-count {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #555 !important;
	}

	/* Filter pill = WoodMart's off-canvas sidebar opener (.wd-show-sidebar-btn) */
	.yb.yb-cat-grid .shop-loop-head .wd-show-sidebar-btn { display: flex !important; margin: 0 !important; }
	.yb.yb-cat-grid .shop-loop-head .wd-show-sidebar-btn > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 44px;
		padding: 0 18px !important;
		border-radius: 4px;
		background: #111 !important;
		color: transparent !important;
		font-size: 0 !important;
		line-height: 1;
		text-decoration: none !important;
		white-space: nowrap;
	}
	.yb.yb-cat-grid .shop-loop-head .wd-show-sidebar-btn > a::before {
		content: "" !important;
		display: block !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		background: #fff;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M1 4h9M14 4h3M1 14h3M8 14h9'/%3E%3Ccircle cx='12' cy='4' r='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='6' cy='14' r='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M1 4h9M14 4h3M1 14h3M8 14h9'/%3E%3Ccircle cx='12' cy='4' r='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='6' cy='14' r='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
		font-size: 0 !important;
	}
	.yb.yb-cat-grid .shop-loop-head .wd-show-sidebar-btn > a::after {
		content: "Filter" !important;
		display: block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		background: none !important;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Sort pill = the native select.orderby (tapping it opens the phone's picker) with a "Sort" label on top */
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering,
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering.wd-ordering-mb-icon {
		position: relative !important;
		display: block !important;
		width: auto !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering::before,
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering.wd-ordering-mb-icon::before {
		content: "Sort" !important;
		display: block !important;
		position: absolute;
		left: 16px;
		top: 50%;
		margin: 0 !important;
		transform: translateY(-50%);
		color: #111;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		pointer-events: none;
		z-index: 1;
	}
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering select.orderby,
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering.wd-ordering-mb-icon select.orderby {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		width: 92px !important;
		min-width: 0 !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 30px 0 16px !important;
		border: 1px solid #111 !important;
		border-radius: 4px !important;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%23111' stroke-width='2' d='M1 1.5l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px !important;
		color: transparent !important;
		font-size: 16px !important;
		line-height: 42px !important;
		text-shadow: none !important;
		cursor: pointer;
	}
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering select.orderby option { color: #111; }
	.yb.yb-cat-grid .shop-loop-head .woocommerce-ordering .wd-ordering-mb-icon-btn { display: none !important; }

	/* ===============================================================
	   #12 Filter drawer: full-screen sheet, "Close" top-right, sticky "View items (n)" (button added by JS)
	   =============================================================== */
	.yb .sidebar-container.yb-cf-sidebar.wd-side-hidden {
		width: 100vw !important;
		max-width: none !important;
		display: flex !important;
		flex-direction: column;
	}
	.yb .sidebar-container.yb-cf-sidebar.wd-side-hidden.wd-left:not(.wd-opened) { transform: translateX(-100%); }
	.yb .sidebar-container.yb-cf-sidebar > .wd-heading {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		flex: 0 0 auto;
		min-height: 56px;
		padding: 0 8px 0 16px !important;
		border-bottom: 1px solid #e5e5e5;
	}
	.yb .sidebar-container.yb-cf-sidebar > .wd-heading .close-side-widget > a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
		padding: 0 12px !important;
		color: #111 !important;
		font-size: 14px !important;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
	.yb .sidebar-container.yb-cf-sidebar > .widget-area { flex: 1 1 auto; }
	.yb .yb-zx-view-items {
		position: sticky;
		bottom: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 100%;
		height: 56px;
		margin: 0;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: #111;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		cursor: pointer;
	}

	/* ===============================================================
	   #9 PDP sticky bar: bottom of the screen, full-width red button.
	   pdp-below.js adds the one shared class .is-visible once the main Add to Bag has scrolled above
	   the viewport (it owns aria-hidden/tabIndex too — INTEGRATION-3 B1).
	   =============================================================== */
	.yb-pdp-sticky {
		top: auto !important;
		bottom: 0 !important;
		border-top: 1px solid #efefef;
		box-shadow: 0 -4px 8px rgba(0, 0, 0, .08);
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(120%) !important;
		visibility: hidden !important;
		transition: transform .25s ease, visibility 0s linear .25s !important;
	}
	.yb-pdp-sticky.is-visible {
		transform: none !important;
		visibility: visible !important;
		transition: transform .25s ease, visibility 0s !important;
	}
	.yb-pdp-sticky .yb-pdp-sticky__inner { padding: 10px 16px; gap: 0; }
	.yb .yb-pdp-sticky .yb-pdp-sticky__title,
	.yb-pdp-sticky .yb-pdp-sticky__colour { display: none !important; }
	.yb-pdp-sticky .yb-pdp-sticky__actions { flex: 1 1 auto; gap: 0; }
	.yb .yb-pdp-sticky .yb-pdp-sticky__btn { width: 100%; min-width: 0; height: 52px; padding: 0 16px; font-size: 16px; }
	body.yb.single-product.yb-zx-has-sticky { padding-bottom: 72px !important; }
	body.yb.single-product.yb-zx-sticky-on .yb-chat { bottom: 92px; }

	/* #16 PDP H1 must not break as "T-/Shirt"; #11 rating/review/size-guide links get a 40px hit area (no layout change) */
	.yb.single-product .summary .product_title { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal; }
	.yb.single-product .summary .yb-rating-row__count,
	.yb.single-product .summary .yb-link { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

	/* ===============================================================
	   #5 Bag totals full width + #6 cross-sell carousel + #11 bag tap targets
	   =============================================================== */
	.yb.woocommerce-cart .cart_totals .shop_table { display: table !important; width: 100% !important; table-layout: auto; }
	.yb.woocommerce-cart .cart_totals .shop_table tbody { display: table-row-group !important; }
	.yb.woocommerce-cart .cart_totals .shop_table tr { display: table-row !important; width: auto !important; }
	.yb.woocommerce-cart .cart_totals .shop_table td { text-align: right; }
	.yb.woocommerce-cart .cross-sells .product-grid-item .wd-add-btn,
	.yb.woocommerce-cart .wd-carousel-container .product-grid-item .wd-add-btn { display: none !important; }
	.yb.woocommerce-cart .cross-sells .owl-nav,
	.yb.woocommerce-cart .cross-sells .wd-nav-arrows,
	.yb.woocommerce-cart .cross-sells .wd-btn-arrow { display: none !important; }
	.yb.woocommerce-cart .yb-bag-item__edit,
	.yb.woocommerce-cart .yb-bag-move { display: inline-flex !important; align-items: center; min-height: 40px; }
	/* A6-ROUND2 row 19: the whole stepper row goes to 44px (buttons AND the value input),
	   so the tap target passes 2.5.5 without the −/+ and the number mis-aligning. */
	.yb.woocommerce-cart .woocommerce-cart-form .quantity input.minus,
	.yb.woocommerce-cart .woocommerce-cart-form .quantity input.plus { width: 44px !important; min-width: 44px; height: 44px !important; }
	.yb.woocommerce-cart .woocommerce-cart-form .quantity input.qty { height: 44px; }
	.yb.woocommerce-cart .woocommerce-cart-form a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; }
	/* mini bag "×" (24px icon, 40px hit area) */
	.yb .remove_from_cart_button { position: relative; }
	.yb .remove_from_cart_button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }

	/* ===============================================================
	   #3 Checkout: full-width order summary bar
	   =============================================================== */
	.yb.yb-co form.checkout > .checkout-order-review { align-self: stretch !important; width: 100% !important; max-width: none !important; position: static !important; box-sizing: border-box; }

	/* ===============================================================
	   #7 404: readable copy over the photo
	   =============================================================== */
	.yb .yb-404__panel::before { background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 75%) !important; opacity: 1 !important; }
	.yb .yb-404__title,
	.yb .yb-404__text { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
	.yb .yb-404__text { font-weight: 500 !important; max-width: 300px; }

	/* ===============================================================
	   #11 Shared tap targets (visual size unchanged where possible)
	   =============================================================== */
	.yb .yb-promo__arrow::after { content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; }
	.yb .product-grid-item .wd-wishlist-btn > a,
	.yb .yb-card__wish .wd-wishlist-btn > a { width: 40px !important; height: 40px !important; }
	.yb .product-grid-item .wd-wishlist-btn,
	.yb .yb-card__wish,
	.yb .yb-card__wish .wd-wishlist-btn { min-width: 40px; min-height: 40px; }
	.yb .yb-footer.yb-gf .yb-footer__list--social .yb-social {
		box-sizing: content-box !important;
		padding: 10px !important;
		margin: -10px !important;
		background-clip: content-box !important;
		-webkit-mask-origin: content-box;
		mask-origin: content-box;
		-webkit-mask-clip: content-box;
		mask-clip: content-box;
	}
	.yb .yb-gf-check { display: inline-flex !important; align-items: center; min-height: 40px; }
	.yb.yb-cat-grid .yb-cat-grid-seo__more { display: inline-flex; align-items: center; min-height: 40px; }
	.yb .yb-hp-units { display: inline-flex; align-items: center; min-height: 40px; }
	.yb .yb-hp-units__switch::before { content: ""; position: absolute; top: -7px; bottom: -7px; left: -36px; right: -36px; }

	/* ===============================================================
	   #16 Minor polish
	   =============================================================== */
	/* Announcement: wrap to 2 lines instead of "…" */
	.yb .yb-promo__track { height: auto !important; overflow: visible !important; }
	.yb .yb-promo__msg { height: auto !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; text-align: center; }
	/* Stores: search field same width as the button, 44px tall */
	.yb .yb-locator input[type="search"] { width: 100% !important; max-width: 100%; height: 44px !important; box-sizing: border-box; }
	/* Help centre topic cards: less padding */
	.yb .yb-hp-card { padding: 24px 16px !important; }
}

@media (max-width: 767px) {

	/* #10 Search suggestions panel lined up with the search field */
	.yb .yb-search-panel { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; }

	/* #13 Category tiles: same 16px text as the home tiles */
	.yb.yb-cat-grid .product-grid-item .wd-entities-title,
	.yb.yb-cat-grid .product-grid-item .price,
	.yb.yb-cat-grid .product-grid-item .wd-quick-view-icon > a { font-size: 16px !important; }

	/* #4 Account + wishlist: no negative margins, 15px page gutter */
	.yb .woocommerce-my-account-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
	.yb .woocommerce-my-account-wrapper > .wd-my-account-sidebar,
	.yb .woocommerce-my-account-wrapper > .woocommerce-MyAccount-content { padding-left: 0 !important; padding-right: 0 !important; }
	.yb .woocommerce-my-account-wrapper > .woocommerce-MyAccount-content { padding: 20px 16px !important; box-sizing: border-box; }
	.yb.yb-wishlist-page .woocommerce-my-account-wrapper > .woocommerce-MyAccount-content { padding: 20px 0 !important; }
	.yb .wd-my-account-sidebar .woocommerce-MyAccount-title,
	.yb .wd-my-account-sidebar h3 { padding-left: 0 !important; padding-right: 0 !important; }
	.yb.yb-wishlist-page .wd-products-holder.row,
	.yb.yb-wishlist-page .products.row { margin-left: -6px !important; margin-right: -6px !important; }
	.yb .wd-wishlist-remove,
	.yb.yb-wishlist-page .wd-wishlist-product-remove a { display: inline-flex !important; align-items: center; min-height: 40px; }
	/* Every tile on the wishlist page is in the wishlist: filled heart (WoodMart's font has no filled heart glyph) */
	.yb.yb-wishlist-page .product-grid-item .wd-wishlist-btn > a::before {
		content: "" !important;
		display: block;
		width: 18px;
		height: 18px;
		background: #111;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.6-4.6-9.7-9.3C.8 8.3 3 4.5 6.8 4.5c2.2 0 3.7 1.2 5.2 3 1.5-1.8 3-3 5.2-3 3.8 0 6 3.8 4.5 7.2C19.6 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.6-4.6-9.7-9.3C.8 8.3 3 4.5 6.8 4.5c2.2 0 3.7 1.2 5.2 3 1.5-1.8 3-3 5.2-3 3.8 0 6 3.8 4.5 7.2C19.6 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

@media (max-width: 600px) {
	/* #3 Checkout: the row keeps -15px margins while the container has 0 padding -> 15px sideways overflow */
	.yb.yb-co .main-page-wrapper .content-layout-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ===============================================================
   #2 Quick Shop "View details" — GLOBAL on purpose: style.css gives it #111 text while WoodMart's
   .btn-color-primary paints a black absolute bar over the image, so the text is invisible at every width.
   Plain underlined link under the gallery, never overlapping content.
   =============================================================== */
.yb .product-quick-view .view-details-btn,
.yb .product-quick-view .view-details-btn.btn-color-primary {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: auto !important;
	min-height: 40px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #111 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}