/* ============================================================
 *  product-page.css — сторінка товару (AM-30)
 *  Виокремлено з redesign/product.html inline <style>.
 *  Несе ЛИШЕ product-специфічні блоки. Header / mobile-menu /
 *  footer / am-card / am-swatch / am-chip / am-btn / am-badge —
 *  у global tokens/base/components/layout.css.
 *  Cache-buster: бампай ?N у link при кожній правці.
 * ============================================================ */

/* ---------- BREADCRUMBS ---------- */
.am-breadcrumbs {
	padding: var(--space-4) 0 var(--space-3);
	font-size: var(--text-body-s); color: var(--c-ink-soft);
	display: flex; align-items: center; gap: var(--space-2);
	flex-wrap: wrap;
}
.am-breadcrumbs a { color: var(--c-ink-soft); }
.am-breadcrumbs a:hover { color: var(--c-ink); }
.am-breadcrumbs__sep { opacity: 0.5; }
.am-breadcrumbs__current { color: var(--c-ink); }

/* ---------- PRODUCT LAYOUT ---------- */
.am-product {
	display: grid; grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-8);
}
@media (min-width: 1024px) {
	.am-product {
		grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
		gap: var(--space-8);
		align-items: start;
	}
}

/* ---------- GALLERY (MagicZoom Plus + Swiper thumbs) ---------- */
/* Базовий вигляд main/thumbs/стрілок дає vendored gallery.css (1:1 з alkazar).
   Тут лише: розкладка колонки, overlay badge/fav, видимість стрілок, mobile thumbs. */
.am-gallery {
	display: flex; flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

/* main-сцена: контейнер для MagicZoom-анкора + overlay badge/fav.
   position:relative потрібен, бо badge/fav абсолютні (alkazar робив це inline). */
.product-gallery { position: relative; }

.am-gallery__badge {
	position: absolute; top: var(--space-4); left: var(--space-4);
	z-index: 4;
}
.am-gallery__fav {
	position: absolute; top: var(--space-4); right: var(--space-4);
	width: 40px; height: 40px;
	background: rgba(250, 248, 244, 0.85);
	backdrop-filter: blur(4px);
	border: 0; border-radius: var(--radius-circle);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-ink);
	transition: background var(--duration-fast) var(--ease-out);
	z-index: 4;
}
.am-gallery__fav:hover { background: var(--c-paper); }
.am-gallery__fav svg { width: 20px; height: 20px; }
.am-gallery__fav.is-active { color: var(--c-sale); }

/* Головне фото тягнемо на всю ширину холдера. MagicZoom за замовчуванням кепить
   display-зображення на його натуральний розмір (inline max-width/max-height на
   <img>), тож .mz-figure стає вужчою за холдер і центрується (margin:0 auto) —
   звідси порожні смуги зліва й справа. Знімаємо кеп (!important б'є inline):
   figure на 100% ширини, фото масштабується до неї. */
.product-gallery-main .mz-figure { width: 100%; max-width: 100%; }
.product-gallery-main .mz-figure > img {
	width: 100% !important; height: auto !important;
	max-width: none !important; max-height: none !important;
}

/* Thumb = фікс-бокс із object-fit:cover. Натуральні фото портретні 2:3 — без
   фіксованої висоти на li вони переповнюють бокс (вилазять за межі, з'являється
   паразитний скрол) і кожен прев'ю має різну висоту. Явна height на li + height:100%
   на <a>/<img> + cover дають однакові прев'ю, не спотворюючи зображення.
   (aspect-ratio тут не годиться: у column-flex min-height:auto флекс-айтема даває
   натуральній висоті фото перемогти пропорцію.) Розмір li — по брейкпоінтах нижче. */
.product-gallery-list a {
	display: block !important;
	width: 100%; height: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-1);
	transition: border-color var(--duration-fast) var(--ease-out);
}
.product-gallery-list a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-list a:hover { border-color: var(--c-ink-soft); }
/* активний прев'ю: жирніший темний бордер. box-sizing:border-box (base.css)
   гарантує, що 2px не зсувають сусідів. Перебиваємо світлий border alkazar-а. */
.product-gallery-list a.mz-thumb-selected { border: 2px solid var(--c-ink); }

