/* 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: #4f4c67;
	--ah-foot-line: #e0e0e0;
	--ah-shadow: 0 8px 24px rgba(26, 188, 190, .09);
	--ah-font: 'Vazirmatn', var(--wd-text-font, system-ui), sans-serif;
	/* Numerals: the site's own IRANSansX is the FaNum build, so ASCII digits draw as Farsi digits while the value stays
	   Latin (issue #7, commit 578d8d3). Vazirmatn draws ASCII digits as Latin, so the header counters use Vazirmatn with
	   its ss01 feature instead (Figma 277:6050/277:6054); the request-list and other numerals still use this face. */
	--ah-font-num: 'IRANSansx', var(--ah-font);
}

/* ------------------------------------------------------------------ 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;
	/* WoodMart computes these two totals on :root from ITS row heights (80 + 60 = 140, phones 120), so the three
	   overrides above never reach them. They are the space `.whb-sticky-prepared` reserves for the header the moment
	   the page scrolls; with the wrong total every page's content jumped up under the header (18 px, phones 30 px). */
	--wd-header-h: 158px; /* 34 + 68 + 56 */
	--wd-header-sm-h: 150px; /* 34 + 60 + 56 */
}

.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 (issue #29, Figma 277:6031: light notice bar, knitblue-gray-100, grey text 12 px) */
.whb-header .whb-top-bar {
	background: #eff2f8 !important;
	border: 0;
	min-height: 34px;
}

.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: var(--ah-text2); /* Figma 277:6033: machine-list subtitle, rgba(0,0,0,0.57) */
	white-space: nowrap;
}

/* Issue #29: the support-hours text (element id ahtopsupport, rendered as whb-ahtopsupport) is not in the design.
 * Hidden in code, so it goes even before deploy/apply.php has emptied its column in the database. */
.whb-header .whb-top-bar .whb-ahtopsupport {
	display: none;
}

/* 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: 700; /* Figma 98:605 inherits Vazirmatn Bold */
	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-flex-row {
		gap: 0; /* the gaps between the three columns are set below, they differ */
	}

	.whb-header .whb-header-bottom .whb-column11 {
		display: flex;
		align-items: center;
		gap: 24px; /* links to the categories button */
		flex: 0 0 auto;
		align-self: stretch;
	}

	.whb-header .whb-header-bottom .whb-column12 {
		flex: 1 1 0;
		min-width: 0;
		/* Figma 277:6042: 24 px gap to the categories (inline start = the right side in RTL); Figma 277:6060: padding-left 16 on the lab side */
		margin-inline: 24px 0;
		padding-inline: 0 16px;
		display: flex;
		justify-content: flex-end;
	}

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

	/* 12 px (not 8) between the round icons and the lab pill */
	.whb-header .whb-header-bottom .whb-column13 > .whb-ahlabbtn {
		margin-inline-end: 4px;
	}
}

/* Figma 277:6066 (hidden="true") holds the two nav links «محصولات جدید» and «پرفروش‌ترین‌ها»; the design shows none in the header.
 * The Main navigation menu data keeps them; only the header row hides them. */
.whb-header .whb-header-bottom .wd-header-main-nav {
	display: none;
}

/* 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;
}

/* the Knit Lab is for signed-in users only (araz-knit-lab Access): no pill for visitors */
body:not(.logged-in) .whb-header .whb-ahlabbtn {
	display: none;
}

.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: none; /* Figma 277:6061: the search pill is 598 px wide in the 1920 frame, it fills its column */
	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 0 0 12px; /* the right edge is the pill's own 16 px padding (Figma 98:625) */
	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::before,
.whb-header .whb-header-bottom .searchform .searchsubmit::after {
	display: none;
}

/* Hidden from sight but still read out (#294: «جستجو» and «بستن» name the icon-only search button and the panels'
   close links; display:none took the name away). */
.whb-header .whb-header-bottom .searchform .searchsubmit span,
.cart-widget-side .wd-heading .close-side-widget .wd-action-text,
.login-form-side .wd-heading .close-side-widget .wd-action-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.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: 700 10px/16px var(--ah-font);
	font-feature-settings: "ss01"; /* Vazirmatn's ss01 draws the ASCII count as Persian digits (see the header counters below) */
}

.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;
}

/* Issue #29, Figma 277:6046 (cart) and 277:6051 (wishlist). The cart is a purple pill, 40 high, with the count
 * inside: pad 8, gap 4, radius 20; the bag is at the LEFT (x 8) and the count to its RIGHT (x 36), teal, min-width
 * 24, pad 0 4, 12 px bold, radius 8. Figma's frame is physical left to right, the page is RTL, so the link
 * runs row-reverse: the bag (first in the DOM) lands on the left and the count on the right (designer, round 1).
 * Without a count the pill is the 40 px circle (8 + 24 + 8). */
.whb-header .whb-header-bottom .wd-header-cart > a {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	width: auto;
	/* 40 = the zero-count circle, 8 + 24 + 8: derived from the 40 px pill in Figma 277:6046, not drawn as a state. */
	min-width: 40px;
	padding: 8px;
	gap: 4px;
	border-radius: 20px;
}

.whb-header .whb-header-bottom .wd-header-cart .wd-tools-icon {
	display: flex;
	align-items: center;
	gap: 4px;
	/* WoodMart's header tools CSS (woodmart/css/parts/header-el-tools, design-7): `.wd-tools-element:is([class*=wd-design-7]):not(.wd-with-wrap) .wd-tools-icon { width: 42px }`.
	   Same specificity as ours and it loads later, so !important is the only way to size the icon to its content. */
	width: auto !important;
	height: 24px;
}

