/**
 * Header: top bar, main row, category bar, search, mobile bottom nav.
 * Mobile-first — desktop rules live in responsive.css.
 */

.site-header {
	position: relative;
	background: #fff;
	z-index: var(--z-header);
}

body.has-sticky-header .site-header {
	position: sticky;
	inset-block-start: 0;
}

/* Only a border→shadow swap on scroll, so nothing reflows. */
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header.is-stuck .mamun-header__main { border-bottom-color: transparent; }

/* ---------------- Announcement bar ---------------- */
.mamun-topbar {
	/* Visible on every breakpoint — the marquee is the announcement channel.
	   The utility links beside it are hidden on small screens (responsive.css). */
	background: var(--announce-bg, var(--color-heading));
	color: var(--announce-color, #cfd8de);
	font-size: var(--announce-fs-mob, 12px);
	font-weight: var(--announce-weight, 500);
	padding-block: var(--announce-pt, 10px) var(--announce-pb, 10px);
}

/* --- Infinite marquee ---
   The track holds the announcement list twice. Animating to -50% lands exactly
   on the start of the duplicate, so the loop is seamless: no jump, no gap. */
.mamun-marquee {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	/* Soften both ends so items appear/disappear instead of being cut hard. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.mamun-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: mamun-marquee-scroll var(--announce-speed, 40s) linear infinite;
	will-change: transform;
}

.mamun-marquee__track.is-reverse { animation-direction: reverse; }

.mamun-marquee.is-pausable:hover .mamun-marquee__track,
.mamun-marquee.is-pausable:focus-within .mamun-marquee__track { animation-play-state: paused; }

.mamun-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	/* Content-sized, never viewport-sized — a 100vw group would manufacture the
	   very blank space this component must avoid. */
	width: max-content;
	margin: 0;
	padding: 0;
}

.mamun-marquee__item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding-inline-end: var(--announce-gap, 64px);
	white-space: nowrap;
	list-style: none;
}

.mamun-marquee__icon { display: inline-flex; color: var(--announce-link-hover, #6fdc95); }
.mamun-marquee__icon svg { width: 14px; height: 14px; }

.mamun-marquee__text { color: inherit; }

.mamun-marquee__link { color: var(--announce-link, #fff); text-decoration: none; }
.mamun-marquee__link:hover,
.mamun-marquee__link:focus-visible { color: var(--announce-link-hover, #6fdc95); text-decoration: underline; }

/* Minimal separator between messages. */
.mamun-marquee__sep {
	width: 4px;
	height: 4px;
	margin-inline-start: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
}

/*
 * Travel exactly ONE group width so the last item hands over to the first copy
 * with the normal item spacing and nothing else.
 *
 * --marquee-distance is written by header.js from a real measurement. The 50%
 * fallback is only correct for the two groups PHP renders, which is the no-JS
 * baseline; JS replaces it with an exact pixel value and adds enough copies to
 * keep the track wider than the viewport.
 */
@keyframes mamun-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--marquee-distance, 50%)), 0, 0); }
}

/* Reduced motion: no movement at all — the announcements become a normal
   horizontally scrollable list the customer controls. */
@media (prefers-reduced-motion: reduce) {
	.mamun-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.mamun-marquee__track { animation: none; width: auto; transform: none; }
	/* Every copy after the first exists only for the animation. */
	.mamun-marquee__group[aria-hidden="true"] { display: none; }
}


/* ---------------- Main row ---------------- */
.mamun-header__main { border-bottom: 1px solid var(--color-border); background: #fff; }

/*
 * Header layout.
 *
 * Mobile keeps a simple flex row. Desktop switches to a three-track grid
 * (see responsive.css): `1fr auto 1fr`. Equal outer tracks are what make the
 * search OPTICALLY CENTRED in the viewport — the previous `flex: 1` + auto
 * margins could only ever centre it between two unequal clusters, so it always
 * drifted toward whichever side had less content. No absolute positioning.
 */
.mamun-header__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--header-height);
	min-width: 0;
}

.mamun-header__burger { margin-inline-start: -8px; flex-shrink: 0; }