/* Стрілки thumb-каруселі (горизонтальний Swiper на мобільному): ховаємо доки
   Swiper не активний (≤4 фото вміщаються). */
.product-gallery-list .slider-arrows__arrow { display: none; color: var(--c-ink); }
.product-gallery-list.has-swiper .slider-arrows__arrow { display: flex; }
.product-gallery-list .slider-arrows__arrow svg { width: 16px; height: 16px; }

/* Мобільні: thumbs горизонтально знизу; менші, щоб 4 фото без каруселі вмістились. */
@media (max-width: 1023px) {
	.product-gallery-list li { width: 84px; height: 112px; }   /* 3/4 */
}

/* Десктоп: thumbs — вертикальна колонка ЛІВОРУЧ від main; main заповнює решту
   ширини колонки (flex:1 — без порожніх смуг). Каруселі тут немає — простий
   стовпчик зі скролом; Swiper лишається тільки для мобільного. */
@media (min-width: 1024px) {
	.am-gallery {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-4);
	}
	.product-gallery { flex: 1 1 auto; min-width: 0; }   /* main = решта ширини (тонша колонка thumbs → менше main) */
	.product-gallery-list {
		order: -1;                 /* ліворуч від main (main у HTML іде першим) */
		flex: 0 0 150px;
		flex-direction: column;
		justify-content: flex-start;
		padding: 0;
		max-height: 860px;
		overflow: hidden auto;     /* вертикальний скрол якщо фото багато; без горизонтального */
		scrollbar-width: thin;
	}
	.product-gallery-list .swiper-container { width: 100%; overflow: visible; }
	.product-gallery-list .swiper-wrapper { flex-direction: column; gap: var(--space-2); }
	.product-gallery-list li { width: 150px; height: 200px; }   /* 3/4 під портретні фото */
	.product-gallery-list .slider-arrows__arrow { display: none !important; }
}

/* ---------- PRODUCT INFO ---------- */
.am-info {
	display: flex; flex-direction: column;
	gap: var(--space-4);
}
@media (min-width: 1024px) {
	.am-info {
		position: sticky;
		top: calc(var(--header-h, 120px) + var(--space-4));
		align-self: start;
		max-height: calc(100vh - var(--header-h, 120px) - var(--space-5));
		overflow-y: auto;
		padding-right: var(--space-3);
	}
	.am-info::-webkit-scrollbar { width: 4px; }
	.am-info::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 2px; }
}

.am-info__brand {
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	font-weight: var(--fw-medium);
}
.am-info__title {
	font-family: var(--font-display);
	font-size: var(--text-display-m);
	line-height: var(--lh-display-m);
	letter-spacing: var(--tracking-snug);
	font-weight: var(--fw-regular);
	margin: var(--space-1) 0 var(--space-3);
}
.am-info__meta {
	display: flex; gap: var(--space-4); flex-wrap: wrap;
	font-size: var(--text-body-s);
	color: var(--c-ink-soft);
}
.am-info__meta-item { display: flex; align-items: center; gap: var(--space-2); }
.am-info__meta-item dt { font-size: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.am-info__meta-item dd { color: var(--c-ink); }
.am-info__meta-item--success { color: var(--c-success); }
.am-info__meta-item--success::before {
	content: ""; width: 8px; height: 8px;
	background: var(--c-success); border-radius: var(--radius-circle);
}

.am-info__price {
	display: flex; align-items: baseline; gap: var(--space-3);
	padding: var(--space-3) 0;
	font-variant-numeric: tabular-nums;
	flex-wrap: wrap;
}
.am-info__price-now {
	font-size: var(--text-display-m);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
	letter-spacing: var(--tracking-snug);
	line-height: 1;
}
.am-info__price-old {
	font-size: var(--text-h2);
	color: var(--c-ink-soft);
	text-decoration: line-through;
}
.am-info__price-save {
	display: inline-flex; align-items: center;
	height: 28px; padding: 0 var(--space-3);
	background: var(--c-sale); color: var(--c-paper);
	font-size: var(--text-body-s); font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-loose);
	border-radius: var(--radius-pill);
}

