/*
 * amarea redesign — component layer
 * Build on tokens.css + base.css. Кожен компонент — самодостатній блок.
 * Naming: префікс .am- (amarea), щоб не конфліктувати з legacy .cl_*.
 */

/* ============================================================
 *  am-button
 * ============================================================ */
.am-btn {
	--btn-bg:       var(--c-ink);
	--btn-fg:       var(--c-paper);
	--btn-bg-hover: #1A1614;
	--btn-border:   transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);

	height: 44px;
	padding-inline: var(--space-5);

	font-family: var(--font-sans);
	font-size: var(--text-ui);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-loose);
	line-height: 1;

	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: var(--radius-2);
	cursor: pointer;

	transition:
		background var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
}

.am-btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.am-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.am-btn--disabled {
	--btn-bg:       var(--c-paper-2);
	--btn-fg:       var(--c-ink);
	--btn-border:   var(--c-ink);
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Variants */
.am-btn--secondary {
	--btn-bg:       transparent;
	--btn-fg:       var(--c-ink);
	--btn-bg-hover: var(--c-paper-2);
	--btn-border:   var(--c-ink);
}
.am-btn--ghost {
	--btn-bg:       transparent;
	--btn-fg:       var(--c-ink);
	--btn-bg-hover: var(--c-paper-2);
	--btn-border:   transparent;
}
.am-btn--accent {
	--btn-bg:       var(--c-accent);
	--btn-fg:       var(--c-ink);
	--btn-bg-hover: #C9876A;
}

/* Sizes */
.am-btn--sm { height: 36px; padding-inline: var(--space-4); font-size: var(--text-micro); }
.am-btn--lg { height: 52px; padding-inline: var(--space-6); }

/* Icon-only */
.am-btn--icon {
	width: 44px; padding: 0;
	border-radius: var(--radius-circle);
}

/* ============================================================
 *  am-input
 * ============================================================ */
.am-input {
	display: block;
	width: 100%;
	height: 44px;
	padding-inline: var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	color: var(--c-ink);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-1);
	transition: border-color var(--duration-fast) var(--ease-out);
}
.am-input::placeholder { color: var(--c-ink-soft); }
.am-input:hover  { border-color: var(--c-ink-soft); }
.am-input:focus  { border-color: var(--c-ink); outline: none; box-shadow: var(--shadow-focus); }
.am-input[aria-invalid="true"] { border-color: var(--c-sale); }

.am-label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--text-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

/* ============================================================
 *  am-badge (sale tag, "new", "low stock")
 * ============================================================ */
.am-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 24px;
	padding-inline: var(--space-3);
	font-size: var(--text-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent-ink);
}
.am-badge--sale    { background: var(--c-sale);    color: var(--c-paper); }
.am-badge--new     { background: var(--c-ink);     color: var(--c-paper); }
.am-badge--success { background: var(--c-success); color: var(--c-paper); }
.am-badge--warn    { background: var(--c-warning); color: var(--c-paper); }

/* ============================================================
 *  am-chip (filter-chip, sort-chip)
 * ============================================================ */
.am-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 36px;
	padding-inline: var(--space-4);
	font-size: var(--text-ui);
	font-weight: var(--fw-medium);
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-out);
}
.am-chip:hover { border-color: var(--c-ink); }
.am-chip[aria-pressed="true"],
.am-chip.is-active {
	background: var(--c-ink);
	color: var(--c-paper);
	border-color: var(--c-ink);
}

/* ============================================================
 *  am-swatch (color swatch in size/color selector)
 * ============================================================ */
.am-swatch {
	display: inline-block;
	width: 28px; height: 28px;
	border-radius: var(--radius-circle);
	background: var(--c-line);
	border: 1px solid var(--c-line);
	cursor: pointer;
	transition: box-shadow var(--duration-fast) var(--ease-out);
}
.am-swatch:hover { box-shadow: 0 0 0 1px var(--c-paper), 0 0 0 2px var(--c-ink-soft); }
.am-swatch[aria-pressed="true"],
.am-swatch.is-active { box-shadow: 0 0 0 1px var(--c-paper), 0 0 0 2px var(--c-ink); }

