/*
 * Hezarsarv on phones and tablets (loaded only up to 1024px wide).
 * Calm, minimal, iOS-like: translucent header, clean side menu, bottom tab bar,
 * and e-book-like reading.
 */

:root {
	--hz-ink: #1c1c1e;
	--hz-muted: #8e8e93;
	--hz-hairline: rgba(60, 60, 67, .14);
	--hz-fill: #f2f2f7;
	--hz-green: var(--wd-primary-color, #44BD32);
	--hz-tabbar-h: 58px;
}

/* ---------- Header: translucent bar with a hairline ---------- */
.whb-header .whb-general-header {
	background: rgba(255, 255, 255, .82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: .5px solid var(--hz-hairline) !important;
}

.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-tools-element .wd-tools-icon {
	color: var(--hz-ink);
}

/* Text labels next to header icons waste room on a phone. */
.whb-general-header .wd-header-my-account .wd-tools-text,
.whb-general-header .wd-header-mobile-nav .wd-tools-text {
	display: none;
}

/* ---------- Side menu ---------- */
.mobile-nav.wd-side-hidden {
	width: min(86vw, 360px);
	background: #fff;
	box-shadow: none;
	padding-bottom: env(safe-area-inset-bottom);
}

.wd-close-side,
.wd-side-hidden + .wd-close-side,
.wd-close-side.wd-close-side-opened {
	background: rgba(0, 0, 0, .28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Search: iOS-style rounded field */
.mobile-nav .searchform {
	padding: 16px 16px 8px;
	border: 0;
}

.mobile-nav .searchform input[type="text"] {
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: var(--hz-fill);
	padding-inline: 14px 40px;
	font-size: 15px;
	color: var(--hz-ink);
}

/* Menu rows */
.mobile-nav .wd-nav-mobile {
	padding: 8px 0;
}

.mobile-nav .wd-nav-mobile > li > a,
.mobile-nav .wd-nav-mobile li a {
	min-height: 52px;
	padding: 0 22px;
	border: 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--hz-ink);
	text-transform: none;
	letter-spacing: 0;
}

.mobile-nav .wd-nav-mobile > li {
	border: 0;
	position: relative;
}

.mobile-nav .wd-nav-mobile > li + li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 22px;
	left: 0;
	border-top: .5px solid var(--hz-hairline);
}

.mobile-nav .wd-nav-mobile li.current-menu-item > a,
.mobile-nav .wd-nav-mobile li a:active {
	color: var(--hz-green);
}

.mobile-nav .wd-nav-mobile .wd-nav-opener {
	border: 0;
	color: var(--hz-muted);
}

.mobile-nav .wd-nav-mobile .sub-menu a {
	font-size: 15px;
	color: var(--hz-muted);
}

/* Not used on this site */
.mobile-nav .menu-item-wishlist,
.mobile-nav .menu-item-compare {
	display: none;
}

/* ---------- Bottom tab bar ---------- */
.hz-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	height: calc(var(--hz-tabbar-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: .5px solid var(--hz-hairline);
}

.hz-tabbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--hz-muted);
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.hz-tabbar__item svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hz-tabbar__item.is-active {
	color: var(--hz-green);
}

.hz-tabbar__item.is-active svg {
	stroke-width: 2.1;
}

/* Keep page content and floating buttons above the tab bar. */
body {
	padding-bottom: calc(var(--hz-tabbar-h) + env(safe-area-inset-bottom));
}

.darkmode-toggle,
.darkmode-layer--button,
.scrollToTop,
.wd-scroll-top {
	bottom: calc(var(--hz-tabbar-h) + env(safe-area-inset-bottom) + 14px) !important;
}

/* The theme's own bottom toolbar would duplicate the tab bar. */
.wd-toolbar {
	display: none !important;
}

/* ---------- My Account on phones: content first, menu as an iOS-style list below ---------- */
@media (max-width: 768px) {
	.wd-my-account-wrapper.wd-grid-g {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.wd-my-account-wrapper > .woocommerce-MyAccount-content {
		order: 1;
		width: 100%;
	}

	.wd-my-account-wrapper > .wd-my-account-sidebar {
		order: 2;
		width: 100%;
	}

	.woocommerce-MyAccount-navigation {
		width: 100% !important;
	}

	/* The dashboard already greets the buyer. */
	.woocommerce-MyAccount-navigation .user-info-MyAccount {
		display: none;
	}

	.woocommerce-MyAccount-navigation ul {
		margin: 0;
		padding: 0;
		list-style: none;
		background: var(--hz-fill);
		border-radius: 14px;
		overflow: hidden;
	}

	.woocommerce-MyAccount-navigation ul li,
	.woocommerce-MyAccount-navigation ul li.is-active {
		margin: 0;
		border: 0;
		position: relative;
		background: transparent !important;
	}

	/* The same links are in the list below. */
	.hz-dash__small {
		display: none;
	}

	.woocommerce-MyAccount-navigation ul li + li::before {
		content: "";
		position: absolute;
		top: 0;
		right: 52px;
		left: 0;
		border-top: .5px solid var(--hz-hairline);
	}

	.woocommerce-MyAccount-navigation ul li a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 50px;
		padding: 0 16px;
		border-radius: 0;
		background: transparent !important;
		color: var(--hz-ink) !important;
		font-size: 16px;
		font-weight: 500;
		white-space: nowrap;
	}

	/* The theme paints the active row solid green; keep it a quiet list row. */
	body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a,
	body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
		background: transparent !important;
		color: var(--hz-green) !important;
		font-weight: 600;
	}
}