.am-info__section {
	padding: var(--space-4) 0;
	border-top: 1px solid var(--c-line);
}
.am-info__section-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--space-3);
	font-size: var(--text-body-s);
	font-weight: var(--fw-medium);
}
.am-info__section-head span:first-child { color: var(--c-ink-soft); }
.am-info__section-head .am-info__section-value { color: var(--c-ink); }
.am-info__section-head a {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: var(--text-body-s);
	color: var(--c-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.am-info__section-head a:hover { color: var(--c-ink); }
.am-info__section-head a svg { width: 14px; height: 14px; }

/* Color swatches */
.am-info__colors {
	display: flex; gap: var(--space-3); flex-wrap: wrap;
}
.am-info__colors .am-swatch { width: 36px; height: 36px; }

/* Size chips */
.am-info__sizes {
	display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.am-info__sizes .am-chip {
	height: 44px; min-width: 56px;
	padding-inline: var(--space-3);
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.am-info__sizes .am-chip[data-state="low"] {
	position: relative;
}
.am-info__sizes .am-chip[data-state="low"]::after {
	content: ""; position: absolute; top: 4px; right: 4px;
	width: 6px; height: 6px;
	background: var(--c-warning);
	border-radius: var(--radius-circle);
}
.am-info__sizes .am-chip[data-state="out"] {
	color: var(--c-ink-soft);
	text-decoration: line-through;
	cursor: not-allowed;
	border-style: dashed;
	opacity: 0.6;
}
.am-info__sizes .am-chip[data-state="out"]:hover { border-color: var(--c-line); }
/* cms7.js підсвічує невибраний обовʼязковий розмір при спробі додати в кошик
   (.cl_red на .cl_param_select). legacy .cl_red тут не вантажиться — даємо
   мовно-нейтральний сигнал у токенах редизайну замість RU-тексту .cl_warn. */
.am-info__sizes .am-chip.cl_red { border-color: var(--c-sale); color: var(--c-sale); }

/* CTAs */
.am-info__ctas {
	display: grid; gap: var(--space-2);
	padding-top: var(--space-3);
}
.am-info__ctas .am-btn { width: 100%; height: 52px; }
.am-info__ctas .am-btn--secondary { height: 44px; font-size: var(--text-body-s); }

/* Quickform (консультант) — приховано за замовч., розгортає cms7.js
   (cl_open_quickform → slideDown). legacy.css у редизайні не вантажиться,
   тож display:none + оформлення несемо тут. */
.cl_quickorder {
	display: none;
	position: relative;
	margin-top: var(--space-3);
	padding: var(--space-4);
	background: var(--c-paper-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-2);
}
.cl_quickorder .cl_close_img {
	position: absolute; top: var(--space-3); right: var(--space-3);
	width: 12px; height: 12px;
	opacity: 0.45; cursor: pointer;
	transition: opacity var(--duration-fast) var(--ease-out);
}
.cl_quickorder .cl_close_img:hover { opacity: 0.9; }
.cl_quickorder .cl_form { display: grid; gap: var(--space-3); }
.cl_quickorder .form-group {
	display: grid; gap: var(--space-1);
	font-size: var(--text-body-s); color: var(--c-ink-soft);
}
.cl_quickorder .form-control,
.cl_quickorder .modal-input {
	width: 100%; height: 44px;
	padding-inline: var(--space-3);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-1);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	color: var(--c-ink);
	transition: border-color var(--duration-fast) var(--ease-out);
}
.cl_quickorder .form-control:focus,
.cl_quickorder .modal-input:focus { outline: none; border-color: var(--c-ink); }
.cl_quickorder .cl_submit {
	height: 48px;
	border: 0; border-radius: var(--radius-1);
	background: var(--c-ink); color: var(--c-paper);
	font-family: var(--font-sans);
	font-size: var(--text-body-s); font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps); text-transform: uppercase;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out);
}
.cl_quickorder .cl_submit:hover { background: var(--c-accent-ink); }
.cl_form_success { display: none; color: var(--c-ink); font-size: var(--text-body-s); }

/* USP */
.am-info__usp {
	display: grid; gap: var(--space-3);
	padding: var(--space-4) 0 0;
	font-size: var(--text-body-s);
	color: var(--c-ink-soft);
}
.am-info__usp-item { display: flex; align-items: center; gap: var(--space-3); }
.am-info__usp-item svg {
	flex: 0 0 auto; width: 20px; height: 20px;
	color: var(--c-ink);
}
.am-info__usp-item strong { color: var(--c-ink); font-weight: var(--fw-medium); }

/* ---------- TABS ---------- */
.am-tabs {
	margin-top: var(--space-9);
	border-top: 1px solid var(--c-line);
	padding-top: var(--space-7);
}
.am-tabs__nav {
	display: flex; gap: var(--space-5);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--c-line);
	margin-bottom: var(--space-6);
}
.am-tabs__nav::-webkit-scrollbar { display: none; }
.am-tabs__tab {
	background: transparent; border: 0; cursor: pointer;
	padding: var(--space-3) 0;
	position: relative;
	font-size: var(--text-body); font-weight: var(--fw-medium);
	color: var(--c-ink-soft);
	letter-spacing: var(--tracking-loose);
	white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-out);
}
.am-tabs__tab:hover { color: var(--c-ink); }
.am-tabs__tab::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--c-ink);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--duration-base) var(--ease-out);
}
.am-tabs__tab.is-active {
	color: var(--c-ink);
}
.am-tabs__tab.is-active::after { transform: scaleX(1); }

