/* =========================================================
   Каталог категорії — макет «iPhone Catalog».
   Токени й базові компоненти беруться з app.css.
   ========================================================= */

/* --- стрічка моделей ------------------------------------- */

.am-models {
	background: linear-gradient(180deg, #f6f7f9 0%, #eef1f5 100%);
	border-bottom: 1px solid #e1e4e9;
}

.am-models__wrap {
	position: relative;
	padding-block: 12px 20px;
}

.am-models__strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px 44px 8px;
}

.am-models__strip::-webkit-scrollbar {
	height: 0;
	width: 0;
}

.am-models__tile {
	flex: none;
	width: 206px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 10px 10px 14px;
	border-radius: var(--am-r-2xl);
	border: 1px solid #e2e4e8;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 4px 14px rgba(17, 18, 20, 0.045);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.am-models__tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(17, 18, 20, 0.12);
	color: var(--am-text);
}

.am-models__tile.is-active {
	border-color: var(--am-accent);
	background: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(17, 18, 20, 0.12);
}

.am-models__shot {
	position: relative;
	height: 178px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 18px 18px 8px 8px;
}

.am-models__glow {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	filter: blur(30px);
	opacity: 0.3;
	transform: scale(0.92);
	transition: opacity 0.3s ease, transform 0.3s ease;
	background: radial-gradient(circle,
		color-mix(in srgb, var(--am-glow, #6c8cff) 33%, transparent) 0%,
		color-mix(in srgb, var(--am-glow, #6c8cff) 16%, transparent) 48%,
		transparent 72%);
}

.am-models__tile:hover .am-models__glow,
.am-models__tile.is-active .am-models__glow {
	opacity: 0.75;
	transform: scale(1.08);
}

.am-models__shot img {
	position: relative;
	max-width: 148px;
	max-height: 166px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.am-models__tile:hover .am-models__shot img,
.am-models__tile.is-active .am-models__shot img {
	transform: translateY(-3px) scale(1.035);
}

.am-models__label {
	display: block;
	padding: 13px 8px 4px;
	font-size: 15px;
	font-weight: 750;
	letter-spacing: -0.018em;
	line-height: 1.25;
	color: #16181b;
}

.am-models__hint {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-inline: 8px;
	color: #858b94;
	font-size: 12px;
	font-weight: 650;
}

.am-models__hint span {
	font-size: 16px;
}

.am-models__tile.is-active .am-models__hint {
	color: var(--am-accent);
}

.am-models__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #dfe2e7;
	background: rgba(255, 255, 255, 0.96);
	color: var(--am-text);
	box-shadow: 0 10px 28px rgba(17, 18, 20, 0.12);
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	display: none;
}

.am-models__arrow.is-on {
	display: flex;
}

.am-models__arrow--left {
	left: 24px;
}

.am-models__arrow--right {
	right: 24px;
}

/* --- заголовок і сортування ------------------------------ */

.am-cat-head {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
	padding-block: 14px 8px;
}

.am-cat-head h1 {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.035em;
}

.am-cat-head__found {
	font-size: 14px;
	color: var(--am-muted);
	font-weight: 600;
	padding-bottom: 6px;
}

.am-cat-head__sort {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.am-cat-head__sort > span {
	font-size: 13px;
	color: var(--am-muted);
	font-weight: 700;
}

/*
 * Ширину контролу задає видимий підпис, а не найдовший варіант списку:
 * сам <select> лежить прозорим шаром зверху.
 */
.am-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding-inline: 15px;
	border: 1px solid var(--am-border-ctl);
	border-radius: 11px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--am-text);
	cursor: pointer;
	white-space: nowrap;
}

body.am-body .am-select select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	min-height: 0;
}

.am-select__chev {
	pointer-events: none;
	font-size: 11px;
	color: var(--am-muted);
}

/* --- каркас каталогу ------------------------------------- */

.am-cat-body {
	display: grid;
	grid-template-columns: 284px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding-block: 18px 64px;
}

/* --- сайдбар фільтрів ------------------------------------ */

.am-filters {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.am-filters__card,
.am-filters__help {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: var(--am-r-xl);
}

.am-filters__card {
	padding: 20px;
}

.am-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.am-filters__reset {
	font-size: 13px;
	font-weight: 700;
	color: var(--am-accent);
}

.am-filters__label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--am-muted-2);
	margin-bottom: 12px;
}

.am-filters__range {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Поле ціни: підпис усередині, валюта праворуч, фокус акцентним кільцем. */
.am-price {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 52px;
	padding: 0 12px;
	border: 1px solid var(--am-border-ctl-2);
	border-radius: var(--am-r-md);
	background: var(--am-surface-2);
	cursor: text;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.am-price:focus-within {
	background: #fff;
	border-color: var(--am-accent);
	box-shadow: 0 0 0 3px var(--am-accent-soft);
}

.am-price__cap {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--am-muted-2);
	line-height: 1;
}

body.am-body .am-price input {
	width: 100%;
	min-width: 0;
	margin-top: 4px;
	padding: 0 16px 0 0;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--am-text);
	font-variant-numeric: tabular-nums;
}

.am-price__cur {
	position: absolute;
	right: 12px;
	bottom: 11px;
	font-size: 13px;
	font-weight: 700;
	color: var(--am-faint);
	pointer-events: none;
}

.am-filters__dash {
	flex: none;
	color: #c3c7cc;
	font-weight: 700;
}

.am-track {
	position: relative;
	height: 6px;
	border-radius: 99px;
	background: var(--am-border);
	margin: 24px 11px 10px;
}

.am-track__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 99px;
	background: var(--am-text);
}

.am-track__knob {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--am-text);
	box-shadow: 0 2px 8px -2px rgba(17, 18, 20, 0.35);
	pointer-events: none;
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Ручка, яку зараз тягнуть, підростає й отримує акцентне кільце. */
.am-track[data-am-active="from"] [data-am-knob="from"],
.am-track[data-am-active="to"] [data-am-knob="to"] {
	transform: translate(-50%, -50%) scale(1.12);
	border-color: var(--am-accent);
	box-shadow: 0 0 0 6px var(--am-accent-soft), 0 2px 8px -2px rgba(17, 18, 20, 0.35);
}

/*
 * Повзунки лежать поверх доріжки прозорими: видимі кружечки малюємо самі,
 * а тягнемо нативні input[type=range] — з них безкоштовно йде тач і клавіатура.
 * pointer-events вимикаємо на самому інпуті й вмикаємо лише на бігунку,
 * інакше верхній інпут перехоплював би обидва кінці діапазону.
 */
body.am-body .am-track__input {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
	outline: none;
	min-height: 0;
}

body.am-body .am-track__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	pointer-events: auto;
	cursor: grab;
}

body.am-body .am-track__input::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	pointer-events: auto;
	cursor: grab;
}

