/*
 * Utility pages from the designer's Figma: 404 (231:2127), the empty product list (236:7316) and the search-results title (236:7077).
 * Loaded on the 404 page and on shop archives. The maintenance page (Maintenance.php) loads it too.
 */

/* ------------------------------------------------------------------ the shared "empty" block (404 and maintenance) */
/* the gray field is full width (the theme's page container is narrower than the screen) */
body.error404 .wd-page-content,
body.error404 .main-page-wrapper {
	background: var(--ah-gray, #f5f5f5);
}

.ah-page--404 {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 685px; /* the 1080 px frame less the 158 px header and the 237 px footer */
	margin-block: 0 !important; /* WoodMart's .site-content margin-bottom (40 px) left a white band above the footer */
	padding: 0 24px; /* the picture and text are centred in the field (the theme's content area added 24 / 40 px of its own) */
	background: var(--ah-gray, #f5f5f5);
}

.ah-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 520px;
	max-width: 100%;
	text-align: center;
}

.ah-empty__art {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.ah-empty__title {
	margin: 0 0 12px;
	font: 700 36px/54px var(--ah-font, 'Vazirmatn', sans-serif);
	text-transform: none;
	color: var(--ah-text, rgba(0, 0, 0, .87));
}

.ah-empty__text {
	margin: 0;
	font: 400 18px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text2, rgba(0, 0, 0, .57));
}

/* title and text are direct children of the 24 px column: 24 - 12 = the design's 12 px between them (Figma 234:5061) */
.ah-page--404 .ah-empty__title {
	margin-bottom: -12px;
}

@media (max-width: 767px) {
	.ah-br {
		display: none;
	}

	.ah-page--404 {
		min-height: 520px;
		padding: 32px 16px;
	}

	.ah-empty__title {
		font-size: 26px;
		line-height: 40px;
	}

	.ah-empty__text {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ empty wishlist page (Figma 246:9351) */
/* full-bleed gray field, and the block centred between header and footer, the same two fixes as the 404 page
   (body.error404 above / .ah-page--404) — this page has no custom template, so the hook is body_class(), not a
   wrapper div this plugin controls. */
body.araz-wishlist-page .wd-page-content:has(.wd-empty-wishlist),
body.araz-wishlist-page .main-page-wrapper:has(.wd-empty-wishlist) {
	background: var(--ah-gray, #f5f5f5);
}

/* only the EMPTY state is centred in a field: .wd-wishlist-content also wraps a populated list (header, bulk actions, grid) */
.araz-wishlist-page .wd-wishlist-content:has(> .wd-empty-wishlist) {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 685px;
	margin-block: 0 !important;
	padding: 0 24px;
	background: var(--ah-gray, #f5f5f5);
}

.wd-empty-block.wd-empty-wishlist {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 435px; /* 246:9398: the block, and with it the text 246:9438, is 435 wide (guest and customer: one frame, the customer's has no button) */
	max-width: 100%;
	margin: 0;
	text-align: center;
}

/* the theme's own empty-state heart glyph: not in the design (the mascot picture replaces it) */
/* the mascot is the block's own ::before (not an injected <img>): the theme re-renders this block through admin-ajax when the
   last item is removed, and a CSS picture survives that re-render (435 x 300, Figma 246:9490) */
.wd-empty-block.wd-empty-wishlist::before {
	content: "" !important;
	display: block !important;
	width: 435px;
	max-width: 100%;
	height: 300px;
	margin: 0;
	background: url("../img/pages/bookmark-empty.svg") center / contain no-repeat;
	font-size: 0;
}

.wd-empty-block.wd-empty-wishlist .wd-empty-block-title::before {
	display: none !important;
}

.wd-empty-block.wd-empty-wishlist .wd-empty-block-title {
	margin: 0 0 -12px; /* title and text are direct children of the 24px column: 24 - 12 = the design's 12px gap (Figma 246:9436) */
	font: 700 36px/54px var(--ah-font, 'Vazirmatn', sans-serif);
	text-transform: none;
	color: var(--ah-text, rgba(0, 0, 0, .87));
}

.wd-empty-block.wd-empty-wishlist .wd-empty-block-text {
	margin: 0;
	font: 400 18px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text2, rgba(0, 0, 0, .57));
}

/* a customer's list has no button in the frame (438px block: art 300 + 24 + title/text 114) — hidden, not just repainted */
.wd-empty-block.wd-empty-wishlist .wd-empty-block-btn {
	display: none;
}

/* a guest's list (#53, Figma 246:9351): the block is 511 high, the «ورود» button (326:9991) 24 px under the text. The button
   is WoodMart's own empty-state button re-pointed at the login page (Bookmarks::login_button, text through gettext), so the
   admin-ajax re-render after the last removal keeps it. 326:9991: full width of the 435 block, padding 12 16, gap 4, radius 12,
   #5b4ecd; 326:9992: Vazirmatn Medium 16/normal white; 326:9993: the 24 px «Sign in» icon at the RIGHT of the word
   (physical, as the frame draws it: a trailing ::after lands at the left in RTL, so it takes order -1). */
body:not(.logged-in) .wd-empty-block.wd-empty-wishlist .wd-empty-block-btn {
	display: flex; /* 326:9991 */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	width: 435px;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #5b4ecd;
	box-shadow: none;
	color: #fff; /* 326:9992 */
	font: 500 16px/normal var(--ah-font, 'Vazirmatn', sans-serif);
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

body:not(.logged-in) .wd-empty-block.wd-empty-wishlist .wd-empty-block-btn:hover,
body:not(.logged-in) .wd-empty-block.wd-empty-wishlist .wd-empty-block-btn:focus {
	background: #5b4ecd; /* the frame has no hover state (question on the issue); the theme's darker hover is turned off */
	color: #fff;
}

body:not(.logged-in) .wd-empty-block.wd-empty-wishlist .wd-empty-block-btn::before {
	content: none; /* the theme's button glyph */
}

body:not(.logged-in) .wd-empty-block.wd-empty-wishlist .wd-empty-block-btn::after {
	content: "";
	order: -1;
	flex: 0 0 24px;
	width: 24px; /* 326:9993 */
	height: 24px;
	background: url("../icons/account/sign-in.svg") center / 24px no-repeat;
}

@media (max-width: 767px) {
	.araz-wishlist-page .wd-wishlist-content:has(> .wd-empty-wishlist) {
		min-height: 520px;
		padding: 0 16px;
	}

	.wd-empty-block.wd-empty-wishlist .wd-empty-block-title {
		font-size: 26px;
		line-height: 40px;
	}

	.wd-empty-block.wd-empty-wishlist .wd-empty-block-text {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ checkout for a guest (#56, Figma 350:8536 › 350:9299)
   CheckoutLogin::dress() stands the block where WooCommerce printed its one sentence. The frame is a 1080 page: header 158,
   footer 205, so the grey field between them is 717 high with the 499 block centred (267 from the top of the page). */
/* body.woocommerce-checkout: WoodMart's inline page background (`:is(.page, …) :is(.wd-page-content, .whb-header)`, #f6f6f6,
   same specificity, printed later) won otherwise and the block's own #f5f5f5 showed as a faint 1280 box */
body.woocommerce-checkout .main-page-wrapper:has(.ah-needlogin) {
	background: var(--ah-gray, #f5f5f5);
}

/* the content column's own top and bottom bands (WoodMart's, and the cart/checkout skin's 16 / 64): the frame's grey field is
   the 717 px between header and footer, nothing else (the classes repeat so this beats the skin's !important rule) */
body.araz-home-skin.woocommerce-checkout main.wd-content-layout.container:has(.ah-needlogin) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* the theme's checkout-steps band (its page title): not in the frame, which goes header → block → footer */
.main-page-wrapper:has(.ah-needlogin) .page-title {
	display: none;
}

.ah-needlogin {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 717px;
	margin: 0;
	padding: 0 24px;
	background: var(--ah-gray, #f5f5f5);
}

/* 350:9299: column, gap 24, centred, 435 wide */
.ah-needlogin__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 435px;
	max-width: 100%;
	margin: 0;
	text-align: center;
}

/* 351:9460: 435 x 300 */
.ah-needlogin__art {
	display: block;
	width: 435px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 435 / 300;
	margin: 0;
}

/* 350:9337: column, gap 12 */
.ah-needlogin__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* 350:9338: Bold 36/54, rgba(0,0,0,.87) */
.ah-needlogin__title {
	width: 100%;
	margin: 0;
	padding: 0;
	font: 700 36px/54px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text, rgba(0, 0, 0, .87));
	text-transform: none;
}

/* 350:9339: Regular 18/24, rgba(0,0,0,.57) */
.ah-needlogin__text {
	width: 100%;
	margin: 0;
	padding: 0;
	font: 400 18px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text2, rgba(0, 0, 0, .57));
}

/* 350:9451: full width, padding 12 16, gap 4, radius 12, #5b4ecd; 350:9452 Vazirmatn Medium 16/normal white;
   350:9453 the 24 px «Sign in» icon at the RIGHT of the word (physical: a trailing ::after lands at the left in RTL, so order -1) */
.ah-needlogin__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #5b4ecd;
	box-shadow: none;
	color: #fff;
	font: 500 16px/normal var(--ah-font, 'Vazirmatn', sans-serif);
	text-decoration: none;
	white-space: nowrap;
}

.ah-needlogin__btn:hover,
.ah-needlogin__btn:focus {
	background: #5b4ecd; /* the frame has no hover state (question on the issue) */
	color: #fff;
}

.ah-needlogin__btn::after {
	content: "";
	order: -1;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../icons/account/sign-in.svg") center / 24px no-repeat;
}

/* INTERIM: no phone frame for 350:8536; the same reductions as the empty wishlist page above */
@media (max-width: 767px) {
	.ah-needlogin {
		min-height: 520px;
		padding: 0 16px;
	}

	.ah-needlogin__title {
		font-size: 26px;
		line-height: 40px;
	}

	.ah-needlogin__text {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ the product list's empty state (236:7316) */
.ah-noresults {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
	max-width: 736px;
	margin: 0 auto;
	padding: 72px 0;
	box-sizing: border-box;
}

.ah-noresults__art {
	flex: 0 0 auto;
	display: block;
	width: 321px;
	max-width: 40%;
	height: auto;
}

.ah-noresults__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: stretch;
	text-align: right;
}

.ah-noresults__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ah-noresults__title {
	margin: 0;
	font: 700 36px/54px var(--ah-font, 'Vazirmatn', sans-serif);
	text-transform: none;
	color: var(--ah-text, rgba(0, 0, 0, .87));
}

.ah-noresults__text {
	margin: 0;
	font: 400 18px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text2, rgba(0, 0, 0, .57));
}

/* the search pill: 40 px, 1px #b5a3ff, the round purple button at the LEFT end (4 px in), 16 px of padding at the start */
.ah-searchpill {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 480px;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 4px 16px 4px 4px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #b5a3ff;
	border-radius: 999px;
	overflow: hidden;
}

.ah-searchpill input[type="search"] {
	flex: 1 1 0;
	min-width: 0;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: 400 14px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: var(--ah-text, rgba(0, 0, 0, .87));
	text-align: right;
	text-overflow: ellipsis;
}

.ah-searchpill input[type="search"]::placeholder {
	color: #707a77;
	opacity: 1;
}

.ah-searchpill button {
	flex: 0 0 32px;
	order: 2;
	width: 32px;
	height: 32px;
	min-height: 0; /* WoodMart's button min-height 42 stretched the circle into a clipped capsule (Figma 236:7436: 32 x 32) */
	max-height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: var(--ah-purple, #5b4ecd) url("../icons/search.svg") center / 16px no-repeat;
	cursor: pointer;
}

/* search-results title: the purple search badge beside it (236:7077, variant «جستجو»): 32 px circle, 16 px glyph, 8 px gap */
.ah-search-ico {
	display: inline-block;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 24px;
	background: var(--ah-purple, #5b4ecd) url("../icons/search.svg") center / 16px no-repeat;
}

.araz-archive .wd-woo-page-title > .elementor-widget-container:has(.ah-search-ico) {
	display: flex;
	align-items: flex-start; /* Figma 236:7255, same as the brand logo */
	gap: 8px;
}

@media (max-width: 767px) {
	.ah-noresults {
		flex-direction: column;
		padding: 32px 0;
	}

	.ah-noresults__art {
		max-width: 60%;
	}

	.ah-noresults__title {
		font-size: 26px;
		line-height: 40px;
	}

	.ah-noresults__text {
		font-size: 16px;
	}

	.ah-noresults__body {
		align-items: stretch;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ populated wishlist (Figma 271:3941) */
/* The account chrome (sidebar, column, 1280 container) comes from account-area.css: body.araz-account-area (Bookmarks::body_class).
   The list column is 1024 wide; the list is the shop's card (archive-card.php, the same markup as the archive), in four columns
   of 240 with 21.333 between them (Figma 271:4113: 1024 = 4 x 240 + 3 x 21.333). The theme's grid reads --wd-col-* and --wd-gap-*. */
.araz-wishlist-page .wd-wishlist-content .wd-products {
	--wd-gap-lg: 21.333px !important; /* WoodMart's inline 20px wins over a plain declaration (see archive.css) */
	--wd-gap-md: 12px;
	--wd-gap-sm: 8px;
}

/* Desktop: four columns and Figma's row gap of 16 (271:4111 is a column with gap 16; the columns inside a row are 21.333).
   WoodMart's --wd-col-lg does not reach this grid on the wishlist (its own [class*=wd-grid] rule resets it), so the track
   list is set here. Tablet and mobile keep the theme's own gaps and columns: measured on the wishlist with four cards,
   2 columns at 768 wide and 2 at 375 wide (no frame exists for either). */
@media (min-width: 1025px) {
	.araz-wishlist-page .wd-wishlist-content .wd-products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		row-gap: 16px !important;
	}
}

/* A shared list (?share=) has no account sidebar: the populated page's 1024 column, centred. No frame exists for this page
   (the design draws the account page only), so it keeps the column's numbers and nothing else is invented. */
body.araz-wishlist-shared main.wd-content-layout {
	padding-bottom: 64px;
}

body.araz-wishlist-shared .wd-wishlist-content {
	box-sizing: border-box;
	width: min(1024px, 100% - 32px);
	margin: 24px auto 0;
}

/* The theme's page-title bar and its 40 px band are not in the frame, for guests as for customers (the card below is the title).
   Scoped to the page class, not to the account class, so the guest and the customer render the same here. */
body.araz-wishlist-page .wd-page-title {
	display: none;
}

body.araz-wishlist-page main.wd-content-layout {
	padding-top: 0 !important;
}

.araz-wishlist-page .wd-product.ah-arch {
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
}

.araz-wishlist-page .ah-pcard--arch {
	height: 100%;
	background: #fff;
}

/* Page title card (Figma 271:4112): WoodMart's heading takes the account title card's look (account-area.css .araz-acc-title):
   72 high, white, 1px #e0e0e0 inside, radius 16, padding 16, the bookmark in a purple circle, then the title in ExtraBold 24. */
body.araz-wishlist-page .wd-wishlist-head {
	display: flex;
	align-items: center;
	/* Figma 271:4112 (276:4735 / 276:4774): the title block (bookmark pill, then the title) is pinned to the start (the right);
	   the share row of the frame sits at the other end (margin-inline-start:auto on .ah-share). */
	justify-content: flex-start;
	gap: 8px;
	box-sizing: border-box;
	min-height: 72px;
	margin: 0 0 16px;
	padding: 16px;
	border: 0;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	border-radius: 16px;
	background: #fff;
	position: relative;
}

/* 276:4779: the purple pill, 24 + 8 padding = 40, with the Figma bookmark (276:4786, a white 24 px export) in it. */
body.araz-wishlist-page .wd-wishlist-head::before {
	content: "";
	flex: 0 0 40px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 24px;
	background: #5b4ecd url("../icons/bookmark-title.svg") center / 24px 24px no-repeat;
}

body.araz-wishlist-page .wd-wishlist-head .title {
	margin: 0;
	padding: 0;
	font: 800 24px/normal var(--ah-font, 'Vazirmatn', sans-serif);
	color: #5b4ecd;
}

/* Share row of the title card (Figma 276:4735 «List View» gap 16: the icon group, then the label with 8 left padding;
   276:5256 gap 3.404, 24 x 24 icons in the frame's physical order). The row is built left to right (dir=ltr) as exported. */
body.araz-wishlist-page .wd-wishlist-head .ah-share {
	display: flex;
	align-items: center;
	justify-content: center; /* 276:4735 */
	gap: 16px; /* 276:4735 (one child: the icon group) */
	margin-right: auto; /* the row is dir=ltr (physical order as exported), so a logical margin would point the other way */
	flex: 0 0 auto;
}

.araz-wishlist-page .ah-share__icons {
	display: flex;
	align-items: flex-start;
	gap: 3.404px;
}

.araz-wishlist-page .ah-share__i {
	display: block;
	flex: 0 0 24px;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent center / 24px 24px no-repeat;
	cursor: pointer;
}

.araz-wishlist-page .ah-share__i--tiktok { background-image: url("../icons/share/tiktok.svg"); }
.araz-wishlist-page .ah-share__i--twitter { background-image: url("../icons/share/twitter.svg"); }
.araz-wishlist-page .ah-share__i--telegram { background-image: url("../icons/share/telegram.svg"); }
.araz-wishlist-page .ah-share__i--instagram { background-image: url("../icons/share/instagram.svg"); }
.araz-wishlist-page .ah-share__i--facebook { background-image: url("../icons/share/facebook.svg"); }
.araz-wishlist-page .ah-share__i--youtube { background-image: url("../icons/share/youtube.svg"); }
.araz-wishlist-page .ah-share__i--linkedin { background-image: url("../icons/share/linkedin.svg"); }

.araz-wishlist-page .ah-share__label {
	padding-left: 8px; /* 276:5264, physical left */
	font: 400 14px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: rgba(0, 0, 0, 0.87);
	white-space: nowrap;
}

.araz-wishlist-page .ah-share__i:focus-visible {
	outline: 2px solid #5b4ecd;
	outline-offset: 2px;
}

/* No frame exists for tablet or phone: the title and the share row would not fit one line, so the row wraps under the title. */
@media (max-width: 767px) {
	body.araz-wishlist-page .wd-wishlist-head {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	body.araz-wishlist-page .wd-wishlist-head .ah-share {
		margin-right: 0;
		flex: 1 1 100%;
		flex-wrap: wrap; /* icons and label are 310 wide, the card's inside is 266 at 375 */
		justify-content: center;
		row-gap: 8px;
	}
}

/* WoodMart hides the loop's bookmark on the account's own list (its inline rule for «.wd-loop-builder-off .wd-product»): here the
   bookmark is the control that removes a product, so it shows on every card (saved: the lavender pill, as on the archive). */
/* WoodMart also sets pointer-events:none on the loop's .wd-wishlist-btn in the editable list (its inline rule for the
   «remove» control), so a real click could not reach the bookmark: found in the browser (only a script click worked). */
/* The theme also dims the list's bookmark to 30 % (its inline rule «.wd-wishlist-content:not(.wd-wishlist-preview) .wd-wishlist-btn»,
   opacity .3 !important): Figma 359:10584 draws it at full strength (#edebff pill, #5b4ecd icon). */
.araz-wishlist-page .wd-wishlist-content .ah-arch .ah-pcard__bm .wd-wishlist-btn {
	display: block !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.araz-wishlist-page .wd-wishlist-content .ah-arch .ah-pcard__bm .wd-wishlist-btn a {
	pointer-events: auto !important;
}

/* On a shared list the bookmark is how a visitor saves a product into their own list, so it is always visible (the shop's card
   shows it only on hover or once saved; Figma 359:10595 is the unsaved state). */
.araz-wishlist-shared .ah-pcard .ah-pcard__bm {
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------------------------------------------ the list's bottom bar (Figma 271:4366) */
/* Every number is from get_design_context for 271:4366 (figma-ctx-to-css.py); strokes sit inside the box (inset shadow).
   The count and the pager are at the left, «بالای صفحه» at the right (RTL: the first DOM child is the right-most). */
.araz-wishlist-page .ah-wbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding: 16px; /* 271:4366 p-[16px] */
	border-radius: 16px;
	background: #fff; /* 271:4366 bg-white */
	box-shadow: inset 0 0 0 1px #e0e0e0; /* 271:4366 border-[#e0e0e0], inside */
	margin: 16px 0 0; /* 271:4111 is a column with gap 16: the bar sits 16 under the last row */
}

/* 271:4367 «List View»: flex 1, items spread */
.araz-wishlist-page .ah-wbar__main {
	display: flex;
	flex: 1 0 0;
	align-items: flex-start; /* 271:4368 items-start */
	justify-content: flex-end; /* the group sits at the left end: RTL flex-end, the frame's space-between with one group */
	min-width: 1px;
}

/* 271:4368: gap 20 between the count and the pager */
.araz-wishlist-page .ah-wbar__main {
	gap: 20px;
}

/* 271:4369: 16px regular, subtitle colour rgba(0,0,0,0.57), line 24 */
.araz-wishlist-page .ah-wbar__count {
	font: 400 16px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: rgba(0, 0, 0, 0.57);
	white-space: nowrap;
}

/* 271:4370 «صفحه بندی»: gap 4, centred */
.araz-wishlist-page .ah-wbar ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 4px; /* 271:4370 gap-[4px] */
	margin: 0;
	padding: 0;
	list-style: none;
}

.araz-wishlist-page .ah-wbar ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
}

/* 271:4374 / 4376: min-width 24, padding 0 8, radius 8; figures 12px, line 24, colour rgba(0,0,0,0.87) */
.araz-wishlist-page .ah-wbar .page-numbers:not(ul) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px; /* 271:4374 px-[8px] */
	border-radius: 8px; /* 271:4374 rounded-[8px] */
	font: 400 12px/24px var(--ah-font, 'Vazirmatn', sans-serif);
	color: rgba(0, 0, 0, 0.87);
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

/* 271:4376 (a hovered / neighbouring figure): background #eff2f8 */
.araz-wishlist-page .ah-wbar a.page-numbers:not(.prev):not(.next):hover {
	background: #eff2f8;
}

/* 271:4381 (the current page): background #5b4ecd, figure white */
.araz-wishlist-page .ah-wbar .page-numbers.current {
	background: #5b4ecd;
	color: #fff;
}

/* 271:4378 / 4385 «More Dots»: 24 square icon */
.araz-wishlist-page .ah-wbar .page-numbers.dots {
	width: 24px;
	min-width: 24px;
	height: 24px;
	padding: 0;
	background: #b5a3ff;
	-webkit-mask: url("../icons/archive/dots.svg") center / 24px no-repeat;
	mask: url("../icons/archive/dots.svg") center / 24px no-repeat;
	font-size: 0;
}

/* 271:4371 / 4390 arrows: 24 square; the same glyph files as the archive's pager (the frame's own SVGs are the same arrows) */
.araz-wishlist-page .ah-wbar a.prev,
.araz-wishlist-page .ah-wbar a.next {
	width: 24px;
	min-width: 24px;
	height: 24px;
	padding: 0;
	background: #5b4ecd !important;
	-webkit-mask: url("../icons/archive/page-next.svg") center / 24px no-repeat;
	mask: url("../icons/archive/page-next.svg") center / 24px no-repeat;
}

.araz-wishlist-page .ah-wbar a.prev {
	-webkit-mask-image: url("../icons/archive/page-prev.svg");
	mask-image: url("../icons/archive/page-prev.svg");
}

/* 271:4393 «بالای صفحه»: background #eef9fa, radius 12, padding 0 4 0 12, gap 4; 12px medium, colour #5cc6d0; icon 24 */
.araz-wishlist-page .ah-wbar__top {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: row-reverse; /* text at the left, the arrow at the right end, as in the frame */
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	box-sizing: border-box;
	height: 24px; /* the frame's height is its 24 px arrow: the theme's button height (42) must not win */
	min-height: 0;
	padding: 0 4px 0 12px;
	border: 0;
	border-radius: 12px;
	background: #eef9fa;
	font: 500 12px/normal var(--ah-font, 'Vazirmatn', sans-serif);
	color: #5cc6d0;
	white-space: nowrap;
	cursor: pointer;
}

.araz-wishlist-page .ah-wbar__top::after {
	content: "";
	width: 24px;
	height: 24px;
	background: #5cc6d0;
	-webkit-mask: url("../icons/archive/up-arrow.svg") center / 24px no-repeat;
	mask: url("../icons/archive/up-arrow.svg") center / 24px no-repeat;
}

.araz-wishlist-page .ah-wbar__top:focus-visible {
	outline: 2px solid #5b4ecd;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.araz-wishlist-page .ah-wbar {
		flex-wrap: wrap;
		gap: 12px;
	}

	.araz-wishlist-page .ah-wbar__main {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}