.am-tabs__panel { display: none; }
.am-tabs__panel.is-active { display: block; }

.am-tabs__panel .t-prose {
	max-width: 65ch;
	color: var(--c-ink);
	line-height: 1.7;
	font-size: var(--text-body);
}
.am-tabs__panel .t-prose p + p { margin-top: var(--space-3); }

/* Specs table */
.am-specs {
	display: grid; grid-template-columns: max-content 1fr;
	max-width: 560px;
	font-size: var(--text-body-s);
}
.am-specs dt {
	padding: var(--space-3) var(--space-4) var(--space-3) 0;
	color: var(--c-ink-soft);
	border-bottom: 1px solid var(--c-line);
}
.am-specs dd {
	padding: var(--space-3) 0;
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-line);
}
.am-specs > div:last-child > dt,
.am-specs > div:last-child > dd { border-bottom: 0; }

/* Size table */
.am-size-table {
	width: 100%; max-width: 560px;
	font-size: var(--text-body-s);
	font-variant-numeric: tabular-nums;
	border-collapse: collapse;
}
.am-size-table th, .am-size-table td {
	padding: var(--space-3); text-align: center;
	border-bottom: 1px solid var(--c-line);
}
.am-size-table th {
	font-weight: var(--fw-medium);
	color: var(--c-ink-soft);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.am-size-table th:first-child, .am-size-table td:first-child {
	text-align: left;
}

/* ---------- REVIEWS (вкладка «Відгуки покупців») ---------- */
.am-reviews { max-width: 720px; }

/* Список відгуків */
.am-reviews__list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.am-reviews__list:empty { display: none; }
/* get_comments вставляє між картками порожній legacy-спейсер <li> (артефакт старої
   2-колонкової сітки) — у grid він дав би зайву клітинку; ховаємо порожні li. */
.am-reviews__list > li:empty { display: none; }

.am-review {
	padding: var(--space-4) var(--space-5);
	background: var(--c-paper-2);
	border-radius: var(--radius-2);
}
.am-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.am-review__author { font-weight: var(--fw-medium); color: var(--c-ink); }
.am-review__date { display: block; margin-top: 2px; color: var(--c-ink-soft); font-size: var(--text-micro); }
.am-review__text { margin-top: var(--space-3); color: var(--c-ink); font-size: var(--text-body-s); line-height: 1.6; }
.am-review__text p { margin-top: var(--space-2); }
.am-review__text b { font-weight: var(--fw-medium); }
.am-review__reply {
	display: inline-block; margin-top: var(--space-3);
	color: var(--c-ink-soft); font-size: var(--text-micro);
	letter-spacing: var(--tracking-caps); text-transform: uppercase;
	text-decoration: none; border-bottom: 1px solid var(--c-line);
	transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.am-review__reply:hover { color: var(--c-ink); border-color: var(--c-ink); }
.am-review__replies { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0 var(--space-4);
	border-top: 1px dashed var(--c-line); display: grid; gap: var(--space-3); }
.am-review__replies:empty { display: none; }

/* Зірки рейтингу (display). hex дзеркалить токени --c-warning (#B8842E) / --c-line (#E5DDD2). */
.am-stars {
	position: relative; display: inline-block;
	width: 90px; height: 16px; vertical-align: middle;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E5DDD2"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>') repeat-x left center;
	background-size: 18px 16px;
}
.am-stars__fill {
	position: absolute; top: 0; left: 0; height: 100%; max-width: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B8842E"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>') repeat-x left center;
	background-size: 18px 16px;
}

/* Empty state — лише коли список порожній */
.am-reviews-empty {
	display: none;
	text-align: center;
	padding: var(--space-7) var(--space-5);
	background: var(--c-paper-2);
	border-radius: var(--radius-2);
	max-width: 480px;
}
.am-reviews__list:empty ~ .am-reviews-empty { display: block; }
.am-reviews-empty svg { width: 32px; height: 32px; color: var(--c-ink-soft); margin: 0 auto var(--space-4); display: block; }
.am-reviews-empty h3 { margin-bottom: var(--space-2); }
.am-reviews-empty p { color: var(--c-ink-soft); font-size: var(--text-body-s); margin-bottom: var(--space-4); }

/* Кнопка-перемикач «Написати відгук» (коли відгуки вже є) */
.am-reviews__open { display: none; }
.am-reviews__list:not(:empty) ~ .am-reviews__open { display: inline-flex; }
.am-reviews__open svg { width: 16px; height: 16px; }

/* Форма відгуку — згорнута, відкривається кнопкою (product-page.js) */
.am-review-form { display: none; margin-top: var(--space-5); }
.am-reviews.is-review-form-open .am-reviews-empty,
.am-reviews.is-review-form-open .am-reviews__open { display: none; }
.am-reviews.is-review-form-open .am-review-form { display: block; }

.am-review-form__title { font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-4); }
.am-review-form__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.am-field { display: grid; gap: var(--space-1); }
.am-field--full { grid-column: 1 / -1; }
.am-field--rating { align-content: start; }
.am-field__label { font-size: var(--text-body-s); color: var(--c-ink-soft); }
.am-field__input {
	width: 100%; height: 44px; padding: 0 var(--space-3);
	background: var(--c-paper);
	border: 1px solid var(--c-line); border-radius: var(--radius-1);
	font-family: var(--font-sans); font-size: var(--text-body); color: var(--c-ink);
	transition: border-color var(--duration-fast) var(--ease-out);
}
.am-field__textarea { height: auto; min-height: 88px; padding: var(--space-3); resize: vertical; line-height: 1.5; }
.am-field__input:focus { outline: none; border-color: var(--c-ink); }
.am-field__input.cl_red { border-color: var(--c-sale); }

/* Star-picker у формі (cms7.js toggle-ить .active). hex = --c-warning / --c-line. */
.am-review-form .detail-tab-reviews-add-stars { display: inline-flex; gap: var(--space-1); cursor: pointer; }
.am-review-form .detail-tab-reviews-add-stars-i {
	width: 26px; height: 26px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E5DDD2"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>') no-repeat center;
	background-size: 24px 24px;
	transition: transform var(--duration-fast) var(--ease-out);
}
.am-review-form .detail-tab-reviews-add-stars-i:hover { transform: scale(1.1); }
.am-review-form .detail-tab-reviews-add-stars-i.active {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B8842E"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>');
}
.am-review-form__success {
	display: none;
	margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
	background: var(--c-paper-2); border-radius: var(--radius-2);
	color: var(--c-ink); font-size: var(--text-body-s);
}

@media (max-width: 640px) {
	.am-review-form__grid { grid-template-columns: 1fr; }
}

/* ---------- SIMILAR ---------- */
.am-similar {
	margin-top: var(--space-9);
	border-top: 1px solid var(--c-line);
	padding-top: var(--space-7);
	padding-bottom: var(--space-8);
}
.am-similar__head {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: var(--space-5);
	flex-wrap: wrap; gap: var(--space-3);
}
.am-similar__head h2 {
	font-family: var(--font-display);
	font-size: var(--text-display-m);
	line-height: var(--lh-display-m);
	font-weight: var(--fw-regular);
	letter-spacing: var(--tracking-snug);
}
.am-similar__head a {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: var(--text-body-s);
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.am-similar__head a svg { width: 14px; height: 14px; }
.am-similar__grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
}
@media (min-width: 768px) { .am-similar__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- CART DRAWER ---------- */
.am-cart {
	position: fixed; top: 0; right: 0;
	height: 100dvh; width: min(440px, 100vw);
	background: var(--c-paper);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--duration-base) var(--ease-in-out);
	z-index: calc(var(--z-drawer) + 1);
	box-shadow: var(--shadow-3);
}
.am-cart.is-open { transform: translateX(0); }
.am-cart__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-line);
}
.am-cart__head h2 {
	font-family: var(--font-sans);
	font-size: var(--text-h3);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-normal);
}
.am-cart__head h2 span { color: var(--c-ink-soft); font-weight: var(--fw-regular); margin-left: var(--space-2); }
.am-cart__close, .am-fd__close, .am-size__close {
	background: transparent; border: 0; cursor: pointer;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-ink);
}
.am-cart__close svg, .am-fd__close svg, .am-size__close svg { width: 22px; height: 22px; }