.whb-header .whb-header-bottom .wd-header-cart .wd-cart-number {
	position: static;
	top: auto;
	inset-inline-end: auto;
	width: auto;
	/* Figma 277:6049: min-w-[24px], a rule: one digit is 24 wide, three digits grow (the pill is not a sample of "23x24"). */
	min-width: 24px;
	box-sizing: border-box;
	text-align: center;
	height: 24px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--ah-teal2);
	color: var(--ah-text);
	/* Figma 277:6050: Vazirmatn Bold, Persian digits. WooCommerce gives the count as ASCII; Vazirmatn's ss01 feature maps
	   0-9 to the Persian digits (checked in the font's GSUB table and in Chrome), so the text stays Latin and no markup changes. */
	font: 700 12px/24px var(--ah-font);
	font-feature-settings: "ss01";
}

.whb-header .whb-header-bottom .wd-header-cart .wd-cart-number > span {
	display: none; /* the design shows the number only, not «محصول» */
}

/* Figma 277:6053: the wishlist badge sits in the top-left corner of the 40 px circle, min-w-[16px] (a one-digit badge
 * is 16 x 16), pad 4 4 2, 10 px bold, radius 16. The circle is the link, so the badge is positioned against it. */
.whb-header .whb-header-bottom .wd-header-wishlist > a {
	position: relative;
}

.whb-header .whb-header-bottom .wd-header-wishlist .wd-tools-icon {
	position: static;
}

.whb-header .whb-header-bottom .wd-header-wishlist .wd-tools-count {
	position: absolute;
	inset: 0 auto auto 0; /* physical, after the theme's logical inset-inline-end (RTL: that is left) */
	width: auto;
	min-width: 16px;
	box-sizing: border-box;
	text-align: center;
	height: auto;
	padding: 4px 4px 2px;
	border-radius: 16px;
	background: var(--ah-teal2);
	color: var(--ah-text);
	/* Figma 277:6054: Vazirmatn Bold 10 px, Persian digits (ss01, as the cart counter above). */
	font: 700 10px/10px var(--ah-font);
	font-feature-settings: "ss01";
}

/* 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 (Figma «Footer Desktop», 331:10109, 1920 x 205) */
.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;
}

/* 331:10109: padding 32 24, the 1 px top line (#e0e0e0) is a stroke inside the box, so it takes no height (205 = 32 + 141 + 32) */
.ah-foot {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	background: var(--ah-foot);
	box-shadow: inset 0 1px 0 var(--ah-foot-line);
	padding: 32px 24px;
	font-family: var(--ah-font);
	color: #fff;
}

/* 324:9972: 1000 px row, centred (460 px from each side of 1920), columns 32 px apart */
.ah-foot__in {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 32px;
	width: 1000px;
	max-width: 100%;
}

.ah-foot__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

/* widths from the frames: social 160, links 112, contact 240, about 392 (the inner row is 1000 = 160 + 112 + 240 + 392 + 3 x 32) */
.ah-foot__about {
	flex: 0 0 392px;
}

.ah-foot__contact {
	flex: 0 0 240px;
}

.ah-foot__links {
	flex: 0 0 112px;
}

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

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

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

.ah-foot__about p {
	margin: 0;
	width: 100%;
	height: 96px;
	overflow: hidden;
	font: 400 12px/24px var(--ah-font);
	letter-spacing: -.12px;
	color: #fff;
	text-align: start;
}

/* 31 px line box: Figma's frame heights for the headings (324:9974 and friends), not the font's own «normal» (32 px) */
.ah-foot h2 {
	margin: 0;
	font: 800 20px/31px var(--ah-font);
	color: #fff;
	text-align: start;
}

.ah-foot__social p {
	margin: 0;
	font: 400 12px/24px var(--ah-font);
	color: #fff;
	text-align: start;
}

