/* Custom mobile header — visible at <= 1024px, same breakpoint as the parent theme. */
.ayu-mobile-header, .ayu-overlay, .ayu-drawer { display: none; }

@media only screen and (max-width: 1024px) {
	.eltd-mobile-header { display: none !important; } /* parent's mobile header */

	:root { --ayu-ink: #111; --ayu-badge: #ff1f5a; --ayu-h: 76px; }

	.ayu-mobile-header { display: block; position: sticky; top: 0; z-index: 9990; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
	.admin-bar .ayu-mobile-header { top: 46px; }

	.ayu-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--ayu-h); padding: 0 16px; }
	.ayu-logo { text-align: center; line-height: 0; }
	.ayu-logo .eltd-mobile-logo-wrapper a, .ayu-logo a { display: inline-block; max-height: 56px; }
	.ayu-logo img { height: auto; max-height: 56px; width: auto; }
	.ayu-actions { display: flex; justify-content: flex-end; gap: 6px; }

	.ayu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; background: none; color: var(--ayu-ink); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
	.ayu-burger { justify-self: start; }

	.ayu-burger-lines { display: grid; gap: 4px; width: 18px; }
	.ayu-burger-lines i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s; }
	.ayu-burger[aria-expanded="true"] .ayu-burger-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.ayu-burger[aria-expanded="true"] .ayu-burger-lines i:nth-child(2) { opacity: 0; }
	.ayu-burger[aria-expanded="true"] .ayu-burger-lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.ayu-cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ayu-badge); color: #fff; font: 600 11px/18px system-ui, sans-serif; text-align: center; }
	.ayu-cart-count[hidden] { display: none; }

	/* search panel */
	.ayu-search { padding: 0 16px 14px; }
	.ayu-search[hidden] { display: none; }
	.ayu-search form { display: flex; gap: 8px; }
	.ayu-search input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #d9d9d9; border-radius: 0; font-size: 16px; /* 16px stops iOS zoom */ }
	.ayu-search button { height: 44px; padding: 0 18px; border: 0; background: var(--ayu-ink); color: #fff; cursor: pointer; }

	/* drawer */
	.ayu-overlay { display: block; position: fixed; inset: 0; z-index: 9991; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
	.ayu-overlay[hidden] { display: none; }
	.ayu-overlay.is-open { opacity: 1; }
	.ayu-drawer { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 9992; width: min(86vw, 360px); padding: 64px 0 24px; overflow-y: auto; background: #fff; transform: translateX(-100%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; }
	.admin-bar .ayu-drawer { top: 46px; }
	.ayu-drawer.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
	.ayu-close { position: absolute; top: 12px; right: 12px; font-size: 30px; line-height: 1; }

	.ayu-menu, .ayu-menu ul { margin: 0; padding: 0; list-style: none; }
	.ayu-menu li { position: relative; border-bottom: 1px solid #eee; }
	.ayu-menu a { display: block; padding: 15px 56px 15px 24px; color: var(--ayu-ink); font-size: 16px; text-decoration: none; }
	.ayu-menu .sub-menu { display: none; background: #fafafa; }
	.ayu-menu .sub-menu a { padding-left: 40px; font-size: 15px; }
	.ayu-menu .sub-menu .sub-menu a { padding-left: 56px; }
	.ayu-menu li.is-open > .sub-menu { display: block; }
	.ayu-sub-toggle { position: absolute; top: 0; right: 0; width: 52px; height: 50px; border: 0; background: none; cursor: pointer; }
	.ayu-sub-toggle::before { content: ""; position: absolute; top: 19px; left: 21px; width: 8px; height: 8px; border: solid var(--ayu-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
	li.is-open > .ayu-sub-toggle::before { transform: rotate(-135deg); top: 23px; }

	body.ayu-locked { overflow: hidden; }
}
@media only screen and (max-width: 782px) { .admin-bar .ayu-mobile-header, .admin-bar .ayu-drawer { top: 46px; } }
@media only screen and (min-width: 783px) and (max-width: 1024px) { .admin-bar .ayu-mobile-header, .admin-bar .ayu-drawer { top: 32px; } }