/* araz-home: site-wide skin of the WoodMart header and the footer block (Figma "Araz Site").
 * Everything is scoped to .whb-header / .araz-hd-* / .ah-foot, so no other element changes.
 * Structure of the header is DATA (see deploy/apply.php); this file only dresses it.
 * Tokens come from the 1280 Figma frame. */

:root {
	--ah-purple: #5b4ecd;
	--ah-lav: #edebff;
	--ah-lav-line: #b5a3ff;
	--ah-dark: #1a3a4a;
	--ah-teal: #43a8b2;
	--ah-teal2: #5cc6d0;
	--ah-band: #eef9fa;
	--ah-muted: #707a77;
	--ah-text: rgba(0, 0, 0, .87);
	--ah-text2: rgba(0, 0, 0, .57);
	--ah-border: #e0e0e0;
	--ah-gray: #f5f5f5;
	--ah-red: #ff5454;
	--ah-foot: #eff2f8;
	--ah-shadow: 0 8px 24px rgba(26, 188, 190, .09);
	--ah-font: 'Vazirmatn', var(--wd-text-font, system-ui), sans-serif;
}

/* ------------------------------------------------------------------ header */
body.araz-home-skin {
	--wd-top-bar-h: 34px;
	--wd-top-bar-sm-h: 34px;
	--wd-header-general-h: 68px;
	--wd-header-general-sm-h: 60px;
	--wd-header-bottom-h: 56px;
	--wd-header-bottom-sm-h: 56px;
}

.whb-header {
	font-family: var(--ah-font);
	overflow-x: clip;
}

.whb-header .whb-row .container {
	max-width: none;
	width: min(1280px, 100% - 128px);
	margin-inline: auto;
	padding-inline: 0;
}

/* WoodMart pads columns and pulls them out with -10px margins; the Figma rows have exact edges */
.whb-header .whb-row .whb-column {
	margin-inline: 0;
	padding-inline: 0;
}

.whb-header .whb-row .whb-column > div,
.whb-header .whb-row .whb-column > nav {
	padding-inline: 0;
	margin-inline: 0;
}

.whb-header .info-box-wrapper {
	padding: 0;
}

/* top bar */
.whb-header .whb-top-bar {
	background: var(--ah-dark) !important;
	border: 0;
	min-height: 34px;
}

.whb-header .whb-top-bar .container {
	width: auto;
	padding-inline: 64px;
}

.whb-header .whb-top-bar .whb-flex-row {
	height: 34px;
	min-height: 34px;
}

.whb-header .araz-hd-top {
	font: 400 12px/normal var(--ah-font);
	color: #fff;
	white-space: nowrap;
}

/* main bar */
.whb-header .whb-general-header {
	background: #fff;
	border: 0;
	box-shadow: none;
}

.whb-header .whb-general-header .whb-flex-row {
	height: 68px;
	min-height: 68px;
}

.whb-header .site-logo img {
	display: block;
	width: 111px;
	height: auto;
	max-width: 111px !important;
}

.whb-header .info-box-wrapper .wd-info-box {
	margin: 0;
}

.whb-header .info-box-inner p {
	margin: 0;
	display: flex;
	flex-direction: column;
	text-align: start;
	font-family: var(--ah-font);
	font-size: 14px;
	line-height: normal;
}

.whb-header .araz-hd-label {
	font-weight: 400;
	color: #000;
}

.whb-header .araz-hd-value {
	font-weight: 500;
	color: var(--ah-teal);
}

.whb-header .araz-hd-value--bold {
	font-weight: 900;
}

/* nav row */
.whb-header .whb-header-bottom {
	background: var(--ah-lav) !important;
	border: 0;
	box-shadow: none;
}

.whb-header .whb-header-bottom .whb-flex-row {
	height: 56px;
	min-height: 56px;
	gap: 24px;
	align-items: center;
}

@media (min-width: 1025px) {
	.whb-header .whb-header-bottom .whb-column11 {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 0 0 auto;
		align-self: stretch;
	}

	.whb-header .whb-header-bottom .whb-column12 {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		justify-content: flex-end;
	}

	.whb-header .whb-header-bottom .whb-column13 {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
	}
}

/* the categories button: purple block that bleeds to the screen edge */
.whb-header .wd-header-cats {
	height: 100%;
	align-self: stretch;
	margin: 0;
}