.ah-foot__icons {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.ah-foot__icons a,
.ah-foot__icons span {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

.ah-foot__icons img {
	display: block;
	width: 24px;
	height: 24px;
}

.ah-foot__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 12px/24px var(--ah-font);
	color: #fff;
}

.ah-foot__list li {
	margin: 0;
	padding: 0;
}

/* keyboard focus only (the design has no focus state, so this is not from Figma): a white ring, because the purple
   --ah-purple does not show on the dark band */
.ah-foot a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* hover: Figma has no hover state; the designer asked for a few shades lighter (#41, 2026-10-13). The links are already white,
   so the highlight is the footer colour #4f4c67 lightened by 10 points of lightness (#666284) behind the link. This is a
   reading of "چند پرده روشن‌تر", put to the designer on the issue. */
@media (hover: hover) {
	.ah-foot a:hover {
		background: #666284;
		box-shadow: 0 0 0 4px #666284;
		border-radius: 4px;
	}
}

.ah-foot__list p,
.ah-foot__list a,
.ah-foot__list span {
	display: block;
	margin: 0;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	text-align: start;
}

.ah-foot__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font: 400 12px/24px var(--ah-font);
	color: #fff;
	white-space: nowrap;
}

.ah-foot__row p,
.ah-foot__row a {
	margin: 0;
	color: #fff;
	text-decoration: none;
}

.ah-foot__phone {
	font-weight: 700;
	letter-spacing: 2px;
}

.ah-foot__address {
	width: 100%;
	margin: 0;
	font: 400 12px/24px var(--ah-font);
	color: #fff;
	text-align: start;
}

.ah-foot__contact-body {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
}

/* INTERIM, not in Figma (the frame is desktop only): tablet wraps the columns, phone stacks them. Replace when the design is final (issue #41). */
@media (max-width: 1100px) {
	.ah-foot__in {
		flex-wrap: wrap;
		width: 100%;
		gap: 32px 32px;
	}

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

	.ah-foot__about p {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	.ah-foot__contact,
	.ah-foot__links,
	.ah-foot__social {
		flex: 1 1 140px;
	}
}

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

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

	.ah-foot__about p {
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.ah-foot__contact,
	.ah-foot__links,
	.ah-foot__social {
		flex: 1 1 100%;
	}

	.ah-foot__list a,
	.ah-foot__list span {
		padding-block: 8px;
		line-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-num, 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;
}

/* ------------------------------------------------------------------------------------------------
 * Request-list slide-in panel (Figma «Shopping Basket» 194:2218 / 194:3604). WoodMart's cart side panel, restyled:
 * 320 px white sheet, 12/16 px padding, rows with the picture at the start, the stepper, a full-width purple
 * «ثبت درخواست» button; the page behind is blurred with a purple tint. The mini-cart markup (and its ajax) is WoodMart's.
 * ------------------------------------------------------------------------------------------------ */
.cart-widget-side.wd-side-hidden {
	/* the theme's .wd-side-hidden sets 340px with the same weight and loads later: two classes win */
	--wd-side-hidden-w: 320px;
	width: min(320px, 100vw);
	padding: 16px 12px;
	background: #fff;
	font-family: var(--ah-font);
	/* the sheet itself never scrolls: the list does (the theme's .wd-scroll-content), once it is taller than its room */
	overflow: hidden;
}

.wd-close-side.wd-close-side-opened {
	background: rgba(91, 78, 205, .2);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* header, Figma 194:3691: a row 296 x 32 with 8 px on its right (the start), the title then the lavender close pill at
   the far end. The title is «سبد خرید» (350:7130, issue #169) next to a pill (349:5999: #5b4ecd, pad 4 8, gap 4, radius 12, 32 high) that
   holds the teal count (349:6002) and the bag (349:6000); Figma is physical left to right: count at the left, bag
   at the right. The pill is added by assets/js/site.js. */
.cart-widget-side .wd-heading {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0 8px 0 0;
	border: 0;
	background: none;
}

.cart-widget-side .wd-heading .title {
	display: flex;
	align-items: center;
	gap: 4px;
	font: 700 16px/32px var(--ah-font);
	color: var(--ah-purple);
	text-transform: none;
}

.cart-widget-side .wd-heading .title .araz-req-badge {
	display: flex;
	flex-direction: row; /* RTL: the bag (::before) first = at the right, the count after it = at the left, as in the frame */
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 12px;
	background: #5b4ecd;
}

.cart-widget-side .wd-heading .title .araz-req-badge::before {
	content: "";
	width: 24px;
	height: 24px;
	background: #fff;
	-webkit-mask: url("../icons/basket/bag.svg") center / 24px no-repeat;
	mask: url("../icons/basket/bag.svg") center / 24px no-repeat;
}

.cart-widget-side .wd-heading .title .araz-req-badge__count {
	box-sizing: border-box;
	min-width: 20px; /* Figma 349:6002 min-w-[20px] */
	padding: 0 4px;
	border-radius: 8px;
	background: var(--ah-teal2);
	color: rgba(0, 0, 0, .87);
	font: 700 12px/20px var(--ah-font);
	font-feature-settings: "ss01"; /* Persian digits from the Latin count, as the header counters */
	text-align: center;
}

.cart-widget-side .wd-heading .title .araz-req-badge.araz-zero .araz-req-badge__count {
	display: none; /* the frame shows no zero state: like the header bag, the pill keeps only the bag */
}

.cart-widget-side .wd-heading .close-side-widget {
	margin: 0;
}

.cart-widget-side .wd-heading .close-side-widget a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 32px !important; /* WoodMart's .wd-heading .wd-action-btn.wd-style-text > a { height: 25px } is more specific (Figma 194:3692: 48 x 32) */
	padding: 4px 12px; /* 194:3692: 4 and 12 around the 24 px glyph = 48 x 32 */
	border-radius: 16px;
	background: #edebff;
}

.cart-widget-side .wd-heading .close-side-widget .wd-action-icon {
	display: block;
	width: 24px;
	height: 24px;
	background: var(--ah-purple);
	-webkit-mask: url("../icons/basket/close.svg") center / 24px no-repeat;
	mask: url("../icons/basket/close.svg") center / 24px no-repeat;
}

.cart-widget-side .wd-heading .close-side-widget .wd-action-icon::before,
.cart-widget-side .wd-heading .close-side-widget .wd-action-icon::after {
	content: none;
}

/* the rows: the theme's flex column already fills the sheet (list grows, button at the bottom). A min-height in vh
   made the sheet taller than its room under the admin bar and in phone browsers, so the whole sheet scrolled. */
.cart-widget-side .widget_shopping_cart {
	min-height: 0;
}

.cart-widget-side .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
}

.cart-widget-side .shopping-cart-widget-body {
	flex: 1 1 auto;
}

.cart-widget-side ul.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A row is the designer's «Product Card» (component set 359:12109, issue #88), State 2: Default 359:12107 (white, the
   1 px #e0e0e0 stroke inside, 128 high, radius 8) and Hover 359:12108 (lavender, no stroke). The picture slot (359:12083:
   108 = 12 + 88 + 8) is at the physical right; the text block (359:12069, padding 12; its «main» 359:12070: a column with
   4 px gaps, right-aligned, centred in the row) holds the title row (359:12071, 32 px kept free at the physical left for the
   trash 359:12074 at its top-left corner, 0.5 px down), the stepper row (359:12078) and the price line (393:13080).
   WoodMart's markup, with the remove link moved into the text block (src/RequestPanel.php) so it can sit at that corner. */
.cart-widget-side .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
	height: 128px; /* 359:12107 */
	min-height: 0;
	margin: 0 0 8px !important; /* 194:3856: 8 px between rows; the theme's .product_list_widget > li margin wins otherwise */
	padding: 0 !important;
	border: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0; /* 359:12107: the stroke is inside the 128; a border would add 2 px */
	overflow: hidden;
}

.cart-widget-side .woocommerce-mini-cart-item:hover {
	background: #edebff !important; /* 359:12108 */
	box-shadow: none;
}

/* WoodMart's whole-row link stays under the text block (a click on the title opens the product, as before); the
   stepper and the trash (z-index 3) stay above it */
.cart-widget-side .woocommerce-mini-cart-item .cart-item-link.wd-fill {
	z-index: 1;
}

/* the picture (359:12084, hover 359:12067): 88 square, the stroke inside, radius 8, 12 from the row's right edge, centred */
.cart-widget-side .cart-item-image {
	position: absolute;
	top: 50%;
	right: 12px;
	left: auto;
	z-index: 2;
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	margin: 0;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transform: translateY(-50%);
}

.cart-widget-side .woocommerce-mini-cart-item:hover .cart-item-image {
	border-color: #b5a3ff;
}

.cart-widget-side .cart-item-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none !important; /* WoodMart's .product_list_widget > li img { max-width: 65px } */
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

/* the text block (359:12069): the 188 left of the slot, padding 12, right-aligned rows 4 apart (359:12070: the 4 is a
   margin on the stepper and the price line, not a flex gap, because a flex item cannot be a -webkit-box and the title's
   two-line clamp needs one), centred in the row by the row's align-items */
.cart-widget-side .woocommerce-mini-cart-item .cart-info {
	position: relative;
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	height: auto; /* the theme stretches it to the row; the block must be as tall as its rows to sit centred */
	min-height: 0;
	display: block;
	margin: 0 108px 0 0; /* the slot (359:12083) on the physical right */
	padding: 12px;
	text-align: right;
}

/* title (359:12072): bold 14 on 24, two lines at most, right-aligned; 32 px free at the physical left (359:12071 pl 32) */
.cart-widget-side .cart-info .wd-entities-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 48px;
	margin: 0;
	padding: 0 0 0 32px;
	font: 700 14px/24px var(--ah-font);
	color: var(--ah-text) !important;
	text-align: right;
	opacity: 1 !important;
}

