/* araz-home: front-page sections (Figma "Araz Site", 1280 frame is the master).
 * Loaded ONLY on the front page. Tokens are in site.css (:root --ah-*).
 * Blocks marked "INTERIM: not in Figma" are reflows of the 1280 design where the 960 /
 * 360 frames show nothing usable; replace them when the design is final. */

/* ---- page frame: the sections are full-bleed, so the theme's container must not narrow them */
body.araz-home-front .main-page-wrapper {
	padding: 0;
	margin: 0;
	min-height: 0;
}

body.araz-home-front .wd-content-layout,
body.araz-home-front .wd-content-area,
body.araz-home-front .site-content,
body.araz-home-front article.entry-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

body.araz-home-front article.entry-content > p:empty,
body.araz-home-front article.entry-content > br {
	display: none;
}

body.araz-home-front .wd-footer {
	margin-top: 0;
}

.ah-sec,
.ah-hero {
	margin: 0 !important;
	font-family: var(--ah-font);
	color: var(--ah-text);
	line-height: normal;
}

.ah-sec *,
.ah-hero * {
	box-sizing: border-box;
}

.ah-wrap {
	width: min(1280px, 100% - 48px);
	margin-inline: auto;
}

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

.ah-sec h2,
.ah-sec h3,
.ah-sec p {
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	text-transform: none;
}

/* ---- scroll-snap carousels (no library) */
.ah-carousel {
	position: relative;
}

.ah-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.ah-track::-webkit-scrollbar {
	display: none;
}

.ah-track.is-drag {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.ah-track.is-drag a {
	pointer-events: none;
}

/* #294: each dot is a 24 x 24 px button (the touch-target minimum) with the 8 px Figma dot drawn inside it, so the
   dots' centres are 24 px apart (16 px between the 8 px dots instead of 8; the active pill keeps 36 px). */
.ah-dots {
	display: flex;
	justify-content: center;
	gap: 0;
}

.ah-dots[hidden] {
	display: none;
}

.ah-dots button {
	--ah-dot: rgba(0, 0, 0, .26); /* Figma 98:856 */
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	line-height: 0;
	font-size: 0;
	box-shadow: none;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	transition: width .2s ease;
}

.ah-dots button::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: var(--ah-dot);
	transition: width .2s ease, background-color .2s ease;
}

.ah-dots button.is-active {
	--ah-dot: var(--ah-teal2);
	width: 52px;
}

.ah-dots button.is-active::before {
	width: 36px;
}

body .ah-arrow {
	appearance: none;
	min-width: 0;
	min-height: 0;
	line-height: 0;
	font-size: 0;
	box-shadow: none;
	position: absolute !important;
	top: 50%;
	z-index: 3;
	width: 32px !important;
	height: 32px !important;
	margin-top: -16px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, .28) !important;
	cursor: pointer;
}

.ah-arrow::before {
	pointer-events: none;
	content: "";
	position: absolute;
	inset: 4px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 24px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 24px no-repeat;
}

.ah-arrow--prev {
	right: 12px;
}

.ah-arrow--next {
	left: 12px;
}

.ah-arrow--next::before {
	transform: scaleX(-1);
}

.ah-arrow[hidden],
.ah-arrow:disabled {
	display: none;
}

/* ---- hero */
.ah-hero {
	background: #19aeb1;
}

.ah-slide {
	flex: 0 0 100%;
	display: block;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ah-slide__desk {
	display: block;
	width: 100%;
	height: clamp(220px, 33vw, 400px);
	object-fit: cover;
	object-position: 49% 50%;
}

.ah-slide__mob {
	display: none;
}

/* The first slide's pictures sit in a <picture> (Sections::only_on, #294) that must not add a box of its own. */
.ah-slide picture {
	display: contents;
}

.ah-hero .ah-dots {
	position: absolute;
	inset-inline: 0;
	bottom: 4px; /* the 8 px dots stay 12 px above the edge inside their 24 px buttons */
	z-index: 3;
}

.ah-hero .ah-dots button {
	--ah-dot: rgba(0, 0, 0, .26); /* Figma 98:642 */
}

.ah-hero .ah-dots button.is-active {
	--ah-dot: rgba(255, 255, 255, .4);
}

/* Figma 98:647 / 98:649: 20% white, 8 px (right) and 12 px (left) from the edge, centre 2 px below the middle */
.ah-hero .ah-arrow {
	background: rgba(255, 255, 255, .2) !important;
	top: calc(50% + 2px);
}

.ah-hero .ah-arrow--prev {
	right: 8px;
}

/* ---- section heads */
.ah-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ah-head h2,
.ah-best__head h2 {
	font: 800 32px/normal var(--ah-font);
	color: var(--ah-purple);
}

.ah-head p {
	font: 400 16px/normal var(--ah-font);
	color: var(--ah-text2);
}

.ah-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 4px 16px;
	border-radius: 12px;
	background: var(--ah-teal2);
	color: #fff;
	font: 500 12px/normal var(--ah-font);
	white-space: nowrap;
}

