/*
 * RahkarTheme — header styles.
 *
 * Loaded on EVERY page (the header is global). Kept lean on purpose:
 * no animations beyond what feels essential, no custom properties that
 * could be folded into existing theme.json tokens, no rules for states
 * we don't ship (e.g. dark mode — add separately when needed).
 *
 * Sticky strategy: position: sticky on the root header. Pure CSS, no
 * scroll listener. Works inside the FSE constrained-layout wrapper
 * because the wrapper isn't a scroll container itself.
 *
 * RTL note: the site is set to direction:rtl globally (inc/enqueue.php
 * critical CSS). All flex/grid rules use logical directions through
 * justify-content / order so the same source works in either direction.
 */

/* ----------------------------------------------------------------------
 *  Tokens — local to the header to keep CSS independent of the rest.
 *  Color palette draws from theme.json presets so a theme-wide color
 *  swap propagates automatically.
 * ---------------------------------------------------------------------- */
.rahkar-site-header {
	--rh-fg:            var(--wp--preset--color--text, #1a1d23);
	--rh-fg-muted:      var(--wp--preset--color--text-muted, #5b6271);
	--rh-bg:            var(--wp--preset--color--base, #fff);
	--rh-border:        var(--wp--preset--color--border, #e2e4e9);
	--rh-primary:       var(--wp--preset--color--primary, #0a66c2);
	--rh-row-h:         80px;
	--rh-row-h-mobile:  56px;
	--rh-gap:           12px;
	--rh-pad-x:         clamp(12px, 3vw, 36px);
	--rh-mega-pad:      24px;
	--rh-z-header:      90;
	--rh-z-mega:        100;
}

/* ----------------------------------------------------------------------
 *  Root header element
 * ---------------------------------------------------------------------- */
.rahkar-site-header {
	background: var(--rh-bg);
	color: var(--rh-fg);
	border-bottom: 1px solid var(--rh-border);
	width: 100%;
	z-index: var(--rh-z-header);
	/* keep critical-CSS reserved height working as a floor */
	min-height: var(--rh-row-h);
	/* Subtle shadow matching the approved reference: 0 1px 0 rgba(23,63,115,.08) */
	box-shadow: 0 1px 0 rgba(23, 63, 115, 0.08);
}
/* Sticky on the FSE template-part WRAPPER, not the inner header.
 * The inner .rahkar-site-header can't be sticky — the wrapper is its
 * containing block and has the same height (zero scroll budget).
 * .is-sticky class stays on the inner header for JS targeting. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--rh-z-header, 90);
}

/* Reset list/spacing inside the header so theme defaults don't bleed in. */
.rahkar-site-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rahkar-site-header a {
	color: inherit;
	text-decoration: none;
}

/* ----------------------------------------------------------------------
 *  Rows
 *  Layout: each row is a flex container with 3 equal-weight zones so
 *  the center stays optically centered when the left and right zones
 *  have unequal width.
 * ---------------------------------------------------------------------- */
.rh-row {
	width: 100%;
}
.rh-row + .rh-row {
	border-top: 1px solid var(--rh-border);
}
.rh-row__inner {
	display: flex;
	align-items: center;
	gap: var(--rh-gap);
	min-height: var(--rh-row-h);
	padding-inline: var(--rh-pad-x);
	max-width: 1240px;
	margin-inline: auto;
}

.rh-zone {
	display: flex;
	align-items: center;
	gap: var(--rh-gap);
	flex: 1 1 0;
	min-width: 0;
}
.rh-zone--start  { justify-content: flex-start; gap: 20px; }
.rh-zone--center { justify-content: center; }
.rh-zone--end    { justify-content: flex-end; gap: 6px; }

/* ----------------------------------------------------------------------
 *  Item wrapper (rendered around every component by render.php)
 * ---------------------------------------------------------------------- */
.rh-item {
	display: flex;
	align-items: center;
	min-width: 0;
}
.rh-item--search_form {
	width: 100%;
}

/* ----------------------------------------------------------------------
 *  Logo
 * ---------------------------------------------------------------------- */
.rh-logo {
	display: inline-flex;
	align-items: center;
	font-weight: var(--wp--custom--fw--strong);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1;
}
.rh-logo__img {
	display: block;
	max-height: 40px;
	width: auto;
	height: auto;
}
.rh-logo--svg svg {
	display: block;
	height: calc(var(--rh-row-h) - 8px);
	width: auto;
	max-width: 100%;
}

/* Text fallback follows the approved KT خودرو reference without inventing
 * a raster logo. A real SVG/custom logo still wins in PHP when the owner
 * supplies one through Site Identity. */
.rh-logo--text {
	gap: 10px;
	direction: ltr;
	color: var(--wp--preset--color--accent, #173F73);
	letter-spacing: .035em;
}
.rh-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 3px solid var(--wp--preset--color--primary, #FF6600);
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--accent, #173F73);
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.08em;
	box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #FF6600) 12%, #fff);
}
.rh-logo__word {
	font-family: Arial, sans-serif;
	font-size: clamp(1.18rem, 1.55vw, 1.55rem);
	font-weight: 800;
	line-height: 1;
}

/* ----------------------------------------------------------------------
 *  KT خودرو desktop composition — approved three-layer reference
 *
 *  main: logo | broad product search | account + cart
 *  nav : all categories | primary menu | magazine
 *
 *  The DOM stays Header-Builder-driven. Grid only makes the three semantic
 *  zones optically match the reference and avoids a flex-width contest
 *  between a long search field and the account/cart CTAs.
 * ---------------------------------------------------------------------- */
@media (min-width: 901px) {
	.rh-row--main .rh-row__inner {
		display: grid;
		/* The search is the primary header task: let it consume every
		 * remaining pixel between the real logo and account/cart CTAs. */
		grid-template-columns: auto minmax(0, 1fr) auto;
		justify-content: stretch;
		gap: clamp(16px, 2.5vw, 44px);
	}
	.rh-row--main .rh-zone {
		min-width: 0;
		flex: none;
	}
	.rh-row--main .rh-zone--start {
		justify-content: flex-start;
	}
	.rh-row--main .rh-zone--center {
		width: 100%;
		justify-content: center;
	}
	.rh-row--main .rh-zone--end {
		justify-content: flex-end;
		gap: 10px;
	}
	.rh-row--main .rh-search-wrap {
		max-width: none;
	}
	/* The base .rh-search has max-width:320px (for the mobile search row).
	 * In the desktop main row the search must fill the full grid column. */
	.rh-row--main .rh-search {
		max-width: none;
	}
	.rh-row--main .rh-search--inline {
		height: 52px;
		padding-inline: 16px 0;
		border-radius: 12px;
	}
	/* Native placeholder handles positioning now — just set color/opacity. */
	.rh-row--main .rh-search__input::placeholder {
		color: var(--rh-fg-muted, #5b6271);
		opacity: 1;
	}
	/* Pad the input so placeholder text starts after the magnifier icon and
	 * doesn't run under the submit CTA at the inline-end. */
	.rh-row--main .rh-search__input {
		padding-inline: 8px 12px;
		font-size: .92rem;
	}
	/* In RTL the submit CTA occupies the inline-end (physical left). Move
	 * clear/spinner inward so neither appears on top of that CTA. */
	.rh-row--main .rh-search__clear {
		inset-inline-end: 106px;
	}
	.rh-row--main .rh-search--inline[data-rh-spinner="true"]::after {
		inset-inline-end: 112px;
	}
	.rh-row--main .rh-search__submit {
		display: inline-flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		min-width: 96px;
		margin-block: -1px;
		margin-inline-end: -1px;
		padding: 0 22px;
		border: 0;
		border-radius: 12px 0 0 12px;
		background: var(--wp--preset--color--accent, #173F73);
		color: #fff;
		font: inherit;
		font-size: .9rem;
		font-weight: var(--wp--custom--fw--strong, 700);
		cursor: pointer;
		transition: background-color 120ms linear;
	}
	.rh-row--main .rh-search__submit:hover,
	.rh-row--main .rh-search__submit:focus-visible {
		background: var(--wp--preset--color--contrast, #182A44);
		outline: none;
	}
	.rh-row--main .rh-account,
	.rh-row--main .rh-cart {
		height: 48px;
		min-width: 0;
		padding-inline: 14px;
		gap: 8px;
		font-size: .9rem;
		font-weight: var(--wp--custom--fw--strong, 700);
	}
	.rh-row--main .rh-account {
		border: 1px solid color-mix(in srgb, var(--rh-border) 88%, var(--wp--preset--color--accent, #173F73));
		background: #fff;
		color: var(--wp--preset--color--accent, #173F73);
	}
	.rh-row--main .rh-account:hover,
	.rh-row--main .rh-account:focus-visible {
		border-color: var(--wp--preset--color--accent, #173F73);
		background: color-mix(in srgb, var(--wp--preset--color--accent, #173F73) 5%, #fff);
		color: var(--wp--preset--color--accent, #173F73);
		outline: none;
	}
	.rh-row--main .rh-cart {
		background: var(--wp--preset--color--primary, #FF6600);
		color: #fff;
		box-shadow: 0 8px 16px color-mix(in srgb, var(--wp--preset--color--primary, #FF6600) 24%, transparent);
	}
	.rh-row--main .rh-cart:hover,
	.rh-row--main .rh-cart:focus-visible {
		background: var(--wp--preset--color--primary-dark, #CC5200);
		color: #fff;
		outline: none;
	}
	.rh-row--main .rh-cart__count {
		top: -6px;
		inset-inline-end: -6px;
		background: var(--wp--preset--color--accent, #173F73);
		box-shadow: 0 0 0 2px #fff;
	}
}

.rh-account__label,
.rh-cart__label {
	white-space: nowrap;
}

/* The submitted search CTA and visual action labels are desktop affordances.
 * Mobile keeps the established compact header, search-overlay and bottom-nav
 * interaction untouched. */
.rh-search__submit {
	display: none;
}
@media (max-width: 900px) {
	.rh-account__label,
	.rh-cart__label {
		display: none;
	}
	.rh-logo--text {
		gap: 6px;
	}
	.rh-logo__mark {
		width: 30px;
		height: 30px;
		border-width: 2px;
		font-size: 9px;
	}
	.rh-logo__word {
		font-size: .85rem;
	}
}

/* ----------------------------------------------------------------------
 *  Menu  (top-level horizontal nav)
 * ---------------------------------------------------------------------- */
.rh-menu {
	display: flex;
	align-items: stretch;
}
.rh-menu__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.rh-menu__list > li {
	position: relative;
}
.rh-menu__list > li > a {
	display: flex;
	align-items: center;
	height: var(--rh-row-h);
	padding-inline: 14px;
	font-weight: var(--wp--custom--fw--base);
	white-space: nowrap;
	color: var(--rh-fg);
	transition: color 120ms linear;
}
.rh-menu__list > li > a:hover,
.rh-menu__list > li.current-menu-item > a,
.rh-menu__list > li:focus-within > a {
	color: var(--rh-primary);
}
.rh-menu__list > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: 5px;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

/* Desktop navigation row: all-categories (right) | primary menu | magazine
 * (left). The menu markup stays native wp_nav_menu output — separators are
 * generated visually, so menu editing remains entirely in wp-admin. */
@media (min-width: 901px) {
	.rh-row--menu_row {
		--rh-row-h: 52px;
		background: #fff;
		border-top: 1px solid #EFEDE7;
	}
	.rh-row--menu_row .rh-row__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: clamp(16px, 2.25vw, 36px);
	}
	.rh-row--menu_row .rh-zone {
		min-width: 0;
		flex: none;
	}
	.rh-row--menu_row .rh-zone--start {
		justify-content: flex-start;
	}
	.rh-row--menu_row .rh-zone--center {
		justify-content: flex-start;
		overflow: visible;
	}
	.rh-row--menu_row .rh-zone--end {
		justify-content: flex-end;
	}
	.rh-row--menu_row .rh-menu__list {
		gap: 0;
		max-width: 100%;
	}
	.rh-row--menu_row .rh-menu__list > li > a {
		height: 52px;
		padding-inline: clamp(8px, 1.15vw, 16px);
		font-size: .88rem;
		color: color-mix(in srgb, var(--rh-fg) 88%, #000);
	}
	.rh-row--menu_row .rh-menu__list > li + li > a::before {
		content: '';
		display: inline-block;
		width: 1px;
		height: 18px;
		margin-inline-end: clamp(8px, 1.15vw, 16px);
		background: var(--rh-border);
		vertical-align: middle;
	}
	.rh-magazine-link {
		display: inline-flex;
		align-items: center;
		height: 52px;
		color: var(--wp--preset--color--primary, #FF6600);
		font-size: .9rem;
		font-weight: var(--wp--custom--fw--strong, 700);
		white-space: nowrap;
		text-decoration: none;
	}
	.rh-magazine-link:hover,
	.rh-magazine-link:focus-visible {
		color: var(--wp--preset--color--primary-dark, #CC5200);
		outline: none;
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

/* Standard dropdown (non-mega) — opens on hover OR focus. */
.rh-menu__list .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	background: var(--rh-bg);
	border: 1px solid var(--rh-border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 8px 24px rgba(15,17,21,0.10);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 120ms linear, transform 120ms linear, visibility 0s linear 120ms;
	z-index: var(--rh-z-mega);
}
.rh-menu__list .sub-menu .sub-menu {
	inset-block-start: 0;
	inset-inline-start: 100%;
}
.rh-menu__list .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--rh-fg);
}
.rh-menu__list .sub-menu a:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}
.rh-menu__list li:hover > .sub-menu,
.rh-menu__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* ----------------------------------------------------------------------
 *  Mega menu
 *  Activated by adding the CSS class `mega-menu` to a top-level item
 *  via Appearance → Menus → CSS Classes. The submenu becomes a full-
 *  width panel whose immediate children render as columns.
 * ---------------------------------------------------------------------- */
.rh-menu__list > li.mega-menu {
	/* The submenu spans the full viewport, so anchor from row, not item. */
	position: static;
}
.rh-menu__list > li.mega-menu > .sub-menu {
	inset-inline-start: 0;
	inset-inline-end: 0;
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: var(--rh-mega-pad);
	border-radius: 0 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px var(--rh-gap);
}
.rh-menu__list > li.mega-menu > .sub-menu > li {
	min-width: 0;
}
.rh-menu__list > li.mega-menu > .sub-menu > li > a {
	font-weight: var(--wp--custom--fw--strong);
	color: var(--rh-fg);
	padding: 6px 8px;
}
.rh-menu__list > li.mega-menu > .sub-menu .sub-menu {
	position: static;
	box-shadow: none;
	border: 0;
	padding: 0;
	background: transparent;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: block;
	min-width: 0;
}
.rh-menu__list > li.mega-menu > .sub-menu .sub-menu a {
	font-weight: var(--wp--custom--fw--base);
	color: var(--rh-fg-muted);
	padding: 4px 8px;
}

/* ----------------------------------------------------------------------
 *  Icons / cart / account
 * ---------------------------------------------------------------------- */
.rh-icon {
	display: block;
	flex: 0 0 auto;
}
.rh-cart,
.rh-account,
.rh-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: var(--wp--custom--radius--md);
	color: var(--rh-fg);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 120ms linear, color 120ms linear;
}
.rh-cart:hover,
.rh-account:hover,
.rh-toggle:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}
.rh-cart__count {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--rh-primary);
	color: #fff;
	font-size: 11px;
	font-weight: var(--wp--custom--fw--strong);
	line-height: 18px;
	text-align: center;
	/* White ring so the badge separates from the cart icon underneath
	 * (the SVG strokes use --rh-fg, which on hover crosses --rh-primary
	 * and would otherwise blend into the badge edge). Same effect is used
	 * on the bottom-nav badge — see bottom-nav.css's .rh-bnav__badge — so
	 * all three count badges (desktop header, mini-header, bottom-nav)
	 * read identically. Uses the WP preset directly (not --rh-bg) so the
	 * rule keeps working when the badge is rendered OUTSIDE
	 * .rahkar-site-header, e.g. inside .rh-product-mini — which is a
	 * sibling, not a descendant. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff);
}
.rh-cart__count.is-empty {
	display: none;
}

/* ----------------------------------------------------------------------
 *  Search form (component used inline in main row AND as the search row)
 * ---------------------------------------------------------------------- */
.rh-search {
	width: 100%;
	max-width: 320px;
}
.rh-search .search-form {
	display: flex;
	width: 100%;
	gap: 0;
}
.rh-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--rh-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface, #f7f7f8);
	font: inherit;
	color: var(--rh-fg);
}
.rh-search .search-submit {
	flex: 0 0 auto;
	height: 36px;
	padding: 0 14px;
	margin-inline-start: 6px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--rh-primary);
	color: #fff;
	font: inherit;
	font-weight: var(--wp--custom--fw--base);
	cursor: pointer;
}
.rh-search .search-submit:hover {
	background: var(--wp--preset--color--primary-dark, #074a8d);
}

/* The dedicated search row: full-width input, no submit button on mobile
 * to maximize input target. Submit kept for keyboard / accessibility. */
.rh-row--search .rh-row__inner {
	min-height: auto;
	padding-block: 8px;
}
.rh-row--search .rh-item {
	flex: 1 1 auto;
}
.rh-row--search .rh-search {
	max-width: none;
}

/* ----------------------------------------------------------------------
 *  Mobile row vs Main row visibility
 *  Single breakpoint at 900px keeps things simple. Tweak if the menu
 *  gets long enough to overflow at desktop sizes.
 * ---------------------------------------------------------------------- */
.rh-row--main     { display: block; }
.rh-row--menu_row { display: block; --rh-row-h: 52px; }
.rh-row--mobile   { display: none; }
.rh-row--search   { display: none; }

@media (max-width: 900px) {
	.rh-row--main     { display: none; }
	.rh-row--menu_row { display: none; }
	.rh-row--mobile   { display: block; }
	.rh-row--search   { display: block; }

	/* Override the desktop min-height (80px) — in mobile/tablet the
	 * header is only mobile row + search row, so the desktop floor
	 * would create empty vertical space. Let rows size naturally. */
	.rahkar-site-header {
		min-height: auto;
	}

	.rh-row__inner {
		min-height: var(--rh-row-h-mobile);
	}

	.rh-logo__img {
		max-height: 32px;
	}
	.rh-logo--svg svg {
		height: calc(var(--rh-row-h-mobile) - 8px);
	}
}

/* ── Compact mobile (≤480px): tighten spacing for small screens ─────── */
@media (max-width: 480px) {
	.rahkar-site-header {
		--rh-gap: 6px;
		--rh-pad-x: 10px;
	}
	/* Slim the mobile row so search row gets more room */
	.rh-row--mobile .rh-row__inner {
		min-height: 50px;
	}
	.rh-logo--text {
		gap: 4px;
	}
	.rh-logo__mark {
		width: 28px;
		height: 28px;
		border-width: 2px;
		font-size: 8px;
	}
	.rh-logo__word {
		font-size: .78rem;
	}
	/* Compact icon buttons: 36px touch target (still above 32px minimum) */
	.rh-cart,
	.rh-account,
	.rh-toggle {
		min-width: 36px;
		height: 36px;
		padding: 0 6px;
	}
	/* Search row: slightly shorter input on very small screens */
	.rh-row--search .rh-row__inner {
		padding-block: 6px;
	}
	.rh-search--inline {
		height: 38px;
	}
}

/* ── Ultra-compact (≤360px): squeeze every pixel on the smallest phones ── */
@media (max-width: 360px) {
	.rahkar-site-header {
		--rh-pad-x: 8px;
	}
	.rh-logo__word {
		display: none;
	}
	/* Show only the KT mark on the tiniest screens — the word is redundant
	 * when the user is already on the site. Keeps space for toggle + cart. */
	.rh-row--mobile .rh-row__inner {
		gap: 4px;
	}
	.rh-cart,
	.rh-account,
	.rh-toggle {
		min-width: 34px;
		height: 34px;
		padding: 0 4px;
	}
	/* Bottom-nav: tighten label font to prevent truncation on 320px */
	.rh-bnav__label {
		font-size: 10px;
	}
	.rh-bnav__btn {
		padding: 6px 4px 4px;
		gap: 3px;
	}
}

/* ----------------------------------------------------------------------
 *  Mobile nav drawer (off-canvas from the right) + backdrop
 *
 *  Speed notes:
 *   - Only `transform` and `opacity` are animated → GPU-composited, no
 *     reflow or repaint of the rest of the page on toggle.
 *   - `contain: layout paint` on the drawer isolates internal layout
 *     changes from affecting outside layers.
 *   - Drawer is `display: none` on desktop (saves paint cost entirely
 *     when not applicable) and `display: flex` only on mobile.
 *   - `will-change: transform` is set permanently on the drawer because
 *     it's a single element only present on mobile — the trade-off
 *     (one extra compositor layer) is cheaper than re-setting it on
 *     every open/close.
 *
 *  RTL note: the drawer sits at the right edge regardless of document
 *  direction. We use physical `right: 0` and `translateX(100%)` here
 *  intentionally — logical properties for transforms don't exist, and
 *  mixing them with `inset-inline-end` would be inconsistent.
 * ---------------------------------------------------------------------- */
.rh-mobile-nav,
.rh-mobile-backdrop {
	display: none;
}

@media (max-width: 900px) {
	.rh-mobile-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 17, 21, 0.45);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease-out, visibility 0s linear 200ms;
	}
	.rh-mobile-backdrop[data-state="open"] {
		opacity: 1;
		visibility: visible;
		transition: opacity 200ms ease-out, visibility 0s linear 0s;
	}

	.rh-mobile-nav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(86vw, 340px);
		background: var(--rh-bg);
		color: var(--rh-fg);
		box-shadow: -8px 0 24px rgba(15, 17, 21, 0.12);
		z-index: 1000;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
		will-change: transform;
		contain: layout paint;
		border: 0;
		padding: 0;
	}
	.rh-mobile-nav[data-state="open"] {
		transform: translateX(0);
	}

	.rh-mobile-nav__head {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 52px;
		padding: 8px 12px;
		border-bottom: 1px solid var(--rh-border);
		flex: 0 0 auto;
	}
	.rh-mobile-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: var(--wp--custom--radius--md);
		background: transparent;
		color: var(--rh-fg);
		cursor: pointer;
	}
	.rh-mobile-nav__close:hover,
	.rh-mobile-nav__close:focus-visible {
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-primary);
	}

	.rh-mobile-nav__body {
		flex: 1 1 auto;
		padding: 6px 8px 16px;
	}

	/* Drawer-scoped menu styling — overrides the desktop horizontal layout. */
	.rh-mobile-nav .rh-menu {
		display: block;
	}
	.rh-mobile-nav .rh-menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.rh-mobile-nav .rh-menu__list > li {
		position: static;
	}
	.rh-mobile-nav .rh-menu__list > li > a {
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 12px;
		border-bottom: 1px solid var(--rh-border);
		font-weight: var(--wp--custom--fw--base);
	}
	/* Hide desktop chevron inside drawer — JS arrow button handles it. */
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children > a::after {
		display: none;
	}
	.rh-mobile-nav .rh-menu__list > li:last-child > a {
		border-bottom: 0;
	}
	/* Drilldown: submenus hidden until activated by JS */
	.rh-mobile-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0;
		background: transparent;
		min-width: 0;
		display: none;
	}
	.rh-mobile-nav .sub-menu.rh-drill-open {
		display: block;
	}
	.rh-mobile-nav .sub-menu a {
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 12px;
		color: var(--rh-fg);
		font-weight: var(--wp--custom--fw--base);
		border-bottom: 1px solid var(--rh-border);
		border-radius: 0;
	}

	/* Drilldown: hide siblings when drilling into a child */
	.rh-mobile-nav .rh-drill-hidden > li {
		display: none;
	}
	.rh-mobile-nav .rh-drill-hidden > li.rh-drill-parent {
		display: block;
	}
	.rh-mobile-nav .rh-menu__list > li.rh-drill-parent > a,
	.rh-mobile-nav .rh-menu__list > li.rh-drill-parent > .rh-drill-arrow,
	.rh-mobile-nav .sub-menu > li.rh-drill-parent > a,
	.rh-mobile-nav .sub-menu > li.rh-drill-parent > .rh-drill-arrow {
		display: none;
	}

	/* Drilldown arrow button (items with children).
	 * Specificity must beat `.rh-mobile-nav .rh-menu__list > li` (0,2,1)
	 * and `.rh-mobile-nav .rh-menu__list > li > a` (0,2,2). */
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children,
	.rh-mobile-nav .sub-menu > li.menu-item-has-children {
		position: relative;
	}
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children > a,
	.rh-mobile-nav .sub-menu > li.menu-item-has-children > a {
		padding-inline-end: 48px;
	}
	.rh-drill-arrow {
		position: absolute;
		inset-inline-end: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 0;
		background: transparent;
		color: var(--rh-fg-muted);
		cursor: pointer;
		transition: color 120ms linear;
	}
	.rh-drill-arrow:hover {
		color: var(--rh-primary);
	}

	/* Drilldown back button */
	.rh-drill-back-item {
		list-style: none;
	}
	.rh-drill-back {
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px;
		padding: 0 12px;
		gap: 8px;
		border: 0;
		border-bottom: 1px solid var(--rh-border);
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-fg);
		font: inherit;
		font-weight: var(--wp--custom--fw--strong);
		cursor: pointer;
		transition: color 120ms linear;
	}
	.rh-drill-back:hover {
		color: var(--rh-primary);
	}

	/* Body scroll-lock state — set by JS on <html>. Locks scroll without
	 * causing layout shift on iOS (overflow:hidden alone isn't enough). */
	html.rh-no-scroll,
	html.rh-no-scroll body {
		overflow: hidden;
		touch-action: none;
	}
}

/* ----------------------------------------------------------------------
 *  Toggle button — visual state synced from aria-expanded by JS.
 * ---------------------------------------------------------------------- */
.rh-toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}

/* =====================================================================
 *  Funnel header — minimal header for cart & checkout pages.
 *  Replaces the full header builder output on purchase-funnel pages
 *  to keep the shopper focused. Pure CSS, zero JS.
 * ===================================================================== */
.rh-funnel-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--base, #fff);
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-funnel-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px var(--wp--style--root--padding-right, 16px) 12px var(--wp--style--root--padding-left, 16px);
	min-height: 56px;
	box-sizing: border-box;
}
.rh-funnel-header__side:first-child {
	justify-self: start;
}
.rh-funnel-header__side:last-child {
	justify-self: end;
}
.rh-funnel-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	justify-self: center;
}
.rh-funnel-header__logo--text {
	font-size: 1.125rem;
	font-weight: var(--wp--custom--fw--strong);
	color: var(--wp--preset--color--contrast, #0f1115);
}
.rh-funnel-header__logo-img {
	max-height: 36px;
	width: auto;
}
.rh-funnel-header__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--wp--preset--color--contrast, #0f1115);
	cursor: pointer;
	transition: background-color 120ms;
	-webkit-tap-highlight-color: transparent;
}
.rh-funnel-header__back:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-funnel-header__label {
	font-size: 0.9375rem;
	font-weight: var(--wp--custom--fw--strong);
	color: var(--wp--preset--color--contrast, #0f1115);
	justify-self: center;
}
.rh-funnel-header__label--link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #0f1115);
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--md);
	transition: color 120ms, background-color 120ms;
}
.rh-funnel-header__label--link:hover {
	color: var(--wp--preset--color--primary, #0a66c2);
	background: var(--wp--preset--color--surface, #f7f7f8);
}

/* =====================================================================
 *  Luxury modes
 *
 *  1. TRANSPARENT HERO — body.rh-hero-header (set via appearance settings).
 *     Header is fully transparent at rest; transitions to solid white when
 *     the user scrolls past 10px (.is-scrolled) or hovers the header
 *     (.rh-hovered, toggled by header.js).
 *
 *  2. GLASS BLUR — body.single-product.
 *     Header stays semi-transparent with backdrop-filter blur on the
 *     product page. Product images are colourful so a frosted-glass layer
 *     keeps the header readable without a solid opaque bar.
 *
 *  Both modes scope to `header.wp-block-template-part` (the sticky wrapper)
 *  AND `.rahkar-site-header` (the inner element with the tokens) to ensure
 *  neither the wrapper background nor the inner background bleeds through.
 * ===================================================================== */

/* ── 1. Transparent hero ──────────────────────────────────────────── */

/* Fixed positioning takes the header OUT of document flow so the video
 * hero starts at the very top of the viewport and the header floats over it. */
body.rh-hero-header header.wp-block-template-part {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	z-index: 200;
	background: transparent;
	width: 100%;
}
body.rh-hero-header .wp-site-blocks > main,
body.rh-hero-header .wp-site-blocks > .wp-block-group[role="main"] {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.rh-hero-header .rahkar-site-header:not(.is-scrolled):not(.rh-hovered) {
	--rh-fg:       #fff;
	--rh-fg-muted: rgba(255,255,255,0.75);
	--rh-bg:       transparent;
	--rh-border:   transparent;
	background:    transparent;
	border-bottom-color: transparent;
}

/* Sub-menus need a solid background so text is readable */
body.rh-hero-header .rahkar-site-header:not(.is-scrolled):not(.rh-hovered) .rh-menu__list .sub-menu {
	background: var(--wp--preset--color--base, #fff);
	--rh-fg: var(--wp--preset--color--text, #1a1d23);
}

/* Smooth colour transition on all state changes */
body.rh-hero-header .rahkar-site-header {
	transition: background 220ms ease, border-color 220ms ease;
}

/* Glassmorphism: on scroll OR on hover */
body.rh-hero-header .rahkar-site-header.is-scrolled,
body.rh-hero-header .rahkar-site-header.rh-hovered:not(.is-scrolled) {
	--rh-fg:       var(--wp--preset--color--text, #1a1d23);
	--rh-fg-muted: var(--wp--preset--color--text-muted, #5b6271);
	--rh-bg:       rgba(255, 255, 255, 0.78);
	--rh-border:   rgba(209, 213, 219, 0.5);
	background:    rgba(255, 255, 255, 0.78);
	backdrop-filter:         blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom-color: rgba(209, 213, 219, 0.5);
}

@media (max-width: 900px) {
	body.rh-hero-header header.wp-block-template-part {
		position: fixed;
		background: transparent;
		inset-inline-start: 0;
		inset-inline-end: 0;
		width: 100%;
	}
	body.rh-hero-header .rahkar-site-header:not(.is-scrolled):not(.rh-hovered) {
		--rh-fg:       var(--wp--preset--color--text, #1a1d23);
		--rh-fg-muted: var(--wp--preset--color--text-muted, #5b6271);
		--rh-bg:       transparent;
		--rh-border:   transparent;
		background:    transparent;
		border-bottom-color: transparent;
	}
	/* Hide search row on transparent state to keep header slim on mobile */
	body.rh-hero-header .rahkar-site-header:not(.is-scrolled):not(.rh-hovered) .rh-row--search {
		display: none;
	}
}

/* ── 2. Glass blur — product page ─────────────────────────────────── */

body.single-product header.wp-block-template-part {
	background: transparent;
}

body.single-product .rahkar-site-header {
	background:              rgba(255,255,255,0.82);
	backdrop-filter:         blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border-bottom-color:     rgba(0,0,0,0.07);
}

/* =====================================================================
 *  Sticky scroll — collapse non-essential rows on scroll.
 *
 *  JS toggles `is-scrolled` on the header root after ~10px of scroll.
 *  Desktop: hides menu_row → only main row stays.
 *  Mobile:  hides mobile row → only search row stays (bottom nav bar
 *           provides cart/menu access).
 * ===================================================================== */
@media (min-width: 901px) {
	.rh-row--menu_row {
		/* No overflow:hidden at rest — would clip hover submenus that
		 * extend below the row. Clipping is reintroduced via the
		 * .is-scrolled state below where it's actually needed. */
		max-height: var(--rh-row-h);
		transition: max-height 200ms ease-out, border-top-width 200ms ease-out;
	}
	.rahkar-site-header.is-scrolled .rh-row--menu_row {
		max-height: 0;
		overflow: hidden;
		border-top-width: 0;
	}

	/* Compact main row after scroll — reduces visual weight when the
	 * user is actively browsing content. Logo, search and actions
	 * stay fully functional; only pointless vertical space is reclaimed.
	 * The original 112px row has generous padding for first impression;
	 * 80px after scroll is still comfortable and matches modern eCommerce
	 * headers (Digikala, Snapp). */
	.rh-row--main {
		transition: min-height 200ms ease-out;
	}
	.rahkar-site-header.is-scrolled .rh-row--main {
		--rh-row-h: 80px;
		min-height: 80px;
	}
	.rahkar-site-header.is-scrolled .rh-row--main .rh-row__inner {
		padding-block: 6px;
		transition: padding-block 200ms ease-out;
	}
}
@media (max-width: 900px) {
	/* Mobile row (logo + hamburger + cart) stays visible on scroll —
	 * this is the sticky header the user sees while browsing.
	 * It was previously collapsed to max-height:0 which hid the
	 * primary navigation affordance; now it persists. */
	.rh-row--mobile {
		overflow: hidden;
		max-height: var(--rh-row-h-mobile);
	}

	/* Search row collapses smoothly on scroll instead of staying visible.
	 * Previously it persisted at 48px creating an extra box below the
	 * sticky header. Now it collapses the same way the desktop menu_row
	 * does: smooth max-height transition to 0. */
	.rh-row--search {
		overflow: hidden;
		max-height: var(--rh-row-h-mobile, 56px);
		transition: max-height 200ms ease-out, border-top-width 200ms ease-out;
	}
	.rahkar-site-header.is-scrolled .rh-row--search {
		max-height: 0;
		border-top-width: 0;
	}
}