/* the frame's row has no «کد کالا» line */
.cart-widget-side .cart-info .wd-product-sku {
	display: none;
}

/* the trash (359:12074, the Delete Small glyph as a mask): #ff9897 on a resting row, #b5a3ff on the hovered one (359:12057);
   the title row's top-left corner, 0.5 px down (12 px of block padding + 0.5). It is WoodMart's remove link, which
   RequestPanel.php prints at the end of the text block. The `.woocommerce-mini-cart` step outweighs WoodMart's
   header-el-cart-side.css `.cart-widget-side .woocommerce-mini-cart .remove { top: 13px; inset-inline-end: 10px }`, which
   has this rule's old weight and loads later (it put the trash at 10 / 13). */
.cart-widget-side .woocommerce-mini-cart .cart-info .remove { /* 359:12074 */
	position: absolute;
	inset-inline-end: auto; /* the theme's and the old rule's logical offsets first, the physical corner after them */
	inset-inline-start: auto;
	top: 12.5px;
	left: 12px;
	right: auto;
	z-index: 3;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #ff9897;
	-webkit-mask: url("../icons/basket/delete.svg") center / 24px no-repeat;
	mask: url("../icons/basket/delete.svg") center / 24px no-repeat;
	font-size: 0;
	opacity: 1;
}

.cart-widget-side .woocommerce-mini-cart-item:hover .cart-info .remove {
	background: #b5a3ff;
}

/* the theme's own cross (a font glyph in ::after) and its white hover disc were showing through the trash mask */
.cart-widget-side .cart-info .remove::after {
	content: none;
}

.cart-widget-side .cart-info .remove:hover,
.cart-widget-side .cart-info .remove:focus {
	background: #b5a3ff;
	box-shadow: none;
}

/* the stepper (359:12078): a full-width row packed to the physical right, 4 gap; physical order plus, box, minus (the
   theme's DOM order minus, box, plus is read right to left here). The glyphs are masks: black on a resting row
   (359:12079 / 359:12082), #5b4ecd on the hovered one (359:12062 / 359:12065). */
.cart-widget-side .cart-info div.quantity {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start; /* RTL: the start is the right edge (Figma's justify-end) */
	gap: 4px;
	width: auto;
	margin: 4px 0 0; /* 359:12070 */
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.cart-widget-side .cart-info div.quantity .btn {
	width: 24px;
	min-width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, .57); /* the icons' own fill in 359:12107 (black at 57 %); the masks below are opaque shapes */
	-webkit-mask: center / 24px no-repeat;
	mask: center / 24px no-repeat;
	font-size: 0;
	box-shadow: none;
}

.cart-widget-side .cart-info div.quantity .btn.minus {
	-webkit-mask-image: url("../icons/basket/minus-active.svg"); /* the same shape as minus.svg, opaque: minus.svg's own 57 % would stack on the colour's */
	mask-image: url("../icons/basket/minus-active.svg");
}

.cart-widget-side .cart-info div.quantity .btn.plus {
	-webkit-mask-image: url("../icons/basket/plus.svg");
	mask-image: url("../icons/basket/plus.svg");
}

.cart-widget-side .woocommerce-mini-cart-item:hover .cart-info div.quantity .btn {
	background: #5b4ecd; /* 359:12108: both icons #5B4ECD, full */
}

/* the number box (359:12080, hover 359:12063): 20 high with the 1 px stroke inside (an inset shadow), at least 24 wide,
   12 px each side of the number, radius 8, 14 on a 20 px line */
.cart-widget-side .cart-info div.quantity input.qty {
	box-sizing: border-box;
	width: 35px; /* the frame's box with «12»; browsers with field-sizing size it from the number instead (below) */
	min-width: 24px;
	height: 20px !important; /* WoodMart's input height (32) beats it otherwise */
	min-height: 0 !important;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #9e9e9e;
	font: 400 14px/20px var(--ah-font-num); /* Farsi digits (359:12081) */
	color: var(--ah-text);
	text-align: center;
	-moz-appearance: textfield;
}

@supports (field-sizing: content) {
	.cart-widget-side .cart-info div.quantity input.qty {
		width: auto;
		field-sizing: content;
	}
}