.ah-sec a.ah-pill {
	color: #fff;
}

.ah-sec a.ah-pill:hover {
	background: var(--ah-teal);
	color: #fff;
}

/* ---- categories */
.ah-cats {
	background: var(--ah-band);
	padding: 32px 0 64px;
}

.ah-cats__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px 12px;
	margin-top: 16px;
}

.ah-ccard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--ah-shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ah-ccard:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(26, 188, 190, .16);
}

.ah-ccard__pic {
	display: block;
	height: 140px;
	overflow: hidden;
	background: #fff;
}

.ah-ccard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ah-ccard__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 12px 16px;
	text-align: start;
	min-width: 0;
}

.ah-ccard__meta strong {
	font: 700 16px/normal var(--ah-font);
	color: var(--ah-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah-ccard__meta small {
	font: 400 12px/normal var(--ah-font);
	color: var(--ah-muted);
}

/* ---- best-sellers (purple band) */
.ah-best {
	background: var(--ah-purple);
	padding: 56px 0;
}

.ah-best__in {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ah-best__head {
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	color: #fff;
	text-align: start;
}

.ah-best__head h2 {
	color: #fff;
}

.ah-best__head p {
	font: 400 16px/normal var(--ah-font);
	color: #fff;
	margin-top: -24px;
}

.ah-sec .ah-best__head a.ah-pill {
	color: var(--ah-purple);
}

.ah-sec .ah-best__head a.ah-pill:hover {
	color: #fff;
}

.ah-best__rail {
	flex: 1 1 0;
	min-width: 0;
}

.ah-best .ah-track {
	gap: 16px;
	padding: 4px 0 12px;
	margin: -4px 0 -12px;
}

.ah-cell {
	flex: 0 0 calc((100% - 64px) / 5);
	min-width: 0;
	scroll-snap-align: start;
}


body .ah-best .ah-arrow {
	background: rgba(255, 255, 255, .9) !important;
}

@media (hover: hover) {
	body .ah-best .ah-arrow {
		opacity: 0;
		transition: opacity .2s ease;
	}

	.ah-best .ah-carousel:hover .ah-arrow,
	.ah-best .ah-arrow:focus-visible {
		opacity: 1;
	}
}

.ah-best .ah-arrow::before {
	background: var(--ah-purple);
}

/* ---- product cards */
.ah-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--ah-shadow);
}

.ah-pcard__pic {
	position: relative;
	display: block;
	overflow: hidden;
}

.ah-pcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ah-pcard__title {
	font: 700 16px/normal var(--ah-font);
	color: var(--ah-text);
	text-align: start;
	min-width: 0;
}

.ah-pcard__title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah-stock {
	display: inline-flex;
	flex-direction: row-reverse; /* Figma: text then icon, the icon is the right-most element */
	align-items: center;
	gap: 2px;
	font: 500 12px/normal var(--ah-font);
	white-space: nowrap;
}

.ah-stock.is-in {
	color: var(--ah-teal2);
}

.ah-stock.is-out {
	color: #ff9897; /* Figma 98:1032 */
}

.ah-stock .ah-ico {
	flex: 0 0 24px;
}

/* the bag button (.ah-btn) is in site.css: the related-products cards of the product page use it too (#121) */

.ah-pcard .added_to_cart {
	display: none;
}

/* best-seller variant */
.ah-pcard--best {
	height: 100%;
	overflow: hidden;
}

.ah-pcard--best .ah-pcard__pic {
	height: 206.4px;
	background: #fff;
}

.ah-badge {
	position: absolute;
	top: 7px;
	right: 8px;
	padding: 4px 8px;
	border-radius: 16px;
	background: var(--ah-red);
	color: #fff;
	font: 500 12px/normal var(--ah-font);
}

.ah-pcard--best .ah-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 12px 16px;
	background: #e6fdff;
	flex: 1;
}

.ah-pcard--best .ah-stock {
	align-self: flex-start;
	gap: 4px;
}

/* newest variant */
.ah-new {
	background: #fff;
	padding: 16px 0 64px;
}

.ah-new .ah-head {
	margin-bottom: 16px;
}