body.am-body .am-track__input::-webkit-slider-thumb:active,
body.am-body .am-track__input::-moz-range-thumb:active {
	cursor: grabbing;
}

body.am-body .am-filters__apply {
	width: 100%;
	margin-top: 14px;
	height: 38px;
	border: 1px solid var(--am-border-ctl);
	border-radius: 10px;
	background: var(--am-surface-2);
	color: var(--am-text-2);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

body.am-body .am-filters__apply:hover {
	border-color: var(--am-text);
}

.am-filters__rule {
	height: 1px;
	background: var(--am-divider);
	margin: 20px 0;
}

.am-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.am-fchip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding-inline: 14px;
	border-radius: 10px;
	border: 1px solid var(--am-border-ctl);
	background: var(--am-surface-2);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--am-text-2);
}

.am-fchip:hover {
	border-color: var(--am-text);
	color: var(--am-text);
}

.am-fchip.is-active {
	border-color: var(--am-text);
	background: var(--am-text);
	color: #fff;
}

.am-filters__search {
	height: 40px;
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--am-border-ctl);
	background: var(--am-surface-2);
	border-radius: 10px;
	padding-inline: 11px;
	margin-bottom: 10px;
	color: var(--am-muted-2);
}

body.am-body .am-filters__search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 13px;
	color: var(--am-text);
}

.am-frows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.am-frow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--am-text);
}

.am-frow:hover {
	background: var(--am-surface-2);
	color: var(--am-text);
}

.am-frow.is-active {
	background: var(--am-surface-3);
	font-weight: 700;
}

.am-frow__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	border: 1px solid rgba(17, 18, 20, 0.14);
	box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px var(--am-border);
}

.am-frow.is-active .am-frow__dot {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--am-accent);
}

.am-frow__box {
	width: 19px;
	height: 19px;
	flex: none;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	border: 1.5px solid #d7d7d2;
	background: #fff;
}

.am-frow.is-active .am-frow__box {
	border-color: var(--am-text);
	background: var(--am-text);
}

.am-frow__name {
	flex: 1;
}

.am-frow__count {
	font-size: 12.5px;
	color: var(--am-faint);
	font-weight: 600;
}

body.am-body .am-fmore {
	width: 100%;
	margin-top: 8px;
	height: 36px;
	border: 1px solid var(--am-border-ctl);
	border-radius: 10px;
	background: var(--am-surface-2);
	color: #555a62;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.am-filters__help {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.am-filters__help-title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.am-filters__help-sub {
	font-size: 13px;
	color: #7b8088;
	line-height: 1.45;
}

body.am-body .am-filters__help .am-btn {
	margin-top: 8px;
	height: 42px;
	border-radius: 11px;
	width: 100%;
}

/* --- список товарів -------------------------------------- */

.am-listing {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.am-chips {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.am-chips__label {
	font-size: 13px;
	color: var(--am-muted);
	font-weight: 700;
}

.am-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 10px 0 12px;
	border-radius: 99px;
	border: 1px solid var(--am-border-ctl);
	background: var(--am-surface-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--am-text-2);
}

.am-chips__item:hover {
	border-color: var(--am-text);
	color: var(--am-text);
}

.am-chips__item span {
	color: var(--am-faint);
	font-size: 14px;
}

.am-chips__reset {
	margin-left: auto;
}

.am-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* --- картка каталогу ------------------------------------- */

.am-ccard {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: var(--am-r-xl);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.am-ccard:hover {
	border-color: var(--am-border-hover);
	box-shadow: var(--am-shadow-card);
}

.am-ccard__media {
	position: relative;
	height: 236px;
	border-radius: 13px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #f0f0ed;
	display: flex;
	align-items: center;
	justify-content: center;
}

.am-ccard__media > a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.am-ccard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
}

body.am-body .am-ccard__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--am-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--am-text-3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: color 0.18s ease, border-color 0.18s ease;
}

body.am-body .am-ccard__fav[aria-pressed="true"] {
	color: var(--am-accent);
	border-color: var(--am-accent);
}

.am-ccard__fav[aria-pressed="true"] .am-i,
.am-ctool[aria-pressed="true"] .am-i {
	fill: currentColor;
}

.am-ccard__name {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.am-ccard__colors {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.am-body .am-cdot {
	width: 20px;
	height: 20px;
	flex: none;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(17, 18, 20, 0.14);
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--am-border);
	transition: box-shadow 0.18s ease;
}

/* у групі товарів перемикачі — посилання, а не кнопки */
body.am-body a.am-cdot {
	display: block;
}

body.am-body a.am-cmem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--am-text-2);
}

body.am-body a.am-cmem.is-active {
	color: #fff;
}

body.am-body .am-cdot.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--am-accent);
}

.am-ccard__color-name {
	font-size: 12.5px;
	color: var(--am-muted);
	font-weight: 600;
	margin-left: 2px;
}