.whb-header .wd-header-cats .menu-opener {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 56px;
	width: 251px;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 4px 0 4px 16px;
	background: var(--ah-purple) !important;
	color: #fff;
	border-radius: 12px 0 0 12px;
	font: 700 16px/normal var(--ah-font);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.whb-header .wd-header-cats .menu-opener::before {
	content: "";
	position: absolute;
	inset-block: 0;
	right: -100vw;
	width: 100vw;
	background: var(--ah-purple) !important;
}

.whb-header .wd-header-cats .menu-opener::after {
	content: "";
	order: 3;
	margin-inline-start: auto;
	width: 24px;
	height: 24px;
	background: url("../icons/down.svg") center / 24px no-repeat;
	font-size: 0;
}

.whb-header .wd-header-cats .menu-opener-icon {
	position: relative;
	order: 1;
	width: 24px;
	height: 24px;
	margin: 0;
	flex: 0 0 24px;
}

.whb-header .wd-header-cats .menu-opener-icon::before,
.whb-header .wd-header-cats .menu-opener-icon::after {
	content: none !important;
	display: none !important;
}

.whb-header .wd-header-cats .menu-opener-icon {
	border: 0;
	box-shadow: none;
}

.whb-header .wd-header-cats .menu-opener-icon {
	background: url("../icons/menu.svg") center / 24px no-repeat;
}

.whb-header .wd-header-cats .menu-open-label {
	order: 2;
	color: #fff;
	font: 700 16px/normal var(--ah-font);
	white-space: nowrap;
}

/* nav links with their icons */
.whb-header .wd-header-nav .wd-nav {
	--nav-pd: 0px;
	--nav-gap: 20px;
	gap: 20px;
	margin: 0;
}

.whb-header .araz-hd-lab {
	margin: 0;
	padding: 0;
}

.whb-header .wd-header-nav .wd-nav > li {
	margin: 0;
	padding: 0;
}

.whb-header .whb-header-bottom .wd-header-nav {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.whb-header .wd-header-nav .wd-nav > li > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	font: 500 14px/normal var(--ah-font);
	text-transform: none;
	color: var(--ah-text2);
	height: 56px;
}

.whb-header .wd-header-nav .wd-nav > li > a:hover {
	color: var(--ah-purple);
}

.whb-header .wd-header-nav .wd-nav > li.araz-nav-new > a::before,
.whb-header .wd-header-nav .wd-nav > li.araz-nav-top > a::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: center / 24px no-repeat;
}

.whb-header .wd-header-nav .wd-nav > li.araz-nav-new > a::before {
	background-image: url("../icons/rollstar.svg");
}

.whb-header .wd-header-nav .wd-nav > li.araz-nav-top > a::before {
	background-image: url("../icons/shapes.svg");
}

.whb-header .wd-header-nav .wd-nav > li > a::after {
	display: none;
}

/* the search pill */
.whb-header .whb-header-bottom .wd-search-form {
	padding: 0;
	width: 100%;
	max-width: 480px;
	min-width: 256px;
	margin: 0;
}

.whb-header .whb-header-bottom .searchform {
	display: flex;
	/* RTL: `row` puts the input on the right and the round search button on the LEFT end of the pill, as in Figma
	   (`row-reverse` put the button on the right). */
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 40px; /* Figma: the pill is 40 px high, its round button 32 px with a 4 px gap */
	padding: 4px 16px 4px 4px;
	background: #fff;
	border: 1px solid var(--ah-lav-line);
	border-radius: 999px;
	box-shadow: none;
	--wd-form-brd-radius: 999px;
}

.whb-header .whb-header-bottom .searchform .s {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	height: 30px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: 400 14px/24px var(--ah-font);
	color: var(--ah-text);
	text-align: right;
}

.whb-header .whb-header-bottom .searchform .s::placeholder {
	color: var(--ah-muted);
	opacity: 1;
}

/* The placeholder is longer than the box on narrow screens: end it with an ellipsis instead of cutting a letter in half.
   Both the input and its placeholder need the rule (browsers differ on which one text-overflow applies to). */
.whb-header .searchform .s,
.whb-header .searchform .s::placeholder {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.whb-header .whb-header-bottom .searchform .searchsubmit {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: var(--ah-purple) url("../icons/search.svg") center / 16px no-repeat;
	font-size: 0;
	box-shadow: none;
}

.whb-header .whb-header-bottom .searchform .searchsubmit span,
.whb-header .whb-header-bottom .searchform .searchsubmit::before,
.whb-header .whb-header-bottom .searchform .searchsubmit::after {
	display: none;
}

.whb-header .whb-header-bottom .wd-clear-search {
	display: none;
}

/* icon buttons: user, bookmark (wishlist), request list (cart) */
.whb-header .whb-header-bottom .wd-tools-element > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 20px;
	background: #fff;
}