.ah-new__grid {
	display: grid;
	/* Figma: 240 px cards; the 1232 px row of the 1280 frame has 8 px gaps, the 1280 px row of the 1920 frame has 20 px */
	grid-template-columns: repeat(5, minmax(0, 240px));
	justify-content: space-between;
	gap: 16px 8px;
}

.ah-pcard--new {
	background: var(--ah-gray);
	border: 1px solid var(--ah-border);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ah-pcard--new .ah-pcard__pic {
	margin: 7px; /* + the card's 1 px border = the design's 8 px padding: picture 224 x 224 in a 342 px card */
	height: 224px;
	background: #fff;
	border: 1px solid var(--ah-border);
	border-radius: 8px;
}

.ah-pcard--new .ah-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 12px 12px;
	border-radius: 0 0 16px 16px;
}

.ah-pcard__cat {
	min-height: 18px;
	font: 400 12px/normal var(--ah-font);
	color: var(--ah-muted);
	text-align: start;
}

.ah-pcard__foot {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
}

.ah-pcard__pop {
	display: none;
}

/* The list price, for a viewer who is shown prices (araz-quote-mode fills `.ah-pcard__price`; a guest's card has no
   such slot and is unchanged). Figma «Products Card» 276:4790, action bar 315:5387 (issue #85): the stock line on its
   own row, then one row with the price at the start and the bag button at the end (393:11735, space-between). The price
   slot and the price markup step aside (`display: contents`) and the amount is placed itself. A card has no «به‌روز …»
   tag (issue #177; since #183 PriceMarkup prints it nowhere), so the price row is the last row, as in the frame. */
.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title title"
		"cat cat"
		"stock stock"
		"price btn";
	align-items: center;
	gap: 3px 8px;
}

.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__title { grid-area: title; }
.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__cat { grid-area: cat; }

.ah-pcard--new .ah-pcard__body > .ah-pcard__price,
.ah-pcard--new .ah-pcard__body > .ah-pcard__price > .araz-price:not(.araz-price--inquiry),
.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__foot {
	display: contents;
}

.ah-pcard--new .ah-pcard__body > .ah-pcard__price :is(.araz-price__amount, .araz-price--inquiry) {
	grid-area: price;
	justify-self: start;
	min-width: 0;
}

.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__foot > .ah-stock {
	grid-area: stock;
	justify-self: start;
}

.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__foot > .ah-btn {
	grid-area: btn;
}

/* A card too narrow for the price and the button side by side (a phone's two columns) puts the button on its own row.
   The size container is set only where the grid, not the card's content, decides the card's width (the homepage
   «جدیدترین» grid and the archive's product cells), so a card in a slot that sizes by its content cannot collapse. */
:is(.ah-new__grid, .wd-product.ah-arch) > .ah-pcard--new:has(> .ah-pcard__body > .ah-pcard__price) {
	container-type: inline-size;
}

@container (max-width: 223px) {
	.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"cat"
			"stock"
			"price"
			"btn";
	}

	.ah-pcard--new .ah-pcard__body:has(> .ah-pcard__price) > .ah-pcard__foot > .ah-btn {
		justify-self: end;
	}
}

/* the best-sellers card has no button: the price sits between the title and the stock line */
.ah-pcard--best .ah-pcard__price {
	margin-top: 4px;
}

@media (hover: hover) and (min-width: 1025px) {
	.ah-pcard--new:hover,
	.ah-pcard--new:focus-within {
		z-index: 6;
		border-color: var(--ah-purple);
		/* The details panel continues the card downwards: square the card's bottom corners and drop its bottom
		   border, otherwise the border curves in and jumps back out at the junction with the panel. */
		border-bottom-color: var(--ah-gray);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: 0 4px 16px rgba(91, 78, 205, .48);
	}

	.ah-pcard--new:hover .ah-pcard__pop,
	.ah-pcard--new:focus-within .ah-pcard__pop {
		display: block;
		position: absolute;
		inset-inline: -1px;
		top: 100%;
		margin-top: 0;
		/* Figma 240:8675: divider at y 342 (the body's own 12 px bottom padding above it), the rows 12 px under it, 12 px below them: 450 px in all */
		padding: 13px 12px 11px;
		background: var(--ah-gray);
		border: 1px solid var(--ah-purple);
		border-top: 0;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 4px 16px rgba(91, 78, 205, .48);
		/* keep the shadow on the sides and below only; upwards it would darken the card's own bottom edge */
		clip-path: inset(0 -40px -50px -40px);
	}

	/* the divider line between the bag/stock row and the detail rows (Figma «جداکننده», #eeeeee) */
	.ah-pcard__pop::before {
		content: "";
		position: absolute;
		inset-inline: 12px;
		top: 1px;
		height: 1px;
		background: #eeeeee;
	}

	.ah-pcard--new:hover .ah-pcard__body,
	.ah-pcard--new:focus-within .ah-pcard__body {
		border-radius: 0;
	}

	.ah-pcard__pop ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font: 500 12px/normal var(--ah-font); /* Figma: Vazirmatn Medium, both label and value */
		color: #9e9e9e;
	}

	/* label at the start, the value box fills the rest (2 px gap) and every value, Persian or digits, sits at its left
	   edge (Figma 194:2079); 4 px between rows, the two code rows touch */
	.ah-pcard__pop li {
		display: flex;
		justify-content: flex-start;
		gap: 2px;
		margin: 0 0 4px;
	}

	.ah-pcard__pop li:last-child {
		margin-bottom: 0;
	}

	.ah-pcard__pop li.ah-code + li.ah-code {
		margin-top: -4px;
	}

	.ah-pcard__pop li span {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.ah-pcard__pop li b {
		flex: 1 1 0;
		min-width: 0;
		font-weight: 500;
		color: #9e9e9e;
		text-align: left;
	}
}