/* ============================================================
 *  am-card · product card (catalog grid)
 * ============================================================ */
.am-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	cursor: pointer;
	transition: transform var(--duration-base) var(--ease-out);
}
.am-card:hover { transform: translateY(-2px); }

.am-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--c-paper-2);
	border-radius: var(--radius-0); /* sharp, повна довжина */
}
.am-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: opacity var(--duration-base) var(--ease-out);
}
.am-card__media .am-card__img-hover {
	position: absolute; inset: 0;
	opacity: 0;
}
.am-card:hover .am-card__img-hover { opacity: 1; }

.am-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
}

.am-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-top: var(--space-3);
}

.am-card__title {
	font-size: var(--text-body);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.am-card__brand {
	font-size: var(--text-body-s);
	color: var(--c-ink-soft);
}

.am-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: var(--space-1);
	font-variant-numeric: tabular-nums;
}
.am-card__price-now { font-size: var(--text-body); font-weight: var(--fw-medium); }
.am-card__price-old { font-size: var(--text-body-s); color: var(--c-ink-soft); text-decoration: line-through; }

.am-card__swatches {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-2);
}
.am-card__swatches .am-swatch { width: 16px; height: 16px; cursor: default; }

/* ============================================================
 *  am-drawer (cart drawer, filter drawer на мобілці)
 * ============================================================ */
.am-drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(43, 38, 36, 0.40);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-in-out);
	z-index: var(--z-drawer);
}
.am-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.am-drawer {
	position: fixed;
	top: 0; right: 0;
	height: 100vh;
	width: min(440px, 100vw);
	background: var(--c-paper);
	transform: translateX(100%);
	transition: transform var(--duration-base) var(--ease-in-out);
	box-shadow: var(--shadow-3);
	z-index: calc(var(--z-drawer) + 1);
	display: flex;
	flex-direction: column;
}
.am-drawer.is-open { transform: translateX(0); }

.am-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5);
	border-bottom: 1px solid var(--c-line);
}
.am-drawer__body { flex: 1; padding: var(--space-5); overflow-y: auto; }
.am-drawer__footer { padding: var(--space-5); border-top: 1px solid var(--c-line); }

/* ============================================================
 *  am-cart-pop · висувний кошик (AM-35)
 *  cms7.js робить append .cl_basket_all у body на клік по іконці кошика;
 *  блок видимий одразу (не потребує is-open). Закриття = reload (cms7).
 *  .cl_basket_all = backdrop, .cl_basket_slide = права панель.
 * ============================================================ */
.am-cart-pop {
	position: fixed;
	inset: 0;
	background: rgba(43, 38, 36, 0.40);
	z-index: var(--z-drawer);
	animation: am-cart-pop-fade var(--duration-base) var(--ease-out);
}
@keyframes am-cart-pop-fade { from { opacity: 0; } to { opacity: 1; } }

.am-cart-pop__panel {
	position: absolute;
	top: 0; right: 0;
	height: 100vh;
	height: 100dvh; /* iOS Safari: 100vh ховає footer з кнопкою під нижній тулбар; dvh враховує його */
	width: min(440px, 100vw);
	background: var(--c-paper);
	box-shadow: var(--shadow-3);
	display: flex;
	flex-direction: column;
	animation: am-cart-pop-slide var(--duration-base) var(--ease-in-out);
}
@keyframes am-cart-pop-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.am-cart-pop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5);
	border-bottom: 1px solid var(--c-line);
}
.am-cart-pop__title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	color: var(--c-ink);
}
.am-cart-pop__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--radius-circle);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out);
}
.am-cart-pop__close:hover { background: var(--c-paper-2); }

.am-cart-pop__body { flex: 1; padding: var(--space-5); overflow-y: auto; }
.am-cart-pop__body--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	color: var(--c-ink-soft);
}
.am-cart-pop__empty-ic { color: var(--c-ink-soft); }
.am-cart-pop__empty-text { margin: 0; font-size: var(--text-body); }

.am-cart-pop__list { list-style: none; margin: 0; padding: 0; }

.am-cart-pop__item {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--c-line);
}
.am-cart-pop__item:first-child { padding-top: 0; }