.whb-header .whb-header-bottom .wd-tools-element .wd-tools-icon {
	background: transparent !important;
	box-shadow: none !important;
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	font-size: 0;
}

.whb-header .whb-header-bottom .wd-tools-element .wd-tools-icon::before {
	content: "";
	display: block;
	/* auto side margins centre the glyph even when the theme stretches .wd-tools-icon to the button's width
	   (it measured 40 px wide, which left the 24 px glyph at one end, ~8 px off centre). */
	margin-inline: auto;
	width: 24px;
	height: 24px;
	background: center / 24px no-repeat;
	font-size: 0;
}

.whb-header .whb-header-bottom .wd-header-my-account .wd-tools-icon::before {
	background-image: url("../icons/user.svg");
}

.whb-header .whb-header-bottom .wd-header-wishlist .wd-tools-icon::before {
	background-image: url("../icons/bookmark.svg");
}

.whb-header .whb-header-bottom .wd-header-cart > a {
	background: var(--ah-purple) !important;
}

.whb-header .whb-header-bottom .wd-header-cart .wd-tools-icon::before {
	background-image: url("../icons/bag.svg");
}

.whb-header .whb-header-bottom .wd-tools-element .wd-tools-text {
	display: none;
}

.whb-header .whb-header-bottom .wd-tools-element .wd-tools-count,
.whb-header .whb-header-bottom .wd-tools-element .wd-cart-number {
	/* .wd-tools-element is in the selector on purpose: WoodMart's badge rule is
	   `.wd-tools-element:is([class*=wd-design-6]...) .wd-tools-count` (same weight as without it) and loads later. */
	position: absolute;
	/* The circles are 40 px wide with an 8 px gap; a badge hanging 8 px out sat on the neighbouring circle. */
	top: -4px;
	inset-inline-end: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--ah-teal2);
	color: #fff;
	font: 500 10px/16px var(--ah-font);
}

.whb-header .whb-header-bottom .wd-tools-element .wd-tools-count.araz-zero,
.whb-header .whb-header-bottom .wd-tools-element .wd-cart-number.araz-zero {
	display: none;
}

.whb-header .whb-header-bottom .wd-cart-number .subtext,
.whb-header .whb-header-bottom .wd-cart-subtotal {
	display: none;
}

/* the lab button */
.whb-header .araz-lab-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 20px;
	border-radius: 20px;
	background: rgba(91, 78, 205, .62);
	color: #fff;
	font: 500 14px/normal var(--ah-font);
	white-space: nowrap;
}

.whb-header .araz-lab-btn::after {
	content: "";
	/* Figma: the knit icon sits at the START (right) of the label; as the last child it landed on the left in RTL. */
	order: -1;
	width: 24px;
	height: 24px;
	background: url("../icons/knit.svg") center / 24px no-repeat;
}

.whb-header .araz-lab-btn:hover {
	background: var(--ah-purple);
	color: #fff;
}

/* INTERIM: not in Figma. Below 1025px the header is the THEME's own mobile header (burger menu, logo,
 * account, search row) dressed in the same colours and type. The 960 and 360 frames draw a desktop-style header
 * (categories button, nav links, info texts) that the theme's burger menu cannot reproduce without losing the
 * working mobile menu; replace when the design is final. */
@media (max-width: 1024px) {
	.whb-header .whb-top-bar .container {
		padding-inline: 16px;
	}

	.whb-header .araz-hd-top {
		font-size: 11px;
		white-space: normal;
		text-align: center;
	}

	.whb-header .whb-general-header .whb-flex-row {
		height: 60px;
		min-height: 60px;
	}

	.whb-header .whb-row .container {
		width: auto;
		padding-inline: 16px;
	}

	.whb-header .whb-header-bottom {
		background: var(--ah-lav);
	}

	.whb-header .whb-header-bottom .whb-flex-row {
		height: 56px;
		min-height: 56px;
	}

	.whb-header .wd-tools-element.wd-header-mobile-nav a,
	.whb-header .wd-tools-element.wd-header-my-account a {
		min-width: 40px;
		min-height: 40px;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ footer */
.wd-footer.footer-container {
	background: var(--ah-foot);
	border: 0;
}

.wd-footer .main-footer {
	max-width: none;
	padding: 0;
}

.wd-footer .main-footer .elementor,
.wd-footer .main-footer .e-con,
.wd-footer .main-footer .e-con-inner {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
}

.wd-footer .main-footer .elementor-widget:not(:last-child) {
	margin: 0;
}

.ah-foot {
	background: var(--ah-foot);
	padding: 48px 0 24px;
	font-family: var(--ah-font);
}

.ah-foot__in {
	display: flex;
	gap: 32px;
	align-items: center;
	width: min(1280px, 100% - 48px);
	margin-inline: auto;
}

.ah-foot__about {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
}

.ah-foot__logo img {
	display: block;
	width: 115px;
	height: 33px;
}

.ah-foot__about p {
	margin: 0;
	font: 400 12px/24px var(--ah-font);
	letter-spacing: -.12px;
	color: var(--ah-text2);
	text-align: start;
}

.ah-foot__col {
	flex: 0 0 160px;
}

.ah-foot__cats {
	flex: 0 0 480px;
}

.ah-foot h2 {
	margin: 0 0 12px;
	font: 800 24px/normal var(--ah-font);
	color: var(--ah-purple);
	text-align: start;
}

.ah-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-text2);
}