.am-cart__body { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.am-cart__item {
	display: grid; grid-template-columns: 80px 1fr auto;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-line);
}
.am-cart__item-media {
	aspect-ratio: 3 / 4;
	background: var(--c-paper-2);
	overflow: hidden;
	border-radius: var(--radius-1);
}
.am-cart__item-media img { width: 100%; height: 100%; object-fit: cover; }
.am-cart__item-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.am-cart__item-brand { font-size: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-soft); }
.am-cart__item-title { font-size: var(--text-body-s); color: var(--c-ink); line-height: 1.4; }
.am-cart__item-variant { font-size: var(--text-micro); color: var(--c-ink-soft); margin-top: var(--space-1); }
.am-cart__item-qty {
	display: inline-flex; align-items: center;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-1);
	margin-top: var(--space-2);
	width: fit-content;
}
.am-cart__item-qty button {
	background: transparent; border: 0; cursor: pointer;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-ink);
	font-size: var(--text-body);
}
.am-cart__item-qty span {
	min-width: 28px; text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: var(--text-body-s);
}
.am-cart__item-right {
	display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
	text-align: right;
}
.am-cart__item-price {
	font-size: var(--text-body-s); font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
}
.am-cart__item-remove {
	background: transparent; border: 0; cursor: pointer;
	font-size: var(--text-micro);
	color: var(--c-ink-soft);
	padding: 0; line-height: 1;
	text-decoration: underline; text-underline-offset: 3px;
}
.am-cart__item-remove:hover { color: var(--c-sale); }

