/*
 * Shop archive skin (Figma «Other Page XL», 184:463). Loaded on shop, category, brand, attribute and product-search pages
 * (see src/Archive.php), after home.css (which holds the card rules this file builds on) and site.css (variables).
 * Everything is scoped to body.araz-archive. Step by step: 1 product card (grid + list), 2 toolbar, 3 filters,
 * 4 category carousel, 5 pagination, 6 request-list panel.
 */

/* ============================================================== 1. product card */

/* WoodMart's own product wrapper must not add a second background / padding around our card. */
.araz-archive .wd-products {
	--wd-gap-lg: 21px;
	--wd-gap-md: 12px;
	--wd-gap-sm: 8px;
}

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

.araz-archive .ah-pcard--arch {
	height: 100%;
}

/* Figma 184:807 (normal) is a white card with a #e0e0e0 border; 193:1981 (hover) turns the card #f5f5f5 with the purple
   border and shadow. home.css paints the homepage's card gray always, so the archive sets its own. */
.araz-archive .ah-pcard--arch {
	background: #fff;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.araz-archive .ah-pcard--arch:hover,
.araz-archive .ah-pcard--arch:focus-within {
	background: var(--ah-gray);
}

/* the theme gives every h3 a 20px bottom margin; the design has the category 3px under the title */
.araz-archive .ah-pcard--arch .ah-pcard__title {
	margin: 0;
}

/* The bookmark (WoodMart's real wishlist button) sits on the picture, top end corner; it shows on hover, focus, or once saved. */
.araz-archive .ah-pcard__bm {
	position: absolute;
	z-index: 4;
	top: 16px;
	inset-inline-end: 16px;
	opacity: 0;
	transition: opacity .15s ease;
}

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

.araz-archive .ah-pcard__bm .wd-wishlist-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--ah-lav-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
}

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

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

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

.araz-archive .ah-pcard__bm .wd-wishlist-btn a.added .wd-action-icon,
.araz-archive .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");
}