.site-branding { display: flex; align-items: center; min-width: 0; margin: 0; font-size: 1rem; }
.site-branding img,
.site-branding .custom-logo { max-height: 44px; width: auto; object-fit: contain; }
.site-title a {
	display: block;
	color: var(--color-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mamun-header__search { display: none; min-width: 0; }

.mamun-header__actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
	flex-shrink: 0;
}

.mamun-header__action {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 0;
	background: transparent;
	color: var(--color-heading);
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}
.mamun-header__action:hover { background: var(--color-surface); color: var(--color-primary); }

.mamun-header__action-text { display: none; flex-direction: column; line-height: 1.25; text-align: start; }
.mamun-header__action-text small { color: var(--color-muted); font-size: .72rem; }
.mamun-header__action-text strong { color: var(--color-heading); font-size: .85rem; font-weight: 700; }

.mamun-header__action--wishlist { display: none; }

/*
 * Mobile only (<768px): menu | logo | icons on a three-column grid.
 *
 * The two side tracks are minmax(max-content, 1fr): while there is room they
 * are equal, so the logo sits on the exact centre of the header however many
 * icons are on the right. When there is not enough room for that, each side
 * keeps at least its own content width, so nothing can ever overlap the logo —
 * the logo simply eases off true centre instead. The logo track can shrink
 * (minmax(0, auto)) and the image scales with it, rather than overflowing.
 *
 * Nothing here applies at 768px and above, where the existing tablet/desktop
 * grid (logo | search | actions) takes over unchanged.
 */
@media (max-width: 767px) {
	.mamun-header__inner {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
		column-gap: 8px;
	}

	.mamun-header__burger { grid-column: 1; justify-self: start; }

	.mamun-header__inner > .site-branding {
		grid-column: 2;
		justify-self: center;
		justify-content: center;
		max-width: 100%;
	}

	.mamun-header__inner > .site-branding .custom-logo {
		max-width: 100%;
		height: auto;
	}

	.mamun-header__actions {
		grid-column: 3;
		justify-self: end;
		margin-inline-start: 0;
	}
}

.mamun-header__cart-icon,
.mamun-bottom-nav__icon { position: relative; display: inline-flex; }

.mamun-cart-count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-danger);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------------- Search form ---------------- */
/* Search field: one 50px control. The border never changes width on focus —
   the ring is drawn with box-shadow so nothing reflows. */
.mamun-search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	height: var(--control-height-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.mamun-search-form:hover { border-color: var(--color-border-strong); }

.mamun-search-form:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.mamun-search-form__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	flex-shrink: 0;
	color: var(--color-muted);
}

/* (0,2,1) — matches main.css's `.mamun-theme input[type="search"]` and wins on
   cascade order, so the field contributes no second border inside the wrapper. */
.mamun-search-form input.mamun-search-form__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	min-height: 0;
	padding: 0 8px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: .95rem;
	color: var(--color-heading);
}
.mamun-search-form input.mamun-search-form__input:focus,
.mamun-search-form input.mamun-search-form__input:focus-visible {
	border: 0;
	box-shadow: none;
	outline: none;
}
.mamun-search-form input.mamun-search-form__input::placeholder { color: var(--color-muted); }

/* Inset pill that stays vertically centred inside the 50px field. */
.mamun-search-form__submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: calc(var(--control-height-lg) - 12px);
	min-width: 44px;
	margin-inline-end: 5px;
	padding-inline: 16px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
	transition: background var(--transition);
}
.mamun-search-form__submit:hover { background: var(--color-primary-dark); }
.mamun-search-form__submit:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.mamun-search-form__submit-text { display: none; }
.mamun-search-form__submit svg { width: 18px; height: 18px; }

/* Live results */
.mamun-search-results--dropdown {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline: 0;
	max-height: 70vh;
	overflow-y: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-lg);
	z-index: 20;
}

.mamun-search-results:empty { display: none; }
.mamun-search-results__list { padding: 6px; }

.mamun-search-result a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
}
.mamun-search-result a:hover { background: var(--color-surface); }

.mamun-search-result__thumb img {
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background: var(--color-surface);
}
.mamun-search-result__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mamun-search-result__title {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .88rem;
	font-weight: 600;
}
.mamun-search-result__price { color: var(--color-primary); font-size: .85rem; font-weight: 700; }

.mamun-search-results__all {
	display: block;
	padding: 12px;
	border-top: 1px solid var(--color-border);
	font-size: .86rem;
	font-weight: 600;
	text-align: center;
}

.mamun-search-results__empty { padding: 20px; color: var(--color-muted); font-size: .88rem; text-align: center; }

/* ---------------- Search overlay ---------------- */
.mamun-search-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: var(--z-drawer);
}
.mamun-search-overlay.is-open { opacity: 1; visibility: visible; transform: none; }