.am-cart__progress {
	padding: var(--space-3) var(--space-5);
	background: var(--c-paper-2);
	font-size: var(--text-body-s);
}
.am-cart__progress-text { color: var(--c-ink-soft); margin-bottom: var(--space-2); }
.am-cart__progress-text strong { color: var(--c-ink); font-weight: var(--fw-medium); }
.am-cart__progress-bar {
	height: 3px; background: var(--c-line); border-radius: var(--radius-pill);
	overflow: hidden;
}
.am-cart__progress-fill {
	height: 100%; background: var(--c-ink);
	width: 75%;
	transition: width var(--duration-base) var(--ease-out);
}

.am-cart__foot {
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--c-line);
	display: grid; gap: var(--space-3);
}
.am-cart__subtotal {
	display: flex; justify-content: space-between;
	font-size: var(--text-body);
	font-variant-numeric: tabular-nums;
}
.am-cart__subtotal strong { font-weight: var(--fw-medium); }
.am-cart__foot .am-btn { width: 100%; height: 52px; }
.am-cart__foot .am-btn--ghost { height: 36px; font-size: var(--text-body-s); }

/* ---------- SIZE GUIDE DRAWER ---------- */
.am-size {
	position: fixed; top: 0; right: 0;
	height: 100dvh; width: min(900px, 100vw);
	background: var(--c-paper);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--duration-base) var(--ease-in-out);
	z-index: calc(var(--z-drawer) + 1);
	box-shadow: var(--shadow-3);
}
.am-size.is-open { transform: translateX(0); }
.am-size__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--c-line);
}
.am-size__head h2 {
	font-family: var(--font-sans); font-size: var(--text-h3);
	font-weight: var(--fw-medium); letter-spacing: var(--tracking-normal);
}
.am-size__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.am-size__body p { color: var(--c-ink-soft); font-size: var(--text-body-s); margin-bottom: var(--space-4); }