/**
 * Mobile Store UI
 *
 * A small final override layer for phone ergonomics and app-like presentation.
 * It intentionally contains no component business logic and does not alter the
 * desktop layout, making future mobile refinements easy to isolate or remove.
 */
@media (max-width: 700px) {
	:root {
		--ln-mobile-shell: rgba(255, 253, 248, .97);
		--ln-mobile-shadow: 0 10px 30px rgba(8, 42, 37, .1);
	}

	html {
		scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}

	body {
		background:
			radial-gradient(circle at 12% 4%, rgba(201, 163, 92, .08), transparent 28%),
			var(--ln-paper);
		-webkit-tap-highlight-color: transparent;
	}

	.ln-site {
		overflow: clip;
	}

	/* Keep useful promo information, but reclaim vertical space on phones. */
	.ln-topbar {
		font-size: 10px;
	}

	.ln-topbar__inner {
		min-height: 26px;
	}

	/* Compact luxury app bar. */
	.ln-header {
		box-shadow: 0 7px 22px rgba(8, 42, 37, .2);
	}

	.ln-header__main {
		min-height: 58px;
		gap: 8px;
	}

	.ln-brand {
		gap: 8px;
	}

	.ln-brand__mark {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}

	.ln-brand__text strong {
		font-size: 20px;
	}

	.ln-mobile-toggle,
	.ln-mobile-search-toggle {
		display: grid;
		width: 40px;
		height: 40px;
		padding: 0;
		place-items: center;
		border: 1px solid rgba(221, 185, 107, .18);
		border-radius: 12px;
		background: rgba(255, 255, 255, .055);
	}

	.ln-cart-action {
		display: grid;
		width: 40px;
		height: 40px;
		padding: 0;
		place-items: center;
		border: 1px solid rgba(221, 185, 107, .2);
		border-radius: 12px;
		background: rgba(255, 255, 255, .055);
	}

	.ln-header-search,
	.ln-header-search.is-open {
		top: 58px;
		right: 10px;
		left: 10px;
		height: 46px;
		border-radius: 14px;
		box-shadow: var(--ln-mobile-shadow);
	}

	.ln-header-search svg {
		margin-inline: 13px 4px;
	}

	.ln-header-search button {
		padding-inline: 16px;
	}

	/* Tighter rhythm makes the home page feel like a storefront feed. */
	.ln-section {
		padding-top: 31px;
	}

	.ln-section-heading {
		margin-bottom: 16px;
		gap: 10px;
	}

	.ln-section-heading > div {
		gap: 2px;
	}

	.ln-section-heading__kicker {
		font-size: 10.5px;
		line-height: 1.7;
	}

	.ln-section-heading h2 {
		font-size: clamp(23px, 6.7vw, 28px);
		line-height: 1.35;
	}

	.ln-section-heading__link {
		min-height: 34px;
		padding-inline: 6px;
		align-items: center;
	}

	/* Give all horizontal rails predictable touch behavior. */
	.ln-stories__rail,
	.ln-category-grid,
	.woocommerce .ln-products-scroll,
	.woocommerce .ln-product-tabs {
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Mobile commerce controls should meet comfortable touch targets. */
	.ln-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wp-element-button {
		min-height: 44px;
	}

	/* Footer becomes a rounded closing sheet above the persistent nav bar. */
	.ln-footer {
		margin-top: 28px;
		border-radius: 26px 26px 0 0;
		overflow: hidden;
	}

	.ln-footer__grid {
		padding-block: 30px 22px;
	}

	.ln-footer__about p {
		max-width: 46ch;
	}

	/* Preserve the existing bottom navigation design and improve tap response. */
	.ln-mobile-bar__item {
		touch-action: manipulation;
	}
}

@media (max-width: 430px) {
	/* On compact phones the promo bar costs more space than it returns. */
	.ln-topbar {
		display: none;
	}

	.ln-header__main {
		min-height: 56px;
	}

	.ln-header-search,
	.ln-header-search.is-open {
		top: 56px;
	}

	.ln-section {
		padding-top: 27px;
	}

	.ln-section-heading {
		margin-bottom: 14px;
	}

	.ln-section-heading h2 {
		font-size: clamp(22px, 7vw, 26px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ln-mobile-toggle,
	.ln-mobile-search-toggle,
	.ln-cart-action,
	.ln-mobile-bar__item {
		transition: none !important;
	}
}