.cart-widget-side .cart-info div.quantity input.qty::-webkit-outer-spin-button,
.cart-widget-side .cart-info div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cart-widget-side .woocommerce-mini-cart-item:hover .cart-info div.quantity input.qty {
	box-shadow: inset 0 0 0 1px #b5a3ff;
}

/* the old "2 ×" line (it was for prices) */
.cart-widget-side .cart-info > span.quantity {
	display: none;
}

/* the price line (393:13080, a viewer who is shown prices): a 24 px row packed to the right under the stepper; the
   amount's size is price.css's */
.cart-widget-side .cart-info .araz-mini-cart-line {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: flex-start; /* RTL: right */
	align-items: center;
	width: 100%;
	margin: 4px 0 0; /* 359:12070 */
	font-weight: 700;
	line-height: 24px;
	color: var(--ah-text);
	text-align: right;
}

/* footer: one full-width purple «ثبت درخواست» button; the list view is already in the panel */
.cart-widget-side .shopping-cart-widget-footer {
	margin: 12px 0 0;
	padding: 0 !important; /* the theme's padding-bottom 15 left the button 15 px too high (Figma 194:3853: 16 px from the bottom) */
	border: 0;
	background: none;
}

.cart-widget-side .woocommerce-mini-cart__buttons {
	margin: 0;
	padding: 0 !important; /* the theme's 0 15px made the button 266 wide instead of 296 */
}

/* the empty list (Figma «Shopping Basket Empty» 350:7120, panel 350:7124; issue #60): the sheet is the same column with 12/16 px
   of padding and the header; the picture and the sentence (351:9732) are centred in the room between the header and the
   bottom button (350:7184), which takes the «ثبت درخواست» button's place. The theme's own glyph is replaced by the picture. */
.cart-widget-side .wd-scroll-content:has(> .wd-empty-mini-cart) {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

/* 350:7124 is a space-between column: 350:7125 (the 32 px header, nothing under it), 351:9732, the button; so the picture
   and the sentence have equal room above and below (405.5 / 405.5 in the 1080 frame). The header's 8 px (the list
   state's gap) and the theme's 20 px margin-top (header-el-cart-side.css, `.cart-widget-side .wd-empty-mini-cart`,
   equal weight and loaded later, hence the `.wd-scroll-content >` step here) put it 14 px low; both are 0 here. */
.cart-widget-side:has(.wd-empty-mini-cart) > .wd-heading {
	margin-bottom: 0; /* 350:7125 */
}

.cart-widget-side .wd-scroll-content > .wd-empty-mini-cart {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0; /* 350:7124 */
	padding: 0 !important; /* the theme's 15 px sides made the button 266 wide instead of 296 */
}

.cart-widget-side .wd-empty-mini-cart::before {
	content: none; /* the theme's basket glyph */
}

/* 351:9732 «List Empty»: 180 wide, padding 9, the picture (351:9733, 81 x 81) and the sentence 9 apart, in the middle */
.cart-widget-side .wd-empty-mini-cart .woocommerce-mini-cart__empty-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	width: 180px;
	max-width: 100%;
	margin: auto;
	padding: 9px;
	/* 351:9749: bold 16 on a 24 px line, #9e9e9e, centred */
	font: 700 16px/24px var(--ah-font);
	color: #9e9e9e;
	text-align: center;
	text-transform: none;
}

.cart-widget-side .wd-empty-mini-cart .woocommerce-mini-cart__empty-message::before {
	content: "";
	display: block;
	flex: 0 0 81px;
	width: 81px;
	height: 81px;
	margin: 0;
	background: url("../icons/basket/list-empty.svg") center / 81px no-repeat;
	font-size: 0;
}

.cart-widget-side .wd-empty-mini-cart .woocommerce-mini-cart__empty-message::after {
	content: none;
}

/* 350:7184 / 350:7185 / 351:9503: the full-width purple button, radius 12, padding 12 16, the words 16 px Medium white and
   the 24 px bag before them, 4 apart; it sits where the list's own button sits, on the sheet's bottom padding */
.cart-widget-side .wd-empty-mini-cart .btn.wc-backward {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #5b4ecd;
	color: #fff;
	font: 500 16px/normal var(--ah-font);
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}

.cart-widget-side .wd-empty-mini-cart .btn.wc-backward::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../icons/checkout/shopping-bag.svg") center / 24px no-repeat;
}

.cart-widget-side .wd-empty-mini-cart .btn.wc-backward:hover,
.cart-widget-side .wd-empty-mini-cart .btn.wc-backward:focus {
	background: #5b4ecd; /* the frame draws no hover */
	color: #fff;
}

/* the theme's empty footer under it would add 12 px */
.cart-widget-side .shopping-cart-widget-footer.wd-cart-empty {
	display: none;
}

.cart-widget-side .woocommerce-mini-cart__buttons .btn-cart {
	display: none;
}

.cart-widget-side .woocommerce-mini-cart__buttons .checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px !important;
	background: var(--ah-purple) !important;
	font: 500 16px/normal var(--ah-font);
	color: #fff !important;
	text-transform: none;
	box-shadow: none;
}

.cart-widget-side .woocommerce-mini-cart__buttons .checkout::before {
	content: "";
	width: 24px;
	height: 24px;
	background: #fff;
	-webkit-mask: url("../icons/basket/clipboard.svg") center / 24px no-repeat;
	mask: url("../icons/basket/clipboard.svg") center / 24px no-repeat;
}

.cart-widget-side .woocommerce-mini-cart__buttons .checkout:hover {
	background: #4a3eb8 !important;
}

/* empty panel text (WoodMart's own) */
.cart-widget-side .woocommerce-mini-cart__empty-message {
	font: 400 14px/24px var(--ah-font);
	color: var(--ah-text2);
}