.ah-foot li {
	margin: 0;
	white-space: nowrap;
}

.ah-foot a {
	color: inherit;
	text-decoration: none;
}

.ah-foot a:hover {
	color: var(--ah-purple);
}

.ah-foot__cats ul {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	grid-auto-columns: auto;
	justify-content: space-between;
}

/* INTERIM: not in Figma (the 960 and 360 footer frames show it, but unfinished); replace when the design is final.
 * Footer: columns wrap on tablet, single column on phone, same type and colours. */
@media (max-width: 1100px) {
	.ah-foot__in {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.ah-foot__about {
		flex: 1 1 100%;
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.ah-foot__cats {
		flex: 1 1 320px;
	}

	.ah-foot__col {
		flex: 1 1 140px;
	}
}

@media (max-width: 599px) {
	.ah-foot {
		padding-top: 32px;
	}

	.ah-foot__about {
		flex-direction: column;
	}

	.ah-foot__col,
	.ah-foot__cats {
		flex: 1 1 100%;
	}

	.ah-foot__cats ul {
		display: block;
	}

	.ah-foot li {
		padding-block: 8px;
		line-height: 24px;
	}

	.ah-foot li a,
	.ah-foot li span {
		display: inline-block;
		min-height: 24px;
	}
}

/* ------------------------------------------------------------------------------------------------
 * Mobile bottom toolbar (WoodMart's .wd-toolbar: «علاقه مندی» and «لیست درخواست»).
 * It reuses the header's classes (.wd-header-wishlist, .wd-header-cart, .wd-tools-icon, .wd-tools-count) but sits
 * outside .whb-header, so none of the header rules above reached it and it kept the theme's heart / cart glyphs and
 * green badges while the same two buttons in the header were bookmark / bag with teal badges. Same icons, same badge here.
 * ------------------------------------------------------------------------------------------------ */
.wd-toolbar .wd-tools-element .wd-tools-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* the toolbar is only 55 px tall with its label under the icon and overflow hidden: a 28 px circle fits, the header's 40 px did not */
	width: 28px;
	height: 28px;
	margin: 3px auto 0;
	border-radius: 14px;
	background: #edebff;
	font-size: 0;
}

.wd-toolbar .wd-tools-element .wd-tools-icon::before {
	content: "";
	display: block;
	margin: 0;
	width: 20px;
	height: 20px;
	background: center / 20px no-repeat;
	font-size: 0;
}

.wd-toolbar .wd-header-wishlist .wd-tools-icon::before {
	background-image: url("../icons/bookmark.svg");
}

.wd-toolbar .wd-header-cart .wd-tools-icon {
	background: var(--ah-purple, #5b4ecd);
}

.wd-toolbar .wd-header-cart .wd-tools-icon::before {
	background-image: url("../icons/bag.svg");
}

.wd-toolbar .wd-tools-element .wd-tools-count,
.wd-toolbar .wd-tools-element .wd-cart-number {
	position: absolute;
	top: -2px;
	inset-inline-end: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	/* !important: the theme's toolbar badge rule (green) is heavier than ours */
	background: var(--ah-teal2, #5bc6d0) !important;
	box-shadow: none !important;
	color: #fff !important;
	font: 500 10px/16px var(--ah-font, inherit);
}

.wd-toolbar .wd-cart-number .subtext,
.wd-toolbar .wd-cart-number span {
	display: none;
}

.wd-toolbar .wd-tools-element .wd-tools-count.araz-zero,
.wd-toolbar .wd-tools-element .wd-cart-number.araz-zero {
	display: none;
}