.mamun-search-overlay__bar { border-bottom: 1px solid var(--color-border); padding-block: 12px; }
.mamun-search-overlay__inner { display: flex; align-items: center; gap: 10px; }
.mamun-search-overlay__body { flex: 1; overflow-y: auto; padding-block: 18px; }
.mamun-search-overlay__suggest { margin-top: 22px; }
.mamun-search-overlay__suggest-title {
	margin: 0 0 10px;
	color: var(--color-muted);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.mamun-search-overlay .mamun-search-results__list { padding: 0; }
.mamun-search-overlay .mamun-search-result a { border-bottom: 1px solid var(--color-border); border-radius: 0; }

/* ---------------- Category bar ---------------- */
.mamun-catbar { display: none; border-bottom: 1px solid var(--color-border); background: #fff; }

.mamun-catbar__inner { display: flex; align-items: center; gap: 22px; min-height: 48px; }

.mamun-catbar__dropdown { position: relative; }

.mamun-catbar__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
}
.mamun-catbar__trigger:hover { background: var(--color-primary-dark); }

.mamun-catbar__panel {
	position: absolute;
	inset-block-start: calc(100% + 4px);
	inset-inline-start: 0;
	min-width: 280px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-lg);
	z-index: 30;
}
.mamun-catbar__panel[hidden] { display: none; }

.mamun-catbar__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	padding: 10px 12px;
	border-top: 1px solid var(--color-border);
	font-size: .86rem;
	font-weight: 600;
}

/* Left: All Categories · Centre: menu · Right: Order on Call.
   The nav takes the flexible middle track and centres its own list, so items
   sit optically centred without per-item margins or pixel offsets. */
.mamun-catbar__nav { flex: 1; min-width: 0; display: flex; justify-content: center; }

.mamun-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--menu-gap, 28px);
	min-width: 0;
	/* If the menu genuinely cannot fit, scroll it rather than overlap the
	   neighbouring clusters. */
	overflow-x: auto;
	scrollbar-width: none;
}
.mamun-menu::-webkit-scrollbar { display: none; }
.mamun-menu > li { position: relative; }
.mamun-menu > li { flex-shrink: 0; }
.mamun-menu > li > a {
	display: block;
	padding: 12px 0;
	color: var(--color-heading);
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--transition);
}
.mamun-menu > li > a:hover,
.mamun-menu > li.current-menu-item > a { color: var(--color-primary); }

.mamun-menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	padding: 6px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 30;
}
.mamun-menu li:hover > .sub-menu,
.mamun-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mamun-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-body);
	font-size: .88rem;
}
.mamun-menu .sub-menu a:hover { background: var(--color-surface); color: var(--color-primary); }
.mamun-menu .sub-menu .sub-menu { inset-block-start: 0; inset-inline-start: 100%; }

.mamun-catbar__phone { display: flex; align-items: center; gap: 10px; color: var(--color-heading); }
.mamun-catbar__phone span { display: flex; flex-direction: column; line-height: 1.25; }
.mamun-catbar__phone small { color: var(--color-muted); font-size: .72rem; }
.mamun-catbar__phone strong { font-size: .9rem; }

/* ---------------- Category tree (dropdown + accordion) ---------------- */
.mamun-cat-tree__item { position: relative; }

.mamun-cat-tree__link {
	display: block;
	padding: 10px 34px 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: .9rem;
	font-weight: 500;
}
.mamun-cat-tree__link:hover { background: var(--color-surface); color: var(--color-primary); }

.mamun-cat-tree__toggle {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	transition: transform var(--transition), background var(--transition);
}
.mamun-cat-tree__toggle:hover { background: var(--color-surface); }
.mamun-cat-tree__toggle[aria-expanded="true"] { transform: rotate(180deg); }

.mamun-cat-tree__children { display: none; padding-inline-start: 12px; }
.mamun-cat-tree__children.is-open { display: block; }

.mamun-cat-tree--sub .mamun-cat-tree__link { color: var(--color-body); font-size: .86rem; }

/*
 * Desktop dropdown submenus.
 *
 * These used to be absolutely positioned flyouts escaping to the right of the
 * panel. That could never actually work: the panel needs `overflow-y: auto` to
 * scroll long category lists, and per CSS that makes overflow-x compute to auto
 * too, so the flyout was clipped away entirely — it laid out at the correct
 * coordinates but was neither visible nor hit-testable (elementFromPoint over
 * it returned the hero section behind the header).
 *
 * The submenu is therefore nested inline and indented, which is what the mobile
 * accordion already did successfully. Colours, radius, shadow, typography,
 * spacing and the panel itself are untouched; only the submenu position moved
 * from "beside" to "beneath", and the panel keeps its scroll guard.
 */
.mamun-catbar__panel .mamun-cat-tree__children { padding-inline-start: 14px; }

/* ---------------- Mobile bottom nav ---------------- */
/* Must stay below the overlay/drawer so the cart drawer covers it cleanly. */
.mamun-bottom-nav {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--color-border);
	background: #fff;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -2px 12px rgba(17, 24, 39, .06);
	z-index: var(--z-bottom-nav);
}

.mamun-bottom-nav__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	font-size: .68rem;
	font-weight: 600;
}
.mamun-bottom-nav__item.is-active,
.mamun-bottom-nav__item:hover { color: var(--color-primary); }

body.has-mobile-bottom-nav { padding-bottom: 60px; }