/* The product cards' price row («Product Shop Action bar» 315:5387, row 393:11049: the amount on a 24 px line with 4 px
   above and below, a 32 px row). Shared by every card that prints Cards::price(): the shop and homepage cards (#85) and
   the product page's related cards (#121); price.css sets the amount's size. */
.ah-pcard__price .araz-price__amount {
	padding: 4px 0; /* 393:11049 */
}

/* The bookmark (WoodMart's real wishlist button) sits on the picture, top end corner (archive and homepage cards); it shows on hover, focus, or once saved. */
.ah-pcard .ah-pcard__bm {
	position: absolute;
	z-index: 4;
	top: 16px;
	inset-inline-end: 16px;
	opacity: 0;
	pointer-events: none; /* hidden = not tappable (a transparent button over the picture would swallow taps) */
	transition: opacity .15s ease;
}

.ah-pcard:hover .ah-pcard__bm,
.ah-pcard:focus-within .ah-pcard__bm,
.ah-pcard .ah-pcard__bm:has(a.added),
.ah-pcard .ah-pcard__bm:has(a.wd-in-wishlist) {
	opacity: 1;
}

.ah-pcard .ah-pcard__bm .wd-wishlist-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 4px; /* Figma 359:10584 / 359:10595: 4 around the 24 px glyph; the 1 px stroke is INSIDE the 32 (inset shadow, not a border) */
	border: 0;
	border-radius: 12px; /* Figma 240:8669/240:8672: 4px padding around a 24px icon, radius 12 (was 8) */
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--ah-lav-line);
	transition: background-color .15s ease;
}

.ah-pcard .ah-pcard__bm .wd-wishlist-btn .wd-action-text {
	display: none;
}

.ah-pcard .ah-pcard__bm .wd-wishlist-btn .wd-action-icon {
	display: block;
	position: relative;
	width: 24px;
	height: 24px;
	background: var(--ah-purple);
	-webkit-mask: url("../icons/bookmark-line.svg") center / 24px no-repeat;
	mask: url("../icons/bookmark-line.svg") center / 24px no-repeat;
}

.ah-pcard .ah-pcard__bm .wd-wishlist-btn .wd-action-icon > * {
	display: none;
}

/* The theme draws its own icon-font bookmark in ::before of this same element, and its loading spinner in ::after: the mask above
   clips both to the card's shape, so a dark outline showed on top of the Figma glyph (359:10584 / 359:10595 draw one glyph) and a
   dark smudge while a request ran (checked with the class «loading» forced). The frame has no loading state, so there is none. */
.ah-pcard .ah-pcard__bm .wd-wishlist-btn .wd-action-icon::before,
.ah-pcard .ah-pcard__bm .wd-wishlist-btn .wd-action-icon::after {
	content: none !important;
	display: none !important;
}

.ah-pcard .ah-pcard__bm .wd-wishlist-btn a.added .wd-action-icon,
.ah-pcard .ah-pcard__bm .wd-wishlist-btn a.wd-in-wishlist .wd-action-icon {
	-webkit-mask-image: url("../icons/bookmark-fill.svg");
	mask-image: url("../icons/bookmark-fill.svg");
}

/* saved state (Figma 194:2217 «کارت دسته‌بندی», bookmarked variant): the pill itself turns lavender */
.ah-pcard .ah-pcard__bm .wd-wishlist-btn a.added,
.ah-pcard .ah-pcard__bm .wd-wishlist-btn a.wd-in-wishlist {
	background: #edebff;
}

.ah-pcard:hover .ah-pcard__bm,
.ah-pcard:focus-within .ah-pcard__bm,
.ah-pcard .ah-pcard__bm:has(a.added),
.ah-pcard .ah-pcard__bm:has(a.wd-in-wishlist) {
	pointer-events: auto;
}

/* The cards' bag button (Cards::button(): WooCommerce's own add-to-cart link). Here, not in home.css, because it is
   also on the product page, in the «محصولات مرتبط» cards of a viewer who is shown prices (#121). */
.ah-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	padding: 4px 16px !important;
	/* !important like its neighbours: the button carries WooCommerce's native add_to_cart_button classes, so the theme's own button rule (radius 0) applies to it */
	border-radius: 12px !important;
	border: 0;
	background: var(--ah-purple) !important;
	color: #fff;
	line-height: 0;
	box-shadow: none;
	text-transform: none;
	transition: background-color .2s ease;
}

a.ah-btn:hover {
	background: #4a3eb8 !important;
	color: #fff;
}

.ah-btn.is-disabled {
	background: #eee !important; /* Figma 98:1037 */
	opacity: 1;
}

.ah-btn::before,
.ah-btn::after {
	display: none !important;
}

.ah-btn.loading {
	opacity: .6;
}

.ah-btn.added::after {
	content: none;
}

/* touch screens have no hover: show the bookmark always */
@media (hover: none) {
	.ah-pcard .ah-pcard__bm {
		opacity: 1;
		pointer-events: auto;
	}
}

/* the categories button is 315 px wide in the 1920 frame (251 px in the 1280 frame, where the container is the screen) */
@media (min-width: 1408px) {
	.whb-header .wd-header-cats .menu-opener {
		width: 315px;
	}
}

/* small laptops and landscape tablets: below 1280 px the frame's 24 px gap and 16 px padding leave the search little room, so the margins shrink (not in the design) */
@media (min-width: 1025px) and (max-width: 1279px) {
	.whb-header .whb-header-bottom .whb-column11 {
		gap: 12px;
	}

	/* keeps the design's 16 px padding on the lab side (only the margin shrinks) */
	.whb-header .whb-header-bottom .whb-column12 {
		margin-inline: 12px 0;
	}

	/* the design's search is 598 px wide at 1280; below that the pill may shrink to its 256 px minimum, not cover the other items */
	.whb-header .whb-header-bottom .whb-column12 .wd-search-form,
	.whb-header .whb-header-bottom .searchform {
		min-width: 0;
	}
}