.am-ccard__mems {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

body.am-body .am-cmem {
	height: 30px;
	padding-inline: 11px;
	border-radius: var(--am-r-sm);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	border: 1px solid var(--am-border-ctl);
	background: #fff;
	color: var(--am-text-2);
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

body.am-body .am-cmem.is-active {
	border-color: var(--am-text);
	background: var(--am-text);
	color: #fff;
}

.am-ccard__price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 10px;
	flex-wrap: wrap;
	margin-top: auto;
	width: 100%;
}

.am-ccard__now {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.am-ccard__old {
	font-size: 14px;
	color: var(--am-faint);
	text-decoration: line-through;
	font-weight: 600;
	padding-bottom: 2px;
	white-space: nowrap;
}

.am-ccard__usd {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 13px;
	color: #7b8088;
	font-weight: 700;
	white-space: nowrap;
}

.am-ccard__actions {
	display: flex;
	gap: 7px;
}

body.am-body .am-ccard__buy {
	flex: 1;
	height: 44px;
	border-radius: 11px;
	padding-inline: 12px;
}

body.am-body .am-ctool {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--am-border-ctl-2);
	background: var(--am-surface-2);
	color: var(--am-text-2);
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

body.am-body .am-ctool[aria-pressed="true"] {
	border-color: var(--am-accent);
	color: var(--am-accent);
}

body.am-body .am-ctool[data-am-cmp][aria-pressed="true"] {
	border-color: var(--am-text);
	background: var(--am-text);
	color: #fff;
}

/* --- порожній стан і пагінація --------------------------- */

.am-empty {
	background: #fff;
	border: 1px solid var(--am-border);
	border-radius: var(--am-r-xl);
	padding: 52px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.am-empty__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.am-empty__sub {
	font-size: 14px;
	color: #7b8088;
}

body.am-body .am-empty .am-btn {
	margin-top: 8px;
	height: 42px;
	border-radius: 11px;
}

.am-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 12px;
	flex-wrap: wrap;
}

body.am-body .am-pager .page-numbers {
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 11px;
	border: 1px solid var(--am-border-ctl);
	background: #fff;
	color: var(--am-text-2);
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.18s ease;
}

body.am-body .am-pager .page-numbers:hover {
	border-color: var(--am-text);
	color: var(--am-text);
}

body.am-body .am-pager .page-numbers.current {
	border-color: var(--am-text);
	background: var(--am-text);
	color: #fff;
}

/* Поки підвантажується новий список — легке затемнення сітки. */
.am-cat-body.is-swapping .am-listing {
	opacity: 0.55;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

/* --- фільтри як нижня шторка (мобільний) ------------------ */

/* На десктопі кнопка, шапка шторки й підсумкова кнопка не потрібні. */
.am-mfilters-btn,
.am-filters__sheet-head,
.am-filters__done,
.am-filters__scrim {
	display: none;
}

@media (max-width: 1024px) {
	body.am-body .am-mfilters-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding-inline: 18px;
		border: 0;
		border-radius: 11px;
		background: var(--am-text);
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		min-height: 0;
		flex: none;
	}

	.am-mfilters-btn__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding-inline: 5px;
		border-radius: 99px;
		background: var(--am-accent);
		color: #fff;
		font-size: 11.5px;
		font-weight: 800;
	}

	.am-cat-head__sort > span {
		display: none;
	}

	.am-filters__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 60;
		background: rgba(17, 18, 20, 0.45);
	}

	.am-filters__scrim[hidden] {
		display: none;
	}

	.am-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 61;
		max-height: 88vh;
		overflow-y: auto;
		gap: 0;
		padding: 0 14px 14px;
		background: #fff;
		border-radius: 26px 26px 0 0;
		box-shadow: 0 -24px 60px -20px rgba(17, 18, 20, 0.4);
		transform: translateY(100%);
		transition: transform 0.28s ease;
	}

	.am-filters.is-open {
		transform: translateY(0);
	}

	/* Шапка шторки липне до верху, поки крутиш список фільтрів. */
	.am-filters__sheet-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 2px 12px;
		background: #fff;
	}

	.am-filters__handle {
		position: absolute;
		top: 7px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 5px;
		border-radius: 99px;
		background: var(--am-border);
	}

	.am-filters__sheet-title {
		flex: 1;
		font-size: 17px;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	body.am-body .am-filters__sheet-close {
		width: 34px;
		height: 34px;
		flex: none;
		border-radius: 11px;
		border: 1px solid var(--am-border);
		background: var(--am-surface-2);
		color: var(--am-text);
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
		min-height: 0;
	}

	/* Усередині шторки картки-обгортки лише заважають. */
	.am-filters__card,
	.am-filters__help {
		border: 0;
		border-radius: 0;
		padding-inline: 0;
	}

	/* Заголовок картки дублював би шапку шторки. */
	.am-filters__card > .am-filters__head {
		display: none;
	}

	/* У шторці блок «Не знайшли модель?» тільки відсуває кнопку вниз. */
	.am-filters__help {
		display: none;
	}

	body.am-body .am-filters__done {
		position: sticky;
		bottom: 0;
		display: block;
		width: 100%;
		/* шторка — флекс-колонка зі скролом, без flex:none кнопку стискає */
		flex: none;
		/* власний фон і відступ, щоб список не просвічував під кнопкою */
		margin-top: 14px;
		outline: 14px solid #fff;
		outline-offset: 0;
		height: 52px;
		border: 0;
		border-radius: var(--am-r-lg);
		background: var(--am-text);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		min-height: 0;
	}
}

/* --- адаптив --------------------------------------------- */

@media (max-width: 1180px) {
	.am-cat-body {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.am-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.am-models__wrap {
		padding-block: 10px 14px;
	}

	.am-models__strip {
		padding-inline: 0;
	}

	.am-models__tile {
		width: 152px;
	}

	.am-models__shot {
		height: 132px;
	}

	.am-models__shot img {
		max-width: 106px;
		max-height: 122px;
	}

	.am-models__label {
		font-size: 13.5px;
		padding-top: 10px;
	}

	.am-models__arrow {
		display: none !important;
	}

	.am-cat-head h1 {
		font-size: 24px;
	}

	.am-cat-head__sort {
		margin-left: 0;
		width: 100%;
		gap: 8px;
	}

	/* Сортування тієї ж висоти, що кнопка «Фільтри», і притиснуте вправо. */
	.am-cat-head__sort .am-select {
		flex: none;
		margin-left: auto;
		padding-inline: 18px;
	}

	.am-cat-body {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-block: 14px 36px;
	}

	.am-grid--3 {
		gap: 10px;
	}

	.am-ccard {
		padding: 12px;
		gap: 10px;
		border-radius: 16px;
	}

	.am-ccard__media {
		height: 168px;
	}

	.am-ccard__name {
		font-size: 13.5px;
	}

	.am-ccard__now {
		font-size: 17px;
	}

	body.am-body .am-ccard__buy {
		height: 40px;
		font-size: 13px;
	}

	body.am-body .am-ctool {
		width: 40px;
		height: 40px;
	}
}

/* Позиція без ціни в прайсі: те саме місце, але спокійніший тон. */
.am-ccard__now--order {
	color: oklch(0.58 0.14 65);
	font-size: 20px;
}

/* === розділ-хаб за макетом «Apple-mania Аксесуари» ================= */

.am-hub2 {
	--h2-bg: #f4f4f2;
	--h2-card: #ffffff;
	--h2-line: #ececea;
	--h2-line-soft: #f0f0ee;
	--h2-ink: #111111;
	--h2-muted: #6f6f6a;
	--h2-dim: #9a9a94;
	--h2-faint: #b0b0aa;
	--h2-accent: #12a150;

	padding-bottom: 90px;
	background: var(--h2-bg);
}

.am-hub2__crumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 22px var(--am-pad) 0;
	font-size: 12.5px;
	color: var(--h2-dim);
}

.am-hub2__crumbs a {
	color: inherit;
	text-decoration: none;
}

.am-hub2__crumbs a:hover {
	color: var(--h2-ink);
}

.am-hub2__here {
	color: var(--h2-ink);
	font-weight: 600;
}

/* --- шапка розділу --- */

.am-hub2__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding: 18px var(--am-pad) 26px;
	flex-wrap: wrap;
}

.am-hub2__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.am-hub2__intro h1 {
	margin: 0;
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.am-hub2__intro p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--h2-muted);
	text-wrap: pretty;
}

.am-hub2__stats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.am-hub2__stat {
	min-width: 132px;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--h2-card);
	border: 1px solid var(--h2-line);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.am-hub2__stat-v {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.am-hub2__stat-k {
	font-size: 11.5px;
	color: var(--h2-dim);
	line-height: 1.35;
}

/* --- сітка розділів --- */

.am-hub2__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 24px;
	min-width: 0;
	padding-top: 10px;
}