.am-cart-pop__thumb {
	position: relative;
	flex: none;
	width: 72px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--c-paper-2);
	border-radius: var(--radius-1);
}
.am-cart-pop__thumb img { width: 100%; height: 100%; object-fit: cover; }

.am-cart-pop__complect { display: flex; gap: var(--space-2); flex: none; }

.am-cart-pop__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.am-cart-pop__name {
	font-size: var(--text-body-s);
	color: var(--c-ink);
	line-height: var(--lh-body);
}
.am-cart-pop__name:hover { text-decoration: underline; }
.am-cart-pop__unit { font-size: var(--text-micro); color: var(--c-ink-soft); }
.am-cart-pop__unit .cl_old_price { text-decoration: line-through; margin-right: var(--space-1); }

.am-cart-pop__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-2);
}
.am-cart-pop__qty input {
	width: 64px;
	height: 36px;
	padding-inline: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-body-s);
	text-align: center;
	color: var(--c-ink);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-1);
}
.am-cart-pop__qty input:focus { border-color: var(--c-ink); outline: none; box-shadow: var(--shadow-focus); }
.am-cart-pop__sum { font-size: var(--text-body-s); font-weight: var(--fw-medium); color: var(--c-ink); white-space: nowrap; }

.am-cart-pop__del {
	flex: none;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	background: transparent;
	border: none;
	border-radius: var(--radius-circle);
	color: var(--c-ink-soft);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.am-cart-pop__del:hover { background: var(--c-paper-2); color: var(--c-sale); }

.am-cart-pop__foot {
	padding: var(--space-5);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.am-cart-pop__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.am-cart-pop__total-label {
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-ink-soft);
}
.am-cart-pop__total-sum {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	color: var(--c-ink);
}
.am-cart-pop__actions { display: flex; gap: var(--space-3); }
.am-cart-pop__actions .am-btn { flex: 1; }

/* ============================================================
 *  am-hero (homepage editorial hero)
 * ============================================================ */
.am-hero {
	position: relative;
	min-height: 60vh;
	display: grid;
	place-items: end start;
	padding: var(--space-7) var(--container-pad-mobile);
	color: var(--c-paper);
	overflow: hidden;
}
@media (min-width: 1024px) {
	.am-hero { padding: var(--space-9) var(--container-pad-desktop); min-height: 80vh; }
}
.am-hero__media {
	position: absolute; inset: 0;
	z-index: 0;
}
.am-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.am-hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(43, 38, 36, 0.45) 100%);
}
.am-hero__content { position: relative; z-index: 1; max-width: 32rem; }
.am-hero__eyebrow { margin-bottom: var(--space-3); }
.am-hero__title   { margin-bottom: var(--space-5); }

/* ─────────────────────────────────────────────────────────────────────────
 *  am-toast — нотифікація (напр. «Товар додано в кошик»). Створюється з JS
 *  (layout.js cart-feedback), стек у фіксованому host знизу по центру.
 * ───────────────────────────────────────────────────────────────────────── */
.am-toast-host {
	position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
	z-index: var(--z-toast);
	display: flex; flex-direction: column; gap: var(--space-2);
	width: max-content; max-width: calc(100vw - var(--space-5) * 2);
	pointer-events: none;
}
.am-toast {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--c-paper); color: var(--c-ink);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-3);
	font-size: var(--text-body-s);
	pointer-events: auto; cursor: pointer;
	opacity: 0; transform: translateY(12px);
	transition: opacity var(--duration-base) var(--ease-out),
	            transform var(--duration-base) var(--ease-out);
}
.am-toast.is-in { opacity: 1; transform: translateY(0); }
.am-toast__ic { flex: none; width: 18px; height: 18px; color: var(--c-success); }
.am-toast__msg { font-weight: var(--fw-medium); }
.am-toast__link {
	margin-left: var(--space-2);
	color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px;
	white-space: nowrap;
}
.am-toast__link:hover { color: var(--c-ink); }

/* пульс лічильника кошика при додаванні (layout.js) */
@keyframes am-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}
.am-header__action-count.am-bump { animation: am-bump var(--duration-base) var(--ease-out); }