/* ----------------------------------------------------------------------------------------------------------------
 * The header's «ورود» slide-in panel (Figma «login page», 240:7446): the same 320 px white sheet as the request-list
 * panel; header with the lavender close pill at the end and «ورود به حساب کاربری» with the user glyph at the start;
 * the fields, remember-me, lost-password link and the full-width purple button; the teal «sign-up» box with the
 * designer's mascot. WoodMart's markup and its ajax login are untouched; the two texts are drawn with ::after.
 * ---------------------------------------------------------------------------------------------------------------- */
.login-form-side.wd-side-hidden {
	--wd-side-hidden-w: 320px;
	width: min(320px, 100vw);
	padding: 16px 12px;
	background: #fff;
	font-family: var(--ah-font);
}

.login-form-side .wd-heading {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
	padding: 16px 16px 0;
	border: 0;
	background: none;
}

.login-form-side .wd-heading .title {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 4px;
	font-size: 0; /* the theme's «ورود»; the design's longer title is drawn below */
	line-height: 0;
}

.login-form-side .wd-heading .title::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: var(--ah-purple);
	-webkit-mask: url("../icons/user.svg") center / 24px no-repeat;
	mask: url("../icons/user.svg") center / 24px no-repeat;
}

.login-form-side .wd-heading .title::after {
	content: "ورود به حساب کاربری";
	font: 700 16px/32px var(--ah-font);
	color: var(--ah-purple);
}

.login-form-side .wd-heading .close-side-widget {
	margin: 0;
}

.login-form-side .wd-heading .close-side-widget a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 32px !important; /* WoodMart's .wd-heading .wd-action-btn.wd-style-text > a { height: 25px } is more specific */
	padding: 4px 12px;
	border-radius: 16px;
	background: #edebff;
}

.login-form-side .wd-heading .close-side-widget .wd-action-icon {
	display: block;
	width: 24px;
	height: 24px;
	background: var(--ah-purple);
	-webkit-mask: url("../icons/basket/close.svg") center / 24px no-repeat;
	mask: url("../icons/basket/close.svg") center / 24px no-repeat;
}

.login-form-side .wd-heading .close-side-widget .wd-action-icon::before,
.login-form-side .wd-heading .close-side-widget .wd-action-icon::after {
	content: none;
}

/* the form: 16 px inside, 8 px between the rows (each field row is its own 8 px padded block, as in Figma) */
.login-form-side form.woocommerce-form-login {
	display: flex !important; /* the theme toggles an inline display */
	flex-direction: column;
	gap: 8px;
	margin: 24px 0 0; /* Figma 240:9229: 24 px under the header, 16 px of padding inside */
	padding: 16px 16px 0;
}

.login-form-side .woocommerce-FormRow {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: start is the right edge, where Figma puts the label */
	gap: 4px;
	margin: 0;
	padding: 8px 0;
}

.login-form-side .woocommerce-FormRow label {
	display: flex;
	margin: 0;
	gap: 4px;
	font: 400 12px/16px var(--ah-font);
	color: var(--ah-purple);
}

.login-form-side .woocommerce-FormRow label .required {
	color: #f11515;
}

.login-form-side .woocommerce-FormRow label .screen-reader-text {
	display: none;
}

.login-form-side .woocommerce-FormRow .input-text {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 4px 12px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	font: 400 16px/24px var(--ah-font);
	color: var(--ah-text);
	box-shadow: none;
}

/* the password row's wrapper and eye: the site-wide password rules at the end of this file (#81) */

/* the footer paragraph (lost-password link + remember-me) is lifted into the form so the design's order can be set */
.login-form-side .login-form-footer {
	display: contents;
}

.login-form-side .woocommerce-form-login__rememberme {
	order: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	font: 400 12px/24px var(--ah-font);
	color: var(--ah-text);
}

.login-form-side .woocommerce-form-login__rememberme input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../icons/archive/check-off.svg") center / 20px no-repeat;
	box-shadow: none;
}

.login-form-side .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
	background-image: url("../icons/archive/check-on.svg");
}

.login-form-side .woocommerce-form-login__rememberme input[type="checkbox"]::before,
.login-form-side .woocommerce-form-login__rememberme input[type="checkbox"]::after {
	content: none;
}

.login-form-side .woocommerce-LostPassword {
	order: 4;
	align-self: flex-start;
	font: 400 12px/24px var(--ah-font);
	color: #0372f4;
	text-decoration: underline;
}

.login-form-side .form-row-btn {
	order: 5;
	margin: 0;
	padding: 0;
}

.login-form-side .form-row-btn button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 12px 16px !important;
	border: 0;
	border-radius: 12px !important;
	background: var(--ah-purple) !important;
	color: #fff;
	font: 500 16px/normal var(--ah-font);
	box-shadow: none;
}

.login-form-side .form-row-btn button::after {
	content: "";
	order: -1; /* Figma: icon at the right of the label */
	width: 24px;
	height: 24px;
	background: url("../icons/account/sign-in.svg") center / contain no-repeat;
}

/* «هنوز حساب کاربری ندارید؟» box */
.login-form-side .create-account-question {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 20px 16px 0;
	padding: 32px 20px;
	box-sizing: border-box;
	background: #e4fdff;
	border: 2px solid #5cc6d0;
	border-radius: 8px;
	text-align: center;
}

.login-form-side .create-account-question::before {
	content: "";
	width: 122px;
	height: 66.5px;
	background: url("../icons/account/signup-mascot.svg") center / contain no-repeat;
}

.login-form-side .create-account-question p {
	margin: 0;
	font: 400 12px/16px var(--ah-font);
	color: var(--ah-text);
}

.login-form-side .create-account-question .create-account-button {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 0; /* the theme's «ایجاد حساب کاربری»; the design's wording is drawn below */
	line-height: 0;
	text-decoration: none;
}