.am-hub2__card {
	background: var(--h2-card);
	border: 1px solid var(--h2-line);
	border-radius: 28px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.am-hub2__shot {
	position: relative;
	height: 210px;
	background: var(--am-tone, #f4f4f2);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.am-hub2__shot img {
	max-width: 62%;
	max-height: 78%;
	object-fit: contain;
}

.am-hub2__num {
	position: absolute;
	top: 20px;
	left: 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #ffffff;
	background: var(--h2-ink);
	padding: 7px 12px;
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
}

.am-hub2__body {
	padding: 26px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

.am-hub2__titles {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.am-hub2__title-row {
	display: flex;
	align-items: baseline;
	gap: 11px;
	flex-wrap: wrap;
}

.am-hub2__title-row h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.am-hub2__count {
	font-size: 12.5px;
	color: var(--h2-faint);
	font-weight: 700;
	white-space: nowrap;
}

.am-hub2__lead {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--h2-muted);
	text-wrap: pretty;
}

/* --- список підрозділів --- */

.am-hub2__list {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.am-hub2__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--h2-line-soft);
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.am-hub2__item:hover {
	color: var(--h2-accent);
}

.am-hub2__item-name {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-right: auto;
}

.am-hub2__item-count {
	font-size: 12.5px;
	color: var(--h2-faint);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.am-hub2__item-arrow {
	font-size: 12px;
	color: #c8c8c2;
}

.am-hub2__all {
	align-self: flex-start;
	padding: 12px 22px;
	border-radius: 13px;
	background: var(--h2-ink);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.am-hub2__all:hover {
	background: var(--h2-accent);
	color: #ffffff;
}

/* --- бренди --- */

.am-hub2__brands {
	grid-column: 1 / -1;
	margin-top: 22px;
	background: var(--h2-card);
	border: 1px solid var(--h2-line);
	border-radius: 24px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
}

.am-hub2__brands-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--h2-dim);
	white-space: nowrap;
	text-transform: uppercase;
}

.am-hub2__brands-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.am-hub2__brand {
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--h2-line);
	font-size: 13px;
	font-weight: 600;
	color: #4a4a46;
	text-decoration: none;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.am-hub2__brand:hover {
	border-color: var(--h2-ink);
	color: var(--h2-ink);
}

@media (max-width: 720px) {
	.am-hub2__intro h1 {
		font-size: 32px;
	}

	.am-hub2__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.am-hub2__body {
		padding: 22px 20px 20px;
	}

	.am-hub2__shot {
		height: 172px;
	}

	.am-hub2__brands {
		padding: 20px;
	}
}

/* --- мозаїка фото розділу ---------------------------------- */

.am-hub2__mosaic {
	position: absolute;
	inset: 0;
	display: grid;
	gap: 0;
	padding: 14px 14px 14px 74px;
}

.am-hub2__mosaic--1 { grid-template-columns: 1fr; }
.am-hub2__mosaic--2 { grid-template-columns: 1fr 1fr; }
.am-hub2__mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.am-hub2__mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.am-hub2__cell {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
}

/* Товар показуємо цілком: на знімках предмет по центру, і обрізання
   по краях різало б його навпіл. */
.am-hub2__cell img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/*
 * Одне фото: розмір рахуємо від самої комірки. Відсоток max-height у
 * вкладеній сітці не резолвиться, і квадратне фото виходило вищим за блок —
 * ноутбук обрізало знизу. Абсолютне позиціювання дає комірці точну висоту,
 * а object-fit вписує кадр цілим.
 */
.am-hub2__mosaic--1 .am-hub2__cell { position: relative; }

.am-hub2__mosaic--1 .am-hub2__cell img {
	position: absolute;
	top: 6%;
	left: 13%;
	width: 74%;
	height: 88%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}
.am-hub2__mosaic--2 .am-hub2__cell img { max-height: 92%; }

/*
 * Власна картинка категорії з адмінки: це вже готовий кадр, а не фото товару
 * на білому, тому кадруємо його на весь блок замість вписування з полями.
 */
.am-hub2__mosaic--own {
	padding: 0;
	display: block;
}

.am-hub2__mosaic--own .am-hub2__cell {
	display: block;
	width: 100%;
	height: 100%;
}

.am-hub2__mosaic--own .am-hub2__cell img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	mix-blend-mode: normal;
}

/* -------------------------------------------------------------------------
 * am-track__input-hard-hide
 *
 * На iOS Safari поверх власних ручок проступав системний бігунок: він шириною
 * 28px, тож на краях доріжки лягав із зсувом у 14px - звідси «подвійні кружки».
 * Прозорого фону там виявилося замало, тому ховаємо його непрозорістю: тягнути
 * повзунок це не заважає, área дотику лишається.
 * ---------------------------------------------------------------------- */

body.am-body .am-track__input::-webkit-slider-thumb {
	opacity: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

body.am-body .am-track__input::-moz-range-thumb {
	opacity: 0;
	box-shadow: none;
}

body.am-body .am-track__input::-webkit-slider-runnable-track {
	border: 0;
	background: transparent;
}

body.am-body .am-track__input::-moz-range-track {
	border: 0;
	background: transparent;
}

/* --- картка розділу без підрозділів --- */

/*
 * Порожній список підрозділів не має розтягувати картку: `flex: 1` лишав
 * під заголовком порожнє поле у висоту найдовшої картки ряду.
 */
.am-hub2__list:empty {
	display: none;
}

/* Картки тягнуться по своєму вмісту, а не по найвищій у ряду. */
.am-hub2__grid {
	align-items: start;
}

/* --- вступний текст категорії --- */

.am-cat-intro {
	margin-block: 2px 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--am-muted);
}

.am-cat-intro p {
	max-width: 74ch;
	margin: 0 0 12px;
}

.am-cat-intro p:last-child {
	margin-bottom: 0;
}

/* --- розгорнутий текст під каталогом --- */

/*
 * max-width — на тексті всередині, а не на секції: .am-container центрує
 * себе через margin auto, і вузька секція з'їжджала в середину сторінки.
 */
.am-seo-text {
	margin-block: 28px 56px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--am-muted);
}

.am-seo-text__item {
	max-width: 78ch;
}

/* Кілька розділів — картки в ряд (18.09.2026). */
.am-seo-text--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.am-seo-text--cards .am-seo-text__item {
	max-width: none;
	padding: 22px 24px;
	border: 1px solid var(--am-border, #ececea);
	border-radius: var(--am-r-xl, 18px);
	background: var(--am-surface, #fff);
	font-size: 14.5px;
	line-height: 1.65;
}

.am-seo-text--cards h2 {
	margin-top: 0;
	font-size: 17px;
	line-height: 1.3;
}

.am-seo-text--cards .am-seo-text__item > :last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.am-seo-text--cards {
		gap: 12px;
	}

	.am-seo-text--cards .am-seo-text__item {
		padding: 18px;
		border-radius: var(--am-r-lg, 14px);
	}
}

.am-seo-text h2 {
	margin: 26px 0 10px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--am-ink, #14181c);
}

.am-seo-text h2:first-child {
	margin-top: 0;
}

.am-seo-text p {
	margin: 0 0 14px;
}

.am-seo-text ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.am-seo-text li {
	margin-bottom: 6px;
}

/* --- текст категорії під листингом --- */

/*
 * max-width стоїть на абзацах, а не на секції: .am-container центрує себе
 * через margin auto, і вузька секція з'їжджала в середину, замість того щоб
 * стояти в одну лінію із заголовком і листингом.
 */
.am-cat-text {
	margin-block: 40px 12px;
	padding-top: 24px;
	border-top: 1px solid #e6e6e3;
	font-size: 15px;
	line-height: 1.7;
	color: var(--am-muted);
}

.am-cat-text p,
.am-cat-text ul {
	max-width: 76ch;
	margin: 0 0 14px;
}

.am-cat-text p:last-child {
	margin-bottom: 0;
}

.am-cat-text h2 {
	margin: 24px 0 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #14181c;
}

.am-cat-text h2:first-child {
	margin-top: 0;
}

/* --- артикул у картці каталогу ---------------------------- */

.am-ccard__sku {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin-top: -2px;
	overflow: hidden;
	color: var(--am-faint);
	font-size: 12.5px;
	line-height: 17px;
	height: 17px;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.am-ccard__sku {
		font-size: 11.5px;
		gap: 6px;
		line-height: 15px;
		height: 15px;
	}

}

/* ---------- /shop/: усі категорії ---------- */

.am-shophub .am-hub2__shot {
	text-decoration: none;
}

.am-shophub__name {
	display: flex;
	align-items: center;
	gap: 9px;
}

.am-shophub__name a {
	color: inherit;
	text-decoration: none;
}

.am-shophub__name a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.am-shophub__icon {
	flex: none;
	width: 20px;
	height: 20px;
	opacity: 0.85;
}

/* Опис у картці огляду — не більше двох рядків, щоб ряди були рівні. */
.am-shophub .am-hub2__lead {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Три фото в ряд: вертикальні знімки телефонів у чотирьох ячейках
   ставали смужками. */
.am-shophub .am-hub2__mosaic--3 {
	gap: 6px;
}

.am-shophub .am-hub2__mosaic--3 .am-hub2__cell img {
	max-height: 92%;
}

/* Порожня категорія: замість фото — іконка розділу. */
.am-shophub__bigicon {
	width: 56px;
	height: 56px;
	opacity: 0.35;
}

.am-shophub__none {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--h2-muted, #8b9098);
}

.am-shophub__none a {
	color: var(--h2-ink, #111214);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* --- картка каталогу на головній ------------------------------ */

/*
 * На головній картка лежить у комірці сітки (через неї працюють вкладки),
 * тож сама по висоті не тягнеться: кнопки в сусідніх картках стояли б
 * на різній висоті. Розтягуємо картку на всю комірку, ціну й кнопки
 * притискаємо донизу. Приховані вкладкою комірки не чіпаємо — інакше
 * display:flex перебив би [hidden] і фільтр перестав би ховати.
 */
#am-pop-grid .am-grid__cell:not([hidden]) {
	display: flex;
}

#am-pop-grid .am-grid__cell > .am-ccard {
	flex: 1;
}

#am-pop-grid .am-ccard__price {
	margin-top: auto;
}


/* === три стани наявності: картки каталогу ============================ */

.am-ccard__stock {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

.am-ccard__stock--in {
	color: oklch(0.5 0.13 155);
}

.am-ccard__stock--pre {
	color: oklch(0.55 0.14 65);
}

.am-ccard__stock--out {
	color: #c9372c;
}

body.am-body .am-ccard__buy--call {
	border-color: #d9d9d4;
	color: #35352f;
}

/* === картка каталогу на телефоні: кнопки не виходять за край ===========
   У сітці з двох колонок на картку лишається ~150 px. «Купити» + порівняння
   + обране не вміщувались: кнопка не стискається нижче свого тексту (у всіх
   кнопок заборонено перенос), і ряд вилазив за межі картки. */
@media (max-width: 640px) {
	/* Серце вже є на фото — друге в ряду дублює його і з'їдає 47 px. */
	body.am-body .am-ccard__actions .am-ctool[data-am-fav] {
		display: none;
	}

	body.am-body .am-ccard__actions {
		gap: 6px;
		min-width: 0;
	}

	body.am-body .am-ccard__buy {
		min-width: 0;
		padding-inline: 8px;
	}

	/* Довгі написи займають весь ряд, а порівняння ховається. */
	body.am-body .am-ccard__buy--pre,
	body.am-body .am-ccard__buy--call {
		flex: 1 1 100%;
	}

	body.am-body .am-ccard__buy--pre ~ .am-ctool,
	body.am-body .am-ccard__buy--call ~ .am-ctool {
		display: none;
	}
}

/* Найвужчі екрани (iPhone SE, збільшений режим): довгий напис переноситься. */
@media (max-width: 400px) {
	/* Ряд у селекторі — щоб перебити загальне скидання min-height для .am-btn в app.css. */
	body.am-body .am-ccard__actions .am-ccard__buy--pre,
	body.am-body .am-ccard__actions .am-ccard__buy--call {
		height: auto;
		min-height: 40px;
		padding-block: 6px;
		line-height: 1.15;
		white-space: normal;
		text-align: center;
	}
}

/* === фільтри: бокова панель зліва замість нижньої шторки ===============
   Шторка на всю ширину закривала сторінку й виїжджала знизу. Тепер панель
   завширшки з самі фільтри виїжджає зліва, праворуч лишається затемнена
   сторінка — тап по ній закриває панель, як і раніше. JS не змінювався:
   він так само перемикає клас .is-open. */
@media (max-width: 1024px) {
	.am-filters {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: min(380px, 88vw);
		max-height: none;
		padding: 0 16px 16px;
		padding-bottom: max(16px, env(safe-area-inset-bottom));
		border-radius: 0 22px 22px 0;
		box-shadow: 24px 0 60px -20px rgba(17, 18, 20, 0.4);
		overscroll-behavior: contain;
		transform: translateX(-105%);
		transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.am-filters.is-open {
		transform: translateX(0);
	}

	/* «Ручка» потрібна лише шторці, яку тягнуть униз. */
	.am-filters__handle {
		display: none;
	}

	.am-filters__sheet-head {
		padding-top: max(16px, env(safe-area-inset-top));
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.am-filters {
		transition: none;
	}
}

/* === Планшет: три картки в ряд ======================================== */
@media (min-width: 721px) and (max-width: 1024px) {
	.am-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

/* Планшет: у картці 225 px кнопка й дві іконки не вміщались (222 > 200).
   Серце вже є на фото, як і на телефоні, тож у рядку дій лишаємо порівняння. */
@media (min-width: 721px) and (max-width: 1024px) {
	.am-ccard__actions .am-ctool[data-am-fav] {
		display: none;
	}

	.am-ccard__actions .am-btn {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* =====================================================================
 * Картка товару v2 — макет «Product Cards» (17.09.2026).
 * Класична картка (.am-ccard без --v2) вище лишається без змін: її
 * повертає опція am_card_design = classic. Усі правила тут — лише для
 * .am-ccard--v2, з body.am-body, щоб перебити класичні.
 * ===================================================================== */

body.am-body .am-ccard--v2 {
	--v2-ink: #111114;
	--v2-muted: #6c6c78;
	--v2-line: #ededea;
	--v2-ctl: #e4e4e1;
	--v2-dark: #17171b;
	--v2-dark-hover: #2e2e36;
	--v2-in: oklch(0.5 0.14 148);
	--v2-soon: oklch(0.58 0.18 48);
	--v2-soon-hover: oklch(0.63 0.18 48);
	--v2-pre: oklch(0.6 0.13 75);
	--v2-out: #8b8b94;
	--v2-new: oklch(0.52 0.19 262);
	--v2-hit: oklch(0.58 0.2 28);
	--v2-img: 300px;

	gap: 0;
	padding: 16px;
	border: 1px solid var(--v2-line);
	border-radius: 18px;
	background: #fff;
	color: var(--v2-ink);
	box-shadow: none;
}

body.am-body .am-ccard--v2:hover {
	border-color: #dcdcd7;
	box-shadow: 0 10px 30px -18px rgba(17, 17, 20, 0.28);
}

/* Фото на всю ширину картки, без внутрішньої рамки. */
body.am-body .am-ccard--v2 .am-ccard__media {
	height: var(--v2-img);
	margin: -16px -16px 0;
	border: 0;
	border-radius: 18px 18px 0 0;
	background: transparent;
}

body.am-body .am-ccard--v2 .am-ccard__media img {
	padding: 12px;
}

body.am-body .am-ccard--v2 .am-badge {
	top: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 9px;
	font: 600 11px/1 var(--am-font);
	letter-spacing: 0.06em;
	color: #fff;
}

body.am-body .am-ccard--v2 .am-badge--new {
	background: var(--v2-new);
}

body.am-body .am-ccard--v2 .am-badge--hit {
	background: var(--v2-hit);
}

body.am-body .am-ccard--v2 .am-ccard__tools {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

body.am-body .am-ccard--v2 :is(.am-ccard__fav, .am-ccard__cmp) {
	position: static;
	width: 38px;
	height: 38px;
	min-height: 0;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--v2-ctl);
	border-radius: 50%;
	background: #fff;
	color: #1c1c20;
	cursor: pointer;
	text-transform: none;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

body.am-body .am-ccard--v2 :is(.am-ccard__fav, .am-ccard__cmp):hover {
	border-color: var(--v2-dark);
	color: var(--v2-dark);
}

body.am-body .am-ccard--v2 :is(.am-ccard__fav, .am-ccard__cmp):focus-visible {
	outline: 2px solid var(--v2-new);
	outline-offset: 2px;
}

body.am-body .am-ccard--v2 .am-ccard__fav[aria-pressed="true"] {
	border-color: #e0245e;
	color: #e0245e;
}

body.am-body .am-ccard--v2 .am-ccard__fav[aria-pressed="true"] svg {
	fill: currentColor;
}

body.am-body .am-ccard--v2 .am-ccard__cmp[aria-pressed="true"] {
	border-color: var(--v2-dark);
	background: var(--v2-dark);
	color: #fff;
}

/* Плашка наявності й код. */
body.am-body .am-ccard--v2 .am-ccard__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 12px 0 12px;
}

body.am-body .am-ccard--v2 .am-ccard__chip {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 9px;
	color: #fff;
	font: 600 11px/1 var(--am-font);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

body.am-body .am-ccard--v2 .am-ccard__chip--in {
	background: var(--v2-in);
}

body.am-body .am-ccard--v2 .am-ccard__chip--soon {
	background: var(--v2-soon);
}

body.am-body .am-ccard--v2 .am-ccard__chip--pre {
	background: var(--v2-pre);
}

body.am-body .am-ccard--v2 .am-ccard__chip--out {
	background: var(--v2-out);
}

body.am-body .am-ccard--v2 .am-ccard__sku {
	display: inline-flex;
	gap: 6px;
	height: auto;
	margin: 0;
	color: var(--v2-muted);
	font: 500 13px/1.3 var(--am-font);
}

body.am-body .am-ccard--v2 .am-ccard__sku[hidden] {
	display: none;
}

body.am-body .am-ccard--v2 [data-am-csku] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.02em;
}

body.am-body .am-ccard--v2 .am-ccard__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 16px;
	color: var(--v2-ink);
	font: 500 17px/1.35 var(--am-font);
	letter-spacing: 0;
	text-wrap: pretty;
}

body.am-body .am-ccard--v2 .am-ccard__name:hover {
	color: #3b6ef2;
}

body.am-body .am-ccard--v2 :is(.am-ccard__colors, .am-ccard__mems) {
	margin-bottom: 12px;
}

body.am-body .am-ccard--v2 .am-ccard__price {
	align-items: baseline;
	gap: 4px 10px;
	margin: auto 0 14px;
}

body.am-body .am-ccard--v2 .am-ccard__now {
	font: 600 21px/1 var(--am-font);
	letter-spacing: -0.015em;
	color: var(--v2-ink);
}

body.am-body .am-ccard--v2 .am-ccard__usd {
	color: var(--v2-muted);
	font: 500 14px/1 var(--am-font);
}

body.am-body .am-ccard--v2 .am-ccard__actions {
	display: flex;
	gap: 10px;
}

body.am-body .am-ccard--v2 .am-ccard__buy {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	min-height: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 13px;
	background: var(--v2-dark);
	color: #fff;
	font: 500 15px/1 var(--am-font);
	text-transform: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

body.am-body .am-ccard--v2 .am-ccard__buy:hover {
	background: var(--v2-dark-hover);
	color: #fff;
}

body.am-body .am-ccard--v2 .am-ccard__buy--pre {
	background: var(--v2-soon);
}

body.am-body .am-ccard--v2 .am-ccard__buy--pre:hover {
	background: var(--v2-soon-hover);
}

body.am-body .am-ccard--v2 .am-ccard__buy--call {
	border: 1px solid #d9d9d4;
	background: #fff;
	color: #35352f;
}

body.am-body .am-ccard--v2 .am-ccard__buy--call:hover {
	border-color: var(--v2-dark);
	background: #fff;
	color: var(--v2-dark);
}

body.am-body .am-ccard--v2 .am-ccard__buy:focus-visible {
	outline: 2px solid var(--v2-new);
	outline-offset: 2px;
}

/* Планшет: три картки в ряд по ~225 px. */
@media (min-width: 721px) and (max-width: 1024px) {
	body.am-body .am-ccard--v2 {
		--v2-img: 240px;
	}
}

/* Телефон: дві картки в ряд по ~160 px. */
@media (max-width: 640px) {
	body.am-body .am-ccard--v2 {
		--v2-img: 170px;
		padding: 8px;
		border-radius: 14px;
	}

	body.am-body .am-ccard--v2 .am-ccard__media {
		margin: -8px -8px 0;
		border-radius: 14px 14px 0 0;
	}

	body.am-body .am-ccard--v2 .am-ccard__media img {
		padding: 4px;
	}

	body.am-body .am-ccard--v2 .am-badge {
		top: 6px;
		left: 6px;
		height: 22px;
		padding: 0 8px;
		border-radius: 7px;
		font-size: 10px;
	}

	body.am-body .am-ccard--v2 .am-ccard__tools {
		top: 6px;
		right: 6px;
	}

	body.am-body .am-ccard--v2 :is(.am-ccard__fav, .am-ccard__cmp) {
		width: 32px;
		height: 32px;
	}

	body.am-body .am-ccard--v2 :is(.am-ccard__fav, .am-ccard__cmp) svg {
		width: 18px;
		height: 18px;
	}

	body.am-body .am-ccard--v2 .am-ccard__meta {
		gap: 4px 6px;
		margin: 6px 0;
	}

	body.am-body .am-ccard--v2 .am-ccard__chip {
		height: 22px;
		padding: 0 8px;
		border-radius: 7px;
		font-size: 10px;
	}

	body.am-body .am-ccard--v2 .am-ccard__sku {
		font-size: 11.5px;
	}

	body.am-body .am-ccard--v2 .am-ccard__name {
		margin-bottom: 6px;
		font-size: 14px;
		line-height: 1.3;
	}

	body.am-body .am-ccard--v2 :is(.am-ccard__colors, .am-ccard__mems) {
		margin-bottom: 8px;
	}

	body.am-body .am-ccard--v2 .am-ccard__price {
		gap: 2px 6px;
		margin-bottom: 8px;
	}

	body.am-body .am-ccard--v2 .am-ccard__now {
		font-size: 17px;
	}

	body.am-body .am-ccard--v2 .am-ccard__usd {
		font-size: 12.5px;
	}

	body.am-body .am-ccard--v2 .am-ccard__buy {
		height: 38px;
		border-radius: 10px;
		font-size: 13.5px;
		padding: 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.am-body .am-ccard--v2,
	body.am-body .am-ccard--v2 * {
		transition: none;
	}
}

/* =====================================================================
 * Картка товару v4 — макет «Product Cards v4» (18.09.2026).
 * Класична (.am-ccard) і v2 (.am-ccard--v2) вище не змінені. Вигляд v4
 * залежить від ширини самої картки (container queries):
 *   ≥ 381 px — повний підпис кнопки, як у макеті для комп'ютера;
 *   241–380 px — короткий підпис («Замовити», «Дзвінок»): сітка сайту
 *     по 3–4 картки в ряд, повний «Передзамовити» поруч із ціною не влазить;
 *   ≤ 240 px — макет для телефона: фото 150 px, кнопка-значок, без коду.
 * ===================================================================== */

body.am-body .am-ccard--v4 {
	--v4-ink: #111114;
	--v4-muted: #8e8e88;
	--v4-line: #ededea;
	--v4-dark: #17171b;
	--v4-in: oklch(0.5 0.14 148);
	--v4-soon: oklch(0.58 0.18 48);
	--v4-pre: oklch(0.6 0.13 75);
	--v4-new: oklch(0.52 0.19 262);
	--v4-hit: oklch(0.58 0.2 28);

	container-type: inline-size;
	container-name: amcard;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--v4-line);
	border-radius: 22px;
	background: #fff;
	color: var(--v4-ink);
	box-shadow: none;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.am-body .am-ccard--v4:hover {
	border-color: var(--v4-line);
	box-shadow: 0 22px 44px -26px rgba(17, 17, 20, 0.28);
}

body.am-body .am-ccard--v4 .am-ccard__media {
	position: relative;
	height: 280px;
	margin: 0;
	padding: 18px;
	border: 0;
	border-radius: 0;
	background: #fff;
}

body.am-body .am-ccard--v4 .am-ccard__media img {
	padding: 0;
}

body.am-body .am-ccard--v4 .am-ccard__flags {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

body.am-body .am-ccard--v4 .am-ccard__flag {
	display: flex;
	align-items: center;
	height: 26px;
	padding: 0 11px;
	border-radius: 8px;
	color: #fff;
	font: 600 11px/1 var(--am-font);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

body.am-body .am-ccard--v4 .am-ccard__flag--new,
body.am-body .am-ccard--v4 .am-ccard__flag--hit {
	font-weight: 700;
	letter-spacing: 0.08em;
}

body.am-body .am-ccard--v4 .am-ccard__flag--new {
	background: var(--v4-new);
}

body.am-body .am-ccard--v4 .am-ccard__flag--hit {
	background: var(--v4-hit);
}

body.am-body .am-ccard--v4 .am-ccard__flag--soon {
	background: var(--v4-soon);
}

body.am-body .am-ccard--v4 .am-ccard__flag--pre {
	background: var(--v4-pre);
}

body.am-body .am-ccard--v4 .am-ccard__tools {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.am-body .am-ccard--v4 :is(.am-ccard__fav, .am-ccard__cmp) {
	position: static;
	width: 38px;
	height: 38px;
	min-height: 0;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1c1c20;
	box-shadow: 0 6px 16px -10px rgba(17, 17, 20, 0.5);
	cursor: pointer;
	text-transform: none;
	transition: color 0.18s ease, background-color 0.18s ease;
}

body.am-body .am-ccard--v4 .am-ccard__fav:hover {
	color: oklch(0.55 0.2 22);
}

body.am-body .am-ccard--v4 .am-ccard__cmp:hover {
	color: #3b6ef2;
}

body.am-body .am-ccard--v4 .am-ccard__fav[aria-pressed="true"] {
	color: oklch(0.55 0.2 22);
}

body.am-body .am-ccard--v4 .am-ccard__fav[aria-pressed="true"] svg {
	fill: currentColor;
}

body.am-body .am-ccard--v4 .am-ccard__cmp[aria-pressed="true"] {
	background: var(--v4-dark);
	color: #fff;
}

body.am-body .am-ccard--v4 :is(.am-ccard__fav, .am-ccard__cmp, .am-ccard__buy, .am-ccard__name):focus-visible {
	outline: 2px solid var(--v4-new);
	outline-offset: 2px;
}

body.am-body .am-ccard--v4 .am-ccard__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 18px 18px;
}

body.am-body .am-ccard--v4 .am-ccard__sku {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	height: auto;
	margin: 0 0 12px;
	color: var(--v4-muted);
	font: 500 12px/1.3 var(--am-font);
}

body.am-body .am-ccard--v4 .am-ccard__sku[hidden] {
	display: none;
}

body.am-body .am-ccard--v4 [data-am-csku] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.am-body .am-ccard--v4 .am-ccard__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--v4-ink);
	font: 500 16px/1.4 var(--am-font);
	letter-spacing: 0;
}

body.am-body .am-ccard--v4 .am-ccard__name:hover {
	color: #3b6ef2;
}

body.am-body .am-ccard--v4 :is(.am-ccard__colors, .am-ccard__mems) {
	margin-top: 12px;
}

body.am-body .am-ccard--v4 .am-ccard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

body.am-body .am-ccard--v4 .am-ccard__price {
	container-type: inline-size;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	width: auto;
	margin: 0;
}

body.am-body .am-ccard--v4 .am-ccard__usdrow {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

body.am-body .am-ccard--v4 .am-ccard__usdrow[hidden] {
	display: none;
}

body.am-body .am-ccard--v4 .am-ccard__usd {
	margin: 0;
	color: var(--v4-muted);
	font: 500 13px/1 var(--am-font);
	white-space: nowrap;
}

body.am-body .am-ccard--v4 .am-ccard__old {
	padding: 0;
	color: var(--v4-muted);
	font: 500 13px/1 var(--am-font);
	text-decoration: line-through;
	white-space: nowrap;
}

body.am-body .am-ccard--v4 .am-ccard__now {
	overflow: hidden;
	color: var(--v4-ink);
	font: 700 23px/1 var(--am-font);
	letter-spacing: -0.02em;
	white-space: nowrap;
}

body.am-body .am-ccard--v4 .am-ccard__soldout {
	color: #6c6c78;
	font: 600 16px/1.25 var(--am-font);
}

body.am-body .am-ccard--v4 .am-ccard__buy {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-height: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 14px;
	background: var(--v4-dark);
	color: #fff;
	font: 600 15px/1 var(--am-font);
	text-transform: none;
	white-space: nowrap;
	transition: filter 0.18s ease;
}

body.am-body .am-ccard--v4 .am-ccard__buy:hover {
	color: #fff;
	filter: brightness(1.12);
}

body.am-body .am-ccard--v4 .am-ccard__buy--pre {
	background: var(--v4-soon);
}

body.am-body .am-ccard--v4 .am-ccard__buy--call {
	border: 1px solid var(--v4-dark);
	background: #fff;
	color: var(--v4-dark);
}

body.am-body .am-ccard--v4 .am-ccard__buy--call:hover {
	color: var(--v4-dark);
	filter: none;
	background: #f4f4f2;
}

body.am-body .am-ccard--v4 :is(.am-ccard__buy-short, .am-ccard__buy-icon) {
	display: none;
}

body.am-body .am-ccard--v4 .am-ccard__buy-icon svg {
	display: block;
}

/* Середня картка (сітка по 3–4 в ряд): короткий підпис кнопки. */
@container amcard (max-width: 380px) {
	body.am-body .am-ccard--v4 .am-ccard__buy {
		padding: 0 16px;
	}

	body.am-body .am-ccard--v4 .am-ccard__buy-full {
		display: none;
	}

	body.am-body .am-ccard--v4 .am-ccard__buy-short {
		display: inline;
	}

	body.am-body .am-ccard--v4 .am-ccard__now {
		font-size: clamp(17px, 17cqi, 23px);
	}
}

/* Вузька картка (телефон, планшет): макет для телефона. */
@container amcard (max-width: 240px) {
	body.am-body .am-ccard--v4 .am-ccard__media {
		height: 150px;
		padding: 12px;
	}

	body.am-body .am-ccard--v4 .am-ccard__flags {
		top: 10px;
		left: 10px;
		gap: 5px;
	}

	body.am-body .am-ccard--v4 .am-ccard__flag {
		height: 22px;
		padding: 0 8px;
		border-radius: 7px;
		font-size: 10px;
	}

	body.am-body .am-ccard--v4 .am-ccard__tools {
		top: 8px;
		right: 8px;
		gap: 6px;
	}

	body.am-body .am-ccard--v4 :is(.am-ccard__fav, .am-ccard__cmp) {
		width: 34px;
		height: 34px;
		border: 1px solid var(--v4-line);
		box-shadow: none;
	}

	body.am-body .am-ccard--v4 :is(.am-ccard__fav, .am-ccard__cmp) svg {
		width: 18px;
		height: 18px;
	}

	body.am-body .am-ccard--v4 .am-ccard__body {
		padding: 12px 12px 14px;
	}

	body.am-body .am-ccard--v4 .am-ccard__sku {
		display: none;
	}

	body.am-body .am-ccard--v4 .am-ccard__name {
		font-size: 13px;
		line-height: 1.35;
	}

	body.am-body .am-ccard--v4 :is(.am-ccard__colors, .am-ccard__mems) {
		margin-top: 8px;
	}

	body.am-body .am-ccard--v4 .am-ccard__foot {
		gap: 8px;
		padding-top: 10px;
	}

	body.am-body .am-ccard--v4 .am-ccard__price {
		gap: 3px;
	}

	body.am-body .am-ccard--v4 :is(.am-ccard__usd, .am-ccard__old) {
		font-size: clamp(9px, 12cqi, 11px);
	}

	body.am-body .am-ccard--v4 .am-ccard__old {
		display: none;
	}

	body.am-body .am-ccard--v4 .am-ccard__now {
		font-size: clamp(12px, 17.5cqi, 16px);
		letter-spacing: -0.015em;
	}

	body.am-body .am-ccard--v4 .am-ccard__soldout {
		font-size: 12px;
	}

	body.am-body .am-ccard--v4 .am-ccard__buy {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 12px;
	}

	body.am-body .am-ccard--v4 :is(.am-ccard__buy-full, .am-ccard__buy-short) {
		display: none;
	}

	body.am-body .am-ccard--v4 .am-ccard__buy-icon {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.am-body .am-ccard--v4,
	body.am-body .am-ccard--v4 * {
		transition: none;
	}
}

/* --- FAQ категорії --- */
.am-faq {
	max-width: 78ch;
	margin-block: 36px 24px;
}

.am-faq__title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.am-faq__item {
	border-top: 1px solid var(--am-line, #e6e8eb);
}

.am-faq__item:last-child {
	border-bottom: 1px solid var(--am-line, #e6e8eb);
}

.am-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.am-faq__q::-webkit-details-marker {
	display: none;
}

.am-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--am-bg-2, #f2f3f5);
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	color: var(--am-ink, #14181c);
}

.am-faq__item[open] .am-faq__q::after {
	content: "–";
}

.am-faq__a {
	padding: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--am-text-2, #43474d);
}

.am-faq__a p {
	margin: 0;
}