/*
 * Mobile shell states (see inc/mobile-shell.php). Layout and look live on the Bricks elements; this file
 * only holds what depends on the page or on JS state. 767px = Bricks mobile_landscape breakpoint.
 * Selectors use the Bricks element ids (#brxe-…) because Bricks' own per-element CSS is id-level and
 * would otherwise win. Ids: header template 1000 (mhd…), footer template 130 (mnv…).
 */
@media (max-width: 767px) {
	/* Room for the fixed bottom navigation. */
	body {
		padding-bottom: var(--mnav-h);
	}

	/* Inner pages: the header sits in the page flow (it only floats over the home hero), so the shared
	   breadcrumb section (#frame-8-breadcrumb) doesn't need its desktop top padding to clear it; Figma has
	   the breadcrumb right under the header. */
	body:not(.home) #brx-header {
		position: relative;
	}

	#frame-8-breadcrumb {
		padding-top: 0;
	}

	/* Home vs inner pages (Figma Homepage vs Bedsheets Listing / Categories frames). */
	body:not(.home) #announcement-bar,
	.home #brxe-mhdbck,
	.home #brxe-mhdcrt,
	body:not(.home) #brxe-mhdusr,
	body:not(.home) #brxe-mhdlog {
		display: none;
	}

	/* Homepage: header sits on the hero photo (Figma 2432:45898), so no brown band and no gap under the search bar. */
	.home #brxe-mhdsec {
		background: none;
		border-bottom: 0;
	}

	.home #brxe-mhdsch:not(.is-pinned) {
		padding-bottom: 0;
	}

	body:not(.home) #brxe-mhdfrm {
		border-color: var(--color-brand-deep);
	}

	/* Focus shows on the whole pill, not as a square outline on the field inside it. */
	/* !important only to beat the sitewide "input:focus-visible { border … !important }" rule. */
	#brxe-mhdsel input[type="search"]:focus,
	#brxe-mhdsel input[type="search"]:focus-visible {
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none;
	}

	#brxe-mhdfrm:focus-within {
		border-color: var(--color-brand-deep);
		box-shadow: 0 0 0 var(--hairline) var(--color-brand-deep);
	}

	/* Search bar pinned on scroll (Figma 2432:45884). */
	#brxe-mhdsch.is-pinned {
		position: fixed;
		inset: 0 0 auto;
		z-index: 30;
		padding: var(--space-10) var(--space-20);
		background-color: var(--color-surface-cream-20);
		backdrop-filter: blur(var(--blur-pinned));
		-webkit-backdrop-filter: blur(var(--blur-pinned));
	}

	.admin-bar #brxe-mhdsch.is-pinned {
		top: var(--wp-admin--admin-bar--height, 0px);
	}

	/* Bottom navigation, account pages (Figma Dashboard, Orders … Track Order 1416:16270): Dashboard / Orders /
	   Offer / Account tabs (#brxe-mnalft, #brxe-mnargt) instead of the shop ones. Ids, to beat Bricks' own. */
	body #brxe-mnalft,
	body #brxe-mnargt,
	.woocommerce-account #brxe-mnvlft,
	.woocommerce-account #brxe-mnvrgt,
	.page-id-1720 #brxe-mnvlft,
	.page-id-1720 #brxe-mnvrgt {
		display: none;
	}

	.woocommerce-account #brxe-mnalft,
	.woocommerce-account #brxe-mnargt,
	.page-id-1720 #brxe-mnalft,
	.page-id-1720 #brxe-mnargt {
		display: flex;
	}

	/* Bottom navigation: inactive tabs in ink-soft, the current one in brand colour (Figma Nav/Home). */
	.sng-mnav [data-nav] {
		color: var(--color-ink-soft);
		font-weight: 500;
	}

	.sng-mnav [data-nav].is-active {
		color: var(--color-brand-deep);
		font-weight: 600;
	}

	/* Title bar (Figma "Top": back button + page title), header template #brxe-mhdttl. Hidden by default;
	   the cart / checkout (mobile-cart-checkout.css) and account pages (mobile-account.css) show it.
	   #brxe-mtbt1 "My Cart", #brxe-mtbt2 "Checkout", #brxe-mtbt3 the account page title. */
	#brxe-mtbrow {
		display: flex;
		align-items: center;
		gap: var(--space-10);
	}

	#brxe-mtbbck {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 40px;
		height: 40px;
		border: var(--hairline) solid var(--color-border-subtle);
		border-radius: var(--radius-pill);
		background: var(--color-on-accent);
		color: var(--color-brand-deep);
	}

	/* The icon shortcode's wrapper is a block that would otherwise pin the arrow to the top-left. */
	#brxe-mtbbki {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#brxe-mtbbck svg {
		width: 16px;
		height: 16px;
	}

	#brxe-mtbt1,
	#brxe-mtbt2,
	#brxe-mtbt3 {
		margin: 0;
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 700;
		line-height: 1.15;
		color: var(--color-on-accent);
	}

	.sng-m-cart #brxe-mtbt3,
	.sng-m-checkout #brxe-mtbt3 {
		display: none;
	}

	/* Pages titled by sanganeri_mobile_title() (body.sng-m-titled, inc/mobile-account.php): "← <title>"
	   instead of logo + search, and no breadcrumb. Offers / Sale is a tab, so no back button (Figma). */
	.sng-m-titled #brxe-mhdtop,
	.sng-m-titled #brxe-mhdsrw,
	.sng-m-titled #frame-8-breadcrumb,
	.sng-m-titled #brxe-mtbt1,
	.sng-m-titled #brxe-mtbt2,
	.sng-m-titled #brxe-mtbstp,
	.page-id-1323 #brxe-mtbbck {
		display: none;
	}

	.sng-m-titled #brxe-mhdttl {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: var(--space-15) var(--space-20) var(--space-20);
	}

	/* Product card discount badge: Work Sans in the phone design (the card component asks for IBM Plex Mono,
	   which isn't loaded, so phones showed Courier). */
	body .brxe-6e8d74 .onsale {
		font-family: var(--font-body);
		letter-spacing: 0;
	}

	/* Search by photo (inc/photo-search.php): camera button in the search pill, and its status toast. */
	.sng-mhd-cam.is-busy {
		opacity: 0.5;
		pointer-events: none;
	}

	.sng-photo-search-status {
		position: fixed;
		right: var(--space-20);
		bottom: calc(var(--mnav-h, 76px) + var(--space-15));
		left: var(--space-20);
		z-index: 40;
		margin: 0;
		padding: var(--space-12, 12px) var(--space-15);
		border-radius: var(--radius-card);
		background: var(--color-ink);
		color: var(--color-on-accent);
		font-family: var(--font-body);
		font-size: 13px;
		line-height: 1.4;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s;
	}

	.sng-photo-search-status.is-visible {
		opacity: 1;
		visibility: visible;
	}

	.sng-no-speech .sng-mhd-mic {
		display: none;
	}

	.sng-mhd-mic.is-listening {
		color: var(--color-brand-accent);
	}
}