.login-form-side .create-account-question .create-account-button::after {
	content: "پس همین الان ثبت‌نام کنید!";
	font: 700 14px/24px var(--ah-font);
	color: #43a8b2;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ toast (Figma «Toasts», component set 303:3565)
   One line: icon, text, optional pill. Variants warning 303:3564, success 303:3563, info 303:3562. Strokes are INSIDE the
   56 px bar in the frame (inset shadow). The content hugs the start (right) edge: the pill follows the text, it does not
   float to the far end. Markup: araz-home/src/Toast.php. */
.araz-toast {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 16px;
	padding: 16px;
	border-radius: 16px;
	background: var(--araz-toast-bg);
	box-shadow: inset 0 0 0 1px var(--araz-toast-border);
	outline: 1px solid transparent; /* keeps a border in forced-colors mode, where the inset shadow disappears */
	color: var(--ah-text2);
	font: 400 16px/24px var(--ah-font);
}

.araz-toast--warning {
	--araz-toast-bg: #ffe1b3;
	--araz-toast-border: #ff861b;
	--araz-toast-pill: #ff861b;
	--araz-toast-pill-weight: 900; /* the designer, #28: every orange button is Black, not Medium, for legibility */
	--araz-toast-icon: url("../icons/account/attention-alert.svg");
}

.araz-toast--success {
	--araz-toast-bg: #e1fbe2;
	--araz-toast-border: #4caf50;
	--araz-toast-icon: url("../icons/account/check-circle.svg");
}

.araz-toast--info {
	--araz-toast-bg: #edebff;
	--araz-toast-border: #5b4ecd;
	--araz-toast-pill: #5b4ecd;
	--araz-toast-pill-weight: 500;
	--araz-toast-icon: url("../icons/account/info.svg");
}

.araz-toast__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: var(--araz-toast-icon) center / contain no-repeat;
}

.araz-toast__text {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Figma: padding left 16, right 12, top/bottom 4; Vazirmatn Medium 12/16 white; radius 12 */
.araz-toast__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 4px 12px 4px 16px;
	border-radius: 12px;
	background: var(--araz-toast-pill);
	color: #fff;
	font: var(--araz-toast-pill-weight, 500) 12px/16px var(--ah-font);
	text-decoration: none;
	white-space: nowrap;
}

/* The same pill as a form's button (#220): the theme's button look taken off. */
.araz-toast__form {
	display: inline-flex;
	flex: 0 0 auto;
	margin: 0;
}

button.araz-toast__action {
	min-height: 0;
	height: auto;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.araz-toast__action:hover,
.araz-toast__action:focus {
	color: #fff;
	opacity: .9;
}

/* ============================================================ password fields, every form (#81)
   Figma «Text Field» 310:3954 as the login card draws it (247:11728 › 332:13521) and the account page (291:8576 › 310:4031):
   the box is 42 high, 1 px #e0e0e0, radius 4, white, padding 4 12; the eye (24 x 24, 310:3955) sits inside the box at
   x 13, y 9 from the box's outer edge (the frame's physical LEFT, first child of the LTR export); the text starts at x 37
   (310:3956, no gap after the eye). Icons: 391:9914 «Eye Blind View» while the characters are masked, 391:9925 «Eye View»
   while they are shown; both are exported with their own rgba(0,0,0,.57) fill. The frame has no filled or focus variant
   (303:3608 lists Normal / DropDown / with Tip / required / need to verify / verified / Description), so a filled field
   keeps the Normal box and the browser's autofill tint is turned off.
   Each form's own rules draw the box on the INPUT (account.css, account-area.css, the header panel above, the theme's own
   on the reset forms); WooCommerce's .password-input wrapper (its script puts it around every password input and appends
   the button) only holds the eye. */
.araz-home-skin .password-input {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.araz-home-skin .password-input .input-text {
	padding-left: 36px !important; /* 13 to the eye + 24, less the 1 px border: the text starts at 37 (310:3956); the theme's padding-inline-end is !important too */
	vertical-align: top; /* the wrapper hugs the box, so the eye's top 9 is the box's top 9 */
}

/* a filled field is the Normal box (no Figma variant): the browser's autofill tint off, the frame's text colour */
.araz-home-skin .password-input .input-text:-webkit-autofill,
.araz-home-skin .password-input .input-text:-webkit-autofill:hover,
.araz-home-skin .password-input .input-text:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: rgba(0, 0, 0, .87) !important;
	border-color: #e0e0e0;
}

/* the eye (310:3955): WoodMart draws its icon-font glyph on ::before and sets `background: none !important` on the button;
   the exported SVG goes on the button itself with a stronger !important, and the glyph is turned off */
.araz-home-skin .show-password-input {
	position: absolute;
	inset-inline-end: auto; /* first: in RTL inline-end IS left, so declared after `left` it reset the 13 px and the eye fell to the right edge */
	top: 9px;
	left: 13px;
	right: auto;
	bottom: auto;
	display: block;
	width: 24px;
	height: 24px;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: url("../icons/account/eye-blind.svg") center / 24px no-repeat !important; /* 391:9914 */
	box-shadow: none !important;
	font-size: 0;
	line-height: 0;
	color: transparent;
	opacity: 1;
	cursor: pointer;
	transition: none;
}

.araz-home-skin .show-password-input::before,
.araz-home-skin .show-password-input::after {
	content: none !important;
}

.araz-home-skin .show-password-input.display-password {
	background-image: url("../icons/account/eye.svg") !important; /* 391:9925: the characters are shown */
}

/* WooCommerce's script wraps every password input and appends an eye to every .password-input, including one a template
   already printed (araz-customers' form-edit-account.php): only the eye beside the input stays, the others are not drawn */
.araz-home-skin .show-password-input + .show-password-input,
.araz-home-skin .password-input .password-input ~ .show-password-input {
	display: none;
}