/* product codes in Farsi digits (issue #30); outside the hover block so the archive's list view gets it too */
.ah-pcard__pop li.ah-code b {
	font-family: var(--ah-font-num);
}

/* ---- brands */
.ah-brands {
	background: #fff;
	padding: 12px 0;
}

.ah-brands .ah-carousel {
	--k: 1;
}

.ah-brands__row {
	direction: rtl; /* the page is RTL: the first logo (Joula) is at the right, scrolling reveals the rest to the left */
	align-items: center;
	justify-content: space-between;
	height: 169px;
	gap: 46px; /* the first six logo frames (1050 px) spread over 1280 px: (1280 - 1050) / 5; the rest are reached by scrolling the row */
}

.ah-logo {
	flex: 0 0 auto;
	width: calc(var(--w) * 1px * var(--k));
	height: calc(var(--h) * 1px * var(--k));
	scroll-snap-align: start;
}

.ah-logo a,
.ah-logo img {
	display: block;
	width: 100%;
	height: 100%;
}

.ah-logo img {
	object-fit: contain;
}

.ah-brands .ah-dots {
	height: 24px;
	margin-block: -8px; /* the 8 px dots keep their place inside the 24 px buttons */
}

.ah-brands .ah-dots[hidden] {
	display: flex;
	visibility: hidden;
}

.ah-brands .ah-dots button.is-active {
	--ah-dot: var(--ah-teal2);
}

/* ---- banners */
.ah-banners {
	background: #fff;
	padding: 28px 0 29px;
}

.ah-banners__grid {
	direction: ltr;
	display: grid;
	width: min(1280px, 100% - 96px);
	/* minmax(0, ...) so no image can widen a column; with the same 12 px gaps the three keep ONE common height
	   ((width - 24px) * 231 / 1160) at every width, which is the Figma row (472 / 344 / 344 wide, all 231 tall) */
	grid-template-columns: minmax(0, 472fr) minmax(0, 344fr) minmax(0, 344fr);
	align-items: start;
	gap: 12px;
}

@media (min-width: 1328px) {
	.ah-banners__grid {
		grid-template-columns: 472px minmax(0, 1fr) minmax(0, 1fr);
	}
}

.ah-banner {
	display: block;
	overflow: hidden;
	border-radius: 14.222px; /* Figma 98:864 */
	transition: transform .2s ease;
}

.ah-banner:hover {
	transform: translateY(-2px);
}

.ah-banner {
	height: auto;
}

.ah-banner--1 {
	aspect-ratio: 472 / 231;
}

.ah-banner--2,
.ah-banner--3 {
	aspect-ratio: 344 / 231;
}

.ah-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1328px) {
	.ah-banner--1,
	.ah-banner--2,
	.ah-banner--3 {
		aspect-ratio: auto;
		height: 231px;
	}
}

/* ================================================================== responsive */

/* tablet (960 frame): 4-column category grid, best-sellers shows 4, new products 4 columns */
@media (max-width: 1199px) {
	.ah-cats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ah-cell {
		flex-basis: calc((100% - 48px) / 4);
	}

	.ah-new__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ah-new__grid > :nth-child(n + 9) {
		display: none;
	}

	.ah-brands .ah-carousel {
		--k: .8;
	}

	.ah-brands__row {
		height: 130px;
		gap: 24px;
	}
}

