/* A6 — mobile (375px) & tablet (768px) audit fixes. Report: SITE-AUDIT/A6-mobile-tablet.md
   Pairs with assets/js/areas/fix-a6-mobile.js. Every rule is inside a max-width media query,
   so desktop (>= 1025px) is untouched. Automatic: rules key on WooCommerce/WoodMart classes,
   so every new search, product, form or banner gets them without manual work. */

@media (max-width: 1024px) {

	/* ===============================================================
	   1. FALLBACK — search results toolbar. A3 (fix-a3-shop.php) adds .yb-cat-grid to search,
	      which makes zx-mobile-fixes.css style it; these rules only apply while that class is missing:
	      raw "Show sidebar" text link + native sort select pushed 160px past the
	      right edge (body 535px wide at 375). Same [Filter] [Sort] pills as the category page.
	   =============================================================== */
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: auto !important;
		max-width: 100% !important;
		min-height: 56px;
		margin: 0 0 16px !important;
		padding: 0 !important;
		box-sizing: border-box;
	}
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .wd-shop-tools {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px !important;
		min-width: 0;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
	}
	/* first tools group only holds the hidden breadcrumb + count on search */
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .wd-shop-tools:first-child:not(:has(> :not(.wd-breadcrumbs, .woocommerce-result-count))) { display: none !important; }
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .wd-products-per-page,
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .wd-products-shop-view { display: none !important; }

	/* Filter pill */
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .wd-show-sidebar-btn { display: flex !important; margin: 0 !important; }
	.yb.search-results:not(.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.search-results:not(.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.search-results:not(.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 (native select keeps the phone's picker) */
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering {
		position: relative !important;
		display: block !important;
		flex: 0 0 auto;
		width: auto !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering::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.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering select.orderby {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		width: 92px !important;
		min-width: 0 !important;
		max-width: 92px !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;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering::after { content: none !important; display: none !important; }
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering select.orderby option { color: #111; }
	.yb.search-results:not(.yb-cat-grid) .shop-loop-head .woocommerce-ordering .wd-ordering-mb-icon-btn { display: none !important; }

	/* ===============================================================
	   2. No iOS focus-zoom: every typing field >= 16px on phones/tablets
	      (contact form name/order 14px, PDP quantity 14px, checkout coupon 14px).
	   =============================================================== */
	body.yb input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="search"], [type="number"], [type="url"], [type="date"]):not(#wpadminbar input),
	body.yb input:not([type]):not(#wpadminbar input),
	body.yb select:not(.select2-hidden-accessible):not(#wpadminbar select),
	body.yb textarea:not(#wpadminbar textarea),
	body.yb .select2-container .select2-selection__rendered,
	body.yb .select2-search__field {
		font-size: 16px !important;
	}

	/* ===============================================================
	   3. Tap targets >= 44px — invisible hit area, no visual/layout change.
	   =============================================================== */
	.yb.yb-co .woocommerce-form-coupon-toggle .showcoupon,
	.yb .yb-acc-dash .yb-acc-dash__out,
	.yb .btn-read-more.more-link,
	.yb .yb-autoarch-card__more,
	.yb .yb-search-tabs__tab,
	.yb.woocommerce-cart .yb-bag-promo__toggle,
	.yb .yb-icard__cta,
	.yb .wd-cookies-popup .cookies-more-btn {
		position: relative;
	}
	.yb.yb-co .woocommerce-form-coupon-toggle .showcoupon::after,
	.yb .yb-acc-dash .yb-acc-dash__out::after,
	.yb .btn-read-more.more-link::after,
	.yb .yb-autoarch-card__more::after,
	.yb .wd-cookies-popup .cookies-more-btn::after {
		content: "";
		position: absolute;
		top: -13px;
		bottom: -13px;
		left: -4px;
		right: -4px;
	}
	.yb .yb-search-tabs__tab::after,
	.yb.woocommerce-cart .yb-bag-promo__toggle::after,
	.yb .yb-icard__cta::after {
		content: "";
		position: absolute;
		top: -5px;
		bottom: -5px;
		left: 0;
		right: 0;
	}
	.yb .yb-search-clear::after {
		content: "";
		position: absolute;
		top: -7px;
		bottom: -7px;
		left: -7px;
		right: -7px;
	}
	/* Hamburger 34px wide -> 44px, logo stays where it is */
	body.yb:not(.yb-co) .whb-header .wd-header-mobile-nav > a {
		min-width: 44px;
		justify-content: center;
		margin-left: -5px;
		margin-right: -5px;
	}

	/* ===============================================================
	   4. Bottom banners (cookie notice) vs PDP sticky "Add to bag" + chat bubble.
	      JS writes the visible banner height into --yb-a6-banner-h.
	   =============================================================== */
	.yb-a12-cc,
	.yb .wd-cookies-popup {
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
	}
	html.yb-a6-banner-on .yb-pdp-sticky,
	html.yb-a6-banner-on .yb-pdp-sticky.is-visible {
		bottom: var(--yb-a6-banner-h, 0px) !important;
	}
	html.yb-a6-banner-on body.yb .yb-chat {
		bottom: calc(var(--yb-a6-banner-h, 0px) + 20px) !important;
	}
	html.yb-a6-banner-on body.yb.single-product.yb-zx-sticky-on .yb-chat {
		bottom: calc(var(--yb-a6-banner-h, 0px) + 92px) !important;
	}
}

@media (max-width: 767px) {
	/* 5. Blog post breadcrumb 11px -> 13px (readable on phones) */
	.yb.single-post .breadcrumbs,
	.yb.single-post .breadcrumbs a { font-size: 13px !important; }
}