/* hover (Figma 193:1981): purple 1px border, shadow 0 4px 16px rgba(91,78,205,.48). Same values as the homepage card's. */
@media (hover: hover) and (min-width: 1025px) {
	.araz-archive .ah-pcard--arch:hover,
	.araz-archive .ah-pcard--arch:focus-within {
		border-color: var(--ah-purple);
		box-shadow: 0 4px 16px rgba(91, 78, 205, .48);
	}

	.araz-archive .ah-pcard--arch:hover .ah-pcard__pop,
	.araz-archive .ah-pcard--arch:focus-within .ah-pcard__pop {
		border-color: var(--ah-purple);
		box-shadow: 0 4px 16px rgba(91, 78, 205, .48);
	}

	/* List view: the details are already inside the card, so the grid card's "square the bottom to join the panel" rule
	   (home.css) must not apply: it cut the bottom border and corners. */
	.araz-archive .elements-list .ah-pcard--arch:hover,
	.araz-archive .elements-list .ah-pcard--arch:focus-within {
		border-bottom-color: var(--ah-purple);
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	.araz-archive .elements-list .ah-pcard--arch:hover .ah-pcard__pop,
	.araz-archive .elements-list .ah-pcard--arch:focus-within .ah-pcard__pop {
		border: 0;
		box-shadow: none;
	}
}

/* ------------------------------------------------------------- list view (default on archives)
 * Not in the Figma file (the design is the 4-column grid). Derived from it: the same card, picture frame, type, colours,
 * radius and hover border, laid out as one row: picture at the start, title / category / details / actions beside it. */
.araz-archive .elements-list .wd-product.ah-arch {
	width: 100%;
}

.araz-archive .elements-list .ah-pcard--arch {
	/* the picture is positioned out of the flow at the start side; the text stacks in one column beside it
	   (a picture spanning grid rows made the rows grow unevenly) */
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 16px 16px 16px 20px;
	padding-inline-start: 252px;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pic {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	width: 216px;
	height: 216px;
	margin: 0;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__body {
	display: contents;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__title {
	order: 1;
	font-size: 18px;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__cat {
	order: 2;
	margin-top: 4px;
}

/* the details panel is part of the row in list view (no hover needed) */
.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pop {
	order: 3;
	display: block;
	position: static;
	margin: 12px 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	clip-path: none;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pop ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 13px/28px var(--ah-font);
	color: var(--ah-text2);
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pop li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	border-bottom: 1px dashed var(--ah-border);
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__foot {
	order: 4;
	margin-top: auto;
	justify-content: flex-start;
	gap: 16px;
}

.araz-archive .elements-list .ah-pcard--arch .ah-pcard__bm {
	top: 20px;
	inset-inline-start: 20px;
	inset-inline-end: auto;
}

@media (max-width: 767px) {
	.araz-archive .elements-list .ah-pcard--arch {
		min-height: 136px;
		padding: 12px 12px 12px 12px;
		padding-inline-start: 136px;
	}

	.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pic {
		width: 112px;
		height: 112px;
	}

	.araz-archive .elements-list .ah-pcard--arch .ah-pcard__pop ul {
		grid-template-columns: 1fr;
	}
}

/* ============================================================== 2-5. page chrome, toolbar, filters, carousel, pagination
 * Values are the ones get_design_context returned for Figma «Other Page XL» (184:463): page #f5f5f5, cards white with a 1px
 * #e0e0e0 border, radius 16, padding 16; spacing 4/8/12/16/20/24 px; Vazirmatn 12/16/24 px. */
/* a long category name ends in «…» instead of being cut (tablet and phone) */
.araz-archive .wd-cats-element .wd-cat .wd-entities-title {
	/* Figma 184:1413: Vazirmatn Bold 12px; WoodMart's own 16px was winning over the shorthand below */
	font-size: 12px !important;
	line-height: normal !important;
	overflow: hidden;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 1025px) {

	/* the content column is 1280 wide like the header (the theme's container is 1400) */
	.araz-archive main.wd-content-layout.container {
		max-width: 1312px;
		padding: 24px 16px 40px;
	}

	/* the design has neither breadcrumbs nor the "showing 1-24 of N" line above the carousel (the count is in the toolbar) */
	.araz-archive .elementor-element-0d7839b {
		display: none !important;
	}

	/* ---------------------------------------------------------------- category carousel (184:521) */
	.araz-archive .elementor-element-e794b4e {
		margin: 0 0 24px; /* 308 -> 332 in the design */
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.araz-archive .elementor-element-e794b4e > .e-con-inner {
		padding: 0;
		max-width: none;
	}

	/* the white box is the Elementor widget container (white, 20 px padding); the design has the cards straight on the page */
	.araz-archive .elementor-element.elementor-element-1ad6cc9 > .elementor-widget-container {
		padding: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.araz-archive .wd-cats-element {
		--wd-gap-lg: 12px;
		--wd-cat-img-width: 100%;
		position: relative;
		padding-inline: 44px;
	}

	/* WoodMart pulls the carousel up and down by 15 px (room for card shadows); the design's cards sit exactly 24 px under
	   the header and 24 px above the toolbar (184:521 at y 182, 126 high; toolbar at y 332) */
	.araz-archive .wd-cats-element .wd-carousel-inner {
		margin-block: 0;
	}

	.araz-archive .wd-cats-element .wd-cat {
		min-height: 126px;
	}

	.araz-archive .wd-cats-element .wd-carousel {
		padding: 0;
		--wd-gap-lg: 12px !important; /* WoodMart writes 20px inline on this element */
	}

	.araz-archive .wd-cats-element .wd-cat-thumb,
	.araz-archive .wd-cats-element .wd-cat-image {
		display: block;
		width: 100%;
	}

	.araz-archive .wd-cats-element .wd-cat,
	.araz-archive .wd-cats-element .wd-cat-inner {
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: none;
		border: 0;
	}

	.araz-archive .wd-cats-element .wd-cat-thumb {
		height: 80px;
		margin: 0;
		overflow: hidden;
	}

	.araz-archive .wd-cats-element .wd-cat-thumb img {
		display: block;
		width: 100%;
		height: 80px;
		object-fit: cover;
	}

	.araz-archive .wd-cats-element .wd-cat-content {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 4px 12px;
		background: none;
		text-align: start;
		opacity: 1;
		transform: none;
	}

	.araz-archive .wd-cats-element .wd-entities-title {
		margin: 0;
		font: 700 12px/normal var(--ah-font);
		color: var(--ah-text);
		white-space: nowrap;
		overflow: hidden;
		max-width: 100%;
		text-overflow: ellipsis;
	}

	.araz-archive .wd-cats-element .wd-cat-count,
	.araz-archive .wd-cats-element .wd-cat-count a {
		font: 400 12px/normal var(--ah-font);
		color: var(--ah-muted);
	}

	.araz-archive .wd-cats-element .wd-nav-arrows .wd-btn-arrow {
		position: absolute;
		top: 47px;
		width: 32px;
		height: 32px;
		margin: 0;
		border-radius: 24px;
		background: #d9dfeb;
		opacity: 1;
		box-shadow: none;
	}

	.araz-archive .wd-cats-element .wd-nav-arrows .wd-prev {
		inset-inline-end: 0;
		inset-inline-start: auto;
	}

	.araz-archive .wd-cats-element .wd-nav-arrows .wd-next {
		inset-inline-start: 0;
		inset-inline-end: auto;
	}

	.araz-archive .wd-cats-element .wd-nav-arrows .wd-btn-arrow.wd-disabled {
		opacity: .5;
	}

	.araz-archive .wd-cats-element .wd-btn-arrow .wd-arrow-inner {
		width: 24px;
		height: 24px;
		margin: 4px;
		background: rgba(0, 0, 0, .57);
		-webkit-mask: url("../icons/archive/chevron-left.svg") center / 24px no-repeat;
		mask: url("../icons/archive/chevron-left.svg") center / 24px no-repeat;
	}

	.araz-archive .wd-cats-element .wd-btn-arrow .wd-arrow-inner::before,
	.araz-archive .wd-cats-element .wd-btn-arrow .wd-arrow-inner::after {
		content: none;
	}

	/* the "prev" arrow sits at the start (right) and points right */
	.araz-archive .wd-cats-element .wd-prev .wd-arrow-inner {
		transform: scaleX(-1);
	}

	/* ---------------------------------------------------------------- column layout: content 1024 + filter 240, gap 16 */
	.araz-archive .elementor-element-20bf0ad > .e-con-inner {
		gap: 16px;
		align-items: flex-start;
		max-width: none;
		padding: 0;
	}

	.araz-archive .elementor-element-6e35ee3 {
		flex: 1 1 0;
		min-width: 0;
	}

	/* ---------------------------------------------------------------- toolbar card (193:1020) */
	.araz-archive .elementor-element-ffd647a {
		width: 100%;
		margin: 0 0 16px;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
		padding: 15px;
		box-sizing: border-box;
	}

	.araz-archive .elementor-element-ffd647a > .e-con-inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		max-width: none;
		padding: 0;
	}

	.araz-archive .elementor-element-7e0e964,
	.araz-archive .elementor-element-db664df {
		width: auto;
		flex: 0 0 auto;
		padding: 0;
	}

	.araz-archive .elementor-element-db664df {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.araz-archive .wd-woo-page-title .entry-title {
		margin: 0;
		font: 800 24px/normal var(--ah-font);
		color: var(--ah-purple);
		text-transform: none;
	}

	/* brand page: the brand's logo sits beside the title (Figma 193:1020, 144 x 32, gap 20) */
	.araz-archive .wd-woo-page-title > .elementor-widget-container {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.araz-archive .wd-woo-page-title .ah-brandlogo {
		width: auto;
		height: auto;
		max-width: 144px;
		max-height: 32px;
		object-fit: contain;
	}

	/* the design has no "show 9 / 12 / 18 / 24" selector */
	.araz-archive .elementor-element-9a429a8 {
		display: none !important;
	}

	.araz-archive .elementor-element-a0904b9 > .elementor-widget-container {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.araz-archive .ah-count {
		font: 400 16px/normal var(--ah-font);
		color: var(--ah-text2);
		white-space: nowrap;
	}

	/* view switcher: list (big bars) / 3 columns / 4 columns, list at the left end as in the design; active one purple */
	.araz-archive .wd-products-shop-view {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		margin: 0;
		gap: 0;
	}

	.araz-archive .wd-products-shop-view .shop-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 8px;
		border-radius: 24px;
		font-size: 0;
		background: none;
	}

	.araz-archive .wd-products-shop-view .shop-view::before,
	.araz-archive .wd-products-shop-view .shop-view::after {
		content: "";
		display: block;
		position: static;
		width: 24px;
		height: 24px;
		margin: 0;
		border: 0;
		background: #d6d6d6;
		-webkit-mask: center / 24px no-repeat;
		mask: center / 24px no-repeat;
		opacity: 1;
	}

	.araz-archive .wd-products-shop-view .shop-view::after {
		display: none;
	}

	.araz-archive .wd-products-shop-view .per-row-list::before {
		-webkit-mask-image: url("../icons/archive/view-big.svg");
		mask-image: url("../icons/archive/view-big.svg");
	}

	.araz-archive .wd-products-shop-view .per-row-3::before {
		-webkit-mask-image: url("../icons/archive/view-small.svg");
		mask-image: url("../icons/archive/view-small.svg");
	}

	.araz-archive .wd-products-shop-view .per-row-4::before {
		-webkit-mask-image: url("../icons/archive/view-normal.svg");
		mask-image: url("../icons/archive/view-normal.svg");
	}

	.araz-archive .wd-products-shop-view .current-variation::before {
		background: var(--ah-purple);
	}

	/* sort dropdown: 146 wide, 1px #b5a3ff, radius 12, 12/24 text, purple arrow at the left */
	.araz-archive .woocommerce-ordering {
		margin: 0;
	}

	.araz-archive .woocommerce-ordering select.orderby {
		width: 146px;
		height: 32px;
		margin: 0;
		padding: 4px 8px 4px 32px;
		border: 1px solid #b5a3ff;
		border-radius: 12px;
		background: #fff url("../icons/archive/sort-down.svg") no-repeat 4px center / 24px;
		-webkit-appearance: none;
		appearance: none;
		font: 400 12px/24px var(--ah-font);
		color: var(--ah-text2);
		text-align: center;
		text-align-last: center;
		box-shadow: none;
	}

	.araz-archive .woocommerce-ordering::after,
	.araz-archive .woocommerce-ordering::before {
		display: none;
	}

	/* the filter chips repeat what the checked boxes already show */
	.araz-archive .elementor-element-3a6108f {
		display: none !important;
	}

	/* ---------------------------------------------------------------- filter card (187:561) */
	.araz-archive .elementor-element.elementor-element-29022e9 {
		/* !important: Elementor's container rule gives it flex: 0 1 auto, which let it shrink to ~205 px */
		flex: 0 0 240px !important;
		width: 240px !important;
		max-width: 240px !important;
		padding: 15px;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
	}

	.araz-archive .elementor-element-29022e9 > .e-con-inner {
		padding: 0;
	}

	/* the sidebar widget's own container has 30px top padding */
	.araz-archive .elementor-element-29022e9 .elementor-widget-container {
		padding: 0 !important;
	}

	.araz-archive .ah-filter-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin: 0 0 8px;
	}

	.araz-archive .ah-filter-head__title {
		display: flex;
		align-items: center;
		gap: 4px;
		font: 700 16px/32px var(--ah-font);
		color: var(--ah-purple);
	}

	.araz-archive .ah-filter-head__title::before {
		content: "";
		width: 24px;
		height: 24px;
		background: url("../icons/archive/filter.svg") center / 24px no-repeat;
	}

	.araz-archive .ah-filter-head__clear {
		display: block;
		width: 48px;
		height: 32px;
		border-radius: 16px;
		background: #edebff url("../icons/archive/brush.svg") center / 24px no-repeat;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget {
		margin: 0;
		padding: 4px 0;
		border: 0;
		background: none;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget + .sidebar-widget {
		margin-top: 8px;
		padding-top: 12px;
		border-top: 1px solid #e0e0e0;
	}

	/* the design has no category accordion (the carousel above replaces it) */
	.araz-archive #wd-product-category-filter-1 {
		display: none;
	}

	.araz-archive .elementor-element-29022e9 .widget-title {
		margin: 0 0 4px;
		font: 700 16px/32px var(--ah-font);
		color: var(--ah-text);
		text-transform: none;
	}

	/* «موجود در انبار» and «محصولات ویژه» are bare checkbox rows without a section title */
	.araz-archive .wd-widget-stock-status .widget-title,
	.araz-archive .araz-featured-filter .widget-title {
		display: none;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget li {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 4px 0;
		padding: 0;
		min-height: 28px;
		border: 0;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget li > a {
		position: static;
		display: flex;
		flex: 1 1 0;
		align-items: center;
		gap: 8px;
		min-width: 0;
		padding: 0;
		font: 400 12px/24px var(--ah-font);
		color: var(--ah-text);
		text-transform: none;
	}

	/* the checkbox: Figma's own 20 px icons (unchecked / checked) */
	.araz-archive .elementor-element-29022e9 .sidebar-widget li > a::before {
		content: "";
		position: static;
		display: block;
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: url("../icons/archive/check-off.svg") center / 20px no-repeat;
		opacity: 1;
		transform: none;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget li > a::after {
		display: none;
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget li.chosen > a::before,
	.araz-archive .elementor-element-29022e9 .sidebar-widget li.wd-active > a::before {
		background-image: url("../icons/archive/check-on.svg");
	}

	.araz-archive .elementor-element-29022e9 .sidebar-widget li .count {
		order: 2;
		flex: 0 0 auto;
		min-width: 24px;
		padding: 0 8px;
		border-radius: 8px;
		background: #eff2f8;
		font: 400 12px/24px var(--ah-font);
		color: var(--ah-text);
		text-align: center;
	}

	.araz-archive .ah-hidden-row {
		display: none !important;
	}

	.araz-archive .ah-more-row {
		display: flex;
		justify-content: center;
		padding: 4px 0;
	}

	.araz-archive .ah-more {
		width: 36px;
		height: 20px;
		padding: 0;
		border: 0;
		background: url("../icons/archive/more-btn.svg") center / 36px 20px no-repeat;
		cursor: pointer;
	}

	/* ---------------------------------------------------------------- product rows: 4 columns, 16 px between rows */
	.araz-archive .wd-products.wd-grid-g {
		--wd-gap-lg: 21px;
		row-gap: 16px;
	}

	/* ---------------------------------------------------------------- pagination bar (193:1822) */
	.araz-archive .ah-pagebar {
		display: flex;
		/* RTL: row-reverse puts «بالای صفحه» at the right end and the count + pager at the left, as in the design */
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: 16px 0 0;
		padding: 15px;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
	}

	.araz-archive .ah-pagebar__main {
		display: flex;
		/* count at the far left, then the pager (its "next" arrow at the left) */
		flex-direction: row-reverse;
		align-items: center;
		gap: 20px;
	}

	.araz-archive .ah-pagebar__count {
		font: 400 16px/24px var(--ah-font);
		color: var(--ah-text2);
		white-space: nowrap;
	}

	.araz-archive .ah-pagebar ul.page-numbers {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
		border: 0;
	}

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

	.araz-archive .ah-pagebar .page-numbers:not(ul) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 24px;
		margin: 0;
		padding: 0 8px;
		border: 0;
		border-radius: 8px;
		background: none;
		box-shadow: none;
		font: 400 12px/24px var(--ah-font);
		color: var(--ah-text);
	}

	.araz-archive .ah-pagebar a.page-numbers:not(.prev):not(.next):hover {
		background: #eff2f8;
	}

	.araz-archive .ah-pagebar .page-numbers.current {
		background: var(--ah-purple);
		color: #fff;
	}

	.araz-archive .ah-pagebar .page-numbers.dots {
		padding: 0;
		width: 24px;
		background: var(--ah-purple);
		-webkit-mask: url("../icons/archive/dots.svg") center / 24px no-repeat;
		mask: url("../icons/archive/dots.svg") center / 24px no-repeat;
		font-size: 0;
		opacity: .45;
	}

	.araz-archive .ah-pagebar a.prev,
	.araz-archive .ah-pagebar a.next {
		width: 24px;
		min-width: 24px;
		padding: 0;
		background: var(--ah-purple) !important;
		-webkit-mask: url("../icons/archive/page-next.svg") center / 24px no-repeat;
		mask: url("../icons/archive/page-next.svg") center / 24px no-repeat;
	}

	/* RTL: "previous" is at the start (right) and points right */
	.araz-archive .ah-pagebar a.prev {
		-webkit-mask-image: url("../icons/archive/page-prev.svg");
		mask-image: url("../icons/archive/page-prev.svg");
	}

	.araz-archive .ah-totop {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 0 4px 0 12px;
		border-radius: 12px;
		background: #eef9fa;
		font: 500 12px/normal var(--ah-font);
		color: var(--ah-teal2);
		white-space: nowrap;
	}

	.araz-archive .ah-totop::after {
		content: "";
		width: 24px;
		height: 24px;
		background: var(--ah-teal2);
		-webkit-mask: url("../icons/archive/up-arrow.svg") center / 24px no-repeat;
		mask: url("../icons/archive/up-arrow.svg") center / 24px no-repeat;
	}
}