@media (max-width: 1024px) {
	.ah-best__head {
		flex-basis: 180px;
	}

	.ah-head h2,
	.ah-best__head h2 {
		font-size: 28px;
	}
}

/* INTERIM: not in Figma. The 960 and 360 frames of the hero are unfinished (the 960 slide shows a cropped
 * text; slides 1 and 3 have no phone frame), so the phone hero is the designer's 360x680 slide 2 plus two
 * slides composed from live text and a crop of the desktop picture. Replace when the design is final. */
@media (max-width: 767px) {
	.ah-slide__desk {
		display: none;
	}

	.ah-slide__mob {
		display: block;
		width: 100%;
		height: 680px;
		object-fit: cover;
	}

	.ah-slide__mob--text {
		position: relative;
		overflow: hidden;
		background: linear-gradient(90deg, #17adaf 55%, #2986bc);
		text-align: start;
	}

	.ah-mtext {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 56px 16px 0;
		color: #fff;
	}

	.ah-mtext small {
		font: 400 16px/normal var(--ah-font);
	}

	.ah-mtext strong {
		font: 800 28px/1.5 var(--ah-font);
	}

	.ah-mtext em {
		font: 400 16px/1.7 var(--ah-font);
		font-style: normal;
		padding: 12px 16px;
		border-radius: 12px;
		background: var(--ah-purple);
	}

	.ah-slide__mob--text > img,
	.ah-slide__mob--text > picture > img {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		width: 100%;
		height: 60%;
		object-fit: cover;
		object-position: center bottom;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%);
		mask-image: linear-gradient(to bottom, transparent, #000 28%);
	}

	.ah-hero .ah-arrow {
		top: 340px;
	}
}

/* INTERIM: not in Figma. Phone layout of the sections below the hero: the 360 frame fixes the order and the
 * column counts used here (categories scroll in 3 rows, best-sellers swipe, banner 1 full row then 2 and 3
 * side by side, new products 2 columns); paddings and sizes are the 1280 rhythm scaled down. */
@media (max-width: 767px) {
	.ah-head h2,
	.ah-best__head h2 {
		font-size: 24px;
	}

	.ah-head p,
	.ah-best__head p {
		font-size: 14px;
	}

	.ah-cats {
		padding: 24px 0 40px;
	}

	.ah-cats .ah-head {
		margin-bottom: 0;
	}

	.ah-cats__grid {
		grid-template-columns: none;
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		grid-auto-columns: 152px;
		gap: 12px;
		margin-inline: -24px;
		padding: 4px 24px 12px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.ah-cats__grid::-webkit-scrollbar {
		display: none;
	}

	.ah-ccard {
		scroll-snap-align: start;
	}

	.ah-ccard__pic {
		height: 100px;
	}

	.ah-ccard__meta strong {
		font-size: 14px;
	}

	.ah-best {
		padding: 32px 0;
	}

	.ah-best__in {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.ah-best__head {
		flex-basis: auto;
		gap: 12px;
	}

	.ah-best__head p {
		margin-top: -12px;
	}

	.ah-best__rail {
		margin-inline: -24px;
	}

	.ah-best .ah-track {
		padding-inline: 24px;
		scroll-padding-inline: 24px;
	}

	.ah-cell {
		flex-basis: 156px;
	}

	.ah-best .ah-arrow {
		display: none;
	}

	.ah-brands__row {
		height: 100px;
		gap: 24px;
	}

	.ah-brands .ah-carousel {
		--k: .6;
	}

	.ah-brands__row {
		justify-content: flex-start;
	}

	.ah-banners {
		padding: 20px 0 24px;
	}

	.ah-banners__grid {
		width: min(1280px, 100% - 48px);
		grid-template-columns: 1fr 1fr;
	}

	.ah-banner--1 {
		grid-column: 1 / -1;
	}

	.ah-new {
		padding-bottom: 40px;
	}

	.ah-new .ah-head {
		flex-wrap: wrap;
	}

	.ah-new__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 8px;
	}

	.ah-new__grid > :nth-child(n + 5) {
		display: none;
	}

	.ah-pcard--new .ah-pcard__title {
		font-size: 14px;
	}

	.ah-pcard--new .ah-pcard__pic {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.ah-pcard__foot {
		flex-wrap: nowrap;
		gap: 4px;
	}

	.ah-pcard--new .ah-btn {
		height: 40px !important;
		min-width: 40px !important;
		padding-inline: 8px !important;
	}

	.ah-pcard--new .ah-stock {
		font-size: 11px;
		gap: 0;
	}

	.ah-pcard--new .ah-stock .ah-ico {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
	}
}